Merge branch 'master' of https://git.xpub.nl/XPUB/gradshow24
commit
92d9792e13
@ -1,24 +0,0 @@
|
|||||||
<DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title></title>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<link rel="stylesheet" type="text/css" href="../style.css">
|
|
||||||
<link rel="stylesheet" type="text/css" href="style.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- Nav bar -->
|
|
||||||
<nav>
|
|
||||||
<ul>
|
|
||||||
<li><a href="index.html">Home</a></li>
|
|
||||||
<li><a href="">About</a></li>
|
|
||||||
<li><a href="">Graduates</a></li>
|
|
||||||
<li><a href="">Special Issues</a></li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
<div id="content"><h1 id="title" <?water bodies> </h1>
|
|
||||||
<h3 id="thesis-description">Thesis Description</h3>
|
|
||||||
<p>This is where your thesis goes</p>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 355 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 375 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 341 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 127 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 292 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 248 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 610 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 519 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 255 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 MiB After Width: | Height: | Size: 85 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 184 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 768 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 779 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 669 KiB |
Binary file not shown.
@ -0,0 +1,4 @@
|
|||||||
|
# backplaces
|
||||||
|
|
||||||
|
|
||||||
|
hi
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,75 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: 'Redaction-Regular';
|
||||||
|
src: url('../css/fonts/Redaction/webfonts/Redaction-Regular.woff2') format('opentype');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Redaction_10-Regular';
|
||||||
|
src: url('../css/fonts/Redaction/webfonts/Redaction_10-Regular.woff2') format('opentype');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Redaction_20-Regular';
|
||||||
|
src: url('../css/fonts/Redaction/webfonts/Redaction_20-Regular.woff2') format('opentype');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Redaction_35-Regular';
|
||||||
|
src: url('../css/fonts/Redaction/webfonts/Redaction_35-Regular.woff2') format('opentype');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Redaction_50-Regular';
|
||||||
|
src: url('../css/fonts/Redaction/webfonts/Redaction_50-Regular.woff2') format('opentype');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Redaction_70-Regular';
|
||||||
|
src: url('../css/fonts/Redaction/webfonts/Redaction_70-Regular.woff2') format('opentype');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Redaction_100-Regular';
|
||||||
|
src: url('../css/fonts/Redaction/webfonts/Redaction_100-Regular.woff2') format('opentype');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Karrik-Regular';
|
||||||
|
src: url('../css/fonts/karrik_fonts-main/WOFF/Karrik-Regular.woff') format('opentype');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'VG5000-Regular';
|
||||||
|
src: url('../css/fonts/vg5000-master/webfonts/VG5000-Regular_web.woff') format('opentype');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'WorkSans-Thin';
|
||||||
|
src: url('css/fonts/worksans/WorkSans-Thin.woff') format('opentype');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'WorkSans-Medium';
|
||||||
|
src: url('../css/fonts/worksans/WorkSans-Medium.woff2') format('opentype');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,200 @@
|
|||||||
|
body {
|
||||||
|
background-color: rgb(53, 67, 196);
|
||||||
|
min-height: 100vH;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-family: 'Redaction_35-Regular', serif;
|
||||||
|
color: #FCF6F1ff;
|
||||||
|
font-size: 8rem;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
text-align: left;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-full {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-mobile {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-family: 'Redaction_20', serif;
|
||||||
|
color: #FCF6F1ff;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
text-align: left;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photos {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photos, img {
|
||||||
|
height: 250px;
|
||||||
|
margin: 10px;
|
||||||
|
margin-top: 10px;
|
||||||
|
flex: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-container {
|
||||||
|
position: relative;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-container img {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-container .caption {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
color: #FCF6F1ff;
|
||||||
|
font-size: 20px;
|
||||||
|
font-family: 'Redaction-Regular';
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-container:hover .caption {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img2 {
|
||||||
|
margin-top: 250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.letterBox {
|
||||||
|
line-height: 150%;
|
||||||
|
font-size: 17px;
|
||||||
|
padding: 30px;
|
||||||
|
margin: 60px;
|
||||||
|
max-width: 99%;
|
||||||
|
margin-top: 160px;
|
||||||
|
z-index: 1000;
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: #FCF6F1ff;
|
||||||
|
color: rgb(53, 67, 196);
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: right;
|
||||||
|
position: absolute;
|
||||||
|
font-family: 'WorkSans-Medium';
|
||||||
|
}
|
||||||
|
|
||||||
|
.letterContents {
|
||||||
|
width: 90%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
#closeButton img {
|
||||||
|
cursor: pointer;
|
||||||
|
height: 50px;
|
||||||
|
width: auto;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#about {
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
right: 20px;
|
||||||
|
width: 80px;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#about:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.container {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-top: 30px;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-full {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-mobile {
|
||||||
|
display: block;
|
||||||
|
font-family: 'Redaction_35-Regular', serif;
|
||||||
|
color: #FCF6F1ff;
|
||||||
|
font-size: 5rem; /* Adjust font size */
|
||||||
|
margin-bottom: 10px;
|
||||||
|
margin-top: -40px;
|
||||||
|
margin-left: -20px;
|
||||||
|
line-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-size: 1rem;
|
||||||
|
width: 50px;
|
||||||
|
right: 140px;
|
||||||
|
text-align: left;
|
||||||
|
position: absolute;
|
||||||
|
top: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.images img {
|
||||||
|
margin: 20px;
|
||||||
|
margin-top: 20px;
|
||||||
|
height: 200px;
|
||||||
|
flex: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#about {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
right: 10px;
|
||||||
|
width: 50px;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.letterBox {
|
||||||
|
line-height: 130%;
|
||||||
|
font-size: 11px;
|
||||||
|
padding: 30px;
|
||||||
|
margin: 30px;
|
||||||
|
max-width: 99%;
|
||||||
|
margin-top: 150px;
|
||||||
|
z-index: 1000;
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: #FCF6F1ff;
|
||||||
|
color: rgb(53, 67, 196);
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: right;
|
||||||
|
position: absolute;
|
||||||
|
font-family: 'WorkSans-Medium';
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-container .caption {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,112 @@
|
|||||||
|
//cards
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const topCard = document.getElementById('topCard');
|
||||||
|
const messageDiv = document.getElementById('message-div');
|
||||||
|
const texts = [
|
||||||
|
document.getElementById('text1'),
|
||||||
|
document.getElementById('text2'),
|
||||||
|
document.getElementById('text3'),
|
||||||
|
document.getElementById('text4'),
|
||||||
|
document.getElementById('text5')
|
||||||
|
];
|
||||||
|
|
||||||
|
let currentTextIndex = 0;
|
||||||
|
|
||||||
|
// Initialize by showing the first text in the top card
|
||||||
|
topCard.innerHTML = texts[currentTextIndex].innerHTML;
|
||||||
|
|
||||||
|
// Show the next text behind the top card
|
||||||
|
function updateBehindCard() {
|
||||||
|
texts.forEach((text, index) => {
|
||||||
|
text.style.display = (index === currentTextIndex + 1) ? 'block' : 'none';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
updateBehindCard();
|
||||||
|
|
||||||
|
topCard.addEventListener('click', () => {
|
||||||
|
// Hide the current text
|
||||||
|
texts[currentTextIndex].style.display = 'none';
|
||||||
|
|
||||||
|
// Update the index
|
||||||
|
currentTextIndex++;
|
||||||
|
|
||||||
|
if (currentTextIndex >= texts.length) {
|
||||||
|
// Hide the top card after the last text
|
||||||
|
topCard.style.display = 'none';
|
||||||
|
// Show the message div
|
||||||
|
messageDiv.style.display = 'block';
|
||||||
|
} else {
|
||||||
|
// Show the new text in the top card
|
||||||
|
topCard.innerHTML = texts[currentTextIndex].innerHTML;
|
||||||
|
|
||||||
|
// Update the card behind the top card
|
||||||
|
updateBehindCard();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
function openLetter() {
|
||||||
|
$('#letterContents').html(`
|
||||||
|
<p id="letterContents">
|
||||||
|
Hi. I made you this website.
|
||||||
|
<br><br>
|
||||||
|
Hermit Fantasy is a short story about a bot who wants to be a hermit. Inspired by an email response from a survey I conducted about receiving emotional support on the Internet, this story explores the contradiction of being online while wanting to disconnect. As an act it's a series of letters, click by click.
|
||||||
|
<br><br>
|
||||||
|
ada
|
||||||
|
</p>
|
||||||
|
`);
|
||||||
|
$('.letterBox').toggle();
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeLetter() {
|
||||||
|
$('.letterBox').hide();
|
||||||
|
}
|
||||||
|
|
||||||
|
//nav
|
||||||
|
document.addEventListener('DOMContentLoaded', (event) => {
|
||||||
|
const about = document.getElementById('about');
|
||||||
|
|
||||||
|
about.addEventListener('mouseover', (event) => {
|
||||||
|
event.target.src = '../photos/open-crow.png';
|
||||||
|
});ß
|
||||||
|
|
||||||
|
about.addEventListener('mouseout', (event) => {
|
||||||
|
event.target.src = '../photos/closed-crow.png';
|
||||||
|
});
|
||||||
|
|
||||||
|
const home = document.getElementById('home');
|
||||||
|
|
||||||
|
home.addEventListener('mouseover', (event) => {
|
||||||
|
event.target.src = '../photos/home-open.png';
|
||||||
|
});
|
||||||
|
|
||||||
|
home.addEventListener('mouseout', (event) => {
|
||||||
|
event.target.src = '../photos/home-closed.png';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
//audio
|
||||||
|
document.addEventListener("DOMContentLoaded", function() {
|
||||||
|
const audioElement = document.getElementById('background-audio');
|
||||||
|
const muteButton = document.getElementById('mute-btn');
|
||||||
|
|
||||||
|
// Set initial mute state from localStorage
|
||||||
|
let isMuted = localStorage.getItem('mute') === 'true';
|
||||||
|
audioElement.muted = isMuted;
|
||||||
|
muteButton.textContent = isMuted ? "SOUND ON" : "MUTE";
|
||||||
|
|
||||||
|
// Start audio playback on user interaction
|
||||||
|
const startAudio = () => {
|
||||||
|
audioElement.play();
|
||||||
|
document.removeEventListener('click', startAudio);
|
||||||
|
};
|
||||||
|
|
||||||
|
document.addEventListener('click', startAudio);
|
||||||
|
|
||||||
|
muteButton.addEventListener('click', function() {
|
||||||
|
isMuted = !isMuted;
|
||||||
|
audioElement.muted = isMuted;
|
||||||
|
localStorage.setItem('mute', isMuted);
|
||||||
|
muteButton.textContent = isMuted ? "SOUND ON" : "MUTE";
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,232 @@
|
|||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
background-color: #6189d9;
|
||||||
|
font-family: 'Redaction-Regular';
|
||||||
|
}
|
||||||
|
|
||||||
|
#textContainer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 80vh;
|
||||||
|
position: relative;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
position: absolute;
|
||||||
|
background-color: #f9b0c5;
|
||||||
|
color: #1E33FAff;
|
||||||
|
font-size: 20px;
|
||||||
|
border: 1px solid #1E33FAff;
|
||||||
|
border-radius: 5px;
|
||||||
|
width: 300px;
|
||||||
|
height: 560px;
|
||||||
|
padding: 20px;
|
||||||
|
transition: 0.25s;
|
||||||
|
cursor: pointer;
|
||||||
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||||
|
z-index: 0;
|
||||||
|
margin-top: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card.top {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card.behind {
|
||||||
|
z-index: 5;
|
||||||
|
margin-left: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#text2 {
|
||||||
|
transform: translate(-5px, -5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
#text3 {
|
||||||
|
transform: translate(-10px, -10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
#text4 {
|
||||||
|
transform: translate(-15px, -15px);
|
||||||
|
}
|
||||||
|
|
||||||
|
#text5 {
|
||||||
|
transform: translate(-20px, -20px);
|
||||||
|
}
|
||||||
|
|
||||||
|
#home {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 40px;
|
||||||
|
left: 40px;
|
||||||
|
width: 100px;
|
||||||
|
height: auto;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#home:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.letterBox {
|
||||||
|
font-size: 18px;
|
||||||
|
padding: 20px;
|
||||||
|
margin: auto;
|
||||||
|
margin-top: 150px;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: #adc4f0;
|
||||||
|
border: 1px solid #1E33FAff;
|
||||||
|
color: #1E33FAff;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: right;
|
||||||
|
max-width: 70%;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.letterContents {
|
||||||
|
width: 90%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
#closeButton {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#about {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 26px;
|
||||||
|
left: 70px;
|
||||||
|
width: 80px;
|
||||||
|
height: auto;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#about:hover {
|
||||||
|
color: #e26d3f;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mute-btn {
|
||||||
|
color: #1E33FAff;
|
||||||
|
font-family: 'Redaction-Regular', serif;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 20px;
|
||||||
|
position: fixed;
|
||||||
|
padding: 25px;
|
||||||
|
right: 5px;
|
||||||
|
top: 5px;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mute-btn:hover {
|
||||||
|
color:#FCF6F1ff;
|
||||||
|
background-color:#1E33FAff;
|
||||||
|
border-radius: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#message-div {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
text-align: center;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 10px;
|
||||||
|
display: none;
|
||||||
|
z-index: 1000;
|
||||||
|
animation: details-show 2s;
|
||||||
|
color: white;
|
||||||
|
font-family: 'Redaction_35-Regular';
|
||||||
|
font-size: 25px;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#message-div a,
|
||||||
|
#message-div button {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #1E33FAff;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
font-family: 'Redaction_35-Regular';
|
||||||
|
font-size: 25px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.25s, color 0.25s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 767px) {
|
||||||
|
body {
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#about {
|
||||||
|
position: relative;
|
||||||
|
top: 10px;
|
||||||
|
left: 40px;
|
||||||
|
width: 70px;
|
||||||
|
height: auto;
|
||||||
|
z-index: 1000;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#home {
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
left: 20px;
|
||||||
|
width: 70px;
|
||||||
|
height: auto;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
position: absolute;
|
||||||
|
background-color: #f9b0c5;
|
||||||
|
color: #1E33FAff;
|
||||||
|
font-size: 20px;
|
||||||
|
border: 1px solid #1E33FAff;
|
||||||
|
border-radius: 5px;
|
||||||
|
width: 300px;
|
||||||
|
height: 560px;
|
||||||
|
padding: 20px;
|
||||||
|
transition: 0.25s;
|
||||||
|
cursor: pointer;
|
||||||
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||||
|
z-index: 0;
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-right: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.letterBox {
|
||||||
|
font-size: 18px;
|
||||||
|
padding: 20px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-right: 30px;
|
||||||
|
border-radius: 5px;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: #adc4f0;
|
||||||
|
border: 1px solid #1E33FAff;
|
||||||
|
color: #1E33FAff;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: right;
|
||||||
|
max-width: 100%;
|
||||||
|
margin-top: 150px;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
#message-div {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#message-div a,
|
||||||
|
#message-div button {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,55 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||||
|
<meta http-equiv="Content-Style-Type" content="text/css" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link rel="stylesheet" href="css/style_index.css">
|
||||||
|
<link rel="stylesheet" href="css/fonts.css">
|
||||||
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||||
|
<script src="js/cursor.js" type="text/javascript"></script>
|
||||||
|
<script src="js/script.js" type="text/javascript"></script>
|
||||||
|
<script src="js/jquery.js" type="text/javascript"></script>
|
||||||
|
<link rel="icon" type="image/x-icon" href="./photos/chicken.PNG">
|
||||||
|
<title>backplaces</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<span class="title-full">BackPlaces</span>
|
||||||
|
<span class="title-mobile">Back Places</span>
|
||||||
|
</div>
|
||||||
|
<div class="subtitle">a play by ada</div>
|
||||||
|
|
||||||
|
<div class="photos">
|
||||||
|
<div class="img-container">
|
||||||
|
<a href="sunrise/sunrise.html"><img src="./photos/sunrise.webp" class="img1"></a>
|
||||||
|
<div class="caption">act one</div>
|
||||||
|
</div>
|
||||||
|
<div class="img-container">
|
||||||
|
<a href="hermit/hermit.html"><img src="./photos/hand.webp" class="img2"></a>
|
||||||
|
<div class="caption">act two</div>
|
||||||
|
</div>
|
||||||
|
<div class="img-container">
|
||||||
|
<a href="pie/pie.html"><img src="./photos/pie.webp" class="img3"></a>
|
||||||
|
<div class="caption">act three</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div id="about">
|
||||||
|
<div onclick="openLetter()"><img id="about" src="./photos/chicken.PNG" alt="about"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="letterBox" class="letterBox" style="display:none">
|
||||||
|
<div id="closeButton" onClick='closeLetter()'><img src="./photos/close-blue.png" alt="Close" width="50" height="auto"></div>
|
||||||
|
<div id="letterContents"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -0,0 +1,206 @@
|
|||||||
|
// <![CDATA[
|
||||||
|
var colour = "random"; // in addition to "random" can be set to any valid colour eg "#f0f" or "red"
|
||||||
|
var sparkles = 800; // Increase the number of sparkles
|
||||||
|
|
||||||
|
var x = ox = 400;
|
||||||
|
var y = oy = 300;
|
||||||
|
var swide = 800;
|
||||||
|
var shigh = 2400;
|
||||||
|
var sleft = sdown = 0;
|
||||||
|
var tiny = new Array();
|
||||||
|
var star = new Array();
|
||||||
|
var starv = new Array();
|
||||||
|
var starx = new Array();
|
||||||
|
var stary = new Array();
|
||||||
|
var tinyx = new Array();
|
||||||
|
var tinyy = new Array();
|
||||||
|
var tinyv = new Array();
|
||||||
|
|
||||||
|
window.onload = function () {
|
||||||
|
if (document.getElementById) {
|
||||||
|
for (var i = 0; i < sparkles; i++) {
|
||||||
|
var rats = createDiv(3, 3);
|
||||||
|
rats.style.visibility = "hidden";
|
||||||
|
rats.style.zIndex = "999";
|
||||||
|
document.body.appendChild(tiny[i] = rats);
|
||||||
|
starv[i] = 0;
|
||||||
|
tinyv[i] = 0;
|
||||||
|
rats = createDiv(5, 5);
|
||||||
|
rats.style.backgroundColor = "transparent";
|
||||||
|
rats.style.visibility = "hidden";
|
||||||
|
rats.style.zIndex = "999";
|
||||||
|
var rlef = createDiv(1, 5);
|
||||||
|
var rdow = createDiv(5, 1);
|
||||||
|
rats.appendChild(rlef);
|
||||||
|
rats.appendChild(rdow);
|
||||||
|
rlef.style.top = "2px";
|
||||||
|
rlef.style.left = "0px";
|
||||||
|
rdow.style.top = "0px";
|
||||||
|
rdow.style.left = "2px";
|
||||||
|
document.body.appendChild(star[i] = rats);
|
||||||
|
}
|
||||||
|
set_width();
|
||||||
|
sparkle();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function sparkle() {
|
||||||
|
var c;
|
||||||
|
if (Math.abs(x - ox) > 1 || Math.abs(y - oy) > 1) {
|
||||||
|
ox = x;
|
||||||
|
oy = y;
|
||||||
|
for (c = 0; c < sparkles; c++) {
|
||||||
|
if (!starv[c]) {
|
||||||
|
star[c].style.left = (starx[c] = x) + "px";
|
||||||
|
star[c].style.top = (stary[c] = y + 1) + "px";
|
||||||
|
star[c].style.clip = "rect(0px, 5px, 5px, 0px)";
|
||||||
|
star[c].childNodes[0].style.backgroundColor = star[c].childNodes[1].style.backgroundColor = (colour == "random") ? newColour() : colour;
|
||||||
|
star[c].style.visibility = "visible";
|
||||||
|
starv[c] = 50;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
for (c = 0; c < sparkles; c++) {
|
||||||
|
if (starv[c]) update_star(c);
|
||||||
|
if (tinyv[c]) update_tiny(c);
|
||||||
|
}
|
||||||
|
setTimeout(sparkle, 40);
|
||||||
|
}
|
||||||
|
|
||||||
|
function update_star(i) {
|
||||||
|
if (--starv[i] == 25) star[i].style.clip = "rect(1px, 4px, 4px, 1px)";
|
||||||
|
if (starv[i]) {
|
||||||
|
stary[i] += 1 + Math.random() * 3;
|
||||||
|
starx[i] += (i % 5 - 2) / 5;
|
||||||
|
if (stary[i] < shigh + sdown) {
|
||||||
|
star[i].style.top = stary[i] + "px";
|
||||||
|
star[i].style.left = starx[i] + "px";
|
||||||
|
} else {
|
||||||
|
star[i].style.visibility = "hidden";
|
||||||
|
starv[i] = 0;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
tinyv[i] = 50;
|
||||||
|
tiny[i].style.top = (tinyy[i] = stary[i]) + "px";
|
||||||
|
tiny[i].style.left = (tinyx[i] = starx[i]) + "px";
|
||||||
|
tiny[i].style.width = "2px";
|
||||||
|
tiny[i].style.height = "2px";
|
||||||
|
tiny[i].style.backgroundColor = star[i].childNodes[0].style.backgroundColor;
|
||||||
|
star[i].style.visibility = "hidden";
|
||||||
|
tiny[i].style.visibility = "visible"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function update_tiny(i) {
|
||||||
|
if (--tinyv[i] == 25) {
|
||||||
|
tiny[i].style.width = "1px";
|
||||||
|
tiny[i].style.height = "1px";
|
||||||
|
}
|
||||||
|
if (tinyv[i]) {
|
||||||
|
tinyy[i] += 1 + Math.random() * 3;
|
||||||
|
tinyx[i] += (i % 5 - 2) / 5;
|
||||||
|
if (tinyy[i] < shigh + sdown) {
|
||||||
|
tiny[i].style.top = tinyy[i] + "px";
|
||||||
|
tiny[i].style.left = tinyx[i] + "px";
|
||||||
|
} else {
|
||||||
|
tiny[i].style.visibility = "hidden";
|
||||||
|
tinyv[i] = 0;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
} else tiny[i].style.visibility = "hidden";
|
||||||
|
}
|
||||||
|
|
||||||
|
document.onmousemove = mouse;
|
||||||
|
document.ontouchmove = touch;
|
||||||
|
function mouse(e) {
|
||||||
|
if (e) {
|
||||||
|
y = e.pageY;
|
||||||
|
x = e.pageX;
|
||||||
|
} else {
|
||||||
|
set_scroll();
|
||||||
|
y = event.y + sdown;
|
||||||
|
x = event.x + sleft;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function touch(e) {
|
||||||
|
if (e.touches.length > 0) {
|
||||||
|
y = e.touches[0].pageY;
|
||||||
|
x = e.touches[0].pageX;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.onscroll = set_scroll;
|
||||||
|
function set_scroll() {
|
||||||
|
if (typeof(self.pageYOffset) == 'number') {
|
||||||
|
sdown = self.pageYOffset;
|
||||||
|
sleft = self.pageXOffset;
|
||||||
|
} else if (document.body && (document.body.scrollTop || document.body.scrollLeft)) {
|
||||||
|
sdown = document.body.scrollTop;
|
||||||
|
sleft = document.body.scrollLeft;
|
||||||
|
} else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
|
||||||
|
sleft = document.documentElement.scrollLeft;
|
||||||
|
sdown = document.documentElement.scrollTop;
|
||||||
|
} else {
|
||||||
|
sdown = 0;
|
||||||
|
sleft = 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.onresize = set_width;
|
||||||
|
function set_width() {
|
||||||
|
var sw_min = 999999;
|
||||||
|
var sh_min = 999999;
|
||||||
|
if (document.documentElement && document.documentElement.clientWidth) {
|
||||||
|
if (document.documentElement.clientWidth > 0) sw_min = document.documentElement.clientWidth;
|
||||||
|
if (document.documentElement.clientHeight > 0) sh_min = document.documentElement.clientHeight;
|
||||||
|
}
|
||||||
|
if (typeof(self.innerWidth) == 'number' && self.innerWidth) {
|
||||||
|
if (self.innerWidth > 0 && self.innerWidth < sw_min) sw_min = self.innerWidth;
|
||||||
|
if (self.innerHeight > 0 && self.innerHeight < sh_min) sh_min = self.innerHeight;
|
||||||
|
}
|
||||||
|
if (document.body.clientWidth) {
|
||||||
|
if (document.body.clientWidth > 0 && document.body.clientWidth < sw_min) sw_min = document.body.clientWidth;
|
||||||
|
if (document.body.clientHeight > 0 && document.body.clientHeight < sh_min) sh_min = document.body.clientHeight;
|
||||||
|
}
|
||||||
|
if (sw_min == 999999 || sh_min == 999999) {
|
||||||
|
sw_min = 800;
|
||||||
|
sh_min = 1600;
|
||||||
|
}
|
||||||
|
swide = sw_min;
|
||||||
|
shigh = sh_min;
|
||||||
|
}
|
||||||
|
|
||||||
|
function createDiv(height, width) {
|
||||||
|
var div = document.createElement("div");
|
||||||
|
div.style.position = "absolute";
|
||||||
|
div.style.height = height + "px";
|
||||||
|
div.style.width = width + "px";
|
||||||
|
div.style.overflow = "hidden";
|
||||||
|
return (div);
|
||||||
|
}
|
||||||
|
|
||||||
|
function newColour() {
|
||||||
|
var colours = [
|
||||||
|
"rgb(255, 192, 203)", // Pink
|
||||||
|
"rgb(255, 182, 193)", // Light Pink
|
||||||
|
"rgb(255, 175, 185)", // Pale Pink
|
||||||
|
"rgb(255, 20, 147)", // Deep Pink
|
||||||
|
"rgb(218, 112, 214)", // Orchid
|
||||||
|
"rgb(186, 85, 211)", // Medium Orchid
|
||||||
|
"rgb(160, 32, 240)", // Purple
|
||||||
|
"rgb(128, 0, 128)", // Dark Magenta
|
||||||
|
"rgb(75, 0, 130)", // Indigo
|
||||||
|
"rgb(72, 61, 139)", // Dark Slate Blue
|
||||||
|
"rgb(65, 105, 225)", // Royal Blue
|
||||||
|
"rgb(30, 144, 255)", // Dodger Blue
|
||||||
|
"rgb(0, 0, 255)", // Blue
|
||||||
|
"rgb(0, 191, 255)", // Deep Sky Blue
|
||||||
|
"rgb(135, 206, 235)", // Sky Blue
|
||||||
|
"rgb(173, 216, 230)" // Light Blue
|
||||||
|
];
|
||||||
|
return colours[Math.floor(Math.random() * colours.length)];
|
||||||
|
}
|
||||||
|
// ]]>
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,39 @@
|
|||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const title = document.querySelector('.title');
|
||||||
|
const fonts = [
|
||||||
|
'Redaction-Regular',
|
||||||
|
'Redaction_10-Regular',
|
||||||
|
'Redaction_20-Regular',
|
||||||
|
'Redaction_35-Regular',
|
||||||
|
'Redaction_50-Regular',
|
||||||
|
'Redaction_70-Regular',
|
||||||
|
'Redaction_100-Regular'
|
||||||
|
];
|
||||||
|
let currentFontIndex = 0;
|
||||||
|
|
||||||
|
title.addEventListener('click', () => {
|
||||||
|
currentFontIndex = (currentFontIndex + 1) % fonts.length;
|
||||||
|
title.style.fontFamily = fonts[currentFontIndex];
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
function openLetter() {
|
||||||
|
$('#letterContents').html(`
|
||||||
|
<p>
|
||||||
|
Hi.
|
||||||
|
I made this play for you, posing a question for us to explore together.Is all intimacy about bodies? What makes intimacy? What happens when our bodies distance intimacy from us? This anthology of poems and short stories explores these questions—having a body without intimacy and intimacy without a body. This project honors those who have shared their vulnerability and emotions online, creating "backplaces"—tender online spaces for relief, ease, and transcendence from societal pain.
|
||||||
|
<br><br>
|
||||||
|
I created three backplaces for you: Solar Sibling, Hermit Fantasy, and Cake Intimacies. Each represents a unique performance or project. Some stories may evoke memories of pain. As you sit in the audience, know I am with you, holding your hand through each scene. If it feels overwhelming, you can step out, take a break, or leave. This isn't choreographed, and I care deeply for you.
|
||||||
|
<br><br>
|
||||||
|
I hope you see what I saw in these stories. Safe dreams now. I'll talk to you soon.
|
||||||
|
<br>
|
||||||
|
ada
|
||||||
|
</p>
|
||||||
|
`);
|
||||||
|
$('#letterBox').show();
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeLetter() {
|
||||||
|
$('#letterBox').hide();
|
||||||
|
}
|
||||||
|
|
||||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 966 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 479 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 530 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 518 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 542 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 478 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 554 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 371 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 307 KiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue