made the checkboxes+radio buttons real size (like the dropdown menu's) + removed another light color + made the links to xpub.nl + pzwart.nl open in new window

master
mb 5 months ago
parent 160d4b6028
commit a85ef89a16

@ -40,7 +40,7 @@ form div#dropdowns div.row{
.drop{ .drop{
position:absolute; position:absolute;
top:-10px; top:-10px;
animation: falling 5.5s linear infinite; animation: falling 5.5s linear infinite;
pointer-events: all; pointer-events: all;
} }
@ -66,9 +66,9 @@ form div#dropdowns div.row{
} }
.sinus{ .sinus{
animation: sinus 5.5s ease-in-out infinite; animation: sinus 5.5s ease-in-out infinite;
width: 30px; /* width: 30px; */
height: 30px; /* height: 30px; */
} }
@keyframes sinus @keyframes sinus

@ -130,7 +130,7 @@
</div> <!-- #dropdowns --> </div> <!-- #dropdowns -->
<div id="info"> <div id="info">
<p> <p>
The <a href="https://xpub.nl/">Master Experimental Publishing</a> at the <a href="https://www.pzwart.nl/">Piet Zwart Instituut</a> in Rotterdam (NL)<br> The <a href="https://xpub.nl/" target="_blank">Master Experimental Publishing</a> at the <a href="https://www.pzwart.nl/" target="_blank">Piet Zwart Instituut</a> in Rotterdam (NL)<br>
is a two-year master focused on the acts of making things public and creating publics<br> is a two-year master focused on the acts of making things public and creating publics<br>
in the age of post-digital networks. in the age of post-digital networks.
</p> </p>
@ -194,14 +194,13 @@
return font; return font;
} }
function pickcolor(){ function pickcolor(){
var colors = ["AntiqueWhite","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"]; 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 // From: https://www.w3schools.com/colors/colors_names.asp
var random = Math.floor(Math.random() * colors.length) var random = Math.floor(Math.random() * colors.length)
var color = colors[random]; var color = colors[random];
return color; return color;
} }
pickcolor()
var message = " \n"+ var message = " \n"+
" _ _ _ _ \n"+ " _ _ _ _ \n"+
"| | | | | | |\n"+ "| | | | | | |\n"+
@ -212,7 +211,7 @@
"amazing that you opened the inspector to check the code. Please apply \n"+ "amazing that you opened the inspector to check the code. Please apply \n"+
"and mention that you have found the codeword 'opisop'! \n"; "and mention that you have found the codeword 'opisop'! \n";
console.log(message); console.log(message);
dropcounter = 1; dropcounter = 1;
dropamount = 100; dropamount = 100;
function makedrop(){ function makedrop(){
@ -223,7 +222,7 @@
drop.style.animationDuration = Math.random() * 4 + 4 + "s"; drop.style.animationDuration = Math.random() * 4 + 4 + "s";
drop.classList.add("drop"); drop.classList.add("drop");
var inside = document.createElement("INPUT"); var inside = document.createElement("INPUT");
inside.setAttribute("type", Math.floor(Math.random() > 0.5) ? "checkbox" : "radio"); inside.setAttribute("type", Math.floor(Math.random() > 0.5) ? "checkbox" : "radio");
inside.checked = Math.floor(Math.random() > 0.5) ? true : false; inside.checked = Math.floor(Math.random() > 0.5) ? true : false;
inside.classList.add("sinus"); inside.classList.add("sinus");
inside.style.animationDuration = Math.random() * 8 + 6 + "s"; inside.style.animationDuration = Math.random() * 8 + 6 + "s";
@ -235,6 +234,7 @@
dropcounter++; dropcounter++;
} }
makedrop(); makedrop();
var checking = new URLSearchParams(window.location.search); var checking = new URLSearchParams(window.location.search);
if(checking.get('easteregg') == "true"){ if(checking.get('easteregg') == "true"){
alert("🪄 You found the secret treasure word🌟. Its called 'Special tissue'🤧! Please mention it in your application 🪄"); alert("🪄 You found the secret treasure word🌟. Its called 'Special tissue'🤧! Please mention it in your application 🪄");

Loading…
Cancel
Save