Skip to content

Commit e69668f

Browse files
ruelalarconruelalarcon
committed
Merge into bundle.css
1 parent 2231f43 commit e69668f

File tree

4 files changed

+374
-537
lines changed

4 files changed

+374
-537
lines changed

‎public/bundle.css‎

Lines changed: 369 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,369 @@
1+
/* Common font import */
2+
@import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:ital,wght@0,300..800;1,300..800&display=swap');
3+
4+
/* Common variables */
5+
:root {
6+
--primary: #4CAF50;
7+
--primary-dark: #2e6b32;
8+
--secondary: #9c27b0;
9+
--background: #f0f0f0;
10+
--surface: #ffffff;
11+
--text: #333333;
12+
--border: #e0e0e0;
13+
--shadow: rgba(0,0,0,0.1);
14+
--error: #dc3545;
15+
--error-dark: #c82333;
16+
--info: #17a2b8;
17+
--info-dark: #138496;
18+
--success-bg: #d4edda;
19+
--success-text: #155724;
20+
}
21+
22+
/* Common base styles */
23+
* {
24+
box-sizing: border-box;
25+
margin: 0;
26+
padding: 0;
27+
}
28+
29+
body {
30+
font-family: 'Host Grotesk', sans-serif;
31+
background-color: var(--background);
32+
color: var(--text);
33+
line-height: 1.6;
34+
padding: 20px;
35+
}
36+
37+
button {
38+
font-family: 'Host Grotesk', sans-serif;
39+
font-size: 18px;
40+
padding: 10px 20px;
41+
cursor: pointer;
42+
background-color: var(--primary);
43+
color: white;
44+
border: none;
45+
border-radius: 5px;
46+
min-width: 120px;
47+
transition: background 0.2s ease;
48+
text-transform: uppercase;
49+
letter-spacing: 0.5px;
50+
}
51+
52+
button:hover {
53+
background-color: var(--primary-dark);
54+
}
55+
56+
button:disabled {
57+
background-color: #cccccc;
58+
cursor: not-allowed;
59+
}
60+
61+
input {
62+
font-family: 'Host Grotesk', sans-serif;
63+
padding: 12px;
64+
border: 2px solid var(--border);
65+
border-radius: 6px;
66+
font-size: 1em;
67+
transition: border-color 0.2s ease;
68+
}
69+
70+
input:focus {
71+
outline: none;
72+
border-color: var(--primary);
73+
}
74+
75+
/* Common message styles */
76+
.message {
77+
margin: 10px 0;
78+
padding: 10px;
79+
border-radius: 5px;
80+
}
81+
82+
.error {
83+
color: #a94442;
84+
background-color: #f2dede;
85+
border: 1px solid #ebccd1;
86+
}
87+
88+
.success {
89+
color: var(--success-text);
90+
background-color: var(--success-bg);
91+
border: 1px solid #d6e9c6;
92+
}
93+
94+
/* Flag container styles */
95+
.flag-container {
96+
margin: 20px;
97+
padding: 20px;
98+
background-color: var(--success-bg);
99+
border: 2px solid var(--primary);
100+
border-radius: 10px;
101+
text-align: center;
102+
animation: flagPulse 2s infinite;
103+
}
104+
105+
.flag-container h2 {
106+
color: var(--success-text);
107+
margin-bottom: 15px;
108+
}
109+
110+
.flag-text {
111+
font-family: monospace;
112+
font-size: 1.2em;
113+
padding: 15px;
114+
background: var(--surface);
115+
border-radius: 5px;
116+
word-break: break-all;
117+
}
118+
119+
/* Card Game specific styles */
120+
.container {
121+
max-width: 1200px;
122+
margin: 0 auto;
123+
display: grid;
124+
grid-template-columns: 250px 1fr;
125+
gap: 20px;
126+
height: calc(100vh - 40px);
127+
}
128+
129+
.auth-container {
130+
max-width: 400px;
131+
margin: 100px auto;
132+
padding: 30px;
133+
background: var(--surface);
134+
border-radius: 12px;
135+
box-shadow: 0 4px 6px var(--shadow);
136+
text-align: center;
137+
}
138+
139+
.sidebar {
140+
background: var(--surface);
141+
padding: 20px;
142+
border-radius: 12px;
143+
box-shadow: 0 4px 6px var(--shadow);
144+
height: 100%;
145+
overflow-y: auto;
146+
}
147+
148+
.main-content {
149+
background: var(--surface);
150+
padding: 20px;
151+
border-radius: 12px;
152+
box-shadow: 0 4px 6px var(--shadow);
153+
height: 100%;
154+
overflow-y: auto;
155+
display: flex;
156+
flex-direction: column;
157+
gap: 20px;
158+
}
159+
160+
.card {
161+
border: 1px solid var(--border);
162+
padding: 15px;
163+
padding-top: 40px;
164+
border-radius: 8px;
165+
background: var(--surface);
166+
cursor: pointer;
167+
transition: all 0.2s ease;
168+
position: relative;
169+
overflow: hidden;
170+
height: 260px;
171+
display: flex;
172+
flex-direction: column;
173+
}
174+
175+
.card:hover {
176+
transform: translateY(-2px);
177+
box-shadow: 0 4px 12px var(--shadow);
178+
}
179+
180+
.card.selected {
181+
border-color: var(--primary);
182+
background: #e8f5e9;
183+
}
184+
185+
.card.identity {
186+
border-color: var(--secondary);
187+
background: #f3e5f5;
188+
}
189+
190+
.card-grid {
191+
display: grid;
192+
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
193+
gap: 15px;
194+
}
195+
196+
.gift-section {
197+
background: #f8f8f8;
198+
border-radius: 12px;
199+
padding: 20px;
200+
margin-top: 20px;
201+
}
202+
203+
.player-card {
204+
padding: 15px;
205+
margin: 8px 0;
206+
border-radius: 8px;
207+
background: var(--surface);
208+
cursor: pointer;
209+
transition: all 0.2s ease;
210+
display: flex;
211+
align-items: center;
212+
gap: 10px;
213+
}
214+
215+
.player-card:hover {
216+
background: #f5f5f5;
217+
}
218+
219+
.player-card.selected {
220+
background: #e8f5e9;
221+
border-left: 4px solid var(--primary);
222+
}
223+
224+
.toast-container {
225+
position: fixed;
226+
bottom: 20px;
227+
right: 20px;
228+
z-index: 1000;
229+
}
230+
231+
.toast {
232+
background: var(--surface);
233+
border-radius: 8px;
234+
padding: 15px 20px;
235+
margin: 10px;
236+
box-shadow: 0 4px 12px var(--shadow);
237+
display: flex;
238+
align-items: center;
239+
min-width: 300px;
240+
animation: slideIn 0.3s ease-out;
241+
}
242+
243+
.toast.success {
244+
border-left: 4px solid var(--primary);
245+
}
246+
247+
.toast.info {
248+
border-left: 4px solid var(--info);
249+
}
250+
251+
/* Dice Game specific styles */
252+
.dice-container {
253+
max-width: 800px;
254+
margin: 0 auto;
255+
padding: 20px;
256+
text-align: center;
257+
}
258+
259+
.dice {
260+
font-size: 100px;
261+
margin: 20px;
262+
}
263+
264+
.controls {
265+
display: flex;
266+
justify-content: center;
267+
align-items: center;
268+
gap: 10px;
269+
flex-wrap: wrap;
270+
margin: 20px 0;
271+
}
272+
273+
.game-buttons {
274+
display: flex;
275+
gap: 10px;
276+
justify-content: center;
277+
margin-top: 10px;
278+
}
279+
280+
.guess-input {
281+
font-size: 18px;
282+
width: 60px;
283+
text-align: center;
284+
border: 2px solid var(--primary);
285+
}
286+
287+
.streak {
288+
font-size: 24px;
289+
margin: 20px;
290+
color: var(--primary);
291+
font-weight: bold;
292+
}
293+
294+
.history {
295+
margin-top: 20px;
296+
padding: 20px;
297+
background-color: var(--surface);
298+
border-radius: 10px;
299+
text-align: left;
300+
box-shadow: 0 2px 4px var(--shadow);
301+
}
302+
303+
.history pre {
304+
background-color: #f8f8f8;
305+
padding: 15px;
306+
border-radius: 5px;
307+
margin: 10px 0;
308+
font-family: monospace;
309+
white-space: pre-wrap;
310+
word-wrap: break-word;
311+
border: 1px solid var(--border);
312+
}
313+
314+
.copy-button {
315+
background-color: #007bff;
316+
margin-top: 10px;
317+
}
318+
319+
.copy-button:hover {
320+
background-color: #0056b3;
321+
}
322+
323+
.copy-success {
324+
background-color: #28a745;
325+
}
326+
327+
.leak-button {
328+
background-color: var(--error);
329+
border-radius: 5px;
330+
text-decoration: none;
331+
color: white;
332+
margin-top: 20px;
333+
font-size: 14px;
334+
padding: 8px 15px;
335+
display: inline-block;
336+
}
337+
338+
.leak-button:hover {
339+
background-color: var(--error-dark);
340+
}
341+
342+
/* Animations */
343+
@keyframes flagPulse {
344+
0% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.4); }
345+
70% { box-shadow: 0 0 0 10px rgba(40, 167, 69, 0); }
346+
100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); }
347+
}
348+
349+
@keyframes slideIn {
350+
from {
351+
transform: translateX(100%);
352+
opacity: 0;
353+
}
354+
to {
355+
transform: translateX(0);
356+
opacity: 1;
357+
}
358+
}
359+
360+
@keyframes slideOut {
361+
from {
362+
transform: translateX(0);
363+
opacity: 1;
364+
}
365+
to {
366+
transform: translateX(100%);
367+
opacity: 0;
368+
}
369+
}

0 commit comments

Comments
 (0)