From 9880084841c87db62830a5f340b564fb3dc1a837 Mon Sep 17 00:00:00 2001 From: Janis Hutz Date: Wed, 25 Jun 2025 11:13:15 +0200 Subject: [PATCH] More pages, some finished --- site/src/css/analytics.css | 22 ++- site/src/css/style.css | 30 +++- site/src/footer.html | 1 + site/src/index.html | 1 - site/src/projects/accounts/index.html | 49 ++++++ site/src/projects/index.html | 22 +-- .../languageschoolhossegor-booking/index.html | 148 ++++++++++++++++++ site/src/projects/libreevent/index.html | 50 +++--- site/src/projects/musicplayer/index.html | 126 +++++++++------ site/src/projects/storagemanager/index.html | 3 +- site/src/projects/store/index.html | 2 +- 11 files changed, 361 insertions(+), 93 deletions(-) diff --git a/site/src/css/analytics.css b/site/src/css/analytics.css index 6ddb0c1..2d5bf96 100644 --- a/site/src/css/analytics.css +++ b/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-right: 20px; - padding-bottom: 5px; - right: 10px; + padding-left: 5px; + padding-right: 10px; + padding-bottom: 20px; + 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; } diff --git a/site/src/css/style.css b/site/src/css/style.css index 3189825..51dbe4a 100644 --- a/site/src/css/style.css +++ b/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; diff --git a/site/src/footer.html b/site/src/footer.html index 430885d..4845964 100644 --- a/site/src/footer.html +++ b/site/src/footer.html @@ -35,6 +35,7 @@ Terms of Service Return policy Support Status +
Analytics
diff --git a/site/src/index.html b/site/src/index.html index f3dcee4..e6ac9ca 100644 --- a/site/src/index.html +++ b/site/src/index.html @@ -59,7 +59,6 @@ arrow_forward
-
diff --git a/site/src/projects/accounts/index.html b/site/src/projects/accounts/index.html index e69de29..79cbba4 100644 --- a/site/src/projects/accounts/index.html +++ b/site/src/projects/accounts/index.html @@ -0,0 +1,49 @@ + + + + + + + + + + + MusicPlayer - Fully browser based with built-in remote playlist display with animations | janishutz.com + + + + + + + + + + + + + + + + + + + +
+ +

Accounts

+ + ← All projects +

Log in with just one account securely to all my services. No need for separate accounts for each service.

+ To Accounts +

This page is still under construction, as my accounts services are being reworked

+
+ + +
+ + + diff --git a/site/src/projects/index.html b/site/src/projects/index.html index 2d46062..c82befa 100644 --- a/site/src/projects/index.html +++ b/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 @@
- libreǝvent + libreǝvent
-
- ConductorCalc + ConductorCalc
- StorageManager + StorageManager
- QR & Barcode Insight + QR & Barcode Insight
-
- Store + Store
- MusicPlayer + MusicPlayer
Details
- +

Language School Hossegor Booking System

A fully featured booking system for a French language school, written from scratch specifically for their purposes with a highly customizable booking process.

diff --git a/site/src/projects/languageschoolhossegor-booking/index.html b/site/src/projects/languageschoolhossegor-booking/index.html index e69de29..8a28c33 100644 --- a/site/src/projects/languageschoolhossegor-booking/index.html +++ b/site/src/projects/languageschoolhossegor-booking/index.html @@ -0,0 +1,148 @@ + + + + + + + + + + + MusicPlayer - Fully browser based with built-in remote playlist display with animations | janishutz.com + + + + + + + + + + + + + + + + + + + +
+
+
+
+

Sources

+

Play your local music or use Apple Music (Apple Music Subscription required)

+ Website +
+
+
+
+

Shared Playlists

+

Seamlessly sync and display what you are currently playing on other devices. Perfect for your + next party!

+ Get it today +
+
+
+
+

Browser based

+

No need to install anything. Runs on any platform

+ Get it today +
+
+
+
+

Hosted for you

+

Need the convenience of an already set up version?

+ Website +
+
+
+
+

Open Source

+

Developed by Janis Hutz & the community

+ GitHub +
+
+
+
+

Self-Hostable

+

Host it yourself. You need to be member of the Apple Developer Program for access to the Apple + Music API

+ Docs +
+
+
+ arrow_back + arrow_forward +
+ +
+ +

Music­Player

+ + ← All projects +

Play music fully in the browser and remotely share what you are currently playing. Perfect for your next + party!

+ Get it today + +
+ +

Features

+
+
+

Remote Playback Status

+

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)

+
+
+

Two Sources

+

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

+
+
+
+
+

Fully Featured Player

+

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.

+
+
+

Browser based

+

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!

