Merge pull request #269 from vplan-fr/main

Updating Prod

.github/workflows/main.yml

@@ -19,7 +19,7 @@ jobs:
         script: |
           cd programming/VPlan_FR/
           
-          kill -INT (lsof -t nohup.out)  || true
+          # kill -INT (lsof -t nohup.out)  || true
           
           git checkout production
           git pull
@@ -34,8 +34,8 @@ jobs:
           sudo service apache2 restart
 
           cd ..
-          rm nohup.out || true
-          nohup venv/bin/python3 -m backend.load_plans --ignore-exceptions --never-raise-out-of-proxies -l DEBUG - i 300 > nohup.out 2> nohup.err < /dev/null &
+          # rm nohup.out || true
+          # nohup venv/bin/python3 -m backend.load_plans --ignore-exceptions --never-raise-out-of-proxies -l DEBUG - i 300 > nohup.out 2> nohup.err < /dev/null &
 
-          disown (lsof -t nohup.out) || true
+          # disown (lsof -t nohup.out) || true
           

.gitignore

@@ -163,6 +163,7 @@ cython_debug/
 
 client/node_modules
 backend/schools/private_data
+client/public/base_static/teachers
 creds.json
 proxies.json
 

README.md

@@ -4,7 +4,7 @@
 
 # vplan.fr
 
