PHP Classes

File: cssMaker.php

Recommend this page to a friend!
  Classes of Alec Sherman   PHP CSS Editor Maker   cssMaker.php   Download  
File: cssMaker.php
Role: Application script
Content type: text/plain
Description: Primary file for viewing/creating CSS styles
Class: PHP CSS Editor Maker
Visual editor for CSS theme files using templates
Author: By
Last change:
Date: 2 years ago
Size: 25,692 bytes
 

Contents

Class file image Download
<?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> &nbsp;&nbsp; <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> &nbsp; </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>