+
+
+ + Get it today +
+ + +
+ + + + + + + diff --git a/site/src/projects/libreevent/index.html b/site/src/projects/libreevent/index.html index 8706f22..4252fc0 100644 --- a/site/src/projects/libreevent/index.html +++ b/site/src/projects/libreevent/index.html @@ -46,45 +46,57 @@
- Project Website + Project Website
-

Create Events with Ease

-

Using the libreǝvent's powerful admin panel

- Docs +
+

Create Events with Ease

+

Using libreǝvent's powerful admin panel

+ Docs +
-

Create seat plans

-

libreǝvent's seat plan editor is designed to make this as easy as possible

- Docs +
+

Create seat plans

+

libreǝvent's seat plan editor is designed to make this as easy as possible

+ Docs +
-

Order Tickets

-

on this page and give users all important data

- Install today +
+

Order Tickets

+

on this page and give users all important data

+ Install today +
-

User Accounts

-

Your customers can do everything in self-service!

- Install today +
+

User Accounts

+

Your customers can do everything in self-service!

+ Install today +
-

Open Source Project

-

Free Software, developed by Janis Hutz & the community

- Learn more about libreǝvent +
+

Open Source Project

+

Free Software, developed by Janis Hutz & the community

+ GitHub +
- arrow_back - arrow_forward
+ arrow_back + arrow_forward +
-

libreǝvent

diff --git a/site/src/projects/musicplayer/index.html b/site/src/projects/musicplayer/index.html index ade6fcf..ecab868 100644 --- a/site/src/projects/musicplayer/index.html +++ b/site/src/projects/musicplayer/index.html @@ -5,22 +5,24 @@ + - MusicPlayer - Fully browser based with built-in remote playlist display with animations | janishutz.com + MusicPlayer - Fully browser based with built-in remote playlist display with animations | janishutz.com + - + + 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!" /> - + 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!" /> + - + @@ -32,38 +34,54 @@
- Project Website + style="background-image: url( 'https://store-cdn.janishutz.com/assets/musicplayer/musicplayer-sources.jpg' );"> +
+

Sources

+

Play your local music or use Apple Music (Apple Music Subscription required)

+ Website +
-

Create Events with Ease

-

Using the libreǝvent's powerful admin panel

- Docs + style="background-image: url( 'https://store-cdn.janishutz.com/assets/musicplayer/musicplayer-fancy.jpg' );"> +
+

Shared Playlists

+

Seamlessly sync and display what you are currently playing on other devices. Perfect for your + next party!

+ Get it today +
-

Create seat plans

-

libreǝvent's seat plan editor is designed to make this as easy as possible

- Docs + style="background-image: url( 'https://store-cdn.janishutz.com/assets/musicplayer/musicplayer-player.jpg' );"> +
+

Browser based

+

No need to install anything. Runs on any platform

+ Get it today +
-

Order Tickets

-

on this page and give users all important data

- Install today + style="background-image: url( 'https://static.janishutz.com/assets/musicplayer/musicplayer-main.jpg' );"> +
+

Hosted for you

+

Need the convenience of an already set up version?

+ Website +
-

User Accounts

-

Your customers can do everything in self-service!

- Install today + style="background-image: url( 'https://static.janishutz.com/assets/musicplayer/musicplayer-code.jpg' );"> +
+

Open Source

+

Developed by Janis Hutz & the community

+ GitHub +
-

Open Source Project

-

Free Software, developed by Janis Hutz & the community

- Learn more about libreǝvent + style="background-image: url( 'https://static.janishutz.com/assets/musicplayer/musicplayer-home.jpg' );"> +
+

Self-Hostable

+

Host it yourself. You need to be member of the Apple Developer Program for access to the Apple + Music API

+ Docs +
arrow_forward
-
- +

Music­Player

← All projects -

Play music fully in the browser and remotely share what you are currently playing. Perfect for your next party!

+

Play music fully in the browser and remotely share what you are currently playing. Perfect for your next + party!

+ Get it today -
-

Why use a commercial event management solution, if you can host a more flexible - one yourself?

-
-
+
-
+

Features

+
+
+

Remote Playback Status

+

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)

+
+
+

Two Sources

+

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

+
+
+
+
+

Fully Featured Player

+

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.

+
+
+

Browser based

+

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!

+
+
-
-

Project Website

-

libreevent has its own project website, where you can learn more about the project, find documentation and a - guide on how to install it.

- Project Website + Get it today
- diff --git a/site/src/projects/storagemanager/index.html b/site/src/projects/storagemanager/index.html index a11a909..86e52c5 100644 --- a/site/src/projects/storagemanager/index.html +++ b/site/src/projects/storagemanager/index.html @@ -64,8 +64,7 @@
- -

Storage Manager

diff --git a/site/src/projects/store/index.html b/site/src/projects/store/index.html index 1f35447..038c204 100644 --- a/site/src/projects/store/index.html +++ b/site/src/projects/store/index.html @@ -33,7 +33,7 @@
- Project Website + Project Website