Merge remote-tracking branch 'origin/master'

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 -->
@@ -129,16 +124,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>
 
-		<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="full-link"></p>
+		<!-- 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 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

@@ -18,13 +18,17 @@ $(document).ready(function () {
 
 function copyToClipboard(text) {
     var $temp = $("<input>");
-    $("body").append($temp);
+    $("#linkModal").append($temp);
     $temp.val(text).select();
     document.execCommand("copy");
     $temp.remove();
 }
 
 function generateLink() {
+    // Clear paragraph
+    $('#full-link').text('');
+
+
     let selectedCourseFromPicker = $('#coursename').val().toString();
 
     let raplaUser = '';
@@ -37,7 +41,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 +64,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;
+}
 
 
 
@@ -83,13 +89,14 @@ body {
     width: 100%;
 }
 
+p#full-link {
+    overflow: auto;
+}
+
 #submitBtn.submitButton--dark-mode {
     background-color: white;
     color: #222222;
 }
 
-.raplalinkcontainer--link {
-    padding: 1.3em;
-}