Hugging Face's logo

Spaces:
madansa7
/
gravity
Running

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

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +392 -19
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Gravity
3
- emoji: 🦀
4
  colorFrom: red
5
- colorTo: yellow
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: gravity
3
+ emoji: 🐳
4
  colorFrom: red
5
+ colorTo: gray
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,392 @@
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 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>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ Here is a full prompt to generate a web-based, cursor and touch-responsive "Google Gravity"-style app using HTML, CSS, and JavaScript. This app will simulate the gravity effect on draggable Google-like elements, and will work on both desktop (cursor) and mobile (touch). 🧠 Prompt (for an AI or code generator): Create a web-based app that simulates "Google Gravity" with the following requirements: HTML Structure: A search bar with a “Google” logo at the top. Several buttons like “Search”, “I’m Feeling Lucky”. All elements should fall with gravity when the page loads. CSS Styling: Center the elements initially like a typical Google homepage. Apply a clean, flat style using basic fonts and spacing. Add smooth transitions when elements are moved or interact. JavaScript (Vanilla): Apply a basic physics engine: gravity, collision detection, and bounce effects. Make all elements draggable using the mouse and touch. On load, apply a gravity drop effect where all elements fall to the bottom. Use requestAnimationFrame() for animation. Support multi-touch on mobile. Responsive: The layout should adapt to different screen sizes (desktop, tablet, mobile). Touch interaction must support dragging elements with fingers. Extras (Optional but Preferred): Allow user to re-trigger gravity with a button. Use realistic bounce and inertia when dragging and dropping elements.
2
+ search type should work and redirect to real google with users search request, with each piece should be seperated,