ada try web
ada
6 months ago
parent
1207ed6c15
commit
1721cf13a6
Binary file not shown.
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.images {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.images, 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 = '../images/open-crow.png';
|
||||||
|
});
|
||||||
|
|
||||||
|
about.addEventListener('mouseout', (event) => {
|
||||||
|
event.target.src = '../images/closed-crow.png';
|
||||||
|
});
|
||||||
|
|
||||||
|
const home = document.getElementById('home');
|
||||||
|
|
||||||
|
home.addEventListener('mouseover', (event) => {
|
||||||
|
event.target.src = '../images/home-open.png';
|
||||||
|
});
|
||||||
|
|
||||||
|
home.addEventListener('mouseout', (event) => {
|
||||||
|
event.target.src = '../images/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="/images/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="images">
|
||||||
|
<div class="img-container">
|
||||||
|
<a href="sunrise/sunrise.html"><img src="images/sunrise.webp" class="img1"></a>
|
||||||
|
<div class="caption">act one</div>
|
||||||
|
</div>
|
||||||
|
<div class="img-container">
|
||||||
|
<a href="hermit/hermit.html"><img src="images/hand.webp" class="img2"></a>
|
||||||
|
<div class="caption">act two</div>
|
||||||
|
</div>
|
||||||
|
<div class="img-container">
|
||||||
|
<a href="pie/pie.html"><img src="images/pie.webp" class="img3"></a>
|
||||||
|
<div class="caption">act three</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div id="about">
|
||||||
|
<div onclick="openLetter()"><img id="about" src="/images/chicken.PNG" alt="about"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="letterBox" class="letterBox" style="display:none">
|
||||||
|
<div id="closeButton" onClick='closeLetter()'><img src="/images/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();
|
||||||
|
}
|
||||||
|
|
||||||
@ -0,0 +1,67 @@
|
|||||||
|
//nav
|
||||||
|
function openLetter() {
|
||||||
|
$('#letterContents').html(` <p id = "letterContents">
|
||||||
|
Hi. I made you this website.
|
||||||
|
<br><br>
|
||||||
|
Cake Intimacies is a performance that took a year to bring together. It is a small selection of stories people told me and I held to memory and rewrote here. The stories come from two performances I hosted.
|
||||||
|
<br> <br>
|
||||||
|
First, I asked participants to eat cake, sitting facing or away from each other and sharing their stories about cake and the Internet. The second performance was hosted at the Art Meets Radical Openness Festival, as part of the Turning of the Internet workshop. For this performance, I predicted participants' future lives on the Internet using felted archetypes and received stories from their Internet past in return.
|
||||||
|
<br> <br>
|
||||||
|
Now the stories are here, each of them a cake with a filling that tells a story, merging the bodily with the digital and making a mess of it all
|
||||||
|
<br><br>
|
||||||
|
ada`)
|
||||||
|
$('.letterBox').toggle()
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeLetter() {
|
||||||
|
$('.letterBox').hide()
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', (event) => {
|
||||||
|
const about = document.getElementById('about');
|
||||||
|
|
||||||
|
about.addEventListener('mouseover', (event) => {
|
||||||
|
event.target.src = '../images/open-crow.png';
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
about.addEventListener('mouseout', (event) => {
|
||||||
|
event.target.src = '../images/closed-crow.png';
|
||||||
|
});
|
||||||
|
|
||||||
|
const home = document.getElementById('home');
|
||||||
|
|
||||||
|
home.addEventListener('mouseover', (event) => {
|
||||||
|
event.target.src = '../images/home-open.png';
|
||||||
|
});
|
||||||
|
|
||||||
|
home.addEventListener('mouseout', (event) => {
|
||||||
|
event.target.src = '../images/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,177 @@
|
|||||||
|
|
||||||
|
.body {
|
||||||
|
font-family: 'Redaction-Regular';
|
||||||
|
background-color: #FCF6F1ff;
|
||||||
|
font-size: 18px;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
margin: 40px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
max-width: 1000px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-item {width: 100%;display: flex;flex-direction: column;}
|
||||||
|
|
||||||
|
.content-item > * {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-item:nth-child(odd) > * {align-self: flex-end;text-align: right;float: right;}
|
||||||
|
.content-item:nth-child(even) > * {
|
||||||
|
align-self: flex-start;
|
||||||
|
position: static;
|
||||||
|
right: 0;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-item img {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-item p {margin: 10px 0;font-family: 'Redaction-Regular';line-height: 24px;font-size: 18px;/* width: 200px; */}
|
||||||
|
|
||||||
|
p::selection {
|
||||||
|
color: #ee98b1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#home {
|
||||||
|
position: relative;
|
||||||
|
top: 40px;
|
||||||
|
left: 40px;
|
||||||
|
width: 100px;
|
||||||
|
height: auto;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#home:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.letterBox {
|
||||||
|
font-size: 18px;
|
||||||
|
padding: 20px;
|
||||||
|
max-width: 70%;
|
||||||
|
border-radius: 5px;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px solid black;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: right;
|
||||||
|
z-index: 1000;
|
||||||
|
margin: auto;
|
||||||
|
/* margin-top: 150px; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.letterContents {
|
||||||
|
width: 90%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
#closeButton {
|
||||||
|
font-size: 40px;
|
||||||
|
cursor: pointer;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#about {
|
||||||
|
position: relative;
|
||||||
|
top: -30px;
|
||||||
|
left: 70px;
|
||||||
|
width: 80px;
|
||||||
|
height: auto;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#about:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mute-btn {
|
||||||
|
color: #ee98b1;
|
||||||
|
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:#ee98b1;
|
||||||
|
border-radius: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 767px) {
|
||||||
|
body {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#about {
|
||||||
|
position: absolute;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-item {
|
||||||
|
width: 100%;
|
||||||
|
line-height: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-item:first-of-type img {
|
||||||
|
margin-top: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-item:last-child {
|
||||||
|
margin-bottom: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-item:nth-child(odd) {
|
||||||
|
align-self: flex-end;
|
||||||
|
/* margin-left: 50px; */
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.content-item:nth-child(even) {
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-right: 50px;
|
||||||
|
}
|
||||||
|
.letterBox {
|
||||||
|
font-size: 16px;
|
||||||
|
padding: 18px;
|
||||||
|
max-width: 70%;
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px solid black;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: right;
|
||||||
|
z-index: 1000;
|
||||||
|
margin: auto;
|
||||||
|
margin-top: 110px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1 @@
|
|||||||
|
{"post1":8,"post2":3,"post3":3,"post4":2,"post5":3,"post6":9}
|
||||||
@ -0,0 +1 @@
|
|||||||
|
[{"name":"test","post":"test"},{"name":"ddwdede","post":"ada"},{"name":"test","post":"test"},{"name":"work?","post":"this"},{"name":"hello ada! thanks for this amazing website. welove you too","post":"fofi"},{"name":"hello ada! thanks for this amazing website. welove you too","post":"fofi"},{"name":"my brother is autistic","post":"mati"},{"name":"","post":""},{"name":"vv","post":"vv"},{"name":"vv","post":"vv"},{"name":"","post":""},{"name":"vv","post":"vv"},{"name":"","post":""},{"name":"","post":""},{"name":"c","post":"c"},{"name":"f","post":"f"},{"name":"f","post":"f"},{"name":"f","post":"f"},{"name":"","post":""},{"name":"","post":""},{"name":"siblings are real","post":"f"},{"name":"","post":""},{"name":"","post":""}]
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
<?php
|
||||||
|
# echo is what is print() in Python
|
||||||
|
// echo "hello";
|
||||||
|
|
||||||
|
$filename = "data.json";
|
||||||
|
|
||||||
|
$myfile = fopen($filename, "r") or die("Unable to open file!");
|
||||||
|
$data = fread($myfile, filesize($filename));
|
||||||
|
$data_json = json_decode($data, true);
|
||||||
|
|
||||||
|
# this will be taken as the response data in js
|
||||||
|
var_dump($data_json);
|
||||||
|
|
||||||
|
fclose($myfile);
|
||||||
|
?>
|
||||||
@ -0,0 +1,448 @@
|
|||||||
|
body {
|
||||||
|
background-color: #cddef3;
|
||||||
|
font-family: 'Redaction-Regular', serif;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
padding: 0;
|
||||||
|
color: #e26d3f;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mute-btn {
|
||||||
|
font-family: 'Redaction-Regular', serif;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #e26d3f;
|
||||||
|
position: fixed;
|
||||||
|
padding: 25px;
|
||||||
|
right: 5px;
|
||||||
|
top: 5px;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mute-btn:hover {
|
||||||
|
color:#FCF6F1ff;
|
||||||
|
background-color:#e26d3f;
|
||||||
|
border-radius: 30px;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: right;
|
||||||
|
max-width: 100%;
|
||||||
|
margin-top: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post {
|
||||||
|
position: relative;
|
||||||
|
width: 40%;
|
||||||
|
margin: 20px;
|
||||||
|
margin-left: 600px;
|
||||||
|
margin-right: 20px;
|
||||||
|
margin-top: 20px;
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: #FCF6F1ff;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.interactions {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.like-button {
|
||||||
|
background-color: transparent;
|
||||||
|
color: #e26d3f;
|
||||||
|
font-size: 20px;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.like-button:hover {
|
||||||
|
color:#0008ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment {
|
||||||
|
padding: 10px;
|
||||||
|
border-bottom: 1px solid #333;
|
||||||
|
margin: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-image {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0 25px;
|
||||||
|
height: 50px;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-image img {
|
||||||
|
float: left;
|
||||||
|
margin: 0 10px 0 -25px;
|
||||||
|
height: 50px;
|
||||||
|
width: 50px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-text {
|
||||||
|
margin: 30px;
|
||||||
|
margin-top: 10px;
|
||||||
|
line-height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.like-count {
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post#user-post {
|
||||||
|
width: 40%;
|
||||||
|
margin-left: 600px;
|
||||||
|
margin-right: 20px;
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-bottom: 200px;
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: #FCF6F1ff;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
#user-form {
|
||||||
|
width: 40%;
|
||||||
|
margin: 20px;
|
||||||
|
margin-left: 600px;
|
||||||
|
position: relative;
|
||||||
|
background-color: #FCF6F1ff;
|
||||||
|
margin-bottom: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#user-message2 {
|
||||||
|
height: 60px;
|
||||||
|
width: calc(100% - 80px);
|
||||||
|
padding: 8px;
|
||||||
|
margin: 16px;
|
||||||
|
border: 1px solid #e26d3f;
|
||||||
|
border-radius: 10px;
|
||||||
|
resize: vertical;
|
||||||
|
margin-top: 30px;
|
||||||
|
margin-left: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#username2 {
|
||||||
|
display: inline-block;
|
||||||
|
width: calc(100% - 80px);
|
||||||
|
padding: 8px;
|
||||||
|
margin: 10px;
|
||||||
|
border: 1px solid #e26d3f;
|
||||||
|
border-radius: 4px;
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
#user-message {
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#submitButton {
|
||||||
|
font-family: 'Redaction-Regular', serif;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 13px;
|
||||||
|
position: absolute;
|
||||||
|
right: 10px;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: transparent;
|
||||||
|
border-radius: 4px;
|
||||||
|
border-width: 0px;
|
||||||
|
box-shadow: rgba(0, 0, 0, 0.5) 0px 4px 4px 0px;
|
||||||
|
color: #e26d3f;
|
||||||
|
height: 40px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
transition: 0.9s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#submitButton:hover {
|
||||||
|
font-weight: 550;
|
||||||
|
color: #e26d3f;
|
||||||
|
}
|
||||||
|
|
||||||
|
#user-message2:focus + submitButton {
|
||||||
|
color: #FCF6F1ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
#username2,
|
||||||
|
#user-message2{
|
||||||
|
font-family: 'Redaction-Regular', serif;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
#home {
|
||||||
|
position: absolute;
|
||||||
|
top: 25px;
|
||||||
|
left: 40px;
|
||||||
|
width: 100px;
|
||||||
|
height: auto;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
#home:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.letterBox {
|
||||||
|
line-height: 150%;
|
||||||
|
font-size: 17px;
|
||||||
|
padding: 30px;
|
||||||
|
margin: 60px;
|
||||||
|
max-width: 40%;
|
||||||
|
margin-top: 22px;
|
||||||
|
z-index: 1000;
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color:#FCF6F1ff;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: right;
|
||||||
|
position: absolute;
|
||||||
|
font-family: 'Redaction-Regular', serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.letterContents {
|
||||||
|
width: 90%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
#closeButton {
|
||||||
|
color: #ee98b1;;
|
||||||
|
font-size: 40px;
|
||||||
|
cursor: pointer;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#about {
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
left: 70px;
|
||||||
|
width: 80px;
|
||||||
|
height: auto;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
#about:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#orb {
|
||||||
|
bottom: -200px;
|
||||||
|
left: -6px;
|
||||||
|
margin-top: 130px;
|
||||||
|
margin-right: 100px;
|
||||||
|
position: fixed;
|
||||||
|
width: 400px;
|
||||||
|
height: 400px;
|
||||||
|
background-color: #e26d3f;
|
||||||
|
border-radius: 50%;box-shadow: 0px 0px 150px 150px #e39898, 0px 0px 40px 40px #e39898 inset;
|
||||||
|
transition: transform;
|
||||||
|
transition-duration: 5s;
|
||||||
|
transition-timing-function: ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#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;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes details-show {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media only screen and (max-width: 767px) {
|
||||||
|
|
||||||
|
.comment-image img {
|
||||||
|
height: 50px;
|
||||||
|
width: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-image {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post {
|
||||||
|
width: 100%;
|
||||||
|
margin: 20px;
|
||||||
|
margin-left: 20px;
|
||||||
|
margin-right: 20px;
|
||||||
|
margin-top: 20px;
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: #FCF6F1ff;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
#orb {
|
||||||
|
bottom: -100px;
|
||||||
|
left: 100px;
|
||||||
|
width: 150px;
|
||||||
|
height: 150px;
|
||||||
|
box-shadow: 0px 0px 90px 80px #ee98b1, 0px 0px 20px 10px #ee98b1 inset;
|
||||||
|
}
|
||||||
|
|
||||||
|
#about {
|
||||||
|
top: 10px;
|
||||||
|
left: 40px;
|
||||||
|
width: 80px;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
#home {
|
||||||
|
top: 20px;
|
||||||
|
left: 20px;
|
||||||
|
width: 80px;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
#user-form {
|
||||||
|
width: 100%;
|
||||||
|
margin: 20px;
|
||||||
|
margin-left: 20px;
|
||||||
|
position: relative;
|
||||||
|
background-color: #FCF6F1ff;
|
||||||
|
margin-bottom: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#user-message2 {
|
||||||
|
height: 60px;
|
||||||
|
width: calc(100% - 80px);
|
||||||
|
padding: 8px;
|
||||||
|
margin: 16px;
|
||||||
|
border: 1px solid #e26d3f;
|
||||||
|
border-radius: 10px;
|
||||||
|
resize: vertical;
|
||||||
|
margin-top: 30px;
|
||||||
|
margin-left: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#username2 {
|
||||||
|
display: inline-block;
|
||||||
|
width: calc(100% - 80px);
|
||||||
|
padding: 8px;
|
||||||
|
margin: 10px;
|
||||||
|
border: 1px solid #e26d3f;
|
||||||
|
border-radius: 4px;
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
#user-message {
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#submitButton {
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 13px;
|
||||||
|
font-family: 'Redaction_35-Regular', serif;
|
||||||
|
position: absolute;
|
||||||
|
right: 10px;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: transparent;
|
||||||
|
border-radius: 4px;
|
||||||
|
border-width: 0px;
|
||||||
|
box-shadow: rgba(0, 0, 0, 0.5) 0px 4px 4px 0px;
|
||||||
|
color: #e26d3f;
|
||||||
|
height: 40px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
transition: 0.9s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#submitButton:hover {
|
||||||
|
font-weight: 550;
|
||||||
|
color: #e26d3f;
|
||||||
|
}
|
||||||
|
|
||||||
|
#user-message2:focus + submitButton {
|
||||||
|
color: #FCF6F1ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.letterBox {
|
||||||
|
font-size: 17px;
|
||||||
|
padding: 30px;
|
||||||
|
margin-left: 20px;
|
||||||
|
margin-right: 20px;
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: #FCF6F1ff;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: right;
|
||||||
|
max-width: 100%;
|
||||||
|
margin-top: 140px;
|
||||||
|
position: static;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#user-message2::placeholder,
|
||||||
|
#user-message2::-webkit-input-placeholder,
|
||||||
|
#user-message2::-moz-placeholder,
|
||||||
|
#user-message2:-ms-input-placeholder {
|
||||||
|
font-family: 'Redaction-Regular', serif;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #cddef3;
|
||||||
|
}
|
||||||
|
|
||||||
|
#message-div {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#message-div a,
|
||||||
|
#message-div button {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@ -0,0 +1,33 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
$post_number = $_GET["post"];
|
||||||
|
|
||||||
|
// header("Content-Type: application/json; charset=UTF-8");
|
||||||
|
// $data = $json_decode($_POST["post1"],false);
|
||||||
|
// echo json_encode($data);
|
||||||
|
|
||||||
|
$filename = "data.json";
|
||||||
|
$myfile = fopen($filename, "r") or die("Unable to open file!");
|
||||||
|
|
||||||
|
// # first read the data from the file
|
||||||
|
|
||||||
|
$data = fread($myfile, filesize($filename));
|
||||||
|
$data_json = json_decode($data, true);
|
||||||
|
fclose($myfile);
|
||||||
|
|
||||||
|
|
||||||
|
$currentcount = $data_json[$post_number];
|
||||||
|
|
||||||
|
// # then add +1 to "data", which is the counter, by overwriting $data
|
||||||
|
$data_json[$post_number] = $currentcount+1;
|
||||||
|
var_dump ($data_json);
|
||||||
|
$data_json_updated = json_encode($data_json);
|
||||||
|
echo $data_json_updated;
|
||||||
|
|
||||||
|
# and save this number to the file again
|
||||||
|
$myfile = fopen($filename, "w") or die("Unable to open file!");
|
||||||
|
fwrite($myfile, $data_json_updated);
|
||||||
|
fclose($myfile);
|
||||||
|
|
||||||
|
|
||||||
|
?>
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
//php error messages on -- just for debugging
|
||||||
|
ini_set('display_errors', 1);
|
||||||
|
ini_set('display_startup_errors', 1);
|
||||||
|
error_reporting(E_ALL);
|
||||||
|
|
||||||
|
//save file name in variable
|
||||||
|
$filename = "form.json";
|
||||||
|
|
||||||
|
//get the data (name and post)
|
||||||
|
$name = $_GET['name'];
|
||||||
|
$post = $_GET['post'];
|
||||||
|
//save name and post in array with called "newpost"
|
||||||
|
$newpost = array("name" => $name, "post" => $post);
|
||||||
|
|
||||||
|
//open the file
|
||||||
|
$myfile = file_get_contents($filename);
|
||||||
|
//decode file to php data and store in array temp
|
||||||
|
$temp = json_decode($myfile);
|
||||||
|
//add the array newpost to the temp
|
||||||
|
array_push($temp, $newpost);
|
||||||
|
//enocde php data back to json
|
||||||
|
$json = json_encode($temp);
|
||||||
|
//save json to file name
|
||||||
|
file_put_contents($filename, $json);
|
||||||
|
|
||||||
|
?>
|
||||||
Loading…
Reference in New Issue