Project Journal

This is an old revision of the document!

Webpage Pieces

General collection of potentially useful bits of raw HTML that may or may not at all be useful to you.

The Ramble Meter

I wanted a simple way to indicate how trustworthy and polished my posts are - it allows me to post stuff that is less structured while also indicating this clearly to the reader.

<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ramble Meter</title>
  <style>
    /* Container for the entire Ramble Meter */
    .ramble-meter-container {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 20px 0;
    }
 
    /* Ramble Meter */
    .ramble-meter {
      position: relative;
      width: 200px; /* Scaled down */
      height: 40px; /* Scaled down */
      background: linear-gradient(to right, green, yellow, orange, red);
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }
 
    /* Needle */
    .needle {
      position: absolute;
      top: 5px; /* Adjust for centering */
      left: 50%; /* Default position */
      width: 4px; /* Visible width */
      height: 30px;
      background: black;
      border-radius: 2px;
      z-index: 2;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Glow effect */
    }
 
    /* Label in the middle of the meter */
    .meter-label {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-family: Arial, sans-serif;
      font-size: 12px; /* Adjusted for smaller size */
      font-weight: bold;
      color: #fff;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
      z-index: 3;
    }
 
    /* Tooltip styling */
    .tooltip {
      visibility: hidden;
      width: 250px;
      background-color: #222;
      color: #fff;
      text-align: center;
      padding: 10px;
      border-radius: 5px;
      position: absolute;
      top: 50%; /* Vertically aligned */
      left: 110%; /* Position to the right of the meter */
      transform: translateY(-50%);
      font-size: 12px;
      z-index: 10;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    }
 
    /* Show tooltip on hover */
    .ramble-meter:hover + .tooltip {
      visibility: visible;
    }
 
    /* Wrapper for positioning the tooltip and meter */
    .ramble-wrapper {
      position: relative;
      display: flex;
      align-items: center;
    }
  </style>
  <script>
    document.addEventListener("DOMContentLoaded", () => {
      const needle = document.querySelector(".needle");
      const rambleMeter = document.querySelector(".ramble-meter");
      const level = rambleMeter.getAttribute("data-level"); // Read the level from the attribute (0-100)
      needle.style.left = `${Math.min(Math.max(level, 0), 100)}%`; // Clamp between 0 and 100
    });
  </script>
</head>
<body>
  <!-- Ramble Meter -->
  <div class="ramble-meter-container">
    <div class="ramble-wrapper">
      <div class="ramble-meter" data-level="10"> <!-- Adjust level here (0-100) -->
        <div class="meter-label">Ramble Meter</div>
        <div class="needle"></div>
      </div>
      <div class="tooltip">This post is very close to being completely finished. Not that rambly at all.</div>
    </div>
  </div>
</body>
</html>