SpectrumInfinite commited on
Commit
c20acb5
·
verified ·
1 Parent(s): 0b6b61a

<!DOCTYPE html>

Browse files

<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Donation — Support Our School Programs</title>
<meta name="color-scheme" content="light dark" />
<style>
/* ------------------------------
0) BASE + THEME
------------------------------*/
:root{
--bg: #F8FAFC;
--surface: #FFFFFF;
--ink: #111111;
--muted: #6B7280;
--brand: #0D1B2A; /* deep navy */
--brand-2:#1B263B; /* darker navy */
--accent:#D4AF37; /* gold (sparingly) */
--success:#16A34A;
--danger:#DC2626;
--info:#2563EB;

--rad: 12px;
--pad: 16px;
--shadow-sm: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.05);
--shadow-md: 0 10px 15px rgba(0,0,0,.07), 0 4px 6px rgba(0,0,0,.06);
--shadow-lg: 0 20px 25px rgba(0,0,0,.1), 0 10px 10px rgba(0,0,0,.04);
--maxw: 1120px;
}
@media (prefers-color-scheme:dark){
:root{
--bg: #0A0F17;
--surface: #0F1623;
--ink: #EAEFF7;
--muted: #A3ADC2;
--brand:#0F1C2D;
--brand-2:#0B1320;
--accent:#E0C769;
}
}
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
color:var(--ink);
background: radial-gradient(1200px 600px at 80% -10%, rgba(212,175,55,.12), transparent 60%),
radial-gradient(1000px 500px at -10% 10%, rgba(13,27,42,.15), transparent 60%),
var(--bg);
line-height:1.5;
}
@media (prefers-reduced-motion:no-preference){
body{
animation: bg-pan 28s linear infinite alternate;
}
@keyframes bg-pan{
from{background-position: 0 0, 0 0, 0 0}
to{background-position: 30px -10px, -20px 20px, 0 0}
}
}
.container{max-width:var(--maxw); margin-inline:auto; padding: 0 20px}

h1{font-size:clamp(1.6rem,3.2vw,2.4rem); line-height:1.15; margin:0 0 8px}
h2{font-size:clamp(1.25rem,2.2vw,1.6rem); line-height:1.2; margin:0 0 8px}
h3{font-size:clamp(1.05rem,1.8vw,1.25rem); line-height:1.25; margin:0 0 6px}
p{margin:0 0 12px}
small, .small{font-size:.9rem; color:var(--muted)}

