163 lines
6.2 KiB
HTML
163 lines
6.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<title>W3.CSS</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
|
|
<body class="w3-dark-grey">
|
|
|
|
<div class="w3-sidebar w3-bar-block w3-dark-grey w3-card" style="width:140px">
|
|
<p></p>
|
|
<button class="w3-bar-item w3-button w3-tiny tablink" onclick="openTab(event, 'Colorizer')">Colorizer</button>
|
|
<button class="w3-bar-item w3-button w3-tiny tablink" onclick="openTab(event, 'Openbox')">Openbox Theme</button>
|
|
<button class="w3-bar-item w3-button w3-tiny tablink" onclick="openTab(event, 'Conky')">Conky</button>
|
|
<button class="w3-bar-item w3-button w3-tiny tablink" onclick="openTab(event, 'Jgmenu')">Menu / Sidepanels</button>
|
|
<button class="w3-bar-item w3-button w3-tiny tablink" onclick="openTab(event, 'Terminal')">Terminal theme</button>
|
|
<button class="w3-bar-item w3-button w3-tiny tablink" onclick="openTab(event, 'Tint2')">Tint2 Panel</button>
|
|
<button class="w3-bar-item w3-button w3-tiny tablink" onclick="openTab(event, 'Save')">Save and Restore</button>
|
|
|
|
</div>
|
|
|
|
<div style="margin-left:140px">
|
|
|
|
<section id="Colorizer" class="w3-container tab w3-display-container" style="min-height:100vh;">
|
|
<a class="w3-button w3-round w3-tiny w3-lime w3-margin w3-display-topright" href="run://colorizer -s">Launch Colorizer</a>
|
|
<div class="w3-padding w3-display-middle w3-center">
|
|
<img src="/usr/share/mabox-colorizer/img/colorizer.png" />
|
|
<h2>Mabox Colorizer</h2>
|
|
<p>a tool to easily customize your Mabox Linux Desktop</p>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<section id="Openbox" class="w3-container tab" style="display:none;min-height:100vh;">
|
|
<a class="w3-button w3-round w3-tiny w3-lime w3-margin w3-display-topright" href="run://colorizer-ob -s">Launch OBtheme module</a>
|
|
<h2>Openbox theme</h2>
|
|
<p>The Openbox module allows you to easily customize the appearance of window decorations.</p>
|
|
|
|
<p>You can change the colors and size of:
|
|
<ul><li>title bar</li><li>border / line</li></ul>
|
|
|
|
</p>
|
|
<h3>Gradients</h3>
|
|
Openbox title bar can use various types of gradients...
|
|
<table class="w3-table-all w3-centered w3-grey w3-tiny">
|
|
<tr>
|
|
<th>Gradient type</th>
|
|
<th>Image (click to see in action)</th>
|
|
</tr>
|
|
<tr>
|
|
<td>Solid color (no gradient)</td>
|
|
<td><a href="run://obtctl gradient solid">[Image here]</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Vertical</td>
|
|
<td><a href="run://obtctl gradient vertical">[Image here]</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Horizontal</td>
|
|
<td><a href="run://obtctl gradient horizontal">[Image here]</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>MirrorHorizontal</td>
|
|
<td><a href="run://obtctl gradient mirrorhorizontal">[Image here]</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>SplitVertical</td>
|
|
<td><a href="run://obtctl gradient splitvertical">[Image here]</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Diagonal</td>
|
|
<td><a href="run://obtctl gradient diagonal">[Image here]</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>CrossDiagonal</td>
|
|
<td><a href="run://obtctl gradient crossdiagonal">[Image here]</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Pyramid</td>
|
|
<td><a href="run://obtctl gradient pyramid">[Image here]</a></td>
|
|
</tr>
|
|
</table>
|
|
|
|
<h3>Raised or flat?</h3>
|
|
<table class="w3-table-all w3-centered w3-grey w3-tiny">
|
|
<tr>
|
|
<td>Raised</td>
|
|
<td><a href="run://obtctl raised 1">[Image here]</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Flat</td>
|
|
<td><a href="run://obtctl raised 0">[Image here]</a></td>
|
|
</tr>
|
|
</table>
|
|
</section>
|
|
|
|
<section id="Conky" class="w3-container tab" style="display:none;min-height:100vh;">
|
|
<a class="w3-button w3-round w3-tiny w3-lime w3-margin w3-display-topright" href="run://colorizer-conky -s">Launch Conky module</a>
|
|
<h2>Conky</h2>
|
|
<p>Conky module ...</p>
|
|
</section>
|
|
<section id="Jgmenu" class="w3-container tab" style="display:none;min-height:100vh">
|
|
<a class="w3-button w3-round w3-tiny w3-lime w3-margin w3-display-topright" href="run://colorizer-menus -s">Launch Menus module</a>
|
|
<h2>Menu / Sidepanels</h2>
|
|
<p>Menu / Sidepanels module ...</p>
|
|
</section>
|
|
<section id="Terminal" class="w3-container tab" style="display:none;min-height:100vh">
|
|
<a class="w3-button w3-round w3-tiny w3-lime w3-margin w3-display-topright" href="run://terminator -x theme.sh -i2;bash">Launch Terminal theme seclector</a>
|
|
<h2>Terminal theme</h2>
|
|
[ IMAGE ]
|
|
<p>Mabox comes with many terminal themes available (~300)</p>
|
|
</section>
|
|
<section id="Tint2" class="w3-container tab" style="display:none;min-height:100vh;">
|
|
<h2>Panel Tint2</h2>
|
|
<p>Colorizer module for Tint2 panel is not available yet - planned</p>
|
|
<p>Use quite powerfull Tint2 config menu for now.</p>
|
|
<p><a class="w3-button w3-inline w3-round w3-tiny w3-lime" href="run://jgtint2-pipe -s">tint2 config menu</a></p>
|
|
</section>
|
|
<section id="Save" class="w3-container tab" style="display:none;min-height:100vh;"><a class="w3-button w3-round w3-tiny w3-lime w3-margin w3-display-topright" href="run://mb-obthemes">Launch Theme Manager</a>
|
|
<h2>Save and Restore</h2>
|
|
<p>If you are satisfied with your configuration, you can save it as a meta-theme so that you can restore it later.</p>
|
|
<p></p>
|
|
</section>
|
|
|
|
|
|
</div>
|
|
|
|
<script>
|
|
function openTab(evt, tabName) {
|
|
var i, x, tablinks;
|
|
x = document.getElementsByClassName("tab");
|
|
for (i = 0; i < x.length; i++) {
|
|
x[i].style.display = "none";
|
|
}
|
|
tablinks = document.getElementsByClassName("tablink");
|
|
for (i = 0; i < x.length; i++) {
|
|
tablinks[i].className = tablinks[i].className.replace(" w3-gray", "");
|
|
}
|
|
document.getElementById(tabName).style.display = "block";
|
|
evt.currentTarget.className += " w3-gray";
|
|
}
|
|
function myFunction() {
|
|
var input, filter, table, tr, td, i;
|
|
input = document.getElementById("myInput");
|
|
filter = input.value.toUpperCase();
|
|
table = document.getElementById("myTable");
|
|
tr = table.getElementsByTagName("tr");
|
|
for (i = 0; i < tr.length; i++) {
|
|
td = tr[i].getElementsByTagName("td")[0];
|
|
if (td) {
|
|
txtValue = td.textContent || td.innerText;
|
|
if (txtValue.toUpperCase().indexOf(filter) > -1) {
|
|
tr[i].style.display = "";
|
|
} else {
|
|
tr[i].style.display = "none";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|
|
|