added self sign up and email verification

SPEC.md

@@ -0,0 +1,140 @@
+# Transcribe App Specification
+
+## Project Overview
+- **Name**: Transcribe App
+- **Type**: Web Application (FastAPI + Vanilla JS)
+- **Core Functionality**: Voice recording/transcription with AI processing and email delivery
+- **Target Users**: Users who need to transcribe voice notes and receive processed text via email
+
+## Tech Stack
+- **Backend**: FastAPI (Python)
+- **Speech-to-Text**: OpenAI Whisper API
+- **AI Processing**: OpenAI GPT-4o
+- **Email**: SMTP with environment variables
+- **Frontend**: Vanilla HTML/CSS/JS
+
+## UI/UX Specification
+
+### Layout Structure
+- Single page application
+- Centered content container (max-width: 600px)
+- Sections: Header, Upload/Record area, Email input, Status display
+
+### Visual Design
+
+#### Color Palette
+- **Background**: #000000 (black)
+- **Primary Text**: #FFFFFF (white)
+- **Secondary Text**: #888888 (gray)
+- **Accent**: #FFFFFF (white)
+- **Border**: #333333 (dark gray)
+- **Hover/Active**: #1A1A1A (near black)
+- **Success**: #00FF00 (green)
+- **Error**: #FF0000 (red)
+
+#### Typography
+- **Font Family**: "JetBrains Mono", monospace (Google Fonts)
+- **Heading**: 24px, bold
+- **Body**: 14px, regular
+- **Labels**: 12px, uppercase, letter-spacing: 2px
+
+#### Spacing
+- Container padding: 40px
+- Section gap: 30px
+- Element gap: 16px
+
+### Components
+
+#### Drop Zone
+- Dashed border (#333333)
+- Height: 200px
+- Border radius: 8px
+- States: default, hover (border: #FFFFFF), dragover (background: #1A1A1A)
+- Icon: microphone SVG
+- Text: "MP3 hierher ziehen oder klicken zum Hochladen"
+
+#### Record Button
+- Circular, 80px diameter
+- White border, transparent background
+- Microphone icon inside
+- States: default, recording (pulsing red animation), disabled
+- Text below: "Aufnahme starten" / "Aufnahme stoppen"
+
+#### Email Input
+- Full width text input
+- Black background, white border
+- Placeholder: "E-MAIL-ADRESSE"
+- Email validation indicator
+
+#### Process Indicator
+- Steps displayed vertically:
+  1. "Hochladen..." / "✓ Hochgeladen"
+  2. "Transkribieren..." / "✓ Transkribiert"
+  3. "KI-Verarbeitung..." / "✓ Verarbeitet"
+  4. "E-Mail senden..." / "✓ Gesendet"
+- Each step with icon, timestamp
+
+#### Send Button
+- Full width, white background, black text
+- Height: 48px
+- States: default, hover (gray #CCCCCC), disabled, loading
+
+## Functionality Specification
+
+### Core Features
+
+#### 1. File Upload (Drag & Drop)
+- Accept only .mp3 files
+- Max file size: 25MB
+- Show progress during upload
+- Validate file type before upload
+
+#### 2. Voice Recording
+- Use MediaRecorder API (browser)
+- Record in webm/opus format (convert to mp3 on server)
+- Show recording duration timer
+- Playback recorded audio before submission
+
+#### 3. Transcription
+- Use OpenAI Whisper API
+- Support German language
+- Return timestamped segments
+
+#### 4. AI Processing
+- Use OpenAI GPT-4o
+- Improve transcription:
+  - Fix grammar and spelling
+  - Add proper punctuation
+  - Structure into paragraphs
+  - Maintain original meaning
+
+#### 5. Email Delivery
+- Send processed text via SMTP
+- Include original and processed text
+- Email format: plain text
+
+### API Endpoints
+- `POST /upload` - Upload audio file
+- `POST /transcribe` - Transcribe audio
+- `POST /process` - AI process text
+- `POST /send-email` - Send email
+
+### Environment Variables
+- OPENAI_API_KEY
+- SMTP_HOST
+- SMTP_PORT
+- SMTP_USER
+- SMTP_PASSWORD
+- SMTP_FROM
+
+## Acceptance Criteria
+
+1. ✓ User can drag & drop MP3 file onto drop zone
+2. ✓ User can click to browse and select MP3 file
+3. ✓ User can start and stop voice recording
+4. ✓ User can play back recording before submitting
+5. ✓ User can enter email address
+6. ✓ App shows step-by-step progress
+7. ✓ Final email is sent with processed text
+8. ✓ Clean black/white design throughout
+9. ✓ Responsive on mobile devices