From 51e4ee43a110d4fe5099440ec8e29e3f508bf9bc Mon Sep 17 00:00:00 2001 From: Galax028 Date: Tue, 3 Aug 2021 10:27:55 +0700 Subject: [PATCH] Added most core files --- config-formatted.json | 80 +++++++++++ config.json | 1 + cors.py | 19 +++ main.js | 139 ++++++++++++++++++ startpage.html | 44 ++++++ styles.css | 318 ++++++++++++++++++++++++++++++++++++++++++ 6 files changed, 601 insertions(+) create mode 100644 config-formatted.json create mode 100644 config.json create mode 100644 cors.py create mode 100644 main.js create mode 100644 startpage.html create mode 100644 styles.css diff --git a/config-formatted.json b/config-formatted.json new file mode 100644 index 0000000..c5decef --- /dev/null +++ b/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" + } + } + ] +} \ No newline at end of file diff --git a/config.json b/config.json new file mode 100644 index 0000000..622514d --- /dev/null +++ b/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" } }] } \ No newline at end of file diff --git a/cors.py b/cors.py new file mode 100644 index 0000000..f269921 --- /dev/null +++ b/cors.py @@ -0,0 +1,19 @@ +import requests +from flask import Flask, jsonify + +cors = Flask(__name__) + + +@cors.get("/") +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) diff --git a/main.js b/main.js new file mode 100644 index 0000000..bad4fe5 --- /dev/null +++ b/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 += '
'; + backDrops += '
'; + } + + $('.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 = "`); + $(".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 += `

${el.name}

    `; + for (const link in el.links) { + bookmarks += `
  • ${link}
    • `; + } + bookmarks += "
"; + }); + $(".cards-container").append(bookmarks); + + // Settings + $(".settings").on("click", () => { + // ! Too lazy to make a sidebar rn + }); +}); \ No newline at end of file diff --git a/startpage.html b/startpage.html new file mode 100644 index 0000000..02a6b49 --- /dev/null +++ b/startpage.html @@ -0,0 +1,44 @@ + + + + + + + + + + New Tab + + + +
+
+
+
+
+ +

+
+
+
--:--:--
+
•
+
--°C - loading weather...
+
+
+ +
+
+
+
Hello, user.
+
+
+ settings +
+ + + + + + \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..e0dc5e2 --- /dev/null +++ b/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%); + } +}