Changed around line 1
+
+
+
+
+
+
Daily Activity Tracker+
+ html {
+ transition: opacity0.5s;
+ }
+ body {
+ font-family: Arial, sans-serif;
+ margin: 20px auto;
+ width: 300px;
+ }
+ .legend {
+ display: flex;
+ justify-content: space-around;
+ gap: 5x;
+ margin-bottom: 20px;
+ }
+ .slider-container {
+ display: flex;
+ align-items: center;
+ margin: 5px 0;
+ }
+ .slider {
+ margin-left: 10px;
+ width: 500px;
+ }
+ .slider {
+ -webkit-appearance: none;
+ width: 100%; /* Full width */
+ height: 8px;
+ background: transparent;
+ margin-left: 10px;
+ position: relative;
+ }
+ .slider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ appearance: none;
+ width: 50px;
+ height: 22px; /* Height of the thumb */
+ background: #4caf50;
+ border: none;
+ border-radius: 2px;
+ cursor: pointer; /* Cursor style */
+ position: relative; /* Position for the thumb */
+ top: -2px;
+ }
+ .label {
+ width: 50px;
+ text-align: center;
+ }
+ .hour {
+ width: 30px;
+ text-align: right;
+ }
+
+
+
+
+
+
+ function createHourRows() {
+ const container = document.getElementById("hours-container");
+
+ for (let hour = 0; hour < 24; hour++) {
+ const row = document.createElement("div");
+ row.className = "slider-container";
+
+ const hourLabel = document.createElement("div");
+ hourLabel.className = "hour";
+ hourLabel.textContent = `${hour}:00`;
+ row.appendChild(hourLabel);
+
+ const slider = document.createElement("input");
+ slider.type = "range";
+ slider.min = 0;
+ slider.max = 2;
+ slider.value = 1;
+ slider.className = "slider";
+
+ row.appendChild(slider);
+ container.appendChild(row);
+ }
+ }
+
+ // Initialize the hour rows
+ createHourRows();
+
+
+