Spaces:

EdDiboi
/

baidu

Running

App Files Files Community

EdDiboi commited on Mar 29

Commit

9c54fcb

verified ·

1 Parent(s): f5dcec1

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +376 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Baidu
-emoji: 📊
-colorFrom: red
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: baidu
+emoji: 🐳
+colorFrom: blue
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,376 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Baidu - 全球领先的中文搜索引擎</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
+        }
+        body {
+            background-color: #f5f5f5;
+            color: #333;
+            line-height: 1.6;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 20px;
+        }
+        /* Header Styles */
+        header {
+            background-color: #fff;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+            position: fixed;
+            width: 100%;
+            top: 0;
+            z-index: 1000;
+        }
+        .header-top {
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            padding: 10px 0;
+        }
+        .header-top a {
+            color: #333;
+            text-decoration: none;
+            font-size: 13px;
+            margin-left: 15px;
+            transition: color 0.3s;
+        }
+        .header-top a:hover {
+            color: #3385ff;
+        }
+        .header-top .login-btn {
+            background-color: #3385ff;
+            color: white;
+            padding: 5px 12px;
+            border-radius: 5px;
+            font-weight: 500;
+        }
+        .header-top .login-btn:hover {
+            background-color: #2a6fd6;
+            color: white;
+        }
+        /* Main Content */
+        .main-content {
+            margin-top: 100px;
+            text-align: center;
+            padding: 40px 0;
+        }
+        .logo {
+            margin-bottom: 30px;
+        }
+        .logo img {
+            height: 80px;
+        }
+        .search-box {
+            width: 100%;
+            max-width: 600px;
+            margin: 0 auto 30px;
+            position: relative;
+        }
+        .search-input {
+            width: 100%;
+            padding: 15px 20px;
+            border: 1px solid #ddd;
+            border-radius: 50px;
+            font-size: 16px;
+            outline: none;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            transition: all 0.3s;
+        }
+        .search-input:focus {
+            border-color: #3385ff;
+            box-shadow: 0 2px 12px rgba(51, 133, 255, 0.3);
+        }
+        .search-btn {
+            position: absolute;
+            right: 5px;
+            top: 5px;
+            background-color: #3385ff;
+            color: white;
+            border: none;
+            border-radius: 50px;
+            padding: 10px 25px;
+            font-size: 16px;
+            cursor: pointer;
+            transition: background-color 0.3s;
+        }
+        .search-btn:hover {
+            background-color: #2a6fd6;
+        }
+        .search-options {
+            display: flex;
+            justify-content: center;
+            gap: 20px;
+            margin-bottom: 40px;
+        }
+        .search-option {
+            background-color: #fff;
+            padding: 8px 15px;
+            border-radius: 5px;
+            font-size: 14px;
+            cursor: pointer;
+            transition: all 0.3s;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
+        }
+        .search-option:hover {
+            background-color: #f0f0f0;
+        }
+        .search-option.active {
+            background-color: #3385ff;
+            color: white;
+        }
+        /* Quick Links */
+        .quick-links {
+            display: grid;
+            grid-template-columns: repeat(5, 1fr);
+            gap: 20px;
+            max-width: 800px;
+            margin: 0 auto 40px;
+        }
+        .quick-link {
+            background-color: #fff;
+            border-radius: 8px;
+            padding: 15px;
+            text-align: center;
+            cursor: pointer;
+            transition: transform 0.3s, box-shadow 0.3s;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+        }
+        .quick-link:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+        }
+        .quick-link i {
+            font-size: 24px;
+            margin-bottom: 10px;
+            color: #3385ff;
+        }
+        .quick-link span {
+            font-size: 14px;
+            display: block;
+        }
+        /* Footer */
+        footer {
+            background-color: #fff;
+            padding: 20px 0;
+            margin-top: 50px;
+            border-top: 1px solid #eee;
+        }
+        .footer-links {
+            display: flex;
+            justify-content: center;
+            flex-wrap: wrap;
+            gap: 20px;
+            margin-bottom: 15px;
+        }
+        .footer-links a {
+            color: #666;
+            text-decoration: none;
+            font-size: 13px;
+            transition: color 0.3s;
+        }
+        .footer-links a:hover {
+            color: #3385ff;
+        }
+        .copyright {
+            text-align: center;
+            color: #999;
+            font-size: 12px;
+        }
+        /* Mobile Responsive */
+        @media (max-width: 768px) {
+            .quick-links {
+                grid-template-columns: repeat(3, 1fr);
+            }
+            .search-options {
+                flex-wrap: wrap;
+            }
+        }
+        @media (max-width: 480px) {
+            .quick-links {
+                grid-template-columns: repeat(2, 1fr);
+            }
+            .search-box {
+                max-width: 90%;
+            }
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <div class="container">
+            <div class="header-top">
+                <a href="#"><i class="fas fa-user"></i> 登录</a>
+                <a href="#"><i class="fas fa-cog"></i> 设置</a>
+                <a href="#" class="login-btn">登录</a>
+            </div>
+        </div>
+    </header>
+    <div class="main-content">
+        <div class="container">
+            <div class="logo">
+                <img src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="Baidu Logo">
+            </div>
+            <div class="search-box">
+                <input type="text" class="search-input" placeholder="请输入搜索关键词...">
+                <button class="search-btn"><i class="fas fa-search"></i> 百度一下</button>
+            </div>
+            <div class="search-options">
+                <div class="search-option active">网页</div>
+                <div class="search-option">新闻</div>
+                <div class="search-option">贴吧</div>
+                <div class="search-option">知道</div>
+                <div class="search-option">音乐</div>
+                <div class="search-option">图片</div>
+                <div class="search-option">视频</div>
+                <div class="search-option">地图</div>
+            </div>
+            <div class="quick-links">
+                <div class="quick-link">
+                    <i class="fas fa-newspaper"></i>
+                    <span>百度新闻</span>
+                </div>
+                <div class="quick-link">
+                    <i class="fas fa-map-marked-alt"></i>
+                    <span>百度地图</span>
+                </div>
+                <div class="quick-link">
+                    <i class="fas fa-video"></i>
+                    <span>百度视频</span>
+                </div>
+                <div class="quick-link">
+                    <i class="fas fa-music"></i>
+                    <span>百度音乐</span>
+                </div>
+                <div class="quick-link">
+                    <i class="fas fa-image"></i>
+                    <span>百度图片</span>
+                </div>
+                <div class="quick-link">
+                    <i class="fas fa-kiwi-bird"></i>
+                    <span>百度贴吧</span>
+                </div>
+                <div class="quick-link">
+                    <i class="fas fa-graduation-cap"></i>
+                    <span>百度学术</span>
+                </div>
+                <div class="quick-link">
+                    <i class="fas fa-cloud"></i>
+                    <span>百度网盘</span>
+                </div>
+                <div class="quick-link">
+                    <i class="fas fa-language"></i>
+                    <span>百度翻译</span>
+                </div>
+                <div class="quick-link">
+                    <i class="fas fa-shopping-bag"></i>
+                    <span>百度购物</span>
+                </div>
+            </div>
+        </div>
+    </div>
+    <footer>
+        <div class="container">
+            <div class="footer-links">
+                <a href="#">关于百度</a>
+                <a href="#">About Baidu</a>
+                <a href="#">广告服务</a>
+                <a href="#">百度营销</a>
+                <a href="#">使用百度前必读</a>
+                <a href="#">隐私政策</a>
+                <a href="#">帮助中心</a>
+                <a href="#">意见反馈</a>
+            </div>
+            <div class="copyright">
+                ©2023 Baidu 京ICP证030173号 京公网安备11000002000001号
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Search functionality
+        document.querySelector('.search-btn').addEventListener('click', function() {
+            const query = document.querySelector('.search-input').value.trim();
+            if (query) {
+                alert(`正在搜索: ${query}`);
+                // In a real implementation, this would redirect to search results
+                // window.location.href = `https://www.baidu.com/s?wd=${encodeURIComponent(query)}`;
+            }
+        });
+        // Search input enter key event
+        document.querySelector('.search-input').addEventListener('keypress', function(e) {
+            if (e.key === 'Enter') {
+                document.querySelector('.search-btn').click();
+            }
+        });
+        // Search option selection
+        const searchOptions = document.querySelectorAll('.search-option');
+        searchOptions.forEach(option => {
+            option.addEventListener('click', function() {
+                searchOptions.forEach(opt => opt.classList.remove('active'));
+                this.classList.add('active');
+            });
+        });
+        // Quick links functionality
+        const quickLinks = document.querySelectorAll('.quick-link');
+        quickLinks.forEach(link => {
+            link.addEventListener('click', function() {
+                const serviceName = this.querySelector('span').textContent;
+                alert(`即将跳转到${serviceName}`);
+                // In a real implementation, this would redirect to the specific service
+            });
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
+</html>