rain rain rain

2024/call/call.css

@@ -3,6 +3,7 @@ body{
   flex-direction: column;
   justify-content: center;
   height:100vh;
+  margin: 0;
 }
 
 form{
@@ -10,6 +11,7 @@ form{
   margin: 1em auto;
   padding: 1em;
   text-align: center;
+  z-index: 1;
 }
 form *{
   font-size: 20px;
@@ -17,6 +19,9 @@ form *{
 form h1{
   font-size: 100%;
 }
+fieldset{
+	background: #fff;
+}
 form select {
 	padding: 0.5em 0 0.5em 0.5em;
     margin: 0 0 0.75em 0;
@@ -31,3 +36,40 @@ form div#dropdown-options.hide{
 form div#dropdowns div.row{
     margin: 0em 0;
 }
+
+.drop{
+	width: 200%;
+	position:absolute;
+	top:-10px;
+	animation: falling 5.5s linear infinite; 
+}
+
+@keyframes falling
+{
+  from{
+    top:-200px;
+  }
+  to{
+    top:100%;
+    display:block;
+  }
+}
+
+.sinus{
+	animation: sinus 5.5s ease-in-out infinite; 
+	width: 30px;
+	height: 30px;
+}
+
+@keyframes sinus
+{
+  0%{
+    transform: translateX(-100px);
+  }
+  50%{
+    transform: translateX(100px);
+  }
+  100%{
+	transform: translateX(-100px);
+  }
+}

2024/call/call.html

@@ -70,12 +70,15 @@
 						<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>
@@ -153,13 +156,10 @@
 		"Where can",
 		"Why do",
 	];
-	console.log(options);
 	questions.forEach(function(question, i){
 		var question_div = document.getElementById("question-div");
 		question_div.innerHTML = question;
-		console.log(question_div);
 		var dropdown_options = document.getElementById("dropdown-options");
-		console.log(dropdown_options);
 		var dropdowns_div = document.getElementById("dropdowns");
 		dropdowns_div.innerHTML += dropdown_options.innerHTML;
 	});
@@ -207,9 +207,36 @@
 "| '_ \\ / _ \\ | |/ _ \\| |\n"+
 "| | | |  __/ | | (_) |_|\n"+
 "|_| |_|\\___|_|_|\\___/(_)\n"+
-"amazing that you opened the inspector to check the code. We hope you will 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";
 	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 + 4 + "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 + 6 + "s";
+				drop.appendChild(inside);
+				document.body.appendChild(drop);
+				makedrop();
+			}, 50);
+		}
+		dropcounter++;
+	}
+	makedrop();
+	var checking = new URLSearchParams(window.location.search);
+	if(checking.get('easteregg') == "true"){
+		alert("🪄 You found the secret treasure word🌟. Its called 'Special tissue'🤧! Please mention it in your application 🪄");
+	}
 	</script>
 </body>
 </html>