Hugging Face's logo

Spaces:
Inv
/
cool1
Running

App Files Community
Inv commited on
Commit
2a96bdf
·
verified ·
1 Parent(s): a8c4615

do something cool

Browse files
Files changed (3) hide show
  1. README.md +8 -5
  2. index.html +204 -19
  3. style.css +90 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Cool1
3
- emoji: 😻
4
- colorFrom: gray
5
- colorTo: gray
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: cool1
3
+ colorFrom: blue
4
+ colorTo: red
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
index.html CHANGED
@@ -1,19 +1,204 @@
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>cool1 — Interactive UI Experiments</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
10
+ <script src="https://cdn.tailwindcss.com"></script>
11
+ <link rel="stylesheet" href="style.css" />
12
+ </head>
13
+ <body class="min-h-screen bg-slate-50 text-slate-800 antialiased selection:bg-slate-200 selection:text-slate-900">
14
+ <!-- Top Navigation -->
15
+ <header class="sticky top-0 z-30 border-b border-slate-200 bg-white/80 backdrop-blur">
16
+ <nav class="container mx-auto flex items-center justify-between px-4 py-3">
17
+ <div class="flex items-center gap-3">
18
+ <span class="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-slate-500 text-white shadow-md shadow-slate-300/50">C1</span>
19
+ <span class="text-lg font-extrabold tracking-tight">cool<span class="text-slate-500">1</span></span>
20
+ </div>
21
+ <ul class="hidden items-center gap-6 md:flex">
22
+ <li><a href="#features" class="text-slate-700 hover:text-slate-900">Features</a></li>
23
+ <li><a href="#demo" class="text-slate-700 hover:text-slate-900">Demo</a></li>
24
+ <li><a href="#signup" class="text-slate-700 hover:text-slate-900">Get updates</a></li>
25
+ </ul>
26
+ <div class="hidden md:flex items-center gap-3">
27
+ <button id="magneticBtn" class="magnetic-button relative inline-flex items-center gap-2 overflow-hidden rounded-xl bg-slate-500 px-5 py-2.5 font-semibold text-white shadow-lg shadow-slate-400/40 transition-colors hover:bg-slate-600 focus:outline-none focus:ring-4 focus:ring-slate-300">
28
+ <span>Try magnetic</span>
29
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 opacity-90" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
30
+ <path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5-5 5M6 7l5 5-5 5" />
31
+ </svg>
32
+ <span class="ripple" aria-hidden="true"></span>
33
+ </button>
34
+ <button id="ringReset" class="inline-flex items-center gap-2 rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-semibold text-slate-700 shadow-sm hover:bg-slate-50 focus:outline-none focus:ring-4 focus:ring-slate-200">
35
+ Reset ring
36
+ </button>
37
+ </div>
38
+ </nav>
39
+ </header>
40
+
41
+ <!-- Hero -->
42
+ <section class="relative overflow-hidden">
43
+ <div class="pointer-events-none absolute inset-0 -z-10">
44
+ <div class="absolute -left-24 -top-24 h-72 w-72 rounded-full bg-slate-400/30 blur-3xl"></div>
45
+ <div class="absolute right-0 top-16 h-80 w-80 rounded-full bg-black/5 blur-3xl"></div>
46
+ </div>
47
+ <div class="container mx-auto px-4 py-16">
48
+ <div class="grid items-center gap-10 md:grid-cols-2">
49
+ <div>
50
+ <h1 class="text-4xl font-extrabold leading-tight tracking-tight sm:text-5xl">
51
+ Playful UI experiments with
52
+ <span class="relative inline-block">
53
+ <span class="bg-slate-500 bg-clip-text text-transparent">slate</span>
54
+ <svg class="absolute -bottom-1 left-0 w-full text-slate-500" viewBox="0 0 200 8" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
55
+ <path d="M0 6c30-5 60-5 90 0s60 5 90 0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
56
+ </svg>
57
+ </span>
58
+ + <span class="text-black">black</span>
59
+ </h1>
60
+ <p class="mt-4 max-w-prose text-slate-600">
61
+ A light-mode, interactive showcase featuring 3D tilt, magnetic hover, ripple clicks, animated progress ring, and animated form labels. Minimal dependencies, maximum fun.
62
+ </p>
63
+ <div class="mt-8 flex flex-wrap items-center gap-3">
64
+ <a href="#demo" class="inline-flex items-center gap-2 rounded-xl bg-slate-500 px-5 py-2.5 font-semibold text-white shadow-lg shadow-slate-400/40 transition hover:bg-slate-600 focus:outline-none focus:ring-4 focus:ring-slate-300">
65
+ Open demo
66
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 opacity-90" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
67
+ <path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5-5 5M6 7l5 5-5 5" />
68
+ </svg>
69
+ </a>
70
+ <a href="#signup" class="inline-flex items-center gap-2 rounded-xl border border-slate-300 bg-white px-5 py-2.5 font-semibold text-slate-700 shadow-sm transition hover:bg-slate-50 focus:outline-none focus:ring-4 focus:ring-slate-200">
71
+ Get updates
72
+ </a>
73
+ </div>
74
+ </div>
75
+
76
+ <!-- 3D Tilt Glass Card -->
77
+ <div class="relative">
78
+ <div id="tiltCard" class="tilt-card group relative mx-auto w-full max-w-md overflow-hidden rounded-2xl border border-slate-200 bg-white/70 p-6 shadow-xl shadow-slate-300/30 backdrop-blur">
79
+ <div class="pointer-events-none absolute -left-16 -top-16 h-36 w-36 rounded-full bg-slate-400/30 blur-2xl transition-transform duration-700 group-hover:translate-x-2 group-hover:translate-y-2"></div>
80
+ <div class="pointer-events-none absolute -bottom-12 -right-12 h-40 w-40 rounded-full bg-black/5 blur-2xl transition-transform duration-700 group-hover:-translate-x-1 group-hover:-translate-y-1"></div>
81
+
82
+ <h3 class="text-xl font-bold">3D Tilt + Glass</h3>
83
+ <p class="mt-1 text-slate-600">Hover or move your cursor to see a smooth 3D transform.</p>
84
+
85
+ <div class="mt-6 grid grid-cols-3 gap-3">
86
+ <div class="rounded-xl border border-slate-200 bg-slate-50/60 p-4 text-center shadow-sm">
87
+ <div class="text-2xl font-extrabold text-slate-800">99%</div>
88
+ <div class="text-xs uppercase tracking-wide text-slate-500">Uptime</div>
89
+ </div>
90
+ <div class="rounded-xl border border-slate-200 bg-slate-50/60 p-4 text-center shadow-sm">
91
+ <div class="text-2xl font-extrabold text-slate-800">24ms</div>
92
+ <div class="text-xs uppercase tracking-wide text-slate-500">Latency</div>
93
+ </div>
94
+ <div class="rounded-xl border border-slate-200 bg-slate-50/60 p-4 text-center shadow-sm">
95
+ <div class="text-2xl font-extrabold text-slate-800">2048</div>
96
+ <div class="text-xs uppercase tracking-wide text-slate-500">Keys</div>
97
+ </div>
98
+ </div>
99
+ </div>
100
+ </div>
101
+ </div>
102
+ </div>
103
+ </section>
104
+
105
+ <!-- Interactive Demo -->
106
+ <section id="demo" class="container mx-auto px-4 py-12">
107
+ <div class="grid gap-8 md:grid-cols-2">
108
+ <!-- Activity Ring -->
109
+ <div class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
110
+ <div class="mb-4 flex items-center justify-between">
111
+ <h3 class="text-lg font-semibold">Activity ring</h3>
112
+ <span class="text-xs uppercase tracking-wide text-slate-500">Conic gradient</span>
113
+ </div>
114
+ <div class="flex flex-col items-center gap-6 sm:flex-row sm:items-center sm:gap-10">
115
+ <div class="relative h-40 w-40">
116
+ <div class="absolute inset-0 rounded-full bg-white"></div>
117
+ <div id="ringProgress" class="ring-progress relative z-10 h-40 w-40 rounded-full">
118
+ <div class="absolute inset-4 rounded-full bg-white">
119
+ <div id="ringLabel" class="grid h-full place-content-center text-center">
120
+ <div id="ringPercent" class="text-2xl font-extrabold text-slate-900">0%</div>
121
+ <div class="text-xs uppercase tracking-wide text-slate-500">Progress</div>
122
+ </div>
123
+ </div>
124
+ </div>
125
+ <div class="absolute inset-0 -z-10 rounded-full bg-slate-200/60 blur-sm"></div>
126
+ </div>
127
+ <div class="w-full max-w-sm">
128
+ <label for="ringInput" class="mb-2 block text-sm font-medium text-slate-700">Type to update</label>
129
+ <input id="ringInput" type="text" inputmode="numeric" pattern="[0-9]*" placeholder="0-100" class="w-full rounded-xl border border-slate-300 bg-white px-4 py-2.5 text-slate-900 shadow-sm outline-none ring-0 transition focus:border-slate-500 focus:ring-4 focus:ring-slate-200" />
130
+ <p class="mt-2 text-sm text-slate-500">Enter a value from 0 to 100.</p>
131
+ </div>
132
+ </div>
133
+ </div>
134
+
135
+ <!-- Ripple + Magnetic Buttons -->
136
+ <div class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
137
+ <div class="mb-4 flex items-center justify-between">
138
+ <h3 class="text-lg font-semibold">Buttons</h3>
139
+ <span class="text-xs uppercase tracking-wide text-slate-500">Magnetic + Ripple</span>
140
+ </div>
141
+ <div class="flex flex-wrap items-center gap-3">
142
+ <button class="ripple-button relative overflow-hidden rounded-xl bg-slate-500 px-5 py-3 font-semibold text-white shadow-lg shadow-slate-400/40 transition hover:bg-slate-600 focus:outline-none focus:ring-4 focus:ring-slate-300">
143
+ Ripple
144
+ </button>
145
+ <button class="magnetic-button relative inline-flex items-center gap-2 overflow-hidden rounded-xl border border-slate-300 bg-white px-5 py-3 font-semibold text-slate-800 shadow-sm transition hover:bg-slate-50 focus:outline-none focus:ring-4 focus:ring-slate-200">
146
+ Magnetic
147
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 opacity-80" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
148
+ <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
149
+ </svg>
150
+ </button>
151
+ </div>
152
+ <p class="mt-4 text-sm text-slate-600">Click "Ripple" to see a material ripple. Hover "Magnetic" to attract it toward your cursor.</p>
153
+ </div>
154
+ </div>
155
+ </section>
156
+
157
+ <!-- Animated Form -->
158
+ <section id="signup" class="container mx-auto px-4 pb-20">
159
+ <div class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
160
+ <div class="mb-6">
161
+ <h3 class="text-lg font-semibold">Get notified</h3>
162
+ <p class="text-sm text-slate-600">Minimal form with animated labels and a live progress indicator.</p>
163
+ </div>
164
+ <form id="notifyForm" class="grid gap-5 sm:grid-cols-2" novalidate>
165
+ <div class="relative">
166
+ <input id="name" type="text" required class="peer w-full rounded-xl border border-slate-300 bg-white px-4 pt-6 pb-2 text-slate-900 shadow-sm outline-none focus:border-slate-500 focus:ring-4 focus:ring-slate-200" placeholder=" " />
167
+ <label for="name" class="animated-label">Name</label>
168
+ </div>
169
+ <div class="relative">
170
+ <input id="email" type="email" required class="peer w-full rounded-xl border border-slate-300 bg-white px-4 pt-6 pb-2 text-slate-900 shadow-sm outline-none focus:border-slate-500 focus:ring-4 focus:ring-slate-200" placeholder=" " />
171
+ <label for="email" class="animated-label">Email</label>
172
+ </div>
173
+ <div class="relative sm:col-span-2">
174
+ <textarea id="message" rows="3" class="peer w-full resize-none rounded-xl border border-slate-300 bg-white px-4 pt-6 pb-2 text-slate-900 shadow-sm outline-none focus:border-slate-500 focus:ring-4 focus:ring-slate-200" placeholder=" "></textarea>
175
+ <label for="message" class="animated-label">Message <span class="text-slate-400">(optional)</span></label>
176
+ <div class="pointer-events-none absolute bottom-2 right-2 text-xs text-slate-400" id="charCount">0 / 200</div>
177
+ </div>
178
+ <div class="flex items-center gap-4 sm:col-span-2">
179
+ <button type="submit" class="inline-flex items-center gap-2 rounded-xl bg-slate-500 px-5 py-2.5 font-semibold text-white shadow-lg shadow-slate-400/40 transition hover:bg-slate-600 focus:outline-none focus:ring-4 focus:ring-slate-300">
180
+ Submit
181
+ </button>
182
+ <div class="relative h-8 w-28">
183
+ <div class="absolute inset-0 rounded-full bg-slate-200"></div>
184
+ <div id="formProgress" class="absolute inset-0 h-full w-0 rounded-full bg-slate-500 transition-all"></div>
185
+ <div class="absolute inset-0 grid place-content-center text-[10px] font-semibold text-slate-700">0%</div>
186
+ </div>
187
+ </div>
188
+ </form>
189
+ </div>
190
+ </section>
191
+
192
+ <footer class="border-t border-slate-200 bg-white/70">
193
+ <div class="container mx-auto px-4 py-8 text-sm text-slate-500">
194
+ <div class="flex flex-col items-center justify-between gap-2 sm:flex-row">
195
+ <p>Built with Tailwind (slate + black) • Light mode</p>
196
+ <p>© <span id="year"></span> cool1</p>
197
+ </div>
198
+ </div>
199
+ </footer>
200
+
201
+ <script src="script.js"></script>
202
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
203
+ </body>
204
+ </html>
style.css CHANGED
@@ -1,28 +1,100 @@
 
 
 
 
 
 
 
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
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ :root {
2
+ --char-max: 200;
3
+ }
4
+
5
+ /* Base */
6
+ * { box-sizing: border-box; }
7
+ html, body { height: 100%; }
8
  body {
9
+ font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
 
10
  }
