Skip to content

Commit 0c848f2

Browse files
FDelporteFDelporte
authored
Merge pull request #87 from BeJUG/customizable-raffle
Customizable raffle
2 parents 2c9a159 + c104f22 commit 0c848f2

2 files changed

Lines changed: 738 additions & 30 deletions

File tree

‎assets/css-sample.css‎

Lines changed: 302 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,302 @@
1+
body {
2+
margin: 0;
3+
font-family: Arial, sans-serif;
4+
background-color: #f9f9f9;
5+
color: #212121;
6+
display: flex;
7+
flex-direction: column;
8+
align-items: center;
9+
padding: 2rem;
10+
}
11+
img {
12+
max-width: 200px;
13+
margin-bottom: 1rem;
14+
}
15+
.input-section {
16+
width: 100%;
17+
max-width: 500px;
18+
margin-bottom: 2rem;
19+
}
20+
.unified-input {
21+
padding: 1.5rem;
22+
border: 2px solid #ccc;
23+
border-radius: 10px;
24+
background-color: #fff;
25+
transition: all 0.3s ease;
26+
}
27+
.unified-input.compact {
28+
padding: 1rem;
29+
}
30+
.input-header {
31+
font-size: 1.1rem;
32+
font-weight: bold;
33+
color: #1976d2;
34+
margin-bottom: 1rem;
35+
transition: all 0.3s ease;
36+
}
37+
.input-header.compact {
38+
font-size: 0.9rem;
39+
margin-bottom: 0.5rem;
40+
}
41+
.input-controls {
42+
display: flex;
43+
gap: 1rem;
44+
margin-bottom: 1rem;
45+
align-items: stretch;
46+
}
47+
input[type="text"] {
48+
flex: 1;
49+
padding: 0.75rem;
50+
background-color: #fff;
51+
color: #212121;
52+
border: 1px solid #ccc;
53+
border-radius: 5px;
54+
}
55+
.file-input-wrapper {
56+
position: relative;
57+
display: flex;
58+
align-items: center;
59+
}
60+
.file-input-wrapper input[type="file"] {
61+
position: absolute;
62+
opacity: 0;
63+
width: 100%;
64+
height: 100%;
65+
cursor: pointer;
66+
z-index: 1;
67+
}
68+
.file-input-label {
69+
background-color: #1976d2;
70+
color: white;
71+
padding: 0.75rem 1.5rem;
72+
border-radius: 5px;
73+
cursor: pointer;
74+
font-size: 0.9rem;
75+
white-space: nowrap;
76+
transition: background-color 0.2s;
77+
border: none;
78+
}
79+
.file-input-label:hover {
80+
background-color: #1565c0;
81+
}
82+
.file-input-label.file-selected {
83+
background-color: #4caf50;
84+
}
85+
.file-input-label.file-selected:hover {
86+
background-color: #388e3c;
87+
}
88+
.file-info {
89+
font-size: 0.85rem;
90+
color: #666;
91+
transition: all 0.3s ease;
92+
}
93+
.file-info.hidden {
94+
display: none;
95+
}
96+
button {
97+
background-color: #1976d2;
98+
color: white;
99+
border: none;
100+
padding: 0.75rem 1.5rem;
101+
cursor: pointer;
102+
font-size: 1rem;
103+
border-radius: 5px;
104+
margin: 0.5rem;
105+
}
106+
button:hover {
107+
background-color: #1565c0;
108+
}
109+
button:disabled {
110+
background-color: #ccc;
111+
cursor: not-allowed;
112+
}
113+
.clear-button {
114+
background-color: #e53935;
115+
}
116+
.clear-button:hover {
117+
background-color: #c62828;
118+
}
119+
#participantsList {
120+
display: flex;
121+
flex-wrap: wrap;
122+
gap: 0.5rem;
123+
width: 100%;
124+
margin-bottom: 1rem;
125+
align-items: center;
126+
justify-content: center;
127+
}
128+
.tag {
129+
background-color: #e0e0e0;
130+
padding: 0.4rem 0.75rem;
131+
border-radius: 20px;
132+
font-size: 0.9rem;
133+
display: flex;
134+
align-items: center;
135+
}
136+
.tag span {
137+
margin-left: 0.5rem;
138+
color: #e53935;
139+
cursor: pointer;
140+
}
141+
.tag span:hover {
142+
color: #b71c1c;
143+
}
144+
.participants-count {
145+
margin-bottom: 1rem;
146+
font-size: 1.1rem;
147+
color: #388e3c;
148+
}
149+
#winner {
150+
margin-top: 1rem;
151+
font-size: 1.5rem;
152+
font-weight: bold;
153+
color: #388e3c;
154+
}
155+
#animation {
156+
font-size: 2rem;
157+
margin-top: 2rem;
158+
min-height: 2rem;
159+
color: #fbc02d;
160+
font-weight: bold;
161+
}
162+
#winnerImage {
163+
margin-top: 2rem;
164+
display: none;
165+
min-width: 450px;
166+
}
167+
.error-message {
168+
color: #e53935;
169+
margin-top: 0.5rem;
170+
font-size: 0.9rem;
171+
}
172+
.success-message {
173+
color: #4caf50;
174+
margin-top: 0.5rem;
175+
font-size: 0.9rem;
176+
}
177+
178+
/* Customization Panel Styles */
179+
.customization-panel {
180+
position: fixed;
181+
top: 0;
182+
right: -400px;
183+
width: 400px;
184+
height: 100vh;
185+
background-color: #ffffff;
186+
border-left: 2px solid #ddd;
187+
transition: right 0.3s ease;
188+
z-index: 1000;
189+
overflow-y: auto;
190+
padding: 2rem;
191+
box-sizing: border-box;
192+
}
193+
.customization-panel.open {
194+
right: 0;
195+
}
196+
.customize-toggle {
197+
position: fixed;
198+
top: 20px;
199+
right: 20px;
200+
background-color: #1976d2;
201+
color: white;
202+
border: none;
203+
padding: 0.75rem;
204+
border-radius: 50%;
205+
cursor: pointer;
206+
font-size: 1.2rem;
207+
z-index: 1001;
208+
width: 50px;
209+
height: 50px;
210+
display: flex;
211+
align-items: center;
212+
justify-content: center;
213+
}
214+
.customize-toggle:hover {
215+
background-color: #1565c0;
216+
}
217+
.customization-section {
218+
margin-bottom: 2rem;
219+
padding-bottom: 1.5rem;
220+
border-bottom: 1px solid #ddd;
221+
}
222+
.customization-section:last-child {
223+
border-bottom: none;
224+
}
225+
.customization-section h3 {
226+
color: #1976d2;
227+
margin-bottom: 1rem;
228+
font-size: 1.1rem;
229+
}
230+
.form-group {
231+
margin-bottom: 1rem;
232+
}
233+
.form-group label {
234+
display: block;
235+
margin-bottom: 0.5rem;
236+
color: #555;
237+
font-size: 0.9rem;
238+
}
239+
.form-group input,
240+
.form-group textarea {
241+
width: 100%;
242+
padding: 0.75rem;
243+
background-color: #fff;
244+
color: #212121;
245+
border: 1px solid #ccc;
246+
border-radius: 5px;
247+
box-sizing: border-box;
248+
position: relative;
249+
z-index: auto;
250+
}
251+
.form-group textarea {
252+
min-height: 200px;
253+
font-family: monospace;
254+
font-size: 0.85rem;
255+
resize: vertical;
256+
}
257+
.customize-button {
258+
background-color: #4caf50;
259+
margin: 0.5rem 0;
260+
width: 100%;
261+
}
262+
.customize-button:hover {
263+
background-color: #388e3c;
264+
}
265+
.reset-button {
266+
background-color: #e53935;
267+
margin: 0.5rem 0;
268+
width: 100%;
269+
}
270+
.reset-button:hover {
271+
background-color: #c62828;
272+
}
273+
.logo-preview {
274+
max-width: 100px;
275+
max-height: 100px;
276+
margin-top: 0.5rem;
277+
border: 1px solid #ccc;
278+
border-radius: 5px;
279+
}
280+
.close-panel {
281+
position: absolute;
282+
top: 1rem;
283+
right: 1rem;
284+
background: none;
285+
border: none;
286+
color: #888;
287+
font-size: 1.5rem;
288+
cursor: pointer;
289+
padding: 0;
290+
margin: 0;
291+
}
292+
.close-panel:hover {
293+
color: #333;
294+
background: none;
295+
}
296+
297+
@media (max-width: 768px) {
298+
.customization-panel {
299+
width: 100%;
300+
right: -100%;
301+
}
302+
}

0 commit comments

Comments
 (0)