Files
2026-02-10 22:13:05 +01:00

209 lines
9.1 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EvilCrow RF V2 — Web Flasher</title>
<meta name="description" content="Flash EvilCrow RF V2 firmware directly from your browser. No drivers, no CLI — just connect and flash.">
<!-- Favicon -->
<link rel="icon" type="image/png" href="media/Logo_App.png">
<!-- Styles -->
<link rel="stylesheet" href="style.css">
<!-- SVG filter for scratched text effect -->
<svg width="0" height="0" style="position:absolute">
<defs>
<filter id="scratched">
<feTurbulence type="fractalNoise" baseFrequency="0.04 0.15" numOctaves="4" result="noise"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="2" xChannelSelector="R" yChannelSelector="G"/>
</filter>
</defs>
</svg>
</head>
<body>
<!-- ═══════════════════════ HERO / BANNER ═══════════════════════ -->
<header class="hero">
<div class="hero-bg">
<img src="media/Banner.png" alt="EvilCrow RF V2 Banner">
</div>
<div class="hero-content">
<!-- Animated Logo -->
<div class="logo-container">
<img src="media/Logo_App.png" alt="EvilCrow RF V2 Logo">
</div>
<!-- Title with flashing V2 -->
<h1 class="hero-title">
EvilCrow RF <span class="v2-text">V2</span>
</h1>
<p class="hero-subtitle">Web Firmware Flasher</p>
<!-- Hero Buttons -->
<div class="hero-actions">
<a href="#flash-section" id="go-flash" class="btn btn-primary">
⚡ Flash Firmware
</a>
<a href="https://github.com/Senape3000/EvilCrowRF-V2"
target="_blank" rel="noopener" class="btn btn-github">
<!-- GitHub icon -->
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/>
</svg>
GitHub
</a>
<a href="https://ko-fi.com/senape3000"
target="_blank" rel="noopener" class="btn btn-donate">
☕ Donate
</a>
</div>
</div>
</header>
<!-- ═══════════════════════ MAIN CONTENT ═══════════════════════ -->
<main class="container">
<!-- ─── Flash Section ─── -->
<section id="flash-section" class="section">
<h2 class="section-title">
<span class="icon"></span> Flash Firmware
</h2>
<!-- Quick Instructions -->
<div class="steps">
<div class="step">
<span class="step-icon">🔌</span>
<span class="step-number">1</span>
<p class="step-text">Connect EvilCrow RF V2 via <strong>USB</strong> to your computer</p>
</div>
<div class="step">
<span class="step-icon">📋</span>
<span class="step-number">2</span>
<p class="step-text">Select the <strong>firmware version</strong> you want to install</p>
</div>
<div class="step">
<span class="step-icon">🚀</span>
<span class="step-number">3</span>
<p class="step-text">Click <strong>"Flash Firmware"</strong> and choose the serial port</p>
</div>
<div class="step">
<span class="step-icon"></span>
<span class="step-number">4</span>
<p class="step-text">Wait for the flash to complete — <strong>done!</strong></p>
</div>
</div>
<!-- Flash Panel -->
<div class="flash-panel">
<!-- Status -->
<div class="status-indicator">
<span id="status-dot" class="status-dot loading"></span>
<span id="status-text">Connecting...</span>
</div>
<!-- Version selector -->
<div class="version-row">
<label for="version-select">Firmware:</label>
<select id="version-select" class="version-select">
<option disabled selected>Loading releases...</option>
</select>
<span class="version-badge" id="fw-latest-badge">● LATEST</span>
</div>
<!-- Firmware info row -->
<div class="version-row" style="margin-bottom: 8px;">
<label>Tag:</label>
<span id="fw-info-tag" style="font-family:'Share Tech Mono',monospace; color:var(--accent-red);"></span>
<label>Size:</label>
<span id="fw-info-size" style="font-family:'Share Tech Mono',monospace;"></span>
<label>Date:</label>
<span id="fw-info-date" style="font-family:'Share Tech Mono',monospace;"></span>
</div>
<!-- ESP Web Install Button -->
<div class="flash-btn-wrap">
<esp-web-install-button id="esp-install-btn" manifest="">
<button slot="activate">⚡ Flash Firmware</button>
<span slot="unsupported">
⚠️ Web Serial is not supported by your browser.<br>
Please use <strong>Google Chrome</strong> or <strong>Microsoft Edge</strong> (desktop).
</span>
<span slot="not-allowed">
🔒 Web Serial requires a secure context (HTTPS).<br>
Please access this page over HTTPS.
</span>
</esp-web-install-button>
</div>
<!-- Download section -->
<div class="download-section">
<a id="apk-download-btn" href="#" target="_blank" rel="noopener"
class="btn btn-secondary hidden"
download>
📱 Download Android App <span class="apk-version"></span>
</a>
</div>
</div>
<!-- macOS-style Terminal -->
<div class="terminal">
<div class="terminal-titlebar">
<span class="terminal-dot red"></span>
<span class="terminal-dot yellow"></span>
<span class="terminal-dot green"></span>
<span class="terminal-title">evilcrow-flasher — log</span>
</div>
<div class="terminal-body" id="terminal-body">
<!-- Log lines injected by JS -->
</div>
</div>
</section>
<!-- ─── Changelog Section ─── -->
<section class="section">
<h2 class="section-title">
<span class="icon">📝</span> Changelog
</h2>
<div class="changelog-panel" id="changelog-content">
<p style="color:var(--text-secondary); font-family:'Share Tech Mono',monospace;">
<span class="spinner"></span> Loading changelog...
</p>
</div>
</section>
</main>
<!-- ═══════════════════════ FOOTER ═══════════════════════ -->
<footer class="footer">
<div class="footer-links">
<a href="https://github.com/Senape3000/EvilCrowRF-V2"
target="_blank" rel="noopener" class="footer-link">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/>
</svg>
GitHub Repository
</a>
<a href="https://ko-fi.com/senape3000"
target="_blank" rel="noopener" class="footer-link">
☕ Support on Ko-fi
</a>
</div>
<p class="footer-copy">
EvilCrow RF V2 &copy; 2025-2026 Senape3000 — Open Source Hardware &amp; Firmware
</p>
</footer>
<!-- ═══════════════════════ SCRIPTS ═══════════════════════ -->
<!-- ESP Web Tools (local) -->
<script type="module" src="esp-web-tools/install-button.js"></script>
<!-- App logic -->
<script src="app.js"></script>
</body>
</html>