skinny · December 21, 2024 09:54
diff --git a/progress.html b/progress.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Progress Bar</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      margin: 50px;
    }
    .progress-container {
      width: 80%;
      background-color: #f3f3f3;
      border: 1px solid #ddd;
      border-radius: 10px;
      margin: 20px auto;
      height: 30px;
      position: relative;
    }
    .progress-bar {
      height: 100%;
      background-color: #4caf50;
      width: 0%;
      border-radius: 10px;
      transition: width 0.3s ease;
    }
    .progress-text {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
    }
  </style>
 </head>
 <body>
  <h1>Workday Progress</h1>
  <div class="progress-container">
    <div class="progress-bar" id="progress-bar"></div>
    <div class="progress-text" id="progress-text">0%</div>
  </div>

  <script>
    function calculateProgress() {
      const startHour = 9;
      const endHour = 18;

      const now = new Date();
      const totalMinutes = (endHour - startHour) * 60;

      const startTime = new Date();
      startTime.setHours(startHour, 0, 0, 0);

      const endTime = new Date();
      endTime.setHours(endHour, 0, 0, 0);

      let progress = 0;

      if (now >= startTime && now <= endTime) {
        const elapsedMinutes = (now - startTime) / (1000 * 60);
        progress = (elapsedMinutes / totalMinutes) * 100;
      } else if (now > endTime) {
        progress = 100;
      }

      return Math.min(Math.max(progress, 0), 100).toFixed(2); // Ensure the value is between 0 and 100
    }

    function updateProgressBar() {
      const progress = calculateProgress();
      const progressBar = document.getElementById("progress-bar");
      const progressText = document.getElementById("progress-text");

      progressBar.style.width = `${progress}%`;
      progressText.textContent = `${progress}%`;
    }

    updateProgressBar();
    setInterval(updateProgressBar, 1000); // Update progress every second
  </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Progress Bar</title>
	<style>
	body {
	font-family: Arial, sans-serif;
	text-align: center;
	margin: 50px;
	}
	.progress-container {
	width: 80%;
	background-color: #f3f3f3;
	border: 1px solid #ddd;
	border-radius: 10px;
	margin: 20px auto;
	height: 30px;
	position: relative;
	}
	.progress-bar {
	height: 100%;
	background-color: #4caf50;
	width: 0%;
	border-radius: 10px;
	transition: width 0.3s ease;
	}
	.progress-text {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	}
	</style>
	</head>
	<body>
	<h1>Workday Progress</h1>
	<div class="progress-container">
	<div class="progress-bar" id="progress-bar"></div>
	<div class="progress-text" id="progress-text">0%</div>
	</div>

	<script>
	function calculateProgress() {
	const startHour = 9;
	const endHour = 18;

	const now = new Date();
	const totalMinutes = (endHour - startHour) * 60;

	const startTime = new Date();
	startTime.setHours(startHour, 0, 0, 0);

	const endTime = new Date();
	endTime.setHours(endHour, 0, 0, 0);

	let progress = 0;

	if (now >= startTime && now <= endTime) {
	const elapsedMinutes = (now - startTime) / (1000 * 60);
	progress = (elapsedMinutes / totalMinutes) * 100;
	} else if (now > endTime) {
	progress = 100;
	}

	return Math.min(Math.max(progress, 0), 100).toFixed(2); // Ensure the value is between 0 and 100
	}

	function updateProgressBar() {
	const progress = calculateProgress();
	const progressBar = document.getElementById("progress-bar");
	const progressText = document.getElementById("progress-text");

	progressBar.style.width = `${progress}%`;
	progressText.textContent = `${progress}%`;
	}

	updateProgressBar();
	setInterval(updateProgressBar, 1000); // Update progress every second
	</script>
	</body>
	</html>