1{{template "base" .}}
  2
  3{{define "main"}}
  4<div class="complete-page">
  5    <div class="complete-header">
  6        <div class="success-icon">✓</div>
  7        <h1>Reminder Scheduled Successfully!</h1>
  8        <p>We've received your purchase reminder request.</p>
  9    </div>
 10
 11    <div class="complete-content">
 12        <div class="next-steps">
 13            <h2>What happens next?</h2>
 14            <div class="step-timeline">
 15                <div class="step">
 16                    <div class="step-number">1</div>
 17                    <div class="step-content">
 18                        <h3>Check your email</h3>
 19                        <p>We've sent a confirmation email to your address with a magic activation link.</p>
 20                    </div>
 21                </div>
 22                
 23                <div class="step">
 24                    <div class="step-number">2</div>
 25                    <div class="step-content">
 26                        <h3>Activate your reminder</h3>
 27                        <p>Click the link in the email to confirm and activate your purchase reminder.</p>
 28                    </div>
 29                </div>
 30                
 31                <div class="step">
 32                    <div class="step-number">3</div>
 33                    <div class="step-content">
 34                        <h3>Receive your reminder</h3>
 35                        <p>We'll email you at the scheduled time to reconsider your purchase decision.</p>
 36                    </div>
 37                </div>
 38                
 39                <div class="step">
 40                    <div class="step-number">4</div>
 41                    <div class="step-content">
 42                        <h3>Make an intentional choice</h3>
 43                        <p>Decide whether you still want or need the item after the waiting period.</p>
 44                    </div>
 45                </div>
 46            </div>
 47        </div>
 48
 49        <div class="additional-info">
 50            <div class="info-card">
 51                <h3>📧 Didn't receive the email?</h3>
 52                <p>Check your spam folder or wait a few minutes. Confirmation emails are usually delivered within 5 minutes.</p>
 53            </div>
 54            
 55            <div class="info-card">
 56                <h3>⏰ Timeline expectations</h3>
 57                <p>Your reminder will be sent based on the delay you selected. The email will include the original product link and context to help you make an informed decision.</p>
 58            </div>
 59        </div>
 60
 61        <div class="complete-actions">
 62            <a href="/" class="action-button primary">Return Home</a>
 63            <a href="/submit" class="action-button secondary">Schedule Another Reminder</a>
 64        </div>
 65    </div>
 66</div>
 67
 68<style>
 69.complete-page {
 70    max-width: 700px;
 71    margin: 0 auto;
 72    text-align: center;
 73}
 74
 75.complete-header {
 76    margin-bottom: 3rem;
 77}
 78
 79.success-icon {
 80    width: 80px;
 81    height: 80px;
 82    background-color: #28a745;
 83    color: white;
 84    border-radius: 50%;
 85    display: flex;
 86    align-items: center;
 87    justify-content: center;
 88    font-size: 2.5rem;
 89    font-weight: bold;
 90    margin: 0 auto 1.5rem;
 91}
 92
 93.complete-header h1 {
 94    color: #2c3e50;
 95    margin-bottom: 0.5rem;
 96    font-size: 2rem;
 97}
 98
 99.complete-header p {
100    color: #6c757d;
101    font-size: 1.1rem;
102}
103
104.complete-content {
105    text-align: left;
106}
107
108.next-steps {
109    margin-bottom: 3rem;
110}
111
112.next-steps h2 {
113    color: #2c3e50;
114    text-align: center;
115    margin-bottom: 2rem;
116}
117
118.step-timeline {
119    display: grid;
120    gap: 2rem;
121}
122
123.step {
124    display: flex;
125    align-items: flex-start;
126    gap: 1rem;
127}
128
129.step-number {
130    width: 40px;
131    height: 40px;
132    background-color: #2c3e50;
133    color: white;
134    border-radius: 50%;
135    display: flex;
136    align-items: center;
137    justify-content: center;
138    font-weight: bold;
139    flex-shrink: 0;
140}
141
142.step-content h3 {
143    color: #2c3e50;
144    margin-bottom: 0.5rem;
145}
146
147.step-content p {
148    color: #6c757d;
149    line-height: 1.6;
150}
151
152.additional-info {
153    display: grid;
154    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
155    gap: 1.5rem;
156    margin-bottom: 3rem;
157}
158
159.info-card {
160    background: white;
161    padding: 1.5rem;
162    border-radius: 8px;
163    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
164}
165
166.info-card h3 {
167    color: #2c3e50;
168    margin-bottom: 0.5rem;
169    font-size: 1rem;
170}
171
172.info-card p {
173    color: #6c757d;
174    line-height: 1.6;
175    margin: 0;
176}
177
178.complete-actions {
179    display: flex;
180    gap: 1rem;
181    justify-content: center;
182    flex-wrap: wrap;
183}
184
185.action-button {
186    padding: 0.75rem 1.5rem;
187    text-decoration: none;
188    border-radius: 6px;
189    font-weight: 500;
190    transition: all 0.2s;
191}
192
193.action-button.primary {
194    background-color: #2c3e50;
195    color: white;
196}
197
198.action-button.primary:hover {
199    background-color: #34495e;
200}
201
202.action-button.secondary {
203    background-color: transparent;
204    color: #2c3e50;
205    border: 2px solid #2c3e50;
206}
207
208.action-button.secondary:hover {
209    background-color: #2c3e50;
210    color: white;
211}
212
213@media (max-width: 768px) {
214    .complete-header h1 {
215        font-size: 1.5rem;
216    }
217    
218    .success-icon {
219        width: 60px;
220        height: 60px;
221        font-size: 2rem;
222    }
223    
224    .additional-info {
225        grid-template-columns: 1fr;
226        gap: 1rem;
227    }
228    
229    .info-card {
230        padding: 1rem;
231    }
232    
233    .complete-actions {
234        flex-direction: column;
235        align-items: center;
236    }
237    
238    .action-button {
239        width: 100%;
240        max-width: 250px;
241        text-align: center;
242    }
243}
244</style>
245{{end}}