Hugging Face's logo

Spaces:
madansa7
/
gravity
Running

App Files Community
madansa7 commited on
Commit
2bcdd99
·
verified ·
1 Parent(s): f88f685

Manual changes saved

Browse files
Files changed (2) hide show
  1. index.html +0 -392
  2. style.css +0 -28
index.html CHANGED
@@ -1,392 +0,0 @@
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 Gravity</title>
7
- <script src="https://cdn.tailwindcss.com"></script>
8
- <style>
9
- @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');
10
-
11
- body {
12
- font-family: 'Roboto', sans-serif;
13
- overflow: hidden;
14
- touch-action: none;
15
- background-color: #f8f9fa;
16
- height: 100vh;
17
- width: 100vw;
18
- }
19
-
20
- .draggable {
21
- position: absolute;
22
- cursor: grab;
23
- user-select: none;
24
- touch-action: none;
25
- transition: transform 0.1s ease-out;
26
- will-change: transform;
27
- }
28
-
29
- .draggable:active {
30
- cursor: grabbing;
31
- }
32
-
33
- .search-box {
34
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
35
- border-radius: 24px;
36
- }
37
-
38
- .btn {
39
- transition: all 0.2s;
40
- }
41
-
42
- .btn:hover {
43
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
44
- }
45
-
46
- #reset-btn {
47
- position: fixed;
48
- bottom: 20px;
49
- right: 20px;
50
- z-index: 100;
51
- }
52
-
53
- .bounce {
54
- animation: bounce 0.5s;
55
- }
56
-
57
- @keyframes bounce {
58
- 0%, 100% { transform: translateY(0); }
59
- 50% { transform: translateY(-20px); }
60
- }
61
-
62
- #search-input {
63
- outline: none;
64
- }
65
- </style>
66
- </head>
67
- <body class="relative">
68
- <!-- Google Logo -->
69
- <div id="google-logo" class="draggable w-56 md:w-64 absolute top-20 left-1/2 transform -translate-x-1/2">
70
- <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google" class="w-full">
71
- </div>
72
-
73
- <!-- Search Box -->
74
- <form id="search-form" class="draggable w-80 md:w-96 absolute top-60 left-1/2 transform -translate-x-1/2" action="https://www.google.com/search" method="GET" target="_blank">
75
- <div class="search-box bg-white flex items-center h-12 px-4">
76
- <svg class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
77
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
78
- </svg>
79
- <input id="search-input" type="text" name="q" class="flex-grow px-4" placeholder="Search Google or type a URL" autocomplete="off">
80
- </div>
81
- </form>
82
-
83
- <!-- Buttons -->
84
- <div id="buttons-container" class="draggable absolute top-80 left-1/2 transform -translate-x-1/2 flex space-x-4 mt-4">
85
- <button type="submit" form="search-form" class="btn bg-gray-100 px-4 py-2 rounded text-sm text-gray-800 hover:bg-gray-200">
86
- Google Search
87
- </button>
88
- <button id="lucky-btn" class="btn bg-gray-100 px-4 py-2 rounded text-sm text-gray-800 hover:bg-gray-200">
89
- I'm Feeling Lucky
90
- </button>
91
- </div>
92
-
93
- <!-- Footer -->
94
- <div id="footer" class="draggable absolute bottom-4 left-1/2 transform -translate-x-1/2 text-sm text-gray-600">
95
- <div class="flex space-x-4">
96
- <a href="#" class="hover:underline">About</a>
97
- <a href="#" class="hover:underline">Advertising</a>
98
- <a href="#" class="hover:underline">Business</a>
99
- <a href="#" class="hover:underline">How Search works</a>
100
- </div>
101
- </div>
102
-
103
- <!-- Reset Button -->
104
- <button id="reset-btn" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-full shadow-lg transition-all">
105
- Reset Gravity
106
- </button>
107
-
108
- <script>
109
- document.addEventListener('DOMContentLoaded', () => {
110
- // Physics constants
111
- const GRAVITY = 0.4;
112
- const FRICTION = 0.98;
113
- const BOUNCE = 0.7;
114
- const ELEMENT_MASS = 0.5;
115
-
116
- // Get all draggable elements
117
- const elements = document.querySelectorAll('.draggable');
118
- const resetBtn = document.getElementById('reset-btn');
119
- const searchForm = document.getElementById('search-form');
120
- const luckyBtn = document.getElementById('lucky-btn');
121
- const searchInput = document.getElementById('search-input');
122
-
123
- // Store element physics data
124
- const physicsData = new Map();
125
-
126
- // Initialize physics for each element
127
- elements.forEach(element => {
128
- const rect = element.getBoundingClientRect();
129
- physicsData.set(element, {
130
- x: rect.left,
131
- y: rect.top,
132
- vx: 0,
133
- vy: 0,
134
- width: rect.width,
135
- height: rect.height,
136
- mass: ELEMENT_MASS,
137
- isDragging: false
138
- });
139
-
140
- // Add event listeners for drag
141
- setupDrag(element);
142
- });
143
-
144
- // Apply gravity on load
145
- setTimeout(() => {
146
- applyRandomForce();
147
- }, 100);
148
-
149
- // Reset button functionality
150
- resetBtn.addEventListener('click', () => {
151
- resetElements();
152
- });
153
-
154
- // "I'm Feeling Lucky" button functionality
155
- luckyBtn.addEventListener('click', (e) => {
156
- e.preventDefault();
157
- if (searchInput.value.trim()) {
158
- searchForm.action = 'https://www.google.com/search';
159
- const input = document.createElement('input');
160
- input.type = 'hidden';
161
- input.name = 'btnI';
162
- input.value = '1';
163
- searchForm.appendChild(input);
164
- searchForm.submit();
165
- }
166
- });
167
-
168
- // Animation loop
169
- function animate() {
170
- elements.forEach(element => {
171
- const data = physicsData.get(element);
172
-
173
- if (!data.isDragging) {
174
- // Apply gravity
175
- data.vy += GRAVITY * data.mass;
176
-
177
- // Apply velocity
178
- data.y += data.vy;
179
- data.x += data.vx;
180
-
181
- // Apply friction
182
- data.vx *= FRICTION;
183
- data.vy *= FRICTION;
184
-
185
- // Check for collision with floor
186
- if (data.y + data.height > window.innerHeight) {
187
- data.y = window.innerHeight - data.height;
188
- data.vy = -data.vy * BOUNCE;
189
-
190
- // Stop bouncing when velocity is very small
191
- if (Math.abs(data.vy) < 0.5) {
192
- data.vy = 0;
193
- }
194
- }
195
-
196
- // Check for collision with walls
197
- if (data.x < 0) {
198
- data.x = 0;
199
- data.vx = -data.vx * BOUNCE;
200
- } else if (data.x + data.width > window.innerWidth) {
201
- data.x = window.innerWidth - data.width;
202
- data.vx = -data.vx * BOUNCE;
203
- }
204
-
205
- // Update element position
206
- element.style.left = `${data.x}px`;
207
- element.style.top = `${data.y}px`;
208
- }
209
- });
210
-
211
- requestAnimationFrame(animate);
212
- }
213
-
214
- // Start animation
215
- animate();
216
-
217
- // Setup drag functionality
218
- function setupDrag(element) {
219
- const data = physicsData.get(element);
220
- let isDragging = false;
221
- let offsetX, offsetY;
222
-
223
- // Mouse events
224
- element.addEventListener('mousedown', startDrag);
225
- document.addEventListener('mousemove', drag);
226
- document.addEventListener('mouseup', endDrag);
227
-
228
- // Touch events
229
- element.addEventListener('touchstart', touchStartDrag);
230
- document.addEventListener('touchmove', touchDrag);
231
- document.addEventListener('touchend', touchEndDrag);
232
-
233
- function startDrag(e) {
234
- // Don't drag if clicking on the search input
235
- if (e.target === searchInput) return;
236
-
237
- isDragging = true;
238
- data.isDragging = true;
239
- offsetX = e.clientX - data.x;
240
- offsetY = e.clientY - data.y;
241
- element.style.cursor = 'grabbing';
242
- e.preventDefault();
243
- }
244
-
245
- function drag(e) {
246
- if (!isDragging) return;
247
-
248
- data.x = e.clientX - offsetX;
249
- data.y = e.clientY - offsetY;
250
-
251
- // Update velocity based on drag speed
252
- data.vx = (e.movementX || 0) * 0.5;
253
- data.vy = (e.movementY || 0) * 0.5;
254
-
255
- element.style.left = `${data.x}px`;
256
- element.style.top = `${data.y}px`;
257
- }
258
-
259
- function endDrag() {
260
- if (!isDragging) return;
261
-
262
- isDragging = false;
263
- data.isDragging = false;
264
- element.style.cursor = 'grab';
265
- }
266
-
267
- // Touch handlers
268
- function touchStartDrag(e) {
269
- const touch = e.touches[0];
270
- // Don't drag if touching the search input
271
- if (e.target === searchInput) return;
272
-
273
- isDragging = true;
274
- data.isDragging = true;
275
- offsetX = touch.clientX - data.x;
276
- offsetY = touch.clientY - data.y;
277
- element.style.cursor = 'grabbing';
278
- e.preventDefault();
279
- }
280
-
281
- function touchDrag(e) {
282
- if (!isDragging) return;
283
- const touch = e.touches[0];
284
-
285
- // Calculate movement (not directly available in touch events)
286
- const prevX = data.x;
287
- const prevY = data.y;
288
-
289
- data.x = touch.clientX - offsetX;
290
- data.y = touch.clientY - offsetY;
291
-
292
- // Approximate velocity based on position change
293
- data.vx = (data.x - prevX) * 2;
294
- data.vy = (data.y - prevY) * 2;
295
-
296
- element.style.left = `${data.x}px`;
297
- element.style.top = `${data.y}px`;
298
- }
299
-
300
- function touchEndDrag() {
301
- if (!isDragging) return;
302
-
303
- isDragging = false;
304
- data.isDragging = false;
305
- element.style.cursor = 'grab';
306
- }
307
- }
308
-
309
- // Apply random force to elements
310
- function applyRandomForce() {
311
- elements.forEach(element => {
312
- const data = physicsData.get(element);
313
- data.vx = (Math.random() - 0.5) * 10;
314
- data.vy = (Math.random() - 0.5) * 10;
315
- });
316
- }
317
-
318
- // Reset elements to original positions
319
- function resetElements() {
320
- elements.forEach(element => {
321
- const data = physicsData.get(element);
322
-
323
- // Get original position based on element ID
324
- let originalX, originalY;
325
-
326
- switch(element.id) {
327
- case 'google-logo':
328
- originalX = window.innerWidth / 2 - 128;
329
- originalY = 80;
330
- break;
331
- case 'search-form':
332
- originalX = window.innerWidth / 2 - 192;
333
- originalY = 240;
334
- break;
335
- case 'buttons-container':
336
- originalX = window.innerWidth / 2 - 120;
337
- originalY = 320;
338
- break;
339
- case 'footer':
340
- originalX = window.innerWidth / 2 - 150;
341
- originalY = window.innerHeight - 40;
342
- break;
343
- default:
344
- originalX = window.innerWidth / 2;
345
- originalY = window.innerHeight / 2;
346
- }
347
-
348
- // Animate back to original position
349
- const duration = 1000; // 1 second
350
- const startTime = performance.now();
351
-
352
- function animateReset(currentTime) {
353
- const elapsed = currentTime - startTime;
354
- const progress = Math.min(elapsed / duration, 1);
355
-
356
- // Ease out function
357
- const ease = 1 - Math.pow(1 - progress, 3);
358
-
359
- data.x = data.x + (originalX - data.x) * ease;
360
- data.y = data.y + (originalY - data.y) * ease;
361
-
362
- element.style.left = `${data.x}px`;
363
- element.style.top = `${data.y}px`;
364
-
365
- if (progress < 1) {
366
- requestAnimationFrame(animateReset);
367
- } else {
368
- // Reset velocities
369
- data.vx = 0;
370
- data.vy = 0;
371
-
372
- // Apply bounce effect
373
- element.classList.add('bounce');
374
- setTimeout(() => {
375
- element.classList.remove('bounce');
376
- }, 500);
377
- }
378
- }
379
-
380
- requestAnimationFrame(animateReset);
381
- });
382
- }
383
-
384
- // Handle window resize
385
- window.addEventListener('resize', () => {
386
- // For simplicity, we'll just reset elements on resize
387
- resetElements();
388
- });
389
- });
390
- </script>
391
- <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=madansa7/gravity" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
392
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
style.css CHANGED
@@ -1,28 +0,0 @@
1
- body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
4
- }
5
-
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
- }
10
-
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
- }
17
-
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
- }
25
-
26
- .card p:last-child {
27
- margin-bottom: 0;
28
- }