Skip to content

Commit

Permalink
made style.css smaller
Browse files Browse the repository at this point in the history
  • Loading branch information
@doudar
doudar committed Dec 16, 2024
1 parent e6ce772 commit 6066601
Show file tree
Hide file tree
Showing 2 changed files with 84 additions and 172 deletions.
174 changes: 82 additions & 92 deletions data/btsimulator.html
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,17 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>SmartSpin2k BLE Simulator</title>
<style>html{background-color:#03245c}</style>
<style>
html {
background-color: #03245c
}
</style>
</head>

<body>
<div class="page-container">
<header>
Expand All @@ -18,103 +24,86 @@
<main>
<div id="loadingWatermark" class="watermark" aria-hidden="true">Loading</div>
<h1 class="brand">BLE Simulator</h1>

<div class="settings-section">
<div class="simulator-grid">
<div class="setting-group">
<!-- Heart Rate Simulation -->
<div class="simulator-card">
<div class="card-header">
<h2>Heart Rate</h2>
<label class="switch">
<input type="checkbox" id="hrOutput" onchange="toggleHRCheckbox(this,true)">
<span class="slider"></span>
</label>
</div>
<div class="simulator-content">
<div class="value-display">
<span id="hrValue">-- BPM</span>
</div>
<div class="slider-group">
<input type="range" id="hrSlider" min="40" max="250" value="0" step="1"
onchange="updateHrSlider()" class="simulator-slider">
</div>
</div>
<h2>Heart Rate</h2>
<label class="switch">
<input type="checkbox" id="hrOutput" onchange="toggleHRCheckbox(this,true)">
<span class="slider"></span>
</label>
<div class="value-display">
<span id="hrValue">-- BPM</span>
</div>
<div class="slider-group">
<input type="range" id="hrSlider" min="40" max="250" value="0" step="1" onchange="updateHrSlider()"
class="slider-container">
</div>
</div>

<!-- Power Output Simulation -->
<div class="simulator-card">
<div class="card-header">
<h2>Power Output</h2>
<label class="switch">
<input type="checkbox" id="wattsOutput" onchange="toggleWattsCheckbox(this,true)">
<span class="slider"></span>
</label>
</div>
<div id="wattsInputContainer" class="simulator-content">
<div class="value-display">
<span id="wattsValue">-- W</span>
<label class="auto-update">
<input type="checkbox" id="autoUpdateWatts" onclick="autoUpdateWattsClick()">
Auto Update
</label>
</div>
<div class="slider-group">
<input type="range" id="wattsSlider" min="0" max="600" value="0" step="1"
onchange="updateWattsSlider()" class="simulator-slider">
</div>
</div>
<!-- Power Output Simulation -->
<div class="setting-group">
<h2>Power Output</h2>
<label class="switch">
<input type="checkbox" id="wattsOutput" onchange="toggleWattsCheckbox(this,true)">
<span class="slider"></span>
</label>
<div class="value-display">
<span id="wattsValue">-- W</span>
<label class="auto-update">
<input type="checkbox" id="autoUpdateWatts" onclick="autoUpdateWattsClick()">
Auto Update
</label>
</div>
<div class="slider-group">
<input type="range" id="wattsSlider" min="0" max="600" value="0" step="1" onchange="updateWattsSlider()"
class="slider-container">
</div>
</div>

<!-- Cadence Simulation -->

<!-- Cadence Simulation -->
<div class="simulator-card">
<div class="card-header">
<h2>Cadence</h2>
<label class="switch">
<input type="checkbox" id="cadOutput" onchange="toggleCadCheckbox(this,true)">
<span class="slider"></span>
</label>
</div>
<div id="cadInputContainer" class="simulator-content">
<div class="value-display">
<span id="cadValue">-- RPM</span>
<label class="auto-update">
<input type="checkbox" id="autoUpdateCadence" onclick="autoUpdateCadenceClick()">
Auto Update
</label>
</div>
<div class="slider-group">
<input type="range" id="cadSlider" min="0" max="180" value="0" step="1"
onchange="updateCadSlider()" class="simulator-slider">
</div>
</div>
<div class="setting-group">
<h2>Cadence</h2>
<label class="switch">
<input type="checkbox" id="cadOutput" onchange="toggleCadCheckbox(this,true)">
<span class="slider"></span>
</label>
<div class="value-display">
<span id="cadValue">-- RPM</span>
<label class="auto-update">
<input type="checkbox" id="autoUpdateCadence" onclick="autoUpdateCadenceClick()">
Auto Update
</label>
</div>
<div class="slider-group">
<input type="range" id="cadSlider" min="0" max="180" value="0" step="1" onchange="updateCadSlider()"
class="slider-container">
</div>
</div>

<!-- ERG Mode Simulation -->
<div class="simulator-card">
<div class="card-header">
<h2>ERG Mode</h2>
<label class="switch">
<input type="checkbox" id="enableErgCheckbox" onchange="toggleEnableErgCheckbox(this)">
<span class="slider"></span>
</label>
</div>
<div class="simulator-content">
<div class="value-display">
<span id="targetWattsValue">-- W</span>
<label class="switch">
<input type="checkbox" id="targetWattsOutput" onchange="toggleTargetWattsCheckbox(this,true)">
<span class="slider"></span>
</label>
</div>
<div class="slider-group">
<input type="range" id="targetWattsSlider" min="0" max="600" value="0" step="1"
onchange="updateTargetWattsSlider()" class="simulator-slider">
</div>
</div>
<!-- ERG Mode Simulation -->
<div class="setting-group">
<h2>ERG Mode</h2>
<label class="switch">
<input type="checkbox" id="enableErgCheckbox" onchange="toggleEnableErgCheckbox(this)">
<span class="slider"></span>
</label>
<div class="value-display">
<span id="targetWattsValue">-- W</span>
<label class="switch">
<input type="checkbox" id="targetWattsOutput" onchange="toggleTargetWattsCheckbox(this,true)">
<span class="slider"></span>
</label>
</div>
<div class="slider-group">
<input type="range" id="targetWattsSlider" min="0" max="600" value="0" step="1"
onchange="updateTargetWattsSlider()" class="slider-container">
</div>
</div>
</div>
</main>
</div>
</main>
</div>

<script>
Expand All @@ -129,7 +118,7 @@ <h2>ERG Mode</h2>
document.getElementById("hrSlider").hidden = true;
document.getElementById("hrValue").hidden = true;
}

