Skip to content

Commit 61c95b4

Browse files
author
anton_artemov
committed
UI updates
1 parent 9e45d94 commit 61c95b4

File tree

4 files changed

+684
-587
lines changed

4 files changed

+684
-587
lines changed

‎fs/index.html‎

Lines changed: 56 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
<html lang="en"><head>
1+
<html lang="en">
2+
<head>
23
<title>GameBoy Camera Adapter</title>
3-
</head><body><button id="firmware-version-btn" onclick="showFirmwarePopup()" style="color:white;position:absolute;margin:1rem;right:0;top:0;font-size: 1em;text-decoration: underline;">Settings</button>
4-
4+
</head>
5+
<body>
6+
<button id="firmware-version-btn" onclick="showFirmwarePopup()" style="color:white;position:absolute;margin:1rem;right:0;top:0;font-size: 1em;text-decoration: underline;">Settings</button>
57
<link rel="icon" type="image/png" href="/img/favicon-96x96.png" sizes="96x96">
68
<link rel="icon" type="image/svg+xml" href="/img/favicon.svg">
79
<link rel="shortcut icon" href="/img/favicon.ico">
@@ -16,58 +18,53 @@
1618
<meta name="theme-color" content="#ece6e6">
1719
<meta name="viewport" content="width=device-width, initial-scale=1">
1820
<link rel="stylesheet" href="styles.css">
19-
<script defer="" src="script.js"></script>
20-
21-
2221
<!-- Firmware Update Dialog -->
23-
<div id="fw-popup" class="popup-overlay" style="display: none;">
24-
<div class="popup-container">
25-
26-
<div style="display: flex; flex-direction: column; align-items: center; background: #266d3f; padding: 2rem; border-radius: 10px; width: 100%; max-width: 500px;">
27-
<!-- Close Button -->
28-
<button class="close-btn" onclick="closeFirmwarePopup()">✕</button>
29-
30-
<p id="firmware-version-text" style="color: white; font-size: 1.5rem; margin-bottom: 2rem;">Current firmware is v1.4.2</p>
31-
32-
<!-- Color Picker + Button -->
33-
<div class="settings-container">
34-
<div style="/* flex:1; */display: flex;flex-direction: row;align-content: center;">
35-
<label class="led-color">
36-
<input type="color" id="ledColorPicker" value="#00ff00" style="position: absolute;
37-
cursor: pointer;
38-
opacity: 0;">
39-
<div id="colorPreview" style="width: 52px;
40-
height: 28px;
41-
background-color: #00ff00;
42-
cursor: pointer;">
43-
</div>
44-
</label>
45-
<label style="color: white;font-size: 1rem;text-align: left;flex: 1;align-content: center;margin-left: 1rem;">Choose LED color</label>
46-
</div>
47-
48-
<!-- Color Mode Selector -->
49-
<div style="display: flex;justify-content: space-between;align-items: center;width: 100%;margin-top: 1rem;">
50-
<label class="switch">
51-
<input type="checkbox" id="colorMode">
52-
<span class="slider round"></span>
53-
</label>
54-
55-
<label for="colorMode" style="color: white;font-size: 1rem;text-align: left;">If color not as expected, switch this</label>
56-
22+
<div id="fw-popup" class="popup-overlay" style="display: none;">
23+
<div class="popup-container">
24+
<div style="display: flex; flex-direction: column; align-items: center; background: #266d3f; padding: 2rem; border-radius: 10px; width: 100%; max-width: 500px;">
25+
<!-- Close Button -->
26+
<button class="close-btn" onclick="closeFirmwarePopup()">✕</button>
27+
<p id="firmware-version-text" style="color: white; font-size: 1.5rem; margin-bottom: 2rem;">Current firmware is v1.4.2</p>
28+
<!-- Color Picker + Button -->
29+
<div class="settings-container">
30+
<div style="/* flex:1; */display: flex;flex-direction: row;align-content: center;">
31+
<label class="led-color">
32+
<input type="color" id="ledColorPicker" value="#00ff00" style="position: absolute;
33+
cursor: pointer;
34+
opacity: 0;">
35+
<div id="colorPreview" style="width: 52px;
36+
height: 28px;
37+
background-color: #00ff00;
38+
cursor: pointer;">
5739
</div>
58-
59-
<button onclick="setLedColor()">Set LED Color</button>
60-
61-
</div>
62-
63-
<!-- Firmware Controls -->
64-
<button class="darkgreen" onclick="checkForUpdate()">Check for Update</button>
65-
66-
<button class="red" onclick="startUpdate()">Update</button>
67-
<label style="color: white;font-size: 0.7rem;text-align: center;margin-top: 1rem;">Click here only to update Adapter Firmware</label></div>
40+
</label>
41+
<label style="color: white;font-size: 1rem;text-align: left;flex: 1;align-content: center;margin-left: 1rem;">Choose LED color</label>
42+
</div>
43+
<!-- Color Mode Selector -->
44+
<div style="display: flex;justify-content: space-between;align-items: center;width: 100%;margin-top: 1rem;">
45+
<label class="switch">
46+
<input type="checkbox" id="colorMode" checked>
47+
<span class="slider round"></span>
48+
</label>
49+
<label for="colorMode" style="color: white;font-size: 1rem;text-align: left;">If color not as expected, switch this</label>
50+
</div>
51+
<button onclick="setLedColor()">Set LED Color</button>
52+
</div>
53+
<!-- Firmware Controls -->
54+
<button class="darkgreen" onclick="checkForUpdate()">Check for Update</button>
55+
<button class="red" onclick="startUpdate()">Update</button>
56+
<label style="color: white;font-size: 0.7rem;text-align: center;margin-top: 1rem;">Click here only to update Adapter Firmware</label>
6857
</div>
69-
</div>
70-
58+
</div>
59+
</div>
60+
<div id="general-popup" class="popup-overlay" style="display:none;">
61+
<div class="popup-container">
62+
<div class="general-popup-content"
63+
style="display:flex; flex-direction:column; align-items:center; background:#266d3f; padding: 2rem; border-radius: 10px; color: white; padding: 60px;">
64+
</div>
65+
<button class="close-btn" onclick="closeGeneralPopup()">✕</button>
66+
</div>
67+
</div>
7168
<div id="content" class="container">
7269
<div id="header">
7370
<div id="update-alert" style="display:none; color: yellow; font-size: 12px; text-align: center; padding: 10px;">
@@ -89,6 +86,9 @@
8986
</div>
9087
<br>
9188
</div>
89+
<div>
90+
<button id="save_all_btn" style="display:none" onclick="saveAllPictures()">Save All</button>
91+
</div>
9292
<div id="gallery"></div>
9393
</div>
9494
<p id="description">Start printing on your Game Boy<br>Photos will appear on this page</p>
@@ -102,5 +102,7 @@
102102
</a>
103103
</div>
104104
</footer>
105-
106-
</body></html>
105+
106+
<script defer="" src="script.js"></script>
107+
</body>
108+
</html>

0 commit comments

Comments
 (0)