Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Next revision		Previous revision
projects:unsorted:webpage_pieces [2024/12/06 16:10] – created kymkiprojects:unsorted:webpage_pieces [2024/12/06 16:34] (current) – kymki
Line 1: Line 1:
 +====== Webpage Pieces ======
 +
 General collection of potentially useful bits of raw HTML that may or may not at all be useful to you. General collection of potentially useful bits of raw HTML that may or may not at all be useful to you.
  
 ===== The Ramble Meter ===== ===== 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.+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. This is the raw html to copy and paste wherever: 
 + 
 +<code> 
 + 
 +<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> 
 +</code> 
 + 
 +Which if wrapped in html tags in a docuwiki like this one yields: 
 + 
 +<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="90"> <!-- Adjust level here (0-100) --> 
 +        <div class="meter-label">Ramble Meter</div> 
 +        <div class="needle"></div> 
 +      </div> 
 +      <div class="tooltip">Warning: EXTREME RAMBLE AHEAD.</div> 
 +    </div> 
 +  </div> 
 +</body> 
 +</html>