IG files
joak
4 months ago
parent
a44d6a0537
commit
56d208bbb5
@ -0,0 +1,26 @@
|
||||
form{
|
||||
max-width: 800px;
|
||||
min-width: 400px;
|
||||
}
|
||||
|
||||
fieldset{
|
||||
border: 1.5px solid black;
|
||||
}
|
||||
|
||||
select{
|
||||
text-align: center;
|
||||
border: 1.3px solid black;
|
||||
border-radius: 3px 3px;
|
||||
}
|
||||
|
||||
.questionmark{
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
|
||||
body{
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
height:100vh;
|
||||
}
|
||||
@ -0,0 +1,259 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"></meta>
|
||||
<title>Apply?</title>
|
||||
<link href="call.css" rel="stylesheet" type="text/css" />
|
||||
<link href="call-ig.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="rain1"></div>
|
||||
<form action="https://www.pzwart.nl/experimental-publishing/apply/" method="get">
|
||||
<fieldset>
|
||||
<legend>XPUB</legend>
|
||||
<br>
|
||||
<div id="dropdowns">
|
||||
<div id="dropdown-options" class="">
|
||||
<div class="row">
|
||||
<span id="question-div"></span>
|
||||
<select>
|
||||
<option>How can</option>
|
||||
<option>When do</option>
|
||||
<option>Where can</option>
|
||||
<option>Why do</option>
|
||||
</select><br>
|
||||
<select>
|
||||
<!-- who -->
|
||||
<option>(cross) makers</option>
|
||||
<option>collectives</option>
|
||||
<option>administrators</option>
|
||||
<option>notebooks</option>
|
||||
<option>bodies</option>
|
||||
<option>social justice warriors</option>
|
||||
<option>teletype machines</option>
|
||||
<option>gardeners</option>
|
||||
<option>oracles</option>
|
||||
<option>archives</option>
|
||||
<option>servers</option>
|
||||
<option>bots</option>
|
||||
<option>note takers</option>
|
||||
</select><br>
|
||||
<select class="verb">
|
||||
<!-- what -->
|
||||
<option>explore</option>
|
||||
<option>address</option>
|
||||
<option>hack</option>
|
||||
<option>whisper</option>
|
||||
<option>perform</option>
|
||||
<option>situate</option>
|
||||
<option>jam with</option>
|
||||
<option>research</option>
|
||||
<option>gender</option>
|
||||
<option>build</option>
|
||||
<option>explore</option>
|
||||
<option>repair</option>
|
||||
<option>read</option>
|
||||
<option>annotate</option>
|
||||
<option>write</option>
|
||||
<option>underline</option>
|
||||
<option>transmit</option>
|
||||
<option>receive</option>
|
||||
<option>improvise</option>
|
||||
<option>resonate</option>
|
||||
<option>create</option>
|
||||
<option>print</option>
|
||||
<option>solder</option>
|
||||
<option>make</option>
|
||||
<option>queer</option>
|
||||
</select><br>
|
||||
<select>
|
||||
<!-- how -->
|
||||
<option>interactive stories</option>
|
||||
<option>tools</option>
|
||||
<option>stories</option>
|
||||
<option>forms</option>
|
||||
<option>DIY electronics</option>
|
||||
<option>training programs</option>
|
||||
<option>letters</option>
|
||||
<option>spreadsheets</option>
|
||||
<option>printers</option>
|
||||
<option>conflicts</option>
|
||||
<option>conversations</option>
|
||||
<option>social shelves</option>
|
||||
<option>minor stories</option>
|
||||
<option>bureaucracies</option>
|
||||
<option>code documentation</option>
|
||||
<option>memes</option>
|
||||
<option>modular synths</option>
|
||||
<option>counter-action strategies</option>
|
||||
<option>first-aid kits</option>
|
||||
<option>magical answers</option>
|
||||
<option>books</option>
|
||||
<option>rain</option>
|
||||
<option>e-ink displays</option>
|
||||
<option>bicycles</option>
|
||||
<option>typewriters</option>
|
||||
<option>interviews</option>
|
||||
<option>protocols</option>
|
||||
<option>video games</option>
|
||||
<option>API's</option>
|
||||
<option>vernacular tools</option>
|
||||
<option>backdoors</option>
|
||||
<option>wikidata</option>
|
||||
<option>zines</option>
|
||||
<option>terminals</option>
|
||||
<option>radios</option>
|
||||
<option>pen plotters</option>
|
||||
</select><br>
|
||||
<select>
|
||||
<!-- in -->
|
||||
<option>in</option>
|
||||
<option>on</option>
|
||||
<option>about</option>
|
||||
<option>with</option>
|
||||
<option>at</option>
|
||||
</select><br>
|
||||
<select>
|
||||
<!-- where -->
|
||||
<option>publishing houses</option>
|
||||
<option>art collectives</option>
|
||||
<option>festivals</option>
|
||||
<option>algoraves</option>
|
||||
<option>archives</option>
|
||||
<option>bookshops</option>
|
||||
<option>squats</option>
|
||||
<option>print workshops</option>
|
||||
<option>public benches</option>
|
||||
<option>libraries</option>
|
||||
<option>media labs</option>
|
||||
<option>telecom musea</option>
|
||||
<option>community radio stations</option>
|
||||
<option>zine festivals</option>
|
||||
<option>workshops</option>
|
||||
<option>git repositories</option>
|
||||
<option>performances</option>
|
||||
<option>plotter parties</option>
|
||||
<option>breakfast clubs</option>
|
||||
</select><br>
|
||||
<span class="questionmark">?</span><br>
|
||||
</div> <!-- .row -->
|
||||
</div> <!-- #options -->
|
||||
</div> <!-- #dropdowns -->
|
||||
<br>
|
||||
</fieldset>
|
||||
</form>
|
||||
<div id="rain2" style="z-index: 1;"></div>
|
||||
<script>
|
||||
|
||||
|
||||
function speaking(input){
|
||||
console.log(input);
|
||||
var words = new SpeechSynthesisUtterance(input);
|
||||
const voices = speechSynthesis.getVoices();
|
||||
console.log(voices);
|
||||
words.voice = voices[Math.floor(Math.random()*2000)]; //100 + 5175 + 5063 + 5064 + 5065 + 5007
|
||||
while(!words.voice.voiceURI.includes("English")){
|
||||
words.voice = voices[Math.floor(Math.random()*2000)]; //100 + 5175 + 5063 + 5064 + 5065 + 5007
|
||||
console.log(words.voice.voiceURI);
|
||||
}
|
||||
t2s.speak(words);
|
||||
}
|
||||
|
||||
setInterval(dropping, 1200);
|
||||
function dropping(){
|
||||
var dropdowns = document.querySelectorAll("select");
|
||||
var random = Math.floor(Math.random() * dropdowns.length);
|
||||
var dropdown = dropdowns[random];
|
||||
console.log(dropdown);
|
||||
var random_option = Math.floor(Math.random() * dropdown.options.length);
|
||||
dropdown.selectedIndex = random_option;
|
||||
if(dropdown.selectedIndex == random_option){
|
||||
dropdown.selectedIndex = random_option;
|
||||
console.log("alarm");
|
||||
}
|
||||
speaking(dropdown.options[random_option].text);
|
||||
var color = easteregg ? pickcolor() : "black"; // ; // michael: 17 dec tho i liked the colors, i found myself not reading the lines... trying monochrome
|
||||
var backgroundcolor = pickcolor();
|
||||
var font = pickfont();
|
||||
dropdown.style.width = "auto";
|
||||
dropdown.style.color = color;
|
||||
dropdown.style.fontFamily = font;
|
||||
}
|
||||
function pickfont(){
|
||||
fonts = [
|
||||
"monospace",
|
||||
"sans-serif",
|
||||
"serif",
|
||||
"script",
|
||||
];
|
||||
var random = Math.floor(Math.random() * fonts.length)
|
||||
var font = fonts[random];
|
||||
return font;
|
||||
}
|
||||
function pickcolor(){
|
||||
var colors = ["Black","Blue","BlueViolet","Brown","CadetBlue","Chartreuse","Chocolate","Coral","CornflowerBlue","Crimson","DarkBlue","DarkCyan","DarkGoldenRod","DarkGray","DarkGrey","DarkGreen","DarkMagenta","DarkOliveGreen","DarkOrange","DarkOrchid","DarkRed","DarkSalmon","DarkSeaGreen","DarkSlateBlue","DarkSlateGray","DarkSlateGrey","DarkTurquoise","DarkViolet","DeepPink","DeepSkyBlue","DimGray","DimGrey","DodgerBlue","FireBrick","ForestGreen","Fuchsia","Gold","GoldenRod","Gray","Grey","Green","HotPink","IndianRed","Indigo","Lavender","Magenta","Maroon","MediumAquaMarine","MediumBlue","MediumOrchid","MediumPurple","MediumSeaGreen","MediumSlateBlue","MediumVioletRed","MidnightBlue","Navy","Olive","OliveDrab","Orange","OrangeRed","Orchid","PaleVioletRed","Peru","Plum","Purple","RebeccaPurple","Red","RosyBrown","RoyalBlue","SaddleBrown","Salmon","SandyBrown","SeaGreen","Silver","SlateBlue","SlateGray","SlateGrey","SteelBlue","Tan","Teal","Tomato","Turquoise","Violet","YellowGreen"];
|
||||
// From: https://www.w3schools.com/colors/colors_names.asp
|
||||
var random = Math.floor(Math.random() * colors.length)
|
||||
var color = colors[random];
|
||||
return color;
|
||||
}
|
||||
|
||||
var message = " \n"+
|
||||
" _ _ _ _ \n"+
|
||||
"| | | | | | |\n"+
|
||||
"| |__ ___| | | ___ | |\n"+
|
||||
"| '_ \\ / _ \\ | |/ _ \\| |\n"+
|
||||
"| | | | __/ | | (_) |_|\n"+
|
||||
"|_| |_|\\___|_|_|\\___/(_)\n"+
|
||||
"amazing that you opened the inspector to check the code. Please apply \n"+
|
||||
"and mention that you have found the codeword 'opisop'! \n";
|
||||
console.log(message);
|
||||
|
||||
dropcounter = 1;
|
||||
dropamount = 100;
|
||||
function makedrop(){
|
||||
if(dropcounter < dropamount){
|
||||
setTimeout(function(){
|
||||
var drop = document.createElement("div");
|
||||
drop.style.left = Math.random() * window.innerWidth+"px";
|
||||
drop.style.animationDuration = Math.random() * 4 + 8 + "s";
|
||||
drop.classList.add("drop");
|
||||
var inside = document.createElement("INPUT");
|
||||
inside.setAttribute("type", Math.floor(Math.random() > 0.5) ? "checkbox" : "radio");
|
||||
inside.checked = Math.floor(Math.random() > 0.5) ? true : false;
|
||||
inside.classList.add("sinus");
|
||||
inside.style.animationDuration = Math.random() * 8 + 8 + "s";
|
||||
drop.appendChild(inside);
|
||||
document.getElementById( Math.floor(Math.random() > 0.25) ? "rain1" : "rain2").appendChild(drop);
|
||||
makedrop();
|
||||
}, 50);
|
||||
}
|
||||
dropcounter++;
|
||||
}
|
||||
makedrop();
|
||||
|
||||
var checking = new URLSearchParams(window.location.search);
|
||||
var easteregg = (checking.get('easteregg') == "true");
|
||||
if (easteregg){
|
||||
alert("🪄 You found the secret treasure word🌟. Its called 'Special tissue'🤧! Please mention it in your application 🪄");
|
||||
}
|
||||
|
||||
t2s = window.speechSynthesis || speechSynthesis;
|
||||
|
||||
function speaking2(bla){
|
||||
var blabla = bla.originalTarget.options[bla.originalTarget.selectedIndex].value;
|
||||
var words = new SpeechSynthesisUtterance(blabla);
|
||||
const voices = speechSynthesis.getVoices();
|
||||
console.log(voices);
|
||||
words.voice = voices[Math.floor(Math.random()*2000)]; //100 + 5175 + 5063 + 5064 + 5065 + 5007
|
||||
t2s.speak(words);
|
||||
}
|
||||
|
||||
var selectors = document.getElementsByTagName("select");
|
||||
console.log(selectors);
|
||||
for(var i=0; i < selectors.length; i++){
|
||||
selectors[i].addEventListener("change", speaking2);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue