227 lines
9.0 KiB
HTML
Executable File
227 lines
9.0 KiB
HTML
Executable File
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>链接OG信息查询 - 神秘解析器</title>
|
||
<meta name="description" content="高级链接OG信息查询工具，解析网页元数据">
|
||
<link rel="stylesheet" href="css/style.css">
|
||
<link rel="stylesheet" href="css/background.css">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||
</head>
|
||
<body>
|
||
<!-- 背景特效容器 -->
|
||
<div class="background-container">
|
||
<div class="matrix-rain"></div>
|
||
<div class="geometric-shapes"></div>
|
||
<div class="neural-network"></div>
|
||
</div>
|
||
|
||
<!-- 主容器 -->
|
||
<div class="main-container">
|
||
<!-- 头部区域 -->
|
||
<header class="header">
|
||
<div class="header-content">
|
||
<div class="logo-section">
|
||
<i class="fas fa-link logo-icon"></i>
|
||
<h1 class="title">OG 解析器</h1>
|
||
<span class="subtitle">链接元数据神秘解析</span>
|
||
</div>
|
||
<div class="status-indicator">
|
||
<div class="pulse-dot"></div>
|
||
<span class="status-text">系统就绪</span>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- 查询区域 -->
|
||
<section class="query-section">
|
||
<div class="input-container">
|
||
<div class="input-wrapper">
|
||
<i class="fas fa-globe input-icon"></i>
|
||
<input type="url" id="url-input" placeholder="输入链接地址进行深度解析..." class="url-input">
|
||
<div class="input-border"></div>
|
||
</div>
|
||
<button id="analyze-btn" class="analyze-btn">
|
||
<span class="btn-text">开始解析</span>
|
||
<div class="btn-effects">
|
||
<div class="ripple"></div>
|
||
<div class="glow"></div>
|
||
</div>
|
||
</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 加载状态 -->
|
||
<div id="loading" class="loading-container" style="display: none;">
|
||
<div class="loading-content">
|
||
<div class="scanner">
|
||
<div class="scanner-line"></div>
|
||
<div class="scanner-grid">
|
||
<div class="grid-line"></div>
|
||
<div class="grid-line"></div>
|
||
<div class="grid-line"></div>
|
||
<div class="grid-line"></div>
|
||
</div>
|
||
</div>
|
||
<div class="loading-text">
|
||
<span class="loading-title">正在解析链接</span>
|
||
<span class="loading-subtitle">深度扫描元数据中...</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 结果展示区域 -->
|
||
<section id="results" class="results-section" style="display: none;">
|
||
<div class="results-header">
|
||
<h2 class="results-title">
|
||
<i class="fas fa-chart-network"></i>
|
||
解析结果
|
||
</h2>
|
||
<div class="results-actions">
|
||
<button id="copy-btn" class="action-btn">
|
||
<i class="fas fa-copy"></i>
|
||
<span>复制数据</span>
|
||
</button>
|
||
<button id="clear-btn" class="action-btn">
|
||
<i class="fas fa-trash"></i>
|
||
<span>清除结果</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="og-card">
|
||
<!-- 基础信息 -->
|
||
<div class="info-section basic-info">
|
||
<div class="section-header">
|
||
<i class="fas fa-info-circle"></i>
|
||
<span>基础信息</span>
|
||
</div>
|
||
<div class="info-grid">
|
||
<div class="info-item">
|
||
<label>标题</label>
|
||
<div id="og-title" class="info-value">-</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<label>描述</label>
|
||
<div id="og-description" class="info-value">-</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<label>网站名称</label>
|
||
<div id="og-site-name" class="info-value">-</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<label>类型</label>
|
||
<div id="og-type" class="info-value">-</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 媒体信息 -->
|
||
<div class="info-section media-info">
|
||
<div class="section-header">
|
||
<i class="fas fa-image"></i>
|
||
<span>媒体信息</span>
|
||
</div>
|
||
<div class="media-preview" id="media-preview">
|
||
<div class="no-media">
|
||
<i class="fas fa-image-slash"></i>
|
||
<span>暂无媒体内容</span>
|
||
</div>
|
||
</div>
|
||
<div class="media-details">
|
||
<div class="info-item">
|
||
<label>图片URL</label>
|
||
<div id="og-image" class="info-value url-value">-</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<label>图片描述</label>
|
||
<div id="og-image-alt" class="info-value">-</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 技术信息 -->
|
||
<div class="info-section tech-info">
|
||
<div class="section-header">
|
||
<i class="fas fa-code"></i>
|
||
<span>技术信息</span>
|
||
</div>
|
||
<div class="info-grid">
|
||
<div class="info-item">
|
||
<label>URL</label>
|
||
<div id="og-url" class="info-value url-value">-</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<label>域名</label>
|
||
<div id="og-domain" class="info-value">-</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<label>语言</label>
|
||
<div id="og-locale" class="info-value">-</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<label>更新时间</label>
|
||
<div id="og-updated-time" class="info-value">-</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<label>响应时间</label>
|
||
<div id="response-time" class="info-value">-</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 错误信息 -->
|
||
<div id="error" class="error-container" style="display: none;">
|
||
<div class="error-content">
|
||
<div class="error-icon">
|
||
<i class="fas fa-exclamation-triangle"></i>
|
||
</div>
|
||
<div class="error-text">
|
||
<h3 class="error-title">解析失败</h3>
|
||
<p id="error-message" class="error-message">未知错误</p>
|
||
</div>
|
||
<button id="retryBtn" class="retry-btn">
|
||
<i class="fas fa-redo"></i>
|
||
<span>重新尝试</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 提示消息 -->
|
||
<div id="tip-message" class="tip-container">
|
||
<div class="tip-content">
|
||
<i class="fas fa-lightbulb tip-icon"></i>
|
||
<span class="tip-text"></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Toast消息 -->
|
||
<div id="toast" class="toast-container">
|
||
<div class="toast-content">
|
||
<i class="toast-icon"></i>
|
||
<span class="toast-message"></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 页脚 -->
|
||
<footer class="footer">
|
||
<div class="footer-content">
|
||
<p class="footer-text">
|
||
<i class="fas fa-shield-alt"></i>
|
||
高级链接解析系统 | 神秘数据挖掘
|
||
</p>
|
||
<div class="footer-links">
|
||
<span class="footer-link">隐私保护</span>
|
||
<span class="footer-divider">|</span>
|
||
<span class="footer-link">安全解析</span>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="js/script.js"></script>
|
||
</body>
|
||
</html> |