Hugging Face's logo

Spaces:
Simonc-44
/
cygnisai-play-store-clone
Running

App Files Community
Simonc-44 commited on
Commit
7b5a494
·
verified ·
1 Parent(s): ab28b3c

<!DOCTYPE html>

Browse files

<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Télécharger CygnisAI</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" type="image/png" href="https://github.com/Simonc44/Simonc44/blob/main/cygnis-ai.png?raw=true">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
:root {
--background: #0A0910;
--surface: rgba(30, 41, 59, 0.7);
--primary: #4A90E2;
--primary-hover: #5A9BF2;
--text-primary: #FFFFFF;
--text-secondary: #cbd5e1;
--border-color: rgba(255, 255, 255, 0.1);
}


@keyframes
 fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background: var(--background);
color: var(--text-primary);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 2rem;
margin: 0;
box-sizing: border-box;
overflow-x: hidden;
}
.store-page {
background: rgba(15, 23, 42, 0.8);
backdrop-filter: blur(12px);
border: 1px solid var(--border-color);
border-radius: 24px;
padding: 2rem;
max-width: 800px;
width: 100%;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
animation: fadeIn 0.8s ease-out;
}
.app-header {
display: flex;
align-items: center;
gap: 1.5rem;
margin-bottom: 2rem;
}
.app-icon {
width: 96px;
height: 96px;
border-radius: 22px;
flex-shrink: 0;
}
.app-info {
text-align: left;
}
.app-info h1 {
font-size: 2.25rem;
font-weight: 700;
margin: 0;
}
.app-info p {
color: var(--text-secondary);
margin: 0.25rem 0 0;
}
.app-meta {
display: flex;
gap: 1.5rem;
margin-top: 1rem;
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
padding: 1rem 0;
justify-content: space-around;
}
.meta-item {
text-align: center;
}
.meta-item .value {
font-size: 1.2rem;
font-weight: 600;
}
.meta-item .label {
font-size: 0.8rem;
color: var(--text-secondary);
margin-top: 0.25rem;
}
.screenshots {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1rem;
margin-top: 2rem;
}
.screenshots img {
width: 100%;
height: auto;
border-radius: 12px;
border: 1px solid var(--border-color);
}
.description {
text-align: left;
margin-top: 2rem;
color: var(--text-secondary);
line-height: 1.6;
}
.description h2 {
font-size: 1.5rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 0.5rem;
}
.install-button {
padding: 16px 28px;
background: var(--primary);
border: none;
border-radius: 12px;
color: white;
font-size: 18px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s ease;
width: 100%;
margin-top: 2rem;
}
.install-button:hover {
background: var(--primary-hover);
}
#installButton {
display: none;
}
</style>
</head>
<body>
<div class="store-page">
<div class="app-header">
<img src="https://github.com/Simonc44/Simonc44/blob/main/cygnis-ai.png?raw=true" alt="CygnisAI Logo" class="app-icon">
<div class="app-info">
<h1>CygnisAI</h1>
<p>Simon Chusseau</p>
<div class="app-meta">
<div class="meta-item">
<div class="value">4.9 ★</div>
<div class="label">1,2 k avis</div>
</div>
<div class="meta-item">
<div class="value">100 k+</div>
<div class="label">Téléchargements</div>
</div>
<div class="meta-item">
<div class="value">PEGI 3</div>
<div class="label">Contient des annonces</div>
</div>
</div>
</div>
</div>

<button id="installButton" class="install-button">Installer</button>

<div class="screenshots">
<img src="https://picsum.photos/seed/app-screen1/300/550" data-ai-hint="app screenshot" alt="Capture d'écran 1">
<img src="https://picsum.photos/seed/app-screen2/300/550" data-ai-hint="app screenshot" alt="Capture d'écran 2">
<img src="https://picsum.photos/seed/app-screen3/300/550" data-ai-hint="app screenshot" alt="Capture d'écran 3">
</div>

<div class="description">
<h2>À propos de cette application</h2>
<p>CygnisAI est votre assistant personnel intelligent, conçu pour la performance et la personnalisation. Discutez, créez et explorez avec une suite d'outils d'IA. Générez du texte, du code, des images et plus encore. L'application native offre une expérience rapide et intégrée sur votre bureau.</p>
</div>
</div>

