Be interesting to setup a website for this and actually have a computer setup somewhere so people can try to look =/. I thought a closet would be a good spot but not sure I want the world knowing my address. This next version is basically the same thing but has a few extra features to support remote viewing of a printed page like a layout that fits on 1 page, the time the html page was loaded and "blank cards" that show the layout before the random cards are shown.
To automatically print the page after 1 minute you need to be using chrome with the command line switch "--kiosk-printing" and have the code on this html page where it says "window.print()" un-commented. There are probably other ways of doing this but thats an easy way and it allows someone doing their own remote viewing to print out a page without having had a chance to also look at it until they choose to (they have a minute from the time the page is loaded before the cards display and print).
I thought printing was a nice touch just incase computer displays are hard to see.
<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)
Revision: July 5, 2020
card layout is 12x6 to match print preview (on my computer)
Revision: July 7, 2020
using a div to preserve layout when window is resized
Revision: July 12, 2020
displays the time the page was loaded and "blank cards" for 60 seconds
-->
<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>
<div style="padding:.5em;color:white;background-color:black;display:inline-block;width:59.3em">
<div id="timer">00</div>
<div id="cards"></div>
<!-- display "blank" cards -->
<script>
var fragment="";
for(var i=0;i<72;i++){
if(i%12==0){
fragment+="<br>";
}
//fragment+="<div class=\"card\"><span class=\"cardcontent\">?</span></div>";
fragment+="<div class=\"card\">"+(i+1)+"<br><span class=\"cardcontent\">?</span></div>";
}
cards.innerHTML=fragment;
</script>
</div>
<!-- timer -->
<script>
var start_date=new Date();
var start_time=start_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+" - "+start_date;
},1000);
</script>
<!-- cards -->
<style>
.card {
display:inline-block;
width:3em;
height:5em;
color:white;
border-color:white;
border-style:solid;
border-width:.2em;
border-radius:.5em;
margin:0em 0em .5em .5em;
padding:.5em;
background-color:gray;
}
.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<72;i++){
if(i%12==0){
fragment+="<br>";
}
addcard();
}
cards.innerHTML=fragment;
/* wait 5 seconds after display then print... test with print preview first!!!
setTimeout(function(){
window.print(); // Note: use chromes --kiosk-printing option to avoid the print dialog
},5000);
//*/
},60000);
</script>
</body>
</html>
Dilber MC Theme by HarzeM