Commit a1fc545
Changed files (4)
cmd/web/handlers.go
@@ -77,8 +77,31 @@ func submitForm(w http.ResponseWriter, r *http.Request) {
// processSubmit handles the form submission and schedules the email reminder
func processSubmit(w http.ResponseWriter, r *http.Request) {
w.Header().Add("Server", "buylater.email")
- w.WriteHeader(http.StatusCreated)
- w.Write([]byte("Form submitted! Check your email for a confirmation link to activate your reminder."))
+
+ // Parse templates with inheritance
+ ts, err := template.ParseFiles(
+ "./ui/html/layouts/base.tmpl",
+ "./ui/html/pages/complete.tmpl",
+ )
+ if err != nil {
+ log.Println(err.Error())
+ http.Error(w, "Internal Server Error", 500)
+ return
+ }
+
+ // Prepare template data
+ data := PageData{
+ Title: "Submission Complete",
+ ServiceName: "buylater.email",
+ Content: nil,
+ }
+
+ // Execute template
+ err = ts.ExecuteTemplate(w, "base", data)
+ if err != nil {
+ log.Println(err.Error())
+ http.Error(w, "Internal Server Error", 500)
+ }
}
// confirmWithToken handles magic link confirmation with token validation
@@ -110,5 +133,29 @@ func isValidToken(token string) bool {
// about displays information about the buylater.email service
func about(w http.ResponseWriter, r *http.Request) {
w.Header().Add("Server", "buylater.email")
- w.Write([]byte("About - buylater.email helps you delay purchases and buy more intentionally"))
+
+ // Parse templates with inheritance
+ ts, err := template.ParseFiles(
+ "./ui/html/layouts/base.tmpl",
+ "./ui/html/pages/about.tmpl",
+ )
+ if err != nil {
+ log.Println(err.Error())
+ http.Error(w, "Internal Server Error", 500)
+ return
+ }
+
+ // Prepare template data
+ data := PageData{
+ Title: "About",
+ ServiceName: "buylater.email",
+ Content: nil,
+ }
+
+ // Execute template
+ err = ts.ExecuteTemplate(w, "base", data)
+ if err != nil {
+ log.Println(err.Error())
+ http.Error(w, "Internal Server Error", 500)
+ }
}
docs/todo/task_1.9.md
@@ -21,14 +21,16 @@ Following Let's Go Chapter 2.9, we need to serve static assets like CSS for styl
## Acceptance Criteria
-- [ ] Configure http.FileServer to serve static files from ui/static/
-- [ ] Add route handler for /static/ URL pattern
-- [ ] Create CSS stylesheet for buylater.email branding and layout
-- [ ] Implement responsive design for mobile and desktop
-- [ ] Add minimal JavaScript for form validation and UX enhancements
-- [ ] Include favicon and any necessary images
-- [ ] Ensure proper MIME types for all static file types
-- [ ] Add cache headers for static assets
+- [x] Configure http.FileServer to serve static files from ui/static/
+- [x] Add route handler for /static/ URL pattern
+- [x] Create CSS stylesheet for buylater.email branding and layout
+- [x] Implement responsive design for mobile and desktop
+- [x] ~~Add minimal JavaScript for form validation and UX enhancements~~ (Removed - HTML5 validation sufficient)
+- [x] Include favicon and any necessary images
+- [x] Ensure proper MIME types for all static file types
+- [x] Add cache headers for static assets
+- [ ] Create submission complete template and update POST /submit handler
+- [ ] Create proper About page template with service information
## Technical Requirements
ui/html/pages/about.tmpl
@@ -0,0 +1,339 @@
+{{template "base" .}}
+
+{{define "main"}}
+<div class="about-page">
+ <div class="about-header">
+ <h1>About buylater.email</h1>
+ <p class="about-subtitle">Restoring friction to the buying process in an age of instant gratification</p>
+ </div>
+
+ <div class="about-content">
+ <section class="service-explanation">
+ <h2>What is buylater.email?</h2>
+ <p>
+ buylater.email is a simple service designed to help you make more intentional purchasing decisions.
+ In our culture of one-click buying and instant gratification, we've lost the natural pause that
+ comes with thoughtful consumption.
+ </p>
+ <p>
+ Our service adds back that crucial thinking time by scheduling email reminders for items you're
+ considering purchasing. Instead of buying impulsively, you can schedule a reminder to reconsider
+ the purchase after a waiting period of your choice.
+ </p>
+ </section>
+
+ <section class="philosophy">
+ <h2>Our Philosophy</h2>
+ <div class="philosophy-grid">
+ <div class="philosophy-item">
+ <h3>🛒 Buy Less, Buy Better</h3>
+ <p>
+ Every purchase should be intentional. By adding time between desire and action,
+ you can distinguish between wants and needs, leading to more satisfying purchases.
+ </p>
+ </div>
+ <div class="philosophy-item">
+ <h3>⏳ Delayed Gratification</h3>
+ <p>
+ Research shows that delaying purchases often reveals that we don't actually need
+ or want many items we initially felt compelled to buy.
+ </p>
+ </div>
+ <div class="philosophy-item">
+ <h3>🎯 Intentional Consumption</h3>
+ <p>
+ Move away from impulse buying toward thoughtful consumption that aligns with
+ your values, needs, and long-term goals.
+ </p>
+ </div>
+ <div class="philosophy-item">
+ <h3>💡 Mindful Decision Making</h3>
+ <p>
+ Create space for reflection in your purchasing decisions. Ask yourself:
+ "Do I still want this after thinking about it?"
+ </p>
+ </div>
+ </div>
+ </section>
+
+ <section class="how-it-works">
+ <h2>How It Works</h2>
+ <div class="workflow-steps">
+ <div class="workflow-step">
+ <div class="step-number">1</div>
+ <div class="step-content">
+ <h3>Submit a Product URL</h3>
+ <p>
+ Found something you want to buy? Instead of purchasing immediately,
+ paste the product URL into our form along with your email address.
+ </p>
+ </div>
+ </div>
+
+ <div class="workflow-step">
+ <div class="step-number">2</div>
+ <div class="step-content">
+ <h3>Choose Your Waiting Period</h3>
+ <p>
+ Select how long you'd like to wait: 3 days for quick decisions,
+ 2 weeks for bigger purchases, or up to a month for major items.
+ </p>
+ </div>
+ </div>
+
+ <div class="workflow-step">
+ <div class="step-number">3</div>
+ <div class="step-content">
+ <h3>Confirm Your Reminder</h3>
+ <p>
+ We'll send you a confirmation email with a magic link. Click it to
+ activate your reminder and confirm your email address.
+ </p>
+ </div>
+ </div>
+
+ <div class="workflow-step">
+ <div class="step-number">4</div>
+ <div class="step-content">
+ <h3>Receive Your Reminder</h3>
+ <p>
+ When your chosen waiting period ends, we'll email you the product
+ link and ask: "Do you still want to buy this?"
+ </p>
+ </div>
+ </div>
+
+ <div class="workflow-step">
+ <div class="step-number">5</div>
+ <div class="step-content">
+ <h3>Make an Intentional Choice</h3>
+ <p>
+ With time for reflection, decide whether the purchase still makes sense.
+ Many users find they no longer want the item!
+ </p>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <section class="service-principles">
+ <h2>Our Principles</h2>
+ <div class="principles-list">
+ <div class="principle">
+ <h3>🔒 Privacy First</h3>
+ <p>No passwords required. No tracking. No data sales. We only store what's necessary to send your reminders.</p>
+ </div>
+ <div class="principle">
+ <h3>✨ Simplicity</h3>
+ <p>No app to download. No account to manage. Just email reminders when you need them.</p>
+ </div>
+ <div class="principle">
+ <h3>🎯 Single Purpose</h3>
+ <p>We do one thing well: help you pause before purchasing. No upsells, no ads, no distractions.</p>
+ </div>
+ </div>
+ </section>
+
+ <section class="get-started">
+ <h2>Ready to Try Intentional Shopping?</h2>
+ <p>
+ Start by scheduling a reminder for something you're considering buying.
+ Experience the power of the pause.
+ </p>
+ <a href="/submit" class="cta-button">Schedule Your First Reminder</a>
+ </section>
+ </div>
+</div>
+
+<style>
+.about-page {
+ max-width: 800px;
+ margin: 0 auto;
+}
+
+.about-header {
+ text-align: center;
+ margin-bottom: 3rem;
+}
+
+.about-header h1 {
+ color: #2c3e50;
+ font-size: 2.5rem;
+ margin-bottom: 1rem;
+}
+
+.about-subtitle {
+ color: #6c757d;
+ font-size: 1.2rem;
+ font-style: italic;
+ max-width: 600px;
+ margin: 0 auto;
+}
+
+.about-content section {
+ margin-bottom: 4rem;
+}
+
+.about-content h2 {
+ color: #2c3e50;
+ margin-bottom: 1.5rem;
+ font-size: 1.8rem;
+}
+
+.about-content p {
+ color: #555;
+ line-height: 1.7;
+ margin-bottom: 1rem;
+}
+
+.philosophy-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+ gap: 2rem;
+ margin-top: 2rem;
+}
+
+.philosophy-item {
+ background: white;
+ padding: 1.5rem;
+ border-radius: 8px;
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.philosophy-item h3 {
+ color: #2c3e50;
+ margin-bottom: 0.5rem;
+ font-size: 1.1rem;
+}
+
+.philosophy-item p {
+ margin: 0;
+ font-size: 0.95rem;
+}
+
+.workflow-steps {
+ display: grid;
+ gap: 2rem;
+ margin-top: 2rem;
+}
+
+.workflow-step {
+ display: flex;
+ align-items: flex-start;
+ gap: 1.5rem;
+}
+
+.step-number {
+ width: 50px;
+ height: 50px;
+ background-color: #2c3e50;
+ color: white;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-weight: bold;
+ font-size: 1.2rem;
+ flex-shrink: 0;
+}
+
+.step-content h3 {
+ color: #2c3e50;
+ margin-bottom: 0.5rem;
+ font-size: 1.2rem;
+}
+
+.step-content p {
+ margin: 0;
+ color: #555;
+}
+
+.principles-list {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ margin-top: 2rem;
+}
+
+.principle {
+ background: white;
+ padding: 1.5rem;
+ border-radius: 8px;
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.principle h3 {
+ color: #2c3e50;
+ margin-bottom: 0.5rem;
+ font-size: 1.1rem;
+}
+
+.principle p {
+ margin: 0;
+ font-size: 0.95rem;
+}
+
+.get-started {
+ text-align: center;
+ background: white;
+ padding: 2.5rem;
+ border-radius: 12px;
+ box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+}
+
+.get-started h2 {
+ margin-bottom: 1rem;
+}
+
+.get-started p {
+ margin-bottom: 1.5rem;
+ font-size: 1.1rem;
+}
+
+.cta-button {
+ display: inline-block;
+ background-color: #2c3e50;
+ color: white;
+ padding: 1rem 2rem;
+ text-decoration: none;
+ border-radius: 8px;
+ font-weight: 600;
+ font-size: 1.1rem;
+ transition: background-color 0.2s;
+}
+
+.cta-button:hover {
+ background-color: #34495e;
+}
+
+@media (max-width: 768px) {
+ .about-header h1 {
+ font-size: 2rem;
+ }
+
+ .about-subtitle {
+ font-size: 1.1rem;
+ }
+
+ .philosophy-grid,
+ .principles-list {
+ grid-template-columns: 1fr;
+ gap: 1.5rem;
+ }
+
+ .workflow-step {
+ flex-direction: column;
+ text-align: center;
+ gap: 1rem;
+ }
+
+ .step-number {
+ margin: 0 auto;
+ }
+
+ .get-started {
+ padding: 2rem 1.5rem;
+ }
+}
+</style>
+{{end}}
\ No newline at end of file
ui/html/pages/complete.tmpl
@@ -0,0 +1,245 @@
+{{template "base" .}}
+
+{{define "main"}}
+<div class="complete-page">
+ <div class="complete-header">
+ <div class="success-icon">✓</div>
+ <h1>Reminder Scheduled Successfully!</h1>
+ <p>We've received your purchase reminder request.</p>
+ </div>
+
+ <div class="complete-content">
+ <div class="next-steps">
+ <h2>What happens next?</h2>
+ <div class="step-timeline">
+ <div class="step">
+ <div class="step-number">1</div>
+ <div class="step-content">
+ <h3>Check your email</h3>
+ <p>We've sent a confirmation email to your address with a magic activation link.</p>
+ </div>
+ </div>
+
+ <div class="step">
+ <div class="step-number">2</div>
+ <div class="step-content">
+ <h3>Activate your reminder</h3>
+ <p>Click the link in the email to confirm and activate your purchase reminder.</p>
+ </div>
+ </div>
+
+ <div class="step">
+ <div class="step-number">3</div>
+ <div class="step-content">
+ <h3>Receive your reminder</h3>
+ <p>We'll email you at the scheduled time to reconsider your purchase decision.</p>
+ </div>
+ </div>
+
+ <div class="step">
+ <div class="step-number">4</div>
+ <div class="step-content">
+ <h3>Make an intentional choice</h3>
+ <p>Decide whether you still want or need the item after the waiting period.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="additional-info">
+ <div class="info-card">
+ <h3>📧 Didn't receive the email?</h3>
+ <p>Check your spam folder or wait a few minutes. Confirmation emails are usually delivered within 5 minutes.</p>
+ </div>
+
+ <div class="info-card">
+ <h3>⏰ Timeline expectations</h3>
+ <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>
+ </div>
+ </div>
+
+ <div class="complete-actions">
+ <a href="/" class="action-button primary">Return Home</a>
+ <a href="/submit" class="action-button secondary">Schedule Another Reminder</a>
+ </div>
+ </div>
+</div>
+
+<style>
+.complete-page {
+ max-width: 700px;
+ margin: 0 auto;
+ text-align: center;
+}
+
+.complete-header {
+ margin-bottom: 3rem;
+}
+
+.success-icon {
+ width: 80px;
+ height: 80px;
+ background-color: #28a745;
+ color: white;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 2.5rem;
+ font-weight: bold;
+ margin: 0 auto 1.5rem;
+}
+
+.complete-header h1 {
+ color: #2c3e50;
+ margin-bottom: 0.5rem;
+ font-size: 2rem;
+}
+
+.complete-header p {
+ color: #6c757d;
+ font-size: 1.1rem;
+}
+
+.complete-content {
+ text-align: left;
+}
+
+.next-steps {
+ margin-bottom: 3rem;
+}
+
+.next-steps h2 {
+ color: #2c3e50;
+ text-align: center;
+ margin-bottom: 2rem;
+}
+
+.step-timeline {
+ display: grid;
+ gap: 2rem;
+}
+
+.step {
+ display: flex;
+ align-items: flex-start;
+ gap: 1rem;
+}
+
+.step-number {
+ width: 40px;
+ height: 40px;
+ background-color: #2c3e50;
+ color: white;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-weight: bold;
+ flex-shrink: 0;
+}
+
+.step-content h3 {
+ color: #2c3e50;
+ margin-bottom: 0.5rem;
+}
+
+.step-content p {
+ color: #6c757d;
+ line-height: 1.6;
+}
+
+.additional-info {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 1.5rem;
+ margin-bottom: 3rem;
+}
+
+.info-card {
+ background: white;
+ padding: 1.5rem;
+ border-radius: 8px;
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.info-card h3 {
+ color: #2c3e50;
+ margin-bottom: 0.5rem;
+ font-size: 1rem;
+}
+
+.info-card p {
+ color: #6c757d;
+ line-height: 1.6;
+ margin: 0;
+}
+
+.complete-actions {
+ display: flex;
+ gap: 1rem;
+ justify-content: center;
+ flex-wrap: wrap;
+}
+
+.action-button {
+ padding: 0.75rem 1.5rem;
+ text-decoration: none;
+ border-radius: 6px;
+ font-weight: 500;
+ transition: all 0.2s;
+}
+
+.action-button.primary {
+ background-color: #2c3e50;
+ color: white;
+}
+
+.action-button.primary:hover {
+ background-color: #34495e;
+}
+
+.action-button.secondary {
+ background-color: transparent;
+ color: #2c3e50;
+ border: 2px solid #2c3e50;
+}
+
+.action-button.secondary:hover {
+ background-color: #2c3e50;
+ color: white;
+}
+
+@media (max-width: 768px) {
+ .complete-header h1 {
+ font-size: 1.5rem;
+ }
+
+ .success-icon {
+ width: 60px;
+ height: 60px;
+ font-size: 2rem;
+ }
+
+ .additional-info {
+ grid-template-columns: 1fr;
+ gap: 1rem;
+ }
+
+ .info-card {
+ padding: 1rem;
+ }
+
+ .complete-actions {
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .action-button {
+ width: 100%;
+ max-width: 250px;
+ text-align: center;
+ }
+}
+</style>
+{{end}}
\ No newline at end of file