zip
pnofrc
4 years ago
parent
afa9879c06
commit
67b54e2b6c
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,66 @@
|
|||||||
|
<!DOCTYPE html><html lang="en"><head>
|
||||||
|
<script src="p5.js"></script>
|
||||||
|
|
||||||
|
<script src="p5.sound.min.js"></script>
|
||||||
|
<link rel="stylesheet" type="text/css" href="style.css">
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title> (W)808 Clinic </title>
|
||||||
|
<style type="text/css">
|
||||||
|
|
||||||
|
|
||||||
|
body {
|
||||||
|
|
||||||
|
padding-bottom:15px;
|
||||||
|
background: #393833;
|
||||||
|
font-size: 12px;
|
||||||
|
font-family: monospace;
|
||||||
|
color: #ded42d;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-family: monospace;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: #c84b31;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-family: monospace;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: #c2672e;
|
||||||
|
font-size: 20px;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<center>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<img src='assets/webtitle.png'width="640" height="190">
|
||||||
|
|
||||||
|
<script src="sketch.js"></script>
|
||||||
|
|
||||||
|
<div id="main">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<center>
|
||||||
|
<br>
|
||||||
|
<h1>Make musical compositions with the found sounds of the waiting room!</h1>
|
||||||
|
<h2> Can you find all 10? </h2>
|
||||||
|
|
||||||
|
<p> + [ Click the objects once to loop the sound files and click again to pause. ]<br><br>+ [ In the cassette player, hold the red button to record your own sample, and press the yellow play button to play and loop. Like the other objects, you can press again to pause. ]<br><br>
|
||||||
|
+ [ In the top corner you can record your composition and save it to your computer. <br>Press once to start recording and press again to stop. ]<br><br><br>
|
||||||
|
+ WORKS BEST WITH HEADPHONES +</p>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,200 @@
|
|||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<!-- Generated with distribusi https://git.vvvvvvaria.org/varia/distribusi -->
|
||||||
|
<meta name="generator" content="distribusi" />
|
||||||
|
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||||
|
<style>
|
||||||
|
.image{max-width: 100%;}
|
||||||
|
.pdf object{width:640px;height: 640px;}
|
||||||
|
.dir::before{content:"📁 ";font-size:18px;}
|
||||||
|
.filename{display:block;font-family:mono;}
|
||||||
|
.unkown-file::before{content:"📄 ";font-size:18px;}
|
||||||
|
div{max-width: 640px;display:inline-block;vertical-align:top;margin:1em;padding:1em;}
|
||||||
|
video {width:640px;max-height:640px;}
|
||||||
|
@media screen {
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: wfdtf;
|
||||||
|
src: url(Fonts/wftfs-Regular.otf)
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: EBGaramond;
|
||||||
|
src: url(Fonts/EBGaramond-Italic.ttf)
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-image: none;
|
||||||
|
min-height: 500px;
|
||||||
|
background-attachment: fixed;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
|
||||||
|
background-color: black;
|
||||||
|
margin: 5mm;
|
||||||
|
color: white;
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 10pt;
|
||||||
|
text-justify: inter-word;
|
||||||
|
columns: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="index-checkpoint" class="html"><section id="index-checkpoint.html">
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<!-- Generated with distribusi https://git.vvvvvvaria.org/varia/distribusi -->
|
||||||
|
<meta name="generator" content="distribusi" />
|
||||||
|
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||||
|
<style>
|
||||||
|
.image{max-width: 100%;}
|
||||||
|
.pdf object{width:640px;height: 640px;}
|
||||||
|
.dir::before{content:"📁 ";font-size:18px;}
|
||||||
|
.filename{display:block;font-family:mono;}
|
||||||
|
.unkown-file::before{content:"📄 ";font-size:18px;}
|
||||||
|
div{max-width: 640px;display:inline-block;vertical-align:top;margin:1em;padding:1em;}
|
||||||
|
video {width:640px;max-height:640px;}
|
||||||
|
@media screen {
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: wfdtf;
|
||||||
|
src: url(Fonts/wftfs-Regular.otf)
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: EBGaramond;
|
||||||
|
src: url(Fonts/EBGaramond-Italic.ttf)
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-image: none;
|
||||||
|
min-height: 500px;
|
||||||
|
background-attachment: fixed;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
|
||||||
|
background-color: black;
|
||||||
|
margin: 5mm;
|
||||||
|
color: white;
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 10pt;
|
||||||
|
text-justify: inter-word;
|
||||||
|
columns: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="folder" class="dir"><a href='Sounds/'>Sounds/</a></div>
|
||||||
|
<div id="folder" class="dir"><a href='Artwork/'>Artwork/</a></div>
|
||||||
|
<div id="folder" class="dir"><a href='.ipynb_checkpoints/'>.ipynb_checkpoints/</a></div>
|
||||||
|
<div id="soundboard-Copy1" class="html"><section id="soundboard-Copy1.html"><!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<style>
|
||||||
|
.awdeeo {
|
||||||
|
background: purple;
|
||||||
|
width: 300px;
|
||||||
|
height: 300px;
|
||||||
|
margin: 1em;
|
||||||
|
}
|
||||||
|
.awdeeo:hover {
|
||||||
|
background: red;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="awdeeo">
|
||||||
|
<audio src="Sounds/Door.mp3" type="audio/mp3" loop controls> </audio>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>Note that you need to have clicked in the page, before (some) browsers let the audio play. Evt. you might want to also respond to clicks to not have to wait until the next mouseenter....</p>
|
||||||
|
|
||||||
|
<div class="awdeeo">
|
||||||
|
<audio src="https://aporee.org/maps/files/visjeetenopdemarkt.mp3" loop controls >
|
||||||
|
</audio>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
for (let div of document.querySelectorAll(".awdeeo")) {
|
||||||
|
let audio = div.querySelector("audio");
|
||||||
|
// console.log("audio", audio);
|
||||||
|
// https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event
|
||||||
|
// nb: mouseenter is similar, but different from mouseover
|
||||||
|
div.addEventListener("mouseenter", e=> {
|
||||||
|
audio.play();
|
||||||
|
})
|
||||||
|
div.addEventListener("mouseleave", e=> {
|
||||||
|
audio.pause();
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
</section></div>
|
||||||
|
<a href="../">../</a>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
</section></div>
|
||||||
|
<div id="soundboard-Copy1-checkpoint" class="html"><section id="soundboard-Copy1-checkpoint.html"><!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<style>
|
||||||
|
.awdeeo {
|
||||||
|
background: purple;
|
||||||
|
width: 300px;
|
||||||
|
height: 300px;
|
||||||
|
margin: 1em;
|
||||||
|
}
|
||||||
|
.awdeeo:hover {
|
||||||
|
background: red;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="awdeeo">
|
||||||
|
<audio src="Sounds/Door.mp3" type="audio/mp3" loop controls> </audio>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>Note that you need to have clicked in the page, before (some) browsers let the audio play. Evt. you might want to also respond to clicks to not have to wait until the next mouseenter....</p>
|
||||||
|
|
||||||
|
<div class="awdeeo">
|
||||||
|
<audio src="https://aporee.org/maps/files/visjeetenopdemarkt.mp3" loop controls >
|
||||||
|
</audio>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
for (let div of document.querySelectorAll(".awdeeo")) {
|
||||||
|
let audio = div.querySelector("audio");
|
||||||
|
// console.log("audio", audio);
|
||||||
|
// https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event
|
||||||
|
// nb: mouseenter is similar, but different from mouseover
|
||||||
|
div.addEventListener("mouseenter", e=> {
|
||||||
|
audio.play();
|
||||||
|
})
|
||||||
|
div.addEventListener("mouseleave", e=> {
|
||||||
|
audio.pause();
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
</section></div>
|
||||||
|
<a href="../">../</a>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,430 @@
|
|||||||
|
let keyButton, printerButton, recorderButton, playButton;
|
||||||
|
let bg;
|
||||||
|
let printer, keycard;
|
||||||
|
let keyIsPlaying = false;
|
||||||
|
let printerIsPlaying = false;
|
||||||
|
let phoneIsPlaying = false;
|
||||||
|
let speakerIsPlaying = false;
|
||||||
|
let neonIsPlaying = false;
|
||||||
|
let tvIsPlaying = false;
|
||||||
|
let slidingdoorIsPlaying = false;
|
||||||
|
let chatterIsPlaying = false;
|
||||||
|
let recordedMicSoundIsPlaying = false;
|
||||||
|
let bellIsPlaying = false;
|
||||||
|
let heartIsPlaying = false;
|
||||||
|
let mic, soundMicRecorder, recordedMicSound;
|
||||||
|
let isMicRecording;
|
||||||
|
let recordedSceneSound,soundSceneRecorder;
|
||||||
|
let isSceneRecording;
|
||||||
|
let showingTitle = false;
|
||||||
|
let Title;
|
||||||
|
let recordingImage;
|
||||||
|
|
||||||
|
|
||||||
|
function setup() {
|
||||||
|
bg = loadImage('assets/waitingroom.png');
|
||||||
|
createCanvas(640, 480);
|
||||||
|
var myCanvas = createCanvas(640, 480);
|
||||||
|
myCanvas.parent('main');
|
||||||
|
|
||||||
|
printer = loadSound('assets/printer.mp3');
|
||||||
|
printer.pan(1.0);
|
||||||
|
|
||||||
|
phone = loadSound('assets/phone.mp3');
|
||||||
|
phone.pan(0.8);
|
||||||
|
|
||||||
|
keycard = loadSound('assets/keycard.mp3');
|
||||||
|
keycard.pan(-0.9);
|
||||||
|
|
||||||
|
speaker = loadSound('assets/announcement.mp3');
|
||||||
|
speaker.pan(-0.2);
|
||||||
|
|
||||||
|
neon = loadSound('assets/neonlight.mp3');
|
||||||
|
|
||||||
|
tv = loadSound('assets/channelsurfing.mp3');
|
||||||
|
tv.pan(0.7);
|
||||||
|
|
||||||
|
slidingdoor = loadSound('assets/slidingdoor.mp3');
|
||||||
|
slidingdoor.pan(0.8);
|
||||||
|
|
||||||
|
chatter = loadSound('assets/chatter.mp3');
|
||||||
|
|
||||||
|
mic = new p5.AudioIn();
|
||||||
|
mic.start();
|
||||||
|
|
||||||
|
soundMicRecorder = new p5.SoundRecorder();
|
||||||
|
soundMicRecorder.setInput(mic);
|
||||||
|
|
||||||
|
recordedMicSound = new p5.SoundFile();
|
||||||
|
recordedMicSound.pan(-0.9);
|
||||||
|
|
||||||
|
soundSceneRecorder = new p5.SoundRecorder();
|
||||||
|
soundSceneRecorder.setInput();
|
||||||
|
|
||||||
|
recordedSceneSound = new p5.SoundFile();
|
||||||
|
|
||||||
|
|
||||||
|
bell = loadSound('assets/bell.mp3');
|
||||||
|
bell.pan(0.9);
|
||||||
|
|
||||||
|
heart = loadSound('assets/heartbeat.mp3');
|
||||||
|
|
||||||
|
showingTitle = true;
|
||||||
|
Title = loadImage('assets/titlescreen.png');
|
||||||
|
|
||||||
|
recordImage = loadImage('assets/record.png');
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
keyButton = createButton('');
|
||||||
|
keyButton.parent("main");
|
||||||
|
keyButton.volume = (0.1);
|
||||||
|
keyButton.position(87, 190);
|
||||||
|
keyButton.mousePressed(playKeySound);
|
||||||
|
keyButton.size(22, 30);
|
||||||
|
keyButton.style('background-color', color(25, 23, 200, 0));
|
||||||
|
keyButton.style('border-style', 'hidden');
|
||||||
|
keyButton.style('outline', 'none');
|
||||||
|
|
||||||
|
printerButton = createButton('');
|
||||||
|
printerButton.parent("main");
|
||||||
|
printerButton.position(571, 100);
|
||||||
|
printerButton.mousePressed(playPrinterSound);
|
||||||
|
printerButton.size(56, 30);
|
||||||
|
printerButton.style('background-color', color(25, 23, 200, 0));
|
||||||
|
printerButton.style('border-style', 'hidden');
|
||||||
|
printerButton.style('outline', 'none');
|
||||||
|
|
||||||
|
sceneRecordButton = createButton('');
|
||||||
|
sceneRecordButton.parent("main");
|
||||||
|
sceneRecordButton.position(572, 8);
|
||||||
|
sceneRecordButton.mousePressed(recordScene);
|
||||||
|
sceneRecordButton.size(58, 30);
|
||||||
|
sceneRecordButton.style('background-color', color(25, 23, 200, 0));
|
||||||
|
sceneRecordButton.style('border-style', 'hidden');
|
||||||
|
sceneRecordButton.style('outline', 'none');
|
||||||
|
|
||||||
|
|
||||||
|
phoneButton = createButton('');
|
||||||
|
phoneButton.parent("main");
|
||||||
|
phoneButton.position(491, 180);
|
||||||
|
phoneButton.mousePressed(playPhoneSound);
|
||||||
|
phoneButton.size(36, 30);
|
||||||
|
phoneButton.style('background-color', color(25, 23, 200, 0));
|
||||||
|
phoneButton.style('border-style', 'hidden');
|
||||||
|
phoneButton.style('outline', 'none');
|
||||||
|
|
||||||
|
speakerButton = createButton('');
|
||||||
|
speakerButton.parent("main");
|
||||||
|
speakerButton.position(143, 84);
|
||||||
|
speakerButton.mousePressed(playSpeakerSound);
|
||||||
|
speakerButton.size(38, 70);
|
||||||
|
speakerButton.style('background-color', color(25, 23, 200, 0));
|
||||||
|
speakerButton.style('border-style', 'hidden');
|
||||||
|
speakerButton.style('outline', 'none');
|
||||||
|
|
||||||
|
neonButton = createButton('');
|
||||||
|
neonButton.parent("main");
|
||||||
|
neonButton.position(183, 5);
|
||||||
|
neonButton.mousePressed(playNeonSound);
|
||||||
|
neonButton.size(223, 10);
|
||||||
|
neonButton.style('background-color', color(25, 23, 200, 0));
|
||||||
|
neonButton.style('border-style', 'hidden');
|
||||||
|
neonButton.style('outline', 'none');
|
||||||
|
|
||||||
|
tvButton = createButton('');
|
||||||
|
tvButton.parent("main");
|
||||||
|
tvButton.position(425, 20);
|
||||||
|
tvButton.mousePressed(playTVSound);
|
||||||
|
tvButton.size(90, 50);
|
||||||
|
tvButton.style('background-color', color(25, 23, 200, 0));
|
||||||
|
tvButton.style('border-style', 'hidden');
|
||||||
|
tvButton.style('outline', 'none');
|
||||||
|
|
||||||
|
slidingdoorButton = createButton('');
|
||||||
|
slidingdoorButton.parent("main");
|
||||||
|
slidingdoorButton.position(420, 460);
|
||||||
|
slidingdoorButton.mousePressed(playSlidingSound);
|
||||||
|
slidingdoorButton.size(220, 20);
|
||||||
|
slidingdoorButton.style('background-color', color(25, 23, 200, 0));
|
||||||
|
slidingdoorButton.style('border-style', 'hidden');
|
||||||
|
slidingdoorButton.style('outline', 'none');
|
||||||
|
|
||||||
|
chatterButton = createButton('');
|
||||||
|
chatterButton.parent("main");
|
||||||
|
chatterButton.position(165, 196);
|
||||||
|
chatterButton.mousePressed(playChatterSound);
|
||||||
|
chatterButton.size(260, 130);
|
||||||
|
chatterButton.style('background-color', color(25, 23, 200, 0));
|
||||||
|
chatterButton.style('border-style', 'hidden');
|
||||||
|
chatterButton.style('outline', 'none');
|
||||||
|
|
||||||
|
recorderButton = createButton('');
|
||||||
|
recorderButton.parent("main");
|
||||||
|
recorderButton.position(20, 405);
|
||||||
|
recorderButton.mousePressed(recordInput);
|
||||||
|
recorderButton.mouseReleased(recordInput);
|
||||||
|
recorderButton.size(35,30);
|
||||||
|
recorderButton.style('background-color', color(25, 23, 200, 0));
|
||||||
|
recorderButton.style('border-style','hidden');
|
||||||
|
recorderButton.style('outline','none');
|
||||||
|
|
||||||
|
playButton = createButton('');
|
||||||
|
playButton.parent("main");
|
||||||
|
playButton.position(55, 405);
|
||||||
|
playButton.mousePressed(playRecorded);
|
||||||
|
playButton.size(35,30);
|
||||||
|
playButton.style('background-color', color(25, 23, 200, 0));
|
||||||
|
playButton.style('border-style','hidden');
|
||||||
|
playButton.style('outline','none');
|
||||||
|
|
||||||
|
bellButton = createButton('');
|
||||||
|
bellButton.parent("main");
|
||||||
|
bellButton.position(610, 310);
|
||||||
|
bellButton.mousePressed(playBellSound);
|
||||||
|
bellButton.size(30, 40);
|
||||||
|
bellButton.style('background-color', color(25, 23, 200, 0));
|
||||||
|
bellButton.style('border-style', 'hidden');
|
||||||
|
bellButton.style('outline', 'none');
|
||||||
|
|
||||||
|
|
||||||
|
heartButton = createButton('');
|
||||||
|
heartButton.parent("main");
|
||||||
|
heartButton.position(542, 325);
|
||||||
|
heartButton.mousePressed(playHeartSound);
|
||||||
|
heartButton.size(50, 60);
|
||||||
|
heartButton.style('background-color', color(25, 23, 200, 0));
|
||||||
|
heartButton.style('border-style', 'hidden');
|
||||||
|
heartButton.style('outline','none');
|
||||||
|
|
||||||
|
}
|
||||||
|
function draw() {
|
||||||
|
background(bg);
|
||||||
|
if(isSceneRecording)
|
||||||
|
{
|
||||||
|
image(recordImage, 575, 12, 21.5, 21.5)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (showingTitle)
|
||||||
|
image(Title,0,0,640,480)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function keyPressed() {
|
||||||
|
if(keyCode == ENTER)
|
||||||
|
{
|
||||||
|
showingTitle = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function recordInput() {
|
||||||
|
userStartAudio();
|
||||||
|
if (isMicRecording) {
|
||||||
|
isMicRecording = false;
|
||||||
|
soundMicRecorder.stop();
|
||||||
|
|
||||||
|
} else {
|
||||||
|
soundMicRecorder.record(recordedMicSound);
|
||||||
|
isMicRecording = true;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function recordScene() {
|
||||||
|
if (isSceneRecording) {
|
||||||
|
soundSceneRecorder.stop();
|
||||||
|
} else {
|
||||||
|
soundSceneRecorder.record(recordedSceneSound, 360, sceneRecordFinished);
|
||||||
|
isSceneRecording = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function sceneRecordFinished()
|
||||||
|
{
|
||||||
|
isSceneRecording = false;
|
||||||
|
save(recordedSceneSound, "W808");
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function playRecorded() {
|
||||||
|
|
||||||
|
//recordedSound.setVolume(0.1);
|
||||||
|
if (recordedMicSoundIsPlaying) {
|
||||||
|
recordedMicSound.pause();
|
||||||
|
|
||||||
|
recordedMicSoundIsPlaying = false;
|
||||||
|
} else {
|
||||||
|
recordedMicSound.loop();
|
||||||
|
|
||||||
|
recordedMicSoundIsPlaying = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function playKeySound() {
|
||||||
|
keycard.setVolume(0.1);
|
||||||
|
if (keyIsPlaying) {
|
||||||
|
keycard.pause();
|
||||||
|
|
||||||
|
keyIsPlaying = false;
|
||||||
|
} else {
|
||||||
|
keycard.loop();
|
||||||
|
|
||||||
|
keyIsPlaying = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function playPrinterSound() {
|
||||||
|
printer.setVolume(0.1);
|
||||||
|
if (printerIsPlaying) {
|
||||||
|
printer.pause();
|
||||||
|
printerIsPlaying = false;
|
||||||
|
|
||||||
|
|
||||||
|
} else {
|
||||||
|
printer.loop();
|
||||||
|
printerIsPlaying = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function playPhoneSound() {
|
||||||
|
phone.setVolume(0.2);
|
||||||
|
if (phoneIsPlaying) {
|
||||||
|
phone.pause();
|
||||||
|
phoneIsPlaying = false;
|
||||||
|
|
||||||
|
|
||||||
|
} else {
|
||||||
|
phone.loop();
|
||||||
|
phoneIsPlaying = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function playSpeakerSound() {
|
||||||
|
speaker.setVolume(0.15);
|
||||||
|
if (speakerIsPlaying) {
|
||||||
|
speaker.pause();
|
||||||
|
speakerIsPlaying = false;
|
||||||
|
|
||||||
|
|
||||||
|
} else {
|
||||||
|
speaker.loop();
|
||||||
|
speakerIsPlaying = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function playNeonSound() {
|
||||||
|
neon.setVolume(0.1);
|
||||||
|
if (neonIsPlaying) {
|
||||||
|
neon.pause();
|
||||||
|
|
||||||
|
neonIsPlaying = false;
|
||||||
|
} else {
|
||||||
|
neon.loop();
|
||||||
|
|
||||||
|
neonIsPlaying = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function playTVSound() {
|
||||||
|
tv.setVolume(0.02);
|
||||||
|
if (tvIsPlaying) {
|
||||||
|
tv.pause();
|
||||||
|
tvIsPlaying = false;
|
||||||
|
|
||||||
|
|
||||||
|
} else {
|
||||||
|
tv.loop();
|
||||||
|
tvIsPlaying = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function playSlidingSound() {
|
||||||
|
slidingdoor.setVolume(0.25);
|
||||||
|
if (slidingdoorIsPlaying) {
|
||||||
|
slidingdoor.pause();
|
||||||
|
tvIsPlaying = false;
|
||||||
|
|
||||||
|
|
||||||
|
} else {
|
||||||
|
slidingdoor.loop();
|
||||||
|
slidingdoorIsPlaying = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function playChatterSound() {
|
||||||
|
chatter.setVolume(1.0);
|
||||||
|
if (chatterIsPlaying) {
|
||||||
|
chatter.pause();
|
||||||
|
chatterIsPlaying = false;
|
||||||
|
|
||||||
|
|
||||||
|
} else {
|
||||||
|
chatter.loop();
|
||||||
|
chatterIsPlaying = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function playToySound() {
|
||||||
|
toy.setVolume(0.25);
|
||||||
|
if (toyIsPlaying) {
|
||||||
|
toy.pause();
|
||||||
|
toyIsPlaying = false;
|
||||||
|
|
||||||
|
|
||||||
|
} else {
|
||||||
|
toy.loop();
|
||||||
|
toyIsPlaying = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function playHeartSound() {
|
||||||
|
heart.setVolume(0.5);
|
||||||
|
if (heartIsPlaying) {
|
||||||
|
heart.pause();
|
||||||
|
heartIsPlaying = false;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
} else {
|
||||||
|
heart.loop();
|
||||||
|
heartIsPlaying = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function playBellSound() {
|
||||||
|
bell.setVolume(0.3);
|
||||||
|
if (bellIsPlaying) {
|
||||||
|
bell.pause();
|
||||||
|
bellIsPlaying = false;
|
||||||
|
|
||||||
|
|
||||||
|
} else {
|
||||||
|
bell.loop();
|
||||||
|
bellIsPlaying = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
html, body {
|
||||||
|
|
||||||
|
background: #393833;
|
||||||
|
font-size: 20px;
|
||||||
|
font-family: monospace;
|
||||||
|
color: #ecdba5;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
canvas {
|
||||||
|
display: block;
|
||||||
|
left: 0;
|
||||||
|
top: 20px;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
position:relative;
|
||||||
|
width: 640px;
|
||||||
|
height: 480px;
|
||||||
|
background: #393833;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 989 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 207 KiB |
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.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 989 KiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 207 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
@ -0,0 +1,66 @@
|
|||||||
|
<!DOCTYPE html><html lang="en"><head>
|
||||||
|
<script src="p5.js"></script>
|
||||||
|
|
||||||
|
<script src="p5.sound.min.js"></script>
|
||||||
|
<link rel="stylesheet" type="text/css" href="style.css">
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title> (W)808 Clinic </title>
|
||||||
|
<style type="text/css">
|
||||||
|
|
||||||
|
|
||||||
|
body {
|
||||||
|
|
||||||
|
padding-bottom:15px;
|
||||||
|
background: #393833;
|
||||||
|
font-size: 12px;
|
||||||
|
font-family: monospace;
|
||||||
|
color: #ded42d;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-family: monospace;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: #c84b31;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-family: monospace;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: #c2672e;
|
||||||
|
font-size: 20px;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<center>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<img src='assets/webtitle.png'width="640" height="190">
|
||||||
|
|
||||||
|
<script src="sketch.js"></script>
|
||||||
|
|
||||||
|
<div id="main">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<center>
|
||||||
|
<br>
|
||||||
|
<h1>Make musical compositions with the found sounds of the waiting room!</h1>
|
||||||
|
<h2> Can you find all 10? </h2>
|
||||||
|
|
||||||
|
<p> + [ Click the objects once to loop the sound files and click again to pause. ]<br><br>+ [ In the cassette player, hold the red button to record your own sample, and press the yellow play button to play and loop. Like the other objects, you can press again to pause. ]<br><br>
|
||||||
|
+ [ In the top corner you can record your composition and save it to your computer. <br>Press once to start recording and press again to stop. ]<br><br><br>
|
||||||
|
+ WORKS BEST WITH HEADPHONES +</p>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,431 @@
|
|||||||
|
let keyButton, printerButton, recorderButton, playButton;
|
||||||
|
let bg;
|
||||||
|
let printer, keycard;
|
||||||
|
let keyIsPlaying = false;
|
||||||
|
let printerIsPlaying = false;
|
||||||
|
let phoneIsPlaying = false;
|
||||||
|
let speakerIsPlaying = false;
|
||||||
|
let neonIsPlaying = false;
|
||||||
|
let tvIsPlaying = false;
|
||||||
|
let slidingdoorIsPlaying = false;
|
||||||
|
let chatterIsPlaying = false;
|
||||||
|
let recordedMicSoundIsPlaying = false;
|
||||||
|
let bellIsPlaying = false;
|
||||||
|
let heartIsPlaying = false;
|
||||||
|
let mic, soundMicRecorder, recordedMicSound;
|
||||||
|
let isMicRecording;
|
||||||
|
let recordedSceneSound,soundSceneRecorder;
|
||||||
|
let isSceneRecording;
|
||||||
|
let showingTitle = false;
|
||||||
|
let Title;
|
||||||
|
let recordingImage;
|
||||||
|
|
||||||
|
|
||||||
|
function setup() {
|
||||||
|
bg = loadImage('assets/waitingroom.png');
|
||||||
|
createCanvas(640, 480);
|
||||||
|
var myCanvas = createCanvas(640, 480);
|
||||||
|
myCanvas.parent('main');
|
||||||
|
|
||||||
|
printer = loadSound('assets/printer.mp3');
|
||||||
|
printer.pan(1.0);
|
||||||
|
|
||||||
|
phone = loadSound('assets/phone.mp3');
|
||||||
|
phone.pan(0.8);
|
||||||
|
|
||||||
|
keycard = loadSound('assets/keycard.mp3');
|
||||||
|
keycard.pan(-0.9);
|
||||||
|
|
||||||
|
speaker = loadSound('assets/announcement.mp3');
|
||||||
|
speaker.pan(-0.2);
|
||||||
|
|
||||||
|
neon = loadSound('assets/neonlight.mp3');
|
||||||
|
|
||||||
|
tv = loadSound('assets/channelsurfing.mp3');
|
||||||
|
tv.pan(0.7);
|
||||||
|
|
||||||
|
slidingdoor = loadSound('assets/slidingdoor.mp3');
|
||||||
|
slidingdoor.pan(0.8);
|
||||||
|
|
||||||
|
chatter = loadSound('assets/chatter.mp3');
|
||||||
|
|
||||||
|
mic = new p5.AudioIn();
|
||||||
|
mic.start();
|
||||||
|
|
||||||
|
soundMicRecorder = new p5.SoundRecorder();
|
||||||
|
soundMicRecorder.setInput(mic);
|
||||||
|
|
||||||
|
recordedMicSound = new p5.SoundFile();
|
||||||
|
recordedMicSound.pan(-0.9);
|
||||||
|
|
||||||
|
soundSceneRecorder = new p5.SoundRecorder();
|
||||||
|
soundSceneRecorder.setInput();
|
||||||
|
|
||||||
|
recordedSceneSound = new p5.SoundFile();
|
||||||
|
|
||||||
|
|
||||||
|
bell = loadSound('assets/bell.mp3');
|
||||||
|
bell.pan(0.9);
|
||||||
|
|
||||||
|
heart = loadSound('assets/heartbeat.mp3');
|
||||||
|
|
||||||
|
showingTitle = true;
|
||||||
|
Title = loadImage('assets/titlescreen.png');
|
||||||
|
|
||||||
|
recordImage = loadImage('assets/record.png');
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
keyButton = createButton('');
|
||||||
|
keyButton.parent("main");
|
||||||
|
keyButton.volume = (0.1);
|
||||||
|
keyButton.position(87, 190);
|
||||||
|
keyButton.mousePressed(playKeySound);
|
||||||
|
keyButton.size(22, 30);
|
||||||
|
keyButton.style('background-color', color(25, 23, 200, 0));
|
||||||
|
keyButton.style('border-style', 'hidden');
|
||||||
|
keyButton.style('outline', 'none');
|
||||||
|
|
||||||
|
printerButton = createButton('');
|
||||||
|
printerButton.parent("main");
|
||||||
|
printerButton.position(571, 100);
|
||||||
|
printerButton.mousePressed(playPrinterSound);
|
||||||
|
printerButton.size(56, 30);
|
||||||
|
printerButton.style('background-color', color(25, 23, 200, 0));
|
||||||
|
printerButton.style('border-style', 'hidden');
|
||||||
|
printerButton.style('outline', 'none');
|
||||||
|
|
||||||
|
sceneRecordButton = createButton('');
|
||||||
|
sceneRecordButton.parent("main");
|
||||||
|
sceneRecordButton.position(572, 8);
|
||||||
|
sceneRecordButton.mousePressed(recordScene);
|
||||||
|
sceneRecordButton.size(58, 30);
|
||||||
|
sceneRecordButton.style('background-color', color(25, 23, 200, 0));
|
||||||
|
sceneRecordButton.style('border-style', 'hidden');
|
||||||
|
sceneRecordButton.style('outline', 'none');
|
||||||
|
|
||||||
|
|
||||||
|
phoneButton = createButton('');
|
||||||
|
phoneButton.parent("main");
|
||||||
|
phoneButton.position(491, 180);
|
||||||
|
phoneButton.mousePressed(playPhoneSound);
|
||||||
|
phoneButton.size(36, 30);
|
||||||
|
phoneButton.style('background-color', color(25, 23, 200, 0));
|
||||||
|
phoneButton.style('border-style', 'hidden');
|
||||||
|
phoneButton.style('outline', 'none');
|
||||||
|
|
||||||
|
speakerButton = createButton('');
|
||||||
|
speakerButton.parent("main");
|
||||||
|
speakerButton.position(143, 84);
|
||||||
|
speakerButton.mousePressed(playSpeakerSound);
|
||||||
|
speakerButton.size(38, 70);
|
||||||
|
speakerButton.style('background-color', color(25, 23, 200, 0));
|
||||||
|
speakerButton.style('border-style', 'hidden');
|
||||||
|
speakerButton.style('outline', 'none');
|
||||||
|
|
||||||
|
neonButton = createButton('');
|
||||||
|
neonButton.parent("main");
|
||||||
|
neonButton.position(183, 5);
|
||||||
|
neonButton.mousePressed(playNeonSound);
|
||||||
|
neonButton.size(223, 10);
|
||||||
|
neonButton.style('background-color', color(25, 23, 200, 0));
|
||||||
|
neonButton.style('border-style', 'hidden');
|
||||||
|
neonButton.style('outline', 'none');
|
||||||
|
|
||||||
|
tvButton = createButton('');
|
||||||
|
tvButton.parent("main");
|
||||||
|
tvButton.position(425, 20);
|
||||||
|
tvButton.mousePressed(playTVSound);
|
||||||
|
tvButton.size(90, 50);
|
||||||
|
tvButton.style('background-color', color(25, 23, 200, 0));
|
||||||
|
tvButton.style('border-style', 'hidden');
|
||||||
|
tvButton.style('outline', 'none');
|
||||||
|
|
||||||
|
slidingdoorButton = createButton('');
|
||||||
|
slidingdoorButton.parent("main");
|
||||||
|
slidingdoorButton.position(420, 460);
|
||||||
|
slidingdoorButton.mousePressed(playSlidingSound);
|
||||||
|
slidingdoorButton.size(220, 20);
|
||||||
|
slidingdoorButton.style('background-color', color(25, 23, 200, 0));
|
||||||
|
slidingdoorButton.style('border-style', 'hidden');
|
||||||
|
slidingdoorButton.style('outline', 'none');
|
||||||
|
|
||||||
|
chatterButton = createButton('');
|
||||||
|
chatterButton.parent("main");
|
||||||
|
chatterButton.position(165, 196);
|
||||||
|
chatterButton.mousePressed(playChatterSound);
|
||||||
|
chatterButton.size(260, 130);
|
||||||
|
chatterButton.style('background-color', color(25, 23, 200, 0));
|
||||||
|
chatterButton.style('border-style', 'hidden');
|
||||||
|
chatterButton.style('outline', 'none');
|
||||||
|
|
||||||
|
recorderButton = createButton('');
|
||||||
|
recorderButton.parent("main");
|
||||||
|
recorderButton.position(20, 405);
|
||||||
|
recorderButton.mousePressed(recordInput);
|
||||||
|
recorderButton.mouseReleased(recordInput);
|
||||||
|
recorderButton.size(35,30);
|
||||||
|
recorderButton.style('background-color', color(25, 23, 200, 0));
|
||||||
|
recorderButton.style('border-style','hidden');
|
||||||
|
recorderButton.style('outline','none');
|
||||||
|
|
||||||
|
playButton = createButton('');
|
||||||
|
playButton.parent("main");
|
||||||
|
playButton.position(55, 405);
|
||||||
|
playButton.mousePressed(playRecorded);
|
||||||
|
playButton.size(35,30);
|
||||||
|
playButton.style('background-color', color(25, 23, 200, 0));
|
||||||
|
playButton.style('border-style','hidden');
|
||||||
|
playButton.style('outline','none');
|
||||||
|
|
||||||
|
bellButton = createButton('');
|
||||||
|
bellButton.parent("main");
|
||||||
|
bellButton.position(610, 310);
|
||||||
|
bellButton.mousePressed(playBellSound);
|
||||||
|
bellButton.size(30, 40);
|
||||||
|
bellButton.style('background-color', color(25, 23, 200, 0));
|
||||||
|
bellButton.style('border-style', 'hidden');
|
||||||
|
bellButton.style('outline', 'none');
|
||||||
|
|
||||||
|
|
||||||
|
heartButton = createButton('');
|
||||||
|
heartButton.parent("main");
|
||||||
|
heartButton.position(542, 325);
|
||||||
|
heartButton.mousePressed(playHeartSound);
|
||||||
|
heartButton.size(50, 60);
|
||||||
|
heartButton.style('background-color', color(25, 23, 200, 0));
|
||||||
|
heartButton.style('border-style', 'hidden');
|
||||||
|
heartButton.style('outline','none');
|
||||||
|
|
||||||
|
}
|
||||||
|
function draw() {
|
||||||
|
background(bg);
|
||||||
|
if(isSceneRecording)
|
||||||
|
{
|
||||||
|
image(recordImage, 575, 12, 21.5, 21.5)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (showingTitle)
|
||||||
|
image(Title,0,0,640,480)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function keyPressed() {
|
||||||
|
if(keyCode == ENTER)
|
||||||
|
{
|
||||||
|
showingTitle = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function recordInput() {
|
||||||
|
userStartAudio();
|
||||||
|
if (isMicRecording) {
|
||||||
|
isMicRecording = false;
|
||||||
|
soundMicRecorder.stop();
|
||||||
|
|
||||||
|
} else {
|
||||||
|
soundMicRecorder.record(recordedMicSound);
|
||||||
|
isMicRecording = true;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function recordScene() {
|
||||||
|
userStartAudio();
|
||||||
|
if (isSceneRecording) {
|
||||||
|
soundSceneRecorder.stop();
|
||||||
|
} else {
|
||||||
|
soundSceneRecorder.record(recordedSceneSound, 360, sceneRecordFinished);
|
||||||
|
isSceneRecording = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function sceneRecordFinished()
|
||||||
|
{
|
||||||
|
isSceneRecording = false;
|
||||||
|
save(recordedSceneSound, "W808");
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function playRecorded() {
|
||||||
|
|
||||||
|
//recordedSound.setVolume(0.1);
|
||||||
|
if (recordedMicSoundIsPlaying) {
|
||||||
|
recordedMicSound.pause();
|
||||||
|
|
||||||
|
recordedMicSoundIsPlaying = false;
|
||||||
|
} else {
|
||||||
|
recordedMicSound.loop();
|
||||||
|
|
||||||
|
recordedMicSoundIsPlaying = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function playKeySound() {
|
||||||
|
keycard.setVolume(0.1);
|
||||||
|
if (keyIsPlaying) {
|
||||||
|
keycard.pause();
|
||||||
|
|
||||||
|
keyIsPlaying = false;
|
||||||
|
} else {
|
||||||
|
keycard.loop();
|
||||||
|
|
||||||
|
keyIsPlaying = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function playPrinterSound() {
|
||||||
|
printer.setVolume(0.1);
|
||||||
|
if (printerIsPlaying) {
|
||||||
|
printer.pause();
|
||||||
|
printerIsPlaying = false;
|
||||||
|
|
||||||
|
|
||||||
|
} else {
|
||||||
|
printer.loop();
|
||||||
|
printerIsPlaying = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function playPhoneSound() {
|
||||||
|
phone.setVolume(0.2);
|
||||||
|
if (phoneIsPlaying) {
|
||||||
|
phone.pause();
|
||||||
|
phoneIsPlaying = false;
|
||||||
|
|
||||||
|
|
||||||
|
} else {
|
||||||
|
phone.loop();
|
||||||
|
phoneIsPlaying = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function playSpeakerSound() {
|
||||||
|
speaker.setVolume(0.15);
|
||||||
|
if (speakerIsPlaying) {
|
||||||
|
speaker.pause();
|
||||||
|
speakerIsPlaying = false;
|
||||||
|
|
||||||
|
|
||||||
|
} else {
|
||||||
|
speaker.loop();
|
||||||
|
speakerIsPlaying = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function playNeonSound() {
|
||||||
|
neon.setVolume(0.1);
|
||||||
|
if (neonIsPlaying) {
|
||||||
|
neon.pause();
|
||||||
|
|
||||||
|
neonIsPlaying = false;
|
||||||
|
} else {
|
||||||
|
neon.loop();
|
||||||
|
|
||||||
|
neonIsPlaying = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function playTVSound() {
|
||||||
|
tv.setVolume(0.02);
|
||||||
|
if (tvIsPlaying) {
|
||||||
|
tv.pause();
|
||||||
|
tvIsPlaying = false;
|
||||||
|
|
||||||
|
|
||||||
|
} else {
|
||||||
|
tv.loop();
|
||||||
|
tvIsPlaying = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function playSlidingSound() {
|
||||||
|
slidingdoor.setVolume(0.25);
|
||||||
|
if (slidingdoorIsPlaying) {
|
||||||
|
slidingdoor.pause();
|
||||||
|
tvIsPlaying = false;
|
||||||
|
|
||||||
|
|
||||||
|
} else {
|
||||||
|
slidingdoor.loop();
|
||||||
|
slidingdoorIsPlaying = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function playChatterSound() {
|
||||||
|
chatter.setVolume(1.0);
|
||||||
|
if (chatterIsPlaying) {
|
||||||
|
chatter.pause();
|
||||||
|
chatterIsPlaying = false;
|
||||||
|
|
||||||
|
|
||||||
|
} else {
|
||||||
|
chatter.loop();
|
||||||
|
chatterIsPlaying = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function playToySound() {
|
||||||
|
toy.setVolume(0.25);
|
||||||
|
if (toyIsPlaying) {
|
||||||
|
toy.pause();
|
||||||
|
toyIsPlaying = false;
|
||||||
|
|
||||||
|
|
||||||
|
} else {
|
||||||
|
toy.loop();
|
||||||
|
toyIsPlaying = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function playHeartSound() {
|
||||||
|
heart.setVolume(0.5);
|
||||||
|
if (heartIsPlaying) {
|
||||||
|
heart.pause();
|
||||||
|
heartIsPlaying = false;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
} else {
|
||||||
|
heart.loop();
|
||||||
|
heartIsPlaying = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function playBellSound() {
|
||||||
|
bell.setVolume(0.3);
|
||||||
|
if (bellIsPlaying) {
|
||||||
|
bell.pause();
|
||||||
|
bellIsPlaying = false;
|
||||||
|
|
||||||
|
|
||||||
|
} else {
|
||||||
|
bell.loop();
|
||||||
|
bellIsPlaying = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
html, body {
|
||||||
|
|
||||||
|
background: #393833;
|
||||||
|
font-size: 20px;
|
||||||
|
font-family: monospace;
|
||||||
|
color: #ecdba5;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
canvas {
|
||||||
|
display: block;
|
||||||
|
left: 0;
|
||||||
|
top: 20px;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
position:relative;
|
||||||
|
width: 640px;
|
||||||
|
height: 480px;
|
||||||
|
background: #393833;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
💌 PPRGM 🕊
|
||||||
|
|
||||||
|
WOW! You have teleported to the this secret guestbook! Amazing!! You have made it! Please add some knowledge about poison or teleportation or anything you feel like at this guestbook and you will be honoured forever.
|
||||||
|
1617233889
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 867 KiB |
@ -0,0 +1,38 @@
|
|||||||
|
Introduction
|
||||||
|
------------
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
*Flat-File GuestBook* is a simple-single file guestbook application without database written in PHP. Instead, the user data will be stored into a text file.
|
||||||
|
|
||||||
|
Details
|
||||||
|
-------
|
||||||
|
|
||||||
|
Download and extract the file to get a `guestbook` folder. Copy the folder and it’s contents then paste to your localhost folder.
|
||||||
|
|
||||||
|
Now open `http://localhost/guestbook/index.php` with your favorite browser. *Done!*
|
||||||
|
|
||||||
|
Configurations
|
||||||
|
--------------
|
||||||
|
|
||||||
|
``` .php
|
||||||
|
// START CONFIGURATION
|
||||||
|
$database = 'database-001'; // Your TXT file name as database.
|
||||||
|
$per_page = 5; // The number of items you want to display per page.
|
||||||
|
$time_zone = 'Asia/Jakarta'; // Look at `date_default_timezone_set()`
|
||||||
|
$max_length_name = 60; // Maximum character length for guest name
|
||||||
|
$max_length_url = 120; // Maximum character length for guest URL
|
||||||
|
$max_length_message = 1000; // Maximum character length for guest message
|
||||||
|
$messages = array(
|
||||||
|
'database_missing' => 'Database not found. Created one. Please reload the page.',
|
||||||
|
'name_missing' => 'Please enter your name.',
|
||||||
|
'url_invalid' => 'Invalid URL.',
|
||||||
|
'message_missing' => 'Please enter your message.',
|
||||||
|
'math_invalid' => 'Wrong math answer.',
|
||||||
|
'max_length_name' => 'Maximum character length for guest name is ' . $max_length_name,
|
||||||
|
'max_length_url' => 'Maximum character length for guest URL is ' . $max_length_url,
|
||||||
|
'max_length_message' => 'Maximum character length for guest message is ' . $max_length_message,
|
||||||
|
'no_content' => 'No content.'
|
||||||
|
);
|
||||||
|
// END CONFIGURATION
|
||||||
|
```
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
💌 PPRGM 🕊
|
||||||
|
|
||||||
|
WOW! You have teleported to the this secret guestbook! Amazing!! You have made it! Please add some knowledge about poison or teleportation or anything you feel like at this guestbook and you will be honoured forever.
|
||||||
|
1617233889
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 814 B |
@ -0,0 +1,270 @@
|
|||||||
|
<?php session_start(); ?>
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html dir="ltr">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>MAILBOX</title>
|
||||||
|
<script>
|
||||||
|
const titles = ["Mail", "Box", "💌"];
|
||||||
|
let i = 0;
|
||||||
|
|
||||||
|
setInterval(() => {
|
||||||
|
i = i % 3;
|
||||||
|
document.title = titles[i];
|
||||||
|
i++;
|
||||||
|
}, 1000);
|
||||||
|
</script>
|
||||||
|
<link href="style.css" rel="stylesheet">
|
||||||
|
<link rel="icon" type="image/png" href="ico.png">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="rightyspace"></div>
|
||||||
|
<div id="messagegif"> <img id="gifgif" src="leavemessage.gif"> </div>
|
||||||
|
<div id="carddiv"><img src="duif.gif" id="fishcard"></div>
|
||||||
|
|
||||||
|
<div class="guestbook" id="guestbook">
|
||||||
|
<div class="guest-messages" id="guest-messages">
|
||||||
|
<?php
|
||||||
|
|
||||||
|
// ===================================================================
|
||||||
|
// PHP FLAT-FILE GUESTBOOK by Taufik Nurrohman <http://gplus.to/tovic>
|
||||||
|
// ===================================================================
|
||||||
|
|
||||||
|
// START CONFIGURATION
|
||||||
|
$database = 'database-001'; // Your TXT file name as database.
|
||||||
|
$per_page = 10; // The number of items you want to display per page.
|
||||||
|
$time_zone = 'Europe/Amsterdam'; // Look at `date_default_timezone_set()`
|
||||||
|
$max_length_name = 60; // Maximum character length for guest name
|
||||||
|
$max_length_message = 1000; // Maximum character length for guest message
|
||||||
|
$messages = array(
|
||||||
|
'database_missing' => 'Database not found. Created one. Please reload the page.',
|
||||||
|
'name_missing' => 'Please enter your name.',
|
||||||
|
'message_missing' => 'Please enter your message.',
|
||||||
|
'max_length_name' => 'Maximum character length for guest name is ' . $max_length_name,
|
||||||
|
'max_length_message' => 'Maximum character length for guest message is ' . $max_length_message,
|
||||||
|
'no_content' => 'No content.'
|
||||||
|
);
|
||||||
|
// END CONFIGURATION
|
||||||
|
|
||||||
|
// Set default timezone to adjust the timestamp.
|
||||||
|
// => http://www.php.net/manual/en/function.date-default-timezone-set.php
|
||||||
|
date_default_timezone_set($time_zone);
|
||||||
|
|
||||||
|
// Functions to create and/or update the content of the TXT file (our database)
|
||||||
|
function create_or_update_file($file_path, $data) {
|
||||||
|
$handle = fopen($file_path, 'w') or die('Cannot open file: ' . $file_path);
|
||||||
|
fwrite($handle, $data);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Filter HTML outputs.
|
||||||
|
// The rest will appear as plain HTML entities to prevent XSS.
|
||||||
|
// => http://en.wikipedia.org/wiki/Cross-site_scripting
|
||||||
|
function filter_html($data) {
|
||||||
|
return preg_replace(
|
||||||
|
array(
|
||||||
|
'/<(\/?)(b|blockquote|br|em|i|ins|mark|q|strong|u)>/i', // Allowed HTML tags
|
||||||
|
'/<center>/', // Deprecated <center> tag
|
||||||
|
'/<\/center>/', // Deprecated </center> tag
|
||||||
|
'/&([a-zA-Z]+|\#[0-9]+);/' // Symbols
|
||||||
|
),
|
||||||
|
array(
|
||||||
|
'<$1$2>',
|
||||||
|
'<div style="text-align:center;">',
|
||||||
|
'</div>',
|
||||||
|
'&$1;'
|
||||||
|
),
|
||||||
|
$data);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Redefine database name via URL to load
|
||||||
|
// Load database-002.txt => http://localhost/guestbook/index.php&data=database-002
|
||||||
|
if(isset($_GET['data'])) {
|
||||||
|
$database = $_GET['data'];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check whether the "database" is not available. If not, create one!
|
||||||
|
if( ! file_exists($database . '.txt')) {
|
||||||
|
// Prevent guest to create new database via `data=database-XXX` in URL
|
||||||
|
// Only administrator can do this by editing the `$database` value
|
||||||
|
if( ! isset($_GET['data'])) {
|
||||||
|
create_or_update_file($database . '.txt', "");
|
||||||
|
echo "<p class=\"message-warning\">" . $messages['database_missing'] . "</p>";
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
} else {
|
||||||
|
$old_data = file_get_contents($database . '.txt');
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Post a message
|
||||||
|
*/
|
||||||
|
$error = ""; // error messages
|
||||||
|
if($_SERVER['REQUEST_METHOD'] == 'POST') {
|
||||||
|
|
||||||
|
$name = "";
|
||||||
|
$url = "";
|
||||||
|
$message = "";
|
||||||
|
$timestamp = date('U');
|
||||||
|
|
||||||
|
// Make sure the guest name is not empty.
|
||||||
|
if(isset($_POST['name']) && ! empty($_POST['name'])) {
|
||||||
|
$name = strip_tags($_POST['name']);
|
||||||
|
} else {
|
||||||
|
$error .= "<p class=\"message-error\">" . $messages['name_missing'] . "</p>";
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Make sure the guest message is not empty.
|
||||||
|
if(isset($_POST['message']) && ! empty($_POST['message'])) {
|
||||||
|
$message = preg_replace(
|
||||||
|
array(
|
||||||
|
'/[\n\r]{4,}/', // [1]
|
||||||
|
'/\n/',
|
||||||
|
'/[\r\t]/',
|
||||||
|
'/ {2}/', // Multiple space characters
|
||||||
|
'/ | /',
|
||||||
|
'/<a (.*?)?href=(\'|\")(.*?)(\'|\")(.*?)?>(.*?)<\/a>/i' // Match links
|
||||||
|
),
|
||||||
|
array(
|
||||||
|
'<br><br>',
|
||||||
|
'<br>',
|
||||||
|
'',
|
||||||
|
' ',
|
||||||
|
' ',
|
||||||
|
'$6' // Unlink all links in message content!
|
||||||
|
),
|
||||||
|
$_POST['message']);
|
||||||
|
$message = htmlentities($message, ENT_QUOTES, 'UTF-8'); // [2]
|
||||||
|
} else {
|
||||||
|
$error .= "<p class=\"message-error\">" . $messages['message_missing'] . "</p>";
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Check for character length limit
|
||||||
|
if(strlen($name) > $max_length_name) $error .= "<p class=\"message-error\">" . $messages['max_length_name'] . "</p>";
|
||||||
|
if(strlen($message) > $max_length_message) $error .= "<p class=\"message-error\">" . $messages['max_length_message'] . "</p>";
|
||||||
|
|
||||||
|
// If all data entered by guest is valid, insert new data!
|
||||||
|
if($error === "") {
|
||||||
|
$new_data = " 💌 " . $name ." 🕊 " . "\n" . "\n" . $message . "\n" . $timestamp;
|
||||||
|
if( ! empty($old_data)) {
|
||||||
|
create_or_update_file($database . '.txt', $new_data . "\n\n==\n" . $old_data); // Prepend data
|
||||||
|
} else {
|
||||||
|
create_or_update_file($database . '.txt', $new_data); // Insert data
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// else, print the error messages.
|
||||||
|
echo $error;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// [3]
|
||||||
|
$_SESSION['guest_name'] = isset($_POST['name']) ? $_POST['name'] : "";
|
||||||
|
$_SESSION['guest_message'] = isset($_POST['message']) && $error != "" ? htmlentities($_POST['message'], ENT_QUOTES, 'UTF-8') : "";
|
||||||
|
|
||||||
|
// ----------------------------------------------------------------------------------------
|
||||||
|
// [1]. Prevent guest to type too many line break symbols.
|
||||||
|
// People usually do these thing to make their SPAM messages looks striking.
|
||||||
|
// [2]. Convert all HTML tags into HTML entities. This is done thoroughly for safety.
|
||||||
|
// We can revert back the escaped HTML into normal HTML tags later via `filter_html()`
|
||||||
|
// [3]. Save the form data into session. So if something goes wrong, the data entered
|
||||||
|
// by guest will still be stored in the form after submitting.
|
||||||
|
// ----------------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Show the existing data.
|
||||||
|
*/
|
||||||
|
$data = file_get_contents($database . '.txt');
|
||||||
|
$current_page = isset($_GET['page']) ? $_GET['page'] : 1;
|
||||||
|
$nav = "";
|
||||||
|
|
||||||
|
if( ! empty($data)) {
|
||||||
|
|
||||||
|
$data = explode("\n\n==\n", $data);
|
||||||
|
$total_pages = ceil(count($data) / $per_page);
|
||||||
|
|
||||||
|
// Create navigation if the number of pages is more than 1.
|
||||||
|
if($total_pages > 1) {
|
||||||
|
for($i = 0; $i < $total_pages; $i++) {
|
||||||
|
if($current_page == ($i + 1)) {
|
||||||
|
$nav .= " <span>" . ($i + 1) . "</span>"; // Disabled navigation
|
||||||
|
} else {
|
||||||
|
$nav .= " <a href=\"?page=" . ($i + 1) . (isset($_GET['data']) ? '&data=' . $database : '') . "\">" . ($i + 1) . "</a>";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
for($i = 0; $i < count($data); $i++) {
|
||||||
|
$item = explode("\n", $data[$i]);
|
||||||
|
// Permalink (single item)
|
||||||
|
// http://localhost/guestbook/index.php&data=database-001&guest=0123456789
|
||||||
|
if(isset($_GET['guest']) && preg_match('/[0-9]+/', $_GET['guest'])) {
|
||||||
|
if($item[3] == $_GET['guest']) {
|
||||||
|
echo " <div class=\"guest-item\" id=\"guest-" . $item[3] . "\">\n";
|
||||||
|
echo " <strong class=\"guest-name\">";
|
||||||
|
echo $item[1] == "-" ? "" : "<a href=\"" . $item[1] . "\" rel=\"nofollow\" target=\"_blank\">";
|
||||||
|
echo $item[0];
|
||||||
|
echo $item[1] == "-" ? "" : "</a>";
|
||||||
|
echo "</strong>\n";
|
||||||
|
echo " <span class=\"guest-timestamp\">";
|
||||||
|
echo "<time datetime=\"" . date('c', $item[3]) . "\">" . date('Y/m/d H:i', $item[3]) . "</time>";
|
||||||
|
echo " <a href=\"?data=" . $database . "&guest=" . $item[3] . "\" title=\"Permanent Link\">#</a>";
|
||||||
|
echo "</span>\n";
|
||||||
|
echo " <span class=\"guest-message\">" . filter_html($item[2]) . "</span>\n";
|
||||||
|
echo " </div>\n";
|
||||||
|
}
|
||||||
|
// Normal list
|
||||||
|
} else {
|
||||||
|
if($i <= ($per_page * $current_page) - 1 && $i > ($per_page * ($current_page - 1)) - 1) {
|
||||||
|
echo " <div class=\"guest-item\" id=\"guest-" . $item[3] . "\">\n";
|
||||||
|
echo " <strong class=\"guest-name\">";
|
||||||
|
echo $item[1] == "-" ? "" : "<a href=\"" . $item[1] . "\" rel=\"nofollow\" target=\"_blank\">";
|
||||||
|
echo $item[0];
|
||||||
|
echo $item[1] == "-" ? "" : "</a>";
|
||||||
|
echo "</strong>\n";
|
||||||
|
echo " <span class=\"guest-timestamp\">";
|
||||||
|
echo "<time datetime=\"" . date('c', $item[3]) . "\">" . date('Y/m/d H:i', $item[3]) . "</time>";
|
||||||
|
echo " <a href=\"?data=" . $database . "&guest=" . $item[3] . "\" title=\"Permanent Link\">#</a>";
|
||||||
|
echo "</span>\n";
|
||||||
|
echo " <span class=\"guest-message\">" . filter_html($item[2]) . "</span>\n";
|
||||||
|
echo " </div>\n";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
} else {
|
||||||
|
echo " <div class=\"guest-item\">\n";
|
||||||
|
echo " <strong class=\"guest-name\">Guestbook</strong>\n";
|
||||||
|
echo " <span class=\"guest-message\">" . $messages['no_content'] . "</span>\n";
|
||||||
|
echo " </div>\n";
|
||||||
|
}
|
||||||
|
|
||||||
|
?>
|
||||||
|
</div>
|
||||||
|
<div class="guestbook-nav"><?php echo trim($nav); ?></div>
|
||||||
|
<?php if( ! isset($_GET['data']) && ! isset($_GET['guest'])): ?>
|
||||||
|
<form method="post">
|
||||||
|
<label>Name</label>
|
||||||
|
<div><input type="text" name="name" value="<?php echo isset($_SESSION['guest_name']) ? $_SESSION['guest_name'] : ''; ?>"></div>
|
||||||
|
|
||||||
|
<div><input style="display: none" type="text" name="url" value="<?php echo isset($_SESSION['guest_url']) ? $_SESSION['guest_url'] : 'http://'; ?>"></div>
|
||||||
|
<label>Message</label>
|
||||||
|
<div><textarea name="message"><?php echo isset($_SESSION['guest_message']) ? $_SESSION['guest_message'] : ''; ?></textarea></div>
|
||||||
|
<hr>
|
||||||
|
<div style="display: none"><?php echo $math; ?> = <input style="display: none" type="text" name="math" autocomplete="off"> </div><div><button type="submit">Send Something</button></div>
|
||||||
|
<span class="clear"></span>
|
||||||
|
</form>
|
||||||
|
<?php endif; ?>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 867 KiB |
@ -0,0 +1,166 @@
|
|||||||
|
* {
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
-webkit-box-sizing:border-box;
|
||||||
|
-moz-box-sizing:border-box;
|
||||||
|
box-sizing:border-box;
|
||||||
|
}
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
height:100%;
|
||||||
|
min-height:100%;
|
||||||
|
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
background: rgb(59,129,38);
|
||||||
|
background: radial-gradient(circle, rgba(59,129,38,1) 0%, rgba(218,0,255,1) 100%);
|
||||||
|
font:normal normal 11px/1.4 Tahoma,Verdana,Arial,Sans-Serif;
|
||||||
|
color:#4133B0;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color:#666;
|
||||||
|
text-decoration:none;
|
||||||
|
}
|
||||||
|
a:focus,
|
||||||
|
a:hover {text-decoration:underline}
|
||||||
|
button,
|
||||||
|
input,
|
||||||
|
textarea {
|
||||||
|
display:inline-block;
|
||||||
|
*display:inline;
|
||||||
|
width:50%;
|
||||||
|
text-align:left;
|
||||||
|
margin:0 0 2px;
|
||||||
|
padding:4px;
|
||||||
|
font:inherit;
|
||||||
|
line-height:1;
|
||||||
|
color:#00ffe9;
|
||||||
|
background-color:#FFE6D1;
|
||||||
|
border:1px solid #999;
|
||||||
|
}
|
||||||
|
input {display:block}
|
||||||
|
textarea {
|
||||||
|
display:block;
|
||||||
|
resize:vertical;
|
||||||
|
line-height:inherit;
|
||||||
|
height:80px;
|
||||||
|
}
|
||||||
|
button::-moz-focus-inner,
|
||||||
|
input::-moz-focus-inner {
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
border:none;
|
||||||
|
outline:none;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
width:auto;
|
||||||
|
padding:5px 8px;
|
||||||
|
background-color:#ECDE8C;
|
||||||
|
border-color:#BCAF6F;
|
||||||
|
color:#5D5A31;
|
||||||
|
font-weight:bold;
|
||||||
|
cursor:pointer;
|
||||||
|
float:right;
|
||||||
|
}
|
||||||
|
input:focus,
|
||||||
|
textarea:focus {color:#333}
|
||||||
|
button:focus,
|
||||||
|
button:hover {
|
||||||
|
background-color:#E0D183;
|
||||||
|
border-color:#9D935D;
|
||||||
|
}
|
||||||
|
input[name="math"] {
|
||||||
|
display:inline-block;
|
||||||
|
display:*inline;
|
||||||
|
width:30px;
|
||||||
|
}
|
||||||
|
#messagegif{
|
||||||
|
float:right;
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
#gifgif{
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
.guestbook {
|
||||||
|
width:40%;
|
||||||
|
padding:10px;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
.guestbook form label {
|
||||||
|
display:block;
|
||||||
|
float:left;
|
||||||
|
width:50px;
|
||||||
|
text-align:right;
|
||||||
|
padding-top:3px;
|
||||||
|
}
|
||||||
|
.guestbook form div {margin-left:58px}
|
||||||
|
.guestbook hr {
|
||||||
|
height:0;
|
||||||
|
border:none;
|
||||||
|
border-top:1px solid #999;
|
||||||
|
margin:10px 0 10px;
|
||||||
|
}
|
||||||
|
#carddiv{
|
||||||
|
width:30%;
|
||||||
|
float:left;
|
||||||
|
padding-left:10%;
|
||||||
|
}
|
||||||
|
#fishcard{
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.guest-messages {
|
||||||
|
border:1px solid #aaa;
|
||||||
|
/*
|
||||||
|
height:300px;
|
||||||
|
overflow:auto;
|
||||||
|
*/
|
||||||
|
}
|
||||||
|
.guest-item {
|
||||||
|
border-top:1px solid #aaa;
|
||||||
|
padding:4px;
|
||||||
|
position:relative;
|
||||||
|
background-color:#FCF5FF;
|
||||||
|
}
|
||||||
|
.guest-item:first-child {border-top:none}
|
||||||
|
.guest-name {
|
||||||
|
font-weight:bold;
|
||||||
|
margin-left:2px;
|
||||||
|
color:#239183;
|
||||||
|
}
|
||||||
|
.guest-timestamp {
|
||||||
|
float:right;
|
||||||
|
margin-right:2px;
|
||||||
|
}
|
||||||
|
.guest-message {
|
||||||
|
display:block;
|
||||||
|
clear:both;
|
||||||
|
margin-top:4px;
|
||||||
|
padding:4px 6px;
|
||||||
|
background-color: #EAF7D7;
|
||||||
|
}
|
||||||
|
.guestbook-nav {
|
||||||
|
margin:5px 0;
|
||||||
|
text-align:center;
|
||||||
|
}
|
||||||
|
label{
|
||||||
|
color:#00ffe9;
|
||||||
|
}
|
||||||
|
.message-error,
|
||||||
|
.message-warning {
|
||||||
|
padding:5px 10px;
|
||||||
|
background-color:#FFDBD8;
|
||||||
|
border-top:1px solid #aaa;
|
||||||
|
}
|
||||||
|
.message-warning {background-color:#DBFFD8}
|
||||||
|
.message-error:first-child,
|
||||||
|
.message-warning:first-child {border-top:none}
|
||||||
|
.clear {
|
||||||
|
display:block;
|
||||||
|
clear:both;
|
||||||
|
}
|
||||||
|
#rightyspace{
|
||||||
|
width:20%;
|
||||||
|
float:right;
|
||||||
|
height:100%;
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
@ -0,0 +1,37 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=0.6">
|
||||||
|
<title>PPRGM</title>
|
||||||
|
<link href="style.css" rel="stylesheet">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<body class="depth<?=$depth?>">
|
||||||
|
|
||||||
|
<h2>You've redeemed your codeword</h2>
|
||||||
|
<h2>CLICK TO PLAY PPRGM</h2>
|
||||||
|
|
||||||
|
<div><a href='pprgm.html'><img src="pprgm.gif" id="gif"></a></div>
|
||||||
|
|
||||||
|
<div class="img1"><img src="apestaartje.png"></div>
|
||||||
|
<div class="img2"><img src="apestaartje.png"></div>
|
||||||
|
<div class="img3"><img src="apestaartje.png"></div>
|
||||||
|
<div class="img4"><img src="apestaartje.png"></div>
|
||||||
|
<div class="img5"><img src="apestaartje.png"></div>
|
||||||
|
<div class="img6"><img src="apestaartje.png"></div>
|
||||||
|
<div class="img7"><img src="apestaartje.png"></div>
|
||||||
|
<div class="img8"><img src="apestaartje.png"></div>
|
||||||
|
<div class="img9"><img src="apestaartje.png"></div>
|
||||||
|
<div class="img10"><img src="apestaartje.png"></div>
|
||||||
|
<div class="img11"><img src="apestaartje.png"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
@ -0,0 +1,34 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>PPRGM</title>
|
||||||
|
<style type="text/css">
|
||||||
|
#content {
|
||||||
|
position: absolute;
|
||||||
|
left: 0; right: 0; top: 0; bottom: 0;
|
||||||
|
}
|
||||||
|
#canvas {
|
||||||
|
width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
/*height: 100%;*/
|
||||||
|
margin: 0 auto;
|
||||||
|
display: block;
|
||||||
|
image-rendering: pixelated;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="content">
|
||||||
|
<canvas id="canvas" oncontextmenu="event.preventDefault()" onmousedown="window.focus()"></canvas>
|
||||||
|
</div>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var Module =
|
||||||
|
{
|
||||||
|
canvas: document.getElementById('canvas'),
|
||||||
|
arguments:['pprgm.tic']
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<script src="tic80.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Binary file not shown.
@ -0,0 +1,177 @@
|
|||||||
|
body{
|
||||||
|
background-color:#013BFF;
|
||||||
|
}
|
||||||
|
#gif{
|
||||||
|
width:80%;
|
||||||
|
margin:10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
a[href]{
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2{
|
||||||
|
color:#E601FF;
|
||||||
|
text-align:center;
|
||||||
|
font-family: "Lucida Console", "Courier New", monospace;
|
||||||
|
}
|
||||||
|
@keyframes img1 {
|
||||||
|
0% { left:100px; top:0px;}
|
||||||
|
100% { left:100px; top:1300px;}
|
||||||
|
}
|
||||||
|
|
||||||
|
.img1{
|
||||||
|
position: absolute;
|
||||||
|
z-index: -1;
|
||||||
|
font-size:40px;
|
||||||
|
animation-name: img1;
|
||||||
|
animation-duration: 18s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@keyframes img2 {
|
||||||
|
0% { left:110px; top:0px;}
|
||||||
|
100% { left:110px; top:1300px;}
|
||||||
|
}
|
||||||
|
|
||||||
|
.img2{
|
||||||
|
position: absolute;
|
||||||
|
z-index: -1;
|
||||||
|
font-size:40px;
|
||||||
|
animation-name: img2;
|
||||||
|
animation-duration: 21s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@keyframes img3 {
|
||||||
|
0% { left:430px; top:0px;}
|
||||||
|
100% { left:430px; top:1200px;}
|
||||||
|
}
|
||||||
|
|
||||||
|
.img3{
|
||||||
|
position: absolute;
|
||||||
|
z-index: -1;
|
||||||
|
font-size:40px;
|
||||||
|
animation-name: img3;
|
||||||
|
animation-duration: 10s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes img4 {
|
||||||
|
0% { left:750px; top:0px;}
|
||||||
|
100% { left:750px; top:1120px;}
|
||||||
|
}
|
||||||
|
|
||||||
|
.img4{
|
||||||
|
position: absolute;
|
||||||
|
z-index: -1;
|
||||||
|
font-size:40px;
|
||||||
|
animation-name: img4;
|
||||||
|
animation-duration: 35s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes img5 {
|
||||||
|
0% { left:330px; top:0px;}
|
||||||
|
100% { left:330px; top:690px;}
|
||||||
|
}
|
||||||
|
|
||||||
|
.img5{
|
||||||
|
position: absolute;
|
||||||
|
z-index: -1;
|
||||||
|
font-size:40px;
|
||||||
|
animation-name: img5;
|
||||||
|
animation-duration: 30s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
}
|
||||||
|
@keyframes img6 {
|
||||||
|
0% { left:1000px; top:0px;}
|
||||||
|
100% { left:1000px; top:1222px;}
|
||||||
|
}
|
||||||
|
|
||||||
|
.img6{
|
||||||
|
position: absolute;
|
||||||
|
z-index: -1;
|
||||||
|
font-size:40px;
|
||||||
|
animation-name: img6;
|
||||||
|
animation-duration: 50s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
}
|
||||||
|
@keyframes img7 { /*/freakyfigure/*/
|
||||||
|
0% { left:960px; top:0px;}
|
||||||
|
100% { left:960px; top:1140px;}
|
||||||
|
}
|
||||||
|
|
||||||
|
.img7{
|
||||||
|
position: absolute;
|
||||||
|
z-index: -1;
|
||||||
|
font-size:40px;
|
||||||
|
animation-name: img7;
|
||||||
|
animation-duration: 24s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
}
|
||||||
|
@keyframes img8 { /*/freakyfigure/*/
|
||||||
|
0% { left:800px; top:0px;}
|
||||||
|
100% { left:800px; top:500px;}
|
||||||
|
}
|
||||||
|
|
||||||
|
.img8{
|
||||||
|
position: absolute;
|
||||||
|
z-index: -1;
|
||||||
|
font-size:40px;
|
||||||
|
animation-name: img8;
|
||||||
|
animation-duration: 41s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
}
|
||||||
|
@keyframes img9 { /*/freakyfigure/*/
|
||||||
|
0% { left:50px; top:0px;}
|
||||||
|
100% { left:50px; top:900px;}
|
||||||
|
}
|
||||||
|
|
||||||
|
.img9{
|
||||||
|
position: absolute;
|
||||||
|
z-index: -1;
|
||||||
|
font-size:40px;
|
||||||
|
animation-name: img9;
|
||||||
|
animation-duration: 44s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
}
|
||||||
|
@keyframes img10 { /*/freakyfigure/*/
|
||||||
|
0% { left:400px; top:0px;}
|
||||||
|
100% { left:400px; top:1000px;}
|
||||||
|
}
|
||||||
|
|
||||||
|
.img10{
|
||||||
|
position: absolute;
|
||||||
|
z-index: -1;
|
||||||
|
font-size:40px;
|
||||||
|
animation-name: img10;
|
||||||
|
animation-duration: 23s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
}
|
||||||
|
@keyframes img11 { /*/freakyfigure/*/
|
||||||
|
0% { left:300px; top:0px;}
|
||||||
|
100% { left:300px; top:500px;}
|
||||||
|
}
|
||||||
|
|
||||||
|
.img11{
|
||||||
|
position: absolute;
|
||||||
|
z-index: -1;
|
||||||
|
font-size:40px;
|
||||||
|
animation-name: img11;
|
||||||
|
animation-duration: 40s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
Loading…
Reference in New Issue