finish transition to new website

src/projects/musicplayer/index.html

@@ -7,6 +7,7 @@
 		<meta http-equiv="X-UA-Compatible" content="IE=7">
 		<meta http-equiv="X-UA-Compatible" content="ie=edge">
 		<link rel="stylesheet" href="/css/mainstyle.css">
+		<link rel="stylesheet" href="/css/pages/home.css">
 		<script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
 		<script defer src="/js/loader.js"></script>
 	</head>
@@ -17,9 +18,62 @@
 			<div class="content">
 				<img src="https://raw.githubusercontent.com/simplePCBuilding/MusicPlayerV2/master/assets/logo.png" alt="MusicPlayer Logo" class="project-logo">
 				<h1 class="content-title">MusicPlayer</h1>
-				<p style="text-align: center; margin-bottom: 5%;">This project will merge with a new project in the coming months and will be rewritten from scratch and will be packaged as an electron app.</p>
+				<p style="text-align: center; margin-bottom: 5%;">An electron-based music player to which a basically infinite amount of client displays can connect to to display the current playing song, the upcoming songs and details on all of them.</p>
-				<p>Still under construction</p>
+				<h3>NOTE: This software has not been completed yet!</h3>
+				<div class="sidebyside">
+					<div class="element">
+						<h3>Play local music.</h3>
+						<p>No need for any subscription or anything. Just select a folder using a graphical file picker and the app will load the music.</p>
+						<button class="button" onclick="openDetails( 'local' )">Learn more</button>
 					</div>
+					<div class="element">
+						<h3>Fully featured player.</h3>
+						<p>The player has all the usual features of a music player whilst also offering all the unique functionality that it has.</p>
+						<button class="button" onclick="openDetails( 'fullyFeatured' )">Learn more</button>
+					</div>
+				</div>
+				<div class="sidebyside">
+					<div class="element">
+						<h3>Client displays.</h3>
+						<p>An essentially infinite amount of client displays can be connected to the app. They can show all kinds of things, like the currently playing song and upcoming songs.</p>
+						<button class="button" onclick="openDetails( 'client' )">Learn more</button>
+					</div>
+					<div class="element">
+						<h3>Show song data.</h3>
+						<p>The app can load any kind of song data from CSV or JSON files. You can use the settings page to edit how that data is being displayed on-screen.</p>
+						<button class="button" onclick="openDetails( 'data' )">Learn more</button>
+					</div>
+				</div>
+			</div>
+			<div class="bottom">
+				<h2 class="content-title">Download it here</h2>
+				<a class="button" href="https://github.com/simplePCBuilding/MusicPlayerV2/releases" target="_blank">DOWNLOAD</a>
+			</div>
+		</div>
+		<div id="popup">
+			<div class="popup-positioning">
+				<div class="popup-main">
+					<p id="popup-message"></p>
+					<button onclick="closePopup()" class="submit">Ok</button>
+				</div>
+			</div>
+			<script>
+				const texts = { 
+					'local': '<h3>Play local music.</h3><p>No need to connect to any streaming service, just select your local music library using a graphical file picker</p>',
+					'fullyFeatured': '<h3>Fully featured music player.</h3><p>This music player has additional functionality without compromising on functionality that traditional music players have, like shuffle.</p>',
+					'client': '<h3>Client displays.</h3><p>MusicPlayer in theory supports an unlimited amount of connected guest displays. All that those displays need is any kind of web browser to render the webpage that acts as the display software</p>',
+					'data': '<h3>Show song data.</h3><p>You can use CSV or JSON files to give information to the app that it should display on the songs. You can use the editor in the settings page to select which data gets displayed in what fashion, and where.</p>',
+			 	};
+				function closePopup () {
+					$( '#popup' ).fadeOut( 500 );
+					$( 'body' ).removeClass( 'menuOpen' );
+				}
+				function openDetails ( message ) {
+					document.getElementById( 'popup-message' ).innerHTML = texts[ message ];
+					$( '#popup' ).fadeIn( 500 );
+					$( 'body' ).addClass( 'menuOpen' );
+				}
+			</script>
 		</div>
 		<div id="footer"></div>
 	</body>

src/projects/schoolprojects/index.html

@@ -54,16 +54,10 @@
 			</div>
 			<script>
 				const texts = { 
-					'bgac': `<h3>Supported code types.</h3><p>This app can scan the following codes:</p>
+					'bgac': '<h3>BiogasControllerApp.</h3><p>This is a python app with a Kivy GUI with which you can reprogram the micro controllers used for a small biogas plant that one creates in a subject at my current school.</p>',
-					<ul>
+					'microbit': '<h3>Micro:bit Interface.</h3><p>In computer science class (which was a joke in terms of difficulty, anyway) I decided to create this app to not get bored doing very easy things. It can communicate with software on the Micro:bit through UART.</p>',
-						<li>QR & miniQR</li>
+					'midi': '<h3>MIDI - Micro:bit Sound Converter.</h3><p>A small Python app with a Kivy GUI that can convert a MIDI file into a string of characters that can be used with the Micro:bit-micropython sound library.</p>',
-						<li>Code 128, Code 93, Code 39 & Code 39 mod 43</li>
+					'history': '<h3>History Research project.</h3><p>A research project for history class where we had to summarise a topic of the 19th century. I have decided to create a website because it felt the easiest. Take a look at it <a href="https://historyproject.janishutz.com">here</a></p>',
-						<li>Codabar & Interleaved 2 of 5</li>
-						<li>UPCE, EAN 8 & EAN 13</li>
-					</ul>`,
-					'microbit': '<h3>See the full link.</h3><p>Seeing the full link that is included in a QR-Code can prevent you from accidentally opening up a unsafe link. Please always make sure that the link you scanned is actually a link you want to open, regardless of the app. This app does NOT feature a website reputation lookup feature. I do not take responsibility for any damage caused to your device by opening unsafe QR-Codes.</p>',
-					'midi': '<h3>Scanning History.</h3><p>QR & Barcode Insight can save the scanning history for you. This data never leaves your device. Individual entries or the entire history can be cleared at a simple push of a button. Additionally, you may disable this feature entirely in Settings.</p>',
-					'history': '<h3>History Research project.</h3><p>QR & Barcode Insight does not currently and never will cost you any money. It also does not serve any ads or collect any data on your interaction with it. This app has In-App-Purchases that are solely there to allow you to support my work and the continuous development of the app. They do not currently provide any additional features. It is planned for them to get some additional features in the future, which will though just be cosmetic changes to for example the app icon.</p>',
 			 	};
 				function closePopup () {
 					$( '#popup' ).fadeOut( 500 );