add notifications and better url handling

This commit is contained in:
Dennis Gunia
2025-10-22 23:11:02 +02:00
parent 1ae8180df4
commit b24b5f674e
3 changed files with 192 additions and 66 deletions

View File

@@ -15,31 +15,12 @@ of the license in the project repository or at <https://www.gnu.org/licenses/agp
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<link rel="stylesheet" href="css/pico.min.css">
<link rel="stylesheet" href="css/sfc.css">
<script type="text/javascript" src="js/sfc.js"></script>
<title>Hello world!</title>
</head>
<body>
<dialog id="dialog_change_calibration">
<article>
<h2>Change calibration</h2>
<section>
<form id="form_change_calibration">
<label>
New calibration data (default 1400):
<input id="form_change_calibration_data" name="calibration" type="number"
placeholder="Calibration Value" value="1400" />
</label>
</form>
<footer>
<button class="secondary btn_cancel">
Cancel
</button>
<button class="btn_confirm">Confirm</button>
</footer>
</article>
</dialog>
<dialog id="change_address">
<article>
<h2>Change address</h2>
@@ -88,6 +69,14 @@ of the license in the project repository or at <https://www.gnu.org/licenses/agp
</dialog>
<main class="container">
<div id="message_container" style="width: 100%;" class="notification-container">
<template id="notification">
<div class="notification">
<p>Notification</p>
</div>
</template>
</div>
<nav>
<ul>
<li><strong>SplitFlap</strong></li>
@@ -95,7 +84,7 @@ of the license in the project repository or at <https://www.gnu.org/licenses/agp
<ul>
<li><a onclick="changeView('view_display')" class="secondary">Display</a></li>
<li>
<details class="dropdown">
<details class="dropdown" id="menu_dropdown">
<summary>
Configuration
</summary>
@@ -108,6 +97,7 @@ of the license in the project repository or at <https://www.gnu.org/licenses/agp
</li>
</ul>
</nav>
<div id="view_display"><!-- Main View : print -->
<h1>Display Something!</h1>
<form id="form_display">
@@ -123,6 +113,16 @@ of the license in the project repository or at <https://www.gnu.org/licenses/agp
<input id="form_display_y" name="y" type="y" placeholder="Position Y" value="0" />
</fieldset>
</label>
<label>
Display Mode:
<select id="form_display_mode" name="mode" required>
<option selected disabled value="">
Select display mode
</option>
<option value="true">Full Rotation</option>
<option value="false">Direct</option>
</select>
</label>
</fieldset>
<input type="button" onClick="btn_display()" value="Display" />
@@ -218,10 +218,10 @@ of the license in the project repository or at <https://www.gnu.org/licenses/agp
</div>
<div id="view_storage" style="display: none;"><!-- Main View : print -->
<h1>Load/Save Config!</h1>
<div role="group">
<div role="group">
<button class="btn_load" onclick="btn_load()">Load Config</button>
</div>
<div role="group">
<div role="group">
<button class="btn_save" onclick="btn_save()">Safe Config</button>
</div>
</div>