Quick Transcript

<!-- Favicons and App Icons -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/icons/favicon-16x16.png">
<link rel="manifest" href="/static/icons/site.webmanifest">
<link rel="icon" href="/static/icons/favicon.ico" sizes="any"> <!-- Needs favicon.ico -->


<!-- Custom CSS -->
<link href="/static/css/style.css" rel="stylesheet">

<style>
    .feature-info-box {
        display: flex;
        background: linear-gradient(to right, #e6f7ff, #f0f9ff);
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 30px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        border-left: 5px solid #4285F4;
    }

    .info-icon {
        font-size: 24px;
        margin-right: 20px;
        align-self: flex-start;
    }

    .info-content {
        flex: 1;
    }

    .info-content h3 {
        margin-top: 0;
        color: #333;
        font-size: 1.3rem;
    }

    .info-content p {
        margin-bottom: 10px;
        color: #555;
    }

    .info-content ul {
        margin-bottom: 15px;
        padding-left: 20px;
    }

    .info-content li {
        margin-bottom: 5px;
        color: #555;
    }

    .premium-features {
        background-color: rgba(255, 255, 255, 0.7);
        border-radius: 8px;
        padding: 12px 15px;
        margin-top: 10px;
    }

    .premium-features p {
        font-weight: 500;
        color: #4285F4;
    }

    .login-cta {
        margin-top: 15px;
        text-align: right;
    }

    .cta-button {
        background-color: #4285F4;
        color: white;
        border: none;
        padding: 8px 16px;
        border-radius: 4px;
        cursor: pointer;
        font-weight: 500;
        transition: background-color 0.2s;
    }

    .cta-button:hover {
        background-color: #3367D6;
    }

    /* Hide info box when user is logged in */
    body.user-logged-in .feature-info-box {
        display: none;
    }

    /* Landing page styles */
    .landing-section {
        margin-top: 60px;
        padding-bottom: 60px;
    }

    .landing-hero {
        text-align: center;
        padding: 40px 0;
        margin-bottom: 50px;
        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        border-radius: 15px;
    }

    .landing-hero h2 {
        font-size: 2.5rem;
        margin-bottom: 15px;
        color: #2c3e50;
    }

    .landing-hero p {
        font-size: 1.2rem;
        max-width: 800px;
        margin: 0 auto 30px;
        color: #34495e;
    }

    .features-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 30px;
        margin-bottom: 60px;
    }

    .feature-card {
        background: white;
        border-radius: 10px;
        padding: 25px;
        text-align: center;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .feature-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    }

    .feature-card .feature-icon {
        font-size: 48px;
        margin-bottom: 20px;
        color: #4285F4;
    }

    .feature-card h3 {
        font-size: 1.4rem;
        margin-bottom: 15px;
        color: #2c3e50;
    }

    .feature-card p {
        color: #7f8c8d;
        line-height: 1.6;
    }

    .api-link {
        display: inline-block;
        margin-top: 15px;
        padding: 8px 16px;
        background-color: #4285F4;
        color: white;
        text-decoration: none;
        border-radius: 4px;
        font-weight: 500;
        transition: background-color 0.2s, transform 0.2s;
    }

    .api-link:hover {
        background-color: #3367D6;
        transform: translateY(-2px);
    }

    .api-card {
        border-top: 4px solid #4285F4;
    }

    .privacy-link {
        display: inline-block;
        margin-top: 15px;
        padding: 8px 16px;
        background-color: #34A853;
        color: white;
        text-decoration: none;
        border-radius: 4px;
        font-weight: 500;
        transition: background-color 0.2s, transform 0.2s;
    }

    .privacy-link:hover {
        background-color: #2E8B57;
        transform: translateY(-2px);
    }

    .privacy-card {
        border-top: 4px solid #34A853;
    }

    .how-it-works {
        background: #f9f9f9;
        padding: 40px;
        border-radius: 15px;
        margin-bottom: 60px;
    }

    .how-it-works h2 {
        text-align: center;
        margin-bottom: 30px;
        color: #2c3e50;
    }

    .steps {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        gap: 30px;
    }

    .step {
        flex: 1;
        min-width: 200px;
        text-align: center;
        position: relative;
    }

    .step-number {
        width: 40px;
        height: 40px;
        background: #4285F4;
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 15px;
        font-weight: bold;
        font-size: 1.2rem;
    }

    .testimonials {
        margin-bottom: 60px;
    }

    .testimonials h2 {
        text-align: center;
        margin-bottom: 30px;
        color: #2c3e50;
    }

    .testimonial-card {
        background: white;
        border-radius: 10px;
        padding: 30px;
        margin-bottom: 20px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    }

    .testimonial-text {
        font-style: italic;
        margin-bottom: 20px;
        color: #555;
        line-height: 1.6;
    }

    .testimonial-author {
        display: flex;
        align-items: center;
    }

    .testimonial-avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: #e0e0e0;
        margin-right: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        color: #777;
    }

    .cta-section {
        text-align: center;
        background: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
        padding: 50px;
        border-radius: 15px;
        color: white;
    }

    .cta-section h2 {
        font-size: 2rem;
        margin-bottom: 20px;
    }

    .cta-section p {
        margin-bottom: 30px;
        font-size: 1.1rem;
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
    }

    .cta-button-large {
        background-color: white;
        color: #4285F4;
        border: none;
        padding: 12px 24px;
        border-radius: 6px;
        font-size: 1.1rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .cta-button-large:hover {
        background-color: #f0f0f0;
        transform: scale(1.05);
    }

    /* Credit balance display */
    #user-credits {
        background-color: #e8f4fd;
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 0.9rem;
        margin-right: 10px;
        border: 1px solid #c0e0f7;
        display: inline-flex;
        align-items: center;
    }

    .credits-label {
        color: #555;
        margin-right: 5px;
    }

    .credit-balance {
        font-weight: bold;
        color: #4285F4;
    }

    /* Credit packages section */
    .credit-packages {
        margin-top: 30px;
        padding: 20px;
        background: #f5f9ff;
        border-radius: 10px;
        border: 1px solid #dbe9f9;
    }

    .credit-packages h3 {
        text-align: center;
        margin-top: 0;
        margin-bottom: 20px;
        color: #2c3e50;
    }

    .packages-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 20px;
    }

    .package-card {
        background: white;
        border-radius: 8px;
        padding: 25px;
        text-align: center;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        position: relative;
        transition: transform 0.3s, box-shadow 0.3s;
    }

    .package-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    }

    .package-name {
        font-size: 1.5rem;
        font-weight: bold;
        color: #2c3e50;
        margin-bottom: 5px;
    }

    .credit-amount {
        font-size: 2.5rem;
        font-weight: bold;
        color: #4285F4;
        margin: 15px 0;
    }

    .credits-received {
        font-size: 0.9rem;
        font-weight: normal;
        color: #666;
        display: block;
        margin-top: 5px;
    }

    .package-price {
        font-size: 1.8rem;
        color: #27ae60;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .credit-description {
        color: #666;
        font-size: 0.9rem;
        margin-bottom: 15px;
        font-style: italic;
    }

    .savings-badge {
        position: absolute;
        top: -10px;
        right: -10px;
        background: #e74c3c;
        color: white;
        padding: 5px 10px;
        border-radius: 20px;
        font-weight: bold;
        font-size: 0.9rem;
    }

    .buy-package-btn {
        background: #4285F4;
        color: white;
        border: none;
        width: 100%;
        padding: 12px;
        border-radius: 6px;
        font-weight: bold;
        font-size: 1rem;
        cursor: pointer;
        transition: background 0.2s;
    }

    .buy-package-btn:hover {
        background: #3367d6;
    }

    /* Sign-in Modal Styles */
    .modal-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1000;
    }

    .modal-content {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: white;
        padding: 30px;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        max-width: 400px;
        width: 90%;
        text-align: center;
    }

    .modal-header {
        margin-bottom: 20px;
    }

    .modal-title {
        font-size: 1.5rem;
        font-weight: bold;
        color: #333;
        margin: 0 0 10px 0;
    }

    .modal-message {
        color: #666;
        margin-bottom: 25px;
        line-height: 1.5;
    }

    .modal-actions {
        display: flex;
        gap: 15px;
        justify-content: center;
    }

    .modal-btn {
        padding: 12px 24px;
        border: none;
        border-radius: 6px;
        font-weight: bold;
        cursor: pointer;
        transition: all 0.2s;
    }

    .modal-btn-primary {
        background: #4285F4;
        color: white;
    }

    .modal-btn-primary:hover {
        background: #3367d6;
    }

    .modal-btn-secondary {
        background: #f1f3f4;
        color: #333;
    }

    .modal-btn-secondary:hover {
        background: #e8eaed;
    }

    .seo-content {
        color: #666;
        line-height: 1.8;
        margin-top: 50px;
    }

    .seo-content h2, .seo-content h3 {
        color: #2c3e50;
        margin-top: 30px;
        margin-bottom: 15px;
    }

    /* Hide landing section when the form is being processed */
    body.upload-in-progress .landing-section {
        display: none;
    }

    /* Credit package button/prompt visibility */
    .buy-package-btn {
        display: none; /* Hide buy buttons by default */
    }
    .login-to-purchase-prompt {
        display: block; /* Show login prompt by default */
        font-size: 0.9em;
        color: #666;
        margin-top: 15px;
    }

    body.user-logged-in .buy-package-btn {
        display: block; /* Show buy buttons when user is logged in */
    }
    body.user-logged-in .login-to-purchase-prompt {
        display: none; /* Hide login prompt when user is logged in */
    }

    /* Voucher section styles */
    .voucher-container {
        background-color: #f0f8ff; /* AliceBlue */
        padding: 20px;
        border-radius: 8px;
        margin-top: 20px;
        margin-bottom: 30px;
        border: 1px solid #d6eaff;
    }
    .voucher-container h3 {
        margin-top: 0;
        margin-bottom: 15px;
        color: #333;
        text-align: center;
    }
    #voucher-form {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
        flex-wrap: wrap; /* Allow wrapping on smaller screens */
    }
    #voucher-form .form-group {
        margin-bottom: 0; /* Remove default bottom margin */
        display: flex; /* Align label and input */
        align-items: center;
        gap: 8px;
    }
    #voucher-form label {
         margin-bottom: 0; /* Override default label margin */
         font-weight: 500;
    }
    #voucher-form input[type="text"] {
        padding: 8px 12px;
        border: 1px solid #ccc;
        border-radius: 4px;
        min-width: 180px; /* Ensure input has some width */
    }
    .submit-button.small {
        padding: 8px 16px; /* Smaller padding */
        font-size: 0.9rem;
    }
    .voucher-status {
        margin-top: 15px;
        text-align: center;
        font-weight: 500;
    }
    .voucher-status .success-message {
        color: #28a745; /* Green */
        background-color: #e9f7ec;
        padding: 8px;
        border-radius: 4px;
        border: 1px solid #c3e6cb;
        display: inline-block; /* Fit content */
    }
    .voucher-status .error-container { /* Reuse error style */
        color: #dc3545; /* Red */
        background-color: #f8d7da;
        padding: 8px;
        border-radius: 4px;
        border: 1px solid #f5c6cb;
        display: inline-block; /* Fit content */
    }
    #voucher-indicator {
        font-style: italic;
        color: #555;
    }
    /* Show voucher section only when logged in */
    #voucher-section { display: none; } /* Hidden by default */
    body.user-logged-in #voucher-section { display: block; } /* Shown when logged in */

    .footer-link {
        color: #4285F4;
        text-decoration: none;
        margin: 0 10px;
    }

    /* Tab Styles */
    .upload-tabs {
        display: flex;
        margin-bottom: 20px;
        border-bottom: 2px solid #e0e0e0;
    }

    .tab-button {
        background: none;
        border: none;
        padding: 12px 24px;
        cursor: pointer;
        font-size: 16px;
        color: #666;
        border-bottom: 3px solid transparent;
        transition: all 0.3s ease;
        flex: 1;
    }

    .tab-button:hover {
        color: #4285F4;
        background-color: #f8f9fa;
    }

    .tab-button.active {
        color: #4285F4;
        border-bottom-color: #4285F4;
        font-weight: 500;
    }

    .tab-content {
        display: none;
    }

    .tab-content.active {
        display: block;
    }

    /* YouTube-specific styles */
    .youtube-notice {
        background-color: #fff3cd;
        border: 1px solid #ffeaa7;
        border-radius: 4px;
        padding: 8px 12px;
        margin: 10px 0;
        font-size: 0.9rem;
    }

    #youtubeInput {
        width: 100%;
        padding: 10px;
        border: 2px solid #ddd;
        border-radius: 4px;
        font-size: 16px;
    }

    #urlInput {
        width: 100%;
        padding: 10px;
        border: 2px solid #ddd;
        border-radius: 4px;
        font-size: 16px;

    }

    #youtubeInput:focus {
        border-color: #4285F4;
        outline: none;
    }

    #youtubeInput:valid {
        border-color: #28a745;
    }

    #youtubeInput:invalid:not(:placeholder-shown) {
        border-color: #dc3545;
    }

    #youtube-display {
        min-height: 40px;
        display: flex;
        align-items: center;
    }

    /* File URL tab specific styles */
    .provider-info {
        margin-top: 8px;
        padding: 8px 12px;
        background: #e3f2fd;
        border: 1px solid #bbdefb;
        border-radius: 4px;
        font-size: 0.9em;
    }

    .provider-label {
        color: #1976d2;
        font-weight: 500;
    }

    .provider-name {
        color: #0d47a1;
        font-weight: bold;
        margin-left: 5px;
    }

    .url-help {
        margin-top: 15px;
        padding: 15px;
        background: #f5f5f5;
        border-radius: 6px;
        border-left: 4px solid #4285f4;
    }

    .url-help p {
        margin: 0 0 10px 0;
        color: #333;
    }

    .url-help ul {
        margin: 10px 0;
        padding-left: 20px;
    }

    .url-help li {
        margin: 5px 0;
        color: #555;
    }

    .url-help small {
        color: #666;
        font-style: italic;
    }

    #url-display {
        min-height: 40px;
        display: flex;
        align-items: center;
    }

    /* Disabled submit button visual */