11
 
12
+ /* Buttons with ripple */
13
+ .ripple-button {
14
+ position: relative;
15
+ isolation: isolate;
16
+ }
17
+ .ripple-button .ripple {
18
+ position: absolute;
19
+ inset: 0;
20
+ background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.45) 15%, rgba(255,255,255,0.15) 35%, transparent 55%);
21
+ transform: scale(0);
22
+ opacity: 0;
23
+ transition: transform .6s ease, opacity .8s ease;
24
+ pointer-events: none;
25
+ mix-blend-mode: overlay;
26
+ }
27
+ .ripple-button:active .ripple {
28
+ transform: scale(2.2);
29
+ opacity: 1;
30
  }
31
 
32
+ /* Magnetic effect */
33
+ .magnetic-button {
34
+ transition: transform .2s ease;
 
 
35
  }
36
 
37
+ /* 3D Tilt Card */
38
+ .tilt-card {
39
+ transform-style: preserve-3d;
40
+ perspective: 800px;
41
+ transition: transform .2s ease, box-shadow .2s ease;
42
+ }
43
+ .tilt-card::after {
44
+ content: "";
45
+ position: absolute;
46
+ inset: 0;
47
+ background: radial-gradient(600px 200px at var(--mx, 50%) var(--my, 50%), rgba(2,6,23,0.08), transparent 60%);
48
+ opacity: 0;
49
+ transition: opacity .25s ease;
50
+ pointer-events: none;
51
+ }
52
+ .tilt-card:hover::after {
53
+ opacity: 1;
54
  }
