💄 added Modal for better UX

index.html

@@ -26,7 +26,7 @@
 	<div class="content">
 		<nav class="raplalinkcontainer--nav row" id="raplalinkcontainer--nav">
 			<div class="raplalinkcontainer--nav__text col-11">
-				RaPla Middleware Link Generator
+				<span>RaPla Middleware Link Generator</span>
 			</div>
 			<i class="raplalinkcontainer__header--button col-1 far fa-moon" id="colorModeToggleIcon"
 			   onclick="toggleDarkMode()">
@@ -45,11 +45,6 @@
 					guarantee
 					that this tool works exactly as expected all the time. Please don't only rely on this tool working
 					perfectly.</p>
-				<p>If you have any questions or bugs, contact me via one of the options on <a
-						href="https://www.p4ddy.com" target="_blank">p4ddy.com</a>.
-					Also huge thanks to <a href="https://www.li54.dev" target="_blank">Lisa</a> for the styling of this
-					page :)
-				</p>
 			</div>
 		</div>
 		<!-- // PREFACE -->
@@ -128,16 +123,34 @@
 
 				<!-- // PROFILMODUL -->
 				<!--  GENERATE LINK BUTTON -->
-				<input type="button" class="btn btn-outline-secondary" id="submitBtn" value="Generate Link">
+				<input type="button" class="btn btn-outline-secondary" id="submitBtn" value="Generate Link" data-bs-toggle="modal" data-bs-target="#linkModal">
 				<!-- // GENERATE LINK BUTTON -->
 			</form>
 		</div>
+		<div class="raplalinkcontainer--nav__subtext">Made with <img height="10" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/microsoft/309/red-heart_2764-fe0f.png"/> by <a href="https://www.p4ddy.com">Paddy</a> & <a href="https://www.li54.dev">Lisa</a></div>
 
+		<!-- Modal -->
+		<div class="modal fade" id="linkModal" tabindex="-1" aria-labelledby="linkModalSuccess" aria-hidden="true">
+			<div class="modal-dialog modal-dialog-centered">
+				<div class="modal-content">
+					<div class="modal-header">
+						<h5 class="modal-title" id="linkModalTitle"></h5>
+						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+					</div>
+					<div class="modal-body">
 						<div class="raplalinkcontainer--link">
-			<p>Here is the link that you can use for importing RaPla into your iCloud etc. calendar (click to copy):</p>
+							<p id="raplalinkcontainer--link"></p>
+						</div>
 						<p id="full-link"></p>
 					</div>
+					<div class="modal-footer">
+						<button type="button" class="btn btn-secondary" id="raplalinkcontainer--closeButton" data-bs-dismiss="modal"></button>
 					</div>
 				</div>
+			</div>
+		</div>
+	</div>
+</div>
+
 </body>
 </html>

scripts.js

@@ -37,7 +37,9 @@ function generateLink() {
             raplaUser = url.searchParams.get('user');
             raplaFile = url.searchParams.get('file');
         } else {
-            $('#full-link').text('Please provide either a course or a RaPla Link!');
+            $('#linkModalTitle').text('Oh No!');
+            $('#raplalinkcontainer--link').text('Please provide either a course or a RaPla Link!');
+            $('#raplalinkcontainer--closeButton').text('Gonna Do that!');
             return;
         }
     } else {
@@ -58,7 +60,10 @@ function generateLink() {
     base_url += '&wahl=' + selectedElectiveModule;
     base_url += '&pflicht=' + selectedProfileModule;
 
+    $('#linkModalTitle').text('Your RaPla Link 🥳 ');
+    $('#raplalinkcontainer--link').text('Here is the link that you can use for importing RaPla into your iCloud etc. calendar (click to copy)');
     $('#full-link').text(base_url);
+    $('#raplalinkcontainer--closeButton').text('Thank you for using');
 }
 
 let courseLinks = {

styles.css

@@ -13,6 +13,7 @@ body {
     height: 100vh;
     font-family: Nunito, sans-serif;
     display: flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
 }
@@ -25,6 +26,11 @@ body {
     height: 10%;
 }
 
+.raplalinkcontainer--nav__subtext {
+    font-weight: 100;
+    font-size: 0.75em;
+    text-align: center;
+}
 
 
 
@@ -88,8 +94,5 @@ body {
     color: #222222;
 }
 
-.raplalinkcontainer--link {
-    padding: 1.3em;
-}