Add website code and assets

Youssefs-Games · Sep 11, 2023 · 4ad3029 · 4ad3029
1 parent be2867a
commit 4ad3029
Show file tree

Hide file tree

Showing 6 changed files with 167 additions and 0 deletions.
diff --git a/assets/Youssef.jpg b/assets/Youssef.jpg
diff --git a/assets/games.js b/assets/games.js
@@ -0,0 +1 @@
+console.error(new ReferenceError("No games found."));
diff --git a/assets/styles.css b/assets/styles.css
@@ -0,0 +1,91 @@
+@import url("https://fonts.googleapis.com/css?family=Inter:100;200;300;400;500;600;700;800;900&display=swap");
+
+:root {
+    --Inter: Inter;
+    --cursor-default: default;
+    --cursor-text: text;
+    --cursor-pointer: pointer;
+    --cursor-not-allowed: not-allowed;
+}
+
+* {
+    font-family: var(--Inter);
+}
+
+body {
+    margin: 0;
+}
+
+.content {
+    display: flex;
+    min-height: 100vh;
+    flex-direction: column;
+    align-items: center;
+    align-content: center;
+    justify-content: center;
+}
+
+.flex {
+    display: flex;
+}
+
+.flex.center {
+    align-items: center;
+    align-content: center;
+    justify-content: center;
+}
+
+.flex.direction-row {
+    flex-direction: row;
+}
+
+.flex.direction-row-reverse {
+    flex-direction: row-reverse;
+}
+
+.flex.direction-column {
+    flex-direction: column;
+}
+
+.flex.direction-column-reverse {
+    flex-direction: column-reverse;
+}
+
+.flex.wrap {
+    flex-wrap: wrap;
+}
+
+.navbar {
+    display: flex;
+    position: fixed;
+    flex-direction: column;
+    align-items: center;
+    align-content: center;
+    justify-content: center;
+    gap: 10px;
+    background: rgb(255, 255, 255);
+    color: rgb(0, 0, 0);
+    border-bottom: 2px solid rgb(0, 0, 0);
+    width: 100%;
+    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.373);
+    top: 0;
+    pointer-events: none;
+}
+
+button:not(:disabled) {
+    padding: 9.5px;
+    border-radius: 30px;
+    border: none;
+    background: rgb(129, 96, 206);
+    color: rgb(255, 255, 255);
+    cursor: var(--cursor-pointer);
+}
+
+button:disabled {
+    padding: 9.5px;
+    border-radius: 30px;
+    border: none;
+    background: rgb(104, 12, 12);
+    color: rgb(255, 255, 255);
+    cursor: var(--cursor-not-allowed);
+}
diff --git a/games/embed/index.html b/games/embed/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="/assets/styles.css">
+    <link rel="shortcut icon" href="/assets/Youssef.jpg" type="image/x-icon">
+    <title>Youssef's Games - Game List</title>
+</head>
+<body>
+    <div class="content">
+        <h2>Games</h2>
+        <div class="flex wrap center direction-row">
+            <p>Nothing yet. :(</p>
+        </div>
+        <button onclick="location.reload()">Update and Reload</button>
+        <a href="https://youssefs-games.github.io" class="flex center"><img src="/assets/Youssef.jpg" alt="Youssef" width="10%"></a>
+    </div>
+    <script src="https://unpkg.com/htmx.org" integrity="sha384-xcuj3WpfgjlKF+FXhSQFQ0ZNr39ln+hwjN3npfM9VBnUskLolQAcN80McRIVOPuO" crossorigin="anonymous"></script>
+    <script src="/assets/games.js"></script>
+</body>
+</html>
diff --git a/games/index.html b/games/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="/assets/styles.css">
+    <link rel="shortcut icon" href="/assets/Youssef.jpg" type="image/x-icon">
+    <title>Youssef's Games - Game List</title>
+</head>
+<body>
+    <div class="content">
+        <nav class="navbar flex direction-row">
+            <div class="flex direction-column wrap center">
+                <img src="/assets/Youssef.jpg" alt="Youssef" width="25%">
+                <h1>Youssef's Games</h1>
+            </div>
+        </nav>
+        <h2>Games</h2>
+        <div class="flex wrap center direction-row">
+            <p>Nothing yet. :(</p>
+        </div>
+        <button onclick="location.reload()">Update and Reload</button>
+    </div>
+    <script src="https://unpkg.com/htmx.org" integrity="sha384-xcuj3WpfgjlKF+FXhSQFQ0ZNr39ln+hwjN3npfM9VBnUskLolQAcN80McRIVOPuO" crossorigin="anonymous"></script>
+    <script src="/assets/games.js"></script>
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="/assets/styles.css">
+    <link rel="shortcut icon" href="/assets/Youssef.jpg" type="image/x-icon">
+    <title>Youssef's Games - Game List</title>
+</head>
+<body>
+    <div class="content">
+        <nav class="navbar flex direction-row">
+            <div class="flex direction-column wrap center">
+                <img src="/assets/Youssef.jpg" alt="Youssef" width="25%">
+                <h1>Youssef's Games</h1>
+            </div>
+        </nav>
+        <div id="games" hx-get="/games/embed" hx-trigger="load" hx-target="#games" hx-swap="innerHTML">
+            Loading...
+            <br>
+            If you still see this message, the /games page might be down or your Internet is slow.
+        </div>
+    </div>
+    <script src="https://unpkg.com/htmx.org" integrity="sha384-xcuj3WpfgjlKF+FXhSQFQ0ZNr39ln+hwjN3npfM9VBnUskLolQAcN80McRIVOPuO" crossorigin="anonymous"></script>
+</body>
+</html>