55
 
56
+ /* Activity ring */
57
+ .ring-progress {
58
+ --progress: 0;
59
+ background: conic-gradient(slate 0 calc(var(--progress) * 1%), #e2e8f0 0);
60
+ transition: background .25s ease;
61
  }
62
+ .ring-progress::before {
63
+ content: "";
64
+ position: absolute;
65
+ inset: -4px;
66
+ border-radius: 50%;
67
+ background: conic-gradient(from -90deg, rgba(148,163,184,0.45), rgba(148,163,184,0.15) 30%, transparent 60%);
68
+ filter: blur(6px);
69
+ z-index: -1;
70
+ }
71
+
72
+ /* Animated form labels */
73
+ .animated-label {
74
+ position: absolute;
75
+ left: 1rem;
76
+ top: 50%;
77
+ transform: translateY(-50%);
78
+ color: #64748b; /* slate-500 */
79
+ pointer-events: none;
80
+ transition: all .2s ease;
81
+ background: transparent;
82
+ padding: 0 .25rem;
83
+ }
84
+ .animated-label:has(+ input:focus),
85
+ .animated-label:has(+ textarea:focus),
86
+ .animated-label:has(+ input:not(:placeholder-shown)),
87
+ .animated-label:has(+ textarea:not(:placeholder-shown)) {
88
+ top: 0.25rem;
89
+ transform: none;
90
+ font-size: 0.75rem;
91
+ color: #0f172a; /* slate-900 */
92
+ background: white;
93
+ }
94
+
95
+ /* Hide default spinner on number-like inputs */
96
+ input[type="text"]::-webkit-outer-spin-button,
97
+ input[type="text"]::-webkit-inner-spin-button {
98
+ -webkit-appearance: none;
99
+ margin: 0;
100
+ }