-This repository contains the code of the website [vplan.fr](https://vplan.fr/), which is free to use and already supports many schools in (eastern) Germany! If you want to contribute to the project, [contact us](https://vplan.fr/#contact), [submit an issue](https://github.com/ArtrenH/VPlan_FR/issues/new) or [fork this repo](https://github.com/ArtrenH/VPlan_FR/fork) and create a pull request for changes.
+This repository contains the code of the website [vplan.fr](https://vplan.fr/), which is free to use and already supports many schools in (eastern) Germany! If you want to contribute to the project, [contact us](https://vplan.fr/#contact), [submit an issue](https://github.com/vplan-fr/VPlan_FR/issues/new) or [fork this repo](https://github.com/vplan-fr/VPlan_FR/fork) and create a pull request for changes.
 
 ![Preview Image of example school](readme_preview.png)
 
@@ -66,4 +66,4 @@ and in another terminal, the npm dev server using:
 - `cd client`
 - `npm run dev`
 
-If you have any more questions or need help with the setup, don't hesitate to [contact us](https://vplan.fr/#contact). :)
+If you have any more questions or need help with the setup, don't hesitate to [contact us](https://vplan.fr/#contact). :) 

client/public/index.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <!-- Website Info-Tags -->
-    <meta name="author" content="https://github.com/ArtrenH/VPlan_FR/graphs/contributors" />
+    <meta name="author" content="https://github.com/vplan-fr/VPlan_FR/graphs/contributors" />
     <meta http-equiv="Pragma" content="no-cache" />
     <meta name="robots" content="NOINDEX,NOFOLLOW" />
     <meta http-equiv="content-Language" content="de" />

client/src/App.svelte

@@ -2,6 +2,8 @@
     import Plan from "./components/Plan.svelte";
     import Weekplan from "./components/Weekplan.svelte";
     import Authentication from "./components/Authentication.svelte";
+    import LandingPage from "./components/LandingPage.svelte";
+    import LandingPageNavbar from "./components/LandingPageNavbar.svelte";
 	import Toast from './base_components/Toast.svelte';
     import Navbar from "./components/Navbar.svelte";
     import Settings from "./components/Settings.svelte";
@@ -24,6 +26,8 @@
     import {animateScroll} from 'svelte-scrollto-element';
     import Button from "./base_components/Button.svelte";
     import { fade } from "svelte/transition";
+    import FancyBackground from "./components/FancyBackground.svelte";
+    import NotFound from "./components/NotFound.svelte";
 
     const pad = (n, s = 2) => (`${new Array(s).fill(0)}${n}`).slice(-s);
     let school_num;
@@ -356,7 +360,6 @@
             history.go(1);
             return;
         }
-        if(new_location === "") {new_location = "plan";}
         navigate_page(new_location);
         if (new_location.startsWith("plan")) {
             refresh_plan_vars();
@@ -365,7 +368,6 @@
 
     let new_location = location.hash.slice(1);
     if(!((new_location === "login" || new_location === "register") && $logged_in)) {
-        if(new_location === "") {new_location = "plan";}
         if(new_location === "favorite") {
             load_favorite = true;
             new_location = "plan";
@@ -380,6 +382,12 @@
 
 {#if $logged_in}
     <Navbar />
+{:else if $current_page !== "login" && $current_page !== "register"}
+    <LandingPageNavbar />
+{/if}
+
+{#if $current_page === ""}
+    <FancyBackground />
 {/if}
 
 <Settings />
@@ -393,6 +401,8 @@
             <AboutUs />
         {:else if $current_page === "impressum"}
             <Impressum />
+        {:else if $current_page === ""}
+            <LandingPage></LandingPage>
         {:else if $logged_in}
             {#if $current_page.substring(0, 4) === "plan" || $current_page.substring(0, 8) === "weekplan"}
                 <h1 class="responsive-heading">{emoji} {greeting}</h1>
@@ -455,27 +465,33 @@
             {:else if $current_page === "school_manager"}
                 <SchoolManager bind:school_num bind:date bind:plan_type bind:plan_value />
             {:else if $current_page === "favorite"}
-                <span class="responsive-text">Lade deine Favoriten...</span>
+                <div style="display: flex; flex-direction: column; gap: 2rem; width: auto; min-height: 50vh; justify-content: center; align-items: center;">
+                    <div class="rotating"><span class="material-symbols-outlined fancy-text" style="font-size: max(3rem, 5vw)">sync</span></div>
+                    <span class="responsive-text" style="text-align: center;">Lade deine Favoriten...</span>
+                </div>
             {:else if $current_page === "favorites"}
                 <Favorites />
             {:else if $current_page === "pwa_install"}
                 <PwaInstallHelper />
             {:else if $current_page === "stats"}
                 <Stats />
             {:else}
-                <span class="responsive-text">Seite nicht gefunden!</span>
+                <NotFound />
             {/if}
-        {:else}
+        {:else if $current_page === "login" || $current_page === "register"}
             <Authentication></Authentication>
+        {:else}
+            <NotFound />
         {/if}
     </main>
     <Toast />
 </div>
 <footer class:padding={footer_padding}>
     <Dropdown let:toggle small={true} transform_origin_x="100%" flipped={true}>
         <button slot="toggle_button" on:click={toggle}><span class="material-symbols-outlined">menu</span></button>
-        
+
         {#if !$logged_in}<button on:click={() => {navigate_page("login")}}>Login</button>{/if}
+        <button on:click={() => {navigate_page("")}}>Startseite</button>
         <button on:click={() => {navigate_page("impressum")}}>Impressum</button>
         <button on:click={() => {navigate_page("contact")}}>Kontakt</button>
         <button on:click={() => {navigate_page("about_us")}}>Über Uns</button>
@@ -484,6 +500,44 @@
 </footer>
 
 <style lang="scss">
+  .rotating {
+    animation: rotate 2s linear infinite;
+  }
+  @keyframes rotate {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(-360deg);
+    }
+  }
+  .fancy-text {
+    background: linear-gradient(310deg, #cc33ff, #3358ff, #33bbff);
+    color: transparent;
+    -webkit-background-clip: text;
+    background-clip: text;
+    background-size: 600% 600%;
+
+    -webkit-animation: colorScroll 3s ease infinite;
+    -moz-animation: colorScroll 3s ease infinite;
+    animation: colorScroll 3s ease infinite;
+  }
+
+  @-webkit-keyframes colorScroll {
+    0%{background-position:0% 50%}
+    50%{background-position:100% 50%}
+    100%{background-position:0% 50%}
+  }
+  @-moz-keyframes colorScroll {
+    0%{background-position:0% 50%}
+    50%{background-position:100% 50%}
+    100%{background-position:0% 50%}
+  }
+  @keyframes colorScroll {
+    0%{background-position:0% 50%}
+    50%{background-position:100% 50%}
+    100%{background-position:0% 50%}
+  }
     .plan-status {
         pointer-events: none;
         position: absolute;
@@ -504,11 +558,11 @@
             &[data-plan-type=cached] {
                 color: rgba(255, 255, 255, 0.5);
             }
-            
+
             &[data-plan-type=network_cached] {
                 color: #00db00;
             }
-            
+
             &[data-plan-type=network_uncached] {
                 color: #dbae00;
             }
@@ -523,6 +577,8 @@
     }
 
     #page-container {
+        max-width: 100%;
+        overflow-x: hidden;
         position: relative;
         min-height: calc(100vh - 56px);
         padding-bottom: 15px;

client/src/components/AboutUs.svelte

@@ -34,7 +34,7 @@
         <p class="responsive-text">
             Man kann uns mit unserem <button on:click={() => navigate_page("contact")} class="link-button" type="button">Kontaktformular</button> oder per Mail unter <a href="mailto:[email protected]">[email protected]</a> erreichen.
             <br>
-            Hier ist außerdem unser <a href="https://github.com/ArtrenH/VPlan_FR">Github-Repository</a>.
+            Hier ist außerdem unser <a href="https://github.com/vplan-fr/VPlan_FR">Github-Repository</a>.
         </p>
     </div>
 </main>

client/src/components/FancyBackground.svelte

@@ -0,0 +1,85 @@
+<script>
+    let blob;
+    let clientX = 0;
+    let clientY = 0;
+    function moveBlob(event) {
+        if(window.screen.width < 900) {return;}
+        clientX = event["clientX"];
+        clientY = event["clientY"];
+
+        blob.animate({
+            left: `${clientX + document.documentElement.scrollLeft}px`,
+            top: `${clientY + document.documentElement.scrollTop}px`
+        }, { duration: 2000, fill: "forwards" });
+    }
+    function moveScrollBlob(event) {
+        if(window.screen.width >= 900) {return;}
+        blob.animate({
+            left: `${window.screen.width/2 + document.documentElement.scrollLeft}px`,
+            top: `${window.screen.height/2 + document.documentElement.scrollTop}px`
+        }, { duration: 6000, fill: "forwards" });
+    }
+</script>
+
+<svelte:body on:mousemove={moveBlob}></svelte:body>
+<svelte:window on:scroll={moveScrollBlob}></svelte:window>
+<svelte:head>
+    <style>
+        body {
+            position: relative;
+        }
+    </style>
+</svelte:head>
+
+<div id="bg"></div>
+
+<div id="blob-container">
+    <div id="blob" bind:this={blob}></div>
+</div>
+
+<style lang="scss">
+    #bg {
+        height: 100%;
+        width: 100%;
+        position: absolute;
+        z-index: -1;
+        background-image:  radial-gradient(#666666 0.5px, transparent 0.5px), radial-gradient(#666666 0.5px, transparent 0.5px);
+        background-repeat: repeat;
+        background-size: 20px 20px;
+        background-position: 0 0, 10px 10px;
+    }
+
+    #blob {
+        height: 34vmax;
+        aspect-ratio: 1;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        translate: -50% -50%;
+        border-radius: 50%;
+        background: white linear-gradient(to right, var(--accent-color), blue);
+        animation: rotate 20s infinite;
+        opacity: 0.6;
+        filter:blur(3vmax);
+    }
+    #blob-container {
+      height: 100%;
+      width: 100%;
+      position: absolute;
+      z-index: -2;
+      overflow: hidden;
+    }
+    @keyframes rotateBlob {
+        from {
+            rotate: 0deg;
+        }
+
+        50% {
+            scale: 1 1.5;
+        }
+
+        to {
+            rotate: 360deg;
+        }
+    }
+</style>