Update index.html

Author: SeanEricPeng

Other stuff/Tic tac toe/index.html

@@ -12,28 +12,28 @@
 		<h1><u>Options</u></h1>
 		<div class="cont" id="mode">
 			<h2 style="grid-row: 1; grid-column: 1 / 4">Mode</h2>
-			<div style="display: grid; grid-template-columns: auto min-content auto; grid-template-rows: 1fr; align-items: center;">
-				<svg width="50" height="75" style="float: left">
+			<div style="display: grid; grid-template-columns: auto min-content auto; grid-template-rows: 1fr; align-items: center; justify-items: center;">
+				<svg viewbox="0 0 50 75" style="float: left">
 					<rect width="50" height="20" x="0" y="55" style="fill:rgb(0,0,0);"/>
 					<circle cx="25" cy="55" r="25"/>
 					<circle cx="25" cy="15" r="15"/>
 				</svg>
 				<span>v</span>
-				<svg width="50" height="75" style="float: right">
+				<svg viewbox="0 0 50 75" style="float: right">
 					<rect width="40" height="5" x="5" y="70" style="fill:rgb(0,0,0);"/>
 					<rect width="5" height="50" x="22.5" y="20" style="fill:rgb(0,0,0);"/>
 					<rect width="50" height="40" x="0" y="15" style="fill:rgb(0,0,0);"/>
 				</svg>
 			</div>
 			<label class="switch"><input type="checkbox" onclick="bob.modeSwitch(this)"><span class="slider"></span></label>
-			<div style="display: grid; grid-template-columns: auto min-content auto; grid-template-rows: 1fr; align-items: center">
-				<svg width="50" height="75" style="float: left">
+			<div style="display: grid; grid-template-columns: auto min-content auto; grid-template-rows: 1fr; align-items: center; justify-items: center;">
+				<svg viewbox="0 0 50 75" style="float: left">
 					<rect width="50" height="25" x="0" y="55" style="fill:rgb(0,0,0);"/>
 					<circle cx="25" cy="55" r="25"/>
 					<circle cx="25" cy="15" r="15"/>
 				</svg>
 				<span>v</span>
-				<svg width="50" height="75" style="float: right">
+				<svg viewbox="0 0 50 75" style="float: right">
 					<rect width="50" height="20" x="0" y="55" style="fill:rgb(0,0,0);"/>
 					<circle cx="25" cy="55" r="25"/>
 					<circle cx="25" cy="15" r="15"/>
@@ -44,36 +44,36 @@ <h2 style="grid-row: 1; grid-column: 1 / 4">Mode</h2>
 		<div class="cont" id="starter">
 			<h2 style="grid-row: 1; grid-column: 1 / 4">Starting Player</h2>
 			<div id="startSvg1">
-				<svg width="50" height="75" style="display: block">
+				<svg viewbox="0 0 50 75" style="display: inline-block">
 					<rect width="50" height="20" x="0" y="55" style="fill:rgb(0,0,0);"/>
 					<circle cx="25" cy="55" r="25"/>
 					<circle cx="25" cy="15" r="15"/>
 				</svg>
-				<svg width="50" height="75" style="display: none">
+				<svg viewbox="0 0 50 75" style="display: none">
 					<line x1="0" y1="0" x2="50" y2="75" style="stroke:black; stroke-width:15"></line>
 					<line x1="50" y1="0" x2="0" y2="75" style="stroke:black; stroke-width:15"></line>
 				</svg>
 			</div>
 			<label class="switch"><input type="checkbox" onclick="bob.turnSwitch(this)"><span class="slider"></span></label>
 			<div id="startSvg2">
-				<svg width="50" height="75" style="display: block">
+				<svg viewbox="0 0 50 75" style="display: inline-block">
 					<rect width="40" height="5" x="5" y="70" style="fill:rgb(0,0,0);"/>
 					<rect width="5" height="50" x="22.5" y="20" style="fill:rgb(0,0,0);"/>
 					<rect width="50" height="40" x="0" y="15" style="fill:rgb(0,0,0);"/>
 				</svg>
-				<svg width="50" height="75" style="display: none">
+				<svg viewbox="0 0 50 75" style="display: none">
 					<ellipse cx="25" cy="37.5" rx="17.5" ry="30" style="stroke:black; fill:none; stroke-width:15"/>
 				</svg>
 			</div>
 		</div>
 		<div id="score" class="menu">
 			<div id="scoreSvg1">
-				<svg width="50" height="75" style="float: left">
+				<svg viewbox="0 0 50 75">
 					<rect width="50" height="20" x="0" y="55" style="fill:rgb(0,0,0);"/>
 					<circle cx="25" cy="55" r="25"/>
 					<circle cx="25" cy="15" r="15"/>
 				</svg>
-				<svg width="50" height="75" style="display: none">
+				<svg viewbox="0 0 50 75" style="display: none">
 					<line x1="0" y1="0" x2="50" y2="75" style="stroke:black; stroke-width:15"></line>
 					<line x1="50" y1="0" x2="0" y2="75" style="stroke:black; stroke-width:15"></line>
 				</svg>
@@ -82,12 +82,12 @@ <h2 style="grid-row: 1; grid-column: 1 / 4">Starting Player</h2>
 			<div>-</div>
 			<div id="score2">0</div>
 			<div id="scoreSvg2">
-				<svg width="50" height="75" style="float: right">
+				<svg viewbox="0 0 50 75">
 					<rect width="40" height="5" x="5" y="70" style="fill:rgb(0,0,0);"/>
 					<rect width="5" height="50" x="22.5" y="20" style="fill:rgb(0,0,0);"/>
 					<rect width="50" height="40" x="0" y="15" style="fill:rgb(0,0,0);"/>
 				</svg>
-				<svg width="50" height="75" style="display: none">
+				<svg viewbox="0 0 50 75" style="display: none">
 					<ellipse cx="25" cy="37.5" rx="17.5" ry="30" style="stroke:black; fill:none; stroke-width:15"/>
 				</svg>
 			</div>
@@ -100,4 +100,4 @@ <h2 style="grid-row: 1; grid-column: 1 / 4">Starting Player</h2>
 	<div id="thing">Please rotate your device or resize your window!</div>
 	<script src="main.js"></script>
 </body>
-</html>
+</html>