Added Confirmation Dialog Before Closing The App

sandunwira · Sep 17, 2023 · 967e441 · 967e441
1 parent 6f5ea69
commit 967e441
Show file tree

Hide file tree

Showing 84 changed files with 382 additions and 130 deletions.
diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "lumina"
-version = "1.1.0"
+version = "1.2.0"
 description = "An opensource app to achieve relaxation and mindfulness"
 authors = ["KoolApps Team"]
 license = "MIT"

diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "Lumina",
-    "version": "1.1.0"
+    "version": "1.2.0"
   },
   "tauri": {
     "allowlist": {

diff --git a/src/app.css b/src/app.css
@@ -51,8 +51,8 @@ button {
 	font-size: medium;
 	padding: 10px 20px;
 	color: #ECECEC;
-	background: #56afe7;
-	border: 2px solid #56afe7;
+	background: #56AFE7;
+	border: 2px solid #56AFE7;
 	border-radius: 8px;
 	transition: 0.5s
 }
@@ -83,7 +83,7 @@ button:hover {
 	background: #242424;
 	border: 3px solid #6590BB;
 	border-radius: 10px;
-	filter: drop-shadow(0 0 30px #6590bb51);
+	filter: drop-shadow(0 0 30px #6590BB51);
 }
 .iframeControls {
 	display: flex;
@@ -112,7 +112,7 @@ abbr:hover {
 		box-shadow: none;
 	}
 	50% {
-		box-shadow: inset 0px 0px 500px #2f455a;
+		box-shadow: inset 0px 0px 500px #2F455A;
 	}
 	100% {
 		box-shadow: none;

diff --git a/src/breathe.html b/src/breathe.html
@@ -27,6 +27,10 @@
 	<dialog id="helpDialog"></dialog>
 	<script src="js/aboutDialog.js"></script>
 	<!--==================================================== DIALOG END -->
+	<!-- DIALOG START ==================================================-->
+	<dialog id="closeDialog"></dialog>
+	<script src="js/closeDialog.js"></script>
+	<!--==================================================== DIALOG END -->
 
 	<!-- Titlebar Start ================================================-->
 	<div class="titlebar" id="titlebar"></div>

diff --git a/src/css/dialog.css b/src/css/dialog.css
@@ -26,7 +26,7 @@ dialog {
 	height: 100%;
 }
 .dialogContainer p{
-	color: #9e9e9e;
+	color: #9E9E9E;
 	font-size: 10px;
 	text-align: justify;
 	text-align-last: center;
@@ -54,7 +54,7 @@ dialog {
 }
 .dialogTitle button:hover {
 	color: #ECECEC;
-	background: #ff1616;
+	background: #FF1616;
 	transition: 0.2s;
 }
 
@@ -63,7 +63,7 @@ dialog {
 }
 .dialogImg img {
 	height: 50px;
-	filter: drop-shadow(0 0 8px #78abd867);
+	filter: drop-shadow(0 0 8px #78ABD867);
 }
 
 .dialogDesc {
@@ -100,8 +100,43 @@ dialog {
 }
 
 .dialogFooter p {
-	color: #9e9e9e;
+	color: #9E9E9E;
 	font-size: 10px;
 	text-align: justify;
 	text-align-last: center;
-}
+}
+
+
+
+
+#closeDialog {
+	height: 300px;
+}
+
+#closeDialog form{
+	width: 80%;
+}
+
+#closeDialog h1{
+	margin-bottom: 40px;
+	text-align: center;
+	font-size: 24px;
+}
+
+
+.closeButtons{
+	gap: 25px;
+}
+
+.closeButtons button{
+	outline: none;
+	width: 130px;
+	height: 45px;
+}
+
+
+#dialogCloseBtn:hover{
+	background: #bb1d0f;
+	border: 2px solid #ECECEC;
+	transition: 0.3s;
+}
diff --git a/src/css/main.css b/src/css/main.css
@@ -28,7 +28,7 @@
 }
 #timeIcon i {
 	font-size: 60px;
-	color: #34a1e4;
+	color: #34A1E4;
 }
 
 #greetingContainer {
@@ -43,8 +43,12 @@
 #greetingLocation {
 	font-size: 18px;
 	letter-spacing: 1px;
-	-webkit-text-stroke: 1px #56afe7;
-	color: #56afe7;
+	-webkit-text-stroke: 1px #56AFE7;
+	color: #56AFE7;
+}
+#greetingLocation i{
+	font-size: 12px;
+	-webkit-text-stroke: 0;
 }
 
 .homeScreenTime h1 {
@@ -78,7 +82,7 @@
 }
 
 #sectionCard p {
-	color: #56afe7;
+	color: #56AFE7;
 	height: 125%;
 	width: 100%;
 	font-family: 'GilroyExtraBold', sans-serif;
@@ -95,7 +99,7 @@
 }
 .lockScreenTime h1 {
 	font-size: 85px;
-	color: #56afe7;
+	color: #56AFE7;
 	font-family: 'GilroyExtraBold', sans-serif;
 }
 .lockScreenDate h1 {
@@ -242,8 +246,8 @@
 }
 
 #storyCard:hover p {
