<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <title>Sharey</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <!-- QR Code generation library -->
    <script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js"></script>
    
    <!-- Immediate theme application to prevent flash -->
    <script>
        // Apply theme immediately before page renders
        (function() {
            function getCookie(name) {
                const nameEQ = name + "=";
                const ca = document.cookie.split(';');
                for (let i = 0; i < ca.length; i++) {
                    let c = ca[i];
                    while (c.charAt(0) === ' ') c = c.substring(1, c.length);
                    if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
                }
                return null;
            }
            
            const savedTheme = getCookie('sharey-theme') || 'light';
            
            if (savedTheme === 'dark') {
                document.documentElement.setAttribute('data-theme', 'dark');
            }
        })();
    </script>
</head>
<body>
    <!-- Theme toggle button -->
    <button id="themeToggle" class="theme-toggle" title="Switch to dark mode">🌙</button>
    
    <div class="container">
        <h1>Sharey~</h1>

        <!-- Toggle button to switch between modes -->
        <div class="toggle-container">
            <button id="fileMode" class="toggle-button active">File Sharing</button>
            <button id="pasteMode" class="toggle-button">Pastebin</button>
            <button id="urlMode" class="toggle-button">URL Shortener</button>
            <button id="faqButton" class="toggle-button">FAQ</button>
            
            <!-- File Expiry Selection (inline) -->
            <div class="expiry-inline">
                <label for="expirySelect" class="expiry-label">⏰</label>
                <select id="expirySelect" class="expiry-select-inline">
                    <option value="never">Never</option>
                    <option value="1h">1h</option>
                    <option value="24h">24h</option>
                    <option value="7d" selected>7d</option>
                    <option value="30d">30d</option>
                    <option value="90d">90d</option>
                    <option value="custom">Custom</option>
                </select>
                <input type="datetime-local" id="customExpiry" class="custom-expiry-inline" style="display: none;">
            </div>
        </div>

        <!-- File Sharing Area -->
        <div id="fileSharingSection" class="section">
                        <div id="dropArea" class="drop-area">
                <div class="upload-icon">📁</div>
                <p id="desktopInstructions" class="desktop-only">Drop files here, click to select, or press <kbd>Ctrl+V</kbd> to paste from clipboard</p>
                <p id="mobileInstructions" class="mobile-only" style="display: none;">📱 Tap to select files or long-press for paste menu</p>
                <input type="file" id="fileInput" multiple accept="*/*">
            </div>

            <!-- Mobile clipboard paste button (fallback) -->
            <div id="mobileClipboardSection" class="mobile-clipboard-section" style="display: none;">
                <button id="mobilePasteButton" class="mobile-paste-button">📋 Paste from Clipboard</button>
                <p class="mobile-paste-hint">Fallback option for devices that don't support long-press</p>
            </div>

            <!-- Context menu for long-press -->
            <div id="contextMenu" class="context-menu" style="display: none;">
                <button id="contextPasteButton" class="context-menu-item">📋 Paste from Clipboard</button>
                <button id="contextSelectButton" class="context-menu-item">📁 Select Files</button>
            </div>

            <div id="progressContainer" class="progress-bar">
                <div id="progressBar" class="progress"></div>
                <p id="progressText">Ready to upload</p>
            </div>

            <div id="result" class="result-message"></div>

            <!-- File preview container -->
            <div id="filePreviewContainer" class="file-preview-container" style="display: none;">
                <h3>File Previews:</h3>
                <div id="filePreviews" class="file-previews"></div>
            </div>
        </div>

        <!-- Pastebin Area (hidden by default) -->
        <div id="pastebinSection" class="section" style="display: none;">
            <textarea id="pasteContent" placeholder="Enter your text here..." rows="10" cols="50"></textarea>
            
            <!-- Paste Expiry Selection -->
            <div class="expiry-section">
                <label for="pasteExpirySelect" class="expiry-label">⏰ Paste Expiry:</label>
                <select id="pasteExpirySelect" class="expiry-select">
                    <option value="never">Never expires</option>
                    <option value="1h">1 Hour</option>
                    <option value="24h" selected>24 Hours</option>
                    <option value="7d">7 Days</option>
                    <option value="30d">30 Days</option>
                    <option value="custom">Custom...</option>
                </select>
                <input type="datetime-local" id="customPasteExpiry" class="custom-expiry" style="display: none;">
                <p class="expiry-hint">Pastes will be automatically deleted after the expiry time</p>
            </div>
            
            <button id="submitPaste" class="submit-button">Submit Paste</button>
            <div id="pasteResult" class="result-message"></div>
        </div>

        <!-- URL Shortener Area (hidden by default) -->
        <div id="urlShortenerSection" class="section" style="display: none;">
            <div class="url-input-container">
                <label for="urlInput" class="url-label">🔗 Enter URL to shorten:</label>
                <input type="url" id="urlInput" class="url-input" placeholder="https://example.com/very-long-url" required>
                
                <div class="url-options">
                    <div class="option-group">
                        <label for="customCode" class="option-label">Custom code (optional):</label>
                        <input type="text" id="customCode" class="custom-code-input" placeholder="my-link" maxlength="20">
                        <small class="option-hint">3-20 characters, letters, numbers, hyphens, underscores only</small>
                    </div>
                    
                    <div class="option-group">
                        <label for="urlExpiry" class="option-label">⏰ Expires in:</label>
                        <select id="urlExpiry" class="url-expiry-select">
                            <option value="never">Never</option>
                            <option value="1">1 Hour</option>
                            <option value="24" selected>24 Hours</option>
                            <option value="168">7 Days</option>
                            <option value="720">30 Days</option>
                        </select>
                    </div>
                </div>
                
                <button id="shortenUrl" class="submit-button">✨ Shorten URL</button>
            </div>
            
            <div id="urlResult" class="result-message"></div>
            
            <!-- URL Preview Container -->
            <div id="urlPreviewContainer" class="url-preview-container" style="display: none;">
                <h3>🔗 Short URL Created:</h3>
                <div id="urlPreview" class="url-preview">
                    <div class="short-url-display">
                        <input type="text" id="shortUrlInput" class="short-url-input" readonly>
                        <button id="copyUrlButton" class="copy-button" title="Copy to clipboard">📋</button>
                    </div>
                    <div class="url-details">
                        <p><strong>Target:</strong> <span id="targetUrl"></span></p>
                        <p><strong>Clicks:</strong> <span id="clickCount">0</span></p>
                        <p id="expiryInfo" style="display: none;"><strong>Expires:</strong> <span id="expiryDate"></span></p>
                    </div>
                </div>
            </div>
        </div>

        <!-- FAQ Section (hidden by default) -->
        <div id="faqSection" class="section" style="display: none;">
            <h2>Terms of Service & Legal</h2>
            
            <!-- Terms of Service Section -->
            <div class="faq-section" style="border: 2px solid var(--border-color); background-color: var(--bg-accent); margin-bottom: 25px;">
                <h3>📋 Terms of Service</h3>
                <p><strong>By using Sharey, you agree to these terms:</strong></p>
                <ul>
                    <li><strong>Content Responsibility:</strong> You are solely responsible for all content you upload and URLs you shorten. Sharey does not review, monitor, or control user content or redirect destinations.</li>
                    <li><strong>Prohibited Content:</strong> Do not upload illegal, copyrighted, harmful, or inappropriate content including malware, spam, harassment, or content violating applicable laws. Do not create redirects to illegal, malicious, or harmful websites.</li>
                    <li><strong>Takedown Policy:</strong> We respond promptly to valid takedown requests. To report content or malicious redirects, email: <strong>computertech@rizon.net</strong></li>
                    <li><strong>Service Disclaimer:</strong> Sharey provides file hosting and URL shortening "as-is" without warranties. We reserve the right to remove content, disable redirects, and suspend access at our discretion.</li>
                    <li><strong>Privacy:</strong> Files may expire automatically. Shortened URLs may expire based on settings. We do not access private content except for legal compliance or security purposes.</li>
                    <li><strong>User Indemnification:</strong> You agree to indemnify Sharey against any claims arising from your use, content, or redirect destinations.</li>
                </ul>
                <p><strong>🚨 Report Abuse:</strong> Email <a href="mailto:computertech@rizon.net">computertech@rizon.net</a> with the file URL and reason for reporting.</p>
                <p><em>Last updated: September 2025</em></p>
            </div>

            <h2>Frequently Asked Questions</h2>
            <div class="faq-section">
                <h3>How do I upload a file?</h3>
                <p>To upload a file, send a POST request to the /api/upload endpoint. Example:</p>
                <pre><code>curl -X POST https://sharey.org/api/upload \
