Added most core files

config-formatted.json

@@ -0,0 +1,80 @@
+{
+    "username": "Galax",
+    "font": {
+        "name": "Jetbrains Mono",
+        "type": "monospace",
+        "link": "https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700"
+    },
+    "logos": {
+        "Chrome": "googlechrome",
+        "IE": "internetexplorer",
+        "Firefox": "firefoxbrowser",
+        "Opera": "opera",
+        "Microsoft Edge": "microsoftedge",
+        "Safari": "safari"
+    },
+    "searchEngine": {
+        "name": "DuckDuckGo",
+        "queryString": "https://duckduckgo.com/?q=%query%"
+    },
+    "weather": {
+        "unit": "metric",
+        "apikey": "b82e6a4a483dc4e42e06c8ed8255e05b",
+        "rainEffect": true
+    },
+    "clockFormat": "12",
+    "colourSchemes": {
+        "dark": {
+            "background": "hsl(206,40%,10%)",
+            "primary": "hsl(206,40%,8%)",
+            "secondary": "hsl(196,18%,30%)",
+            "secondaryAlternate": "hsl(196,18%,60%)"
+        },
+        "light": {
+            "background": "hsl(48,87%,88%)",
+            "primary": "hsl(40,38%,73%)",
+            "secondary": "hsl(20,5%,22%)",
+            "secondaryAlternate": "hsl(0,0%,16%)"
+        }
+    },
+    "bookmarks": [
+        {
+            "name": "Social",
+            "links": {
+                "Reddit": "https://reddit.com",
+                "Discord": "https://discord.com/channels/@me",
+                "YouTube": "https://youtube.com",
+                "Twitch": "https://twitch.tv"
+            }
+        },
+        {
+            "name": "Programming",
+            "links": {
+                "GitHub": "https://github.com",
+                "StackOverflow": "https://stackoverflow.com",
+                "PyPi": "https://pypi.org",
+                "ReadTheDocs": "https://readthedocs.org",
+                "r/programming": "https://reddit.com/r/programming"
+            }
+        },
+        {
+            "name": "School",
+            "links": {
+                "Google Classroom": "https://classroom.google.com/u/2",
+                "Google Drive": "https://drive.google.com/u/2",
+                "Google Docs": "https://docs.google.com/u/2",
+                "Google Slides": "https://docs.google.com/presentation/u/2",
+                "Google Sheets": "https://docs.google.com/spreadsheets/u/2"
+            }
+        },
+        {
+            "name": "Fun",
+            "links": {
+                "Anime": "https://kickassanime.ro",
+                "Movies & Series": "https://stremiomovies.io",
+                "Cookie Clicker": "https://orteil.dashnet.org/cookieclicker",
+                "Music Playlist": "https://www.youtube.com/playlist?list=PLPXLdMzJaEGMT0274mqKipWJcye3_ioZe"
+            }
+        }
+    ]
+}

config.json

@@ -0,0 +1 @@
+{ "username": "Galax", "font": { "name": "Jetbrains Mono", "type": "monospace", "link": "https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700" }, "logos": { "Chrome": "googlechrome", "IE": "internetexplorer", "Firefox": "firefoxbrowser", "Opera": "opera", "Microsoft Edge": "microsoftedge", "Safari": "safari" }, "searchEngine": { "name": "DuckDuckGo", "queryString": "https://duckduckgo.com/?q=%query%" }, "weather": { "unit": "metric", "apikey": "b82e6a4a483dc4e42e06c8ed8255e05b", "rainEffect": true }, "clockFormat": "12", "colourSchemes": { "dark": { "background": "hsl(206,40%,10%)", "primary": "hsl(206,40%,8%)", "secondary": "hsl(196,18%,30%)", "secondaryAlternate": "hsl(196,18%,60%)" }, "light": { "background": "hsl(48,87%,88%)", "primary": "hsl(40,38%,73%)", "secondary": "hsl(20,5%,22%)", "secondaryAlternate": "hsl(0,0%,16%)" } }, "bookmarks": [{ "name": "Social", "links": { "Reddit": "https://reddit.com", "Discord": "https://discord.com/channels/@me", "YouTube": "https://youtube.com", "Twitch": "https://twitch.tv" } }, { "name": "Programming", "links": { "GitHub": "https://github.com", "StackOverflow": "https://stackoverflow.com", "PyPi": "https://pypi.org", "ReadTheDocs": "https://readthedocs.org", "r/programming": "https://reddit.com/r/programming" } }, { "name": "School", "links": { "Google Classroom": "https://classroom.google.com/u/2", "Google Drive": "https://drive.google.com/u/2", "Google Docs": "https://docs.google.com/u/2", "Google Slides": "https://docs.google.com/presentation/u/2", "Google Sheets": "https://docs.google.com/spreadsheets/u/2" } }, { "name": "Fun", "links": { "Anime": "https://kickassanime.ro", "Movies & Series": "https://stremiomovies.io", "Cookie Clicker": "https://orteil.dashnet.org/cookieclicker", "Music Playlist": "https://www.youtube.com/playlist?list=PLPXLdMzJaEGMT0274mqKipWJcye3_ioZe" } }] }