.submit-button[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

<!-- HTMX and Extensions -->
<script src="https://unpkg.com/htmx.org@2.0.9"></script>

AI Quick Transcript Upload audio/video, get transcription & summary Sign in with Google Credits: 0 History API Keys Admin Panel Logout

<main class="container">
    <!-- Demo Mode Information -->
    <div class="feature-info-box">
        <div class="info-icon">ℹ️</div>
        <div class="info-content">
            <h3>Welcome to Media Transcriber</h3>
            <p>You're currently using <strong>Demo Mode</strong> with the following limitations:</p>
            <ul>
                <li>Maximum file size: 300 MB</li>
                <li>Maximum duration that will be transcribed: 5 minutes</li>
                <li>Basic transcription features only</li>
            </ul>
            <div class="premium-features">
                <p><strong>Sign in with Google</strong> to unlock premium features:</p>
                <ul>
                    <li>Larger file uploads (up to 2000 MB)</li>
                    <li>Full-length transcription (no 5-minute limit)</li>
                    <li>Advanced formatting options</li>
                    <li>Save transcription history</li>
                </ul>
            </div>
            <div class="login-cta">
                <button class="cta-button" onclick="document.getElementById('login-button').click()">Sign in for Full Access</button>
            </div>
        </div>
    </div>

    <!-- Upload Section - Always Visible -->
    <div id="upload-section">
        <!-- Initial response area for upload -->
        <div id="initial-response-area">
            <!-- The polling trigger will be loaded here by the /upload response -->
        </div>

        <!-- Tab Navigation -->
        <div class="upload-tabs">
            <button class="tab-button active" onclick="switchTab('file')" id="file-tab">
                📁 Upload File
            </button>
            <button class="tab-button" onclick="switchTab('youtube')" id="youtube-tab">
                🎥 YouTube URL
            </button>
            <button class="tab-button" onclick="switchTab('url')" id="url-tab">
                🔗 File URL
            </button>
        </div>

        <!-- File Upload Form -->
        <form id="upload-form"
          hx-post="/upload"
          hx-target="#initial-response-area"
          hx-swap="innerHTML"
          hx-encoding="multipart/form-data"
          hx-indicator="#upload-indicator"
          class="upload-form tab-content active"
          hx-ext="validate"
          hx-disabled-elt="find .submit-button" data-hx-validate="true">

        <div class="form-group">
            <label for="fileInput">Select File:</label>
            <input type="file"
                   name="file"
                   id="fileInput"
                   accept="audio/*,video/*"
                   required
                   data-required-message="Please select a file to upload">
            <div class="validation-error" id="file-error"></div>
        </div>

        <!-- File info display -->
        <div id="file-display" class="file-display">
            <span>No file selected</span>
        </div>

        <!-- Progress Bar with Status -->
        <div class="progress-container" id="progress-wrapper" style="display: none;">
            <div class="progress-status">
                <span id="progress-text">0%</span>
                <span id="file-size"></span>
            </div>
            <progress id="progress-bar" value="0" max="100"></progress>
        </div>

        <!-- Upload Status Messages -->
        <div id="upload-status" class="upload-status"></div>

        <button type="submit" class="submit-button">Upload &amp; Transcribe</button>

        <!-- Upload Indicator -->
        <div id="upload-indicator" class="htmx-indicator">
            <div class="processing-container">
                <svg class="spinner" width="24" height="24" viewBox="0 0 24 24">
                    <circle class="path" cx="12" cy="12" r="10" fill="none" stroke-width="4"></circle>
                </svg>
                <div class="processing-status">
                    <span id="processing-message" class="processing-text">Processing...</span>
                </div>
            </div>
        </div>
    </form>

    <!-- YouTube URL Form -->
    <form id="youtube-form"
          hx-post="/process-youtube"
          hx-target="#initial-response-area"
          hx-swap="innerHTML"
          hx-indicator="#youtube-indicator"
          class="upload-form tab-content"
          hx-ext="validate"
          hx-disabled-elt="find .submit-button" data-hx-validate="true">

        <div class="form-group">
            <label for="youtubeInput">YouTube URL:</label>
            <input type="url"
                   name="youtube_url"
                   id="youtubeInput"
                   placeholder="https://www.youtube.com/watch?v=..."
                   pattern="^(https?://)?(www\.)?(youtube|youtu|youtube-nocookie)\.(com|be)/.+"
                   required
                   data-required-message="Please enter a valid YouTube URL">
            <div class="validation-error" id="youtube-error"></div>
        </div>

        <!-- YouTube URL info display -->
        <div id="youtube-display" class="file-display">
            <span>Enter a YouTube URL above</span>
        </div>

        <button type="submit" class="submit-button">Process YouTube Video</button>

        <!-- YouTube Processing Indicator -->
        <div id="youtube-indicator" class="htmx-indicator">
            <div class="processing-container">
                <svg class="spinner" width="24" height="24" viewBox="0 0 24 24">
                    <circle class="path" cx="12" cy="12" r="10" fill="none" stroke-width="4"></circle>
                </svg>
                <div class="processing-status">
                    <span class="processing-text">Processing YouTube video...</span>
                </div>
            </div>
        </div>
    </form>

    <!-- File URL Form -->
    <form id="url-form"
          hx-post="/process-url"
          hx-target="#initial-response-area"
          hx-swap="innerHTML"
          hx-indicator="#url-indicator"
          class="upload-form tab-content"
          hx-ext="validate"
          hx-disabled-elt="find .submit-button" data-hx-validate="true">

        <div class="form-group">
            <label for="urlInput">File URL:</label>
            <input type="url"
                   name="file_url"
                   id="urlInput"
                   placeholder="https://drive.google.com/file/d/... or https://www.dropbox.com/..."
                   required
                   data-required-message="Please enter a valid file URL">
            <div class="validation-error" id="url-error"></div>

            <!-- Cloud provider detection info -->
            <div class="provider-info" id="provider-info" style="display: none;">
                <span class="provider-label">Detected provider:</span>
                <span class="provider-name" id="provider-name"></span>
            </div>
        </div>

        <!-- URL info display -->
        <div id="url-display" class="file-display">
            <span>Enter a file URL above</span>
        </div>

        <!-- Supported providers help text -->
        <div class="url-help">
            <p><strong>Supported sources:</strong></p>
            <ul>
                <li>🔗 Google Drive sharing links</li>
                <li>🔗 Dropbox sharing links</li>
                <li>🔗 OneDrive sharing links</li>
                <li>🔗 Direct HTTP/HTTPS file URLs</li>
            </ul>
            <p><small>Note: Files must be audio or video format and accessible without login.</small></p>
        </div>

        <button type="submit" class="submit-button">Process File URL</button>

        <!-- URL Processing Indicator -->
        <div id="url-indicator" class="htmx-indicator">
            <div class="processing-container">
                <svg class="spinner" width="24" height="24" viewBox="0 0 24 24">
                    <circle class="path" cx="12" cy="12" r="10" fill="none" stroke-width="4"></circle>
                </svg>
                <div class="processing-status">
                    <span class="processing-text">Downloading and processing file...</span>
                </div>
            </div>
        </div>
    </form>

    <!-- Credit Packages Section - Moved outside landing section -->
    <!-- Visible by default, buttons/prompts controlled by user-logged-in class -->
    <section id="credit-packages-section" class="credit-packages">
        <h3>Transcription Credit Packages</h3>
        <div class="packages-grid">
            <div class="package-card">
                <div class="package-name">Basic</div>
                <div class="credit-amount">10 <span class="credits-received">credits received</span></div>
                <div class="package-price">$10</div>
                <div class="credit-description">~5 hours of audio</div>
                <button class="buy-package-btn" onclick="purchaseCredits('basic')">Buy Now</button>
                <p class="login-to-purchase-prompt">Please sign in to purchase.</p>
            </div>

            <div class="package-card">
                <div class="package-name">Pro</div>
                <div class="credit-amount">22 <span class="credits-received">credits received</span></div>
                <div class="package-price">$20</div>
                <div class="credit-description">~11 hours of audio</div>
                <div class="savings-badge">Save 10%</div>
                <button class="buy-package-btn" onclick="purchaseCredits('pro')">Buy Now</button>
                <p class="login-to-purchase-prompt">Please sign in to purchase.</p>
            </div>

            <div class="package-card">
                <div class="package-name">Premium</div>
                <div class="credit-amount">60 <span class="credits-received">credits received</span></div>
                <div class="package-price">$50</div>
                <div class="credit-description">~30 hours of audio</div>
                <div class="savings-badge">Save 20%</div>
                <button class="buy-package-btn" onclick="purchaseCredits('premium')">Buy Now</button>
                <p class="login-to-purchase-prompt">Please sign in to purchase.</p>
            </div>
        </div>
    </section>

    <!-- Voucher Redemption Section - Only shown when logged in -->
    <section id="voucher-section"> <!-- Removed 'hidden' class -->
         <div class="voucher-container">
             <h3>Have a Voucher Code?</h3>
             <form id="voucher-form">
                 <!-- Hidden input for Firebase token -->
                 <input type="hidden" name="firebase_token" id="voucher-token-input">
                 <div class="form-group">
                     <label for="voucherInput">Enter Code:</label>
                     <input type="text" name="voucher_code" id="voucherInput" required placeholder="e.g., VOUCHER123">
                 </div>
                 <button type="submit" class="submit-button small">Redeem Voucher</button>
                 <span id="voucher-indicator" class="htmx-indicator"> Redeeming...</span>
             </form>
             <div id="voucher-result" class="voucher-status">
                 <!-- Redemption success/error messages appear here -->
             </div>
         </div>
    </section>

    <!-- API Key Management Section Removed - Moved to /api-keys page -->

    <!-- Landing Section - Hidden during upload/processing -->
    <section id="landing-section" class="landing-section">
        <div class="landing-hero">
            <h2>Transform Speech to Text in Minutes</h2>
            <p>Our advanced AI technology accurately transcribes audio and video files with precision, making content creation and analysis faster than ever.</p>
        </div>

        <div class="features-grid">
            <div class="feature-card">
                <div class="feature-icon">🎯</div>
                <h3>Precision Transcription</h3>
                <p>Industry-leading accuracy even with challenging audio, multiple speakers, and specialized terminology.</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">⚡</div>
                <h3>Lightning Fast</h3>
                <p>Get results in minutes, not hours. Our AI processes even lengthy files with remarkable speed.</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">🔍</div>
                <h3>Smart Summaries</h3>
                <p>Automatically generate concise summaries that capture the essential points from your content.</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">🌐</div>
                <h3>Multi-Language Support</h3>
                <p>Accurately transcribe content in multiple languages including Cyrillic (Russian, Ukrainian, Bulgarian) with native-level precision.</p>
            </div>
            <div class="feature-card api-card">
                <div class="feature-icon">🔌</div>
                <h3>API Access</h3>
                <p>Integrate our transcription service directly into your applications with our developer-friendly REST API. Easy to use, reliably scalable.</p>
                <a href="/api-docs" class="api-link">View API Docs</a>
            </div>
            <div class="feature-card privacy-card">
                <div class="feature-icon">🔒</div>
                <h3>Privacy First</h3>
                <p>Your data security is our priority. All uploaded files are automatically deleted immediately after processing, leaving no traces behind.</p>
                <a href="/privacy" class="privacy-link">Privacy Policy</a>
            </div>
        </div>

        <div class="how-it-works">
            <h2>How It Works</h2>
            <div class="steps">
                <div class="step">
                    <div class="step-number">1</div>
                    <h3>Upload</h3>
                    <p>Upload your audio or video file in any common format.</p>
                </div>
                <div class="step">
                    <div class="step-number">2</div>
                    <h3>Process</h3>
                    <p>Our AI analyzes the content and converts speech to text.</p>
                </div>
                <div class="step">
                    <div class="step-number">3</div>
                    <h3>Review</h3>
                    <p>Get your transcription and AI-generated summary.</p>
                </div>
            </div>
        </div>

        <div class="testimonials">
            <h2>What Our Users Say</h2>
            <div class="testimonial-card">
                <p class="testimonial-text">"This transcription service has become an essential part of my content creation workflow. The accuracy and speed are unmatched."</p>
                <div class="testimonial-author">
                    <div class="testimonial-avatar">JD</div>
                    <div>
                        <strong>John Doe</strong><br>
                        Content Creator
                    </div>
                </div>
            </div>
            <div class="testimonial-card">
                <p class="testimonial-text">"As a journalist, I need reliable transcriptions fast. This service delivers exactly that, saving me hours of work on each interview."</p>
                <div class="testimonial-author">
                    <div class="testimonial-avatar">SM</div>
                    <div>
                        <strong>Sarah Miller</strong><br>
                        Journalist
                    </div>
                </div>
            </div>
        </div>

        <div class="cta-section">
            <h2>Ready to Save Hours of Transcription Time?</h2>
            <p>Join thousands of content creators, researchers, journalists, and businesses who rely on our AI-powered transcription service.</p>
            <button class="cta-button-large" onclick="document.getElementById('fileInput').click()">Start Transcribing Now</button>
        </div>

        <div class="seo-content">
            <h2>Professional Audio and Video Transcription Service</h2>
            <p>
                Our AI-powered media transcriber converts spoken words from audio and video files into accurate text.
                Whether you're a content creator, journalist, student, researcher, or business professional, our tool
                helps you extract valuable information from media files efficiently.
            </p>

            <h3>Advanced Features for All Your Transcription Needs</h3>
            <p>
                With support for multiple file formats including MP3, WAV, MP4, MOV, and more, our service can handle
                virtually any media file you upload. Our advanced AI algorithms are trained to recognize different accents,
                filter background noise, and differentiate between multiple speakers, ensuring high-quality transcripts.
            </p>

            <h3>Why Choose Our Media Transcription Service?</h3>
            <ul>
                <li><strong>High Accuracy:</strong> Our state-of-the-art AI delivers industry-leading transcription accuracy.</li>
                <li><strong>Fast Processing:</strong> Get your transcripts in minutes, not hours.</li>
                <li><strong>AI Summaries:</strong> Automatically generate concise summaries of your content.</li>
                <li><strong>User-Friendly:</strong> Simple upload process with real-time progress tracking.</li>
                <li><strong>Developer API:</strong> Integrate with our robust REST API for your applications.</li>
                <li><strong>Secure & Private:</strong> Your files and transcripts are processed securely and automatically deleted after transcription.</li>
            </ul>

            <h3>Popular Use Cases</h3>
            <p>
                Our transcription service is used by professionals across various industries:
            </p>
            <ul>
                <li>Content creators transcribing podcast episodes and YouTube videos</li>
                <li>Journalists converting interviews into text for articles</li>
                <li>Students transcribing lectures and study materials</li>
                <li>Researchers analyzing qualitative data from recorded sessions</li>
                <li>Businesses transcribing meetings, conferences, and webinars</li>
                <li>Developers integrating transcription capabilities into their applications</li>
            </ul>

            <p>
                Try our service today and experience the power of AI-driven transcription to save time and increase productivity.
            </p>
        </div>
    </section>

    <!-- Result Section - Hidden Initially, revealed after successful swap -->
    
    <section id="result-section"> 
         
         
         <div id="result-container-placeholder" style="display: none; text-align: center; padding: 40px; color: #888;">
             <!-- Waiting for transcription results... -->
         </div>
    </section>
</main>

<!-- Sign-in Modal -->
<div id="signin-modal" class="modal-overlay">
    <div class="modal-content">
        <div class="modal-header">
            <h2 class="modal-title">🔐 Sign In Required</h2>
        </div>
        <p class="modal-message">
            YouTube video processing requires authentication. Please sign in to continue transcribing YouTube videos.
        </p>
        <div class="modal-actions">
            <button id="modal-signin-btn" class="modal-btn modal-btn-primary" onclick="document.getElementById('login-button').click()">
                Sign In with Google
            </button>
            <button id="modal-cancel-btn" class="modal-btn modal-btn-secondary">
                Cancel
            </button>
        </div>
    </div>
</div>

<footer class="app-footer">
    <div class="container">
        <p>&copy; 2025 Media Transcriber | <a href="/privacy" class="footer-link">Privacy Policy</a> | <a href="https://blog.quicktranscript.app" class="footer-link" target="_blank">Blog</a> | <a href="https://tally.so/r/wAaX4W" class="footer-link">Contact Us</a> | <a href="/privacy" class="footer-link">Privacy Policy</a> | <a href="/api-docs" class="footer-link">API Docs</a> | <a href="/tos" class="footer-link" target="_blank">Terms of Service</a></p>
    </div>
</footer>

<script>
    // Make Firebase config available globally for the main.js module
    window.firebaseConfig = {"apiKey": "AIzaSyBPC_gWUl-d6Inq4Kv8uCSQYS1ZdBlDbmY", "appId": "1:172535120003:web:a3f56cd30b647ecab3dbb6", "authDomain": "videodigestai.firebaseapp.com", "measurementId": "G-DX4T3CPZ6Z", "messagingSenderId": "172535120003", "projectId": "videodigestai", "storageBucket": "videodigestai.firebasestorage.app"};

    // Make the purchaseCredits function available globally
    window.purchaseCredits = function(packageId) {
        // This will be handled by the auth module
    };
</script>

<!-- Application JavaScript Modules -->
<script src="/static/js/progress.js"></script>
<script type="module" src="/static/js/utils.js"></script>
<script type="module" src="/static/js/dom-cache.js"></script>
<script type="module" src="/static/js/main.js"></script>