<script>
let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
e.preventDefault();
deferredPrompt = e;
const installButton = document.getElementById('installButton');
if (installButton) installButton.style.display = 'block';

installButton.addEventListener('click', async () => {
installButton.style.display = 'none';
deferredPrompt.prompt();
const { outcome } = await deferredPrompt.userChoice;
if (outcome === 'accepted') {
console.log('L\'utilisateur a accepté d\'installer la PWA');
} else {
console.log('L\'utilisateur a refusé d\'installer la PWA');
}
deferredPrompt = null;
});
});

window.addEventListener('appinstalled', () => {
console.log('PWA installée avec succès !');
const installButton = document.getElementById('installButton');
if (installButton) {
installButton.style.display = 'none';
}
});
</script>
</body>
</html>
je veux que tu améliore cette page pour que on est l'impression que se soitt une page play store à l'identique de l'app que tu voit

Files changed (4) hide show
  1. README.md +7 -4
  2. components/navbar.js +76 -0
  3. index.html +212 -19
  4. style.css +55 -19
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Cygnisai Play Store Clone
3
- emoji: 👀
4
  colorFrom: yellow
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: CygnisAI Play Store Clone 🦢
 
3
  colorFrom: yellow
4
+ colorTo: purple
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).
components/navbar.js ADDED
@@ -0,0 +1,76 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class PlayStoreNavbar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ :host {
7
+ display: block;
8
+ width: 100%;
9
+ background-color: #fff;
10
+ box-shadow: 0 1px 3px rgba(0,0,0,0.1);
11
+ position: sticky;
12
+ top: 0;
13
+ z-index: 100;
14
+ }
15
+
16
+ .dark :host {
17
+ background-color: #1f2937;
18
+ box-shadow: 0 1px 3px rgba(0,0,0,0.3);
19
+ }
20
+
21
+ .container {
22
+ max-width: 1200px;
23
+ margin: 0 auto;
24
+ padding: 0.75rem 1rem;
25
+ display: flex;
26
+ align-items: center;
27
+ }
28
+
29
+ .logo-container {
30
+ display: flex;
31
+ align-items: center;
32
+ }
33
+
34
+ .play-logo {
35
+ height: 1.5rem;
36
+ width: 1.5rem;
37
+ margin-right: 0.5rem;
38
+ }
39
+
40
+ .title {
41
+ font-weight: 500;
42
+ font-size: 1.125rem;
43
+ }
44
+
45
+ .actions {
46
+ margin-left: auto;
47
+ display: flex;
48
+ gap: 1rem;
49
+ }
50
+
51
+ .icon {
52
+ width: 1.25rem;
53
+ height: 1.25rem;
54
+ color: #4b5563;
55
+ }
56
+
57
+ .dark .icon {
58
+ color: #9ca3af;
59
+ }
60
+ </style>
61
+ <div class="container">
62
+ <div class="logo-container">
63
+ <img src="https://play-lh.googleusercontent.com/1-hPxafOxdYpYZEOKzNIkSP43HXCNftVJVttoo4ucl7rsMASXW3Xr6GlXURCubE1tA=w24-h24"
64
+ alt="Play Store" class="play-logo">
65
+ <span class="title">Play Store</span>
66
+ </div>
67
+ <div class="actions">
68
+ <i data-feather="search" class="icon"></i>
69
+ <i data-feather="user" class="icon"></i>
70
+ </div>
71
+ </div>
72
+ `;
73
+ }
74
+ }
75
+
76
+ customElements.define('play-store-navbar', PlayStoreNavbar);
index.html CHANGED
@@ -1,19 +1,212 @@
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="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>CygnisAI - Play Store</title>
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <link rel="icon" type="image/png" href="https://github.com/Simonc44/Simonc44/blob/main/cygnis-ai.png?raw=true">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <link rel="stylesheet" href="style.css">
12
+ </head>
13
+ <body class="bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-white">
14
+ <!-- Play Store Header -->
15
+ <header class="bg-white dark:bg-gray-800 shadow-sm">
16
+ <div class="container mx-auto px-4 py-3 flex items-center">
17
+ <div class="flex items-center">
18
+ <i data-feather="arrow-left" class="mr-4"></i>
19
+ <img src="https://play-lh.googleusercontent.com/1-hPxafOxdYpYZEOKzNIkSP43HXCNftVJVttoo4ucl7rsMASXW3Xr6GlXURCubE1tA=w24-h24"
20
+ alt="Play Store" class="h-8 w-8 mr-2">
21
+ <span class="font-medium text-lg">Play Store</span>
22
+ </div>
23
+ <div class="ml-auto flex items-center space-x-4">
24
+ <i data-feather="search"></i>
25
+ <i data-feather="user"></i>
26
+ </div>
27
+ </div>
28
+ </header>
29
+
30
+ <!-- App Detail Section -->
31
+ <main class="container mx-auto px-4 py-6 max-w-4xl">
32
+ <!-- App Header -->
33
+ <div class="flex flex-col md:flex-row gap-6 mb-6">
34
+ <img src="https://github.com/Simonc44/Simonc44/blob/main/cygnis-ai.png?raw=true"
35
+ alt="CygnisAI"
36
+ class="w-32 h-32 rounded-2xl shadow-md self-center md:self-start">
37
+
38
+ <div class="flex-1">
39
+ <h1 class="text-2xl font-bold">CygnisAI</h1>
40
+ <p class="text-gray-600 dark:text-gray-400">Simon Chusseau</p>
41
+
42
+ <div class="flex items-center mt-2">
43
+ <div class="flex items-center bg-blue-50 dark:bg-blue-900/30 px-2 py-1 rounded-full">
44
+ <i data-feather="star" class="w-4 h-4 text-yellow-500 fill-yellow-500 mr-1"></i>
45
+ <span class="text-sm font-medium">4.9</span>
46
+ </div>
47
+ <span class="text-sm text-gray-500 dark:text-gray-400 ml-2">1,2 k avis</span>
48
+ <span class="text-sm text-gray-500 dark:text-gray-400 mx-2">•</span>
49
+ <span class="text-sm text-gray-500 dark:text-gray-400">100 k+</span>
50
+ </div>
51
+
52
+ <div class="flex flex-wrap gap-2 mt-3">
53
+ <span class="text-xs bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded-full">IA</span>
54
+ <span class="text-xs bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded-full">Productivité</span>
55
+ <span class="text-xs bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded-full">Assistant</span>
56
+ </div>
57
+
58
+ <div class="mt-4 flex items-center">
59
+ <button id="installButton" class="hidden bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-full font-medium flex items-center">
60
+ <i data-feather="download" class="mr-2"></i>
61
+ Installer
62
+ </button>
63
+ </div>
64
+ </div>
65
+ </div>
66
+
67
+ <!-- Screenshots Carousel -->
68
+ <div class="mb-8">
69
+ <h2 class="text-xl font-bold mb-4">Captures d'écran</h2>
70
+ <div class="flex space-x-4 overflow-x-auto pb-4 scrollbar-hide">
71
+ <img src="https://picsum.photos/seed/app-screen1/300/550"
72
+ class="w-64 h-auto rounded-lg border border-gray-200 dark:border-gray-700">
73
+ <img src="https://picsum.photos/seed/app-screen2/300/550"
74
+ class="w-64 h-auto rounded-lg border border-gray-200 dark:border-gray-700">
75
+ <img src="https://picsum.photos/seed/app-screen3/300/550"
76
+ class="w-64 h-auto rounded-lg border border-gray-200 dark:border-gray-700">
77
+ <img src="https://picsum.photos/seed/app-screen4/300/550"
78
+ class="w-64 h-auto rounded-lg border border-gray-200 dark:border-gray-700">
79
+ </div>
80
+ </div>
81
+
82
+ <!-- About App -->
83
+ <div class="mb-8">
84
+ <h2 class="text-xl font-bold mb-4">À propos de cette application</h2>
85
+ <p class="text-gray-700 dark:text-gray-300 leading-relaxed">
86
+ CygnisAI est votre assistant personnel intelligent, conçu pour la performance et la personnalisation.
87
+ Discutez, créez et explorez avec une suite d'outils d'IA. Générez du texte, du code, des images et plus encore.
88
+ L'application native offre une expérience rapide et intégrée sur votre bureau.
89
+ </p>
90
+ </div>
91
+
92
+ <!-- Additional Info -->
93
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
94
+ <div>
95
+ <h3 class="font-bold mb-2">Dernière mise à jour</h3>
96
+ <p class="text-gray-600 dark:text-gray-400">15 mai 2023</p>
97
+ </div>
98
+ <div>
99
+ <h3 class="font-bold mb-2">Taille</h3>
100
+ <p class="text-gray-600 dark:text-gray-400">25 Mo</p>
101
+ </div>
102
+ <div>
103
+ <h3 class="font-bold mb-2">Version</h3>
104
+ <p class="text-gray-600 dark:text-gray-400">1.2.0</p>
105
+ </div>
106
+ <div>
107
+ <h3 class="font-bold mb-2">Nécessite Android</h3>
108
+ <p class="text-gray-600 dark:text-gray-400">8.0 et versions ultérieures</p>
109
+ </div>
110
+ </div>
111
+
112
+ <!-- Ratings & Reviews -->
113
+ <div class="mb-8">
114
+ <h2 class="text-xl font-bold mb-4">Notes et avis</h2>
115
+ <div class="flex items-center mb-4">
116
+ <div class="text-4xl font-bold mr-4">4.9</div>
117
+ <div>
118
+ <div class="flex items-center mb-1">
119
+ <div class="w-24 bg-gray-200 dark:bg-gray-700 h-2 rounded-full mr-2">
120
+ <div class="bg-yellow-500 h-2 rounded-full" style="width: 90%"></div>
121
+ </div>
122
+ <i data-feather="star" class="w-4 h-4 text-yellow-500 fill-yellow-500"></i>
123
+ </div>
124
+ <div class="flex items-center mb-1">
125
+ <div class="w-24 bg-gray-200 dark:bg-gray-700 h-2 rounded-full mr-2">
126
+ <div class="bg-yellow-500 h-2 rounded-full" style="width: 8%"></div>
127
+ </div>
128
+ <i data-feather="star" class="w-4 h-4 text-yellow-500 fill-yellow-500"></i>
129
+ </div>
130
+ <div class="flex items-center mb-1">
131
+ <div class="w-24 bg-gray-200 dark:bg-gray-700 h-2 rounded-full mr-2">
132
+ <div class="bg-yellow-500 h-2 rounded-full" style="width: 1%"></div>
133
+ </div>
134
+ <i data-feather="star" class="w-4 h-4 text-yellow-500 fill-yellow-500"></i>
135
+ </div>
136
+ <div class="flex items-center mb-1">
137
+ <div class="w-24 bg-gray-200 dark:bg-gray-700 h-2 rounded-full mr-2">
138
+ <div class="bg-yellow-500 h-2 rounded-full" style="width: 0.5%"></div>
139
+ </div>
140
+ <i data-feather="star" class="w-4 h-4 text-yellow-500 fill-yellow-500"></i>
141
+ </div>
142
+ <div class="flex items-center">
143
+ <div class="w-24 bg-gray-200 dark:bg-gray-700 h-2 rounded-full mr-2">
144
+ <div class="bg-yellow-500 h-2 rounded-full" style="width: 0.5%"></div>
145
+ </div>
146
+ <i data-feather="star" class="w-4 h-4 text-yellow-500 fill-yellow-500"></i>
147
+ </div>
148
+ </div>
149
+ </div>
150
+ <button class="text-blue-500 font-medium flex items-center">
151
+ Voir tous les avis
152
+ <i data-feather="chevron-right" class="ml-1"></i>
153
+ </button>
154
+ </div>
155
+ </main>
156
+
157
+ <!-- Floating Install Button -->
158
+ <div class="fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 shadow-lg p-4 md:hidden">
159
+ <button id="mobileInstallButton" class="hidden w-full bg-blue-500 hover:bg-blue-600 text-white py-3 rounded-full font-medium flex items-center justify-center">
160
+ <i data-feather="download" class="mr-2"></i>
161
+ Installer
162
+ </button>
163
+ </div>
164
+
165
+ <script>
166
+ // PWA Installation
167
+ let deferredPrompt;
168
+
169
+ window.addEventListener('beforeinstallprompt', (e) => {
170
+ e.preventDefault();
171
+ deferredPrompt = e;
172
+ const installButton = document.getElementById('installButton');
173
+ const mobileInstallButton = document.getElementById('mobileInstallButton');
174
+
175
+ if (installButton) installButton.classList.remove('hidden');
176
+ if (mobileInstallButton) mobileInstallButton.classList.remove('hidden');
177
+
178
+ installButton.addEventListener('click', async () => {
179
+ installButton.classList.add('hidden');
180
+ if (mobileInstallButton) mobileInstallButton.classList.add('hidden');
181
+ deferredPrompt.prompt();
182
+ const { outcome } = await deferredPrompt.userChoice;
183
+ console.log(`User response to the install prompt: ${outcome}`);
184
+ deferredPrompt = null;
185
+ });
186
+
187
+ mobileInstallButton.addEventListener('click', async () => {
188
+ installButton.classList.add('hidden');
189
+ mobileInstallButton.classList.add('hidden');
190
+ deferredPrompt.prompt();
191
+ const { outcome } = await deferredPrompt.userChoice;
192
+ console.log(`User response to the install prompt: ${outcome}`);
193
+ deferredPrompt = null;
194
+ });
195
+ });
196
+
197
+ window.addEventListener('appinstalled', () => {
198
+ console.log('PWA installed successfully');
199
+ const installButton = document.getElementById('installButton');
200
+ const mobileInstallButton = document.getElementById('mobileInstallButton');
201
+ if (installButton) installButton.classList.add('hidden');
202
+ if (mobileInstallButton) mobileInstallButton.classList.add('hidden');
203
+ });
204
+
205
+ // Initialize feather icons
206
+ document.addEventListener('DOMContentLoaded', function() {
207
+ feather.replace();
208
+ });
209
+ </script>
210
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
211
+ </body>
212
+ </html>
style.css CHANGED
@@ -1,28 +1,64 @@
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
+ @tailwind base;
2
+ @tailwind components;
3
+ @tailwind utilities;
4
+
5
+ /* Custom scrollbar */
6
+ ::-webkit-scrollbar {
7
+ height: 6px;
8
+ width: 6px;
9
+ }
10
+
11
+ ::-webkit-scrollbar-track {
12
+ background: #f1f1f1;
13
+ border-radius: 10px;
14
+ }
15
+
16
+ ::-webkit-scrollbar-thumb {
17
+ background: #888;
18
+ border-radius: 10px;
19
+ }
20
+
21
+ ::-webkit-scrollbar-thumb:hover {
22
+ background: #555;
23
  }
24
 
25
+ .dark ::-webkit-scrollbar-track {
26
+ background: #374151;
 
27
  }
28
 
29
+ .dark ::-webkit-scrollbar-thumb {
30
+ background: #6b7280;
 
 
 
31
  }
32
 
33
+ .dark ::-webkit-scrollbar-thumb:hover {
34
+ background: #9ca3af;
 
 
 
 
35
  }
36
 
37
+ /* Hide scrollbar but keep functionality */
38
+ .scrollbar-hide::-webkit-scrollbar {
39
+ display: none;
40
  }
41
+
42
+ .scrollbar-hide {
43
+ -ms-overflow-style: none;
44
+ scrollbar-width: none;
45
+ }
46
+
47
+ /* Animation for install button */
48
+ @keyframes pulse {
49
+ 0%, 100% {
50
+ transform: scale(1);
51
+ }
52
+ 50% {
53
+ transform: scale(1.05);
54
+ }
55
+ }
56
+
57
+ #installButton, #mobileInstallButton {
58
+ animation: pulse 2s infinite;
59
+ }
60
+
61
+ /* Dark mode transitions */
62
+ body, button, input, select, textarea {
63
+ @apply transition-colors duration-200;
64
+ }