design, libreevent page partially done

2024-09-03 08:48:31 +02:00
parent 242ec159a2
commit 28276a984f
5 changed files with 158 additions and 76 deletions
--- a/components/scroll/scroll.css
+++ b/components/scroll/scroll.css
@@ -12,8 +12,53 @@
    right: 5%;
    z-index: 7;
    width: 90%;
+    bottom: -200px;
+}
+
+#scroll-indicator.show-scroll {
+    animation: pop-in 0.5s;
    bottom: 5%;
-    display: none;
+}
+
+#scroll-indicator.hide-scroll {
+    animation: pop-out 0.5s;
+    bottom: -200px;
+}
+
+@keyframes pop-in {
+    0% {
+        bottom: -200px;
+    }
+
+    70% {
+        bottom: 6.5%;
+    }
+
+    80% {
+        bottom: 6%;
+    }
+
+    100% {
+        bottom: 5%;
+    }
+}
+
+@keyframes pop-out {
+    0% {
+        bottom: 5%;
+    }
+
+    25% {
+        bottom: 6.5%
+    }
+
+    35% {
+        bottom: 6%;
+    }
+
+    100% {
+        bottom: -200px;
+    }
 }

 .content {
--- a/components/scroll/scroll.js
+++ b/components/scroll/scroll.js
@@ -1,82 +1,84 @@
 window.scrollHint = ( maxScroll ) => {
-    $( () => {
-        let isShowing = false;
-        const el = document.getElementById( 'scroll-indicator' );
-        if ( !el ) {
-            throw new Error( 'There is no element with ID "scroll-indicator" present on DOM' );
-        }
-        el.innerHTML = `
-        <div class="scroll-wrapper">
-            <div class="scroll-container">
-                Scroll to discover more
-                <span class="material-symbols-outlined scroll-symbol">keyboard_double_arrow_down</span>
-            </div>
-        </div>`;
+    let isShowing = false;
+    const el = document.getElementById( 'scroll-indicator' );
+    if ( !el ) {
+        throw new Error( 'There is no element with ID "scroll-indicator" present on DOM' );
+    }
+    el.innerHTML = `
+    <div class="scroll-wrapper">
+        <div class="scroll-container">
+            Scroll to discover more
+            <span class="material-symbols-outlined scroll-symbol">keyboard_double_arrow_down</span>
+        </div>
+    </div>`;
    
-        el.onclick = () => {
-            if ( window.scrollY === 0 ) {
-                window.scrollTo( { 'top': window.innerHeight, 'behavior': 'smooth' } );
-            } else if ( window.scrollY % window.innerHeight === 0 ) {
-                window.scrollTo( { 'top': ( Math.ceil( window.scrollY / window.innerHeight ) + 1 ) * window.innerHeight, 'behavior': 'smooth' } );
-            } else {
-                window.scrollTo( { 'top': Math.ceil( window.scrollY / window.innerHeight ) * window.innerHeight, 'behavior': 'smooth' } );
-            }
-            $( '#scroll-indicator' ).fadeOut( 300 );
-            try {
-                clearTimeout( scrollCorrectionTimeout );
-            } catch ( _err ) {};
-            isShowing = false;
-            timeout = setTimeout( () => { showHint() }, 2500 );
+    el.onclick = () => {
+        if ( window.scrollY === 0 ) {
+            window.scrollTo( { 'top': window.innerHeight, 'behavior': 'smooth' } );
+        } else if ( window.scrollY % window.innerHeight === 0 ) {
+            window.scrollTo( { 'top': ( Math.ceil( window.scrollY / window.innerHeight ) + 1 ) * window.innerHeight, 'behavior': 'smooth' } );
+        } else {
+            window.scrollTo( { 'top': Math.ceil( window.scrollY / window.innerHeight ) * window.innerHeight, 'behavior': 'smooth' } );
        }
+        el.classList.remove( 'show-scroll' );
+        el.classList.add( 'hide-scroll' );
+        try {
+            clearTimeout( scrollCorrectionTimeout );
+        } catch ( _err ) {};
+        isShowing = false;
+        timeout = setTimeout( () => { showHint() }, 2500 );
+    }

-        document.onscrollend = () => {
-            scrollCorrectionTimeout = setTimeout( () => {
-                scrollCorrection();
-            }, 1000 );
-            timeout = setTimeout( () => { 
-                showHint();
-            }, 2500 );
-        }
-        document.onscroll = () => {
-            try {
-                clearTimeout( timeout );
-            } catch ( _e ) {}
-            try {
-                clearTimeout( scrollCorrectionTimeout );
-            } catch ( _err ) {};
-            if ( isShowing ) {
-                isShowing = false;
-                $( '#scroll-indicator' ).fadeOut( 300 );
-            }
-        };
-
-        window.onresize = () => {
+    document.onscrollend = () => {
+        scrollCorrectionTimeout = setTimeout( () => {
            scrollCorrection();
-            showHint();
-        }
-
-        let timeout = setTimeout( () => { 
+        }, 1000 );
+        timeout = setTimeout( () => { 
            showHint();
        }, 2500 );
-
-        let scrollCorrectionTimeout = 0;
-        
-        const showHint = () => {
-            if ( Math.round( window.scrollY / window.innerHeight ) < maxScroll && maxScroll > 0 ) {
-                $( '#scroll-indicator' ).fadeIn( 300 );
-                isShowing = true;
-            } else {
-                $( '#scroll-indicator' ).fadeOut( 300 );
-                isShowing = false;
-            }
-        }
-
-        const scrollCorrection = () => {
-            if ( Math.round( window.scrollY / window.innerHeight ) <= maxScroll && maxScroll > 0 && Math.floor( window.scrollY / window.innerHeight ) < maxScroll ) {
-                window.scrollTo( { top: Math.round( window.scrollY / window.innerHeight ) * window.innerHeight, behavior: 'smooth' } );
-            }
+    }
+    document.onscroll = () => {
+        try {
+            clearTimeout( timeout );
+        } catch ( _e ) {}
+        try {
+            clearTimeout( scrollCorrectionTimeout );
+        } catch ( _err ) {};
+        if ( isShowing ) {
+            isShowing = false;
+            el.classList.remove( 'show-scroll' );
+            el.classList.add( 'hide-scroll' );
        }
+    };

+    window.onresize = () => {
        scrollCorrection();
-    } );
+        showHint();
+    }
+
+    let timeout = setTimeout( () => { 
+        showHint();
+    }, 2500 );
+
+    let scrollCorrectionTimeout = 0;
+    
+    const showHint = () => {
+        if ( Math.round( window.scrollY / window.innerHeight ) < maxScroll && maxScroll > 0 ) {
+            el.classList.remove( 'hide-scroll' );
+            el.classList.add( 'show-scroll' );
+            isShowing = true;
+        } else {
+            el.classList.remove( 'show-scroll' );
+            el.classList.add( 'hide-scroll' );
+            isShowing = false;
+        }
+    }
+
+    const scrollCorrection = () => {
+        if ( Math.round( window.scrollY / window.innerHeight ) <= maxScroll && maxScroll > 0 && Math.floor( window.scrollY / window.innerHeight ) < maxScroll ) {
+            window.scrollTo( { top: Math.round( window.scrollY / window.innerHeight ) * window.innerHeight, behavior: 'smooth' } );
+        }
+    }
+
+    scrollCorrection();
 }
--- a/site/src/404.html
+++ b/site/src/404.html
@@ -6,6 +6,16 @@
        <title>404 - Page not found | janishutz.com</title>
        <link rel="stylesheet" href="/css/slider.css">
        <link rel="stylesheet" href="/css/style.css">
+        <style>
+            .content {
+                height: 80vh;
+            }
+
+            .content h1 {
+                font-size: 8rem;
+                margin: 0;
+            }
+        </style>
    </head>
    <body>
        <nav></nav>
@@ -13,6 +23,7 @@
        <div class="content">
            <h1>404</h1>
            <p>The page you are looking for was not found!</p>
+            <a href="/" class="button">Home</a>
        </div>


--- a/site/src/css/style.css
+++ b/site/src/css/style.css
@@ -26,6 +26,10 @@ body {

 .content {
    width: 80%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
 }

 .no-scroll {
@@ -38,4 +42,15 @@ body {
    color: white;
    text-decoration: none;
    border-radius: 10px;
+    transition: all 0.5s;
+}
+
+.button:hover {
+    border-radius: 5px;
+    background-color: rgb(2, 10, 27);
+}
+
+.project-logo {
+    width: 40%;
+    border-radius: 30px;
 }
--- a/site/src/projects/libreevent/index.html
+++ b/site/src/projects/libreevent/index.html
@@ -38,12 +38,12 @@
                </div>
                <div class="slider-element" style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-admin-eventsettings.jpg' );">
                    <h1>Create Events with Ease</h1>
-                    <p>Using the libreevent's powerful admin panel</p>
+                    <p>Using the libreǝvent's powerful admin panel</p>
                    <a href="https://libreevent.janishutz.com/docs/admin-panel/" class="button">Docs</a>
                </div>
                <div class="slider-element" style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-admin-seatplan-editor.jpg' );">
                    <h1>Create seat plans</h1>
-                    <p>libreevent's seat plan editor is designed to make this as easy as possible</p>
+                    <p>libreǝvent's seat plan editor is designed to make this as easy as possible</p>
                    <a href="https://libreevent.janishutz.com/docs/admin-panel/seatplan-editor" class="button">Docs</a>
                </div>
                <div class="slider-element" style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-all-events.jpg' );">
@@ -59,13 +59,22 @@
                <div class="slider-element" style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-ticket-sel.jpg' );">
                    <h1>Open Source Project</h1>
                    <p>Free Software, developed by Janis Hutz & the community</p>
-                    <a href="https://libreevent.janishutz.com" class="button">Learn more about libreevent</a>
+                    <a href="https://libreevent.janishutz.com" class="button">Learn more about libreǝvent</a>
                </div>
            </div>
            <div class="slider-controls slider-control-left" onclick="sliderControl( 'previous' )">&#11164;</div>
            <div class="slider-controls slider-control-right" onclick="sliderControl( 'next' )">&#11166;</div>
        </div>

+        <div class="content">
+            <!-- TODO: Size logo better -->
+            <img src="https://libreevent.janishutz.com/assets/logo.png" alt="libreevent logo" class="project-logo">
+            <h1>libreǝvent</h1>
+            <p>Free & Open Source Event Management & Ticketing Solution</p>
+
+            
+        </div>
+
        <div id="yt-embed"></div>