More pages, some finished

site/src/css/analytics.css

@@ -23,6 +23,7 @@
     bottom: 5px;
 }
 
+/* Close button  */
 .analytics-button {
     color: var( --color-text-primary );
     position: absolute;
@@ -38,25 +39,30 @@
     color: var( --color-text-primary ) !important;
 }
 
+/* The small icon on the side that is shown when main panel is closed */
 .analytics-notice .small-symbol {
     position: fixed;
-    bottom: -3px;
+    bottom: 20px;
+    right: 0px;
     border-top-left-radius: 10px;
-    border-top-right-radius: 10px;
+    border-bottom-left-radius: 10px;
     background-color: var( --color-background-analytics );
     border: solid black 1px;
     cursor: pointer;
     transition: all 1s;
-    padding-left: 20px;
+    padding-left: 5px;
-    padding-right: 20px;
+    padding-right: 10px;
-    padding-bottom: 5px;
+    padding-bottom: 20px;
-    right: 10px;
+    padding-top: 20px;
     transition-delay: 2s;
     z-index: 10001;
-    font-size: 1.5rem;
+}
+
+.analytics-notice .small-symbol .material-symbols-outlined {
+    font-size: 1.75rem;
 }
 
 .analytics-notice.show .small-symbol {
-    bottom: -100px;
+    right: -100px;
     transition-delay: 0s;
 }

site/src/css/style.css

@@ -10,10 +10,12 @@
 :root.light {
     --color-text-primary: black;
     --color-text-accent: #303030;
-    --color-link: rgb(10, 10, 100);
+    --color-link: #1e24a1ff;
     --color-background-primary: white;
     --color-background-accent: rgb(226, 226, 226);
     --color-background-analytics: rgb(193, 193, 223);
+    --color-background-yt-embed: rgb(173, 173, 173);
+    --color-slider-info: rgba(255, 255, 255, 0.85);
     --color-button: rgb(21, 43, 92);
     --color-button-hover: rgb(2, 10, 27);
 }
@@ -21,10 +23,12 @@
 :root.dark {
     --color-text-primary: white;
     --color-text-accent: #b5b5b5;
-    --color-link: rgb(0, 70, 150);
+    --color-link: #005aacff;
     --color-background-primary: #151515;
     --color-background-accent: black;
     --color-background-analytics: #303030;
+    --color-background-yt-embed: #404040;
+    --color-slider-info: rgba(0, 0, 0, 0.85);
     --color-button: rgb(20, 150, 200);
     --color-button-hover: rgb(15, 125, 175);
 }
@@ -33,10 +37,12 @@
     :root {
         --color-text-primary: white;
         --color-text-accent: #b5b5b5;
-        --color-link: rgb(0, 70, 150);
+        --color-link: #005aacff;
         --color-background-primary: #151515;
         --color-background-accent: black;
         --color-background-analytics: #303030;
+        --color-background-yt-embed: #404040;
+        --color-slider-info: rgba(0, 0, 0, 0.85);
         --color-button: rgb(20, 150, 200);
         --color-button-hover: rgb(15, 125, 175);
     }
@@ -63,6 +69,10 @@ body.loaded {
     transition: color 0.5s, background-color 0.5s;
 }
 
