Hugging Face's logo

Spaces:
ashkanpourali
/
empower
Running

App Files Community
ashkanpourali commited on
Commit
d643523
·
verified ·
1 Parent(s): 8b8b49a

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +203 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Empower
3
- emoji: 🚀
4
- colorFrom: purple
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: empower
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,203 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Google</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ 'google-blue': '#4285F4',
15
+ 'google-red': '#EA4335',
16
+ 'google-yellow': '#FBBC05',
17
+ 'google-green': '#34A853',
18
+ }
19
+ }
20
+ }
21
+ }
22
+ </script>
23
+ <style>
24
+ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
25
+
26
+ body {
27
+ font-family: 'Roboto', sans-serif;
28
+ min-height: 100vh;
29
+ display: flex;
30
+ flex-direction: column;
31
+ }
32
+
33
+ .google-logo {
34
+ font-weight: 500;
35
+ position: relative;
36
+ }
37
+
38
+ .google-logo span:nth-child(1) { color: #4285F4; }
39
+ .google-logo span:nth-child(2) { color: #EA4335; }
40
+ .google-logo span:nth-child(3) { color: #FBBC05; }
41
+ .google-logo span:nth-child(4) { color: #4285F4; }
42
+ .google-logo span:nth-child(5) { color: #34A853; }
43
+ .google-logo span:nth-child(6) { color: #EA4335; }
44
+
45
+ .search-box {
46
+ transition: all 0.3s ease;
47
+ }
48
+
49
+ .search-box:hover {
50
+ box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
51
+ }
52
+
53
+ .footer-link {
54
+ transition: color 0.2s;
55
+ }
56
+
57
+ .footer-link:hover {
58
+ color: #4285F4;
59
+ }
60
+
61
+ .menu-item {
62
+ transition: background-color 0.2s;
63
+ }
64
+
65
+ .menu-item:hover {
66
+ background-color: rgba(0, 0, 0, 0.05);
67
+ }
68
+ </style>
69
+ </head>
70
+ <body class="bg-white flex flex-col min-h-screen">
71
+ <!-- Header Navigation -->
72
+ <header class="w-full py-4 px-6">
73
+ <nav class="flex justify-between items-center">
74
+ <div class="flex items-center space-x-6">
75
+ <a href="https://about.google/?fg=1&utm_source=google-US&utm_medium=referral&utm_campaign=hp-header"
76
+ class="text-sm text-gray-700 hover:text-google-blue transition-colors">
77
+ About
78
+ </a>
79
+ <a href="https://store.google.com/US?utm_source=hp_header&utm_medium=google_ooo&utm_campaign=GS100042&hl=en-US"
80
+ class="text-sm text-gray-700 hover:text-google-blue transition-colors">
81
+ Store
82
+ </a>
83
+ </div>
84
+ <div class="flex items-center space-x-6">
85
+ <a href="https://mail.google.com/mail/&ogbl"
86
+ class="text-sm text-gray-700 hover:text-google-blue transition-colors">
87
+ Gmail
88
+ </a>
89
+ <a href="https://www.google.com/imghp?hl=en&ogbl"
90
+ class="text-sm text-gray-700 hover:text-google-blue transition-colors">
91
+ Images
92
+ </a>
93
+ <button class="p-2 rounded-full hover:bg-gray-100 transition-colors">
94
+ <i class="fas fa-th text-gray-600"></i>
95
+ </button>
96
+ <a href="https://accounts.google.com/ServiceLogin?hl=en&passive=true&continue=https://www.google.com/&ec=futura_exp_og_so_72776762_e"
97
+ class="bg-google-blue text-white px-6 py-2 rounded-md text-sm font-medium hover:bg-blue-600 transition-colors">
98
+ Sign in
99
+ </a>
100
+ </div>
101
+ </nav>
102
+ </header>
103
+
104
+ <!-- Main Content -->
105
+ <main class="flex-grow flex flex-col items-center justify-center px-4 py-12">
106
+ <div class="mb-8">
107
+ <h1 class="google-logo text-7xl md:text-8xl font-bold text-center">
108
+ <span>G</span><span>o</span><span>o</span><span>g</span><span>l</span><span>e</span>
109
+ </h1>
110
+ </div>
111
+
112
+ <div class="w-full max-w-2xl mx-auto mb-8">
113
+ <div class="search-box flex items-center border border-gray-300 rounded-full px-4 py-3 shadow-sm">
114
+ <i class="fas fa-search text-gray-400 mr-3"></i>
115
+ <input type="text" class="w-full focus:outline-none" placeholder="Search Google or type a URL">
116
+ <div class="flex space-x-4">
117
+ <i class="fas fa-microphone text-gray-400 hover:text-google-blue cursor-pointer"></i>
118
+ <i class="fas fa-camera text-gray-400 hover:text-google-blue cursor-pointer"></i>
119
+ </div>
120
+ </div>
121
+ </div>
122
+
123
+ <div class="flex space-x-4 mb-16">
124
+ <button class="bg-gray-100 hover:bg-gray-200 text-gray-800 px-4 py-2 rounded-md text-sm transition-colors">
125
+ Google Search
126
+ </button>
127
+ <button class="bg-gray-100 hover:bg-gray-200 text-gray-800 px-4 py-2 rounded-md text-sm transition-colors">
128
+ I'm Feeling Lucky
129
+ </button>
130
+ </div>
131
+
132
+ <div class="max-w-xl mx-auto text-center mb-8">
133
+ <p class="text-sm text-gray-600 mb-4">Google offered in: <a href="#" class="text-google-blue hover:underline">English</a></p>
134
+ </div>
135
+
136
+ <!-- AI Promotion -->
137
+ <div class="mt-8 bg-blue-50 p-6 rounded-lg max-w-2xl text-center">
138
+ <h3 class="font-medium text-google-blue mb-2">
139
+ <i class="fas fa-brain mr-2"></i>Applying AI towards science and the environment
140
+ </h3>
141
+ <p class="text-sm text-gray-700 mb-3">Discover how Google AI is helping solve some of humanity's biggest challenges</p>
142
+ <a href="https://ai.google/societal-impact/?utm_source=googlehpfooter&utm_medium=housepromos&utm_campaign=bottom-footer"
143
+ class="inline-block text-google-blue hover:underline text-sm font-medium">
144
+ Learn more
145
+ </a>
146
+ </div>
147
+ </main>
148
+
149
+ <!-- Footer -->
150
+ <footer class="w-full bg-gray-100 mt-auto">
151
+ <div class="px-6 py-3">
152
+ <p class="text-sm text-gray-600">United States</p>
153
+ </div>
154
+
155
+ <div class="border-t border-gray-300 px-6 py-3 flex flex-col md:flex-row md:justify-between">
156
+ <div class="flex flex-wrap gap-6 mb-4 md:mb-0">
157
+ <a href="https://www.google.com/intl/en_us/ads/?subid=ww-ww-et-g-awa-a-g_hpafoot1_1!o2&utm_source=google.com&utm_medium=referral&utm_campaign=google_hpafooter&fg=1"
158
+ class="footer-link text-xs text-gray-600">Advertising</a>
159
+ <a href="https://www.google.com/services/?subid=ww-ww-et-g-awa-a-g_hpbfoot1_1!o2&utm_source=google.com&utm_medium=referral&utm_campaign=google_hpbfooter&fg=1"
160
+ class="footer-link text-xs text-gray-600">Business</a>
161
+ <a href="https://google.com/search/howsearchworks/?fg=1"
162
+ class="footer-link text-xs text-gray-600">How Search works</a>
163
+ </div>
164
+
165
+ <div class="flex flex-wrap gap-6">
166
+ <a href="https://policies.google.com/privacy?hl=en&fg=1"
167
+ class="footer-link text-xs text-gray-600">Privacy</a>
168
+ <a href="https://policies.google.com/terms?hl=en&fg=1"
169
+ class="footer-link text-xs text-gray-600">Terms</a>
170
+ <button class="footer-link text-xs text-gray-600 focus:outline-none">Settings</button>
171
+ </div>
172
+ </div>
173
+ </footer>
174
+
175
+ <script>
176
+ // Simple animation for the logo
177
+ document.addEventListener('DOMContentLoaded', function() {
178
+ const logoLetters = document.querySelectorAll('.google-logo span');
179
+
180
+ logoLetters.forEach((letter, index) => {
181
+ letter.style.opacity = '0';
182
+ letter.style.transform = 'translateY(20px)';
183
+
184
+ setTimeout(() => {
185
+ letter.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
186
+ letter.style.opacity = '1';
187
+ letter.style.transform = 'translateY(0)';
188
+ }, index * 100);
189
+ });
190
+
191
+ // Focus on search input
192
+ const searchInput = document.querySelector('input');
193
+ searchInput.addEventListener('focus', () => {
194
+ document.querySelector('.search-box').classList.add('shadow-md', 'border-transparent');
195
+ });
196
+
197
+ searchInput.addEventListener('blur', () => {
198
+ document.querySelector('.search-box').classList.remove('shadow-md', 'border-transparent');
199
+ });
200
+ });
201
+ </script>
202
+ <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 <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ashkanpourali/empower" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
203
+ </html>