Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Quote Image Generator</title> | |
| <link rel="stylesheet" href="style.css" /> | |
| </head> | |
| <body> | |
| <button class="theme-toggle" onclick="toggleTheme()" title="Toggle theme"> | |
| 🌙 | |
| </button> | |
| <div class="container"> | |
| <div class="panel"> | |
| <h2>Quote Generator</h2> | |
| <div class="form-group"> | |
| <label>Quote Text</label> | |
| <textarea id="quoteText"> | |
| The only way to do great work is to love what you do.</textarea | |
| > | |
| </div> | |
| <div class="form-group"> | |
| <label>Author</label> | |
| <input type="text" id="author" value="Steve Jobs" /> | |
| </div> | |
| <div class="color-grid"> | |
| <div class="form-group color-picker"> | |
| <label>Background Color</label> | |
| <div class="color-input-wrapper"> | |
| <input type="color" id="bgColor" value="#ffffff" /> | |
| <input | |
| type="text" | |
| id="bgColorText" | |
| value="#ffffff" | |
| class="color-text" | |
| /> | |
| </div> | |
| </div> | |
| <div class="form-group color-picker"> | |
| <label>Bar & Quote Mark Color</label> | |
| <div class="color-input-wrapper"> | |
| <input type="color" id="barColor" value="#4f46e5" /> | |
| <input | |
| type="text" | |
| id="barColorText" | |
| value="#4f46e5" | |
| class="color-text" | |
| /> | |
| </div> | |
| </div> | |
| <div class="form-group color-picker"> | |
| <label>Quote Text Color</label> | |
| <div class="color-input-wrapper"> | |
| <input type="color" id="textColor" value="#1e293b" /> | |
| <input | |
| type="text" | |
| id="textColorText" | |
| value="#1e293b" | |
| class="color-text" | |
| /> | |
| </div> | |
| </div> | |
| <div class="form-group color-picker"> | |
| <label>Author Color</label> | |
| <div class="color-input-wrapper"> | |
| <input type="color" id="authorColor" value="#64748b" /> | |
| <input | |
| type="text" | |
| id="authorColorText" | |
| value="#64748b" | |
| class="color-text" | |
| /> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="font-section"> | |
| <div class="form-group font-controls"> | |
| <label>Quote Font Style</label> | |
| <div class="font-selectors"> | |
| <select id="quoteFontFamily" class="font-select"> | |
| <option value="">Loading fonts...</option> | |
| </select> | |
| <select id="quoteFontStyle" class="font-select"> | |
| <option value="normal">Normal</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="form-group font-controls"> | |
| <label>Author Font Style</label> | |
| <div class="font-selectors"> | |
| <select id="authorFontFamily" class="font-select"> | |
| <option value="">Loading fonts...</option> | |
| </select> | |
| <select id="authorFontStyle" class="font-select"> | |
| <option value="normal">Normal</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label>Bar Width <span id="barWidthValue">4px</span></label> | |
| <input | |
| type="range" | |
| id="barWidth" | |
| min="2" | |
| max="10" | |
| value="4" | |
| class="slider" | |
| oninput="document.getElementById('barWidthValue').textContent = this.value + 'px'" | |
| /> | |
| </div> | |
| <div class="btn-group"> | |
| <button class="btn btn-primary" onclick="generateQuote()"> | |
| <span class="btn-text">Generate</span> | |
| <div class="btn-loader"></div> | |
| </button> | |
| <button class="btn btn-success" onclick="downloadQuote()"> | |
| Download | |
| </button> | |
| <button class="btn btn-secondary" onclick="viewRequests()"> | |
| View Requests | |
| </button> | |
| </div> | |
| </div> | |
| <div class="panel"> | |
| <h2>Preview</h2> | |
| <div id="preview-container"> | |
| <img id="quoteImage" alt="Generated Quote" /> | |
| <div id="loading" class="loading"> | |
| <div class="loading-content"> | |
| <div class="loading-spinner"></div> | |
| <span>Generating quote...</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="requestsModal" class="modal"> | |
| <div class="modal-content"> | |
| <span class="close-btn" onclick="closeModal()">×</span> | |
| <h2>Request History</h2> | |
| <div id="requestsList" class="requests-list"></div> | |
| </div> | |
| </div> | |
| <div id="status"></div> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> | |