if (updateServer) {
fetch('/hrslider?value=' + (element.checked ? 'enable' : 'disable'), { method: 'GET' })
.catch(error => console.error('Error:', error));
Expand All @@ -138,7 +127,7 @@ <h2>ERG Mode</h2>

function toggleWattsCheckbox(element, updateServer) {
document.getElementById("wattsInputContainer").hidden = !element.checked;

if (updateServer) {
fetch('/wattsslider?value=' + (element.checked ? 'enable' : 'disable'), { method: 'GET' })
.catch(error => console.error('Error:', error));
Expand All @@ -147,7 +136,7 @@ <h2>ERG Mode</h2>

function toggleCadCheckbox(element, updateServer) {
document.getElementById("cadInputContainer").hidden = !element.checked;

if (updateServer) {
fetch('/cadslider?value=' + (element.checked ? 'enable' : 'disable'), { method: 'GET' })
.catch(error => console.error('Error:', error));
Expand Down Expand Up @@ -185,7 +174,7 @@ <h2>ERG Mode</h2>
function toggleTargetWattsCheckbox(element, updateServer) {
document.getElementById("targetWattsSlider").hidden = !element.checked;
document.getElementById("targetWattsValue").hidden = !element.checked;

if (updateServer) {
fetch('/targetwattsslider?value=' + (element.checked ? 'enable' : 'disable'), { method: 'GET' })
.catch(error => console.error('Error:', error));
Expand Down Expand Up @@ -281,4 +270,5 @@ <h2>ERG Mode</h2>
});
</script>
</body>
</html>

</html>
82 changes: 2 additions & 80 deletions data/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,9 +97,7 @@ nav a:hover {
}
.shift-button,
.shifter-container,
.simulator-card {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.dev-tool-card:hover,
.menu-item:hover {
background: rgba(42, 157, 244, 0.15);
Expand Down Expand Up @@ -229,81 +227,7 @@ a {
overflow: auto;
text-shadow: 0 0 4px rgba(200, 200, 200, 0.5);
}
.simulator-grid {
display: grid;
gap: 1.5rem;
padding: 1rem 0;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.simulator-card {
background: rgba(3, 37, 76, 0.6);
border-radius: 12px;
padding: 1.5rem;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.simulator-card:hover {
background: rgba(3, 37, 76, 0.8);
border-color: rgba(255, 255, 255, 0.2);
}
.card-header {
display: flex;
align-items: center;
margin-bottom: 1.5rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid rgba(42, 157, 244, 0.3);
}
.simulator-content {
padding: 1rem;
background: rgba(0, 0, 0, 0.2);
border-radius: 8px;
}
.value-display {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1.2rem;
}
.auto-update {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.7);
}
.simulator-slider {
-webkit-appearance: none;
width: 100%;
height: 6px;
background: #03254c;
border-radius: 3px;
outline: 0;
margin: 1rem 0;
}
.simulator-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
background: #2a9df4;
border-radius: 50%;
cursor: pointer;
border: 2px solid #fff;
transition: background 0.2s;
}
.simulator-slider::-moz-range-thumb {
width: 20px;
height: 20px;
background: #2a9df4;
border-radius: 50%;
cursor: pointer;
border: 2px solid #fff;
transition: background 0.2s;
}
.simulator-slider:focus::-webkit-slider-thumb {
box-shadow: 0 0 0 3px rgba(42, 157, 244, 0.4);
}
.simulator-slider:focus::-moz-range-thumb {
box-shadow: 0 0 0 3px rgba(42, 157, 244, 0.4);
}

.shifter-container {
max-width: 600px;
margin: 2rem auto;
Expand Down Expand Up @@ -916,7 +840,6 @@ footer {
.dev-tools-grid,
.menu-grid,
.metrics-grid,
.simulator-grid,
.status-grid {
grid-template-columns: 1fr;
}
Expand Down Expand Up @@ -944,7 +867,6 @@ footer {
}
.menu-item,
.metric-card,
.simulator-card,
.status-group {
padding: 1.25rem;
}
Expand Down

0 comments on commit 6066601

Please sign in to comment.