#!/usr/bin/perl

use strict;

my $rand = int(rand(500)) * 10;
my $onefive = $rand * 1.5;

print qq(Content-type: text/html\n\n);
print q|<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
	<title>Oakbox.com - One Five</title>
</head>
<body>
<p>&nbsp;</p>
<div class="container">
	<div class="row  align-items-center">
		<div class="col">
<h1>| . $rand . q|</h1>
  <form method="POST" id="myForm" action="">
        <input type="text" name="guess">
        <button type="submit">check</button>
  </form>
		</div>

		<div class="col" id="result">
	<p>fill in 1 and a half times the number</p>
		</div>

	</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

<script>
let form = document.forms["myForm"];
form.addEventListener("submit", getValues);

function getValues(event){
	event.preventDefault();

	let goodbad = "<a href='/onefive.cgi'><h1 class='green'>&#x2714;</h1></a>";
	if(this.guess.value != | . $onefive . q|){ goodbad = "<a href='/onefive.cgi'<h1 class='red'>&#10005;</h1></a>"; }
	var myDiv = document.getElementById("result");
	myDiv.innerHTML = goodbad;


}

</script>

</body>
</html>|;

exit;
