commit 38b5cc6a276ebced54b5b0d6ec0852d74f91c7f8
parent deb68635a5fa708c15dc8aacaab9e9daf3e14a45
Author: underd0g1 <hide4@comcast.net>
Date: Tue, 15 Sep 2020 00:49:56 -0400
added base
Diffstat:
4 files changed, 230 insertions(+), 0 deletions(-)
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,125 @@
+@font-face {
+ font-family: "Roboto Mono";
+ src: url("../fonts/roboto-mono-medium.ttf");
+}
+
+:root {
+ --font: "Roboto Mono";
+ --background: #0f0e17;
+ --foreground: #fffffe;
+ --pink: #e53170;
+ --red: #f25f4c;
+ --orange: #ff8906;
+ --branch: 1px solid #a7a9be;
+}
+
+html {
+ font-size: 18px;
+ overflow: hidden;
+}
+
+body {
+ background: var(--background);
+ width: 100vw;
+ height: 100vh;
+ margin: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.prompt {
+ font-family: var(--font);
+ color: var(--foreground);
+}
+
+.prompt~.prompt {
+ padding: 1.5rem 0 0.3125rem;
+}
+
+span {
+ color: var(--pink);
+}
+
+h1 {
+ display: inline;
+ font-family: var(--font);
+ font-size: 1rem;
+ font-weight: normal;
+ color: var(--red);
+ cursor: pointer;
+}
+
+.tree>ul {
+ margin: 0;
+ padding-left: 1rem;
+}
+
+ul {
+ list-style: none;
+ padding-left: 2.5rem;
+}
+
+li {
+ position: relative;
+}
+
+li.hideChildren>ul {
+ display: none;
+}
+
+li::before,
+li::after {
+ content: "";
+ position: absolute;
+ left: -0.75rem;
+}
+
+li::before {
+ border-top: var(--branch);
+ top: 0.75rem;
+ width: 0.5rem;
+}
+
+li::after {
+ border-left: var(--branch);
+ height: 100%;
+ top: 0.25rem;
+}
+
+li:last-child::after {
+ height: 0.5rem;
+}
+
+a {
+ font-family: var(--font);
+ font-size: 1rem;
+ color: var(--foreground);
+ text-decoration: none;
+ outline: none;
+}
+
+a:hover,
+a:focus {
+ color: var(--background);
+ background: var(--orange);
+}
+
+form h1 {
+ padding-left: 0.125rem;
+}
+
+/* you can fill the texarea above/below? the Viewport */
+#search {
+ font-family: var(--font);
+ font-size: 1rem;
+ color: var(--foreground);
+ background-color: var(--background);
+ border: none;
+ outline: none;
+ position: absolute;
+ width: 50vw;
+ height: 50vh;
+ word-break: break-all;
+ resize: none;
+}+
\ No newline at end of file
diff --git a/fonts/roboto-mono-medium.ttf b/fonts/roboto-mono-medium.ttf
Binary files differ.
diff --git a/index.html b/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="UTF-8">
+ <link rel="stylesheet" type="text/css" href="css/style.css">
+ <title>Home</title>
+</head>
+
+<body>
+ <main>
+ <div class="prompt">[<span data-Name>user</span>@<span>l0bster</span> ~]$ ls ++</div>
+ <div class="tree">
+ <h1>.</h1>
+ <ul id="list">
+ <li>
+ <h1>[error]</h1>
+ </li>
+ </ul>
+ </div>
+ <div class="prompt">[<span data-Name>user</span>@<span>l0bster</span> ~]$ ddg</div>
+
+ <form action="https://duckduckgo.com/" method="GET" autocomplete="off">
+ <h1>search: </h1>
+ <textarea type="text" name="q" id="search" wrap="hard" autofocus></textarea>
+ </form>
+ </main>
+</body>
+
+</html>
+
+<script src="script/script.js"></script>
diff --git a/script/script.js b/script/script.js
@@ -0,0 +1,72 @@
+const Config = {
+ name: "user",
+ scale: 1,
+ Links: [
+ [
+ "site",
+ [
+ ["link", "https://www.example.com"],
+ ["link", "https://www.example.com"]
+ ]
+ ],
+ [
+ "site",
+ [
+ ["link", "https://www.example.com"],
+ ["link", "https://www.example.com"]
+ ]
+ ],
+ [
+ "site",
+ [
+ ["link", "https://www.example.com"],
+ ["link", "https://www.example.com"],
+ ["link", "https://www.example.com"]
+ ]
+ ],
+ [
+ "site",
+ [
+ ["link", "https://www.example.com"],
+ ["link", "https://www.example.com"],
+ ["link", "https://www.example.com"],
+ ["link", "https://www.example.com"]
+ ]
+ ]
+ ]
+}
+
+const Main = (() => {
+ const list = document.getElementById("list");
+ const names = document.querySelectorAll("[data-Name]");
+ const search = document.getElementById("search");
+ const form = document.forms[0];
+
+ const init = () => {
+ list.innerHTML = Config.Links.map(([gName, Links]) => `
+ <li>
+ <h1 onclick="this.parentNode.classList.toggle('hideChildren')">${gName}</h1>
+ <ul>
+ ${Links.map(([lName, url]) => `
+ <li>
+ <a href="${url}">${lName}</a>
+ </li>`
+ ).join("")}
+ </ul>
+ </li>`
+ ).join("")
+
+ names.forEach(el => {
+ el.innerText = Config.name;
+ });
+
+ document.addEventListener("keydown", e => e.key.length === 1 && search.focus());
+ search.addEventListener("keydown", () => (window.event ? event.keyCode : e.which) == 13 && form.submit());
+ };
+
+ return {
+ init,
+ };
+})();
+
+Main.init()
