current status of senka's userpage
commit
901cdafc10
Binary file not shown.
|
After Width: | Height: | Size: 129 KiB |
@ -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;
|
||||||
|
}
|
||||||
@ -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>
|
||||||
Loading…
Reference in New Issue