WAY more STUFF

2023-10-27 00:38:23 -05:00 · 2023-10-27 00:38:23 -05:00 · 8b6f6e5228
commit 8b6f6e5228
parent d42d2dd9e8
8 changed files with 237 additions and 41 deletions
--- a/static/index.html
+++ b/static/index.html
@ -0,0 +1,33 @@
+<!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="./mainStyle.css">
+
+    <title>SimpleTube</title>
+</head>
+
+<body>
+    <div id="titleBar">
+        <h1>SimpleTube</h1>
+    </div>
+    <main>
+        <h1>Welcome to SimpleTube</h1>
+        <p>SimpleTube is a Youtube client that aims to be free of Javascript, as small as possible, and lack annoyances.
+            <br>
+            Currently SimpleTube does not have a trending tab or anything, so please use the search function at the top!
+            <br>
+            (Sorry!)</p>
+        <h2>More about the project: <br></h2>
+        <p>
+            <a href="https://github.com/Violets-puragtory/SimpleTube">Github</a>
+            <a href="violets-purgatory.dev">The developer</a>
+        </p>
+
+    </main>
+</body>
+
+</html>
--- a/static/mainStyle.css
+++ b/static/mainStyle.css
@ -0,0 +1,79 @@
+body {
+    height: 100vh;
+    padding: 0;
+    margin: 0;
+    background-color: rgb(40, 30, 50);
+}
+
+* {
+    color: white;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    line-height: 2.5rem;
+}
+
+a:not(h1 > a) {
+    font-size: 1.5rem;
+    background-color: black;
+    padding: 8px;
+    margin: 5px;
+    border: 2px white solid;
+    border-radius: 15px;
+    color: rgb(240, 220, 255);
+    text-decoration: none;
+}
+
+h1:not(#titleBar > h1), h2, p, a {
+    text-align: center;
+}
+
+#title {
+    padding: 10px;
+}
+
+#titleBar {
+    background-color: rgb(5, 0, 10);
+    /* border: 0px; */
+    border: 2px transparent solid;
+    border-bottom-color: white;
+    position: sticky;
+    top: 0px;
+}
+
+#titleBar > h1 {
+    margin: 10px;
+}
+
+#titleBar > h1 > a {
+    text-decoration: none;
+}
+
+#description {
+    background-color: rgb(12, 10, 15);
+    padding: 10px;
+    border: 2px gray solid;
+}
+
+#videoPlayer {
+    margin: auto;
+    padding: 0;
+    object-fit: contain;
+    display: block;
+    /* height: 100%;
+    max-width: 100%; */
+    width: 100%;
+    aspect-ratio: 1.8/1;
+    max-height: 80vh;
+    /* height: 80vh; */
+}
+
+#videoContainer {
+    max-width: 100vw;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    background-color: black;
+}
+
+p {
+    padding: 5px;
+}