senak
/
senka-users-page
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added a page with an 8ball for strike ideas. the ideas are still rudimentary

Browse Source
master
senka 10 months ago
parent 901cdafc10
commit a7a47497a3
9 changed files with 387 additions and 31 deletions
Show Stats Download Patch File Download Diff File

BIN
Fonts/Felidae.ttf
View File

Binary file not shown.

BIN
Fonts/Louise-Regular.otf
View File

Binary file not shown.

BIN
Fonts/Resistance générale.otf
View File

Binary file not shown.

BIN
Fonts/Tiltortion.otf
View File

Binary file not shown.

BIN
Fonts/Transgender Grotesk-Regular-App.ttf
View File

Binary file not shown.

1
SI23-git

@ -0,0 +1 @@
Subproject commit 9484953a773fb0ca48c8cf019ae1825b2e3cd980

126
index style.css
Unescape Escape View File

@ -1,39 +1,82 @@
@import url('https://fonts.googleapis.com/css2?family=Arimo&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Arimo&display=swap');
@font-face {
font-family: Resistance générale;
src: url(Fonts/Resistance\ générale.otf);
}
@font-face {
font-family: Louise-Regular;
src: url(Fonts/Louise-Regular.otf);
}
@font-face {
font-family: Felidae;
src: url(Fonts/Felidae.ttf);
}
@font-face {
font-family: Transgender Grotesk-Regular-App;
src: url(Fonts/Transgender\ Grotesk-Regular-App.ttf);
}
@font-face{
font-family: Tiltortion;
src: url(Fonts/Tiltortion.otf);
}
h1{ h1{
top: 0; top: 0;
left: 0; left: 0;
font-family: 'Arimo', sans-serif; /* font-family: 'Transgender Grotesk-Regular-App'; */
z-index: 100;
}
span{
font-family: 'Felidae';
} }
button{ button{
color: #5659ff; color: #5659ff;
background-color: #fff; background-color: #fff;
font-size: 1rem; font-size: 1rem;
border: solid gray 2px; border: solid black 2px;
border-radius: 20px; border-radius: 20px;
height: 6vh;
}
button:hover{
/* text-decoration: underline; */
border: solid red 2px;
animation-duration: 2s;
cursor: pointer;
}
ul{
list-style-type: "🡒";
}
li{
padding-left: 1rem;
} }
.buttons { .buttons {
display: flex;
align-items: flex-start;
padding: 5px;
position: absolute; position: absolute;
top: 0; top: 0rem;
right: 0; right: 0;
padding-right: 2rem; padding-right: 2rem;
padding-top: 2rem; padding-top: 2rem;
font-size: 1rem; font-size: 1rem;
width: 10vw; width: 25vw;
height: 5vh; height: 5vh;
align-items: grid; }
font-family: 'Arimo', sans-serif; /* .buttons div{
} display: flex;
} */
#intro{ #intro{
top: 0; top: 0;
left: 0; left: 0;
font-family: 'Arimo', sans-serif; width: 48vw;
/* font-family: 'Arimo', sans-serif; */
} }
#down{ #down{
bottom: 0; bottom: 0;
right: 0; right: 0;
font-family: 'Arimo', sans-serif; /* font-family: 'Arimo', sans-serif; */
} }
.display-text{ .display-text{
top: 0; top: 0;
@ -47,7 +90,7 @@ button{
.slider-container { .slider-container {
display: flex; display: flex;
padding-top: 3rem; /* padding-top: 3rem; */
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
@ -55,11 +98,29 @@ button{
body { body {
color: #5659ff; color: #5659ff;
background-color: #fff; background-color: #fff;
font-family: 'Arimo', sans-serif;
overflow: hidden;
}
/* .back {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-image: linear-gradient(to bottom right, red, yellow);
z-index: -2;
} */
.body-font{
font-family: 'Arimo', sans-serif;
} }
/* High-contrast styles */ /* High-contrast styles */
.high-contrast { .high-contrast {
top: 0;
left: 0;
width: 97vw;
height: 92vh;
color: #fff; color: #fff;
/* background: radial-gradient(rgb(0, 0, 0), rgba(0, 0, 0, 0.2) 250%); */
background-color: #000; background-color: #000;
} }
@ -96,3 +157,46 @@ input[type=range] {
img{ img{
border-radius: 20px; border-radius: 20px;
} }
.different-font{
font-family: 'Resistance générale';
}
.third-font{
font-family: 'Felidae';
}
.everything{
align-items: flex-start;
display: flex;
z-index: -4;
}
.left{
width: 50vw;
height: 97vh;
padding-right: 0.5rem;
overflow-y: scroll;
overflow-x: hidden;
display: block;
/* z-index: -2; */
}
.right{
width: 45vw;
height: 94vh;
padding-left: 1rem;
padding-top: 2rem;
overflow-y: scroll;
/* background-image: linear-gradient(to bottom right, red, yellow); */
}
::-webkit-scrollbar {
width: 20px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px blue;
border-radius: 30px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: red;
border-radius: 30px;
}

151
index.html
Unescape Escape View File

@ -8,43 +8,156 @@
<title> Senka's user page</title> <title> Senka's user page</title>
<link rel="stylesheet" href="index style.css" /> <link rel="stylesheet" href="index style.css" />
</head> </head>
<body> <body id="body" class="body-font">
<div class="buttons"> <!-- <div class="back">
<button id="toggle-high-contrast">Contrast</button> </div> -->
<button class="slider-container"> <div class="buttons">
<label for="font-size-slider" >Font Size</label> <button id="toggle-high-contrast">Contrast</button>
<input type="range" id="font-size-slider" min="20" max="40" value="20" /> <button class="slider-container">
</button> <label for="font-size-slider">Font Size</label>
</div> <input type="range" id="font-size-slider" min="25" max="60" value="25" />
<div class="display-text" id="display-text"> </button>
<h1 id="title">Senka's User page</h1> <button id="font-change">
<p id="intro"> Here I will ramble about the following: <br> <label for="font-change-2">Change Font</label>
</button>
</div>
<div class="display-text" id="display-text">
<div class="everything">
<div class="left">
<h1 id="title"> <span>Добродошли и добро Вас нашли</span> <br>Senka's User Page</h1>
<p id="intro">
Like many people in the creative industry I have a different cv and biography depending on the project I'm doing and the funding application I'm applying for.
But I generally have an interest in archives, media theory, storytelling and writing.
(Knowledge production, how do we learn collectivelly and the like...)<br>
Here I will ramble about and place the following: <br>
<ul id="intro">
<li>things I researched</li>
<li>little web experiments</li>
</ul>
</p> </p>
<img alt="A pack of bulls in autumn nature standing as if their posing for an indie rock band photo" src="important.jpg"> <p>text text text text text text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text text exttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text textexttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text text</p>
<button id="down" onClick="document.getElementById('map1').scrollIntoView({behavior: 'smooth'});">🡣</button> <!-- <button onClick="document.getElementById('map1').scrollIntoView({behavior: 'smooth'});">🡣</button> -->
</div> </div>
<div class="right">
<img alt="A pack of bulls in autumn nature standing as if their posing for an indie rock band photo" src="important.jpg">
<img alt="A pack of bulls in autumn nature standing as if their posing for an indie rock band photo" src="important.jpg">
</div>
</div>
</div>
<script type="text/javascript"> <script type="text/javascript">
// const canvas = document.getElementById("myCanvas"),
// ctx = canvas.getContext("2d"),
// image = new Image();
// // Wait for the sprite sheet to load
// image.onload = () => {
// Promise.all([
// // Cut out two sprites from the sprite sheet
// createImageBitmap(image, 0, 0, 432, 432),
// // createImageBitmap(image, 432, 0, 432, 432),
// ]).then((sprites) => {
// // Draw each sprite onto the canvas
// ctx.drawImage(sprites[0], 0, 0);
// // ctx.drawImage(sprites[1], 102, 32);
// // Create a linear gradient
// // The start gradient point is at x=20, y=0
// // The end gradient point is at x=220, y=0
// const gradient = ctx.createLinearGradient(20, 0, 220, 0);
// // Add three color stops
// gradient.addColorStop(0, "green");
// gradient.addColorStop(0.5, "cyan");
// gradient.addColorStop(1, "green");
// // Set the fill style and draw a rectangle
// ctx.fillStyle = gradient;
// ctx.fillRect(20, 20, 200, 100);
// });
// };
// // Load the sprite sheet from an image file
// image.src = "important.jpg";
// Change font size button
// Get the toggle button // Get the toggle button
var toggleButtonTwo = document.getElementById("font-change");
console.log("It's getting the body for the 2md time");
// Add a click event listener to the toggle button
toggleButtonTwo.addEventListener("click", function() {
// Get the body element
var body = document.getElementsByTagName("body")[0];
// var bodyFont = body.classList == "body-font"
// var highContrast = body.classList == "high-contrast"
// Toggle the "different-font" class on the body element
var bodyClasses = document.body.classList.value;
if (bodyClasses.includes("body-font")){
document.body.classList.remove("body-font");
document.body.classList.remove("third-font");
document.body.classList.add("different-font");
} else if (bodyClasses.includes("different-font")){
document.body.classList.remove("body-font");
document.body.classList.remove("different-font");
document.body.classList.add("third-font");
} else if (bodyClasses.includes("third-font")){
document.body.classList.remove("third-font");
document.body.classList.add("body-font");
document.body.classList.remove("different-font");
}
// if ( body.classList == "body-font" || body.classList == "body-font high-contrast"){
// body.classList.remove("body-font");
// body.classList.add("different-font");}
// else if(body.classList == "different-font" || body.classList == "different-font high-contrast"){
// body.classList.remove("different-font");
// body.classList.add("different-font-2");
// body.classList.remove("body-font");
// console.log("It worked!");
// } else{
// body.classList.remove("different-font-2");
// body.classList.add("body-font");
// }
// if ( body.classList == "body-font high-contrast"){
// body.classList.remove("body-font");
// body.classList.add("different-font");}
// else if(body.classList == "different-font high-contrast"){
// body.classList.remove("different-font")
// body.classList.add("different-font-2");
// console.log("It worked!")
// } else{
// body.classList.remove("different-font-2")
// body.classList.add("body-font");
// }
});
// Getting the toggle button
var toggleButton = document.getElementById("toggle-high-contrast"); var toggleButton = document.getElementById("toggle-high-contrast");
// Add a click event listener to the toggle button // Added a click event listener to the toggle button
toggleButton.addEventListener("click", function() { toggleButton.addEventListener("click", function() {
// Get the body element // Getting the body element
var body = document.getElementsByTagName("body")[0]; var body = document.getElementsByTagName("body")[0];
// Toggle the "high-contrast" class on the body element // Toggle the "high-contrast" class on the body element
body.classList.toggle("high-contrast"); body.classList.toggle("high-contrast");
body.classList.remove("back")
}); });
// Slider for font size // Slider for font size
const fontSizeSlider = document.getElementById("font-size-slider"); const fontSizeSlider = document.getElementById("font-size-slider");
const displayText = document.getElementById("display-text"); const displayText = document.getElementById("display-text");
function changeSize(){
const fontSize = fontSizeSlider.value;
displayText.style.fontSize = `${fontSize}px`;
}
fontSizeSlider.addEventListener("input", () => { fontSizeSlider.addEventListener("input", () => {
const fontSize = fontSizeSlider.value; changeSize();
displayText.style.fontSize = `${fontSize}px`;
//
}); });
changeSize();
</script> </script>
<script src="https://issue.xpub.nl/23/quilt/quilt.js" data-cutFileName="false" data-cutFileName="false"></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"> <link rel="stylesheet" type="text/css" href="https://issue.xpub.nl/23/quilt/quilt.css">

138
stike-ideas.html
Unescape Escape View File

@ -0,0 +1,138 @@
<!DOCTYPE html>
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Rubik+Glitch+Pop&display=swap');
body{
background: linear-gradient(-45deg, #ffaef6, #dbd2ff);
border: 2px solid rgb(0, 0, 0);
width: 98vw;
height: 97vh;
background-size: 400% 400%;
animation: gradientanimation 15s ease infinite;
}
@keyframes gradientanimation {
0%{
background-position: 0%, 50%;
}
50%{
background-position: 100%, 50%;
}
100%{
background-position: 0%, 50%;
}
}
h1{
top: 2rem;
left: 4rem;
position: absolute;
font-family: 'Rubik Glitch Pop', system-ui;
font-size: 4rem;
background-image: linear-gradient(180deg, rgb(0, 0, 0), #350707);
background-size: 100%;
background-clip: text;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
p{
top: 15rem;
left: 4rem;
position: absolute;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.5rem;
color: #350707;
}
.circle{
position: absolute;
top: 5rem;
right: 5rem;
height: 35vw;
width: 35vw;
background-color: #000000;
border-radius: 50%;
display: inline-block;
align-items: baseline;
}
.rectangle{
position: absolute;
top: 14vw;
left: 7vw;
height: 6rem;
width: 20vw;
background-color: #d7ffde;
display: inline-block;
z-index: 10;
border-radius: 3rem;
display: flex;
align-items: center;
justify-content: center;
}
span{
top: 0.2rem;
color: #570000;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.2rem;
text-align: center;
align-items: center;
}
</style>
</head>
<body>
<h1>Magic 8 Ball <br> of Cloud Strike Ideas</h1>
<p> Click the ball for ideas</p>
<div id="8ball" class="circle" onclick="displayAnswer()">
<div class="rectangle">
<span id="answer">
What kind of strike do you want?
</span>
</div>
</div>
<script>
// getElementById("8ball") .effect( "shake" );
var magicBall= document.getElementById("8ball");
magicBall.addEventListener("click", function() {
console.log("Hello visitor");
});
let answers = [
'Host a die-in in front of the Van Nelle data center',
'Don\'t use a credit card',
'Organise mesh network',
'Displace X',
'Arson'
]
let displayAnswer = function()
{
let index = Math.floor(Math.random() * answers.length);
let answer = answers[index];
let element = document.getElementById( 'answer' );
element.style.display = 'inline-block';
element.innerHTML = '<br><br>' + answer;
}
// window.onload = function(){
// function shakeBall(){
// document.getElementById("#8ball");
// console.log("Hello visitor");
// // Ball.effect("shake");
// }
// }
// Ball.onclick = shakeBall();
// function shakeBall(answer){
// Ball.effect("shake");
// }
// shakeBall();
</script>
</body>
Write Preview
Loading…
Cancel
Save