Изменил структура проекта

2025-02-24 11:11:24 +03:00 · 2024-09-14 18:58:03 +03:00 · 2024-09-14 18:58:03 +03:00 · 8b32204a4e
commit 8b32204a4e
parent 8b8254b89f
13 changed files with 10 additions and 10 deletions
--- a/src/web/html/error/404.html
+++ b/src/web/html/error/404.html
@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Starlio</title>
+    <link rel="icon" href="../static/image/favicon.png">
+
+    <meta name="author" content="Redume, Murzify">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link rel="canonical" href="https://starlio.space/">
+    <link rel="stylesheet" type="text/css" href="../static/css/404.css">
+</head>
+<body>
+<lottie-player src="https://assets1.lottiefiles.com/packages/lf20_2QSlz3Li88.json"
+               background="transparent"
+               speed="1"
+               loop
+               autoplay>
+</lottie-player>
+<p style="font-size: 160%;">Page not found!</p>
+<p style="font-size: 115%;">Sorry, but the page you want to view may have been deleted or moved!</p>
+<p><a style="font-size: 1em;" href="/">General page</a></p>
+<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
+</body>
+</html>
--- a/src/web/html/index.html
+++ b/src/web/html/index.html
@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Starlio</title>
+    <link rel="icon" href="./static/image/favicon.png">
+
+    <meta name="author" content="Redume, Murzify">
+    <meta name="description" content="Amazing wallpaper straight from space!">
+    <meta name="keywords" content="nasa, space, wallpaper, auto change wallpaper, starlio">
+
+    <meta name="theme-color" content="#2F3041">
+
+    <meta property="og:title" content="Starlio">
+    <meta property="og:description" content="Amazing wallpaper straight from space!">
+    <meta property="og:image" content="./static/image/favicon.png">
+    <meta property="og:url" content="https://starlio.space">
+
+    <meta property="twitter:title" content="Starlio">
+    <meta property="twitter:description" content="Amazing wallpaper straight from space!">
+    <meta property="twitter:image" content="./static/image/favicon.png">
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link rel="canonical" href="https://starlio.space/">
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
+
+    <link rel="stylesheet" type="text/css" href="./static/css/main.css">
+</head>
+<body>
+<img src="./static/image/devices.png" alt="Devices" id="devices">
+
+    <div id="content">
+        <p id="title">Starlio</p>
+        <p id="subtitle">Amazing wallpaper straight from space!</p>
+        <p id="description">
+            NASA publishes amazing space photos every day, so why not set them as wallpapers? Starlio does it automatically for you!
+        </p>
+
+        <div id="get-it-on">
+            <a href='https://play.google.com/store/apps/details?id=ru.murzify.everynasa'>
+                <img alt='Get it on Google Play' src='./static/image/get-it-on-gp.png' id="google-play"/>
+            </a>
+            <a href="https://github.com/Starlio-app/Starlio">
+                <img alt="Get it on Github" src="./static/image/get-it-on-github.png" id="github">
+            </a>
+        </div>
+    </div>
+</body>
+</html>
--- a/src/web/html/wallpaper.html
+++ b/src/web/html/wallpaper.html
@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Starlio</title>
+    <link rel="icon" href="/static/image/favicon.png">
+
+    <meta name="author" content="Redume, Murzify">
+    <meta name="description" content="Amazing wallpaper straight from space!">
+    <meta name="keywords" content="nasa, space, wallpaper, auto change wallpaper, starlio">
+
+    <meta name="theme-color" content="#2F3041">
+
+    <meta property="og:title" content="Starlio">
+    <meta property="og:description" content="Amazing wallpaper straight from space!">
+    <meta property="og:image" content="/static/image/favicon.png">
+    <meta property="og:url" content="https://starlio.space">
+
+    <meta property="twitter:title" content="Starlio">
+    <meta property="twitter:description" content="Amazing wallpaper straight from space!">
+    <meta property="twitter:image" content="/static/image/favicon.png">
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link rel="canonical" href="https://starlio.space/">
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
+
+    <link rel="stylesheet" type="text/css" href="/static/css/wallpaper.css">
+</head>
+<body>
+    <div class="wallpaper">
+        <img alt="Spiral Aurora over Iceland"
+             src="https://apod.nasa.gov/apod/image/2301/RockyArchAurora_Pellegrini_1330.jpg">
+            <div class="wallpaper-text">
+                <div class="wallpaper-desc">
+                    <h1>Spiral Aurora over Iceland</h1>
+                    <p class="copyright">Copyright: Stefano Pellegrini</p>
+                    <p class="desc"> The scene may look like a fantasy, but it's really Iceland. The rock arch is named Gatklettur and located on the island's northwest coast. Some of the larger rocks in the foreground span a meter across. The fog over the rocks is really moving waves averaged over long exposures. The featured image is a composite of several foreground and background shots taken with the same camera and from the same location on the same night last November. The location was picked for its picturesque foreground, but the timing was planned for its colorful background: aurora. The spiral aurora, far behind the arch, was one of the brightest seen in the astrophotographer's life. The coiled pattern was fleeting, though, as auroral patterns waved and danced for hours during the cold night. Far in the background were the unchanging stars, with Earth's rotation causing them to appear to slowly circle the sky's northernmost point near Polaris.</p>
+                </div>
+                <div class="get-it-on">
+                    <a href='https://play.google.com/store/apps/details?id=ru.murzify.everynasa'>
+                        <img src='/static/image/get-it-on-gp.png' alt='Get it on Google Play'>
+                    </a>
+                    <a href="https://github.com/Starlio-app/Starlio">
+                        <img src="/static/image/get-it-on-github.png" alt="Get it on Github">
+                    </a>
+                </div>
+            </div>
+    </div>
+<script src="/static/script/wallpaperLoad.js"></script>
+</body>
+</html>
--- a/src/web/static/css/404.css
+++ b/src/web/static/css/404.css
@ -0,0 +1,25 @@
+body {
+    background: #131313;
+    color: white;
+}
+
+* {
+    line-height: 1.2;
+    margin: 0;
+}
+
+lottie-player {
+    margin: 0 auto;
+    width: 300px; height: 300px;
+}
+
+p {
+    font-family: 'Roboto',sans-serif;
+    text-align: center;
+    margin: 0.4% auto;
+    width: 300px;
+}
+
+a {
+    color: #98e9e8
+}
--- a/src/web/static/css/main.css
+++ b/src/web/static/css/main.css
@ -0,0 +1,211 @@
+body {
+    background-color: #2F3041;
+    color: white;
+}
+
+* {
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+a {
+    text-decoration: none;
+}
+
+#content p, .form-select, #download {
+    font-family: 'Roboto', sans-serif;
+}
+
+#devices {
+    display: block;
+    width: 90%;
+    height: 90%;
+}
+
+@media (min-width: 0) {
+    #devices {
+        margin: 65% auto;
+    }
+
+    #title {
+        font-size: 2.5em;
+        margin-top: -170%;
+    }
+
+    #subtitle {
+        margin-top: -5%;
+    }
+
+    #description, #subtitle, #title {
+        text-align: center;
+    }
+
+    #google-play, #github {
+        width: 45%;
+        height: 45%;
+    }
+
+    #google-play {
+        margin-top: 66%;
+        margin-left: 5%;
+    }
+}
+
+@media (min-width: 576px) {
+    #devices {
+        margin: 50% auto;
+    }
+
+    #title {
+        font-size: 3em;
+        margin-top: -140%;
+    }
+
+    #google-play, #github {
+        width: 37%;
+        height: 37%;
+    }
+
+    #get-it-on {
+        margin-top: -2%;
+        text-align: center;
+    }
+}
+
+@media (min-width: 768px) {
+    #devices {
+        margin: 33% auto;
+    }
+
+    #title {
+        font-size: 3.5em;
+        margin-top: -110%;
+    }
+
+    #subtitle {
+        font-size: 1.2em;
+    }
+
+    #description {
+        font-size: 1.5em;
+    }
+
+    #description {
+        width: 90%;
+        margin: 0 auto;
+    }
+
+    #google-play, #github {
+        width: 30%;
+        height: 30%;
+    }
+
+    #get-it-on {
+        margin-top: -6%;
+        text-align: center;
+    }
+}
+
+@media (min-width: 992px) {
+    #devices {
+        margin: 33% auto;
+    }
+
+    #title {
+        font-size: 4em;
+        margin-top: -106%;
+    }
+
+    #description {
+        width: 70%;
+        margin: 0 auto;
+        font-size: 1.3em;
+    }
+
+    #google-play, #github {
+        width: 25%;
+        height: 25%;
+    }
+
+    #get-it-on {
+        margin-top: -5%;
+        text-align: center;
+    }
+}
+
+@media (min-width: 1200px) {
+    #devices {
+        margin: 13% auto;
+    }
+
+    #title {
+        font-size: 4.5em;
+        margin-top: -85%;
+    }
+
+    #description {
+        width: 55%;
+        margin: 0 auto;
+    }
+
+    #subtitle {
+        font-size: 1.5em;
+    }
+
+    #description {
+        font-size: 1.5em;
+    }
+
+    #google-play, #github {
+        width: 25%;
+        height: 25%;
+    }
+
+    #devices {
+        margin-top: 25%;
+    }
+
+    #get-it-on {
+        margin-top: -3%;
+        text-align: center;
+    }
+}
+
+
+@media (min-width: 1400px) {
+    #devices {
+        width: 50%;
+        height: 50%;
+        margin: 10% 2%;
+    }
+
+    #title {
+        font-size: 4em;
+        margin-top: -37%;
+        margin-left: 50%;
+    }
+
+    #subtitle {
+        font-size: 2em;
+        margin-top: -2%;
+        margin-left: 50%;
+    }
+
+    #description {
+        font-size: 1.1em;
+        width: 30%;
+        margin: 2% 60%;
+    }
+
+    #google-play, #github {
+        width: 35%;
+        height: 35%;
+    }
+
+    #get-it-on {
+        margin-top: -35%;
+        margin-left: 47%;
+    }
+}
--- a/src/web/static/css/wallpaper.css
+++ b/src/web/static/css/wallpaper.css
@ -0,0 +1,125 @@
+body {
+    background: #153E3F;
+    color: white;
+    font-family: 'Roboto', serif;
+}
+
+@media (min-width: 0) {
+    .wallpaper img {
+        width: 90%;
+        border-radius: 8px;
+        margin: 0 auto 0 auto;
+        display: flex;
+    }
+
+    .wallpaper h1 {
+        text-align: center;
+    }
+
+    .copyright {
+        font-size: 110%;
+        width: 90%;
+    }
+
+    p {
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .desc {
+        font-size: 125%;
+        line-height: 32px;
+        width: 90%;
+    }
+
+    .wallpaper-text {
+      display: flex;
+      flex-direction: column-reverse;
+    }
+
+    .get-it-on {
+        display: flex;
+        margin: 5% auto 3% auto;
+    }
+
+}
+
+@media (min-width: 768px) {
+    .get-it-on {
+        display: flex;
+        margin: 5% auto 3% auto;
+    }
+
+    .desc {
+        font-size: 150%;
+        line-height: 39px;
+        width: 90%;
+    }
+
+    .copyright {
+        font-size: 125%;
+        width: 90%;
+    }
+}
+
+@media (min-width: 992px) {
+    .wallpaper img {
+        width: 65%;
+        border-radius: 8px;
+        margin: 0 auto 0 auto;
+        display: flex;
+    }
+
+    .desc {
+        font-size: 200%;
+        line-height: 45px;
+        width: 90%;
+    }
+
+    .copyright {
+        font-size: 150%;
+        width: 90%;
+    }
+
+    .wallpaper h1 {
+        text-align: center;
+        font-size: 250%;
+    }
+
+}
+
+@media (min-width: 1200px) {
+    .wallpaper img {
+        width: 40%;
+        border-radius: 8px;
+        float: left;
+    }
+
+    .wallpaper-text {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .desc {
+        font-size: 150%;
+        line-height: 36px;
+        width: 90%;
+    }
+
+    .copyright {
+        font-size: 120%;
+    }
+
+    .get-it-on {
+        display: block ;
+        width: 70%;
+        margin-left: 15%;
+        margin-right: auto;
+    }
+}
+
+@media (min-width: 1400px) {
+    .wallpaper img {
+        max-width: 27%;
+    }
+}
--- a/src/web/static/image/devices.png
+++ b/src/web/static/image/devices.png
--- a/src/web/static/image/favicon.png
+++ b/src/web/static/image/favicon.png
--- a/src/web/static/image/get-it-on-github.png
+++ b/src/web/static/image/get-it-on-github.png
--- a/src/web/static/image/get-it-on-gp.png
+++ b/src/web/static/image/get-it-on-gp.png
--- a/src/web/static/script/wallpaperLoad.js
+++ b/src/web/static/script/wallpaperLoad.js
@ -0,0 +1,38 @@
+function load(date) {
+    fetch(`https://api.starlio.space/wallpaper/${date}`).then(res => {
+        res.json().then(data => {
+            if (data.length === 0) return;
+
+            document.querySelector("div.wallpaper img").src = data.hdurl;
+            document.querySelector("div.wallpaper img").alt = data.title;
+            document.querySelector("div.wallpaper div.wallpaper-text div.wallpaper-desc h1").innerHTML = data.title;
+            document.querySelector(".copyright").innerHTML = data.copyright ? `Copyright: ${data.copyright}` : ''
+            document.querySelector(".desc").innerHTML = data.explanation;
+        });
+    });
+}
+
+function parseURL() {
+    let pathname = document.location.pathname;
+    pathname = pathname.slice(pathname.lastIndexOf('/')+1)
+
+    if (isNaN(new Date(pathname).getTime())) return window.location.replace("../404.html");
+    if (!isValidDate(pathname)) return window.location.replace("../404.html");
+
+    return pathname;
+}
+
+
+/* THX, bro <3
+ https://stackoverflow.com/a/35413963/20781634
+ */
+function isValidDate(dateString) {
+  var regEx = /^\d{4}-\d{2}-\d{2}$/;
+  if(!dateString.match(regEx)) return false;
+  var d = new Date(dateString);
+  var dNum = d.getTime();
+  if(!dNum && dNum !== 0) return false;
+  return d.toISOString().slice(0,10) === dateString;
+}
+
+load(parseURL());