current status of senka's userpage

4 months ago · 901cdafc10
commit 901cdafc10
3 changed files with 151 additions and 0 deletions
--- a/important.jpg
+++ b/important.jpg
--- a/style.css
+++ b/style.css
@ -0,0 +1,98 @@
+
+@import url('https://fonts.googleapis.com/css2?family=Arimo&display=swap');
+
+h1{ 
+    top: 0;
+    left: 0;
+    font-family: 'Arimo', sans-serif;
+}
+button{
+    color: #5659ff;
+    background-color: #fff;
+    font-size: 1rem;
+    border: solid gray 2px;
+    border-radius: 20px;
+}
+.buttons {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding-right: 2rem;
+    padding-top: 2rem;
+    font-size: 1rem;
+    width: 10vw;
+    height: 5vh;
+    align-items: grid;
+    font-family: 'Arimo', sans-serif;
+}
+#intro{
+    top: 0;
+    left: 0;
+    font-family: 'Arimo', sans-serif;
+}
+#down{
+    bottom: 0;
+    right: 0;
+    font-family: 'Arimo', sans-serif;
+}
+.display-text{
+    top: 0;
+    left: 0;
+    padding-left: 3rem;
+    position: absolute;
+    align-items: left;
+    text-align: left;
+    z-index: -1;
+}
+
+.slider-container {
+    display: flex;
+    padding-top: 3rem;
+    justify-content: center;
+    align-items: center;
+  }
+  
+body {
+    color: #5659ff;
+    background-color: #fff;
+}
+
+/* High-contrast styles */
+.high-contrast {
+    color: #fff;
+    background-color: #000;
+}
+
+input[type=range] {
+    appearance: none;
+    margin: 10px 0;
+    width: 100%;
+  }
+  input[type=range]:focus {
+    outline: none;
+  }
+  input[type=range]::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 10px;
+    cursor: pointer;
+    animation: 0.2s;
+    background: #007bff;
+    border-radius: 20px;
+    border: 0px solid #000101;
+  }
+  input[type=range]::-webkit-slider-thumb {
+    border: 0px solid #000000;
+    height: 20px;
+    width: 39px;
+    border-radius: 20px;
+    background: #000101;
+    cursor: pointer;
+    -webkit-appearance: none;
+    margin-top: -3.6px;
+  }
+  input[type=range]:focus::-webkit-slider-runnable-track {
+    background: #007bff;
+  }
+  img{
+    border-radius: 20px;
+  }
--- a/index.html
+++ b/index.html
@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8"/>
+    <meta name="viewport"
+    content="width=device-width,
+    initial-scale=1.0"/>
+    <title> Senka's user page</title>
+    <link rel="stylesheet" href="index style.css" />
+</head>
+<body>
+    <div class="buttons">
+    <button id="toggle-high-contrast">Contrast</button>
+    <button class="slider-container">
+        <label for="font-size-slider" >Font Size</label>
+        <input type="range" id="font-size-slider" min="20" max="40" value="20" />
+    </button>
+    </div>
+      <div class="display-text" id="display-text">
+        <h1 id="title">Senka's User page</h1> 
+        <p id="intro"> Here I will ramble about the following: <br>
+        </p>
+        <img alt="A pack of bulls in autumn nature standing as if their posing for an indie rock band photo" src="important.jpg">
+        <button id="down" onClick="document.getElementById('map1').scrollIntoView({behavior: 'smooth'});">🡣</button>
+    </div>
+     
+<script type="text/javascript">
+    // Get the toggle button
+    var toggleButton = document.getElementById("toggle-high-contrast");
+
+    // Add a click event listener to the toggle button
+    toggleButton.addEventListener("click", function() {
+    // Get the body element
+    var body = document.getElementsByTagName("body")[0];
+    // Toggle the "high-contrast" class on the body element
+    body.classList.toggle("high-contrast");
+    });
+    // Slider for font size
+    const fontSizeSlider = document.getElementById("font-size-slider");
+    const displayText = document.getElementById("display-text");
+
+    fontSizeSlider.addEventListener("input", () => {
+    const fontSize = fontSizeSlider.value;
+    displayText.style.fontSize = `${fontSize}px`;
+    //
+
+    });
+</script>
+<script src="https://issue.xpub.nl/23/quilt/quilt.js" data-cutFileName="false" data-cutFileName="false"></script>
+<link rel="stylesheet" type="text/css" href="https://issue.xpub.nl/23/quilt/quilt.css">
+
+</body>
+</html>