1{{template "base" .}}
  2
  3{{define "main"}}
  4<div class="submit-page">
  5    <div class="submit-header">
  6        <h1>Schedule Your Purchase Reminder</h1>
  7        <p>Add friction to your buying process. Give yourself time to think it over.</p>
  8    </div>
  9
 10    <div class="submit-form-container">
 11        <form action="/submit" method="POST" class="submit-form">
 12            <div class="form-group">
 13                <label for="email">Your Email Address</label>
 14                <input type="email" id="email" name="email" required placeholder="you@example.com">
 15                <small>We'll send your reminder to this address. No spam, ever.</small>
 16            </div>
 17            
 18            <div class="form-group">
 19                <label for="url">Product URL</label>
 20                <input type="url" id="url" name="url" required placeholder="https://example.com/product">
 21                <small>Paste the link to the item you're considering buying</small>
 22            </div>
 23            
 24            <div class="form-group">
 25                <label for="delay">Remind me in:</label>
 26                <select id="delay" name="delay">
 27                    <option value="3days">3 days</option>
 28                    <option value="1week">1 week</option>
 29                    <option value="2weeks" selected>2 weeks</option>
 30                    <option value="1month">1 month</option>
 31                </select>
 32                <small>How long do you want to wait before being reminded?</small>
 33            </div>
 34            
 35            <button type="submit" class="submit-button">Schedule My Reminder</button>
 36        </form>
 37        
 38        <div class="submit-info">
 39            <h3>What happens next?</h3>
 40            <ol>
 41                <li>You'll receive a confirmation email with a magic link</li>
 42                <li>Click the link to activate your reminder</li>
 43                <li>We'll email you when it's time to reconsider the purchase</li>
 44                <li>Decide then whether you still want or need the item</li>
 45            </ol>
 46        </div>
 47    </div>
 48</div>
 49
 50<style>
 51.submit-page {
 52    max-width: 600px;
 53    margin: 0 auto;
 54}
 55
 56.submit-header {
 57    text-align: center;
 58    margin-bottom: 3rem;
 59}
 60
 61.submit-header h1 {
 62    color: #2c3e50;
 63    margin-bottom: 0.5rem;
 64}
 65
 66.submit-header p {
 67    color: #6c757d;
 68    font-size: 1.1rem;
 69}
 70
 71.submit-form-container {
 72    display: grid;
 73    gap: 3rem;
 74}
 75
 76.submit-form {
 77    background: white;
 78    padding: 2rem;
 79    border-radius: 8px;
 80    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 81}
 82
 83.form-group {
 84    margin-bottom: 1.5rem;
 85}
 86
 87.form-group label {
 88    display: block;
 89    font-weight: 600;
 90    color: #2c3e50;
 91    margin-bottom: 0.5rem;
 92}
 93
 94.form-group input,
 95.form-group select {
 96    width: 100%;
 97    padding: 0.75rem;
 98    border: 2px solid #e9ecef;
 99    border-radius: 4px;
100    font-size: 1rem;
101    transition: border-color 0.2s;
102}
103
104.form-group input:focus,
105.form-group select:focus {
106    outline: none;
107    border-color: #2c3e50;
108}
109
110.form-group small {
111    display: block;
112    margin-top: 0.25rem;
113    color: #6c757d;
114    font-size: 0.9rem;
115}
116
117.submit-button {
118    width: 100%;
119    background-color: #2c3e50;
120    color: white;
121    padding: 1rem 2rem;
122    border: none;
123    border-radius: 8px;
124    font-weight: 600;
125    font-size: 1.1rem;
126    cursor: pointer;
127    transition: background-color 0.2s;
128}
129
130.submit-button:hover {
131    background-color: #34495e;
132}
133
134.submit-info {
135    background: white;
136    padding: 2rem;
137    border-radius: 8px;
138    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
139}
140
141.submit-info h3 {
142    color: #2c3e50;
143    margin-bottom: 1rem;
144}
145
146.submit-info ol {
147    padding-left: 1.2rem;
148}
149
150.submit-info li {
151    margin-bottom: 0.5rem;
152    line-height: 1.6;
153}
154
155@media (max-width: 768px) {
156    .submit-form,
157    .submit-info {
158        padding: 1.5rem;
159    }
160    
161    .submit-form-container {
162        gap: 2rem;
163    }
164}
165</style>
166{{end}}