cors.py

@@ -0,0 +1,19 @@
+import requests
+from flask import Flask, jsonify
+
+cors = Flask(__name__)
+
+
+@cors.get("/<string:query>")
+def deal_with_cors(query):
+    return {"data": requests.get(f"https://ac.duckduckgo.com/ac/?q={query}&type=list").json()[1]}
+
+
+@cors.after_request
+def actually_deal_with_cors(res):
+    res.headers["Access-Control-Allow-Origin"] = "*"
+    return res
+
+
+if __name__ == "__main__":
+    cors.run("localhost", 8080)

main.js

@@ -0,0 +1,139 @@
+$(() => {
+    if (localStorage.getItem("config") === null) {
+        localStorage.setItem("config", JSON.stringify({ "username": "Galax", "font": { "name": "Jetbrains Mono", "type": "monospace", "link": "https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700" }, "logos": { "Chrome": "googlechrome", "IE": "internetexplorer", "Firefox": "firefoxbrowser", "Opera": "opera", "Microsoft Edge": "microsoftedge", "Safari": "safari" }, "searchEngine": { "name": "DuckDuckGo", "queryString": "https://duckduckgo.com/?q=%query%" }, "weather": { "unit": "metric", "apikey": "b82e6a4a483dc4e42e06c8ed8255e05b", "rainEffect": true }, "clockFormat": "12", "colourSchemes": { "dark": { "background": "hsl(206,40%,10%)", "primary": "hsl(206,40%,8%)", "secondary": "hsl(196,18%,30%)", "secondaryAlternate": "hsl(196,18%,60%)" }, "light": { "background": "hsl(48,87%,88%)", "primary": "hsl(40,38%,73%)", "secondary": "hsl(20,5%,22%)", "secondaryAlternate": "hsl(0,0%,16%)" } }, "bookmarks": [{ "name": "Social", "links": { "Reddit": "https://reddit.com", "Discord": "https://discord.com/channels/@me", "YouTube": "https://youtube.com", "Twitch": "https://twitch.tv" } }, { "name": "Programming", "links": { "GitHub": "https://github.com", "StackOverflow": "https://stackoverflow.com", "PyPi": "https://pypi.org", "ReadTheDocs": "https://readthedocs.org", "r/programming": "https://reddit.com/r/programming" } }, { "name": "School", "links": { "Google Classroom": "https://classroom.google.com/u/2", "Google Drive": "https://drive.google.com/u/2", "Google Docs": "https://docs.google.com/u/2", "Google Slides": "https://docs.google.com/presentation/u/2", "Google Sheets": "https://docs.google.com/spreadsheets/u/2" } }, { "name": "Fun", "links": { "Anime": "https://kickassanime.ro", "Movies & Series": "https://stremiomovies.io", "Cookie Clicker": "https://orteil.dashnet.org/cookieclicker", "Music Playlist": "https://www.youtube.com/playlist?list=PLPXLdMzJaEGMT0274mqKipWJcye3_ioZe" } }] }));
+    }
+
+    let conf = JSON.parse(localStorage.config);
+
+    // Browser Logo & Name
+    var browserName = bowser.parse(window.navigator.userAgent).browser.name;
+    if (browserName.startsWith("Opera")) {
+        browserName = "Opera";
+    } else if (browserName === "Chromium") {
+        browserName = "Chrome";
+    } else if (browserName === "Internet Explorer") {
+        browserName = "IE"
+    }
+
+    $("#browser-name").text(browserName);
+    if (browserName in conf.logos) {
+        $("link[rel=\"shortcut icon\"]").attr("href", `https://simpleicons.org/icons/${conf.logos[browserName]}.svg`);
+        $("#browser-logo").attr("src", `https://simpleicons.org/icons/${conf.logos[browserName]}.svg`);
+    } else {
+        $("link[rel=\"shortcut icon\"]").attr("href", "https://fonts.gstatic.com/s/i/materialiconsoutlined/public/v11/24px.svg");
+        $("#browser-logo").attr("src", "https://fonts.gstatic.com/s/i/materialiconsoutlined/public/v11/24px.svg");
+    }
+
+    $("#browser-logo").on("click", () => {
+        $("#browser-logo").css("animation", "logo-spin 2s ease-in");
+        setTimeout(() => { $("#browser-logo").css("animation", ""); }, 2000);
+    });
+
+    // Clock
+    function clock() {
+        var date = new Date();
+        var hours = date.getHours();
+        var minutes = date.getMinutes();
+        var seconds = date.getSeconds();
+
+        $("#clock").text(`${conf.clockFormat === "24" ? (hours >= 10 ? hours : "0" + hours) : "0" + (hours - 12)}:${minutes >= 10 ? minutes : "0" + minutes}:${seconds >= 10 ? seconds : "0" + seconds} ${conf.clockFormat === "24" ? "" : hours < 12 ? "AM" : "PM"}`);
+        setTimeout(() => { clock() }, 1000);
+    }
+
+    clock();
+    $("#greeting").text(`Good ${new Date().getHours() < 12 ? "morning" : new Date().getHours() < 18 ? "afternoon" : "evening"}, ${conf.username}.`);
+
+    // Weather Detection
+    /* if (navigator.geolocation) {
+        navigator.geolocation.getCurrentPosition((pos) => {
+            $.get(`https://api.openweathermap.org/data/2.5/onecall?lat=${pos.coords.latitude}&lon=${pos.coords.longitude}&units=${conf.weather.unit}&appid=${conf.weather.apikey}`, (res) => {
+                let ress = res.current;
+                let unit = conf.weather.unit === "metric" ? "C" : "F";
+                $("#weather").text(res.message ? `--°${unit} - ${res.message}` : `${Math.floor(ress.temp)}°${unit} - ${ress.weather[0].description}`);
+
+                // Rain
+                if (conf.weather.rainEffect) {
+                    if ($("#weather").text().includes("rain")) {
+                        $('.rain').empty();
+
+                        var increment = 0;
+                        var drops = "";
+                        var backDrops = "";
+
+                        while (increment < 100) {
+                            var randomHundo = (Math.floor(Math.random() * (98 - 1 + 1) + 1));
+                            var randomFiver = (Math.floor(Math.random() * (5 - 2 + 1) + 2));
+
+                            increment += randomFiver;
+                            drops += '<div class="drop" style="left: ' + increment + '%; bottom: ' + (randomFiver + randomFiver - 1 + 100) + '%; animation-delay: 0.' + randomHundo + 's; animation-duration: 0.5' + randomHundo + 's;"><div class="stem" style="animation-delay: 0.' + randomHundo + 's; animation-duration: 0.5' + randomHundo + 's;"></div><div class="splat" style="animation-delay: 0.' + randomHundo + 's; animation-duration: 0.5' + randomHundo + 's;"></div></div>';
+                            backDrops += '<div class="drop" style="right: ' + increment + '%; bottom: ' + (randomFiver + randomFiver - 1 + 100) + '%; animation-delay: 0.' + randomHundo + 's; animation-duration: 0.5' + randomHundo + 's;"><div class="stem" style="animation-delay: 0.' + randomHundo + 's; animation-duration: 0.5' + randomHundo + 's;"></div><div class="splat" style="animation-delay: 0.' + randomHundo + 's; animation-duration: 0.5' + randomHundo + 's;"></div></div>';
+                        }
+
+                        $('.rain.front-row').append(drops);
+                        $('.rain.back-row').append(backDrops);
+                    }
+                }
+            });
+        });
+    } */
+
+    // Search
+    $("#search").on("keyup", (event) => {
+        if (event.key === "Enter" && !event.ctrlKey) {
+            if ($("#search").val().length === 0 || !$("#search").val().trim()) { } else {
+                window.location.href = conf.searchEngine.queryString.replace("%query%", $("#search").val());
+            }
+        } else if (event.key === "Enter" && event.ctrlKey) {
+            if ($("#search").val().length === 0 || !$("#search").val().trim()) { } else {
+                window.open(conf.searchEngine.queryString.replace("%query%", $("#search").val()), "_blank");
+            }
+        } else if (event.key === " " && event.ctrlKey) {
+            if ($("#search").val().length === 0 || !$("#search").val().trim()) { } else {
+                $.get(`http://localhost:8080/${$("#search").val()}`, (res) => {
+                    $(".search-predictions > ul").remove();
+                    res = res.data.slice(0, 10);
+                    var predictions = "<ul>";
+                    res.forEach(el => {
+                        predictions += `<a href="${conf.searchEngine.queryString.replace("%query%", el)}"><li>${el}</li></a>`;
+                    });
+                    $(".search-predictions").append(`${predictions}</ul>`);
+                    $(".search-predictions").show();
+                });
+            }
+        }
+        $(".search-predictions > ul").remove();
+    });
+
+    $("#search").on("focus", () => {
+        if ($(".search-predictions").children().length > 0) {
+            $(".search-predictions").show();
+        }
+    });
+    $("#search").on("focusout", () => {
+        if ($(".search-predictions").children().length > 0) {
+            if ($(".search-predictions").is(":hover")) {
+                setTimeout(() => { $(".search-predictions").hide() }, 500);
+            } else {
+                $(".search-predictions").hide();
+            }
+        } else {
+            $(".search-predictions").hide();
+        }
+    });
+
+    // Bookmarks
+    var bookmarks = "";
+    conf.bookmarks.forEach(el => {
+        bookmarks += `<div class="card"><h3 class="title">${el.name}</h3><ul>`;
+        for (const link in el.links) {
+            bookmarks += `<a href="${el.links[link]}"><li>${link}</li></a>`;
+        }
+        bookmarks += "</ul></div>";
+    });
+    $(".cards-container").append(bookmarks);
+
+    // Settings
+    $(".settings").on("click", () => {
+        // ! Too lazy to make a sidebar rn
+    });
+});

