From 10889181959cada7e397ac377cb6d43dd977cf62 Mon Sep 17 00:00:00 2001
From: Syndamia <kamen@syndamia.com>
Date: Thu, 24 Aug 2023 20:28:47 +0300
Subject: [WGL/P] Added basic UI when you aren't moving around

---
 .../Project/Project.html                           | 50 +++++++++++++++++++++-
 1 file changed, 49 insertions(+), 1 deletion(-)

(limited to 'Year 2/Computer Graphics with WebGL/Project/Project.html')

diff --git a/Year 2/Computer Graphics with WebGL/Project/Project.html b/Year 2/Computer Graphics with WebGL/Project/Project.html
index bd70dcc..9852ab8 100644
--- a/Year 2/Computer Graphics with WebGL/Project/Project.html	
+++ b/Year 2/Computer Graphics with WebGL/Project/Project.html	
@@ -11,6 +11,7 @@
 body {
 	padding: 0;
 	margin: 0;
+	font: 21px sans-serif;
 }
 canvas {
 	display: block;
@@ -21,6 +22,41 @@ canvas {
 	height: 100vh;
 	/* cursor: none; */
 }
+
+.hide {
+	display: none;
+}
+
+h2 {
+	border-bottom: 2px solid gray;
+}
+#menu {
+	position: absolute;
+	height: 100vh;
+	width: 100vw;
+	left: 0;
+	top: 0;
+	color: white;
+}
+#menu > * {
+	position: absolute;
+	margin: 0.5em;
+	padding: 0.2em;
+	border: 2px solid white;
+	width: auto;
+}
+#paused { 
+	left: 0;
+	top: 0;
+	font-size: 25px;
+	cursor: pointer;
+}
+#settings {
+	right: 0;
+	top: 0;
+	padding: 0.5em;
+	max-width: 15em;
+}
 	</style>
 
 	<script src="spaceship.js"></script>
@@ -66,7 +102,7 @@ canvas {
 						new Sphere([700,0,1000], 40),
 						new Sphere([0,0,0], 100),
 						new Sphere([1000, 0, -30], 20)];
-			planets.forEach((p) => p.color = [1,0,0]);
+			planets.forEach((p) => p.color = [0.956,0.5,0.215]);
 
 			resizeglcanvas();
 		}
@@ -98,4 +134,16 @@ canvas {
 
 <body onload="start()">
 	<canvas id="picasso"></canvas>
+	<div id="menu">
+		<div id="paused">Click here to explore</div>
+		<div id="settings">
+			<h2>About</h2>
+			<p>
+				Simulation of the light-bending effects of black holes.<br>
+				WASD to move around, space and shift for up and down, mouse cursor to look around.
+			</p>
+			<h2>Settings</h2>
+			Move speed:
+		</div>
+	</div>
 </body>
-- 
cgit v1.3.1-23-gd82d