105 lines
3.7 KiB
HTML
105 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>ASCII Art Generator</title>
|
|
<link rel="stylesheet" href="/static/style.css">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
|
|
<header>
|
|
<h1><span class="glyph">✦</span> ASCII Art Generator <span class="glyph">✦</span></h1>
|
|
</header>
|
|
|
|
<!-- Controls Bar -->
|
|
<div class="controls">
|
|
<div class="upload-zone" id="dropZone">
|
|
<span class="upload-icon">🎨</span>
|
|
<p><label for="fileInput" class="browse-link">Upload image</label></p>
|
|
<input type="file" id="fileInput" accept="image/png,image/jpeg,image/gif,image/webp" hidden>
|
|
</div>
|
|
<div id="fileInfo" class="file-info" style="display:none">
|
|
<img id="thumbPreview" class="thumb">
|
|
<div>
|
|
<span id="fileName"></span>
|
|
<button id="clearFile" class="btn-small" title="Clear">×</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-grid">
|
|
<div class="setting">
|
|
<label for="palette">Palette</label>
|
|
<select id="palette">
|
|
{% for name in palettes %}
|
|
<option value="{{ name }}" {{ 'selected' if name == 'hires' else '' }}>
|
|
{{ name }} {{ palette_previews[name] }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="setting">
|
|
<label for="width">Width <span id="widthVal">200</span></label>
|
|
<input type="range" id="width" min="40" max="500" value="200">
|
|
</div>
|
|
<div class="setting">
|
|
<label for="bg">BG</label>
|
|
<select id="bg">
|
|
<option value="dark" selected>Dark</option>
|
|
<option value="light">Light</option>
|
|
</select>
|
|
</div>
|
|
<div class="setting checkbox-group">
|
|
<label><input type="checkbox" id="dither"> Dither</label>
|
|
<label><input type="checkbox" id="doubleWidth"> 2x</label>
|
|
</div>
|
|
</div>
|
|
|
|
<button id="generateBtn" class="btn-generate" disabled>Generate</button>
|
|
</div>
|
|
|
|
<!-- Preview (fills viewport) -->
|
|
<div class="preview-wrapper">
|
|
<div class="preview-container">
|
|
<div class="preview-bar">
|
|
<span class="preview-title">Preview</span>
|
|
<div class="preview-actions">
|
|
<div class="zoom-controls">
|
|
<button id="zoomOut" title="Zoom out (-)">−</button>
|
|
<span id="zoomLevel" class="zoom-level">100%</span>
|
|
<button id="zoomIn" title="Zoom in (+)">+</button>
|
|
<button id="zoomFit" class="btn-small" title="Fit to view" style="font-size:10px">Fit</button>
|
|
</div>
|
|
<button id="fullscreenBtn" class="btn-fullscreen" title="Fullscreen (F)">⛶</button>
|
|
<button id="copyBtn" class="btn-small" title="Copy plain text" style="display:none">Copy</button>
|
|
<button id="downloadBtn" class="btn-small" title="Download HTML" style="display:none">Download</button>
|
|
<span id="gifIndicator" class="gif-badge" style="display:none">GIF ▶</span>
|
|
</div>
|
|
</div>
|
|
<div id="previewArea" class="preview-area">
|
|
<p class="placeholder">Your ASCII art will appear here</p>
|
|
</div>
|
|
<div id="compareBox" class="compare-box" style="display:none">
|
|
<div class="compare-header">
|
|
<span>Original</span>
|
|
<button id="compareToggle" class="btn-small" title="Minimize">▼</button>
|
|
</div>
|
|
<img id="compareImg" class="compare-img">
|
|
</div>
|
|
<div id="spinner" class="spinner" style="display:none">
|
|
<div class="spin-anim"></div>
|
|
<span>Rendering...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer>
|
|
<p>Powered by Unicode · <a href="https://jeffemmett.com">jeffemmett.com</a></p>
|
|
</footer>
|
|
|
|
<script src="/static/app.js"></script>
|
|
</body>
|
|
</html>
|