Added logo to flasher

This commit is contained in:
Brent Perteet
2025-10-14 09:50:35 -05:00
parent 5a893a034c
commit bca2f6ea9c
7 changed files with 131 additions and 286 deletions

View File

@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ESP32 Firmware Flasher</title>
<title>SoundShot Firmware Flasher</title>
<script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
<style>
* {
@@ -14,7 +14,7 @@
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background: linear-gradient(135deg, #d94125 0%, #a33318 100%);
min-height: 100vh;
padding: 20px;
display: flex;
@@ -31,15 +31,30 @@
padding: 40px;
}
.header {
text-align: center;
margin-bottom: 30px;
background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%);
padding: 40px 20px 30px 20px;
margin: -40px -40px 30px -40px;
border-radius: 12px 12px 0 0;
}
.logo {
max-width: 450px;
width: 100%;
height: auto;
margin-bottom: 10px;
}
h1 {
color: #667eea;
color: #c04026;
margin-bottom: 10px;
font-size: 28px;
}
.subtitle {
color: #666;
margin-bottom: 30px;
color: #d0d0d0;
font-size: 14px;
}
@@ -68,7 +83,7 @@
input[type="text"]:focus,
select:focus {
outline: none;
border-color: #667eea;
border-color: #c04026;
}
.file-input-wrapper {
@@ -95,15 +110,15 @@
}
.file-input-label:hover {
border-color: #667eea;
background: #f8f9ff;
border-color: #c04026;
background: #fef6f4;
}
.file-selected {
border-color: #667eea;
border-color: #c04026;
border-style: solid;
background: #f8f9ff;
color: #667eea;
background: #fef6f4;
color: #c04026;
}
.btn {
@@ -118,13 +133,13 @@
}
.btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background: linear-gradient(135deg, #d94125 0%, #a33318 100%);
color: white;
}
.btn-primary:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
box-shadow: 0 10px 20px rgba(217, 65, 37, 0.3);
}
.btn:disabled {
@@ -198,7 +213,7 @@
.progress-bar-fill {
height: 100%;
background: linear-gradient(90deg, #667eea, #764ba2);
background: linear-gradient(90deg, #d94125, #a33318);
width: 0%;
transition: width 0.3s ease-out;
}
@@ -216,7 +231,7 @@
.progress-text {
text-align: center;
font-size: 13px;
color: #667eea;
color: #c04026;
font-weight: 600;
margin-top: 5px;
display: none;
@@ -278,8 +293,10 @@
</head>
<body>
<div class="container">
<h1>ESP32 Firmware Flasher</h1>
<p class="subtitle">Flash firmware packages to ESP32 devices</p>
<div class="header">
<img src="/static/SoundShot.png" alt="SoundShot" class="logo">
<p class="subtitle">Firmware Flasher</p>
</div>
<form id="flashForm">
<div class="port-section">