updates to website

src/server/ui/html/index.html

@@ -5,6 +5,8 @@
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>myevent</title>
+        <script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
+        <script defer src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
         <!-- We are using inline styling to simplify the removal of this page -->
         <style>
             body {
@@ -59,19 +61,30 @@
             <img src="/assets/logo.png" alt="myevent-logo" class="logo">
             <div class="lang presented" id="en">
                 <h1>Welcome to myevent!</h1>
-                <p>Thank you for installing and using myevent! Let's get started by setting it up! First plan of action is to log in to the admin panel where you can replace this page here with your own landing page!</p>
+                <!-- <p>Thank you for installing and using myevent! Let's get started by setting it up! First plan of action is to log in to the admin panel where you can replace this page here with your own landing page!</p> -->
                 <a href="/admin/login" class="button">To the admin panel</a>
             </div>
             <div class="lang" id="de">
                 <h1>Willkommen zu myevent!</h1>
-                <p>Vielen Dank für die Installation und Nutzung von myevent! Beginnen wir mit dem Aufsetzen! Der erste Schritt ist, sich ins Admin-Panel einzuloggen um die Seite hier mit deiner eigenen Seite zu ersetzen!</p>
+                <!-- <p>Vielen Dank für die Installation und Nutzung von myevent! Beginnen wir mit dem Aufsetzen! Der erste Schritt ist, sich ins Admin-Panel einzuloggen um die Seite hier mit deiner eigenen Seite zu ersetzen!</p> -->
-                <a href="/admin/login" class="button">Zum Admin-Panel</a>
+                <a href="/admin/login?lang=de" class="button">Zum Admin-Panel</a>
             </div>
         </div>
         <script>
-            function switchPresented ( n ) {
+            let lang = [ 'en', 'de' ];
-                
+            let pos = 0;
+            function switchPresented () {
+                console.log( 'updating' );
+                $( `#${ lang[ pos ] }` ).removeClass( 'presented' );
+                if ( pos + 2 > lang.length ) {
+                    pos = 0;
+                } else {
+                    pos += 1;
+                }
+                $( `#${ lang[ pos ] }` ).addClass( 'presented' );
             }
+
+            setInterval( switchPresented, 5000 );
         </script>
     </body>
 </html>

website/dist/css/style.css

@@ -63,6 +63,13 @@ body {
     border-radius: 30px;
     cursor: pointer;
     margin: 1.5%;
+    transition: 1s;
+}
+
+.button:hover {
+    transition: 0.2s;
+    border-radius: 5px;
+    background-color: rgb(60, 85, 140);
 }
 
 #nav {

website/dist/index.html

@@ -21,7 +21,7 @@
         </div>
         <div class="content">
             <h2>What is myevent?</h2>
-            <p>myevent is a free and fully open source self-hosted event management solution that you can use to sell tickets for your next event. It is written in Node.js, JavaScript, TypeScript, HTML and CSS. It uses Vue.js for the ticket purchasing system and features both an iOS and Android App you can download and use entirely for free. If you like this project, please consider giving it a star on GitHub and donating to help fund development of this project!</p>
+            <p>myevent is a free and fully open source self-hosted event management solution that you can use to sell tickets for your next event. It is written in Node.js, JavaScript, TypeScript, HTML and CSS. It uses Vue.js for the ticket purchasing system and features both an iOS and Android App you can download and use entirely for free. If you like this project, please consider giving it a star on <a href="https://github.com/simplePCBuilding/myevent">GitHub</a> and donating to help fund development of this project!</p>
             <div class="image-group">
                 <a href="https://commons.wikimedia.org/wiki/File:Node.js_logo.svg"><img src="/assets/Node.js_logo.svg" class="image"></a>
                 <a href="https://commons.wikimedia.org/wiki/File:Node.js_logo.svg"><img src="/assets/htmlCSSJS.png" class="image"></a>

website/dist/js/index.js

@@ -10,14 +10,4 @@
 
 $( document ).ready( function () {
     $( '#nav' ).load( '/nav.html' );
-
-    $( '.button' ).mouseenter( function () { 
-        $( this ).stop();
-        $( this ).animate( { 'border-radius': '5px', 'background-color': 'rgb(60, 85, 140)' }, 200 );
-    } );
-
-    $( '.button' ).mouseleave( function () { 
-        $( this ).stop();
-        $( this ).animate( { 'border-radius': '30px', 'background-color': 'rgb(24, 43, 61)' }, 400 );
-    } );
 } );

website/dist/nav.html

@@ -27,16 +27,19 @@
         </div>
         <script>
             $( document ).ready( function () {
+                if ( window.location.pathname.slice( 1, window.location.pathname.length - 1 ) != '' ) {
+                    $( '#' + window.location.pathname.slice( 1, window.location.pathname.length - 1 ) ).animate( { "color":"rgba(184, 214, 240, 1)", "background-color":"rgba(0, 0, 175, 1)" }, 200 );
+                };
                 $('.navitem' ).mouseenter( function () {
-                    if ( window.location.pathname.slice( 1, window.location.pathname.length ) == this.id ) {} else {
+                    if ( window.location.pathname.slice( 1, window.location.pathname.length - 1 ) == this.id ) {} else {
                         $( this ).stop();
                         $( this ).animate( { "color":"rgba(184, 214, 240, 1)", "background-color":"rgba(0, 0, 175, 1)" }, 200 );
                     };
                 });
                 $( '.navitem' ).mouseleave( function () {
-                    if ( window.location.pathname.slice( 1, window.location.pathname.length ) == this.id ) {} else {
+                    if ( window.location.pathname.slice( 1, window.location.pathname.length - 1 ) == this.id ) {} else {
                         $( this ).stop();
-                        $( this ).animate( { "color":"black", "background-color":"rgba(0, 0, 0, 0)" }, 200 );
+                        $( this ).animate( { "color":"black", "background-color":"rgba(0, 0, 0, 0)" }, 600 );
                     };
                 } );
             } );