.btn{
--btn-bg: var(--brand);
--btn-ink: #fff;
display:inline-flex; align-items:center; justify-content:center;
gap:.5rem; padding:.8rem 1.1rem; border-radius:999px;
background:var(--btn-bg); color:var(--btn-ink); border:1px solid transparent;
text-decoration:none; font-weight:600; cursor:pointer;
box-shadow: var(--shadow-sm);
transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
}
.btn:hover{transform: translateY(-1px); box-shadow: var(--shadow-md)}
.btn:active{transform: translateY(0); box-shadow: var(--shadow-sm)}
.btn.secondary{
--btn-bg: transparent; --btn-ink: var(--ink);
border-color: color-mix(in oklab, var(--ink) 18%, transparent);
background: color-mix(in oklab, var(--surface) 80%, transparent);
}
.btn.gold{ --btn-bg: var(--accent); --btn-ink: #111 }

.chip{padding:.55rem .9rem; border-radius:999px; background: color-mix(in oklab, var(--surface) 88%, #fff 12%); border:1px solid color-mix(in oklab, var(--ink) 12%, transparent); color:var(--ink)}
.kbd{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: color-mix(in oklab, var(--surface) 70%, #000 10%); padding:.2rem .4rem; border-radius:6px}

/* ------------------------------
1) HEADER
------------------------------*/
.site-header{
position:sticky; top:0; z-index:50;
backdrop-filter: blur(6px);
background: color-mix(in oklab, var(--surface) 80%, transparent);
border-bottom:1px solid color-mix(in oklab, var(--ink) 10%, transparent);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}
.brand .logo{
width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
background:linear-gradient(145deg, var(--brand), var(--brand-2));
color:#fff; font-weight:800; box-shadow: var(--shadow-sm);
}
nav a{color:var(--ink); text-decoration:none; padding:.5rem .75rem; border-radius:8px}
nav a:hover{background: color-mix(in oklab, var(--ink) 6%, transparent)}

/* ------------------------------
2) HERO
------------------------------*/
.hero{padding: 28px 0 16px}
.hero-grid{
display:grid; gap:18px;
grid-template-columns: 1fr;
}
@media (min-width: 860px){
.hero-grid{grid-template-columns: 1.2fr .8fr}
}
.hero-card{
background: var(--surface); border:1px solid color-mix(in oklab, var(--ink) 10%, transparent);
border-radius: var(--rad); padding: clamp(16px,2.2vw,24px);
box-shadow:var(--shadow-md);
}
.hero-badges{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:10px 0 2px}
.progress{
--p: 62; /* percent (for initial design preview) */
background: color-mix(in oklab, var(--ink) 8%, transparent);
border-radius: 999px; height: 12px; position:relative; overflow:hidden;
}
.progress > i{
content:""; display:block; height:100%; width: calc(var(--p) * 1%);
background: linear-gradient(90deg, var(--accent), #ffe59a 90%);
border-radius:999px;
transition: width 1.2s cubic-bezier(.2,.7,.2,1);
}
.hero-stats{display:grid; grid-template-columns: repeat(3,1fr); gap:12px; margin-top:10px}
.stat{
background: color-mix(in oklab, var(--surface) 85%, transparent);
border:1px solid color-mix(in oklab, var(--ink) 10%, transparent);
border-radius:10px; padding:10px 12px; text-align:center;
}
.stat b{display:block; font-size:clamp(1rem,2.6vw,1.4rem)}
.stat span{color:var(--muted); font-size:.9rem}

/* ------------------------------
3) FORM WRAPPER
------------------------------*/
.panel{
background: var(--surface); border:1px solid color-mix(in oklab, var(--ink) 10%, transparent);
border-radius: var(--rad); padding: clamp(16px,2.2vw,22px); box-shadow: var(--shadow-md);
}
.two-col{display:grid; gap:18px}
@media (min-width: 960px){ .two-col{ grid-template-columns: 1.1fr .9fr } }

.field{display:grid; gap:6px; margin-bottom:12px}
.label{font-weight:600}
.help{color:var(--muted); font-size:.92rem}
select, input[type="text"], input[type="email"], input[type="number"], textarea{
width:100%; padding: .85rem .95rem; border-radius:10px; border:1px solid color-mix(in oklab, var(--ink) 16%, transparent);
background: color-mix(in oklab, var(--surface) 92%, transparent); color:var(--ink);
outline:none; box-shadow: var(--shadow-sm);
}
select:focus, input:focus, textarea:focus{
border-color: color-mix(in oklab, var(--info) 70%, transparent);
box-shadow: 0 0 0 4px color-mix(in oklab, var(--info) 18%, transparent);
}

/* Amount chip radios */
.amounts{display:flex; flex-wrap:wrap; gap:10px}
.chip-radio{position:relative}
.chip-radio input{position:absolute; inset:0; opacity:0}
.chip-radio label{
display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
padding:.7rem 1rem; border-radius:999px; border:1px solid color-mix(in oklab, var(--ink) 12%, transparent);
background: color-mix(in oklab, var(--surface) 90%, transparent); box-shadow:var(--shadow-sm);
transition: transform .1s ease, border-color .2s ease, background .2s ease;
}
.chip-radio input:checked + label{
transform: translateY(-1px);
border-color: color-mix(in oklab, var(--accent) 65%, var(--ink) 10%);
background: color-mix(in oklab, var(--accent) 14%, var(--surface) 88%);
}
.chip-radio input:focus + label{
box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 28%, transparent);
}

/* "Other" amount reveal without JS */
.other-wrap{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.other-amount{display:none; max-width:180px}
#amt-other:checked ~ .other-wrap .other-amount{display:block}

/* Switch (fee cover & monthly) */
.switch{
display:inline-flex; align-items:center; gap:.55rem; cursor:pointer; user-select:none;
}
.switch input{position: absolute; opacity:0; width:1px; height:1px}
.switch .track{
width:46px; height:26px; border-radius:999px; background: color-mix(in oklab, var(--ink) 16%, transparent);
position:relative; transition: background .2s ease;
}
.switch .thumb{
position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
background:#fff; box-shadow: var(--shadow-sm); transition: transform .2s ease;
}
.switch input:checked ~ .track{ background: color-mix(in oklab, var(--success) 65%, var(--ink) 8%)}
.switch input:checked ~ .track .thumb{ transform: translateX(20px) }

/* Accordions via <details> */
details{
border:1px solid color-mix(in oklab, var(--ink) 10%, transparent);
border-radius:10px; background: color-mix(in oklab, var(--surface) 94%, transparent);
padding:10px 12px; box-shadow: var(--shadow-sm);
}
details + details{margin-top:10px}
summary{cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:12px; font-weight:600}
summary::-webkit-details-marker{display:none}
.caret{transition: transform .2s ease}
details[open] .caret{transform: rotate(180deg)}
.faq p{margin:10px 0 6px}

/* Donor wall */
.donors{display:grid; grid-template-columns:1fr; gap:10px}
@media (min-width: 620px){ .donors{grid-template-columns: repeat(2,1fr)} }
.donor{
border:1px solid color-mix(in oklab, var(--ink) 10%, transparent);
border-radius:10px; padding:12px; background: color-mix(in oklab, var(--surface) 92%, transparent);

Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +551 -18
  3. prompts.txt +544 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Donate Button Ej Project
3
- emoji: 💻
4
- colorFrom: green
5
- colorTo: blue
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: donate-button-ej-project
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: yellow
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,552 @@
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" />
6
+ <title>Donation — Support Our School Programs</title>
7
+ <meta name="color-scheme" content="light dark" />
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
10
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
11
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <style>
14
+ :root{
15
+ --brand: #0D1B2A;
16
+ --brand-2:#1B263B;
17
+ --accent:#D4AF37;
18
+ --success:#16A34A;
19
+ --danger:#DC2626;
20
+ --info:#2563EB;
21
+ }
22
+
23
+ body {
24
+ font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
25
+ background: radial-gradient(1200px 600px at 80% -10%, rgba(212,175,55,.12), transparent 60%),
26
+ radial-gradient(1000px 500px at -10% 10%, rgba(13,27,42,.15), transparent 60%),
27
+ #F8FAFC;
28
+ }
29
+
30
+ @media (prefers-color-scheme: dark) {
31
+ body {
32
+ background: radial-gradient(1200px 600px at 80% -10%, rgba(212,175,55,.12), transparent 60%),
33
+ radial-gradient(1000px 500px at -10% 10%, rgba(13,27,42,.15), transparent 60%),
34
+ #0A0F17;
35
+ }
36
+ }
37
+
38
+ .btn-primary {
39
+ background: var(--brand);
40
+ color: white;
41
+ transition: all 0.2s ease;
42
+ }
43
+
44
+ .btn-primary:hover {
45
+ transform: translateY(-2px);
46
+ box-shadow: 0 10px 15px rgba(0,0,0,0.1);
47
+ }
48
+
49
+ .btn-secondary {
50
+ background: transparent;
51
+ border: 1px solid #CBD5E1;
52
+ color: #334155;
53
+ }
54
+
55
+ .btn-gold {
56
+ background: var(--accent);
57
+ color: #111;
58
+ font-weight: 600;
59
+ }
60
+
61
+ .card {
62
+ background: white;
63
+ border-radius: 12px;
64
+ box-shadow: 0 4px 6px rgba(0,0,0,0.05);
65
+ border: 1px solid #E2E8F0;
66
+ }
67
+
68
+ @media (prefers-color-scheme: dark) {
69
+ .card {
70
+ background: #1E293B;
71
+ border: 1px solid #334155;
72
+ }
73
+ }
74
+
75
+ .progress-bar {
76
+ height: 12px;
77
+ border-radius: 999px;
78
+ background: #E2E8F0;
79
+ overflow: hidden;
80
+ }
81
+
82
+ @media (prefers-color-scheme: dark) {
83
+ .progress-bar {
84
+ background: #334155;
85
+ }
86
+ }
87
+
88
+ .progress-fill {
89
+ height: 100%;
90
+ background: linear-gradient(90deg, var(--accent), #FBBF24);
91
+ border-radius: 999px;
92
+ transition: width 1.5s cubic-bezier(0.2, 0.7, 0.2, 1);
93
+ }
94
+
95
+ .chip {
96
+ background: #F1F5F9;
97
+ border: 1px solid #E2E8F0;
98
+ border-radius: 999px;
99
+ padding: 0.5rem 1rem;
100
+ font-size: 0.875rem;
101
+ }
102
+
103
+ @media (prefers-color-scheme: dark) {
104
+ .chip {
105
+ background: #334155;
106
+ border: 1px solid #475569;
107
+ }
108
+ }
109
+
110
+ .amount-option {
111
+ border: 1px solid #CBD5E1;
112
+ border-radius: 999px;
113
+ padding: 0.75rem 1.25rem;
114
+ cursor: pointer;
115
+ transition: all 0.2s ease;
116
+ }
117
+
118
+ @media (prefers-color-scheme: dark) {
119
+ .amount-option {
120
+ border: 1px solid #475569;
121
+ }
122
+ }
123
+
124
+ .amount-option:hover {
125
+ border-color: var(--accent);
126
+ }
127
+
128
+ .amount-option.selected {
129
+ background: #FEF3C7;
130
+ border-color: var(--accent);
131
+ }
132
+
133
+ @media (prefers-color-scheme: dark) {
134
+ .amount-option.selected {
135
+ background: #452A0A;
136
+ }
137
+ }
138
+
139
+ .switch {
140
+ position: relative;
141
+ display: inline-block;
142
+ width: 46px;
143
+ height: 26px;
144
+ }
145
+
146
+ .switch input {
147
+ opacity: 0;
148
+ width: 0;
149
+ height: 0;
150
+ }
151
+
152
+ .slider {
153
+ position: absolute;
154
+ cursor: pointer;
155
+ top: 0;
156
+ left: 0;
157
+ right: 0;
158
+ bottom: 0;
159
+ background-color: #CBD5E1;
160
+ transition: .4s;
161
+ border-radius: 34px;
162
+ }
163
+
164
+ @media (prefers-color-scheme: dark) {
165
+ .slider {
166
+ background-color: #475569;
167
+ }
168
+ }
169
+
170
+ .slider:before {
171
+ position: absolute;
172
+ content: "";
173
+ height: 20px;
174
+ width: 20px;
175
+ left: 3px;
176
+ bottom: 3px;
177
+ background-color: white;
178
+ transition: .4s;
179
+ border-radius: 50%;
180
+ box-shadow: 0 1px 3px rgba(0,0,0,0.1);
181
+ }
182
+
183
+ input:checked + .slider {
184
+ background-color: var(--success);
185
+ }
186
+
187
+ input:checked + .slider:before {
188
+ transform: translateX(20px);
189
+ }
190
+
191
+ .donor-card {
192
+ border: 1px solid #E2E8F0;
193
+ border-radius: 10px;
194
+ padding: 1rem;
195
+ background: #F8FAFC;
196
+ }
197
+
198
+ @media (prefers-color-scheme: dark) {
199
+ .donor-card {
200
+ border: 1px solid #334155;
201
+ background: #1E293B;
202
+ }
203
+ }
204
+
205
+ .avatar {
206
+ width: 40px;
207
+ height: 40px;
208
+ border-radius: 50%;
209
+ background: linear-gradient(145deg, var(--brand), var(--brand-2));
210
+ color: white;
211
+ display: flex;
212
+ align-items: center;
213
+ justify-content: center;
214
+ font-weight: 700;
215
+ }
216
+
217
+ details summary {
218
+ cursor: pointer;
219
+ list-style: none;
220
+ display: flex;
221
+ justify-content: space-between;
222
+ align-items: center;
223
+ }
224
+
225
+ details summary::-webkit-details-marker {
226
+ display: none;
227
+ }
228
+
229
+ details[open] .caret {
230
+ transform: rotate(180deg);
231
+ }
232
+
233
+ .caret {
234
+ transition: transform 0.2s ease;
235
+ }
236
+ </style>
237
+ </head>
238
+ <body class="bg-slate-50 text-slate-900 dark:bg-slate-900 dark:text-slate-100">
239
+ <!-- Header -->
240
+ <header class="sticky top-0 z-50 backdrop-blur-sm bg-white/80 dark:bg-slate-900/80 border-b border-slate-200 dark:border-slate-800">
241
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
242
+ <a href="/" class="flex items-center space-x-2">
243
+ <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-[#0D1B2A] to-[#1B263B] flex items-center justify-center text-white font-bold">
244
+ K
245
+ </div>
246
+ <span class="font-bold text-lg">Kent Island HS Store</span>
247
+ </a>
248
+ <nav class="flex items-center space-x-2">
249
+ <span class="chip">Donation</span>
250
+ <a href="#faq" class="px-3 py-2 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800">FAQ</a>
251
+ <a href="#contact" class="px-3 py-2 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800">Contact</a>
252
+ </nav>
253
+ </div>
254
+ </header>
255
+
256
+ <main>
257
+ <!-- Hero Section -->
258
+ <section class="py-12" data-aos="fade-up">
259
+ <div class="container mx-auto px-4">
260
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
261
+ <div class="card p-6 md:p-8">
262
+ <h1 class="text-3xl md:text-4xl font-bold mb-3">Donate to Our School Programs</h1>
263
+ <p class="text-slate-600 dark:text-slate-400 mb-6">100% of your donation supports our teams and activities.</p>
264
+
265
+ <div class="flex flex-wrap gap-2 mb-6">
266
+ <span class="chip">U.S. Cards • Apple Pay • Google Pay</span>
267
+ <span class="chip">Secure Checkout</span>
268
+ <span class="chip">Program-Directed Funds</span>
269
+ </div>
270
+
271
+ <div class="mb-6">
272
+ <div class="progress-bar mb-2">
273
+ <div class="progress-fill" style="width: 62%"></div>
274
+ </div>
275
+ <div class="grid grid-cols-3 gap-4 mt-4">
276
+ <div class="text-center p-3 rounded-lg bg-slate-100 dark:bg-slate-800">
277
+ <div class="font-bold text-lg">$31,000</div>
278
+ <div class="text-sm text-slate-600 dark:text-slate-400">Raised</div>
279
+ </div>
280
+ <div class="text-center p-3 rounded-lg bg-slate-100 dark:bg-slate-800">
281
+ <div class="font-bold text-lg">$50,000</div>
282
+ <div class="text-sm text-slate-600 dark:text-slate-400">Goal</div>
283
+ </div>
284
+ <div class="text-center p-3 rounded-lg bg-slate-100 dark:bg-slate-800">
285
+ <div class="font-bold text-lg">12 days</div>
286
+ <div class="text-sm text-slate-600 dark:text-slate-400">Time Left</div>
287
+ </div>
288
+ </div>
289
+ </div>
290
+
291
+ <div class="flex flex-col sm:flex-row gap-4">
292
+ <a href="#donate" class="btn-gold px-6 py-3 rounded-full font-semibold text-center">Donate Now</a>
293
+ <a href="#why" class="btn-secondary px-6 py-3 rounded-full font-semibold text-center">Why your donation matters</a>
294
+ </div>
295
+ </div>
296
+
297
+ <div class="card p-6 md:p-8">
298
+ <h3 class="text-xl font-bold mb-4">Campaign Info</h3>
299
+ <p class="text-slate-600 dark:text-slate-400 mb-4">This campaign supports Kent Island High School programs for the 2025 season.</p>
300
+ <ul class="list-disc pl-5 space-y-2 text-slate-600 dark:text-slate-400">
301
+ <li>Donations are directed to the program you choose.</li>
302
+ <li>Wallets (Apple/Google Pay) available at checkout on supported devices.</li>
303
+ <li>No account required to donate.</li>
304
+ </ul>
305
+ </div>
306
+ </div>
307
+ </div>
308
+ </section>
309
+
310
+ <!-- Donation Form -->
311
+ <section id="donate" class="py-8" data-aos="fade-up">
312
+ <div class="container mx-auto px-4">
313
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
314
+ <!-- Form -->
315
+ <form class="card p-6 md:p-8">
316
+ <h2 class="text-2xl font-bold mb-2">Make a Donation</h2>
317
+ <p class="text-slate-600 dark:text-slate-400 mb-6">Select a program and amount. You'll complete payment securely at checkout.</p>
318
+
319
+ <!-- Program Selection -->
320
+ <div class="mb-6">
321
+ <label class="block font-semibold mb-2">Choose a <span class="text-[#0D1B2A] dark:text-white">Program</span> <span class="text-slate-500 text-sm">(required)</span></label>
322
+ <select class="w-full p-3 border border-slate-300 dark:border-slate-700 rounded-lg bg-white dark:bg-slate-800 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
323
+ <option value="" selected disabled>Select a program…</option>
324
+ <option value="football-2025">Football 2025</option>
325
+ <option value="band-2025">Band 2025</option>
326
+ <option value="cheer-2025">Cheer 2025</option>
327
+ </select>
328
+ <p class="text-slate-500 text-sm mt-2">Funds are credited to the selected program's budget.</p>
329
+ </div>
330
+
331
+ <!-- Accordions -->
332
+ <div id="why" class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
333
+ <details class="border border-slate-200 dark:border-slate-700 rounded-lg p-4 bg-slate-50 dark:bg-slate-800" open>
334
+ <summary class="font-semibold">
335
+ Why Donations Are Necessary
336
+ <span class="caret">▾</span>
337
+ </summary>
338
+ <div class="mt-3 text-slate-600 dark:text-slate-400 text-sm">
339
+ <p>Donations allow us to purchase new uniforms, safety equipment, and cover travel for the upcoming season.</p>
340
+ <ul class="list-disc pl-5 mt-2 space-y-1">
341
+ <li>Replace worn gear and uniforms</li>
342
+ <li>Cover competition and travel costs</li>
343
+ <li>Support training & technology needs</li>
344
+ </ul>
345
+ </div>
346
+ </details>
347
+
348
+ <details class="border border-slate-200 dark:border-slate-700 rounded-lg p-4 bg-slate-50 dark:bg-slate-800" open>
349
+ <summary class="font-semibold">
350
+ How Donations Are Used
351
+ <span class="caret">▾</span>
352
+ </summary>
353
+ <div class="mt-3 text-slate-600 dark:text-slate-400 text-sm">
354
+ <p>Your gift stays with the program you select and supports:</p>
355
+ <ul class="list-disc pl-5 mt-2 space-y-1">
356
+ <li>Equipment & maintenance</li>
357
+ <li>Competition fees & transport</li>
358
+ <li>Weight room upgrades & software</li>
359
+ </ul>
360
+ </div>
361
+ </details>
362
+ </div>
363
+
364
+ <hr class="my-6 border-slate-200 dark:border-slate-700">
365
+
366
+ <!-- Amount Selection -->
367
+ <div class="mb-6">
368
+ <div class="font-semibold mb-3">Choose an amount</div>
369
+ <div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-3">
370
+ <div class="amount-option text-center">$25</div>
371
+ <div class="amount-option text-center">$50</div>
372
+ <div class="amount-option text-center">$100</div>
373
+ <div class="amount-option text-center">$250</div>
374
+ <div class="amount-option text-center">$500</div>
375
+ <div class="amount-option text-center col-span-2 sm:col-span-1 md:col-span-1">$1,000</div>
376
+ <div class="amount-option text-center col-span-3 sm:col-span-2 md:col-span-2">
377
+ <input type="text" placeholder="Other amount" class="w-full bg-transparent border-0 focus:ring-0 p-0">
378
+ </div>
379
+ </div>
380
+ <p class="text-slate-500 text-sm mt-3">Minimum $5. For larger gifts, you can split across programs after checkout.</p>
381
+ </div>
382
+
383
+ <!-- Toggles -->
384
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
385
+ <div class="flex items-center">
386
+ <label class="switch">
387
+ <input type="checkbox">
388
+ <span class="slider"></span>
389
+ </label>
390
+ <span class="ml-3">Make it <span class="font-semibold">monthly</span> <span class="text-slate-500 text-sm">(cancel anytime)</span></span>
391
+ </div>
392
+
393
+ <div class="flex items-center">
394
+ <label class="switch">
395
+ <input type="checkbox">
396
+ <span class="slider"></span>
397
+ </label>
398
+ <span class="ml-3">Add a little extra to <span class="font-semibold">cover fees</span> <span class="text-slate-500 text-sm">(≈ 2.9% + $0.30)</span></span>
399
+ </div>
400
+ </div>
401
+
402
+ <!-- Message -->
403
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
404
+ <div>
405
+ <label class="block font-semibold mb-2">Message to the program <span class="text-slate-500 text-sm">(optional, public)</span></label>
406
+ <textarea class="w-full p-3 border border-slate-300 dark:border-slate-700 rounded-lg bg-white dark:bg-slate-800 focus:ring-2 focus:ring-blue-500 focus:border-blue-500" rows="3" placeholder="Say something encouraging…"></textarea>
407
+ <p class="text-slate-500 text-sm mt-1">Up to 180 characters. Your message may appear on our donor wall.</p>
408
+ </div>
409
+
410
+ <div>
411
+ <div class="flex items-center mb-4">
412
+ <label class="switch">
413
+ <input type="checkbox">
414
+ <span class="slider"></span>
415
+ </label>
416
+ <span class="ml-3">Hide my <span class="font-semibold">name</span> on public donor lists</span>
417
+ </div>
418
+ <p class="text-slate-500 text-sm">We'll still email you a receipt.</p>
419
+ </div>
420
+ </div>
421
+
422
+ <!-- Email -->
423
+ <div class="mb-6">
424
+ <label class="block font-semibold mb-2">Receipt email <span class="text-slate-500 text-sm">(required at checkout)</span></label>
425
+ <input type="email" class="w-full p-3 border border-slate-300 dark:border-slate-700 rounded-lg bg-white dark:bg-slate-800 focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="you@example.com">
426
+ <p class="text-slate-500 text-sm mt-1">Final receipt is issued after checkout. Email collected here is for preview and support.</p>
427
+ </div>
428
+
429
+ <!-- Submit -->
430
+ <div class="flex flex-col sm:flex-row justify-between items-center gap-4">
431
+ <div class="text-slate-500 text-sm">Apple Pay, Google Pay, and cards accepted at checkout.</div>
432
+ <button type="submit" class="btn-gold px-8 py-3 rounded-full font-semibold w-full sm:w-auto">Donate Now</button>
433
+ </div>
434
+
435
+ <!-- Legal -->
436
+ <div class="mt-6 text-slate-500 text-sm">
437
+ Donations are processed on behalf of <span class="font-semibold">[Booster/Org Legal Name]</span>, EIN <span class="font-semibold">[xx-xxxxxxx]</span>.
438
+ Gifts are tax-deductible to the extent allowed by law. <a href="#" class="text-blue-600 dark:text-blue-400">Terms</a> · <a href="#" class="text-blue-600 dark:text-blue-400">Privacy</a>
439
+ </div>
440
+ </form>
441
+
442
+ <!-- Sidebar -->
443
+ <aside>
444
+ <div class="card p-6 mb-8">
445
+ <h3 class="text-xl font-bold mb-4">Recent Donors</h3>
446
+ <div class="space-y-4">
447
+ <div class="donor-card flex items-start gap-4">
448
+ <div class="avatar">A</div>
449
+ <div>
450
+ <div class="font-semibold">Alex M.</div>
451
+ <div class="text-slate-600 dark:text-slate-400">donated <span class="font-semibold">$50</span></div>
452
+ <div class="text-sm text-slate-500">to Football 2025 · 2h ago</div>
453
+ <div class="text-sm mt-1">"Go Buccaneers!"</div>
454
+ </div>
455
+ </div>
456
+
457
+ <div class="donor-card flex items-start gap-4">
458
+ <div class="avatar">J</div>
459
+ <div>
460
+ <div class="font-semibold">Jordan K.</div>
461
+ <div class="text-slate-600 dark:text-slate-400">donated <span class="font-semibold">$250</span></div>
462
+ <div class="text-sm text-slate-500">to Band 2025 · 6h ago</div>
463
+ <div class="text-sm mt-1">"Proud of our marching band!"</div>
464
+ </div>
465
+ </div>
466
+
467
+ <div class="donor-card flex items-start gap-4">
468
+ <div class="avatar">S</div>
469
+ <div>
470
+ <div class="font-semibold">Sam R.</div>
471
+ <div class="text-slate-600 dark:text-slate-400">donated <span class="font-semibold">$100</span></div>
472
+ <div class="text-sm text-slate-500">to Cheer 2025 · 1d ago</div>
473
+ </div>
474
+ </div>
475
+
476
+ <div class="donor-card flex items-start gap-4">
477
+ <div class="avatar">M</div>
478
+ <div>
479
+ <div class="font-semibold">Maria G.</div>
480
+ <div class="text-slate-600 dark:text-slate-400">donated <span class="font-semibold">$25</span></div>
481
+ <div class="text-sm text-slate-500">to Football 2025 · 1d ago</div>
482
+ </div>
483
+ </div>
484
+ </div>
485
+ </div>
486
+
487
+ <div id="faq" class="card p-6">
488
+ <h3 class="text-xl font-bold mb-4">FAQ</h3>
489
+ <div class="space-y-4">
490
+ <details class="border-b border-slate-200 dark:border-slate-700 pb-4">
491
+ <summary class="font-semibold">
492
+ Is my donation tax-deductible?
493
+ <span class="caret float-right">▾</span>
494
+ </summary>
495
+ <p class="mt-3 text-slate-600 dark:text-slate-400">Yes, if donations are processed for a registered nonprofit or booster with a valid EIN (listed below). A receipt will be emailed after checkout.</p>
496
+ </details>
497
+
498
+ <details class="border-b border-slate-200 dark:border-slate-700 pb-4">
499
+ <summary class="font-semibold">
500
+ How do goals and deadlines work?
501
+ <span class="caret float-right">▾</span>
502
+ </summary>
503
+ <p class="mt-3 text-slate-600 dark:text-slate-400">Each program may set a fundraising goal and end date. After the deadline, you can still donate but progress bars are frozen.</p>
504
+ </details>
505
+
506
+ <details>
507
+ <summary class="font-semibold">
508
+ Which payment methods are accepted?
509
+ <span class="caret float-right">▾</span>
510
+ </summary>
511
+ <p class="mt-3 text-slate-600 dark:text-slate-400">Major U.S. cards, Apple Pay, Google Pay, and Shop Pay on supported devices/browsers.</p>
512
+ </details>
513
+ </div>
514
+ </div>
515
+ </aside>
516
+ </div>
517
+ </div>
518
+ </section>
519
+ </main>
520
+
521
+ <!-- Footer -->
522
+ <footer class="py-12 border-t border-slate-200 dark:border-slate-800" id="contact">
523
+ <div class="container mx-auto px-4">
524
+ <div class="max-w-4xl mx-auto">
525
+ <div class="text-slate-600 dark:text-slate-400 text-sm">
526
+ <p class="mb-3"><strong>Contact:</strong> boosters@example.org • (555) 555-1212</p>
527
+ <p class="mb-3"><strong>Organization:</strong> [Booster/Org Legal Name], EIN [xx-xxxxxxx], [Address, City, ST ZIP]</p>
528
+ <p>Refunds are handled per <a href="#" class="text-blue-600 dark:text-blue-400">Terms</a>. Privacy practices are described in our <a href="#" class="text-blue-600 dark:text-blue-400">Privacy Policy</a>.</p>
529
+ </div>
530
+ </div>
531
+ </div>
532
+ </footer>
533
+
534
+ <script>
535
+ AOS.init({
536
+ duration: 800,
537
+ once: true
538
+ });
539
+
540
+ feather.replace();
541
+
542
+ // Amount selection
543
+ const amountOptions = document.querySelectorAll('.amount-option');
544
+ amountOptions.forEach(option => {
545
+ option.addEventListener('click', () => {
546
+ amountOptions.forEach(opt => opt.classList.remove('selected'));
547
+ option.classList.add('selected');
548
+ });
549
+ });
550
+ </script>
551
+ </body>
552
  </html>
prompts.txt ADDED
@@ -0,0 +1,544 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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" />
6
+ <title>Donation — Support Our School Programs</title>
7
+ <meta name="color-scheme" content="light dark" />
8
+ <style>
9
+ /* ------------------------------
10
+ 0) BASE + THEME
11
+ ------------------------------*/
12
+ :root{
13
+ --bg: #F8FAFC;
14
+ --surface: #FFFFFF;
15
+ --ink: #111111;
16
+ --muted: #6B7280;
17
+ --brand: #0D1B2A; /* deep navy */
18
+ --brand-2:#1B263B; /* darker navy */
19
+ --accent:#D4AF37; /* gold (sparingly) */
20
+ --success:#16A34A;
21
+ --danger:#DC2626;
22
+ --info:#2563EB;
23
+
24
+ --rad: 12px;
25
+ --pad: 16px;
26
+ --shadow-sm: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.05);
27
+ --shadow-md: 0 10px 15px rgba(0,0,0,.07), 0 4px 6px rgba(0,0,0,.06);
28
+ --shadow-lg: 0 20px 25px rgba(0,0,0,.1), 0 10px 10px rgba(0,0,0,.04);
29
+ --maxw: 1120px;
30
+ }
31
+ @media (prefers-color-scheme:dark){
32
+ :root{
33
+ --bg: #0A0F17;
34
+ --surface: #0F1623;
35
+ --ink: #EAEFF7;
36
+ --muted: #A3ADC2;
37
+ --brand:#0F1C2D;
38
+ --brand-2:#0B1320;
39
+ --accent:#E0C769;
40
+ }
41
+ }
42
+ *{box-sizing:border-box}
43
+ html,body{height:100%}
44
+ body{
45
+ margin:0;
46
+ font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
47
+ color:var(--ink);
48
+ background: radial-gradient(1200px 600px at 80% -10%, rgba(212,175,55,.12), transparent 60%),
49
+ radial-gradient(1000px 500px at -10% 10%, rgba(13,27,42,.15), transparent 60%),
50
+ var(--bg);
51
+ line-height:1.5;
52
+ }
53
+ @media (prefers-reduced-motion:no-preference){
54
+ body{
55
+ animation: bg-pan 28s linear infinite alternate;
56
+ }
57
+ @keyframes bg-pan{
58
+ from{background-position: 0 0, 0 0, 0 0}
59
+ to{background-position: 30px -10px, -20px 20px, 0 0}
60
+ }
61
+ }
62
+ .container{max-width:var(--maxw); margin-inline:auto; padding: 0 20px}
63
+
64
+ h1{font-size:clamp(1.6rem,3.2vw,2.4rem); line-height:1.15; margin:0 0 8px}
65
+ h2{font-size:clamp(1.25rem,2.2vw,1.6rem); line-height:1.2; margin:0 0 8px}
66
+ h3{font-size:clamp(1.05rem,1.8vw,1.25rem); line-height:1.25; margin:0 0 6px}
67
+ p{margin:0 0 12px}
68
+ small, .small{font-size:.9rem; color:var(--muted)}
69
+
70
+ .btn{
71
+ --btn-bg: var(--brand);
72
+ --btn-ink: #fff;
73
+ display:inline-flex; align-items:center; justify-content:center;
74
+ gap:.5rem; padding:.8rem 1.1rem; border-radius:999px;
75
+ background:var(--btn-bg); color:var(--btn-ink); border:1px solid transparent;
76
+ text-decoration:none; font-weight:600; cursor:pointer;
77
+ box-shadow: var(--shadow-sm);
78
+ transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
79
+ }
80
+ .btn:hover{transform: translateY(-1px); box-shadow: var(--shadow-md)}
81
+ .btn:active{transform: translateY(0); box-shadow: var(--shadow-sm)}
82
+ .btn.secondary{
83
+ --btn-bg: transparent; --btn-ink: var(--ink);
84
+ border-color: color-mix(in oklab, var(--ink) 18%, transparent);
85
+ background: color-mix(in oklab, var(--surface) 80%, transparent);
86
+ }
87
+ .btn.gold{ --btn-bg: var(--accent); --btn-ink: #111 }
88
+
89
+ .chip{padding:.55rem .9rem; border-radius:999px; background: color-mix(in oklab, var(--surface) 88%, #fff 12%); border:1px solid color-mix(in oklab, var(--ink) 12%, transparent); color:var(--ink)}
90
+ .kbd{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: color-mix(in oklab, var(--surface) 70%, #000 10%); padding:.2rem .4rem; border-radius:6px}
91
+
92
+ /* ------------------------------
93
+ 1) HEADER
94
+ ------------------------------*/
95
+ .site-header{
96
+ position:sticky; top:0; z-index:50;
97
+ backdrop-filter: blur(6px);
98
+ background: color-mix(in oklab, var(--surface) 80%, transparent);
99
+ border-bottom:1px solid color-mix(in oklab, var(--ink) 10%, transparent);
100
+ }
101
+ .header-inner{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0}
102
+ .brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}
103
+ .brand .logo{
104
+ width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
105
+ background:linear-gradient(145deg, var(--brand), var(--brand-2));
106
+ color:#fff; font-weight:800; box-shadow: var(--shadow-sm);
107
+ }
108
+ nav a{color:var(--ink); text-decoration:none; padding:.5rem .75rem; border-radius:8px}
109
+ nav a:hover{background: color-mix(in oklab, var(--ink) 6%, transparent)}
110
+
111
+ /* ------------------------------
112
+ 2) HERO
113
+ ------------------------------*/
114
+ .hero{padding: 28px 0 16px}
115
+ .hero-grid{
116
+ display:grid; gap:18px;
117
+ grid-template-columns: 1fr;
118
+ }
119
+ @media (min-width: 860px){
120
+ .hero-grid{grid-template-columns: 1.2fr .8fr}
121
+ }
122
+ .hero-card{
123
+ background: var(--surface); border:1px solid color-mix(in oklab, var(--ink) 10%, transparent);
124
+ border-radius: var(--rad); padding: clamp(16px,2.2vw,24px);
125
+ box-shadow:var(--shadow-md);
126
+ }
127
+ .hero-badges{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:10px 0 2px}
128
+ .progress{
129
+ --p: 62; /* percent (for initial design preview) */
130
+ background: color-mix(in oklab, var(--ink) 8%, transparent);
131
+ border-radius: 999px; height: 12px; position:relative; overflow:hidden;
132
+ }
133
+ .progress > i{
134
+ content:""; display:block; height:100%; width: calc(var(--p) * 1%);
135
+ background: linear-gradient(90deg, var(--accent), #ffe59a 90%);
136
+ border-radius:999px;
137
+ transition: width 1.2s cubic-bezier(.2,.7,.2,1);
138
+ }
139
+ .hero-stats{display:grid; grid-template-columns: repeat(3,1fr); gap:12px; margin-top:10px}
140
+ .stat{
141
+ background: color-mix(in oklab, var(--surface) 85%, transparent);
142
+ border:1px solid color-mix(in oklab, var(--ink) 10%, transparent);
143
+ border-radius:10px; padding:10px 12px; text-align:center;
144
+ }
145
+ .stat b{display:block; font-size:clamp(1rem,2.6vw,1.4rem)}
146
+ .stat span{color:var(--muted); font-size:.9rem}
147
+
148
+ /* ------------------------------
149
+ 3) FORM WRAPPER
150
+ ------------------------------*/
151
+ .panel{
152
+ background: var(--surface); border:1px solid color-mix(in oklab, var(--ink) 10%, transparent);
153
+ border-radius: var(--rad); padding: clamp(16px,2.2vw,22px); box-shadow: var(--shadow-md);
154
+ }
155
+ .two-col{display:grid; gap:18px}
156
+ @media (min-width: 960px){ .two-col{ grid-template-columns: 1.1fr .9fr } }
157
+
158
+ .field{display:grid; gap:6px; margin-bottom:12px}
159
+ .label{font-weight:600}
160
+ .help{color:var(--muted); font-size:.92rem}
161
+ select, input[type="text"], input[type="email"], input[type="number"], textarea{
162
+ width:100%; padding: .85rem .95rem; border-radius:10px; border:1px solid color-mix(in oklab, var(--ink) 16%, transparent);
163
+ background: color-mix(in oklab, var(--surface) 92%, transparent); color:var(--ink);
164
+ outline:none; box-shadow: var(--shadow-sm);
165
+ }
166
+ select:focus, input:focus, textarea:focus{
167
+ border-color: color-mix(in oklab, var(--info) 70%, transparent);
168
+ box-shadow: 0 0 0 4px color-mix(in oklab, var(--info) 18%, transparent);
169
+ }
170
+
171
+ /* Amount chip radios */
172
+ .amounts{display:flex; flex-wrap:wrap; gap:10px}
173
+ .chip-radio{position:relative}
174
+ .chip-radio input{position:absolute; inset:0; opacity:0}
175
+ .chip-radio label{
176
+ display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
177
+ padding:.7rem 1rem; border-radius:999px; border:1px solid color-mix(in oklab, var(--ink) 12%, transparent);
178
+ background: color-mix(in oklab, var(--surface) 90%, transparent); box-shadow:var(--shadow-sm);
179
+ transition: transform .1s ease, border-color .2s ease, background .2s ease;
180
+ }
181
+ .chip-radio input:checked + label{
182
+ transform: translateY(-1px);
183
+ border-color: color-mix(in oklab, var(--accent) 65%, var(--ink) 10%);
184
+ background: color-mix(in oklab, var(--accent) 14%, var(--surface) 88%);
185
+ }
186
+ .chip-radio input:focus + label{
187
+ box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 28%, transparent);
188
+ }
189
+
190
+ /* "Other" amount reveal without JS */
191
+ .other-wrap{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
192
+ .other-amount{display:none; max-width:180px}
193
+ #amt-other:checked ~ .other-wrap .other-amount{display:block}
194
+
195
+ /* Switch (fee cover & monthly) */
196
+ .switch{
197
+ display:inline-flex; align-items:center; gap:.55rem; cursor:pointer; user-select:none;
198
+ }
199
+ .switch input{position: absolute; opacity:0; width:1px; height:1px}
200
+ .switch .track{
201
+ width:46px; height:26px; border-radius:999px; background: color-mix(in oklab, var(--ink) 16%, transparent);
202
+ position:relative; transition: background .2s ease;
203
+ }
204
+ .switch .thumb{
205
+ position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
206
+ background:#fff; box-shadow: var(--shadow-sm); transition: transform .2s ease;
207
+ }
208
+ .switch input:checked ~ .track{ background: color-mix(in oklab, var(--success) 65%, var(--ink) 8%)}
209
+ .switch input:checked ~ .track .thumb{ transform: translateX(20px) }
210
+
211
+ /* Accordions via <details> */
212
+ details{
213
+ border:1px solid color-mix(in oklab, var(--ink) 10%, transparent);
214
+ border-radius:10px; background: color-mix(in oklab, var(--surface) 94%, transparent);
215
+ padding:10px 12px; box-shadow: var(--shadow-sm);
216
+ }
217
+ details + details{margin-top:10px}
218
+ summary{cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:12px; font-weight:600}
219
+ summary::-webkit-details-marker{display:none}
220
+ .caret{transition: transform .2s ease}
221
+ details[open] .caret{transform: rotate(180deg)}
222
+ .faq p{margin:10px 0 6px}
223
+
224
+ /* Donor wall */
225
+ .donors{display:grid; grid-template-columns:1fr; gap:10px}
226
+ @media (min-width: 620px){ .donors{grid-template-columns: repeat(2,1fr)} }
227
+ .donor{
228
+ border:1px solid color-mix(in oklab, var(--ink) 10%, transparent);
229
+ border-radius:10px; padding:12px; background: color-mix(in oklab, var(--surface) 92%, transparent);
230
+ display:flex; align-items:flex-start; gap:10px;
231
+ }
232
+ .avatar{
233
+ width:38px; height:38px; border-radius:50%;
234
+ background: linear-gradient(145deg, var(--brand), var(--brand-2)); color:#fff; display:grid; place-items:center; font-weight:700;
235
+ box-shadow: var(--shadow-sm)
236
+ }
237
+
238
+ /* Footer */
239
+ footer{margin: 28px 0 40px; color:var(--muted)}
240
+ .legal{border-top:1px dashed color-mix(in oklab, var(--ink) 14%, transparent); padding-top:12px}
241
+
242
+ /* Utility */
243
+ .stack{display:grid; gap:12px}
244
+ .row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
245
+ .grid-2{display:grid; grid-template-columns:1fr; gap:12px}
246
+ @media (min-width: 720px){ .grid-2{grid-template-columns: 1fr 1fr} }
247
+ .muted{color:var(--muted)}
248
+ .center{text-align:center}
249
+ .right{text-align:right}
250
+ </style>
251
+ </head>
252
+ <body>
253
+
254
+ <!-- =========================
255
+ HEADER
256
+ ========================== -->
257
+ <header class="site-header">
258
+ <div class="container header-inner" role="navigation" aria-label="Top">
259
+ <a class="brand" href="/" aria-label="Go to store home">
260
+ <span class="logo" aria-hidden="true">K</span>
261
+ <strong>Kent Island HS Store</strong>
262
+ </a>
263
+ <nav class="row" aria-label="Primary">
264
+ <span class="chip" aria-current="page">Donation</span>
265
+ <a href="#faq">FAQ</a>
266
+ <a href="#contact">Contact</a>
267
+ </nav>
268
+ </div>
269
+ </header>
270
+
271
+ <main>
272
+ <!-- =========================
273
+ HERO
274
+ ========================== -->
275
+ <section class="hero">
276
+ <div class="container hero-grid">
277
+ <div class="hero-card">
278
+ <h1>Donate to Our School Programs</h1>
279
+ <p class="small">100% of your donation supports our teams and activities.</p>
280
+
281
+ <div class="hero-badges">
282
+ <span class="chip">U.S. Cards • Apple Pay • Google Pay</span>
283
+ <span class="chip">Secure Checkout</span>
284
+ <span class="chip">Program-Directed Funds</span>
285
+ </div>
286
+
287
+ <div class="stack" style="margin-top:12px">
288
+ <!-- Progress (design preview uses 62% via --p). Data should be driven server-side later -->
289
+ <div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="62" data-goal="$50,000" data-raised="$31,000">
290
+ <i></i>
291
+ </div>
292
+ <div class="hero-stats" aria-hidden="true">
293
+ <div class="stat"><b>$31,000</b><span>Raised</span></div>
294
+ <div class="stat"><b>$50,000</b><span>Goal</span></div>
295
+ <div class="stat"><b>12 days</b><span>Time Left</span></div>
296
+ </div>
297
+ <div class="row">
298
+ <a class="btn gold" href="#donate">Donate Now</a>
299
+ <a class="btn secondary" href="#why">Why your donation matters</a>
300
+ </div>
301
+ </div>
302
+ </div>
303
+
304
+ <div class="hero-card">
305
+ <h3>Campaign Info</h3>
306
+ <p class="small">This campaign supports Kent Island High School programs for the 2025 season.</p>
307
+ <ul class="small" style="margin:8px 0 0; padding-left:18px">
308
+ <li>Donations are directed to the program you choose.</li>
309
+ <li>Wallets (Apple/Google Pay) available at checkout on supported devices.</li>
310
+ <li>No account required to donate.</li>
311
+ </ul>
312
+ </div>
313
+ </div>
314
+ </section>
315
+
316
+ <!-- =========================
317
+ DONATION FORM + EXPLAINERS
318
+ ========================== -->
319
+ <section id="donate" class="container" aria-labelledby="donate-title" style="margin: 10px 0 18px">
320
+ <div class="two-col">
321
+ <!-- LEFT: Donation widget -->
322
+ <form class="panel" aria-describedby="donate-help">
323
+ <h2 id="donate-title">Make a Donation</h2>
324
+ <p id="donate-help" class="small">Select a program and amount. You’ll complete payment securely at checkout.</p>
325
+
326
+ <!-- Program selection -->
327
+ <div class="field">
328
+ <label class="label" for="program">Choose a <strong>Program</strong> <span class="small muted">(required)</span></label>
329
+ <select id="program" name="program" required aria-required="true">
330
+ <!-- These would be populated from Shopify Metaobjects in production -->
331
+ <option value="" selected disabled>Select a program…</option>
332
+ <option value="football-2025" data-blurb="Equipment, uniforms, travel" data-goal="35000">Football 2025</option>
333
+ <option value="band-2025" data-blurb="Instruments, uniforms, competition fees" data-goal="18000">Band 2025</option>
334
+ <option value="cheer-2025" data-blurb="Uniforms, training, travel" data-goal="12000">Cheer 2025</option>
335
+ </select>
336
+ <p class="help">Funds are credited to the selected program’s budget.</p>
337
+ </div>
338
+
339
+ <!-- Why/How accordions -->
340
+ <div id="why" class="grid-2">
341
+ <details open>
342
+ <summary>Why Donations Are Necessary <span class="caret">▾</span></summary>
343
+ <div class="small">
344
+ <p>Donations allow us to purchase new uniforms, safety equipment, and cover travel for the upcoming season.</p>
345
+ <ul>
346
+ <li>Replace worn gear and uniforms</li>
347
+ <li>Cover competition and travel costs</li>
348
+ <li>Support training & technology needs</li>
349
+ </ul>
350
+ </div>
351
+ </details>
352
+ <details open>
353
+ <summary>How Donations Are Used <span class="caret">▾</span></summary>
354
+ <div class="small">
355
+ <p>Your gift stays with the program you select and supports:</p>
356
+ <ul>
357
+ <li>Equipment & maintenance</li>
358
+ <li>Competition fees & transport</li>
359
+ <li>Weight room upgrades & software</li>
360
+ </ul>
361
+ </div>
362
+ </details>
363
+ </div>
364
+
365
+ <hr style="border:none; border-top:1px solid color-mix(in oklab, var(--ink) 10%, transparent); margin:14px 0">
366
+
367
+ <!-- Amount presets -->
368
+ <div class="field">
369
+ <div class="label">Choose an amount</div>
370
+ <div class="amounts" role="radiogroup" aria-label="Donation amount">
371
+ <div class="chip-radio">
372
+ <input type="radio" name="amount" id="amt-25" value="25" required>
373
+ <label for="amt-25">$25</label>
374
+ </div>
375
+ <div class="chip-radio">
376
+ <input type="radio" name="amount" id="amt-50" value="50">
377
+ <label for="amt-50">$50</label>
378
+ </div>
379
+ <div class="chip-radio">
380
+ <input type="radio" name="amount" id="amt-100" value="100">
381
+ <label for="amt-100">$100</label>
382
+ </div>
383
+ <div class="chip-radio">
384
+ <input type="radio" name="amount" id="amt-250" value="250">
385
+ <label for="amt-250">$250</label>
386
+ </div>
387
+ <div class="chip-radio">
388
+ <input type="radio" name="amount" id="amt-500" value="500">
389
+ <label for="amt-500">$500</label>
390
+ </div>
391
+ <div class="chip-radio">
392
+ <input type="radio" name="amount" id="amt-1000" value="1000">
393
+ <label for="amt-1000">$1,000</label>
394
+ </div>
395
+
396
+ <!-- "Other" option (reveals numeric field via CSS only) -->
397
+ <div class="chip-radio" style="flex: 1 1 auto; min-width: min(320px,100%)">
398
+ <input type="radio" name="amount" id="amt-other" value="other" aria-controls="other-amount" aria-expanded="false">
399
+ <label for="amt-other">Other</label>
400
+ <div class="other-wrap">
401
+ <input class="other-amount" id="other-amount" name="other_amount" type="number" inputmode="decimal" min="5" max="10000" step="1" placeholder="$ Amount (min $5)" aria-label="Enter custom amount">
402
+ </div>
403
+ </div>
404
+ </div>
405
+ <p class="help">Minimum $5. For larger gifts, you can split across programs after checkout.</p>
406
+ </div>
407
+
408
+ <!-- Monthly + fee cover -->
409
+ <div class="grid-2">
410
+ <div class="field">
411
+ <label class="switch">
412
+ <input type="checkbox" name="monthly" id="monthly">
413
+ <span class="track" aria-hidden="true"><span class="thumb"></span></span>
414
+ <span>Make it <strong>monthly</strong> <span class="small muted">(cancel anytime)</span></span>
415
+ </label>
416
+ </div>
417
+ <div class="field">
418
+ <label class="switch">
419
+ <input type="checkbox" name="cover_fees" id="cover-fees">
420
+ <span class="track" aria-hidden="true"><span class="thumb"></span></span>
421
+ <span>Add a little extra to <strong>cover fees</strong> <span class="small muted">(≈ 2.9% + $0.30)</span></span>
422
+ </label>
423
+ </div>
424
+ </div>
425
+
426
+ <!-- Message + privacy -->
427
+ <div class="grid-2">
428
+ <div class="field">
429
+ <label class="label" for="msg">Message to the program <span class="small muted">(optional, public)</span></label>
430
+ <textarea id="msg" name="message" rows="3" maxlength="180" placeholder="Say something encouraging…"></textarea>
431
+ <p class="help"><span id="msg-help">Up to 180 characters. Your message may appear on our donor wall.</span></p>
432
+ </div>
433
+ <div class="field">
434
+ <label class="switch">
435
+ <input type="checkbox" name="anonymous" id="anon">
436
+ <span class="track" aria-hidden="true"><span class="thumb"></span></span>
437
+ <span>Hide my <strong>name</strong> on public donor lists</span>
438
+ </label>
439
+ <p class="help">We’ll still email you a receipt.</p>
440
+ </div>
441
+ </div>
442
+
443
+ <!-- Receipt email (kept light for UX) -->
444
+ <div class="field">
445
+ <label class="label" for="email">Receipt email <span class="small muted">(required at checkout)</span></label>
446
+ <input type="email" id="email" name="email" placeholder="you@example.com" autocomplete="email">
447
+ <p class="help">Final receipt is issued after checkout. Email collected here is for preview and support.</p>
448
+ </div>
449
+
450
+ <!-- Submit -->
451
+ <div class="row" style="justify-content:space-between; align-items:center; margin-top:6px">
452
+ <div class="small muted">Apple Pay, Google Pay, and cards accepted at checkout.</div>
453
+ <button class="btn gold" type="submit" aria-label="Proceed to secure checkout">Donate Now</button>
454
+ </div>
455
+
456
+ <!-- LEGAL NOTE / EIN -->
457
+ <p class="small muted" style="margin-top:10px">
458
+ Donations are processed on behalf of <strong>[Booster/Org Legal Name]</strong>, EIN <strong>[xx-xxxxxxx]</strong>.
459
+ Gifts are tax-deductible to the extent allowed by law. <a href="#legal">Terms</a> · <a href="#privacy">Privacy</a>
460
+ </p>
461
+
462
+ <!-- (DEV HOOKS)
463
+ On submit, pass line-item properties:
464
+ program_slug, program_title, message_public, anonymous, frequency (one_time|monthly), fee_cover (true|false), entered_amount
465
+ If using a donation app, map these to the app’s data attributes or JS API.
466
+ -->
467
+ </form>
468
+
469
+ <!-- RIGHT: Social proof & FAQ -->
470
+ <aside class="stack">
471
+ <div class="panel">
472
+ <h3>Recent Donors</h3>
473
+ <div class="donors" aria-live="polite">
474
+ <div class="donor">
475
+ <div class="avatar" aria-hidden="true">A</div>
476
+ <div>
477
+ <strong>Alex M.</strong> donated <b>$50</b>
478
+ <div class="small muted">to Football 2025 · 2h ago</div>
479
+ <div class="small">“Go Buccaneers!”</div>
480
+ </div>
481
+ </div>
482
+ <div class="donor">
483
+ <div class="avatar" aria-hidden="true">J</div>
484
+ <div>
485
+ <strong>Jordan K.</strong> donated <b>$250</b>
486
+ <div class="small muted">to Band 2025 · 6h ago</div>
487
+ <div class="small">“Proud of our marching band!”</div>
488
+ </div>
489
+ </div>
490
+ <div class="donor">
491
+ <div class="avatar" aria-hidden="true">S</div>
492
+ <div>
493
+ <strong>Sam R.</strong> donated <b>$100</b>
494
+ <div class="small muted">to Cheer 2025 · 1d ago</div>
495
+ </div>
496
+ </div>
497
+ <div class="donor">
498
+ <div class="avatar" aria-hidden="true">M</div>
499
+ <div>
500
+ <strong>Maria G.</strong> donated <b>$25</b>
501
+ <div class="small muted">to Football 2025 · 1d ago</div>
502
+ </div>
503
+ </div>
504
+ </div>
505
+ </div>
506
+
507
+ <div id="faq" class="panel faq">
508
+ <h3>FAQ</h3>
509
+ <details>
510
+ <summary>Is my donation tax-deductible? <span class="caret">▾</span></summary>
511
+ <p>Yes, if donations are processed for a registered nonprofit or booster with a valid EIN (listed below). A receipt will be emailed after checkout.</p>
512
+ </details>
513
+ <details>
514
+ <summary>How do goals and deadlines work? <span class="caret">▾</span></summary>
515
+ <p>Each program may set a fundraising goal and end date. After the deadline, you can still donate but progress bars are frozen.</p>
516
+ </details>
517
+ <details>
518
+ <summary>Which payment methods are accepted? <span class="caret">▾</span></summary>
519
+ <p>Major U.S. cards, Apple Pay, Google Pay, and Shop Pay on supported devices/browsers.</p>
520
+ </details>
521
+ </div>
522
+ </aside>
523
+ </div>
524
+ </section>
525
+
526
+ <!-- =========================
527
+ FOOTER
528
+ ========================== -->
529
+ <footer class="container" id="legal">
530
+ <div class="legal small">
531
+ <p id="contact"><strong>Contact:</strong> boosters@example.org • (555) 555-1212</p>
532
+ <p><strong>Organization:</strong> [Booster/Org Legal Name], EIN [xx-xxxxxxx], [Address, City, ST ZIP]</p>
533
+ <p>Refunds are handled per <a href="#terms">Terms</a>. Privacy practices are described in our <a href="#privacy">Privacy Policy</a>.</p>
534
+ </div>
535
+ <!-- (DEV NOTE) This page is a design scaffold.
536
+ • Replace static donor wall with dynamic feed.
537
+ • Drive progress values and countdown from server/app.
538
+ • Map <select id="program"> to Shopify metaobjects.
539
+ • On submit, route to checkout (donation app or tipping relabel).
540
+ -->
541
+ </footer>
542
+ </main>
543
+ </body>
544
+ </html>