dashboard progress w/media queries

ManWithACap · May 25, 2024 · 91e7bef · 91e7bef
1 parent a20dd75
commit 91e7bef
Show file tree

Hide file tree

Showing 6 changed files with 122 additions and 16 deletions.
diff --git a/Data/dashboards.json b/Data/dashboards.json
@@ -0,0 +1,14 @@
+[
+	{
+		"user": "zach",
+	},
+	{
+		"user": "jack",
+	},
+	{
+		"user": "nolan",
+	},
+	{
+		"user": "scott",
+	}
+]
diff --git a/Data/userinfo.json b/Data/userinfo.json
@@ -1,5 +1,6 @@
 [
     {"username": "zach", "password": "password1"},
     {"username": "jack", "password": "password2"},
-    {"username": "nolan", "password": "password3"}
+    {"username": "nolan", "password": "password3"},
+    {"username": "scott", "password": "password4"}
 ]
diff --git a/pages/Images/Users/fallbackpfp.jpg b/pages/Images/Users/fallbackpfp.jpg
diff --git a/pages/dashboard.html b/pages/dashboard.html
@@ -4,9 +4,17 @@
 		<link rel="stylesheet" type="text/css" href="styles/dashboard.css">
 	</head>
 	<body>
-		<h1>Dashboard</h1>
-		<h2>Send a message to the server:<br>go on... don't be shy now...</h2>
-		<button id="sendBtn" type="submit">Send</button>
+		<div id="logoContainer">
+			<img id="pfp" src="./Images/Users/fallbackpfp.jpg">
+			<h3 id="username">USER</h3>
+			<h3>Dashboard | <span id="logo">Sovereign Stationary</span></h1>
+		</div>
+		<div id="mainContainer">
+			<h1>My Characters</h1>
+			<h1>Wiki</h1>
+			<h1>Transactions</h1>
+			<h1>Settings</h1>
+		</div>
 	</body>
 	<script src="scripts/dashboard.js"></script>
 </html>
diff --git a/pages/styles/dashboard.css b/pages/styles/dashboard.css
@@ -1,23 +1,106 @@
+@import url('https://fonts.googleapis.com/css2?family=Honk&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
+
+@font-face {
+	font-family: "Honk2";
+	src: url("../../Fonts/Honk/Honk.ttf");
+}
+
 @media(max-width: 1100px){
-	h1 {
-		font-size: 20vw;
+	#mainContainer{
+		margin-top: 200px;
+		font-size: 3em;
+	}
+
+	#username{
+		position: absolute;
+		visibility: hidden;
+	}
+
+	#logo, h3{
+		font-size: 3rem;
 		text-align: center;
+		padding-right: 10px;
 	}
 
-	* {
-		font-size: 10vw;
-		text-align: center;
+	#logo{
+		font-family: "Honk2";
+		letter-spacing: 2px;
+	}
+
+	h3{
+		font-family: "Lato";
+	}
+
+	#pfp{
+		width: 4em;
+		height: 4em;
+		border-radius: 2em;
+		margin-left: 10px;
 	}
 }
 
 @media(min-width: 1200px){
-	h1 {
-		font-size: 10vw;
-		text-align: center;
+	#mainContainer{
+		margin-top: 150px;
+	}
+
+	#username{
+		position: absolute;
+		left: 0;
+		margin-left: 75px;
+	}
+
+	#logo, h3{
+		font-size: 2rem;
+		padding-right: 10px;
 	}
 
-	* {
-		font-size: 5vw;
-		text-align: center;
+	#logo{
+		font-family: "Honk2";
+		letter-spacing: 2px;
 	}
+
+	h3{
+		font-family: "Lato";
+	}
+
+	#pfp{
+		width: 3em;
+		height: 3em;
+		border-radius: 2em;
+		margin-left: 10px;
+	}
+}
+
+body {
+	color: white;
+	background-color: #3cae3f;
+}
+
+#logoContainer{
+	top: 0;
+	margin-top: 10px;
+	position: fixed;
+	width: 100%;
+	box-shadow: 0px 2px 4px rgba(0,0,0,0.75);
+	display: flex;
+	align-items: center;
+	justify-content: right;
+	background-color: #6bd66e;
+}
+
+#pfp{
+	cursor: pointer;
+	position: absolute;
+	left: 0;
+}
+
+#pfp:hover{
+	border: 4px solid black;
+	margin-left: 6px;
+}
+
+#pfp:active{
+	border-color: blue;
 }
diff --git a/scripts.js b/scripts.js
@@ -16,7 +16,7 @@ document.getElementById('loginForm').addEventListener('submit', async function(e
 		});
 
 		if (authenticatedUser) {
-			window.location.href = "https://manwithacap.github.io/Sovereign-Stationary/pages/dashboard"/*"https://1dc3eba1-3cc3-49b4-8bf5-e325f8d8338d-00-scc07rt6lmkl.kirk.replit.dev/pages/dashboard.html"*/;
+			window.location.href = /*"https://manwithacap.github.io/Sovereign-Stationary/pages/dashboard"*/"https://1dc3eba1-3cc3-49b4-8bf5-e325f8d8338d-00-scc07rt6lmkl.kirk.replit.dev/pages/dashboard.html";
 		} else {
 			document.getElementById('error').textContent = 'Invalid username or password';
 		}