Differences

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

--- start [2024/12/06 15:39] – kymki
+++ start [2025/04/15 10:24] (current) – kymki
@@ Line 5: / Line 5: @@
     <p>
         Welcome to my <strong>project journal</strong>, my place for tracking, organizing, and sharing projects.<br/><br/>
-        Here, I document my ongoing work, research, and ideas in a clear, structured format.<br/><br/>
+        It is not a landing page for my personal brand. It is maintained as a digital garden - pruned, reshaped, parts wild, parts neat - for ongoing work, research, and ideas.<br/><br/>
         The site is meant to serve as both a personal archive and a way to share my work with collaborators and visitors like you. <br/><br/>
         It’s built with simplicity and functionality in mind.<br/><br/>
+        For your own safety, use the Ramble Meter as an indicator of the state of the information in a post.<br/><br/>
+        In the <strong>top right corner</strong> toggle dark mode if that interests you.<br/><br/>
     </p>
@@ Line 14: / Line 16: @@
 </html>
-<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;
-      flex-direction: column;
-      justify-content: center;
-      margin: 20px 0;
-    }
-    /* Name integrated as part of the meter */
-    .ramble-meter {
-      position: relative;
-      width: 300px;
-      height: 60px;
-      background: linear-gradient(to right, green, yellow, orange, red);
-      border-radius: 30px;
-      overflow: hidden;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-    }
-    /* Needle with enhanced styling */
-    .needle {
-      position: absolute;
-      top: 10px; /* Adjusted for better centering */
-      left: 50%; /* Default position */
-      width: 6px; /* Thicker needle */
-      height: 40px;
-      background: #000;
-      border-radius: 3px;
-      transform-origin: center bottom;
-      z-index: 2;
-      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Glow effect */
-    }
-    /* Name placed 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: 16px;
-      font-weight: bold;
-      color: #fff;
-      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Glow effect for text */
-      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: -70px;
-      left: 50%;
-      transform: translateX(-50%);
-      font-size: 12px;
-      z-index: 10;
-      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
-    }
-    /* Show tooltip on hover */
-    .ramble-meter-container:hover .tooltip {
-      visibility: visible;
-    }
-  </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="tooltip">Warning: Ramble level is high! 🗣️</div>
-    <div class="ramble-meter" data-level="80"> <!-- Adjust level here (0-100) -->
-      <div class="meter-label">Ramble Meter</div>
-      <div class="needle"></div>
-    </div>
-  </div>
-</body>
-</html>