startpage.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="shortcut icon" type="image/x-icon">
+    <title>New Tab</title>
+</head>
+
+<body>
+    <div class="root">
+        <div class="rain front-row"></div>
+        <div class="rain back-row"></div>
+        <div class="sidebar"></div>
+        <div class="header">
+            <img id="browser-logo" />
+            <h1 id="browser-name"></h1>
+        </div>
+        <div class="subtitle">
+            <h5 id="clock">--:--:--</h5>
+            <h5>•</h5>
+            <h5 id="weather">--°C - loading weather...</h5>
+        </div>
+        <div class="search-container">
+            <input type="text" id="search" placeholder="Search with DuckDuckGo" autocomplete="off" autofocus />
+            <div class="search-predictions"></div>
+        </div>
+        <div class="subtitle">
+            <h5 id="greeting">Hello, user.</h5>
+        </div>
+        <div class="cards-container"></div>
+        <span class="material-icons-outlined settings">settings</span>
+    </div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer"
+        crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/bowser/2.11.0/bundled.js" referrerpolicy="no-referrer"
+        crossorigin="anonymous"></script>
+    <script src="./main.js"></script>
+</body>
+
+</html>

styles.css

@@ -0,0 +1,318 @@
+@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700");
+@import url("https://fonts.googleapis.com/icon?family=Material+Icons+Outlined");
+
+/* META */
+
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    font-family: "Jetbrains Mono", monospace;
+    color: var(--color-sec);
+}
+
+:root {
+    --color-bg: hsl(206, 40%, 10%);
+    --color-pri: hsl(206, 40%, 8%);
+    --color-sec: hsl(196, 18%, 30%);
+    --color-sec-alt: hsl(196, 18%, 60%);
+
+    --shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
+}
+
+html {
+    font-size: 1.25vw;
+    background: var(--color-bg);
+    overflow-x: hidden;
+}
+
+/* TYPOGRAPHY */
+
+h1 {
+    font-size: 3em;
+}
+
+a {
+    text-decoration: none;
+}
+
+.material-icons-outlined {
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+}
+
+/* ROOT CONTAINER */
+
+div.root {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+}
+
+div.root > * {
+    margin: 1rem;
+}
+
+/* HEADER CONTAINERS */
+
+div.header {
+    display: flex;
+    align-items: center;
+    background: var(--color-pri);
+    padding: 1rem;
+    border-radius: 0.2rem;
+    box-shadow: var(--shadow);
+}
+
+div.header > * {
+    margin-left: 0.3rem;
+    margin-right: 0.3rem;
+}
+
+div.header > img {
+    height: 4em;
+    width: 4em;
+    filter: invert(30%) sepia(17%) saturate(530%) hue-rotate(149deg) brightness(97%) contrast(94%);
+    cursor: pointer;
+}
+
+div.subtitle {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+}
+
+div.subtitle > * {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+}
+
+/* CARD CONTAINERS */
+
+div.cards-container {
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
+    justify-content: center;
+    align-items: stretch;
+    max-width: 70vw;
+}
+
+div.card {
+    display: flex;
+    flex-direction: column;
+    background-color: var(--color-pri);
+    box-shadow: var(--shadow);
+    padding: 0.5rem;
+}
+
+div.card > h3.title {
+    background-color: var(--color-bg);
+    text-align: center;
+    border-radius: 0.2rem;
+    padding: 0.3rem;
+    margin-bottom: 0.5rem;
+}
+
+div.card > ul > a > li {
+    font-size: 0.8em;
+    list-style-type: none;
+    transition: 0.3s;
+}
+
+div.card > ul > a:hover > li {
+    font-weight: 700;
+    color: var(--color-sec-alt);
+}
+
+/* SEARCH */
+
+div.search-container {
+    display: flex;
+    flex-direction: column;
+}
+
+input[type="text"] {
+    outline: none;
+    border: none;
+    border-radius: 0.2rem;
+    box-shadow: var(--shadow);
+    background-color: var(--color-pri);
+    font-size: 1em;
+    padding: 1em;
+    width: 50vw;
+}
+
+input[type="text"]::placeholder {
+    color: var(--color-sec);
+    opacity: 0.5;
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+}
+
+div.search-predictions {
+    display: none;
+    position: absolute;
+    border-radius: 0.2rem;
+    background-color: var(--color-pri);
+    box-shadow: var(--shadow);
+    width: 50vw;
+    max-height: 50vh;
+    padding: 0.5rem;
+    top: 50vh;
+    color: var(--color-sec);
+}
+
+div.search-predictions > ul > a > li {
+    list-style: none;
+    transition: 0.3s;
+}
+
+div.search-predictions > ul > a:hover > li {
+    font-weight: 700;
+    color: var(--color-sec-alt);
+}
+
+/* OTHERS */
+
+span.settings {
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    font-size: 2em;
+    cursor: pointer;
+    transition: 0.5s;
+}
+
+/* RAIN */
+
+.rain {
+    position: absolute;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: -1;
+}
+
+.rain.back-row {
+    z-index: -2;
+    bottom: 1rem;
+    opacity: 0.5;
+}
+
+.drop {
+    position: absolute;
+    bottom: 100%;
+    width: 15px;
+    height: 120px;
+    pointer-events: none;
+    animation: drop 0.5s linear infinite;
+}
+
+@keyframes drop {
+    0% {
+        transform: translateY(0vh);
+    }
+    75% {
+        transform: translateY(100vh);
+    }
+    100% {
+        transform: translateY(100vh);
+    }
+}
+
+.stem {
+    width: 1px;
+    height: 60%;
+    margin-left: 7px;
+    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25));
+    animation: stem 0.5s linear infinite;
+}
+
+@keyframes stem {
+    0% {
+        opacity: 1;
+    }
+    65% {
+        opacity: 1;
+    }
+    75% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+
+.splat {
+    width: 15px;
+    height: 10px;
+    border-top: 2px dotted rgba(255, 255, 255, 0.5);
+    border-radius: 50%;
+    opacity: 1;
+    transform: scale(0);
+    animation: splat 0.5s linear infinite;
+}
+
+@keyframes splat {
+    0% {
+        opacity: 1;
+        transform: scale(0);
+    }
+    80% {
+        opacity: 1;
+        transform: scale(0);
+    }
+    90% {
+        opacity: 0.5;
+        transform: scale(1);
+    }
+    100% {
+        opacity: 0;
+        transform: scale(1.5);
+    }
+}
+
+/* KEYFRAMES */
+@keyframes logo-spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes settings-forward {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(90deg);
+    }
+}
+
+@keyframes settings-backward {
+    from {
+        transform: rotate(90deg);
+    }
+    to {
+        transform: rotate(0deg);
+    }
+}
+
+/* MEDIA QUERIES */
+
+@media (prefers-color-scheme: light) {
+    :root {
+        --color-bg: hsl(48, 87%, 88%);
+        --color-pri: hsl(40, 38%, 73%);
+        --color-sec: hsl(20, 5%, 22%);
+        --color-sec-alt: hsl(0, 0%, 16%);
+    }
+}