-	color: #ffffff;
-	background: linear-gradient(45deg, #0c243390, #1c71a590);
+	color: #FFFFFF;
+	background: linear-gradient(45deg, #0C243390, #1C71A590);
 	backdrop-filter: blur(8px);
 	border-radius: 10px;
 	visibility: visible;
@@ -292,8 +296,8 @@
 }
 
 #gamecard:hover p {
-	color: #ffffff;
-	background: linear-gradient(45deg, #0c243390, #1c71a590);
+	color: #FFFFFF;
+	background: linear-gradient(45deg, #0C243390, #1C71A590);
 	backdrop-filter: blur(8px);
 	border-radius: 10px;
 	visibility: visible;
@@ -347,7 +351,7 @@
 	border: none;
 }
 .navigation button:hover {
-	background: #3f81aa;
+	background: #3F81AA;
 }
 
 #myVideo {

diff --git a/src/games.html b/src/games.html
@@ -27,6 +27,10 @@
 	<dialog id="helpDialog"></dialog>
 	<script src="js/aboutDialog.js"></script>
 	<!--==================================================== DIALOG END -->
+	<!-- DIALOG START ==================================================-->
+	<dialog id="closeDialog"></dialog>
+	<script src="js/closeDialog.js"></script>
+	<!--==================================================== DIALOG END -->
 
 	<!-- Titlebar Start ================================================-->
 	<div class="titlebar" id="titlebar"></div>

diff --git a/src/games/BullsEye.html b/src/games/BullsEye.html
@@ -27,6 +27,10 @@
 	<dialog id="helpDialog"></dialog>
 	<script src="../js/aboutDialog.js"></script>
 	<!--==================================================== DIALOG END -->
+	<!-- DIALOG START ==================================================-->
+	<dialog id="closeDialog"></dialog>
+	<script src="../js/closeDialog.js"></script>
+	<!--==================================================== DIALOG END -->
 
 	<!-- Titlebar Start ================================================-->
 	<div class="titlebar" id="titlebar"></div>

diff --git a/src/games/CatJumper.html b/src/games/CatJumper.html
@@ -27,6 +27,10 @@
 	<dialog id="helpDialog"></dialog>
 	<script src="../js/aboutDialog.js"></script>
 	<!--==================================================== DIALOG END -->
+	<!-- DIALOG START ==================================================-->
+	<dialog id="closeDialog"></dialog>
+	<script src="../js/closeDialog.js"></script>
+	<!--==================================================== DIALOG END -->
 
 	<!-- Titlebar Start ================================================-->
 	<div class="titlebar" id="titlebar"></div>

diff --git a/src/games/ClickOnTheCircle.html b/src/games/ClickOnTheCircle.html
@@ -27,6 +27,10 @@
 	<dialog id="helpDialog"></dialog>
 	<script src="../js/aboutDialog.js"></script>
 	<!--==================================================== DIALOG END -->
+	<!-- DIALOG START ==================================================-->
+	<dialog id="closeDialog"></dialog>
+	<script src="../js/closeDialog.js"></script>
+	<!--==================================================== DIALOG END -->
 
 	<!-- Titlebar Start ================================================-->
 	<div class="titlebar" id="titlebar"></div>

diff --git a/src/games/CubNPup.html b/src/games/CubNPup.html
@@ -27,6 +27,10 @@
 	<dialog id="helpDialog"></dialog>
 	<script src="../js/aboutDialog.js"></script>
 	<!--==================================================== DIALOG END -->
+	<!-- DIALOG START ==================================================-->
+	<dialog id="closeDialog"></dialog>
+	<script src="../js/closeDialog.js"></script>
+	<!--==================================================== DIALOG END -->
 
 	<!-- Titlebar Start ================================================-->
 	<div class="titlebar" id="titlebar"></div>

diff --git a/src/games/Minesweeper.html b/src/games/Minesweeper.html
@@ -27,6 +27,10 @@
 	<dialog id="helpDialog"></dialog>
 	<script src="../js/aboutDialog.js"></script>
 	<!--==================================================== DIALOG END -->
+	<!-- DIALOG START ==================================================-->
+	<dialog id="closeDialog"></dialog>
+	<script src="../js/closeDialog.js"></script>
+	<!--==================================================== DIALOG END -->
 
 	<!-- Titlebar Start ================================================-->
 	<div class="titlebar" id="titlebar"></div>

diff --git a/src/games/RememberCard.html b/src/games/RememberCard.html
@@ -27,6 +27,10 @@
 	<dialog id="helpDialog"></dialog>
 	<script src="../js/aboutDialog.js"></script>
 	<!--==================================================== DIALOG END -->
+	<!-- DIALOG START ==================================================-->
+	<dialog id="closeDialog"></dialog>
+	<script src="../js/closeDialog.js"></script>
+	<!--==================================================== DIALOG END -->
 
 	<!-- Titlebar Start ================================================-->
 	<div class="titlebar" id="titlebar"></div>

diff --git a/src/games/RockPaperScissors.html b/src/games/RockPaperScissors.html
@@ -27,6 +27,10 @@
 	<dialog id="helpDialog"></dialog>
 	<script src="../js/aboutDialog.js"></script>
 	<!--==================================================== DIALOG END -->
+	<!-- DIALOG START ==================================================-->
+	<dialog id="closeDialog"></dialog>
+	<script src="../js/closeDialog.js"></script>
+	<!--==================================================== DIALOG END -->
 
 	<!-- Titlebar Start ================================================-->
 	<div class="titlebar" id="titlebar"></div>

diff --git a/src/games/SnakesAndLadders.html b/src/games/SnakesAndLadders.html
@@ -27,6 +27,10 @@
 	<dialog id="helpDialog"></dialog>
 	<script src="../js/aboutDialog.js"></script>
 	<!--==================================================== DIALOG END -->
+	<!-- DIALOG START ==================================================-->
+	<dialog id="closeDialog"></dialog>
+	<script src="../js/closeDialog.js"></script>
+	<!--==================================================== DIALOG END -->
 
 	<!-- Titlebar Start ================================================-->
 	<div class="titlebar" id="titlebar"></div>

diff --git a/src/games/TheCube.html b/src/games/TheCube.html
@@ -27,6 +27,10 @@
 	<dialog id="helpDialog"></dialog>
 	<script src="../js/aboutDialog.js"></script>
 	<!--==================================================== DIALOG END -->
+	<!-- DIALOG START ==================================================-->
+	<dialog id="closeDialog"></dialog>
+	<script src="../js/closeDialog.js"></script>
+	<!--==================================================== DIALOG END -->
 
 	<!-- Titlebar Start ================================================-->
 	<div class="titlebar" id="titlebar"></div>

diff --git a/src/games/TicTacToe.html b/src/games/TicTacToe.html
@@ -27,6 +27,10 @@
 	<dialog id="helpDialog"></dialog>
 	<script src="../js/aboutDialog.js"></script>
 	<!--==================================================== DIALOG END -->
+	<!-- DIALOG START ==================================================-->
+	<dialog id="closeDialog"></dialog>
+	<script src="../js/closeDialog.js"></script>
+	<!--==================================================== DIALOG END -->
 
 	<!-- Titlebar Start ================================================-->
 	<div class="titlebar" id="titlebar"></div>

diff --git a/src/games/TiltingMaze.html b/src/games/TiltingMaze.html
@@ -27,6 +27,10 @@
 	<dialog id="helpDialog"></dialog>
 	<script src="../js/aboutDialog.js"></script>
 	<!--==================================================== DIALOG END -->
+	<!-- DIALOG START ==================================================-->
+	<dialog id="closeDialog"></dialog>
+	<script src="../js/closeDialog.js"></script>
+	<!--==================================================== DIALOG END -->
 
 	<!-- Titlebar Start ================================================-->
 	<div class="titlebar" id="titlebar"></div>

diff --git a/src/games/TowerBlocks.html b/src/games/TowerBlocks.html
@@ -27,6 +27,10 @@
 	<dialog id="helpDialog"></dialog>
 	<script src="../js/aboutDialog.js"></script>
 	<!--==================================================== DIALOG END -->
+	<!-- DIALOG START ==================================================-->
+	<dialog id="closeDialog"></dialog>
+	<script src="../js/closeDialog.js"></script>
+	<!--==================================================== DIALOG END -->
 
 	<!-- Titlebar Start ================================================-->
 	<div class="titlebar" id="titlebar"></div>

diff --git a/src/home.html b/src/home.html
@@ -27,6 +27,10 @@
 	<dialog id="helpDialog"></dialog>
 	<script src="js/aboutDialog.js"></script>
 	<!--==================================================== DIALOG END -->
+	<!-- DIALOG START ==================================================-->
+	<dialog id="closeDialog"></dialog>
+	<script src="js/closeDialog.js"></script>
+	<!--==================================================== DIALOG END -->
 
 	<!-- Titlebar Start ================================================-->
 	<div class="titlebar" id="titlebar"></div>

diff --git a/src/index.html b/src/index.html
@@ -8,6 +8,7 @@
 	<link rel="stylesheet" href="app.css">
 	<link rel="stylesheet" href="css/titlebar.css">
 	<link rel="stylesheet" href="css/main.css">
+	<link rel="stylesheet" href="css/dialog.css">
 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> 
 
 	<script type="module" src="/main.js" defer></script>
@@ -21,6 +22,11 @@
 
 <body>
 
+	<!-- DIALOG START ==================================================-->
+	<dialog id="closeDialog"></dialog>
+	<script src="js/closeDialog.js"></script>
+	<!--==================================================== DIALOG END -->
+
 	<!-- Header Start ==================================================-->
 	<div class="banner flexContainer flexCol" id="lockScreen">
 
@@ -42,7 +48,7 @@
 					<button id="playPauseBtn" title="Toggle Music On/Off" class="pause" oncontextmenu="window.location.reload();">
 						<i class="fa-solid fa-music"></i>
 					</button>
-					<button id="quitBtn" title="Quit">
+					<button id="quitBtn" title="Quit" onclick="closeDialog.showModal();">
 						<i class="fa-solid fa-power-off"></i>
 					</button>
 					<button id="loginBtn" title="Continue" onclick="window.location.href='./home.html'">