after 60 seconds your screen fills with cards that show an index number and a random character.
Code Select
<html>
<!--
Name: cards.html
Author: Smertrios
Purpose: something random to look at (appears after 60 seconds)
Date: July 3, 2020
Revision: July 4, 2020
background color is black
text color is white
every cards border is the same color but chosen randomly (red, green, blue)
each cards background is a random color (red, green blue)
each cards character is a random character (character codes 32-126)
-->
<script>
var character=[" ","!","\"","#","$","%","&","'","(",")","*","+",",","-",".","/","0","1","2","3","4","5","6","7","8","9",":",";","<","=",">","?","@","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","[","\\","]","^","_","`","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","{","|","}","~"];
var color=["red","green","blue"];
</script>
<body style="color:white;background-color:black">
<div id="timer">00</div>
<div id="cards"></div>
<!-- timer -->
<script>
var date=new Date();
var start_time=date.getTime();
setInterval(function(){
var date=new Date();
var temp=Math.floor((date.getTime()-start_time)/1000);
var elapsed_time=temp;
var day=Math.floor(temp/86400);temp=temp%86400;
var hour=Math.floor(temp/3600);temp=temp%3600;
var min=Math.floor(temp/60);temp=temp%60
var sec=temp;
var time=""
if(elapsed_time>=86400)time+=day+":";
if(elapsed_time>=3600)if(hour<10)time+="0"+hour+":";else time+=hour+":";
if(elapsed_time>=60)if(min<10)time+="0"+min+":";else time+=min+":";
if(elapsed_time>=0)if(sec<10)time+="0"+sec;else time+=sec;
timer.innerHTML=time;
},1000);
</script>
<!-- cards -->
<style>
.card {
display:inline-block;
width:3em;
height:5em;
color:white;
border-color:gray;
border-style:solid;
border-width:.2em;
border-radius:.5em;
background-color:yellow;
margin:.5em 0em 0em .5em;
padding:.5em;
}
.cardcontent {
font-size:3em;
font-family:"lucida console";
}
</style>
<script>
setTimeout(function(){
var fragment="";
var counter=0
var card_border_color=color[Math.floor(Math.random()*color.length)];
var addcard=function(){
counter++;
var card_color=color[Math.floor(Math.random()*color.length)];
var card_value=character[Math.floor(Math.random()*character.length)];
fragment+="<div class=\"card\" style=\"border-color:"+card_border_color+";background-color:"+card_color+"\">"+counter+"<br><span class=\"cardcontent\">"+card_value+"</span></div>";
}
for(var i=0;i<999;i++){
addcard();
}
cards.innerHTML=fragment;
},60000);
</script>
</body>
</html>