Perceptive Palette

<!DOCTYPE html>
<html lang="en">
  <head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Magic Crypto Ball</title>
    <script>
		var answers=["It is certain","That makes no sense!","Are you kidding me?","Highly likely","Outlook promising","Yes","Price is uncertain, try again","What kind of answer do you expect?","It's too volatile to tell now","What are you even asking?","Study the charts and ask again","No, but I'll give you a joke!","My reply is no","I'm not sure what to say!","Outlook not so good","Very doubtful","Go ask someone else!","Go ahead, make my day!","The market sees potential","It's a great opportunity!","I'm all ears for a good joke!","Outlook not so promising","Outlook is grim"];
		var complains=["Please don't interrupt me", "I'm still talking here","Let me finish, please","Please wait your turn to speak","Respectfully, don't talk over me","Do not interrupt me, it's rude"];
		var changeMind=["I'm reconsidering my choice","I'm backtracking","I'm having second thoughts","I'm having doubts now","I'm revising my earlier decision"];
		var answerFinishedAt=new Date().getTime();
		var interrupted=0;
		var changedMind=0;
		function magicBall() {
			if (interrupted==1||changedMind==1) return;
			if (!isAnswerFinished())
			{
				getInterruptReply();
				return;
			}
			var randomAnswer = answers[Math.floor(Math.random() * answers.length)];
			document.getElementById("answer").innerHTML = "";
			for (let i=0;i<randomAnswer.length;i++){
			  setTimeout(()=>{
				if (interrupted==0) document.getElementById("answer").innerHTML+=randomAnswer[i];
			  },i*100);
			}
			answerFinishedAt=new Date().getTime()+randomAnswer.length*100;
			setTimeout(()=>{
				if (Math.floor(Math.random()*4)==0)
					getChangeMind();
			},randomAnswer.length*100+1000);			
		}
		function getInterruptReply(){
			var randomComplain=complains[Math.floor(Math.random()*complains.length)];
			interrupted=1;
			document.getElementById("answer").innerHTML="";
			for (let i=0;i<randomComplain.length;i++){
			  setTimeout(()=>{
				document.getElementById("answer").innerHTML+=randomComplain[i];
			  },i*60);
			}
			setTimeout(()=>{
				interrupted=0;
				changedMind=0;
				magicBall();
			},4000);			
		}
		function getChangeMind(){
			if (interrupted==1||changedMind==1) return;
			var randomChangeMind=changeMind[Math.floor(Math.random()*changeMind.length)];
			changedMind=1;
			document.getElementById("answer").innerHTML="";
			for (let i=0;i<randomChangeMind.length;i++){
			  setTimeout(()=>{
				document.getElementById("answer").innerHTML+=randomChangeMind[i];
			  },i*80);
			}
			setTimeout(()=>{
				changedMind=0;
				magicBall();
			},randomChangeMind.length*80+1000);
		}
		function isAnswerFinished(){
			return new Date().getTime()>=answerFinishedAt;
		}
    </script>
	<style>
		body {overflow:hidden;margin:0;}
		.textArea {position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;}
		.text {font-size:calc(6vw);font-weight:bold;margin:0 30%;text-align:center;-webkit-user-select:none;user-select:none;color:#800080;text-shadow: 0px 0px 5px #800080;}
		.fade {animation: 17s anim-fade ease-out infinite;}
		@keyframes anim-fade {
		  0% {opacity:1;transform:scale(1);}
		  50% {opacity:0.3;transform:scale(0.95);}
		  100% {opacity:1;transform:scale(1);}
		}
	</style>
  </head>
  <body>
    <div onclick="magicBall()">
		<svg width="100vw" height="100vh" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
			<g>
				<circle r="49%" cy="50%" cx="50%" fill="#800080" filter="url(#shadow)"/>
				<circle r="47.5%" cy="50%" cx="50%" fill="#900090"/>
				<circle r="47.5%" cy="51.5%" cx="51.5%" fill="#800080"/>
				<circle r="47.5%" cy="50%" cx="50%" fill="url(#shiny-gradient)"/>
				<circle r="28.5%" cy="50%" cx="50%" stroke-width="3px" stroke="#EEEEEE" fill="none" filter="url(#shadow)"/>
				<circle r="27%" cy="50%" cx="50%" stroke-width="2px" stroke="#900090" fill="url(#gloss)" filter="url(#shadow)"/>
			</g>
			<radialGradient id="shiny-gradient">
				<stop offset="20%" stop-color="#FFFFFF" stop-opacity="1"/>
				<stop offset="65%" stop-color="#FFFFFF" stop-opacity="0.4"/>
				<stop offset="90%" stop-color="#FFFFFF" stop-opacity="0.2"/>
				<stop offset="99%" stop-color="#FFFFFF" stop-opacity="0.05"/>
				<stop offset="100%" stop-color="#FFFFFF" stop-opacity="0"/>
			</radialGradient>
			<linearGradient id="gloss" x1="0%" y1="0%" x2="0%" y2="100%">
				<stop offset="0%" stop-color="#ffffff"/>
				<stop offset="100%" stop-color="#aaaaaa"/>
			</linearGradient> 
			<filter id="shadow">
			<feDropShadow dx="0" dy="0" stdDeviation="3" flood-color="#800080"/>
			</filter>			
		</svg>
		<div class="textArea">
			<p id="answer" class="text fade">Ask me a question and click</p>
		</div>
	</div>
  </body>
</html>

Cranky Forest Eye

Creative Divination

Shadow Oracle

Action	Price	Marketplace	From	To	Time
SALE	0.001 29.07	unisat	f9qh	rv2g	12 months
TRANSFER	- -		gvhv	f9qh	about 1 year
INSCRIBED	- -		-	gvhv	over 1 year

Inscription #76790

More from this Collection