Spaces:

jilangdi
/

googly-bear-search

Running

App Files Files Community

jilangdi commited on 24 days ago

Commit

710f15a

verified ·

1 Parent(s): dbd2934

完全复现UI设计

Browse files

Files changed (3) hide show

index.html +3 -4
script.js +16 -80
style.css +0 -20

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Googly Bear Search</title>
 <link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/feather-icons"></script>
@@ -26,7 +26,7 @@
     <!-- Main Content -->
     <main class="flex-grow flex flex-col items-center justify-center -mt-20 px-4">
         <div class="mb-8">
-            <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Googly Bear" class="w-56 md:w-72">
 </div>
         <div class="w-full max-w-xl relative">
@@ -44,7 +44,7 @@
             <div class="flex justify-center mt-8 space-x-2">
                 <button class="px-4 py-2 bg-gray-100 text-sm text-gray-800 rounded hover:shadow-sm hover:border hover:border-gray-200">
-                    Bear Search
 </button>
                 <button class="px-4 py-2 bg-gray-100 text-sm text-gray-800 rounded hover:shadow-sm hover:border hover:border-gray-200">
                     I'm Feeling Lucky
@@ -80,6 +80,5 @@
     <script>
         feather.replace();
     </script>
-<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Google</title>
 <link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/feather-icons"></script>
     <!-- Main Content -->
     <main class="flex-grow flex flex-col items-center justify-center -mt-20 px-4">
         <div class="mb-8">
+            <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google" class="w-56 md:w-72">
 </div>
         <div class="w-full max-w-xl relative">
             <div class="flex justify-center mt-8 space-x-2">
                 <button class="px-4 py-2 bg-gray-100 text-sm text-gray-800 rounded hover:shadow-sm hover:border hover:border-gray-200">
+                    Google Search
 </button>
                 <button class="px-4 py-2 bg-gray-100 text-sm text-gray-800 rounded hover:shadow-sm hover:border hover:border-gray-200">
                     I'm Feeling Lucky
     <script>
         feather.replace();
     </script>
 </body>
 </html>

script.js CHANGED Viewed

@@ -1,84 +1,20 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Google</title>
-    <link rel="stylesheet" href="style.css">
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://unpkg.com/feather-icons"></script>
-    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
-    <link rel="icon" href="https://www.google.com/favicon.ico">
-</head>
-<body class="bg-white min-h-screen flex flex-col">
-    <!-- Header -->
-    <header class="w-full flex justify-end p-4 space-x-4">
-        <a href="#" class="text-sm text-gray-600 hover:underline">Gmail</a>
-        <a href="#" class="text-sm text-gray-600 hover:underline">Images</a>
-        <button class="p-2 rounded-full hover:bg-gray-100">
-            <i data-feather="grid"></i>
-        </button>
-        <button class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
-            Sign in
-        </button>
-    </header>
-    <!-- Main Content -->
-    <main class="flex-grow flex flex-col items-center justify-center -mt-20 px-4">
-        <div class="mb-8">
-            <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google" class="w-56 md:w-72">
-        </div>
-        <div class="w-full max-w-xl relative">
-            <div class="relative">
-                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                    <i data-feather="search" class="text-gray-400"></i>
-                </div>
-                <input type="text" class="w-full py-3 pl-10 pr-12 border border-gray-200 rounded-full hover:shadow-md focus:shadow-md focus:outline-none transition-shadow" autofocus>
-                <div class="absolute inset-y-0 right-0 pr-3 flex items-center">
-                    <button class="p-1 text-gray-400 hover:text-gray-600">
-                        <i data-feather="mic"></i>
-                    </button>
-                </div>
-            </div>
-            <div class="flex justify-center mt-8 space-x-2">
-                <button class="px-4 py-2 bg-gray-100 text-sm text-gray-800 rounded hover:shadow-sm hover:border hover:border-gray-200">
-                    Google Search
-                </button>
-                <button class="px-4 py-2 bg-gray-100 text-sm text-gray-800 rounded hover:shadow-sm hover:border hover:border-gray-200">
-                    I'm Feeling Lucky
-                </button>
-            </div>
-        </div>
-        <div class="mt-8 text-sm text-gray-600">
-            <p>Google offered in: <a href="#" class="text-blue-600 hover:underline">Español (Latinoamérica)</a></p>
-        </div>
-    </main>
-    <!-- Footer -->
-    <footer class="bg-gray-100 w-full">
-        <div class="px-8 py-3 border-b border-gray-300">
-            <p class="text-sm text-gray-600">United States</p>
-        </div>
-        <div class="px-8 py-3 flex flex-col md:flex-row md:justify-between">
-            <div class="flex space-x-6 mb-3 md:mb-0">
-                <a href="#" class="text-sm text-gray-600 hover:underline">About</a>
-                <a href="#" class="text-sm text-gray-600 hover:underline">Advertising</a>
-                <a href="#" class="text-sm text-gray-600 hover:underline">Business</a>
-                <a href="#" class="text-sm text-gray-600 hover:underline">How Search works</a>
-            </div>
-            <div class="flex space-x-6">
-                <a href="#" class="text-sm text-gray-600 hover:underline">Privacy</a>
-                <a href="#" class="text-sm text-gray-600 hover:underline">Terms</a>
-                <a href="#" class="text-sm text-gray-600 hover:underline">Settings</a>
-            </div>
-        </div>
-    </footer>
-    <script>
         feather.replace();
-    </script>
-</body>
-</html>

+// Google Search functionality would go here
+document.addEventListener('DOMContentLoaded', function() {
+    // Search box focus effects
+    const searchInput = document.querySelector('input[type="text"]');
+    if (searchInput) {
+        searchInput.addEventListener('focus', function() {
+            this.style.boxShadow = '0 1px 6px rgba(32, 33, 36, 0.28)';
+        });
+        searchInput.addEventListener('blur', function() {
+            this.style.boxShadow = '';
+        });
+    }
+    // Initialize feather icons
+    if (window.feather) {
         feather.replace();
+    }
+});

style.css CHANGED Viewed

@@ -30,23 +30,3 @@ button.bg-gray-100:hover {
 footer a {
     color: #70757a;
 }
-/* Logo with bear paw effect */
-img {
-    height: 92px;
-    width: auto;
-    position: relative;
-}
-img::after {
-    content: '';
-    position: absolute;
-    bottom: -10px;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 60px;
-    height: 40px;
-    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 60"><path d="M50,0 C60,20 80,25 100,50 C80,50 60,40 50,30 C40,40 20,50 0,50 C20,25 40,20 50,0 Z" fill="%23FF9800"/></svg>');
-    background-repeat: no-repeat;
-    background-position: center;
-    opacity: 0.8;
-}

 footer a {
     color: #70757a;
 }