diff --git a/frontend/60sapi/实用功能/公网IP地址/css/background.css b/frontend/60sapi/实用功能/公网IP地址/css/background.css
new file mode 100644
index 00000000..74f65ebc
--- /dev/null
+++ b/frontend/60sapi/实用功能/公网IP地址/css/background.css
@@ -0,0 +1,233 @@
+/* 动态背景样式 */
+body::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    z-index: -2;
+}
+
+body::after {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: 
+        radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
+        radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
+        radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.3) 0%, transparent 50%);
+    z-index: -1;
+    animation: backgroundMove 20s ease-in-out infinite;
+}
+
+@keyframes backgroundMove {
+    0%, 100% {
+        background: 
+            radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
+            radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
+            radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.3) 0%, transparent 50%);
+    }
+    25% {
+        background: 
+            radial-gradient(circle at 60% 30%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
+            radial-gradient(circle at 30% 70%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
+            radial-gradient(circle at 80% 80%, rgba(120, 219, 255, 0.3) 0%, transparent 50%);
+    }
+    50% {
+        background: 
+            radial-gradient(circle at 80% 60%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
+            radial-gradient(circle at 20% 30%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
+            radial-gradient(circle at 60% 70%, rgba(120, 219, 255, 0.3) 0%, transparent 50%);
+    }
+    75% {
+        background: 
+            radial-gradient(circle at 40% 90%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
+            radial-gradient(circle at 70% 10%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
+            radial-gradient(circle at 20% 60%, rgba(120, 219, 255, 0.3) 0%, transparent 50%);
+    }
+}
+
+/* 浮动粒子效果 */
+.particles {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: -1;
+}
+
+.particle {
+    position: absolute;
+    width: 4px;
+    height: 4px;
+    background: rgba(255, 255, 255, 0.5);
+    border-radius: 50%;
+    animation: float 15s infinite linear;
+}
+
+.particle:nth-child(1) {
+    left: 10%;
+    animation-delay: 0s;
+    animation-duration: 12s;
+}
+
+.particle:nth-child(2) {
+    left: 20%;
+    animation-delay: 2s;
+    animation-duration: 18s;
+}
+
+.particle:nth-child(3) {
+    left: 30%;
+    animation-delay: 4s;
+    animation-duration: 15s;
+}
+
+.particle:nth-child(4) {
+    left: 40%;
+    animation-delay: 6s;
+    animation-duration: 20s;
+}
+
+.particle:nth-child(5) {
+    left: 50%;
+    animation-delay: 8s;
+    animation-duration: 14s;
+}
+
+.particle:nth-child(6) {
+    left: 60%;
+    animation-delay: 10s;
+    animation-duration: 16s;
+}
+
+.particle:nth-child(7) {
+    left: 70%;
+    animation-delay: 12s;
+    animation-duration: 22s;
+}
+
+.particle:nth-child(8) {
+    left: 80%;
+    animation-delay: 14s;
+    animation-duration: 13s;
+}
+
+.particle:nth-child(9) {
+    left: 90%;
+    animation-delay: 16s;
+    animation-duration: 19s;
+}
+
+.particle:nth-child(10) {
+    left: 15%;
+    animation-delay: 18s;
+    animation-duration: 17s;
+}
+
+@keyframes float {
+    0% {
+        transform: translateY(100vh) rotate(0deg);
+        opacity: 0;
+    }
+    10% {
+        opacity: 1;
+    }
+    90% {
+        opacity: 1;
+    }
+    100% {
+        transform: translateY(-100px) rotate(360deg);
+        opacity: 0;
+    }
+}
+
+/* 网格背景效果 */
+.grid-background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: 
+        linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
+    background-size: 50px 50px;
+    z-index: -1;
+    opacity: 0.3;
+    animation: gridMove 30s linear infinite;
+}
+
+@keyframes gridMove {
+    0% {
+        transform: translate(0, 0);
+    }
+    100% {
+        transform: translate(50px, 50px);
+    }
+}
+
+/* 光晕效果 */
+.glow-effect {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    width: 300px;
+    height: 300px;
+    background: radial-gradient(circle, rgba(74, 144, 226, 0.2) 0%, transparent 70%);
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    z-index: -1;
+    animation: pulse 4s ease-in-out infinite;
+}
+
+@keyframes pulse {
+    0%, 100% {
+        transform: translate(-50%, -50%) scale(1);
+        opacity: 0.5;
+    }
+    50% {
+        transform: translate(-50%, -50%) scale(1.2);
+        opacity: 0.8;
+    }
+}
+
+/* 响应式背景调整 */
+@media (max-width: 768px) {
+    .grid-background {
+        background-size: 30px 30px;
+    }
+    
+    .glow-effect {
+        width: 200px;
+        height: 200px;
+    }
+    
+    .particle {
+        width: 3px;
+        height: 3px;
+    }
+}
+
+@media (max-width: 480px) {
+    .grid-background {
+        background-size: 20px 20px;
+    }
+    
+    .glow-effect {
+        width: 150px;
+        height: 150px;
+    }
+    
+    .particle {
+        width: 2px;
+        height: 2px;
+    }
+}
\ No newline at end of file
diff --git a/frontend/60sapi/实用功能/公网IP地址/css/style.css b/frontend/60sapi/实用功能/公网IP地址/css/style.css
new file mode 100644
index 00000000..30d4768f
--- /dev/null
+++ b/frontend/60sapi/实用功能/公网IP地址/css/style.css
@@ -0,0 +1,445 @@
+/* 全局样式重置 */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    line-height: 1.6;
+    color: #333;
+    min-height: 100vh;
+    overflow-x: hidden;
+}
+
+/* 容器样式 */
+.container {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    z-index: 1;
+}
+
+/* 头部样式 */
+.header {
+    text-align: center;
+    padding: 3rem 2rem 2rem;
+    background: linear-gradient(135deg, rgba(74, 144, 226, 0.1), rgba(80, 200, 120, 0.1));
+    backdrop-filter: blur(10px);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.header h1 {
+    font-size: 2.5rem;
+    font-weight: 700;
+    background: linear-gradient(135deg, #4a90e2, #50c878);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    margin-bottom: 0.5rem;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.header h1 i {
+    margin-right: 0.5rem;
+    background: linear-gradient(135deg, #4a90e2, #50c878);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.subtitle {
+    font-size: 1.1rem;
+    color: #666;
+    font-weight: 300;
+}
+
+/* 主要内容区域 */
+.main-content {
+    flex: 1;
+    padding: 2rem;
+    max-width: 800px;
+    margin: 0 auto;
+    width: 100%;
+}
+
+/* 查询按钮区域 */
+.query-section {
+    text-align: center;
+    margin-bottom: 2rem;
+}
+
+.query-btn {
+    background: linear-gradient(135deg, #4a90e2, #50c878);
+    color: white;
+    border: none;
+    padding: 1rem 2rem;
+    font-size: 1.1rem;
+    font-weight: 600;
+    border-radius: 50px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3);
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-width: 200px;
+    justify-content: center;
+}
+
+.query-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(74, 144, 226, 0.4);
+    background: linear-gradient(135deg, #3a7bc8, #40a868);
+}
+
+.query-btn:active {
+    transform: translateY(0);
+}
+
+.query-btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    transform: none;
+}
+
+/* 加载动画 */
+.loading {
+    text-align: center;
+    padding: 2rem;
+}
+
+.spinner {
+    width: 50px;
+    height: 50px;
+    border: 4px solid #f3f3f3;
+    border-top: 4px solid #4a90e2;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin: 0 auto 1rem;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+.loading p {
+    color: #666;
+    font-size: 1rem;
+}
+
+/* IP信息卡片 */
+.ip-info {
+    animation: fadeInUp 0.6s ease;
+}
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.ip-card {
+    background: rgba(255, 255, 255, 0.9);
+    backdrop-filter: blur(10px);
+    border-radius: 20px;
+    padding: 2rem;
+    margin-bottom: 2rem;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.ip-header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 1.5rem;
+    padding-bottom: 1rem;
+    border-bottom: 2px solid #f0f0f0;
+}
+
+.ip-header i {
+    font-size: 1.5rem;
+    color: #4a90e2;
+}
+
+.ip-header h2 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: #333;
+}
+
+.ip-display {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+    padding: 1.5rem;
+    background: linear-gradient(135deg, rgba(74, 144, 226, 0.1), rgba(80, 200, 120, 0.1));
+    border-radius: 15px;
+    border: 2px solid rgba(74, 144, 226, 0.2);
+}
+
+.ip-address {
+    font-size: 2rem;
+    font-weight: 700;
+    font-family: 'Courier New', monospace;
+    color: #2c3e50;
+    background: linear-gradient(135deg, #4a90e2, #50c878);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.copy-btn {
+    background: #4a90e2;
+    color: white;
+    border: none;
+    padding: 0.5rem;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-size: 1rem;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.copy-btn:hover {
+    background: #3a7bc8;
+    transform: scale(1.1);
+}
+
+.ip-details {
+    display: grid;
+    gap: 1rem;
+}
+
+.detail-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem;
+    background: rgba(248, 249, 250, 0.8);
+    border-radius: 10px;
+    transition: all 0.3s ease;
+}
+
+.detail-item:hover {
+    background: rgba(74, 144, 226, 0.1);
+    transform: translateX(5px);
+}
+
+.detail-item i {
+    color: #4a90e2;
+    width: 20px;
+    text-align: center;
+}
+
+.detail-item .label {
+    font-weight: 600;
+    color: #555;
+    min-width: 80px;
+}
+
+.detail-item .value {
+    color: #333;
+    font-weight: 500;
+}
+
+/* IP地址说明区域 */
+.ip-explanation {
+    background: rgba(255, 255, 255, 0.9);
+    backdrop-filter: blur(10px);
+    border-radius: 20px;
+    padding: 2rem;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.ip-explanation h3 {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+    font-size: 1.3rem;
+    color: #333;
+}
+
+.ip-explanation h3 i {
+    color: #4a90e2;
+}
+
+.ip-explanation p {
+    color: #666;
+    line-height: 1.8;
+    margin-bottom: 1.5rem;
+}
+
+.features {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 1rem;
+}
+
+.feature-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 1rem;
+    padding: 1rem;
+    background: rgba(248, 249, 250, 0.8);
+    border-radius: 12px;
+    transition: all 0.3s ease;
+}
+
+.feature-item:hover {
+    background: rgba(74, 144, 226, 0.1);
+    transform: translateY(-2px);
+}
+
+.feature-item i {
+    color: #4a90e2;
+    font-size: 1.5rem;
+    margin-top: 0.2rem;
+}
+
+.feature-item h4 {
+    font-size: 1rem;
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 0.3rem;
+}
+
+.feature-item p {
+    font-size: 0.9rem;
+    color: #666;
+    line-height: 1.5;
+    margin: 0;
+}
+
+/* 错误信息 */
+.error-message {
+    text-align: center;
+    padding: 2rem;
+    background: rgba(255, 255, 255, 0.9);
+    backdrop-filter: blur(10px);
+    border-radius: 20px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+    border: 1px solid rgba(255, 99, 99, 0.3);
+    animation: fadeInUp 0.6s ease;
+}
+
+.error-message i {
+    font-size: 3rem;
+    color: #ff6b6b;
+    margin-bottom: 1rem;
+}
+
+.error-message p {
+    color: #666;
+    font-size: 1.1rem;
+    margin-bottom: 1.5rem;
+}
+
+.retry-btn {
+    background: #ff6b6b;
+    color: white;
+    border: none;
+    padding: 0.75rem 1.5rem;
+    font-size: 1rem;
+    font-weight: 600;
+    border-radius: 25px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.retry-btn:hover {
+    background: #ff5252;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
+}
+
+/* 页脚 */
+.footer {
+    text-align: center;
+    padding: 2rem;
+    background: rgba(248, 249, 250, 0.8);
+    backdrop-filter: blur(10px);
+    border-top: 1px solid rgba(255, 255, 255, 0.2);
+    color: #666;
+    font-size: 0.9rem;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+    .header {
+        padding: 2rem 1rem 1.5rem;
+    }
+    
+    .header h1 {
+        font-size: 2rem;
+    }
+    
+    .main-content {
+        padding: 1rem;
+    }
+    
+    .ip-card, .ip-explanation {
+        padding: 1.5rem;
+    }
+    
+    .ip-address {
+        font-size: 1.5rem;
+    }
+    
+    .ip-display {
+        flex-direction: column;
+        gap: 1rem;
+    }
+    
+    .features {
+        grid-template-columns: 1fr;
+    }
+    
+    .detail-item {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.3rem;
+    }
+    
+    .detail-item .label {
+        min-width: auto;
+    }
+}
+
+@media (max-width: 480px) {
+    .header h1 {
+        font-size: 1.8rem;
+    }
+    
+    .query-btn {
+        padding: 0.875rem 1.5rem;
+        font-size: 1rem;
+        min-width: 180px;
+    }
+    
+    .ip-address {
+        font-size: 1.3rem;
+    }
+    
+    .ip-card, .ip-explanation {
+        padding: 1rem;
+    }
+}
\ No newline at end of file
diff --git a/frontend/60sapi/实用功能/公网IP地址/index.html b/frontend/60sapi/实用功能/公网IP地址/index.html
new file mode 100644
index 00000000..875fb9f0
--- /dev/null
+++ b/frontend/60sapi/实用功能/公网IP地址/index.html
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>公网IP地址查询</title>
+    <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="container">
+        <!-- 头部 -->
+        <header class="header">
+            <h1><i class="fas fa-globe"></i> 公网IP地址查询</h1>
+            <p class="subtitle">快速获取您的公网IP地址信息</p>
+        </header>
+
+        <!-- 主要内容区域 -->
+        <main class="main-content">
+            <!-- 查询按钮区域 -->
+            <div class="query-section">
+                <button id="queryBtn" class="query-btn">
+                    <i class="fas fa-search"></i>
+                    <span>查询我的IP地址</span>
+                </button>
+            </div>
+
+            <!-- 加载动画 -->
+            <div id="loading" class="loading" style="display: none;">
+                <div class="spinner"></div>
+                <p>正在获取IP地址信息...</p>
+            </div>
+
+            <!-- IP信息展示区域 -->
+            <div id="ip-info" class="ip-info" style="display: none;">
+                <div class="ip-card">
+                    <div class="ip-header">
+                        <i class="fas fa-network-wired"></i>
+                        <h2>您的公网IP地址</h2>
+                    </div>
+                    <div class="ip-display">
+                        <span id="ip-address" class="ip-address">---.---.---.---</span>
+                        <button id="copyBtn" class="copy-btn" title="复制IP地址">
+                            <i class="fas fa-copy"></i>
+                        </button>
+                    </div>
+                    <div class="ip-details">
+                        <div class="detail-item">
+                            <i class="fas fa-clock"></i>
+                            <span class="label">查询时间:</span>
+                            <span id="query-time" class="value">--</span>
+                        </div>
+                        <div class="detail-item">
+                            <i class="fas fa-server"></i>
+                            <span class="label">数据来源:</span>
+                            <span class="value">60s.viki.moe</span>
+                        </div>
+                        <div class="detail-item">
+                            <i class="fas fa-map-marker-alt"></i>
+                            <span class="label">位置信息:</span>
+                            <span id="location" class="value">--</span>
+                        </div>
+                        <div class="detail-item">
+                            <i class="fas fa-building"></i>
+                            <span class="label">网络服务商:</span>
+                            <span id="isp" class="value">--</span>
+                        </div>
+                        <div class="detail-item">
+                            <i class="fas fa-flag"></i>
+                            <span class="label">国家:</span>
+                            <span id="country" class="value">--</span>
+                        </div>
+                        <div class="detail-item">
+                            <i class="fas fa-map"></i>
+                            <span class="label">地区:</span>
+                            <span id="region" class="value">--</span>
+                        </div>
+                        <div class="detail-item">
+                            <i class="fas fa-city"></i>
+                            <span class="label">城市:</span>
+                            <span id="city" class="value">--</span>
+                        </div>
+                        <div class="detail-item">
+                            <i class="fas fa-clock"></i>
+                            <span class="label">时区:</span>
+                            <span id="timezone" class="value">--</span>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- IP地址信息说明 -->
+                <div class="ip-explanation">
+                    <h3><i class="fas fa-info-circle"></i> 什么是公网IP地址？</h3>
+                    <p>公网IP地址是您的设备在互联网上的唯一标识符，由您的网络服务提供商(ISP)分配。通过这个地址，互联网上的其他设备可以找到并与您的设备通信。</p>
+                    
+                    <div class="features">
+                        <div class="feature-item">
+                            <i class="fas fa-shield-alt"></i>
+                            <div>
+                                <h4>隐私保护</h4>
+                                <p>了解您的IP地址有助于保护网络隐私</p>
+                            </div>
+                        </div>
+                        <div class="feature-item">
+                            <i class="fas fa-map-marker-alt"></i>
+                            <div>
+                                <h4>地理位置</h4>
+                                <p>IP地址可以大致确定您的地理位置</p>
+                            </div>
+                        </div>
+                        <div class="feature-item">
+                            <i class="fas fa-cogs"></i>
+                            <div>
+                                <h4>网络配置</h4>
+                                <p>用于网络故障排除和配置</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 错误信息 -->
+            <div id="error-message" class="error-message" style="display: none;">
+                <i class="fas fa-exclamation-triangle"></i>
+                <p>获取IP地址失败，请检查网络连接或稍后重试</p>
+                <button id="retryBtn" class="retry-btn">重试</button>
+            </div>
+        </main>
+
+        <!-- 页脚 -->
+        <footer class="footer">
+            <p>&copy; 2024 公网IP地址查询工具 | 数据来源: 60s.viki.moe</p>
+        </footer>
+    </div>
+
+    <script src="js/script.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/frontend/60sapi/实用功能/公网IP地址/js/script.js b/frontend/60sapi/实用功能/公网IP地址/js/script.js
new file mode 100644
index 00000000..4db5e4bd
--- /dev/null
+++ b/frontend/60sapi/实用功能/公网IP地址/js/script.js
@@ -0,0 +1,315 @@
+// 公网IP地址查询应用
+class IPQueryApp {
+    constructor() {
+        this.apiEndpoint = 'https://60s.viki.moe/v2/ip';
+        this.init();
+    }
+
+    // 初始化应用
+    init() {
+        this.bindEvents();
+        this.createParticles();
+        this.createBackgroundElements();
+        console.log('IP查询应用初始化完成');
+    }
+
+    // 绑定事件
+    bindEvents() {
+        const queryBtn = document.getElementById('queryBtn');
+        const retryBtn = document.getElementById('retryBtn');
+        const copyBtn = document.getElementById('copyBtn');
+
+        if (queryBtn) {
+            queryBtn.addEventListener('click', () => this.queryIP());
+        }
+
+        if (retryBtn) {
+            retryBtn.addEventListener('click', () => this.queryIP());
+        }
+
+        if (copyBtn) {
+            copyBtn.addEventListener('click', () => this.copyIP());
+        }
+
+        // 页面加载完成后自动查询一次
+        document.addEventListener('DOMContentLoaded', () => {
+            setTimeout(() => this.queryIP(), 500);
+        });
+    }
+
+    // 创建浮动粒子
+    createParticles() {
+        const particlesContainer = document.createElement('div');
+        particlesContainer.className = 'particles';
+        document.body.appendChild(particlesContainer);
+
+        for (let i = 0; i < 10; i++) {
+            const particle = document.createElement('div');
+            particle.className = 'particle';
+            particlesContainer.appendChild(particle);
+        }
+    }
+
+    // 创建背景元素
+    createBackgroundElements() {
+        // 创建网格背景
+        const gridBackground = document.createElement('div');
+        gridBackground.className = 'grid-background';
+        document.body.appendChild(gridBackground);
+
+        // 创建光晕效果
+        const glowEffect = document.createElement('div');
+        glowEffect.className = 'glow-effect';
+        document.body.appendChild(glowEffect);
+    }
+
+    // 显示加载状态
+    showLoading() {
+        const loading = document.getElementById('loading');
+        const ipInfo = document.getElementById('ipInfo');
+        const errorMessage = document.getElementById('errorMessage');
+        const queryBtn = document.getElementById('queryBtn');
+
+        if (loading) loading.style.display = 'block';
+        if (ipInfo) ipInfo.style.display = 'none';
+        if (errorMessage) errorMessage.style.display = 'none';
+        if (queryBtn) {
+            queryBtn.disabled = true;
+            queryBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 查询中...';
+        }
+    }
+
+    // 隐藏加载状态
+    hideLoading() {
+        const loading = document.getElementById('loading');
+        const queryBtn = document.getElementById('queryBtn');
+
+        if (loading) loading.style.display = 'none';
+        if (queryBtn) {
+            queryBtn.disabled = false;
+            queryBtn.innerHTML = '<i class="fas fa-search"></i> 查询我的IP';
+        }
+    }
+
+    // 显示错误信息
+    showError(message) {
+        const errorMessage = document.getElementById('error-message');
+        const ipInfo = document.getElementById('ip-info');
+
+        if (errorMessage) {
+            errorMessage.style.display = 'block';
+            const errorText = errorMessage.querySelector('p');
+            if (errorText) errorText.textContent = message || '获取IP信息失败，请稍后重试';
+        }
+        if (ipInfo) ipInfo.style.display = 'none';
+        
+        this.hideLoading();
+    }
+
+    // 查询IP地址
+    async queryIP() {
+        try {
+            this.showLoading();
+            console.log('开始查询IP地址...');
+
+            const response = await fetch(this.apiEndpoint, {
+                method: 'GET',
+                headers: {
+                    'Accept': 'application/json',
+                    'Content-Type': 'application/json'
+                }
+            });
+
+            console.log('API响应状态:', response.status);
+
+            if (!response.ok) {
+                throw new Error(`HTTP错误: ${response.status}`);
+            }
+
+            const data = await response.json();
+            console.log('API返回数据:', data);
+
+            if (data.code === 200 && data.data) {
+                this.displayIPInfo(data.data);
+            } else {
+                throw new Error(data.message || '获取IP信息失败');
+            }
+
+        } catch (error) {
+            console.error('查询IP失败:', error);
+            this.showError(error.message);
+        }
+    }
+
+    // 显示IP信息
+    displayIPInfo(data) {
+        const ipInfo = document.getElementById('ip-info');
+        const errorMessage = document.getElementById('error-message');
+        
+        // 更新IP地址显示
+        const ipAddressElement = document.getElementById('ip-address');
+        if (ipAddressElement && data.ip) {
+            ipAddressElement.textContent = data.ip;
+        }
+
+        // 更新查询时间
+        const queryTimeElement = document.getElementById('query-time');
+        if (queryTimeElement) {
+            const now = new Date();
+            queryTimeElement.textContent = now.toLocaleString('zh-CN');
+        }
+
+        // 更新详细信息
+        this.updateDetailItem('location', data.location || '未知');
+        this.updateDetailItem('isp', data.isp || '未知');
+        this.updateDetailItem('country', data.country || '未知');
+        this.updateDetailItem('region', data.region || '未知');
+        this.updateDetailItem('city', data.city || '未知');
+        this.updateDetailItem('timezone', data.timezone || '未知');
+
+        // 显示IP信息，隐藏错误信息
+        if (ipInfo) ipInfo.style.display = 'block';
+        if (errorMessage) errorMessage.style.display = 'none';
+        
+        this.hideLoading();
+        console.log('IP信息显示完成');
+    }
+
+    // 更新详细信息项
+    updateDetailItem(id, value) {
+        const element = document.getElementById(id);
+        if (element) {
+            element.textContent = value;
+        }
+    }
+
+    // 复制IP地址
+    async copyIP() {
+        const ipAddressElement = document.getElementById('ip-address');
+        const copyBtn = document.getElementById('copyBtn');
+        
+        if (!ipAddressElement || !ipAddressElement.textContent) {
+            this.showToast('没有可复制的IP地址', 'error');
+            return;
+        }
+
+        try {
+            await navigator.clipboard.writeText(ipAddressElement.textContent);
+            
+            // 更新按钮状态
+            if (copyBtn) {
+                const originalHTML = copyBtn.innerHTML;
+                copyBtn.innerHTML = '<i class="fas fa-check"></i>';
+                copyBtn.style.background = '#50c878';
+                
+                setTimeout(() => {
+                    copyBtn.innerHTML = originalHTML;
+                    copyBtn.style.background = '#4a90e2';
+                }, 1500);
+            }
+            
+            this.showToast('IP地址已复制到剪贴板', 'success');
+            console.log('IP地址已复制:', ipAddressElement.textContent);
+            
+        } catch (error) {
+            console.error('复制失败:', error);
+            this.showToast('复制失败，请手动选择复制', 'error');
+        }
+    }
+
+    // 显示提示消息
+    showToast(message, type = 'info') {
+        // 移除已存在的toast
+        const existingToast = document.querySelector('.toast');
+        if (existingToast) {
+            existingToast.remove();
+        }
+
+        // 创建新的toast
+        const toast = document.createElement('div');
+        toast.className = `toast toast-${type}`;
+        toast.innerHTML = `
+            <i class="fas fa-${type === 'success' ? 'check-circle' : type === 'error' ? 'exclamation-circle' : 'info-circle'}"></i>
+            <span>${message}</span>
+        `;
+
+        // 添加toast样式
+        toast.style.cssText = `
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            background: ${type === 'success' ? '#50c878' : type === 'error' ? '#ff6b6b' : '#4a90e2'};
+            color: white;
+            padding: 1rem 1.5rem;
+            border-radius: 10px;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+            z-index: 1000;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            font-weight: 500;
+            animation: slideInRight 0.3s ease;
+            max-width: 300px;
+        `;
+
+        // 添加动画样式
+        const style = document.createElement('style');
+        style.textContent = `
+            @keyframes slideInRight {
+                from {
+                    transform: translateX(100%);
+                    opacity: 0;
+                }
+                to {
+                    transform: translateX(0);
+                    opacity: 1;
+                }
+            }
+            @keyframes slideOutRight {
+                from {
+                    transform: translateX(0);
+                    opacity: 1;
+                }
+                to {
+                    transform: translateX(100%);
+                    opacity: 0;
+                }
+            }
+        `;
+        document.head.appendChild(style);
+
+        document.body.appendChild(toast);
+
+        // 3秒后自动移除
+        setTimeout(() => {
+            toast.style.animation = 'slideOutRight 0.3s ease';
+            setTimeout(() => {
+                if (toast.parentNode) {
+                    toast.remove();
+                }
+                if (style.parentNode) {
+                    style.remove();
+                }
+            }, 300);
+        }, 3000);
+    }
+
+    // 格式化时间
+    formatTime(timestamp) {
+        const date = new Date(timestamp);
+        return date.toLocaleString('zh-CN', {
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+            hour: '2-digit',
+            minute: '2-digit',
+            second: '2-digit'
+        });
+    }
+}
+
+// 初始化应用
+const app = new IPQueryApp();
+
+// 导出到全局作用域（用于调试）
+window.IPQueryApp = app;
\ No newline at end of file
diff --git a/frontend/60sapi/实用功能/公网IP地址/接口集合.json b/frontend/60sapi/实用功能/公网IP地址/接口集合.json
new file mode 100644
index 00000000..60c81034
--- /dev/null
+++ b/frontend/60sapi/实用功能/公网IP地址/接口集合.json
@@ -0,0 +1,3 @@
+[
+    "https://60s.viki.moe/v2/ip"
+]
diff --git a/frontend/60sapi/实用功能/公网IP地址/返回接口.json b/frontend/60sapi/实用功能/公网IP地址/返回接口.json
new file mode 100644
index 00000000..e69de29b
diff --git a/frontend/60sapi/实用功能/哈希解压压缩/css/style.css b/frontend/60sapi/实用功能/哈希解压压缩/css/style.css
new file mode 100644
index 00000000..4b94a03d
--- /dev/null
+++ b/frontend/60sapi/实用功能/哈希解压压缩/css/style.css
@@ -0,0 +1,561 @@
+/* Reset and Base Styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    color: #333;
+    overflow-x: hidden;
+}
+
+.container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 20px;
+    position: relative;
+}
+
+/* Header Styles */
+.header {
+    text-align: center;
+    margin-bottom: 40px;
+    position: relative;
+    z-index: 2;
+}
+
+.header-content {
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(20px);
+    border-radius: 24px;
+    padding: 40px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+    position: relative;
+    overflow: hidden;
+}
+
+.header-content::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%, rgba(255, 255, 255, 0.1) 100%);
+    animation: shimmer 3s ease-in-out infinite;
+}
+
+@keyframes shimmer {
+    0%, 100% { transform: translateX(-100%); }
+    50% { transform: translateX(100%); }
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 15px;
+    margin-bottom: 15px;
+}
+
+.logo i {
+    font-size: 48px;
+    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+    0%, 100% { transform: scale(1); }
+    50% { transform: scale(1.1); }
+}
+
+.logo h1 {
+    font-size: 42px;
+    font-weight: 700;
+    color: white;
+    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+}
+
+.subtitle {
+    font-size: 18px;
+    color: rgba(255, 255, 255, 0.9);
+    font-weight: 400;
+    letter-spacing: 0.5px;
+}
+
+/* Floating Shapes */
+.header-decoration {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+    z-index: 1;
+}
+
+.floating-shapes {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+.shape {
+    position: absolute;
+    border-radius: 50%;
+    background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
+    animation: float 6s ease-in-out infinite;
+}
+
+.shape-1 {
+    width: 80px;
+    height: 80px;
+    top: 10%;
+    left: 10%;
+    animation-delay: 0s;
+}
+
+.shape-2 {
+    width: 60px;
+    height: 60px;
+    top: 20%;
+    right: 15%;
+    animation-delay: 2s;
+}
+
+.shape-3 {
+    width: 100px;
+    height: 100px;
+    bottom: 15%;
+    left: 20%;
+    animation-delay: 4s;
+}
+
+@keyframes float {
+    0%, 100% { transform: translateY(0px) rotate(0deg); }
+    33% { transform: translateY(-20px) rotate(120deg); }
+    66% { transform: translateY(10px) rotate(240deg); }
+}
+
+/* Input Section */
+.input-section {
+    margin-bottom: 40px;
+}
+
+.input-card {
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(20px);
+    border-radius: 20px;
+    padding: 30px;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    transition: all 0.3s ease;
+}
+
+.input-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
+}
+
+.card-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 20px;
+}
+
+.card-header i {
+    font-size: 24px;
+    color: #667eea;
+}
+
+.card-header h2 {
+    font-size: 24px;
+    font-weight: 600;
+    color: #333;
+}
+
+.input-wrapper {
+    position: relative;
+}
+
+#inputText {
+    width: 100%;
+    padding: 20px;
+    border: 2px solid #e1e5e9;
+    border-radius: 12px;
+    font-size: 16px;
+    font-family: inherit;
+    resize: vertical;
+    transition: all 0.3s ease;
+    background: rgba(255, 255, 255, 0.8);
+    backdrop-filter: blur(10px);
+}
+
+#inputText:focus {
+    outline: none;
+    border-color: #667eea;
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+    background: rgba(255, 255, 255, 0.95);
+}
+
+.input-actions {
+    display: flex;
+    gap: 15px;
+    margin-top: 20px;
+    justify-content: flex-end;
+}
+
+/* Button Styles */
+.btn {
+    padding: 12px 24px;
+    border: none;
+    border-radius: 10px;
+    font-size: 16px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    text-decoration: none;
+    position: relative;
+    overflow: hidden;
+}
+
+.btn::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    transition: left 0.5s;
+}
+
+.btn:hover::before {
+    left: 100%;
+}
+
+.btn-primary {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
+}
+
+.btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
+}
+
+.btn-secondary {
+    background: rgba(255, 255, 255, 0.8);
+    color: #666;
+    border: 1px solid #e1e5e9;
+}
+
+.btn-secondary:hover {
+    background: rgba(255, 255, 255, 0.95);
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+}
+
+/* Results Section */
+.results-section {
+    opacity: 0;
+    transform: translateY(30px);
+    transition: all 0.5s ease;
+}
+
+.results-section.show {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.results-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+    gap: 30px;
+}
+
+.result-card {
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(20px);
+    border-radius: 20px;
+    padding: 30px;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+}
+
+.result-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
+}
+
+.result-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
+}
+
+.result-card .card-header h3 {
+    font-size: 20px;
+    font-weight: 600;
+    color: #333;
+}
+
+.result-items {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.result-item {
+    position: relative;
+}
+
+.result-item label {
+    display: block;
+    font-size: 14px;
+    font-weight: 500;
+    color: #666;
+    margin-bottom: 8px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.result-value {
+    display: flex;
+    align-items: center;
+    background: rgba(248, 250, 252, 0.8);
+    border: 1px solid #e1e5e9;
+    border-radius: 8px;
+    padding: 12px 16px;
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    font-size: 14px;
+    word-break: break-all;
+    position: relative;
+    transition: all 0.3s ease;
+}
+
+.result-value:hover {
+    background: rgba(248, 250, 252, 0.95);
+    border-color: #667eea;
+}
+
+.result-value .placeholder {
+    color: #999;
+    font-style: italic;
+}
+
+.copy-btn {
+    background: none;
+    border: none;
+    color: #667eea;
+    cursor: pointer;
+    padding: 8px;
+    border-radius: 6px;
+    transition: all 0.3s ease;
+    margin-left: auto;
+    flex-shrink: 0;
+}
+
+.copy-btn:hover {
+    background: rgba(102, 126, 234, 0.1);
+    color: #5a67d8;
+}
+
+/* Loading Overlay */
+.loading-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(5px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease;
+}
+
+.loading-overlay.show {
+    opacity: 1;
+    visibility: visible;
+}
+
+.loading-spinner {
+    text-align: center;
+    color: white;
+}
+
+.spinner {
+    width: 50px;
+    height: 50px;
+    border: 4px solid rgba(255, 255, 255, 0.3);
+    border-top: 4px solid white;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin: 0 auto 20px;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* Toast Notification */
+.toast {
+    position: fixed;
+    bottom: 30px;
+    right: 30px;
+    background: linear-gradient(135deg, #4ecdc4, #44a08d);
+    color: white;
+    padding: 16px 24px;
+    border-radius: 12px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    transform: translateX(400px);
+    transition: all 0.3s ease;
+    z-index: 1001;
+}
+
+.toast.show {
+    transform: translateX(0);
+}
+
+.toast i {
+    font-size: 18px;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .container {
+        padding: 15px;
+    }
+    
+    .header-content {
+        padding: 30px 20px;
+    }
+    
+    .logo h1 {
+        font-size: 32px;
+    }
+    
+    .logo i {
+        font-size: 36px;
+    }
+    
+    .results-grid {
+        grid-template-columns: 1fr;
+        gap: 20px;
+    }
+    
+    .input-actions {
+        flex-direction: column;
+    }
+    
+    .btn {
+        justify-content: center;
+    }
+    
+    .toast {
+        bottom: 20px;
+        right: 20px;
+        left: 20px;
+        transform: translateY(100px);
+    }
+    
+    .toast.show {
+        transform: translateY(0);
+    }
+}
+
+@media (max-width: 480px) {
+    .input-card,
+    .result-card {
+        padding: 20px;
+    }
+    
+    .card-header h2,
+    .card-header h3 {
+        font-size: 18px;
+    }
+    
+    .result-value {
+        font-size: 12px;
+        padding: 10px 12px;
+    }
+}
+
+/* Animation Classes */
+.fade-in {
+    animation: fadeIn 0.5s ease-in-out;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.slide-in {
+    animation: slideIn 0.3s ease-out;
+}
+
+@keyframes slideIn {
+    from {
+        transform: translateX(-20px);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.5);
+}
\ No newline at end of file
diff --git a/frontend/60sapi/实用功能/哈希解压压缩/index.html b/frontend/60sapi/实用功能/哈希解压压缩/index.html
new file mode 100644
index 00000000..76cedb0f
--- /dev/null
+++ b/frontend/60sapi/实用功能/哈希解压压缩/index.html
@@ -0,0 +1,221 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>多功能哈希工具 - Hash Toolkit</title>
+    <link rel="stylesheet" href="css/style.css">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+</head>
+<body>
+    <div class="container">
+        <!-- Header Section -->
+        <header class="header">
+            <div class="header-content">
+                <div class="logo">
+                    <i class="fas fa-fingerprint"></i>
+                    <h1>Hash Toolkit</h1>
+                </div>
+                <p class="subtitle">多功能哈希、编码与压缩工具</p>
+            </div>
+            <div class="header-decoration">
+                <div class="floating-shapes">
+                    <div class="shape shape-1"></div>
+                    <div class="shape shape-2"></div>
+                    <div class="shape shape-3"></div>
+                </div>
+            </div>
+        </header>
+
+        <!-- Main Content -->
+        <main class="main-content">
+            <!-- Input Section -->
+            <section class="input-section">
+                <div class="input-card">
+                    <div class="card-header">
+                        <i class="fas fa-edit"></i>
+                        <h2>输入内容</h2>
+                    </div>
+                    <div class="input-wrapper">
+                        <textarea 
+                            id="inputText" 
+                            placeholder="请输入要处理的文本内容...\n支持中文、英文、特殊字符等"
+                            rows="6"
+                        ></textarea>
+                        <div class="input-actions">
+                            <button id="clearBtn" class="btn btn-secondary">
+                                <i class="fas fa-trash"></i>
+                                清空
+                            </button>
+                            <button id="processBtn" class="btn btn-primary">
+                                <i class="fas fa-cogs"></i>
+                                开始处理
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Results Section -->
+            <section class="results-section" id="resultsSection">
+                <div class="results-grid">
+                    <!-- Hash Results -->
+                    <div class="result-card hash-card">
+                        <div class="card-header">
+                            <i class="fas fa-hashtag"></i>
+                            <h3>哈希算法</h3>
+                        </div>
+                        <div class="result-items">
+                            <div class="result-item">
+                                <label>MD5</label>
+                                <div class="result-value" id="md5Result">
+                                    <span class="placeholder">等待处理...</span>
+                                    <button class="copy-btn" data-target="md5Result">
+                                        <i class="fas fa-copy"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="result-item">
+                                <label>SHA1</label>
+                                <div class="result-value" id="sha1Result">
+                                    <span class="placeholder">等待处理...</span>
+                                    <button class="copy-btn" data-target="sha1Result">
+                                        <i class="fas fa-copy"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="result-item">
+                                <label>SHA256</label>
+                                <div class="result-value" id="sha256Result">
+                                    <span class="placeholder">等待处理...</span>
+                                    <button class="copy-btn" data-target="sha256Result">
+                                        <i class="fas fa-copy"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="result-item">
+                                <label>SHA512</label>
+                                <div class="result-value" id="sha512Result">
+                                    <span class="placeholder">等待处理...</span>
+                                    <button class="copy-btn" data-target="sha512Result">
+                                        <i class="fas fa-copy"></i>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Encoding Results -->
+                    <div class="result-card encoding-card">
+                        <div class="card-header">
+                            <i class="fas fa-code"></i>
+                            <h3>编码转换</h3>
+                        </div>
+                        <div class="result-items">
+                            <div class="result-item">
+                                <label>Base64 编码</label>
+                                <div class="result-value" id="base64EncodeResult">
+                                    <span class="placeholder">等待处理...</span>
+                                    <button class="copy-btn" data-target="base64EncodeResult">
+                                        <i class="fas fa-copy"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="result-item">
+                                <label>Base64 解码</label>
+                                <div class="result-value" id="base64DecodeResult">
+                                    <span class="placeholder">等待处理...</span>
+                                    <button class="copy-btn" data-target="base64DecodeResult">
+                                        <i class="fas fa-copy"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="result-item">
+                                <label>URL 编码</label>
+                                <div class="result-value" id="urlEncodeResult">
+                                    <span class="placeholder">等待处理...</span>
+                                    <button class="copy-btn" data-target="urlEncodeResult">
+                                        <i class="fas fa-copy"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="result-item">
+                                <label>URL 解码</label>
+                                <div class="result-value" id="urlDecodeResult">
+                                    <span class="placeholder">等待处理...</span>
+                                    <button class="copy-btn" data-target="urlDecodeResult">
+                                        <i class="fas fa-copy"></i>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Compression Results -->
+                    <div class="result-card compression-card">
+                        <div class="card-header">
+                            <i class="fas fa-compress-alt"></i>
+                            <h3>压缩算法</h3>
+                        </div>
+                        <div class="result-items">
+                            <div class="result-item">
+                                <label>Gzip 压缩</label>
+                                <div class="result-value" id="gzipCompressResult">
+                                    <span class="placeholder">等待处理...</span>
+                                    <button class="copy-btn" data-target="gzipCompressResult">
+                                        <i class="fas fa-copy"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="result-item">
+                                <label>Gzip 解压</label>
+                                <div class="result-value" id="gzipDecompressResult">
+                                    <span class="placeholder">等待处理...</span>
+                                    <button class="copy-btn" data-target="gzipDecompressResult">
+                                        <i class="fas fa-copy"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="result-item">
+                                <label>Deflate 压缩</label>
+                                <div class="result-value" id="deflateCompressResult">
+                                    <span class="placeholder">等待处理...</span>
+                                    <button class="copy-btn" data-target="deflateCompressResult">
+                                        <i class="fas fa-copy"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="result-item">
+                                <label>Brotli 压缩</label>
+                                <div class="result-value" id="brotliCompressResult">
+                                    <span class="placeholder">等待处理...</span>
+                                    <button class="copy-btn" data-target="brotliCompressResult">
+                                        <i class="fas fa-copy"></i>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </main>
+
+        <!-- Loading Overlay -->
+        <div class="loading-overlay" id="loadingOverlay">
+            <div class="loading-spinner">
+                <div class="spinner"></div>
+                <p>正在处理中...</p>
+            </div>
+        </div>
+
+        <!-- Toast Notification -->
+        <div class="toast" id="toast">
+            <i class="fas fa-check-circle"></i>
+            <span id="toastMessage">复制成功！</span>
+        </div>
+    </div>
+
+    <script src="js/script.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/frontend/60sapi/实用功能/哈希解压压缩/js/script.js b/frontend/60sapi/实用功能/哈希解压压缩/js/script.js
new file mode 100644
index 00000000..cc8350b6
--- /dev/null
+++ b/frontend/60sapi/实用功能/哈希解压压缩/js/script.js
@@ -0,0 +1,380 @@
+// API配置
+const API_BASE_URL = 'https://60s.viki.moe/v2/hash';
+
+// DOM元素
+const elements = {
+    inputText: document.getElementById('inputText'),
+    processBtn: document.getElementById('processBtn'),
+    clearBtn: document.getElementById('clearBtn'),
+    resultsSection: document.getElementById('resultsSection'),
+    loadingOverlay: document.getElementById('loadingOverlay'),
+    toast: document.getElementById('toast'),
+    toastMessage: document.getElementById('toastMessage')
+};
+
+// 结果元素映射
+const resultElements = {
+    md5: document.getElementById('md5Result'),
+    sha1: document.getElementById('sha1Result'),
+    sha256: document.getElementById('sha256Result'),
+    sha512: document.getElementById('sha512Result'),
+    base64Encode: document.getElementById('base64EncodeResult'),
+    base64Decode: document.getElementById('base64DecodeResult'),
+    urlEncode: document.getElementById('urlEncodeResult'),
+    urlDecode: document.getElementById('urlDecodeResult'),
+    gzipCompress: document.getElementById('gzipCompressResult'),
+    gzipDecompress: document.getElementById('gzipDecompressResult'),
+    deflateCompress: document.getElementById('deflateCompressResult'),
+    brotliCompress: document.getElementById('brotliCompressResult')
+};
+
+// 初始化
+document.addEventListener('DOMContentLoaded', function() {
+    initializeEventListeners();
+    addInputAnimation();
+});
+
+// 事件监听器初始化
+function initializeEventListeners() {
+    // 处理按钮点击
+    elements.processBtn.addEventListener('click', handleProcess);
+    
+    // 清空按钮点击
+    elements.clearBtn.addEventListener('click', handleClear);
+    
+    // 输入框回车键
+    elements.inputText.addEventListener('keydown', function(e) {
+        if (e.ctrlKey && e.key === 'Enter') {
+            handleProcess();
+        }
+    });
+    
+    // 复制按钮事件委托
+    document.addEventListener('click', function(e) {
+        if (e.target.closest('.copy-btn')) {
+            const copyBtn = e.target.closest('.copy-btn');
+            const targetId = copyBtn.getAttribute('data-target');
+            const targetElement = document.getElementById(targetId);
+            const textContent = targetElement.textContent.trim();
+            
+            if (textContent && textContent !== '等待处理...' && textContent !== '处理失败') {
+                copyToClipboard(textContent);
+            }
+        }
+    });
+    
+    // 输入框实时验证
+    elements.inputText.addEventListener('input', function() {
+        const hasContent = this.value.trim().length > 0;
+        elements.processBtn.disabled = !hasContent;
+        
+        if (hasContent) {
+            elements.processBtn.classList.remove('disabled');
+        } else {
+            elements.processBtn.classList.add('disabled');
+        }
+    });
+}
+
+// 添加输入动画效果
+function addInputAnimation() {
+    elements.inputText.addEventListener('focus', function() {
+        this.parentElement.classList.add('focused');
+    });
+    
+    elements.inputText.addEventListener('blur', function() {
+        this.parentElement.classList.remove('focused');
+    });
+}
+
+// 处理主要功能
+async function handleProcess() {
+    const inputValue = elements.inputText.value.trim();
+    
+    if (!inputValue) {
+        showToast('请输入要处理的内容', 'error');
+        return;
+    }
+    
+    // 显示加载状态
+    showLoading(true);
+    resetResults();
+    
+    try {
+        // 调用API
+        const response = await fetch(`${API_BASE_URL}?content=${encodeURIComponent(inputValue)}`);
+        
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        
+        const data = await response.json();
+        
+        if (data.code === 200 && data.data) {
+            displayResults(data.data);
+            showResultsSection();
+            showToast('处理完成！', 'success');
+        } else {
+            throw new Error(data.message || '处理失败');
+        }
+        
+    } catch (error) {
+        console.error('处理错误:', error);
+        showToast(`处理失败: ${error.message}`, 'error');
+        displayError();
+    } finally {
+        showLoading(false);
+    }
+}
+
+// 显示结果
+function displayResults(data) {
+    try {
+        // 哈希结果
+        updateResultElement('md5', data.md5 || '不可用');
+        
+        // SHA系列
+        if (data.sha) {
+            updateResultElement('sha1', data.sha.sha1 || '不可用');
+            updateResultElement('sha256', data.sha.sha256 || '不可用');
+            updateResultElement('sha512', data.sha.sha512 || '不可用');
+        }
+        
+        // Base64编码
+        if (data.base64) {
+            updateResultElement('base64Encode', data.base64.encode || '不可用');
+            updateResultElement('base64Decode', data.base64.decode || '不可用');
+        }
+        
+        // URL编码
+        if (data.url) {
+            updateResultElement('urlEncode', data.url.encode || '不可用');
+            updateResultElement('urlDecode', data.url.decode || '不可用');
+        }
+        
+        // 压缩结果
+        if (data.gzip) {
+            updateResultElement('gzipCompress', data.gzip.compress || '不可用');
+            updateResultElement('gzipDecompress', data.gzip.decompress || '不可用');
+        }
+        
+        if (data.deflate) {
+            updateResultElement('deflateCompress', data.deflate.compress || '不可用');
+        }
+        
+        if (data.brotli) {
+            updateResultElement('brotliCompress', data.brotli.compress || '不可用');
+        }
+        
+    } catch (error) {
+        console.error('显示结果时出错:', error);
+        showToast('显示结果时出错', 'error');
+    }
+}
+
+// 更新单个结果元素
+function updateResultElement(key, value) {
+    const element = resultElements[key];
+    if (element) {
+        const textSpan = element.querySelector('span') || element;
+        textSpan.textContent = value;
+        textSpan.classList.remove('placeholder');
+        
+        // 添加动画效果
+        element.classList.add('slide-in');
+        setTimeout(() => {
+            element.classList.remove('slide-in');
+        }, 300);
+    }
+}
+
+// 重置结果
+function resetResults() {
+    Object.values(resultElements).forEach(element => {
+        if (element) {
+            const textSpan = element.querySelector('span') || element;
+            textSpan.textContent = '等待处理...';
+            textSpan.classList.add('placeholder');
+        }
+    });
+}
+
+// 显示错误状态
+function displayError() {
+    Object.values(resultElements).forEach(element => {
+        if (element) {
+            const textSpan = element.querySelector('span') || element;
+            textSpan.textContent = '处理失败';
+            textSpan.classList.add('placeholder');
+        }
+    });
+}
+
+// 显示结果区域
+function showResultsSection() {
+    elements.resultsSection.classList.add('show');
+    
+    // 平滑滚动到结果区域
+    setTimeout(() => {
+        elements.resultsSection.scrollIntoView({
+            behavior: 'smooth',
+            block: 'start'
+        });
+    }, 100);
+}
+
+// 清空功能
+function handleClear() {
+    elements.inputText.value = '';
+    elements.inputText.focus();
+    elements.resultsSection.classList.remove('show');
+    resetResults();
+    elements.processBtn.disabled = true;
+    elements.processBtn.classList.add('disabled');
+    
+    showToast('内容已清空', 'info');
+}
+
+// 复制到剪贴板
+async function copyToClipboard(text) {
+    try {
+        if (navigator.clipboard && window.isSecureContext) {
+            await navigator.clipboard.writeText(text);
+        } else {
+            // 降级方案
+            const textArea = document.createElement('textarea');
+            textArea.value = text;
+            textArea.style.position = 'fixed';
+            textArea.style.left = '-999999px';
+            textArea.style.top = '-999999px';
+            document.body.appendChild(textArea);
+            textArea.focus();
+            textArea.select();
+            document.execCommand('copy');
+            textArea.remove();
+        }
+        
+        showToast('复制成功！', 'success');
+    } catch (error) {
+        console.error('复制失败:', error);
+        showToast('复制失败，请手动复制', 'error');
+    }
+}
+
+// 显示/隐藏加载状态
+function showLoading(show) {
+    if (show) {
+        elements.loadingOverlay.classList.add('show');
+        elements.processBtn.disabled = true;
+        elements.processBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 处理中...';
+    } else {
+        elements.loadingOverlay.classList.remove('show');
+        elements.processBtn.disabled = false;
+        elements.processBtn.innerHTML = '<i class="fas fa-cogs"></i> 开始处理';
+    }
+}
+
+// 显示提示消息
+function showToast(message, type = 'success') {
+    elements.toastMessage.textContent = message;
+    
+    // 设置图标和样式
+    const icon = elements.toast.querySelector('i');
+    icon.className = getToastIcon(type);
+    
+    elements.toast.className = `toast ${type}`;
+    elements.toast.classList.add('show');
+    
+    // 自动隐藏
+    setTimeout(() => {
+        elements.toast.classList.remove('show');
+    }, 3000);
+}
+
+// 获取提示图标
+function getToastIcon(type) {
+    const icons = {
+        success: 'fas fa-check-circle',
+        error: 'fas fa-exclamation-circle',
+        info: 'fas fa-info-circle',
+        warning: 'fas fa-exclamation-triangle'
+    };
+    return icons[type] || icons.success;
+}
+
+// 工具函数：防抖
+function debounce(func, wait) {
+    let timeout;
+    return function executedFunction(...args) {
+        const later = () => {
+            clearTimeout(timeout);
+            func(...args);
+        };
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+    };
+}
+
+// 工具函数：节流
+function throttle(func, limit) {
+    let inThrottle;
+    return function() {
+        const args = arguments;
+        const context = this;
+        if (!inThrottle) {
+            func.apply(context, args);
+            inThrottle = true;
+            setTimeout(() => inThrottle = false, limit);
+        }
+    }
+}
+
+// 添加键盘快捷键支持
+document.addEventListener('keydown', function(e) {
+    // Ctrl+Enter 处理
+    if (e.ctrlKey && e.key === 'Enter') {
+        e.preventDefault();
+        if (!elements.processBtn.disabled) {
+            handleProcess();
+        }
+    }
+    
+    // Escape 清空
+    if (e.key === 'Escape') {
+        handleClear();
+    }
+});
+
+// 页面可见性变化处理
+document.addEventListener('visibilitychange', function() {
+    if (document.hidden) {
+        // 页面隐藏时的处理
+        console.log('页面已隐藏');
+    } else {
+        // 页面显示时的处理
+        console.log('页面已显示');
+    }
+});
+
+// 错误处理
+window.addEventListener('error', function(e) {
+    console.error('全局错误:', e.error);
+    showToast('发生未知错误，请刷新页面重试', 'error');
+});
+
+// 未处理的Promise拒绝
+window.addEventListener('unhandledrejection', function(e) {
+    console.error('未处理的Promise拒绝:', e.reason);
+    showToast('网络请求失败，请检查网络连接', 'error');
+});
+
+// 导出函数供测试使用
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = {
+        handleProcess,
+        copyToClipboard,
+        showToast,
+        debounce,
+        throttle
+    };
+}
\ No newline at end of file
diff --git a/frontend/60sapi/实用功能/哈希解压压缩/接口集合.json b/frontend/60sapi/实用功能/哈希解压压缩/接口集合.json
new file mode 100644
index 00000000..547b2771
--- /dev/null
+++ b/frontend/60sapi/实用功能/哈希解压压缩/接口集合.json
@@ -0,0 +1,3 @@
+[
+    "https://60s.api.shumengya.top"
+]
diff --git a/frontend/60sapi/实用功能/哈希解压压缩/返回接口.json b/frontend/60sapi/实用功能/哈希解压压缩/返回接口.json
new file mode 100644
index 00000000..a6b3804b
--- /dev/null
+++ b/frontend/60sapi/实用功能/哈希解压压缩/返回接口.json
@@ -0,0 +1,33 @@
+{
+  "code": 200,
+  "message": "处理成功",
+  "data": {
+    "source": "你好👋",
+    "md5": "a1b2c3d4e5f6789012345678901234567",
+    "sha": {
+      "sha1": "da39a3ee5e6b4b0d3255bfef95601890afd80709",
+      "sha256": "e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855",
+      "sha512": "cf83e1357eefb8bdf1542850d66d8007d620e4050b5715dc83f4a921d36ce9ce47d0d13c5d85f2b0ff8318d2877eec2f63b931bd47417a81a538327af927da3e"
+    },
+    "base64": {
+      "encode": "5L2g5aW9",
+      "decode": "你好"
+    },
+    "url": {
+      "encode": "%E4%BD%A0%E5%A5%BD%F0%9F%91%8B",
+      "decode": "你好👋"
+    },
+    "gzip": {
+      "compress": "H4sIAAAAAAAAA...(压缩后的数据)",
+      "decompress": "你好👋"
+    },
+    "deflate": {
+      "compress": "eJwrz8kvTUlMy...(压缩后的数据)",
+      "decompress": "你好👋"
+    },
+    "brotli": {
+      "compress": "CwWAaGVsbG8g...(压缩后的数据)",
+      "decompress": "你好👋"
+    }
+  }
+}
\ No newline at end of file
diff --git a/frontend/60sapi/实用功能/生成要求模板.txt b/frontend/60sapi/实用功能/生成要求模板.txt
new file mode 100644
index 00000000..91b7c04d
--- /dev/null
+++ b/frontend/60sapi/实用功能/生成要求模板.txt
@@ -0,0 +1,8 @@
+1.生成为静态网页，js，css，html分离出来，不要混合在一起放入html里，难以阅读
+2.网页要适配手机端，电脑端和平板端三个设备分别做不同的css格式，优先优化手机端用户体验
+3.网页默认风格以淡绿色清新风格为主，除非用户要求
+4.尽量不要引用外部css，js，实在要引用就使用中国国内的cdn，否则用户可能加载不出来
+5.返回接口.json储存了网页api返回的数据格式
+6.严格按照用户要求执行，不得随意添加什么注解，如“以下数据来自...”
+7.接口集合.json保存了所有已知的后端API接口，一个访问不了尝试自动切换另一个
+8.在css中有关背景的css单独一个css文件，方便我直接迁移
diff --git a/frontend/60sapi/实用功能/链接OG信息/css/background.css b/frontend/60sapi/实用功能/链接OG信息/css/background.css
new file mode 100644
index 00000000..27d9e571
--- /dev/null
+++ b/frontend/60sapi/实用功能/链接OG信息/css/background.css
@@ -0,0 +1,232 @@
+/* 高维度背景特效样式 - 神秘高级风格 */
+
+/* 背景容器 */
+.background-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    overflow: hidden;
+    pointer-events: none;
+    background: radial-gradient(ellipse at center, 
+        rgba(15, 0, 30, 0.95) 0%, 
+        rgba(5, 0, 15, 0.98) 50%, 
+        rgba(0, 0, 0, 1) 100%);
+}
+
+/* 几何网格层 */
+.geometric-grid {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: 
+        linear-gradient(rgba(138, 43, 226, 0.1) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(138, 43, 226, 0.1) 1px, transparent 1px),
+        linear-gradient(rgba(75, 0, 130, 0.05) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(75, 0, 130, 0.05) 1px, transparent 1px);
+    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
+    animation: gridPulse 8s ease-in-out infinite;
+}
+
+@keyframes gridPulse {
+    0%, 100% { opacity: 0.3; transform: scale(1); }
+    50% { opacity: 0.6; transform: scale(1.02); }
+}
+
+/* 神经网络效果 */
+.neural-network {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: 
+        radial-gradient(circle at 20% 30%, rgba(138, 43, 226, 0.15) 2px, transparent 2px),
+        radial-gradient(circle at 80% 20%, rgba(75, 0, 130, 0.12) 1px, transparent 1px),
+        radial-gradient(circle at 40% 70%, rgba(147, 0, 211, 0.1) 1.5px, transparent 1.5px),
+        radial-gradient(circle at 90% 80%, rgba(138, 43, 226, 0.08) 1px, transparent 1px),
+        radial-gradient(circle at 10% 90%, rgba(75, 0, 130, 0.1) 2px, transparent 2px);
+    background-size: 200px 200px, 150px 150px, 300px 300px, 180px 180px, 250px 250px;
+    animation: neuralFlow 15s linear infinite;
+}
+
+@keyframes neuralFlow {
+    0% { transform: translate(0, 0) rotate(0deg); }
+    25% { transform: translate(-10px, -5px) rotate(90deg); }
+    50% { transform: translate(-5px, -10px) rotate(180deg); }
+    75% { transform: translate(5px, -5px) rotate(270deg); }
+    100% { transform: translate(0, 0) rotate(360deg); }
+}
+
+/* 粒子系统 */
+.particle-system {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: 
+        radial-gradient(circle, rgba(138, 43, 226, 0.4) 1px, transparent 1px),
+        radial-gradient(circle, rgba(75, 0, 130, 0.3) 0.5px, transparent 0.5px),
+        radial-gradient(circle, rgba(147, 0, 211, 0.2) 0.8px, transparent 0.8px);
+    background-size: 80px 80px, 120px 120px, 160px 160px;
+    background-position: 0 0, 40px 40px, 80px 80px;
+    animation: particleFloat 20s ease-in-out infinite;
+}
+
+@keyframes particleFloat {
+    0%, 100% { transform: translateY(0px) translateX(0px); }
+    25% { transform: translateY(-20px) translateX(10px); }
+    50% { transform: translateY(-10px) translateX(-15px); }
+    75% { transform: translateY(-30px) translateX(5px); }
+}
+
+/* 扫描线效果 */
+.scan-lines {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: repeating-linear-gradient(
+        0deg,
+        transparent 0px,
+        transparent 2px,
+        rgba(138, 43, 226, 0.03) 2px,
+        rgba(138, 43, 226, 0.03) 4px
+    );
+    animation: scanMove 3s linear infinite;
+}
+
+@keyframes scanMove {
+    0% { transform: translateY(-100%); }
+    100% { transform: translateY(100%); }
+}
+
+/* 全息投影效果 */
+.holographic-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: 
+        linear-gradient(45deg, 
+            transparent 30%, 
+            rgba(138, 43, 226, 0.05) 50%, 
+            transparent 70%),
+        linear-gradient(-45deg, 
+            transparent 30%, 
+            rgba(75, 0, 130, 0.03) 50%, 
+            transparent 70%);
+    background-size: 200px 200px, 150px 150px;
+    animation: holographicShift 12s ease-in-out infinite;
+}
+
+@keyframes holographicShift {
+    0%, 100% { 
+        background-position: 0% 0%, 100% 100%;
+        opacity: 0.7;
+    }
+    50% { 
+        background-position: 100% 100%, 0% 0%;
+        opacity: 1;
+    }
+}
+
+/* 数据流效果 */
+.data-stream {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: 
+        linear-gradient(90deg, 
+            transparent 0%, 
+            rgba(138, 43, 226, 0.1) 50%, 
+            transparent 100%);
+    background-size: 300px 100%;
+    animation: dataFlow 8s linear infinite;
+}
+
+@keyframes dataFlow {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(100%); }
+}
+
+/* 量子波动效果 */
+.quantum-waves {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: 
+        radial-gradient(ellipse 200px 100px at 50% 0%, 
+            rgba(138, 43, 226, 0.1) 0%, 
+            transparent 50%),
+        radial-gradient(ellipse 300px 150px at 50% 100%, 
+            rgba(75, 0, 130, 0.08) 0%, 
+            transparent 50%);
+    animation: quantumPulse 10s ease-in-out infinite;
+}
+
+@keyframes quantumPulse {
+    0%, 100% { 
+        transform: scale(1) rotate(0deg);
+        opacity: 0.5;
+    }
+    50% { 
+        transform: scale(1.1) rotate(180deg);
+        opacity: 0.8;
+    }
+}
+
+/* 响应式优化 */
+@media (max-width: 768px) {
+    .geometric-grid {
+        background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
+    }
+    
+    .neural-network {
+        background-size: 100px 100px, 75px 75px, 150px 150px, 90px 90px, 125px 125px;
+    }
+    
+    .particle-system {
+        background-size: 40px 40px, 60px 60px, 80px 80px;
+    }
+}
+
+/* 减少动画偏好 */
+@media (prefers-reduced-motion: reduce) {
+    .geometric-grid,
+    .neural-network,
+    .particle-system,
+    .scan-lines,
+    .holographic-overlay,
+    .data-stream,
+    .quantum-waves {
+        animation: none;
+    }
+}
+
+/* 高对比度模式 */
+@media (prefers-contrast: high) {
+    .background-container {
+        background: radial-gradient(ellipse at center, 
+            rgba(25, 0, 50, 0.95) 0%, 
+            rgba(10, 0, 25, 0.98) 50%, 
+            rgba(0, 0, 0, 1) 100%);
+    }
+    
+    .geometric-grid {
+        background-image: 
+            linear-gradient(rgba(200, 100, 255, 0.2) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(200, 100, 255, 0.2) 1px, transparent 1px);
+    }
+}
\ No newline at end of file
diff --git a/frontend/60sapi/实用功能/链接OG信息/css/style.css b/frontend/60sapi/实用功能/链接OG信息/css/style.css
new file mode 100644
index 00000000..e36e7c0d
--- /dev/null
+++ b/frontend/60sapi/实用功能/链接OG信息/css/style.css
@@ -0,0 +1,1159 @@
+/* 全局样式重置 */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+/* 根变量定义 */
+:root {
+    /* 神秘色彩系统 */
+    --primary-dark: #0a0a0a;
+    --secondary-dark: #1a1a1a;
+    --accent-dark: #2a2a2a;
+    --border-dark: #333333;
+    
+    /* 神秘绿色系统 */
+    --neon-green: #00ff88;
+    --dark-green: #004d2a;
+    --light-green: #66ffaa;
+    --glow-green: rgba(0, 255, 136, 0.3);
+    
+    /* 高级紫色系统 */
+    --neon-purple: #8a2be2;
+    --dark-purple: #4a0e4e;
+    --light-purple: #b347d9;
+    --glow-purple: rgba(138, 43, 226, 0.3);
+    
+    /* 文字颜色 */
+    --text-primary: #ffffff;
+    --text-secondary: #cccccc;
+    --text-muted: #888888;
+    --text-accent: var(--neon-green);
+    
+    /* 间距系统 */
+    --spacing-xs: 0.5rem;
+    --spacing-sm: 1rem;
+    --spacing-md: 1.5rem;
+    --spacing-lg: 2rem;
+    --spacing-xl: 3rem;
+    
+    /* 字体系统 */
+    --font-primary: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    --font-mono: 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', monospace;
+    
+    /* 阴影系统 */
+    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
+    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
+    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
+    --shadow-glow: 0 0 20px var(--glow-green);
+    --shadow-purple-glow: 0 0 20px var(--glow-purple);
+    
+    /* 边框半径 */
+    --radius-sm: 4px;
+    --radius-md: 8px;
+    --radius-lg: 12px;
+    --radius-xl: 16px;
+    
+    /* 过渡效果 */
+    --transition-fast: 0.2s ease;
+    --transition-normal: 0.3s ease;
+    --transition-slow: 0.5s ease;
+}
+
+/* 基础样式 */
+body {
+    font-family: var(--font-primary);
+    background: var(--primary-dark);
+    color: var(--text-primary);
+    line-height: 1.6;
+    overflow-x: hidden;
+    min-height: 100vh;
+    position: relative;
+}
+
+/* 主容器 */
+.main-container {
+    position: relative;
+    z-index: 10;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: var(--spacing-lg);
+}
+
+/* 头部样式 */
+.header {
+    margin-bottom: var(--spacing-xl);
+    position: relative;
+}
+
+.header-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--spacing-lg);
+    background: linear-gradient(135deg, var(--secondary-dark), var(--accent-dark));
+    border: 1px solid var(--border-dark);
+    border-radius: var(--radius-xl);
+    backdrop-filter: blur(10px);
+    position: relative;
+    overflow: hidden;
+}
+
+.header-content::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, var(--glow-green), transparent);
+    animation: scanLine 3s infinite;
+}
+
+@keyframes scanLine {
+    0% { left: -100%; }
+    100% { left: 100%; }
+}
+
+.logo-section {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-md);
+}
+
+.logo-icon {
+    font-size: 2.5rem;
+    color: var(--neon-green);
+    filter: drop-shadow(0 0 10px var(--glow-green));
+    animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+    0%, 100% { transform: scale(1); }
+    50% { transform: scale(1.1); }
+}
+
+.title {
+    font-size: 2.5rem;
+    font-weight: 700;
+    background: linear-gradient(45deg, var(--neon-green), var(--light-green));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    text-shadow: 0 0 20px var(--glow-green);
+}
+
+.subtitle {
+    font-size: 1rem;
+    color: var(--text-secondary);
+    font-family: var(--font-mono);
+    opacity: 0.8;
+}
+
+.status-indicator {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+    padding: var(--spacing-sm) var(--spacing-md);
+    background: rgba(0, 255, 136, 0.1);
+    border: 1px solid var(--neon-green);
+    border-radius: var(--radius-lg);
+    backdrop-filter: blur(5px);
+}
+
+.pulse-dot {
+    width: 8px;
+    height: 8px;
+    background: var(--neon-green);
+    border-radius: 50%;
+    animation: pulseGlow 1.5s infinite;
+}
+
+@keyframes pulseGlow {
+    0%, 100% {
+        opacity: 1;
+        box-shadow: 0 0 5px var(--glow-green);
+    }
+    50% {
+        opacity: 0.5;
+        box-shadow: 0 0 15px var(--glow-green);
+    }
+}
+
+.status-text {
+    font-size: 0.9rem;
+    color: var(--neon-green);
+    font-family: var(--font-mono);
+}
+
+/* 查询区域 */
+.query-section {
+    margin-bottom: var(--spacing-xl);
+}
+
+.input-container {
+    display: flex;
+    gap: var(--spacing-md);
+    align-items: stretch;
+}
+
+.input-wrapper {
+    flex: 1;
+    position: relative;
+    background: var(--secondary-dark);
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+}
+
+.input-icon {
+    position: absolute;
+    left: var(--spacing-md);
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--text-muted);
+    font-size: 1.2rem;
+    z-index: 2;
+    transition: var(--transition-normal);
+}
+
+.url-input {
+    width: 100%;
+    padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) 3.5rem;
+    background: transparent;
+    border: 2px solid var(--border-dark);
+    border-radius: var(--radius-lg);
+    color: var(--text-primary);
+    font-size: 1.1rem;
+    font-family: var(--font-mono);
+    transition: var(--transition-normal);
+    position: relative;
+    z-index: 1;
+}
+
+.url-input:focus {
+    outline: none;
+    border-color: var(--neon-green);
+    box-shadow: var(--shadow-glow);
+}
+
+.url-input:focus + .input-border {
+    opacity: 1;
+    animation: borderGlow 2s infinite;
+}
+
+.url-input:focus ~ .input-icon {
+    color: var(--neon-green);
+}
+
+.input-border {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 2px solid var(--neon-green);
+    border-radius: var(--radius-lg);
+    opacity: 0;
+    pointer-events: none;
+    transition: var(--transition-normal);
+}
+
+@keyframes borderGlow {
+    0%, 100% { box-shadow: 0 0 5px var(--glow-green); }
+    50% { box-shadow: 0 0 20px var(--glow-green); }
+}
+
+.analyze-btn {
+    position: relative;
+    padding: var(--spacing-md) var(--spacing-xl);
+    background: linear-gradient(135deg, var(--dark-green), var(--neon-green));
+    border: none;
+    border-radius: var(--radius-lg);
+    color: var(--primary-dark);
+    font-size: 1.1rem;
+    font-weight: 600;
+    cursor: pointer;
+    overflow: hidden;
+    transition: var(--transition-normal);
+    min-width: 150px;
+}
+
+.analyze-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-glow);
+}
+
+.analyze-btn:active {
+    transform: translateY(0);
+}
+
+.btn-text {
+    position: relative;
+    z-index: 2;
+}
+
+.btn-effects {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+}
+
+.ripple {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    transition: var(--transition-fast);
+}
+
+.analyze-btn:active .ripple {
+    width: 200px;
+    height: 200px;
+}
+
+/* 加载状态 */
+.loading-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: var(--spacing-xl);
+    margin: var(--spacing-xl) 0;
+}
+
+.loading-content {
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--spacing-lg);
+}
+
+.scanner {
+    position: relative;
+    width: 200px;
+    height: 200px;
+    border: 2px solid var(--border-dark);
+    border-radius: var(--radius-lg);
+    background: var(--secondary-dark);
+    overflow: hidden;
+}
+
+.scanner-line {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background: linear-gradient(90deg, transparent, var(--neon-green), transparent);
+    animation: scannerMove 2s infinite;
+}
+
+@keyframes scannerMove {
+    0% { top: 0; }
+    100% { top: calc(100% - 2px); }
+}
+
+.scanner-grid {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 1px;
+}
+
+.grid-line {
+    background: var(--border-dark);
+    opacity: 0.3;
+    animation: gridPulse 1.5s infinite;
+}
+
+.grid-line:nth-child(1) { animation-delay: 0s; }
+.grid-line:nth-child(2) { animation-delay: 0.2s; }
+.grid-line:nth-child(3) { animation-delay: 0.4s; }
+.grid-line:nth-child(4) { animation-delay: 0.6s; }
+
+@keyframes gridPulse {
+    0%, 100% { opacity: 0.3; }
+    50% { opacity: 0.8; background: var(--glow-green); }
+}
+
+.loading-text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xs);
+}
+
+.loading-title {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: var(--neon-green);
+}
+
+.loading-subtitle {
+    font-size: 1rem;
+    color: var(--text-secondary);
+    font-family: var(--font-mono);
+}
+
+/* 结果展示区域 */
+.results-section {
+    margin-bottom: var(--spacing-xl);
+}
+
+.results-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--spacing-lg);
+    padding: var(--spacing-md);
+    background: var(--secondary-dark);
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--border-dark);
+}
+
+.results-title {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: var(--neon-green);
+}
+
+.results-actions {
+    display: flex;
+    gap: var(--spacing-sm);
+}
+
+.action-btn {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+    padding: var(--spacing-sm) var(--spacing-md);
+    background: var(--accent-dark);
+    border: 1px solid var(--border-dark);
+    border-radius: var(--radius-md);
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+    cursor: pointer;
+    transition: var(--transition-normal);
+}
+
+.action-btn:hover {
+    background: var(--border-dark);
+    color: var(--text-primary);
+    border-color: var(--neon-green);
+}
+
+/* OG卡片 */
+.og-card {
+    background: var(--secondary-dark);
+    border: 1px solid var(--border-dark);
+    border-radius: var(--radius-xl);
+    overflow: hidden;
+    box-shadow: var(--shadow-lg);
+}
+
+.info-section {
+    padding: var(--spacing-lg);
+    border-bottom: 1px solid var(--border-dark);
+}
+
+.info-section:last-child {
+    border-bottom: none;
+}
+
+.section-header {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    margin-bottom: var(--spacing-md);
+    font-size: 1.2rem;
+    font-weight: 600;
+    color: var(--text-accent);
+}
+
+.info-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: var(--spacing-md);
+}
+
+.info-item {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xs);
+}
+
+.info-item label {
+    font-size: 0.9rem;
+    color: var(--text-muted);
+    font-family: var(--font-mono);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.info-value {
+    padding: var(--spacing-sm);
+    background: var(--accent-dark);
+    border: 1px solid var(--border-dark);
+    border-radius: var(--radius-md);
+    color: var(--text-primary);
+    font-family: var(--font-mono);
+    word-break: break-all;
+    transition: var(--transition-normal);
+}
+
+.info-value:hover {
+    border-color: var(--neon-green);
+    box-shadow: 0 0 10px var(--glow-green);
+}
+
+.url-value {
+    color: var(--light-green);
+    cursor: pointer;
+}
+
+.url-value:hover {
+    color: var(--neon-green);
+}
+
+/* 媒体预览 */
+.media-preview {
+    margin-bottom: var(--spacing-md);
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+    background: var(--accent-dark);
+    border: 1px solid var(--border-dark);
+    min-height: 200px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.media-preview img {
+    max-width: 100%;
+    max-height: 300px;
+    object-fit: contain;
+    border-radius: var(--radius-md);
+}
+
+.no-media {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--spacing-sm);
+    color: var(--text-muted);
+    font-size: 1.1rem;
+}
+
+.no-media i {
+    font-size: 2rem;
+    opacity: 0.5;
+}
+
+.media-details {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: var(--spacing-md);
+}
+
+/* 错误状态 */
+.error-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: var(--spacing-xl);
+    margin: var(--spacing-xl) 0;
+}
+
+.error-content {
+    text-align: center;
+    padding: var(--spacing-xl);
+    background: var(--secondary-dark);
+    border: 2px solid #ff4444;
+    border-radius: var(--radius-xl);
+    max-width: 500px;
+    box-shadow: 0 0 20px rgba(255, 68, 68, 0.3);
+}
+
+.error-icon {
+    font-size: 3rem;
+    color: #ff4444;
+    margin-bottom: var(--spacing-md);
+    animation: shake 0.5s infinite;
+}
+
+@keyframes shake {
+    0%, 100% { transform: translateX(0); }
+    25% { transform: translateX(-5px); }
+    75% { transform: translateX(5px); }
+}
+
+.error-title {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: #ff4444;
+    margin-bottom: var(--spacing-sm);
+}
+
+.error-message {
+    color: var(--text-secondary);
+    margin-bottom: var(--spacing-lg);
+    font-family: var(--font-mono);
+}
+
+.retry-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+    padding: var(--spacing-sm) var(--spacing-lg);
+    background: #ff4444;
+    border: none;
+    border-radius: var(--radius-md);
+    color: white;
+    font-weight: 600;
+    cursor: pointer;
+    transition: var(--transition-normal);
+}
+
+.retry-btn:hover {
+    background: #ff6666;
+    transform: translateY(-2px);
+}
+
+/* Tip 消息样式 */
+.tip-container {
+    position: fixed;
+    bottom: 2rem;
+    left: 2rem;
+    z-index: 999;
+    opacity: 0;
+    transform: translateY(20px);
+    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    pointer-events: none;
+}
+
+.tip-container.active {
+    opacity: 1;
+    transform: translateY(0);
+    pointer-events: auto;
+}
+
+.tip-content {
+    background: linear-gradient(135deg, 
+        rgba(138, 43, 226, 0.1) 0%, 
+        rgba(75, 0, 130, 0.1) 100%);
+    border: 1px solid rgba(138, 43, 226, 0.3);
+    border-radius: var(--radius-lg);
+    padding: var(--spacing-md);
+    backdrop-filter: blur(10px);
+    box-shadow: 
+        0 8px 32px rgba(0, 0, 0, 0.3),
+        0 0 20px rgba(138, 43, 226, 0.1),
+        inset 0 1px 0 rgba(255, 255, 255, 0.1);
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    min-width: 300px;
+    max-width: 400px;
+}
+
+.tip-icon {
+    font-size: 1.2rem;
+    color: var(--neon-purple);
+    flex-shrink: 0;
+}
+
+.tip-text {
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+    line-height: 1.4;
+}
+
+/* 提示消息 */
+.toast-container {
+    position: fixed;
+    top: var(--spacing-lg);
+    right: var(--spacing-lg);
+    z-index: 1000;
+    transform: translateX(100%);
+    transition: var(--transition-normal);
+}
+
+.toast-container.show {
+    transform: translateX(0);
+}
+
+.toast-content {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    padding: var(--spacing-md) var(--spacing-lg);
+    background: var(--secondary-dark);
+    border: 1px solid var(--neon-green);
+    border-radius: var(--radius-lg);
+    color: var(--text-primary);
+    box-shadow: var(--shadow-glow);
+    backdrop-filter: blur(10px);
+}
+
+.toast-icon {
+    font-size: 1.2rem;
+    color: var(--neon-green);
+}
+
+.toast-message {
+    font-family: var(--font-mono);
+    font-size: 0.9rem;
+}
+
+/* 页脚 */
+.footer {
+    margin-top: auto;
+    padding: var(--spacing-lg);
+    border-top: 1px solid var(--border-dark);
+    background: var(--secondary-dark);
+    border-radius: var(--radius-lg);
+}
+
+.footer-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    text-align: center;
+}
+
+.footer-text {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+    color: var(--text-muted);
+    font-size: 0.9rem;
+    font-family: var(--font-mono);
+}
+
+.footer-links {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    font-size: 0.8rem;
+    color: var(--text-muted);
+}
+
+.footer-link {
+    cursor: pointer;
+    transition: var(--transition-normal);
+}
+
+.footer-link:hover {
+    color: var(--neon-green);
+}
+
+.footer-divider {
+    opacity: 0.5;
+}
+
+/* 响应式设计 */
+
+/* 平板设备 */
+@media (max-width: 1024px) {
+    .main-container {
+        padding: var(--spacing-md);
+    }
+    
+    .header-content {
+        flex-direction: column;
+        gap: var(--spacing-md);
+        text-align: center;
+    }
+    
+    .title {
+        font-size: 2rem;
+    }
+    
+    .input-container {
+        flex-direction: column;
+    }
+    
+    .analyze-btn {
+        width: 100%;
+    }
+    
+    .info-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .results-header {
+        flex-direction: column;
+        gap: var(--spacing-md);
+    }
+    
+    .footer-content {
+        flex-direction: column;
+        gap: var(--spacing-sm);
+    }
+}
+
+/* 交互动画增强 */
+.input-glow {
+    position: absolute;
+    top: -2px;
+    left: -2px;
+    right: -2px;
+    bottom: -2px;
+    background: linear-gradient(45deg, 
+        var(--neon-green), 
+        var(--light-green), 
+        var(--neon-purple));
+    border-radius: inherit;
+    z-index: -1;
+    opacity: 0;
+    animation: glowPulse 2s ease-in-out;
+}
+
+@keyframes glowPulse {
+    0%, 100% { opacity: 0; transform: scale(1); }
+    50% { opacity: 0.6; transform: scale(1.02); }
+}
+
+.input-container.shake {
+    animation: inputShake 0.6s ease-in-out;
+}
+
+@keyframes inputShake {
+    0%, 100% { transform: translateX(0); }
+    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
+    20%, 40%, 60%, 80% { transform: translateX(5px); }
+}
+
+.analyze-btn.flash,
+.action-btn.flash {
+    animation: buttonFlash 0.3s ease-in-out;
+}
+
+@keyframes buttonFlash {
+    0%, 100% { background: linear-gradient(135deg, var(--dark-green), var(--neon-green)); }
+    50% { background: var(--neon-purple); box-shadow: 0 0 20px var(--glow-purple); }
+}
+
+.og-card.animate-in {
+    animation: cardSlideIn 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+}
+
+@keyframes cardSlideIn {
+    0% {
+        opacity: 0;
+        transform: translateY(30px) scale(0.95);
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+.header.animate-in {
+    animation: headerFadeIn 1s ease-out forwards;
+}
+
+@keyframes headerFadeIn {
+    0% {
+        opacity: 0;
+        transform: translateY(-20px);
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.query-section.animate-in {
+    animation: sectionSlideUp 0.8s ease-out 0.2s forwards;
+    opacity: 0;
+}
+
+@keyframes sectionSlideUp {
+    0% {
+        opacity: 0;
+        transform: translateY(40px);
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes fadeInUp {
+    0% {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes fadeOutDown {
+    0% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+    100% {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+}
+
+/* 高级悬浮效果 */
+.og-card:hover {
+    transform: translateY(-5px) scale(1.02);
+    box-shadow: 
+        0 10px 30px var(--glow-purple),
+        0 0 20px rgba(138, 43, 226, 0.1),
+        inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}
+
+.analyze-btn:hover:not(:disabled) {
+    transform: translateY(-3px);
+    box-shadow: 
+        0 8px 25px var(--glow-green),
+        0 0 15px rgba(0, 255, 136, 0.2);
+}
+
+.action-btn:hover:not(:disabled) {
+    transform: translateY(-1px);
+    box-shadow: 0 5px 15px var(--glow-purple);
+}
+
+/* 图片加载动画 */
+.media-preview img {
+    transition: all 0.3s ease;
+}
+
+.media-preview img:hover {
+    transform: scale(1.05);
+    box-shadow: 0 8px 25px var(--glow-green);
+}
+
+.image-placeholder {
+    background: linear-gradient(135deg, 
+        var(--glow-green) 0%, 
+        var(--glow-purple) 100%);
+    border: 2px dashed rgba(138, 43, 226, 0.3);
+    display: none;
+    align-items: center;
+    justify-content: center;
+    min-height: 200px;
+    border-radius: var(--radius-lg);
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+}
+
+/* 手机设备 */
+@media (max-width: 768px) {
+    .main-container {
+        padding: var(--spacing-sm);
+    }
+    
+    .header-content {
+        padding: var(--spacing-md);
+    }
+    
+    .title {
+        font-size: 1.8rem;
+    }
+    
+    .subtitle {
+        font-size: 0.9rem;
+    }
+    
+    .logo-icon {
+        font-size: 2rem;
+    }
+    
+    .url-input {
+        font-size: 16px; /* 防止iOS缩放 */
+        padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) 3rem;
+    }
+    
+    .input-icon {
+        left: var(--spacing-sm);
+        font-size: 1rem;
+    }
+    
+    .analyze-btn {
+        padding: var(--spacing-sm) var(--spacing-md);
+        font-size: 1rem;
+    }
+    
+    .scanner {
+        width: 150px;
+        height: 150px;
+    }
+    
+    .loading-title {
+        font-size: 1.3rem;
+    }
+    
+    .loading-subtitle {
+        font-size: 0.9rem;
+    }
+    
+    .results-title {
+        font-size: 1.3rem;
+    }
+    
+    .action-btn {
+        font-size: 0.8rem;
+        padding: var(--spacing-xs) var(--spacing-sm);
+    }
+    
+    .info-section {
+        padding: var(--spacing-md);
+    }
+    
+    .section-header {
+        font-size: 1.1rem;
+    }
+    
+    .media-details {
+        grid-template-columns: 1fr;
+    }
+    
+    .toast-container {
+        top: var(--spacing-sm);
+        right: var(--spacing-sm);
+        left: var(--spacing-sm);
+        transform: translateY(-100%);
+    }
+    
+    .toast-container.show {
+        transform: translateY(0);
+    }
+    
+    .footer-text {
+        font-size: 0.8rem;
+    }
+    
+    .footer-links {
+        font-size: 0.7rem;
+    }
+    
+    /* 移动设备上禁用部分悬浮效果 */
+    .og-card:hover {
+        transform: none;
+    }
+    
+    .media-preview img:hover {
+        transform: none;
+    }
+}
+
+/* 小屏手机设备 */
+@media (max-width: 480px) {
+    .main-container {
+        padding: var(--spacing-xs);
+    }
+    
+    .title {
+        font-size: 1.5rem;
+    }
+    
+    .logo-section {
+        flex-direction: column;
+        gap: var(--spacing-sm);
+    }
+    
+    .scanner {
+        width: 120px;
+        height: 120px;
+    }
+    
+    .error-content {
+        padding: var(--spacing-md);
+    }
+    
+    .error-icon {
+        font-size: 2.5rem;
+    }
+    
+    .error-title {
+        font-size: 1.3rem;
+    }
+}
+
+/* 高分辨率屏幕优化 */
+@media (min-width: 1440px) {
+    .main-container {
+        max-width: 1600px;
+    }
+    
+    .title {
+        font-size: 3rem;
+    }
+    
+    .url-input {
+        font-size: 1.2rem;
+    }
+    
+    .analyze-btn {
+        font-size: 1.2rem;
+        padding: var(--spacing-lg) var(--spacing-xl);
+    }
+}
+
+/* 深色模式优化 */
+@media (prefers-color-scheme: dark) {
+    :root {
+        --primary-dark: #000000;
+        --secondary-dark: #111111;
+        --accent-dark: #222222;
+    }
+}
+
+/* 减少动画偏好 */
+@media (prefers-reduced-motion: reduce) {
+    * {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+    }
+}
+
+/* 打印样式 */
+@media print {
+    .background-container,
+    .header,
+    .query-section,
+    .loading-container,
+    .error-container,
+    .toast-container,
+    .footer {
+        display: none;
+    }
+    
+    .results-section {
+        margin: 0;
+        padding: 0;
+    }
+    
+    .og-card {
+        border: 1px solid #000;
+        box-shadow: none;
+    }
+}
\ No newline at end of file
diff --git a/frontend/60sapi/实用功能/链接OG信息/index.html b/frontend/60sapi/实用功能/链接OG信息/index.html
new file mode 100644
index 00000000..d3251708
--- /dev/null
+++ b/frontend/60sapi/实用功能/链接OG信息/index.html
@@ -0,0 +1,223 @@
+<!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-size" 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-charset" 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>
\ No newline at end of file
diff --git a/frontend/60sapi/实用功能/链接OG信息/js/script.js b/frontend/60sapi/实用功能/链接OG信息/js/script.js
new file mode 100644
index 00000000..7a25592a
--- /dev/null
+++ b/frontend/60sapi/实用功能/链接OG信息/js/script.js
@@ -0,0 +1,555 @@
+// 链接OG信息查询 - JavaScript功能代码
+// 神秘高级风格的交互体验
+
+class OGAnalyzer {
+    constructor() {
+        this.apiUrl = 'https://60s.viki.moe/v2/og';
+        this.isAnalyzing = false;
+        this.currentUrl = '';
+        this.animationFrameId = null;
+        
+        this.init();
+    }
+
+    init() {
+        this.bindEvents();
+        this.createBackgroundEffects();
+        this.initializeAnimations();
+        this.showWelcomeMessage();
+        this.initPageAnimations();
+    }
+
+    // 初始化页面动画
+    initPageAnimations() {
+        // 延迟添加动画类，确保CSS已加载
+        setTimeout(() => {
+            const header = document.querySelector('.header');
+            const querySection = document.querySelector('.query-section');
+            
+            if (header) header.classList.add('animate-in');
+            if (querySection) querySection.classList.add('animate-in');
+        }, 100);
+    }
+
+    bindEvents() {
+        const urlInput = document.getElementById('url-input');
+        const analyzeBtn = document.getElementById('analyze-btn');
+        const copyBtn = document.getElementById('copy-btn');
+        const clearBtn = document.getElementById('clear-btn');
+
+        // 输入框事件
+        urlInput.addEventListener('input', (e) => this.handleUrlInput(e));
+        urlInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter' && !this.isAnalyzing) {
+                this.analyzeUrl();
+            }
+        });
+        urlInput.addEventListener('focus', () => this.handleInputFocus());
+        urlInput.addEventListener('blur', () => this.handleInputBlur());
+
+        // 按钮事件
+        analyzeBtn.addEventListener('click', () => this.analyzeUrl());
+        copyBtn.addEventListener('click', () => this.copyResults());
+        clearBtn.addEventListener('click', () => this.clearResults());
+
+        // 键盘快捷键
+        document.addEventListener('keydown', (e) => this.handleKeyboard(e));
+    }
+
+    handleUrlInput(e) {
+        const url = e.target.value.trim();
+        const analyzeBtn = document.getElementById('analyze-btn');
+        
+        if (this.isValidUrl(url)) {
+            analyzeBtn.classList.add('ready');
+            e.target.classList.remove('error');
+        } else {
+            analyzeBtn.classList.remove('ready');
+            if (url.length > 0) {
+                e.target.classList.add('error');
+            } else {
+                e.target.classList.remove('error');
+            }
+        }
+    }
+
+    handleInputFocus() {
+        const inputContainer = document.querySelector('.input-container');
+        inputContainer.classList.add('focused');
+        this.createInputGlow();
+    }
+
+    handleInputBlur() {
+        const inputContainer = document.querySelector('.input-container');
+        inputContainer.classList.remove('focused');
+    }
+
+    handleKeyboard(e) {
+        // Ctrl/Cmd + Enter 快速分析
+        if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+            e.preventDefault();
+            if (!this.isAnalyzing) {
+                this.analyzeUrl();
+            }
+        }
+        
+        // Escape 清除结果
+        if (e.key === 'Escape') {
+            this.clearResults();
+        }
+    }
+
+    isValidUrl(string) {
+        try {
+            const url = new URL(string);
+            return url.protocol === 'http:' || url.protocol === 'https:';
+        } catch (_) {
+            return false;
+        }
+    }
+
+    async analyzeUrl() {
+        const urlInput = document.getElementById('url-input');
+        const url = urlInput.value.trim();
+
+        if (!this.isValidUrl(url)) {
+            this.showError('请输入有效的URL地址');
+            this.shakeInput();
+            return;
+        }
+
+        if (this.isAnalyzing) {
+            return;
+        }
+
+        this.currentUrl = url;
+        this.isAnalyzing = true;
+        this.showLoading();
+        this.hideError();
+        this.hideResults();
+
+        try {
+            const response = await fetch(`${this.apiUrl}?url=${encodeURIComponent(url)}`);
+            
+            if (!response.ok) {
+                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+            }
+
+            const data = await response.json();
+            
+            if (data.code === 200 && data.data) {
+                await this.displayResults(data.data);
+                this.showSuccessMessage('分析完成！');
+                
+                // 添加按钮闪烁效果
+                const analyzeBtn = document.getElementById('analyze-btn');
+                analyzeBtn.classList.add('flash');
+                setTimeout(() => {
+                    analyzeBtn.classList.remove('flash');
+                }, 300);
+            } else {
+                throw new Error(data.message || '获取OG信息失败');
+            }
+        } catch (error) {
+            console.error('分析失败:', error);
+            this.showError(`分析失败: ${error.message}`);
+        } finally {
+            this.isAnalyzing = false;
+            this.hideLoading();
+        }
+    }
+
+    showLoading() {
+        const loadingElement = document.getElementById('loading');
+        const analyzeBtn = document.getElementById('analyze-btn');
+        
+        loadingElement.classList.add('active');
+        analyzeBtn.disabled = true;
+        analyzeBtn.textContent = '分析中...';
+        
+        this.startScannerAnimation();
+    }
+
+    hideLoading() {
+        const loadingElement = document.getElementById('loading');
+        const analyzeBtn = document.getElementById('analyze-btn');
+        
+        loadingElement.classList.remove('active');
+        analyzeBtn.disabled = false;
+        analyzeBtn.textContent = '开始分析';
+        
+        this.stopScannerAnimation();
+    }
+
+    async displayResults(data) {
+        const resultsElement = document.getElementById('results');
+        const ogCard = document.getElementById('og-card');
+        
+        // 基础信息
+        this.updateElement('og-title', data.title || '未获取到标题');
+        this.updateElement('og-description', data.description || '未获取到描述');
+        this.updateElement('og-url', data.url || this.currentUrl);
+        this.updateElement('og-site-name', data.site_name || '未知站点');
+        this.updateElement('og-type', data.type || 'website');
+        
+        // 媒体信息
+        this.updateImageElement('og-image', data.image);
+        this.updateElement('og-image-alt', data.image_alt || '图片描述不可用');
+        
+        // 技术信息
+        this.updateElement('og-locale', data.locale || '未指定');
+        this.updateElement('og-updated-time', this.formatDate(data.updated_time));
+        this.updateElement('response-time', `${Date.now() - this.startTime}ms`);
+        
+        // 显示结果
+        resultsElement.classList.add('active');
+        
+        // 添加动画效果
+        await this.animateResults();
+        
+        // 启用操作按钮
+        document.getElementById('copy-btn').disabled = false;
+        document.getElementById('clear-btn').disabled = false;
+    }
+
+    updateElement(id, content) {
+        const element = document.getElementById(id);
+        if (element) {
+            element.textContent = content;
+        }
+    }
+
+    updateImageElement(id, imageSrc) {
+        const element = document.getElementById(id);
+        if (element && imageSrc) {
+            element.src = imageSrc;
+            element.style.display = 'block';
+            element.onerror = () => {
+                element.style.display = 'none';
+                const placeholder = element.nextElementSibling;
+                if (placeholder && placeholder.classList.contains('image-placeholder')) {
+                    placeholder.style.display = 'flex';
+                }
+            };
+        } else if (element) {
+            element.style.display = 'none';
+            const placeholder = element.nextElementSibling;
+            if (placeholder && placeholder.classList.contains('image-placeholder')) {
+                placeholder.style.display = 'flex';
+            }
+        }
+    }
+
+    formatDate(timestamp) {
+        if (!timestamp) return '未知';
+        try {
+            const date = new Date(timestamp);
+            return date.toLocaleString('zh-CN');
+        } catch (e) {
+            return '格式错误';
+        }
+    }
+
+    async animateResults() {
+        const cards = document.querySelectorAll('.info-card');
+        
+        for (let i = 0; i < cards.length; i++) {
+            setTimeout(() => {
+                cards[i].classList.add('animate-in');
+            }, i * 100);
+        }
+        
+        // 等待动画完成
+        await new Promise(resolve => setTimeout(resolve, cards.length * 100 + 300));
+    }
+
+    showError(message) {
+        const errorElement = document.getElementById('error-message');
+        const errorText = errorElement.querySelector('.error-text');
+        const inputContainer = document.querySelector('.input-container');
+        
+        errorText.textContent = message;
+        errorElement.classList.add('active');
+        
+        // 添加震动效果
+        if (inputContainer) {
+            inputContainer.classList.add('shake');
+            setTimeout(() => {
+                inputContainer.classList.remove('shake');
+            }, 600);
+        }
+        
+        // 自动隐藏错误信息
+        setTimeout(() => {
+            this.hideError();
+        }, 5000);
+    }
+
+    hideError() {
+        const errorElement = document.getElementById('error-message');
+        errorElement.classList.remove('active');
+    }
+
+    hideResults() {
+        const resultsElement = document.getElementById('results');
+        resultsElement.classList.remove('active');
+        
+        // 重置动画状态
+        const cards = document.querySelectorAll('.info-card');
+        cards.forEach(card => card.classList.remove('animate-in'));
+    }
+
+    showSuccessMessage(message) {
+        const tipElement = document.getElementById('tip-message');
+        const tipText = tipElement.querySelector('.tip-text');
+        
+        tipText.textContent = message;
+        tipElement.classList.add('active');
+        
+        setTimeout(() => {
+            tipElement.classList.remove('active');
+        }, 3000);
+    }
+
+    shakeInput() {
+        const inputContainer = document.querySelector('.input-container');
+        inputContainer.classList.add('shake');
+        
+        setTimeout(() => {
+            inputContainer.classList.remove('shake');
+        }, 600);
+    }
+
+    copyResults() {
+        const ogData = {
+            title: document.getElementById('og-title').textContent,
+            description: document.getElementById('og-description').textContent,
+            url: document.getElementById('og-url').textContent,
+            site_name: document.getElementById('og-site-name').textContent,
+            type: document.getElementById('og-type').textContent,
+            image: document.getElementById('og-image').src,
+            locale: document.getElementById('og-locale').textContent
+        };
+        
+        const jsonString = JSON.stringify(ogData, null, 2);
+        
+        navigator.clipboard.writeText(jsonString).then(() => {
+            this.showSuccessMessage('结果已复制到剪贴板！');
+            this.flashCopyButton();
+        }).catch(err => {
+            console.error('复制失败:', err);
+            this.showError('复制失败，请手动选择内容');
+        });
+    }
+
+    flashCopyButton() {
+        const copyBtn = document.getElementById('copy-btn');
+        copyBtn.classList.add('flash');
+        
+        setTimeout(() => {
+            copyBtn.classList.remove('flash');
+        }, 300);
+    }
+
+    clearResults() {
+        const urlInput = document.getElementById('url-input');
+        const resultsElement = document.getElementById('results');
+        const errorElement = document.getElementById('error-message');
+        
+        urlInput.value = '';
+        urlInput.classList.remove('error');
+        resultsElement.classList.remove('active');
+        errorElement.classList.remove('active');
+        
+        document.getElementById('analyze-btn').classList.remove('ready');
+        document.getElementById('copy-btn').disabled = true;
+        document.getElementById('clear-btn').disabled = true;
+        
+        this.currentUrl = '';
+        
+        // 重置动画状态
+        const cards = document.querySelectorAll('.info-card');
+        cards.forEach(card => card.classList.remove('animate-in'));
+        
+        this.showSuccessMessage('已清除所有内容');
+    }
+
+    createBackgroundEffects() {
+        const container = document.querySelector('.background-container');
+        
+        // 创建各种背景效果层
+        const effects = [
+            'geometric-grid',
+            'neural-network', 
+            'particle-system',
+            'scan-lines',
+            'holographic-overlay',
+            'data-stream',
+            'quantum-waves'
+        ];
+        
+        effects.forEach(effectClass => {
+            const layer = document.createElement('div');
+            layer.className = effectClass;
+            container.appendChild(layer);
+        });
+    }
+
+    createInputGlow() {
+        const inputContainer = document.querySelector('.input-container');
+        
+        // 创建光晕效果
+        const glow = document.createElement('div');
+        glow.className = 'input-glow';
+        inputContainer.appendChild(glow);
+        
+        setTimeout(() => {
+            if (glow.parentNode) {
+                glow.remove();
+            }
+        }, 2000);
+    }
+
+    startScannerAnimation() {
+        const scanner = document.querySelector('.scanner');
+        if (scanner) {
+            scanner.classList.add('active');
+        }
+    }
+
+    stopScannerAnimation() {
+        const scanner = document.querySelector('.scanner');
+        if (scanner) {
+            scanner.classList.remove('active');
+        }
+    }
+
+    initializeAnimations() {
+        // 初始化页面动画
+        const header = document.querySelector('.header');
+        const querySection = document.querySelector('.query-section');
+        
+        setTimeout(() => {
+            header.classList.add('animate-in');
+        }, 100);
+        
+        setTimeout(() => {
+            querySection.classList.add('animate-in');
+        }, 300);
+    }
+
+    showWelcomeMessage() {
+        const tips = [
+            '支持分析网页的标题、描述、图片等元信息',
+            '可以预览社交媒体分享时的显示效果',
+            '检测网页的SEO优化情况',
+            '分析Open Graph协议标签'
+        ];
+        
+        setTimeout(() => {
+            this.showSuccessMessage('欢迎使用链接OG信息分析器！');
+        }, 1000);
+        
+        // 显示提示信息
+        this.showTips(tips);
+    }
+
+    // 显示提示信息
+    showTips(tips) {
+        const tipElement = document.getElementById('tip-message');
+        const tipText = tipElement.querySelector('.tip-text');
+        
+        let currentTip = 0;
+        
+        const showNextTip = () => {
+            tipText.textContent = tips[currentTip];
+            tipElement.classList.add('active');
+            tipElement.style.animation = 'fadeInUp 0.5s ease-out';
+            
+            setTimeout(() => {
+                tipElement.style.animation = 'fadeOutDown 0.5s ease-in';
+                setTimeout(() => {
+                    tipElement.classList.remove('active');
+                    currentTip = (currentTip + 1) % tips.length;
+                }, 500);
+            }, 3000);
+        };
+        
+        // 首次显示
+        setTimeout(showNextTip, 2000);
+        
+        // 每8秒显示一次
+        setInterval(showNextTip, 8000);
+    }
+}
+
+// 工具函数
+function debounce(func, wait) {
+    let timeout;
+    return function executedFunction(...args) {
+        const later = () => {
+            clearTimeout(timeout);
+            func(...args);
+        };
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+    };
+}
+
+function throttle(func, limit) {
+    let inThrottle;
+    return function() {
+        const args = arguments;
+        const context = this;
+        if (!inThrottle) {
+            func.apply(context, args);
+            inThrottle = true;
+            setTimeout(() => inThrottle = false, limit);
+        }
+    }
+}
+
+// 页面加载完成后初始化
+document.addEventListener('DOMContentLoaded', () => {
+    // 检查必要的DOM元素
+    const requiredElements = [
+        'url-input', 'analyze-btn', 'copy-btn', 'clear-btn',
+        'loading', 'results', 'error-message', 'tip-message'
+    ];
+    
+    const missingElements = requiredElements.filter(id => !document.getElementById(id));
+    
+    if (missingElements.length > 0) {
+        console.error('缺少必要的DOM元素:', missingElements);
+        return;
+    }
+    
+    // 初始化应用
+    window.ogAnalyzer = new OGAnalyzer();
+    
+    // 添加全局错误处理
+    window.addEventListener('error', (e) => {
+        console.error('全局错误:', e.error);
+        if (window.ogAnalyzer) {
+            window.ogAnalyzer.showError('发生未知错误，请刷新页面重试');
+        }
+    });
+    
+    // 添加网络状态监听
+    window.addEventListener('online', () => {
+        if (window.ogAnalyzer) {
+            window.ogAnalyzer.showSuccessMessage('网络连接已恢复');
+        }
+    });
+    
+    window.addEventListener('offline', () => {
+        if (window.ogAnalyzer) {
+            window.ogAnalyzer.showError('网络连接已断开');
+        }
+    });
+});
+
+// 导出给其他模块使用
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = { OGAnalyzer, debounce, throttle };
+}
\ No newline at end of file
diff --git a/frontend/60sapi/实用功能/链接OG信息/接口集合.json b/frontend/60sapi/实用功能/链接OG信息/接口集合.json
new file mode 100644
index 00000000..547b2771
--- /dev/null
+++ b/frontend/60sapi/实用功能/链接OG信息/接口集合.json
@@ -0,0 +1,3 @@
+[
+    "https://60s.api.shumengya.top"
+]
diff --git a/frontend/60sapi/实用功能/链接OG信息/返回接口.json b/frontend/60sapi/实用功能/链接OG信息/返回接口.json
new file mode 100644
index 00000000..de8516ab
--- /dev/null
+++ b/frontend/60sapi/实用功能/链接OG信息/返回接口.json
@@ -0,0 +1,66 @@
+{
+  "code": 200,
+  "message": "success",
+  "data": {
+    "url": "https://example.com",
+    "title": "示例网站标题",
+    "description": "这是一个示例网站的描述信息，用于展示OG标签解析功能。",
+    "image": "https://example.com/og-image.jpg",
+    "site_name": "示例网站",
+    "type": "website",
+    "locale": "zh_CN",
+    "author": "网站作者",
+    "keywords": "示例,网站,OG标签,元数据",
+    "favicon": "https://example.com/favicon.ico",
+    "canonical_url": "https://example.com",
+    "robots": "index,follow",
+    "viewport": "width=device-width, initial-scale=1.0",
+    "charset": "UTF-8",
+    "language": "zh-CN",
+    "published_time": "2024-01-01T00:00:00Z",
+    "modified_time": "2024-01-15T12:30:00Z",
+    "section": "技术",
+    "tags": ["前端", "元数据", "SEO"],
+    "twitter": {
+      "card": "summary_large_image",
+      "site": "@example",
+      "creator": "@author",
+      "title": "Twitter标题",
+      "description": "Twitter描述",
+      "image": "https://example.com/twitter-image.jpg"
+    },
+    "facebook": {
+      "app_id": "123456789",
+      "admins": "987654321"
+    },
+    "structured_data": {
+      "@context": "https://schema.org",
+      "@type": "WebPage",
+      "name": "示例网页",
+      "description": "示例网页描述",
+      "url": "https://example.com"
+    },
+    "meta_tags": {
+      "generator": "WordPress 6.0",
+      "theme-color": "#000000",
+      "msapplication-TileColor": "#ffffff",
+      "apple-mobile-web-app-capable": "yes",
+      "apple-mobile-web-app-status-bar-style": "default"
+    },
+    "performance": {
+      "load_time": 1.25,
+      "page_size": "2.3MB",
+      "requests_count": 45
+    },
+    "seo_score": {
+      "overall": 85,
+      "title_score": 90,
+      "description_score": 80,
+      "image_score": 85,
+      "structure_score": 88
+    }
+  },
+  "timestamp": "2024-01-15T12:30:45Z",
+  "request_id": "req_123456789",
+  "processing_time": 0.85
+}
\ No newline at end of file