Light/dark theme switch

index.php

@@ -61,13 +61,24 @@ if (!isset($_SESSION['modname']) || (!file_exists(APP_DB)) || (!file_exists($_SE
 } else {
 
 	PDO_Connect("sqlite:" . APP_DB);
-	$sql = "SELECT * FROM D2Modder ORDER BY lastused LIMIT 1";
+	$sql = "SELECT * FROM D2Modder ORDER BY lastused LIMIT 1";	
 
 	$lastUsedMod = PDO_FetchRow($sql);
 
 	$_SESSION['modname'] = $lastUsedMod['modname'];
 	$_SESSION['path'] = $lastUsedMod['path'];	
 	
+	$sql = "SELECT theme FROM `D2Modder` WHERE `modname`='{$_SESSION['modname']}'";
+	$res = PDO_FetchAll($sql);
+	
+	if($res[0]['theme'] == 1) {
+		$css = 'dark.css';
+	} else {
+		$css = '';
+	}
+	
+	
+	
 	define('FILTER_PROPERTIES_FILE', 'filterProperties.txt');
 	define('DB_FILE', $_SESSION['modname'] . ".db");
 	define('TXT_PATH', $_SESSION['path']);

res/app.js

@@ -169,7 +169,20 @@ $(document).ready(function () {
 	searchbox.addEventListener('input', search);
 
 
-
+	$('input[name="theme"]').change(function(){
+		modname = $('input[name="modname"]').val();
+		$.get("/res/css.php?theme="+this.value+"&modname="+modname, function(data){
+			location.reload();
+		});
+		
+		
+//		$('body').toggleClass("body-dark");
+//		$('.container-top').toggleClass("container-top-dark");
+//		$('input').toggleClass("input-dark");
+//		$('select').toggleClass("select-dark");
+//		$('option').toggleClass("option-dark");
+//		$('.col-2,.col-3,.col-4').attr({"style":""});
+	});
 
 
 });

res/css.php

@@ -0,0 +1,56 @@
+<?php
+
+/*
+ 
+ Copyright (C) 2021 Hash Borgir
+ 
+ This file is part of D2Modder 
+ 
+ Redistribution and use in source and binary forms, with
+ or without modification, are permitted provided that the
+ following conditions are met:
+ 
+ * Redistributions of source code must retain the above
+ copyright notice, this list of conditions and the
+ following disclaimer.
+ 
+ * Redistributions in binary form must reproduce the above
+ copyright notice, this list of conditions and the
+ following disclaimer in the documentation and/or other
+ materials provided with the distribution.
+ 
+ * This software must not be used for commercial purposes 
+ * without my consent. Any sales or commercial use are prohibited
+ * without my express knowledge and consent.
+ 
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY! 
+ 
+ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND
+ CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES,
+ INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
+ MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR
+ CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT
+ NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
+ HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE
+ OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+ SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ 
+ */
+
+
+// 0 = light
+// 1 = dark
+
+include "../_pdo.php";
+
+$theme = $_GET['theme'];
+$modname = $_GET['modname'];
+
+PDO_Connect("sqlite:../D2Modder.db");
+$sql = "UPDATE D2Modder SET `theme`=$theme WHERE `modname`='$modname'";
+PDO_Execute($sql);

res/dark.css

@@ -0,0 +1,58 @@
+body {
+	background-color: #222 !important;
+	color: #eee;
+}
+.container-top {
+	background: #222;
+	color: #eee;
+	border: none;
+}
+input, select{
+	background: url(/img/button.png) !important;
+	background-size: contain;
+	color: #eee;
+}
+option {
+	background: #333;
+	color: #eee;
+}
+.row {
+	background: none;
+	color: #eee;
+}
+.col-2,.col-3,.col-4 {
+	background: none !important;
+}
+
+.sortby {
+	background: #434;
+	padding: 20px;
+}
+.viewonly {
+	background: #656;
+}
+#search{
+	background: url(/img/button_long.png) !important;
+	background-size: cover;
+	color: #eee;
+	height: 36px;
+	text-align: center;
+}
+
+.props input {
+	margin: 15px 0;
+}
+
+.props {
+	background: #222;
+	color: white;
+	font-weight: bold;
+}
+.uniqueitems-select {
+	background: url(/img/button_long.png) !important;
+	background-size: cover;
+	color: #eee;
+	height: 36px;
+	width: 420px;
+	text-align: center;
+}

res/style.css

@@ -38,7 +38,7 @@
 	OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 	SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
- */
+*/
 @font-face {
     font-family: 'Exocet';
     src: url('/fonts/ExocetHeavy.eot');
@@ -105,9 +105,9 @@ option {
 }
 
 body {
-  background-size: cover;
+	background-size: cover;
-  background-attachment: fixed;
+	background-attachment: fixed;
-  font-family:lato;
+	font-family:lato;
 }
 
 h1,h2,h3,h4,h5,h6, div > p {
@@ -135,13 +135,9 @@ h1,h2,h3,h4,h5,h6, div > p {
 }
 
 select {
-  font-size: 18px;
+	font-size: 18px;
-  border: 1px solid #CCC;
+	border: 1px solid #CCC;
-  height: 34px;
+	height: 34px;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: url(https://stackoverflow.com/favicon.ico) 96% / 15% no-repeat #EEE;
 }
 
 
@@ -161,6 +157,10 @@ select::-ms-expand {
 }
 
 option {
-   -webkit-appearance: none;
+	-webkit-appearance: none;
-   -moz-appearance: none;
+	-moz-appearance: none;
+}
+
+.props input {
+	margin: 15px 0;
 }

src/D2Config.php

@@ -61,7 +61,8 @@ if (!empty($_POST)) {
 		$sql = "CREATE TABLE IF NOT EXISTS D2Modder (
 					modname VARCHAR(255),
 					path VARCHAR(255),
-					lastused INT
+					lastused INT,
+					theme INT
 			)";
 		PDO_Execute($sql);
 		
@@ -90,7 +91,8 @@ ERROR: INVALID PATH</h1></center>';
 		$sql = "CREATE TABLE IF NOT EXISTS D2Modder (
 					modname VARCHAR(255),
 					path VARCHAR(255),
-					lastused INT
+					lastused INT,
+					theme INT
 			)";
 		PDO_Execute($sql);
 

src/footer.php

@@ -1,11 +1,24 @@
 <div class="container">
-<div class=" row" style="background: none;">
+	<div class=" row" style="background: none;">
-	<div class="offset-9 col-3" style="background: none;">
+		<div class="offset-9 col-3" style="background: none;">
 			<a style="font-weight: bold;" class="btn btn-info" href="/src/D2Config.php">Setup New Mod</a>
 			<a style="font-weight: bold;" class="btn btn-warning" href="/switchMods.php">Switch Mods</a>
+			<br><hr>
+			<div class="custom-control custom-radio custom-control-inline">
+				<input name="theme" id="theme_0" type="radio" class="custom-control-input" value="0"> 
+				<label for="theme_0" class="custom-control-label">Light</label>
+			</div>
+			<div class="custom-control custom-radio custom-control-inline">
+				<input name="theme" id="theme_1" type="radio" class="custom-control-input" value="1"> 
+				<label for="theme_1" class="custom-control-label">Dark</label>
+			</div>			
+			<input type="hidden" name="modname" value="<?php echo $_SESSION['modname'] ?>">
+
+		</div>
+
+		<span id="themeHelpBlock" class="form-text text-muted">Theme</span>
 	</div>
 </div>
-</div>
 <footer>
 	<h1 id="credits-">Credits:</h1>
 	<p><a target="_blank" href="https://d2mods.info">Thanks Phrozen Keep! My favorite mod community since 2002!</a></p>

src/head.php

@@ -53,11 +53,11 @@
 	<link rel="preconnect" href="https://fonts.gstatic.com">
 	<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap" rel="stylesheet">
 	<link rel="stylesheet" href="/res/style.css">
+	<link rel="stylesheet" href="/res/<?php echo $css ?>">
 	<style>
 
 	</style>
-    <script
+    <script src="/res/jquery-3.6.0.min.js"></script>
-	src="/res/jquery-3.6.0.min.js"></script>
     <script src="/res/bootstrap.bundle.min.js"></script>
 	<script src="/res/app.js"></script>
 

src/tabs/UniqueItems.php

@@ -7,7 +7,7 @@
 	</div>
 </div>
 <div class="row" style="">
-	<div class="col-4">
+	<div class="col-5">
 		<select name="uniqueitems" class="custom-select uniqueitems-select">
 			<option value=""></option>
 			<?php foreach ($uniqueitems as $u) { ?>
@@ -15,8 +15,8 @@
 			<?php } ?>
 		</select>	
 	</div>
-	<div class="col-8">
+	<div class="col-7 sortby">
-		<span style="font-family:Exocet;">Sort By: </span>
+		<p style="font-family:Exocet;">Sort By: </p>
 		<div class="custom-control custom-radio custom-control-inline">
 			<input name="sort" id="sort_0" type="radio" class="custom-control-input" value="lvl"> 
 			<label for="sort_0" class="custom-control-label">Level</label>
@@ -33,10 +33,8 @@
 			<input name="sort" id="sort_3" type="radio" class="custom-control-input" value="code"> 
 			<label for="sort_3" class="custom-control-label">Item Code</label>
 		</div>
-	</div>		
+		<hr>
-
+		<p style="font-family:Exocet;">View Only: </p>
-	<div class="offset-4 col-8">
-		<span style="font-family:Exocet;">View Only: </span>
 		<div class="custom-control custom-radio custom-control-inline">
 			<input name="view" id="view_0" type="radio" class="custom-control-input" value="rin"> 
 			<label for="view_0" class="custom-control-label">Rings</label>
@@ -79,15 +77,15 @@
 		<div class="col-2" style="background: #eed;">
 			<p>Version:</p>
 			<div class="custom-control custom-radio custom-control-inline">
-				<input name="version"  type="radio" aria-describedby="versionHelpBlock" required="required" class="custom-control-input" value="0">
+				<input name="version" id="version_0" type="radio" aria-describedby="versionHelpBlock" required="required" class="custom-control-input" value="0">
 				<label for="version_0" class="custom-control-label">0</label>
 			</div>
 			<div class="custom-control custom-radio custom-control-inline">
-				<input name="version"  type="radio" aria-describedby="versionHelpBlock" required="required" class="custom-control-input" value="1">
+				<input name="version" id="version_1" type="radio" aria-describedby="versionHelpBlock" required="required" class="custom-control-input" value="1">
 				<label for="version_1" class="custom-control-label">1</label>
 			</div>
 			<div class="custom-control custom-radio custom-control-inline">
-				<input name="version"  type="radio" aria-describedby="versionHelpBlock" required="required" class="custom-control-input" value="100" checked>
+				<input name="version" id="version_2" type="radio" aria-describedby="versionHelpBlock" required="required" class="custom-control-input" value="100" checked>
 				<label for="version_2" class="custom-control-label">100</label>
 			</div><br><span class="help"><i class="fa fa-question-circle" aria-hidden="true"></i>
 			</span>
@@ -98,11 +96,11 @@
 		<div class="col-2" style="background: #def;">
 			<p>Enabled:</p>
 			<div class="custom-control custom-radio custom-control-inline">
-				<input name="enabled"  type="radio" class="custom-control-input" value="0" aria-describedby="enabledHelpBlock" required="required">
+				<input name="enabled" id="enabled_0"  type="radio" class="custom-control-input" value="0" aria-describedby="enabledHelpBlock" required="required">
 				<label for="enabled_0" class="custom-control-label">0</label>
 			</div>
 			<div class="custom-control custom-radio custom-control-inline">
-				<input name="enabled"  type="radio" class="custom-control-input" value="1" aria-describedby="enabledHelpBlock" required="required" checked>
+				<input name="enabled" id="enabled_1"  type="radio" class="custom-control-input" value="1" aria-describedby="enabledHelpBlock" required="required" checked>
 				<label for="enabled_1" class="custom-control-label">1</label>
 			</div><br><span class="help"><i class="fa fa-question-circle" aria-hidden="true"></i>
 			</span>
@@ -114,11 +112,11 @@
 
 			<p>Ladder:</p>
 			<div class="custom-control custom-radio custom-control-inline">
-				<input name="ladder"  type="radio" class="custom-control-input" value="0" aria-describedby="ladderHelpBlock" required="required" checked>
+				<input name="ladder" id="ladder_0" type="radio" class="custom-control-input" value="0" aria-describedby="ladderHelpBlock" required="required" checked>
 				<label for="ladder_0" class="custom-control-label">0</label>
 			</div>
 			<div class="custom-control custom-radio custom-control-inline">
-				<input name="ladder"  type="radio" class="custom-control-input" value="1" aria-describedby="ladderHelpBlock" required="required">
+				<input name="ladder" id="ladder_1" type="radio" class="custom-control-input" value="1" aria-describedby="ladderHelpBlock" required="required">
 				<label for="ladder_1" class="custom-control-label">1</label>
 			</div><br><span class="help"><i class="fa fa-question-circle" aria-hidden="true"></i>
 			</span>
@@ -228,7 +226,7 @@
 		</div>
 
 
-		<div class="col-3" style="background: #def;">
+		<div class="col-2" style="background: #def;">
 			<p>CostAdd</p>
 			<input  value="" name="costadd"  type="text" aria-describedby="costaddHelpBlock" required="required" class="form-control"><span class="help"><i class="fa fa-question-circle" aria-hidden="true"></i>
 			</span>
@@ -236,14 +234,13 @@
 		</div>
 
 
-		<div class="col-3" style="background: #fde;">
+		<div class="col-2" style="background: #fde;">
 			<p>CharTransform</p>
 			<input  name="chrtransform"  type="text" aria-describedby="chrtransformHelpBlock" class="form-control"><span class="help"><i class="fa fa-question-circle" aria-hidden="true"></i>
 			</span>
 			<span  class="form-text">ChrTransform: palette shift to apply to the the DCC component-file and the DC6 flippy-file (whenever or not the color shift will apply is determined by Weapons.txt, Armor.txt or Misc.txt). This is an ID pointer from Colors.txt.</span>
 		</div>
-	</div>
+
-	<div class="form-group row">
 
 		<div class="col-2">
 			<p>InvTransform</p>
@@ -290,7 +287,7 @@
 			</span><span  class="form-text">UseSound: overrides the usesound (the sound played when the item is consumed by the player) specified in Weapons.txt, Armor.txt or Misc.txt for the base item. This field contains an ID pointer from Sounds.txt.</span>
 		</div>
 	</div>
-	<div class="form-group row">
+	<div class="form-group row props">
 		<?php
 		$html = '';
 

src/tabs/optionSubmit.php

@@ -2,6 +2,5 @@
 	<div class="offset-10 col-2" style="background: none;">
 		<button style="" name="submit" type="submit" class="btn btn-success">SAVE</button>
 		<button name="submit" type="reset" class="btn btn-danger">CLEAR</button>
-	</div>
+    </div>
-
 </div>