-F "files[]=@/path/to/your/file.txt"</code></pre>
            </div>

            <div class="faq-section">
                <h3>How do I create a paste?</h3>
                <p>To create a paste, send a POST request to the /api/paste endpoint. Example:</p>
                <pre><code>curl -X POST https://sharey.org/api/paste \
-H "Content-Type: application/json" \
-d '{"content": "This is the content of my paste."}'</code></pre>
            </div>

            <div class="faq-section">
                <h3>🆕 Can I upload from clipboard?</h3>
                <p>Yes! You can paste content directly from your clipboard:</p>
                <ul class="desktop-only">
                    <li><strong>Keyboard:</strong> Press <kbd>Ctrl+V</kbd> (or <kbd>Cmd+V</kbd> on Mac) in File Sharing mode</li>
                    <li><strong>Images:</strong> Screenshots, copied images, photos - all work!</li>
                    <li><strong>Text:</strong> Copied text will prompt you to switch to Paste mode</li>
                </ul>
                <ul class="mobile-only" style="display: none;">
                    <li><strong>Long-press:</strong> Long-press the upload area and select "Paste from Clipboard"</li>
                    <li><strong>Screenshots:</strong> Take a screenshot, then long-press to paste</li>
                    <li><strong>Copied images:</strong> Copy any image, then long-press to paste</li>
                    <li><strong>Text content:</strong> Will prompt you to switch to Paste mode</li>
                </ul>
                <p><em>Perfect for quickly sharing screenshots, images from other websites, or text content!</em></p>
                <div class="mobile-tutorial mobile-only" style="display: none;">
                    <h4>📱 Mobile Step-by-Step:</h4>
                    <ol>
                        <li>Copy an image or take a screenshot</li>
                        <li>Come to this page in File Sharing mode</li>
                        <li>Long-press the upload area</li>
                        <li>Select "📋 Paste from Clipboard" from the menu</li>
                        <li>Your content will be uploaded automatically!</li>
                    </ol>
                </div>
                <div class="desktop-tutorial desktop-only">
                    <h4>💻 Desktop Step-by-Step:</h4>
                    <ol>
                        <li>Copy an image or take a screenshot (<kbd>PrtScr</kbd>, <kbd>Cmd+Shift+4</kbd>, etc.)</li>
                        <li>Come to this page in File Sharing mode</li>
                        <li>Press <kbd>Ctrl+V</kbd> (or <kbd>Cmd+V</kbd> on Mac)</li>
                        <li>Your content will be uploaded automatically!</li>
                    </ol>
                </div>
            </div>

            <div class="faq-section">
                <h3>🆕 What's the URL format?</h3>
                <p>Sharey now uses clean, short URLs for all new uploads:</p>
                <ul>
                    <li><strong>New format:</strong> <code>sharey.org/ABC123</code> (files) or <code>sharey.org/XYZ789</code> (pastes)</li>
                    <li><strong>Old format:</strong> <code>sharey.org/files/ABC123.png</code> or <code>sharey.org/pastes/XYZ789</code> (still works!)</li>
                </ul>
                <p><em>All existing links continue to work - only new uploads use the cleaner format.</em></p>
            </div>

            <div class="faq-section">
                <h3>⏰ Do files expire?</h3>
                <p>Yes! You can set expiry times when uploading:</p>
                <ul>
                    <li><strong>Files:</strong> Default 7 days, options from 1 hour to never</li>
                    <li><strong>Pastes:</strong> Default 24 hours, configurable expiry</li>
                    <li><strong>Custom expiry:</strong> Set any specific date and time</li>
                    <li><strong>Automatic cleanup:</strong> Expired content is automatically deleted</li>
                </ul>
                <p><em>Perfect for temporary shares or sensitive content that shouldn't persist!</em></p>
            </div>

            <div class="faq-section">
                <h3>🔗 How do I shorten a URL?</h3>
                <p>Use the URL Shortener tab to create short links:</p>
                <ul>
                    <li><strong>Basic shortening:</strong> Enter any URL and get a short link like <code>sharey.org/abc123</code></li>
                    <li><strong>Custom codes:</strong> Create memorable links like <code>sharey.org/my-project</code></li>
                    <li><strong>Expiring links:</strong> Set links to expire automatically for security</li>
                    <li><strong>Click tracking:</strong> See how many times your link has been clicked</li>
                </ul>
                <p><strong>API Usage:</strong></p>
                <pre><code>curl -X POST https://sharey.org/api/shorten \
-H "Content-Type: application/json" \
-d '{"url": "https://example.com", "code": "my-link", "expires_in_hours": 24}'</code></pre>
                <p><em>Perfect for sharing long URLs, tracking clicks, or creating temporary access links!</em></p>
            </div>
        </div>
    </div>

    <!-- QR Code library for sharing -->
    <script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js"></script>
    <script src="{{ url_for('static', filename='script.js') }}"></script>
</body>
</html>