+a {
+    color: var(--color-link);
+}
+
 .material-symbols-outlined {
     font-variation-settings:
         'FILL' 0,
@@ -121,7 +131,7 @@ body.loaded {
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    background-color: rgba(0, 0, 0, 0.2);
+    background-color: var(--color-slider-info);
     padding: 20px;
     border-radius: 20px;
     max-width: 70%;
@@ -132,7 +142,14 @@ body.loaded {
     padding: 0.25rem 0.5rem;
 }
 
+.offset-button {
+    position: absolute;
+    bottom: 5%;
+}
 
+.yt-embed {
+    background-color: var(--color-background-yt-embed) !important;
+}
 
 .pullquote-lines {
     border-color: var(--color-text-primary);
@@ -165,6 +182,11 @@ body.loaded {
     border-radius: 20px;
 }
 
+.project-logo.small-logo {
+    width: 25%;
+    height: auto;
+}
+
 .inline-elements {
     display: flex;
     flex-direction: column;

site/src/footer.html

@@ -35,6 +35,7 @@
             <a href="/legal/tos">Terms of Service</a>
             <a href="/legal/returns">Return policy</a>
             <a href="/support/support-status">Support Status</a>
+            <div onclick="showAnalytics()" style="cursor: pointer;">Analytics</div>
         </div>
 
         <div class="analytics-notice" id="analytics">

site/src/index.html

@@ -59,7 +59,6 @@
         <span class="slider-controls slider-control-right material-symbols-outlined"
             onclick="sliderControl( 'next' )">arrow_forward
     </div>
-    </div>
 
     <div class="content">
         <hr class="divider">

site/src/projects/accounts/index.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <!-- CSS -->
+    <link rel="stylesheet" href="https://static.janishutz.com/css/slider.css">
+    <link rel="stylesheet" href="/css/style.css">
+    <link rel="stylesheet" href="/css/side-by-side.css">
+
+    <!-- SEO -->
+    <title>MusicPlayer - Fully browser based with built-in remote playlist display with animations | janishutz.com
+    </title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=7" />
+    <meta name="keywords" content="browser-based, music player, remote display" />
+    <meta name="description"
+        content="Want to show off what the currently playing song is for your next party? MusicPlayer has a lot of party-oriented features built in!" />
+    <meta name="og:title"
+        content="MusicPlayer - Fully browser based with built-in remote playlist display with animations" />
+    <meta name="og:description"
+        content="Want to show off what the currently playing song is for your next party? MusicPlayer has a lot of party-oriented features built in!" />
+    <meta name="og:image" content="https://static.janishutz.com/seo/projects/musicplayer.jpg" />
+    <meta name="og:type" content="website" />
+    <meta name="og:url" content="https://janishutz.com/projects/musicplayer" />
+    <meta name="og:locale" content="en_GB" />
+    <meta property="twitter:card" content="summary_large_image">
+    <meta name="theme-color" content="#152b5c">
+</head>
+
+<body>
+    <nav></nav>
+
+    <div class="content">
+        <img src="https://static.janishutz.com/logo.jpg" alt="janishutz.com logo"
+            class="project-logo">
+        <h1>Accounts</h1>
+
+        <a href="/projects" class="back-button">&leftarrow; All projects</a>
+        <p>Log in with just one account securely to all my services. No need for separate accounts for each service.</p>
+        <a href="https://account.janishutz.com" target="_blank" class="button">To Accounts</a>
+        <p style="color: red; font-style: italic; font-weight: bold;">This page is still under construction, as my accounts services are being reworked</p>
+    </div>
+
+
+    <footer></footer>
+</body>
+
+</html>

site/src/projects/index.html

@@ -29,11 +29,6 @@
             height: 40vw;
         }
 
-        .small-logo {
-            width: 25%;
-            height: auto;
-        }
-
         .side-by-side {
             margin-top: 20px;
         }
@@ -47,28 +42,27 @@
         <div class="slider-container">
             <div class="slider-element current"
                 style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-title.jpg' );">
-                <a href="/projects/libreevent" class="button" style="margin-top: 30%;">libreǝvent</a>
+                <a href="/projects/libreevent" class="button offset-button">libreǝvent</a>
             </div>
-            <div class="slider-element current"
+            <div class="slider-element"
                 style="background-image: url( 'https://static.janishutz.com/assets/projects/conductorcalc-title.jpg' );">
-                <a href="https://conductorcalc.com" class="button" style="margin-top: 30%;">ConductorCalc</a>
+                <a href="https://conductorcalc.com" class="button offset-button">ConductorCalc</a>
             </div>
             <div class="slider-element"
                 style="background-image: url( 'https://static.janishutz.com/assets/projects/storagemanager-title.jpg' );">
-                <a href="/projects/storagemanager" class="button" style="margin-top: 30%;">StorageManager</a>
+                <a href="/projects/storagemanager" class="button offset-button">StorageManager</a>
             </div>
             <div class="slider-element"
                 style="background-image: url( 'https://static.janishutz.com/assets/projects/qrscanner-title.jpg' );">
-                <a href="/projects/qrscanner" class="button" style="margin-top: 30%;">QR &amp; Barcode Insight</a>
+                <a href="/projects/qrscanner" class="button offset-button">QR &amp; Barcode Insight</a>
             </div>
-            <!-- TODO: Make sure that margins are okay -->
             <div class="slider-element"
                 style="background-image: url( 'https://static.janishutz.com/assets/projects/store-title.jpg' );">
-                <a href="/projects/store" class="button" style="margin-top: 30%;">Store</a>
+                <a href="/projects/store" class="button offset-button">Store</a>
             </div>
             <div class="slider-element"
                 style="background-image: url( 'https://static.janishutz.com/assets/projects/musicplayer-title.jpg' );">
-                <a href="/projects/musicplayer" class="button" style="margin-top: 30%;">MusicPlayer</a>
+                <a href="/projects/musicplayer" class="button offset-button">MusicPlayer</a>
             </div>
         </div>
         <span class="slider-controls slider-control-left material-symbols-outlined"
@@ -190,7 +184,7 @@
                 <a href="/projects/accounts" class="button">Details</a>
             </div>
             <div class="side-by-side-item right">
-                <img src="https://static.janishutz.com/assets/logos/lsh.jpg" alt="Language School Hossegor logo" class="project-logo small-logo">
+                <img src="https://static.janishutz.com/assets/logos/lsh.png" alt="Language School Hossegor logo" class="project-logo small-logo">
                 <h3>Language School Hossegor Booking System</h3>
                 <p>A fully featured booking system for a French language school, written from scratch specifically for
                     their purposes with a highly customizable booking process.</p>

site/src/projects/languageschoolhossegor-booking/index.html

@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <!-- CSS -->
+    <link rel="stylesheet" href="https://static.janishutz.com/css/slider.css">
+    <link rel="stylesheet" href="/css/style.css">
+    <link rel="stylesheet" href="/css/side-by-side.css">
+
+    <!-- SEO -->
+    <title>MusicPlayer - Fully browser based with built-in remote playlist display with animations | janishutz.com
+    </title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=7" />
+    <meta name="keywords" content="software store, donations" />
+    <meta name="description"
+        content="libreevent is a free and open source event management solution that enables you to sell tickets for your next event, including a seat plan and many more settings." />
+    <meta name="og:title"
+        content="MusicPlayer - Fully browser based with built-in remote playlist display with animations" />
+    <meta name="og:description"
+        content="libreevent is a free and open source event management solution that enables you to sell tickets for your next event, including a seat plan and many more settings." />
+    <meta name="og:image" content="https://static.janishutz.com/seo/projects/store.jpg" />
+    <meta name="og:type" content="website" />
+    <meta name="og:url" content="https://janishutz.com/projects/store" />
+    <meta name="og:locale" content="en_GB" />
+    <meta property="twitter:card" content="summary_large_image">
+    <meta name="theme-color" content="#152b5c">
+</head>
+
+<body>
+    <nav></nav>
+
+    <div class="slider">
+        <div class="slider-container">
+            <div class="slider-element current"
+                style="background-image: url( 'https://store-cdn.janishutz.com/assets/musicplayer/musicplayer-sources.jpg' );">
+                <div class="slider-info">
+                    <h2>Sources</h2>
+                    <p>Play your local music or use Apple Music (Apple Music Subscription required)</p>
+                    <a href="https://music.janishutz.com/" class="button">Website</a>
+                </div>
+            </div>
+            <div class="slider-element"
+                style="background-image: url( 'https://store-cdn.janishutz.com/assets/musicplayer/musicplayer-fancy.jpg' );">
+                <div class="slider-info">
+                    <h2>Shared Playlists</h2>
+                    <p>Seamlessly sync and display what you are currently playing on other devices. Perfect for your
+                        next party!</p>
+                    <a href="https://music.janishutz.com/get" class="button">Get it today</a>
+                </div>
+            </div>
+            <div class="slider-element"
+                style="background-image: url( 'https://store-cdn.janishutz.com/assets/musicplayer/musicplayer-player.jpg' );">
+                <div class="slider-info">
+                    <h2>Browser based</h2>
+                    <p>No need to install anything. Runs on any platform</p>
+                    <a href="https://music.janishutz.com/get" class="button">Get it today</a>
+                </div>
+            </div>
+            <div class="slider-element"
+                style="background-image: url( 'https://static.janishutz.com/assets/musicplayer/musicplayer-main.jpg' );">
+                <div class="slider-info">
+                    <h2>Hosted for you</h2>
+                    <p>Need the convenience of an already set up version?</p>
+                    <a href="https://music.janishutz.com/" class="button">Website</a>
+                </div>
+            </div>
+            <div class="slider-element"
+                style="background-image: url( 'https://static.janishutz.com/assets/musicplayer/musicplayer-code.jpg' );">
+                <div class="slider-info">
+                    <h2>Open Source</h2>
+                    <p>Developed by Janis Hutz &amp; the community</p>
+                    <a href="https://github.com/janishutz/MusicPlayerV2" class="button">GitHub</a>
+                </div>
+            </div>
+            <div class="slider-element"
+                style="background-image: url( 'https://static.janishutz.com/assets/musicplayer/musicplayer-home.jpg' );">
+                <div class="slider-info">
+                    <h2>Self-Hostable</h2>
+                    <p>Host it yourself. You need to be member of the Apple Developer Program for access to the Apple
+                        Music API</p>
+                    <a href="https://github.com/janishutz/MusicPlayerV2/wiki/Installation" class="button">Docs</a>
+                </div>
+            </div>
+        </div>
+        <span class="slider-controls slider-control-left material-symbols-outlined"
+            onclick="sliderControl( 'previous' )">arrow_back</span>
+        <span class="slider-controls slider-control-right material-symbols-outlined"
+            onclick="sliderControl( 'next' )">arrow_forward
+    </div>
+
+    <div class="content">
+        <img src="https://github.com/janishutz/MusicPlayerV2/raw/master/assets/logo.png" alt="MusicPlayer logo"
+            class="project-logo">
+        <h1>Music&shy;Player</h1>
+
+        <a href="/projects" class="back-button">&leftarrow; All projects</a>
+        <p>Play music fully in the browser and remotely share what you are currently playing. Perfect for your next
+            party!</p>
+        <a href="https://music.janishutz.com" target="_blank" class="button">Get it today</a>
+
+        <hr class="divider">
+
+        <h2>Features</h2>
+        <div class="side-by-side">
+            <div class="side-by-side-item left">
+                <h3>Remote Playback Status</h3>
+                <p>Remotely display what is currently playing via a link you can share. There is an additional link that
+                    can be used to display the same information, but with animations that sync to the music (Microphone
+                    access required on the target device and animations will sync up to the sound audible on that
+                    device)</p>
+            </div>
+            <div class="side-by-side-item right">
+                <h3>Two Sources</h3>
+                <p>You can choose between two sources for audio: Your local disk or Apple Music and you can mix the two
+                    in a single playlist. Cover Art and song information is fetched from the Apple Music API
+                    automatically if you are using the hosted version or have configured the Apple Music API
+                    authentication tokens</p>
+            </div>
+        </div>
+        <div class="side-by-side">
+            <div class="side-by-side-item left">
+                <h3>Fully Featured Player</h3>
+                <p>All the features you'd expect from a Music Player are present in MusicPlayer. Shuffle, Repeat,
+                    Playlist support, adding more songs to queue, just to name a few, are all present.</p>
+            </div>
+            <div class="side-by-side-item right">
+                <h3>Browser based</h3>
+                <p>There is no need to install anything. MusicPlayer runs fully in your browser and is thus cross
+                    platform. You could even run it off of your phone, if you wish!</p>
+            </div>
+        </div>
+
+        <a href="https://music.janishutz.com" target="_blank" class="button" style="margin-top: 50px;">Get it today</a>
+    </div>
+
+
+    <footer></footer>
+
+
+    <script src="https://static.janishutz.com/js/slider.js"></script>
+    <script>
+        activateSlider(7500);
+    </script>
+</body>
+
+</html>

site/src/projects/libreevent/index.html

@@ -46,45 +46,57 @@
         <div class="slider-container">
             <div class="slider-element current"
                 style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-title.jpg' );">
-                <a href="https://libreevent.janishutz.com" class="button" style="margin-top: 30%;">Project Website</a>
+                <a href="https://libreevent.janishutz.com" class="button offset-button">Project Website</a>
             </div>
             <div class="slider-element"
                 style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-admin-eventsettings.jpg' );">
+                <div class="slider-info">
                     <h2>Create Events with Ease</h2>
-                <p>Using the libreǝvent's powerful admin panel</p>
+                    <p>Using libreǝvent's powerful admin panel</p>
                     <a href="https://libreevent.janishutz.com/docs/admin-panel/" class="button">Docs</a>
                 </div>
+            </div>
             <div class="slider-element"
                 style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-admin-seatplan-editor.jpg' );">
+                <div class="slider-info">
                     <h2>Create seat plans</h2>
                     <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>
             <div class="slider-element"
                 style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-all-events.jpg' );">
-                <h1>Order Tickets</h1>
+                <div class="slider-info">
+                    <h2>Order Tickets</h2>
                     <p>on this page and give users all important data</p>
                     <a href="https://libreevent.janishutz.com/download" class="button">Install today</a>
                 </div>
+            </div>
             <div class="slider-element"
                 style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-login.jpg' );">
+                <div class="slider-info">
                     <h2>User Accounts</h2>
                     <p>Your customers can do everything in self-service!</p>
                     <a href="https://libreevent.janishutz.com/download" class="button">Install today</a>
                 </div>
+            </div>
             <div class="slider-element"
                 style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-ticket-sel.jpg' );">
+                <div class="slider-info">
                     <h2>Open Source Project</h2>
                     <p>Free Software, developed by Janis Hutz & the community</p>
-                <a href="https://libreevent.janishutz.com" class="button">Learn more about libreǝvent</a>
+                    <a href="https://github.com/janishutz/libreevent" class="button">GitHub</a>
                 </div>
             </div>
-        <span class="slider-controls slider-control-left material-symbols-outlined" onclick="sliderControl( 'previous' )">arrow_back</span>
+        </div>
-        <span class="slider-controls slider-control-right material-symbols-outlined" onclick="sliderControl( 'next' )">arrow_forward</div>
+        <span class="slider-controls slider-control-left material-symbols-outlined"
+            onclick="sliderControl( 'previous' )">arrow_back</span>
+        <span class="slider-controls slider-control-right material-symbols-outlined"
+            onclick="sliderControl( 'next' )">arrow_forward
+    </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>
 

site/src/projects/musicplayer/index.html

@@ -5,22 +5,24 @@
     <!-- CSS -->
     <link rel="stylesheet" href="https://static.janishutz.com/css/slider.css">
     <link rel="stylesheet" href="/css/style.css">
+    <link rel="stylesheet" href="/css/side-by-side.css">
 
     <!-- SEO -->
-    <title>MusicPlayer - Fully browser based with built-in remote playlist display with animations | janishutz.com</title>
+    <title>MusicPlayer - Fully browser based with built-in remote playlist display with animations | janishutz.com
+    </title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=7" />
-    <meta name="keywords" content="software store, donations" />
+    <meta name="keywords" content="browser-based, music player, remote display" />
     <meta name="description"
-        content="libreevent is a free and open source event management solution that enables you to sell tickets for your next event, including a seat plan and many more settings." />
+        content="Want to show off what the currently playing song is for your next party? MusicPlayer has a lot of party-oriented features built in!" />
     <meta name="og:title"
         content="MusicPlayer - Fully browser based with built-in remote playlist display with animations" />
     <meta name="og:description"
-        content="libreevent is a free and open source event management solution that enables you to sell tickets for your next event, including a seat plan and many more settings." />
+        content="Want to show off what the currently playing song is for your next party? MusicPlayer has a lot of party-oriented features built in!" />
-    <meta name="og:image" content="https://static.janishutz.com/seo/projects/store.jpg" />
+    <meta name="og:image" content="https://static.janishutz.com/seo/projects/musicplayer.jpg" />
     <meta name="og:type" content="website" />
-    <meta name="og:url" content="https://janishutz.com/projects/store" />
+    <meta name="og:url" content="https://janishutz.com/projects/musicplayer" />
     <meta name="og:locale" content="en_GB" />
     <meta property="twitter:card" content="summary_large_image">
     <meta name="theme-color" content="#152b5c">
@@ -32,38 +34,54 @@
     <div class="slider">
         <div class="slider-container">
             <div class="slider-element current"
-                style="background-image: url( 'https://static.janishutz.com/assets/store/store-main.jpg' );">
+                style="background-image: url( 'https://store-cdn.janishutz.com/assets/musicplayer/musicplayer-sources.jpg' );">
-                <a href="https://libreevent.janishutz.com" class="button" style="margin-top: 30%;">Project Website</a>
+                <div class="slider-info">
+                    <h2>Sources</h2>
+                    <p>Play your local music or use Apple Music (Apple Music Subscription required)</p>
+                    <a href="https://music.janishutz.com/" class="button">Website</a>
+                </div>
             </div>
             <div class="slider-element"
-                style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-admin-eventsettings.jpg' );">
+                style="background-image: url( 'https://store-cdn.janishutz.com/assets/musicplayer/musicplayer-fancy.jpg' );">
-                <h2>Create Events with Ease</h2>
+                <div class="slider-info">
-                <p>Using the libreǝvent's powerful admin panel</p>
+                    <h2>Shared Playlists</h2>
-                <a href="https://libreevent.janishutz.com/docs/admin-panel/" class="button">Docs</a>
+                    <p>Seamlessly sync and display what you are currently playing on other devices. Perfect for your
+                        next party!</p>
+                    <a href="https://music.janishutz.com/get" class="button">Get it today</a>
+                </div>
             </div>
             <div class="slider-element"
-                style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-admin-seatplan-editor.jpg' );">
+                style="background-image: url( 'https://store-cdn.janishutz.com/assets/musicplayer/musicplayer-player.jpg' );">
-                <h2>Create seat plans</h2>
+                <div class="slider-info">
-                <p>libreǝvent's seat plan editor is designed to make this as easy as possible</p>
+                    <h2>Browser based</h2>
-                <a href="https://libreevent.janishutz.com/docs/admin-panel/seatplan-editor" class="button">Docs</a>
+                    <p>No need to install anything. Runs on any platform</p>
+                    <a href="https://music.janishutz.com/get" class="button">Get it today</a>
+                </div>
             </div>
             <div class="slider-element"
-                style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-all-events.jpg' );">
+                style="background-image: url( 'https://static.janishutz.com/assets/musicplayer/musicplayer-main.jpg' );">
-                <h1>Order Tickets</h1>
+                <div class="slider-info">
-                <p>on this page and give users all important data</p>
+                    <h2>Hosted for you</h2>
-                <a href="https://libreevent.janishutz.com/download" class="button">Install today</a>
+                    <p>Need the convenience of an already set up version?</p>
+                    <a href="https://music.janishutz.com/" class="button">Website</a>
+                </div>
             </div>
             <div class="slider-element"
-                style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-login.jpg' );">
+                style="background-image: url( 'https://static.janishutz.com/assets/musicplayer/musicplayer-code.jpg' );">
-                <h2>User Accounts</h2>
+                <div class="slider-info">
-                <p>Your customers can do everything in self-service!</p>
+                    <h2>Open Source</h2>
-                <a href="https://libreevent.janishutz.com/download" class="button">Install today</a>
+                    <p>Developed by Janis Hutz &amp; the community</p>
+                    <a href="https://github.com/janishutz/MusicPlayerV2" class="button">GitHub</a>
+                </div>
             </div>
             <div class="slider-element"
-                style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-ticket-sel.jpg' );">
+                style="background-image: url( 'https://static.janishutz.com/assets/musicplayer/musicplayer-home.jpg' );">
-                <h2>Open Source Project</h2>
+                <div class="slider-info">
-                <p>Free Software, developed by Janis Hutz & the community</p>
+                    <h2>Self-Hostable</h2>
-                <a href="https://libreevent.janishutz.com" class="button">Learn more about libreǝvent</a>
+                    <p>Host it yourself. You need to be member of the Apple Developer Program for access to the Apple
+                        Music API</p>
+                    <a href="https://github.com/janishutz/MusicPlayerV2/wiki/Installation" class="button">Docs</a>
+                </div>
             </div>
         </div>
         <span class="slider-controls slider-control-left material-symbols-outlined"
@@ -71,38 +89,58 @@
         <span class="slider-controls slider-control-right material-symbols-outlined"
             onclick="sliderControl( 'next' )">arrow_forward
     </div>
-    </div>
 
     <div class="content">
-        <img src="https://github.com/janishutz/MusicPlayerV2/raw/master/assets/logo.png" alt="MusicPlayer logo" class="project-logo">
+        <img src="https://github.com/janishutz/MusicPlayerV2/raw/master/assets/logo.png" alt="MusicPlayer logo"
+            class="project-logo">
         <h1>Music&shy;Player</h1>
 
         <a href="/projects" class="back-button">&leftarrow; All projects</a>
-        <p>Play music fully in the browser and remotely share what you are currently playing. Perfect for your next party!</p>
+        <p>Play music fully in the browser and remotely share what you are currently playing. Perfect for your next
+            party!</p>
+        <a href="https://music.janishutz.com" target="_blank" class="button">Get it today</a>
 
-        <hr class="pullquote-lines">
+        <hr class="divider">
-        <h3 class="content-title-small">Why use a commercial event management solution, if you can host a more flexible
+
-            one yourself?</h3>
+        <h2>Features</h2>
-        <hr class="pullquote-lines">
+        <div class="side-by-side">
+            <div class="side-by-side-item left">
+                <h3>Remote Playback Status</h3>
+                <p>Remotely display what is currently playing via a link you can share. There is an additional link that
+                    can be used to display the same information, but with animations that sync to the music (Microphone
+                    access required on the target device and animations will sync up to the sound audible on that
+                    device)</p>
+            </div>
+            <div class="side-by-side-item right">
+                <h3>Two Sources</h3>
+                <p>You can choose between two sources for audio: Your local disk or Apple Music and you can mix the two
+                    in a single playlist. Cover Art and song information is fetched from the Apple Music API
+                    automatically if you are using the hosted version or have configured the Apple Music API
+                    authentication tokens</p>
+            </div>
+        </div>
+        <div class="side-by-side">
+            <div class="side-by-side-item left">
+                <h3>Fully Featured Player</h3>
+                <p>All the features you'd expect from a Music Player are present in MusicPlayer. Shuffle, Repeat,
+                    Playlist support, adding more songs to queue, just to name a few, are all present.</p>
+            </div>
+            <div class="side-by-side-item right">
+                <h3>Browser based</h3>
+                <p>There is no need to install anything. MusicPlayer runs fully in your browser and is thus cross
+                    platform. You could even run it off of your phone, if you wish!</p>
+            </div>
         </div>
 
-    <div id="yt-embed"></div>
+        <a href="https://music.janishutz.com" target="_blank" class="button" style="margin-top: 50px;">Get it today</a>
-
-    <div class="content">
-        <h2>Project Website</h2>
-        <p>libreevent has its own project website, where you can learn more about the project, find documentation and a
-            guide on how to install it.</p>
-        <a href="https://libreevent.janishutz.com" target="_blank" class="button">Project Website</a>
     </div>
 
 
     <footer></footer>
 
 
-    <script src="https://static.janishutz.com/js/yt-embed.js"></script>
     <script src="https://static.janishutz.com/js/slider.js"></script>
     <script>
-        YTEmbed('yt-embed', 'UYMa-xTyZYo');
         activateSlider(7500);
     </script>
 </body>

site/src/projects/storagemanager/index.html

@@ -64,8 +64,7 @@
     </div>
 
     <div class="content">
-        <!-- TODO: Size logo better -->
+        <img src="https://static.janishutz.com/assets/logos/storagemanager.jpg" alt="storage manager logo"
-        <img src="https://static.janishutz.com/assets/storagemanager.jpg" alt="storage manager logo"
             class="project-logo">
         <h1>Storage Manager</h1>
 

site/src/projects/store/index.html

@@ -33,7 +33,7 @@
         <div class="slider-container">
             <div class="slider-element current"
                 style="background-image: url( 'https://static.janishutz.com/assets/store/store-main.jpg' );">
-                <a href="https://libreevent.janishutz.com" class="button" style="margin-top: 30%;">Project Website</a>
+                <a href="https://libreevent.janishutz.com" class="button offset-button">Project Website</a>
             </div>
             <div class="slider-element"
                 style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-admin-eventsettings.jpg' );">