<?php
function wzGetPost($fncPostVariable, $fncDefault = '') {
$fncResult = isset($_POST[$fncPostVariable]) ? $_POST[$fncPostVariable] : '';
if ($fncResult == ''):
$fncResult = $fncDefault;
endif; // $fncResult == ''
return $fncResult ;
} // end of wzGetPost
$pgTheme = wzGetPost('pickTheme','Light');
if ($pgTheme == 'Light'):
$pgLightChecked = 'checked=""';
$pgDarkChecked = '';
else:
$pgLightChecked = '';
$pgDarkChecked = 'checked=""';
endif;
$pgColorSelect = '';
foreach (glob("wtk*.css") as $pgFile):
$pgFile = str_replace('wtk', '', $pgFile);
$pgFile = str_replace('.css', '', $pgFile);
switch ($pgFile):
case 'Global':
case 'Light':
case 'Dark':
// skip
break;
default:
$pgColorSelect .= '<option value="' . $pgFile . '">' . $pgFile . '</option>' . "\n";
break;
endswitch;
endforeach;
$pgColor = wzGetPost('pickColor','Blue');
$pgColorSelect = str_replace('>' . $pgColor . '<', ' selected>' . $pgColor . '<', $pgColorSelect);
?>
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wizards Toolkit</title>
<link rel="shortcut icon" href="/wz/imgs/wtk.ico" type="image/x-icon" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/font-awesome-line-awesome/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="wtk<?php echo $pgColor; ?>.css">
<link id="theme" rel="stylesheet" href="wtk<?php echo $pgTheme; ?>.css">
<link rel="stylesheet" href="wtkGlobal.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" defer></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js" defer></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.4.6/jscolor.min.js" defer></script>
<script type="text/javascript">
'use strict';
function getCssRoot(){
$(document).ready(function() {
M.AutoInit();
makeAPicker('--gradient-left');
makeAPicker('--gradient-right');
makeAPicker('--btn-color');
makeAPicker('--btn-border-color');
makeAPicker('--btn-hover');
makeAPicker('--href-link');
makeAPicker('--active-label');
makeAPicker('--light-theme-focus');
makeAPicker('--dark-theme-focus');
makeAPicker('--bg-second-color');
jscolor.trigger('input change');
let fncElems = document.querySelectorAll('.tooltipped');
let fncTmp = M.Tooltip.init(fncElems);
M.updateTextFields();
});
}
function makeAPicker(fncClass){
let fncColor = getComputedStyle(document.documentElement).getPropertyValue(fncClass);
$('#' + fncClass).val(fncColor);
$('#' + fncClass).addClass('jscolor');
var myPicker = new JSColor('#' + fncClass, {preset:'dark'});
}
function swapStyleSheet(fncTheme) {
document.getElementById('theme').setAttribute('href', 'wtk' + fncTheme + '.css');
}
function setCssRoot(fncId,fncColor){
if ((fncId == '--gradient-left') || (fncId == '--gradient-right')){
var fncLeftColor = document.getElementById('--gradient-left').value;
var fncRightColor = document.getElementById('--gradient-right').value;
document.documentElement.style.setProperty('--gradient-color', 'linear-gradient(to right, ' + fncLeftColor + ', ' + fncRightColor + ')');
} else {
document.documentElement.style.setProperty(fncId, fncColor);
}
}
function saveCSS(){
let fncFormData = $('#cssForm').serialize();
let fncFileName = $('#fileName').val();
fncFormData = fncFormData + '&fileName=' + fncFileName;
$.ajax({
type: "POST",
url: 'ajxSaveCSS.php',
data: (fncFormData),
success: function(data) {
M.toast({html: 'Your new CSS file has been created.', classes: 'green rounded'});
let fncSelect = document.getElementById('pickColor');
let fncOpt = document.createElement('option');
fncOpt.value = fncFileName;
fncOpt.innerHTML = fncFileName;
fncSelect.appendChild(fncOpt);
$('select').formSelect();
}
})
}
function ajaxGo(fncPage){
alert('In Wizard Toolkit this would direct user to ' + fncPage + ' page using Single-Page Application methodology.')
}
</script>
<style>
.w72 {
width: 72px !important;
}
</style>
</head>
<body onload="JavaScript:getCssRoot();">
<div id="myNavbar">
<ul id="dropdown1" class="dropdown-content">
<li><a onclick="Javascript:ajaxGo('companyEdit');">Settings</a></li>
<li><a onclick="Javascript:ajaxGo('userList');">Users</a></li>
<li><a onclick="Javascript:ajaxGo('reportViewer');">Reports Viewer</a></li>
<li><a onclick="Javascript:ajaxGo('promoPlanList');">Promotions</a></li>
<li><a onclick="Javascript:ajaxGo('shortenedURLlist');">Shortened URLs</a></li>
</ul>
<ul id="dropdown2" class="dropdown-content">
<li><a onclick="Javascript:ajaxGo('emailTemplates');">Email Templates</a></li>
<li><a onclick="Javascript:ajaxGo('emailHistory');">Email History</a></li>
<li><a onclick="Javascript:ajaxGo('emailWizard');">Bulk Email</a></li>
</ul>
<ul id="dropdown3" class="dropdown-content">
<li><a onclick="Javascript:ajaxGo('wtkBuilder');">WTK Builder</a></li>
<li><a onclick="Javascript:ajaxGo('reportList');">Reports</a></li>
<li><a onclick="Javascript:ajaxGo('lookupList');">Lookups</a></li>
<li><a onclick="Javascript:ajaxGo('pageList');">Page List</a></li>
<li><a onclick="Javascript:ajaxGo('menuSetList');">Menu Sets</a></li>
<li><a onclick="Javascript:ajaxGo('helpList');">Help</a></li>
<li><a onclick="Javascript:ajaxGo('languageList');">Language</a></li>
</ul>
<ul id="dropdown4" class="dropdown-content">
<li><a onclick="Javascript:ajaxGo('loginLogList');">Login Log</a></li>
<li><a onclick="Javascript:ajaxGo('userHistory');">User History</a></li>
<li><a onclick="Javascript:ajaxGo('updateLogList');">Update Logs</a></li>
<li><a onclick="Javascript:ajaxGo('errorLogList');">Error Logs</a></li>
<li><a onclick="Javascript:ajaxGo('failedAttemptList');">Access Fails</a></li>
</ul>
<div class="navbar-fixed">
<nav id="cssNavBar" class="navbar navbar-home">
<div class="nav-wrapper">
<a data-target="phoneSideBar" class="sidenav-trigger right"><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down">
<li><a class="dropdown-trigger" data-target="dropdown1">Client Control<i class="material-icons top-down">arrow_drop_down</i></a></li>
<li><a class="dropdown-trigger" data-target="dropdown2">Email Management<i class="material-icons top-down">arrow_drop_down</i></a></li>
<li><a class="dropdown-trigger" data-target="dropdown3">Site Management<i class="material-icons top-down">arrow_drop_down</i></a></li>
<li><a class="dropdown-trigger" data-target="dropdown4">View Logs<i class="material-icons top-down">arrow_drop_down</i></a></li>
<li><a href="/">Logout</a></li>
</ul>
</div>
</nav>
</div>
<!-- Next is Side Menu for Phones -->
<div class="sidebar-panel">
<ul id="phoneSideBar" class="sidenav side-nav">
<li class="no-padding">
<ul class="collapsible">
<li>
<a class="collapsible-header"><i class="material-icons">arrow_drop_down</i>Client Control</a>
<div class="collapsible-body">
<ul>
<li><a onclick="Javascript:ajaxGo('companyEdit');">Settings</a></li>
<li><a onclick="Javascript:ajaxGo('userList');">Users</a></li>
<li><a onclick="Javascript:ajaxGo('reportViewer');">Reports Viewer</a></li>
<li><a onclick="Javascript:ajaxGo('promoPlanList');">Promotions</a></li>
<li><a onclick="Javascript:ajaxGo('shortenedURLlist');">Shortened URLs</a></li>
</ul>
</div>
</li>
</ul>
<ul class="collapsible">
<li>
<a class="collapsible-header"><i class="material-icons">arrow_drop_down</i>Email Management</a>
<div class="collapsible-body">
<ul>
<li><a onclick="Javascript:ajaxGo('emailTemplates');">Email Templates</a></li>
<li><a onclick="Javascript:ajaxGo('emailHistory');">Email History</a></li>
<li><a onclick="Javascript:ajaxGo('emailWizard');">Bulk Email</a></li>
</ul>
</div>
</li>
</ul>
<ul class="collapsible">
<li>
<a class="collapsible-header"><i class="material-icons">arrow_drop_down</i>Site Management</a>
<div class="collapsible-body">
<ul>
<li><a onclick="Javascript:ajaxGo('wtkBuilder');">WTK Builder</a></li>
<li><a onclick="Javascript:ajaxGo('reportList');">Reports</a></li>
<li><a onclick="Javascript:ajaxGo('lookupList');">Lookups</a></li>
<li><a onclick="Javascript:ajaxGo('pageList');">Page List</a></li>
<li><a onclick="Javascript:ajaxGo('menuSetList');">Menu Sets</a></li>
<li><a onclick="Javascript:ajaxGo('helpList');">Help</a></li>
<li><a onclick="Javascript:ajaxGo('languageList');">Language</a></li>
</ul>
</div>
</li>
</ul>
<ul class="collapsible">
<li>
<a class="collapsible-header"><i class="material-icons">arrow_drop_down</i>View Logs</a>
<div class="collapsible-body">
<ul>
<li><a onclick="Javascript:ajaxGo('loginLogList');">Login Log</a></li>
<li><a onclick="Javascript:ajaxGo('userHistory');">User History</a></li>
<li><a onclick="Javascript:ajaxGo('updateLogList');">Update Logs</a></li>
<li><a onclick="Javascript:ajaxGo('errorLogList');">Error Logs</a></li>
<li><a onclick="Javascript:ajaxGo('failedAttemptList');">Access Fails</a></li>
</ul>
</div>
</li>
</ul>
</li>
<li><a href="/">Logout</a></li>
</ul>
</div>
<div id="mainPage">
<div class="container">
<h3>CSS Maker <small><a href="/">by Wizards Toolkit</a></small></h3><br>
<h4>Choose Colors <small> <a target="_blank" href="WTKcssMaker.zip">download full set</a></small></h4>
<p>Set the CSS variables which will affect how all elements on your page look. For help with trending
color palettes, check out <a target="_blank" href="https://coolors.co/palettes/trending">coolors.co</a>.</p>
<form id="cssForm" method="post">
<div class="row">
<div class="input-field col m2 s12">
<input type="text" class="form-input w72" oninput="JavaScript:setCssRoot(this.id, this.jscolor)" id="--gradient-left" name="--gradient-left" value="">
<label class="active" for="--gradient-left">Gradient Left</label>
</div>
<div class="input-field col m2 s12">
<input type="text" class="form-input w72" oninput="JavaScript:setCssRoot(this.id, this.jscolor)" id="--gradient-right" name="--gradient-right" value="">
<label class="active" for="--gradient-right">Gradient Right</label>
</div>
<div class="input-field col m2 s12">
<input type="text" class="form-input w72" oninput="JavaScript:setCssRoot(this.id, this.jscolor)" id="--btn-color" name="--btn-color" value="">
<label class="active" for="--btn-color">Button Color</label>
</div>
<div class="input-field col m2 s12">
<input type="text" class="form-input w72" oninput="JavaScript:setCssRoot(this.id, this.jscolor)" id="--btn-border-color" name="--btn-border-color" value="">
<label class="active" for="--btn-border-color">Button Border</label>
</div>
<div class="input-field col m2 s12">
<input type="text" class="form-input w72" oninput="JavaScript:setCssRoot(this.id, this.jscolor)" id="--btn-hover" name="--btn-hover" value="">
<label class="active" for="--btn-hover">Button Hover</label>
</div>
<div class="input-field col m2 s12">
<input type="text" class="form-input w72" oninput="JavaScript:setCssRoot(this.id, this.jscolor)" id="--href-link" name="--href-link" value="">
<label class="active" for="--href-link">Href Links</label>
</div>
<div class="input-field col m2 s12">
<input type="text" class="form-input w72" oninput="JavaScript:setCssRoot(this.id, this.jscolor)" id="--active-label" name="--active-label" value="">
<label class="active" for="--active-label">Active Label</label>
</div>
<div class="input-field col m2 s12">
<input type="text" class="form-input w72" oninput="JavaScript:setCssRoot(this.id, this.jscolor)" id="--light-theme-focus" name="--light-theme-focus" value="">
<label class="active" for="--light-theme-focus">Light Theme Focus</label>
</div>
<div class="input-field col m2 s12">
<input type="text" class="form-input w72" oninput="JavaScript:setCssRoot(this.id, this.jscolor)" id="--dark-theme-focus" name="--dark-theme-focus" value="">
<label class="active" for="--dark-theme-focus">Dark Theme Focus</label>
</div>
<div class="input-field col m2 s12">
<input type="text" class="form-input w72" oninput="JavaScript:setCssRoot(this.id, this.jscolor)" id="--bg-second-color" name="--bg-second-color" value="">
<label class="active" for="--bg-second-color">Second Background</label>
</div>
<div class="input-field col m3 s12">
<button type="button" data-target="modalWTK" class="btn btn-save modal-trigger tooltipped" data-tooltip="Save as CSS File">Save File</button>
</div>
</form>
</div>
<div class="card b-shadow">
<div class="card-content">
<div class="row">
<div class="col s10 offset-s1">
<br>
<div class="card bg-second b-shadow">
<div class="card-content">
<form id="wtkForm" name="wtkForm" method="post">
<h5>Select Theme and Color</h5>
<div class="row">
<div class="input-field col m6 s12">
Choose Theme
<p>
<label for="pickThemeL">
<input class="with-gap" onclick="JavaScript:swapStyleSheet(this.value)" type="radio" id="pickThemeL" name="pickTheme" value="Light" <?php echo $pgLightChecked; ?>>
<span>Light</span>
</label>
</p>
<p>
<label for="pickThemeD">
<input class="with-gap" onclick="JavaScript:swapStyleSheet(this.value)" type="radio" id="pickThemeD" name="pickTheme" value="Dark" <?php echo $pgDarkChecked; ?>>
<span>Dark</span>
</label>
</p>
</div>
<div class="input-field col m6 s6">
<select id="pickColor" name="pickColor">
<?php echo $pgColorSelect; ?>
</select>
<label for="pickColor" class="active">Choose Color</label>
</div>
<div class="col s12 center">
<button type="button" class="btn-cancel b-shadow waves-effect waves-light">Cancel</button>
<button type="submit" class="btn-action-bg btn-save b-shadow waves-effect waves-light">Change Color</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!--<hr>-->
<form id="notUsedForm">
<div class="row">
<div class="input-field col m6 s12">
<blockquote>Example blockquote tag where MaterializeCSS shows a bar on left.
<ul>
<li><a target="_blank" href="https://wizardstoolkit.com/">Wizards Toolkit</a> low-code development library</li>
<li><a target="_blank" href="https://wizbits.me/">WizBits</a> shortened URL service</li>
<li><a target="_blank" href="https://extragood.info/">Mage Page</a> free landing page service</li>
<li><a target="_blank" href="https://materializecss.com/">MaterializeCSS</a> modern responsive front-end framework based on Material Design</li>
</ul>
</blockquote>
</div>
<div class="input-field col m6 s12">
<table>
<tr style="border: unset;">
<td width="150px">
<img id="imgPreview" src="/wz/imgs/noPhotoAvail.png" class="materialboxed" width="150">
</td>
<td>
<label for="wzUpload" class="fileUpload">
<input type="file" id="wzUpload" name="wzUpload" accept="image/*" style="display: none;">
<span class="btn-floating"><i class="material-icons">file_upload</i></span>
User Photo
</label>
</td>
</tr>
</table>
<div id="photoProgressDIV" class="progress hide">
<div id="photoProgress" class="determinate" style="width: 0%"></div>
</div>
<div id="uploadStatus"></div>
<span id="uploadFileSize"></span>
<span id="uploadProgress"></span>
</div>
</div>
<div class="row">
<div class="input-field col m6 s12">
<input type="text" id="someText" name="someText" value="">
<label class="active" for="someText">Some Text Field</label>
</div>
<div class="input-field col m6 s12">
<input type="email" class="validate" id="someEmail" name="someEmail" value="yourEmail@me.com">
<label class="active" for="someEmail">Email with Validation</label>
<span class="helper-text" data-error="invalid email format" data-success="valid email format"></span>
</div>
</div>
<div class="row">
<div class="input-field col m6 s12">
<i class="material-icons prefix">phone</i>
<input type="tel" id="somePhone" name="somePhone" value="">
<label for="somePhone">Phone</label>
</div>
<div class="input-field col m6 s12">
<select id="someSelect" name="someSelect">
<option value="Emp">Customer Service</option>
<option value="Mgr">Manager</option>
<option value="Tech">Tech Support</option>
</select>
<label for="someSelect" class="active">Select Drop List</label>
</div>
</div>
<div class="row">
<div class="input-field col m3 s6">
<input type="text" class="datepicker" id="someDate" name="someDate" style="width: unset !important;">
<label class="active" for="someDate">Some Date</label>
</div>
<div class="input-field col m3 s6">
<input type="text" class="timepicker" id="someTime" name="someTime">
<label class="active" for="someTime">Some Time</label>
</div>
<div class="input-field col m6 s12">
<textarea id="someTextarea" class="materialize-textarea"></textarea>
<label for="someTextarea" class="active">Textarea Example</label>
</div>
</div>
<div class="row">
<div class="input-field col m4 s12">
<p>
<label for="someCanPrint">
<input type="checkbox" value="Y" id="someCanPrint" name="someCanPrint" checked>
<span>Checkbox Example</span>
</label>
</p>
</div>
<div class="input-field col m4 s12">
Switch Example
<div class="switch">
<label>
Off
<input type="checkbox" checked="checked">
<span class="lever"></span>
On
</label>
</div>
</div>
<div class="input-field col m4 s12">
Range Example
<p class="range-field">
<input type="range" id="someRange" min="0" max="50" />
</p>
</div>
</div>
</form>
</div>
</div>
<h2>Report List</h2>
<br>
<div class="search-result">
<h6>Quick Filters
<small id="filterReset"><button type="button" class="btn-action-bg btn-save waves-effect waves-light right">Reset List</button></small>
</h6>
<form method="post" name="wtkFilterForm" id="wtkFilterForm">
<div class="input-field">
<input type="search" class="input-search2" name="wtkFilter" id="wtkFilter" value="" placeholder="enter partial Report Name to search for">
<input type="search" class="input-search2" name="wtkFilter2" id="wtkFilter2" value="" placeholder="enter partial Report Type to search for">
<button id="wtkFilterBtn" type="button" class="btn-action-bg waves-effect waves-light"><i class="material-icons">search</i></button>
</div>
</form>
</div>
<table id="wz-reports" class="striped">
<thead>
<tr>
<th>Report Name</th>
<th>Report Type</th>
<th><div align="center">View Order</div></th>
<th><div align="center">View</div></th>
<th class="right"><a class="btn-floating btn btn-primary btn-sm"><i class="material-icons">add</i></a></th>
</tr>
</thead>
<tbody>
<tr id="DwzReports1">
<td>User Contact Information</td>
<td>Core Info</td>
<td><div align="center">10</div></td>
<td><div align="center"><a class="btn-floating"><i class="material-icons">format_list_numbered</i></a></div></td>
<td class="right" nowrap><a class="btn-floating"><i class="material-icons">edit</i></a>
<span class="btn btn-sm btn-floating"><i class="material-icons">delete</i></span></td>
</tr>
<tr id="DwzReports2">
<td>Page Views by User</td>
<td>Analytics</td>
<td><div align="center">20</div></td>
<td><div align="center"><a class="btn-floating"><i class="material-icons">insert_chart</i></a></div></td>
<td class="right" nowrap><a class="btn-floating"><i class="material-icons">edit</i></a>
<span class="btn btn-sm btn-floating"><i class="material-icons">delete</i></span></td>
</tr>
<tr id="DwzReports5">
<td>User History by Date Range</td>
<td>Core Info</td>
<td><div align="center">30</div></td>
<td><div align="center"><a class="btn-floating"><i class="material-icons">format_list_numbered</i></a></div></td>
<td class="right" nowrap><a class="btn-floating"><i class="material-icons">edit</i></a>
<span class="btn btn-sm btn-floating"><i class="material-icons">delete</i></span></td>
</tr>
<tr id="DwzReports7">
<td>Revenue Analytics</td>
<td>Accounting</td>
<td><div align="center">40</div></td>
<td><div align="center"><a class="btn-floating"><i class="material-icons">format_list_numbered</i></a></div></td>
<td class="right" nowrap><a class="btn-floating"><i class="material-icons">edit</i></a>
<span class="btn btn-sm btn-floating"><i class="material-icons">delete</i></span></td>
</tr>
<tr id="wzReportsfooter">
<td class="navFooterAlign" align="left" colspan="5">1 - <span id="wzReportsMaxOnPage">4</span>
of <span id="wzReportsMaxRows">4</span>
</td>
</tr>
</tbody>
</table>
<br>
<div class="card bg-second b-shadow">
<div class="card-content">
<p>This free utility was built by <a target="_blank" href="https://programminglabs.com/">Programming Labs</a>
for making color themes for <a target="_blank" href="https://wizardstoolkit.com/">Wizards Toolkit</a> websites.
Feel free to modify it for your own needs.</p>
<p>In your HTML page call the CSS files in this order:
<blockquote>
<ul>
<li>materialize.min.css</li>
<li>wtk{<strong>YourColor</strong>}.css</li>
<li>wtkLight.css or wtkDark.css</li>
<li>wtkGlobal.css</li>
</ul>
</blockquote>
</p>
<p>And remember when using MaterializeCSS with jQuery to always declare jQuery.js <em>before</em> materialize.min.js.</p>
</div>
</div>
</div>
</div>
<div id="modalWTK" class="modal content">
<div class="modal-content">
<form id="saveCSSform">
<div class="input-field">
<input type="text" class="form-input" id="fileName" name="fileName" value="">
<label class="active" for="fileName">Choose File Name</label>
<span class="helper-text">wtk will be prepended and file will be saved in this folder</span>
</div>
</form>
</div>
<div id="modFooter" class="modal-footer right">
<a class="btn btn-mini btn-cancel modal-close waves-effect">Close</a>
<a class="btn btn-mini btn-save modal-close waves-effect" onclick="JavaScript:saveCSS()">Save</a>
</div>
</div>
</body>
</html>
|
Download
