300 lines
15 KiB
HTML
300 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<title>Mabox Colorizer</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="./css/w3.css">
|
|
<style>
|
|
body{
|
|
background-color:#222222;
|
|
color: #909090
|
|
}
|
|
div.fixed {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
width: 200px;
|
|
}
|
|
div.fixeddown {
|
|
position: fixed;
|
|
bottom:0;
|
|
right:0;
|
|
}
|
|
</style>
|
|
<body>
|
|
|
|
<div class="w3-sidebar w3-bar-block w3-dark-grey w3-card" style="width:160px">
|
|
<div class="w3-center w3-margin"><img src="./img/colorizer.png" onclick="openTab(event, 'Colorizer')"></div>
|
|
<button class="w3-bar-item w3-button w3-small tablink" onclick="openTab(event, 'Colorizer')">Colorizer</button>
|
|
<button class="w3-bar-item w3-button w3-small tablink" onclick="openTab(event, 'Openbox')">Motyw Openbox</button>
|
|
<button class="w3-bar-item w3-button w3-small tablink" onclick="openTab(event, 'Jgmenu')">Menu/Panele Boczne</button>
|
|
<button class="w3-bar-item w3-button w3-small tablink" onclick="openTab(event, 'Conky')">Conky</button>
|
|
<button class="w3-bar-item w3-button w3-small tablink" onclick="openTab(event, 'Wallpapers')">Tapety</button>
|
|
<button class="w3-bar-item w3-button w3-small tablink" onclick="openTab(event, 'Gradients')">Gradienty</button>
|
|
<button class="w3-bar-item w3-button w3-small tablink" onclick="openTab(event, 'Tint2')">Panel Tint2</button>
|
|
<button class="w3-bar-item w3-button w3-small tablink" onclick="openTab(event, 'Terminal')">Kolory Terminala</button>
|
|
<button class="w3-bar-item w3-button w3-small tablink" onclick="openTab(event, 'Save')">Zapisywanie</button>
|
|
<a class="w3-button w3-round w3-tiny w3-lime w3-margin" href="run://colorizer -s">Colorizer</a>
|
|
</div>
|
|
|
|
<div style="margin-left:160px;" class="w3-small">
|
|
|
|
<section id="Colorizer" class="w3-container tab" style="min-height:100vh;">
|
|
|
|
<div class="w3-container">
|
|
<img src="/usr/share/mabox-colorizer/img/colorizer.png" class="w3-margin"/>
|
|
<h2>Mabox Colorizer <span class="w3-tiny">beta</span></h2>
|
|
<small>(Colorizer jest w fazie szybkiego rozwoju ... ta pomoc może być niekompletna przed wydaniem 1.0)</small>
|
|
<p>narzędzie do ustawiania Pulpitu Mabox Linux</p>
|
|
<p>Z łatwością zmienisz wygląd:
|
|
<ul>
|
|
<li><strong>motywu Openbox</strong> (dekoracje okien)</li>
|
|
<li><strong>Menu</strong>, <strong>Paneli bocznych</strong> oraz innych <i>bazujących na jgmenu</i> <strong>narzędzi Mabox</strong></li>
|
|
<li><strong>Conky</strong></li>
|
|
<li><strong>PyRadio</strong> - Internetowy Radio Odtwarzacz</li>
|
|
</ul></p>
|
|
<p>NOWE!!</p><p><strong>Automatyczne generowanie kolorystyki</strong> na podstawie <strong>kolorów tapety</strong></p>
|
|
<a class="w3-button w3-round w3-small w3-lime w3-margin" href="run://colorizer -s">Uruchom Colorizer</a>
|
|
</div>
|
|
<div class="fixeddown">
|
|
<div class="w3-bar w3-tiny">
|
|
<div class="w3-bar-item">Mabox Linux Linki: </div>
|
|
<a href="https://maboxlinux.org" class="w3-bar-item w3-hover-green">www</a>
|
|
<a href="https://forum.maboxlinux.org" class="w3-bar-item w3-hover-green">forum</a>
|
|
<a href="https://manual.maboxlinux.org/en" class="w3-bar-item w3-hover-green">manual</a>
|
|
<a href="https://ko-fi.com/maboxlinux" class="w3-bar-item w3-hover-green">wesprzyj</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="Openbox" class="w3-container tab" style="display:none;min-height:100vh;">
|
|
<div class="fixed"><a class="w3-button w3-round w3-tiny w3-lime w3-margin w3-display-topright" href="run://colorizer-ob -s">Launch OBtheme module</a></div>
|
|
<h2>Motyw Openbox</h2>
|
|
<p>The Openbox module allows you to easily customize the appearance of window decorations.</p>
|
|
<p>It works with MBcolors theme - defaut one.</p>
|
|
|
|
<p>You can change some basic settings directly from this screen. For much more options, fine-tunning and colors choices launch OBtheme module.</p>
|
|
|
|
<h4>Kolor tła dla aktywnego okna</h4>
|
|
<div class="w3-panel w3-border w3-dark-grey">
|
|
<p>You can change active window titlebar color by clicking circles below.</p>
|
|
<p class="w3-center w3-margin">
|
|
<a class="w3-btn w3-circle w3-small w3-margin-bottom" style="background-color:#DDDDDD" href="run://obtctl clractivebg #DDDDDD"> </a>
|
|
<a class="w3-btn w3-circle w3-small w3-margin-bottom" style="background-color:#a4c400" href="run://obtctl clractivebg #a4c400"> </a>
|
|
<a class="w3-btn w3-circle w3-small w3-margin-bottom" style="background-color:#60a917" href="run://obtctl clractivebg #60a917"> </a>
|
|
<a class="w3-btn w3-circle w3-small w3-margin-bottom" style="background-color:#008a00" href="run://obtctl clractivebg #008a00"> </a>
|
|
<a class="w3-btn w3-circle w3-small w3-margin-bottom" style="background-color:#00aba9" href="run://obtctl clractivebg #00aba9"> </a>
|
|
<a class="w3-btn w3-circle w3-small w3-margin-bottom" style="background-color:#1ba1e2" href="run://obtctl clractivebg #1ba1e2"> </a>
|
|
<a class="w3-btn w3-circle w3-small w3-margin-bottom" style="background-color:#3e65ff" href="run://obtctl clractivebg #3e65ff"> </a>
|
|
<a class="w3-btn w3-circle w3-small w3-margin-bottom" style="background-color:#0050ef" href="run://obtctl clractivebg #0050ef"> </a>
|
|
<a class="w3-btn w3-circle w3-small w3-margin-bottom" style="background-color:#6a00ff" href="run://obtctl clractivebg #6a00ff"> </a>
|
|
<a class="w3-btn w3-circle w3-small w3-margin-bottom" style="background-color:#aa00ff" href="run://obtctl clractivebg #aa00ff"> </a>
|
|
<a class="w3-btn w3-circle w3-small w3-margin-bottom" style="background-color:#f472d0" href="run://obtctl clractivebg #f472d0"> </a>
|
|
<a class="w3-btn w3-circle w3-small w3-margin-bottom" style="background-color:#d80073" href="run://obtctl clractivebg #d80073"> </a>
|
|
<a class="w3-btn w3-circle w3-small w3-margin-bottom" style="background-color:#a20025" href="run://obtctl clractivebg #a20025"> </a>
|
|
<a class="w3-btn w3-circle w3-small w3-margin-bottom" style="background-color:#e51400" href="run://obtctl clractivebg #e51400"> </a>
|
|
<a class="w3-btn w3-circle w3-small w3-margin-bottom" style="background-color:#fa6800" href="run://obtctl clractivebg #fa6800"> </a>
|
|
<a class="w3-btn w3-circle w3-small w3-margin-bottom" style="background-color:#f0a30a" href="run://obtctl clractivebg #f0a30a"> </a>
|
|
<a class="w3-btn w3-circle w3-small w3-margin-bottom" style="background-color:#e3c800" href="run://obtctl clractivebg #e3c800"> </a>
|
|
<a class="w3-btn w3-circle w3-small w3-margin-bottom" style="background-color:#825a2c" href="run://obtctl clractivebg #825a2c"> </a>
|
|
<a class="w3-btn w3-circle w3-small w3-margin-bottom" style="background-color:#6d8764" href="run://obtctl clractivebg #6d8764"> </a>
|
|
<a class="w3-btn w3-circle w3-small w3-margin-bottom" style="background-color:#647687" href="run://obtctl clractivebg #647687"> </a>
|
|
<a class="w3-btn w3-circle w3-small w3-margin-bottom" style="background-color:#76608a" href="run://obtctl clractivebg #76608a"> </a>
|
|
<a class="w3-btn w3-circle w3-small w3-margin-bottom" style="background-color:#87794e" href="run://obtctl clractivebg #87794e"> </a>
|
|
<a class="w3-btn w3-circle w3-small w3-margin-bottom" style="background-color:#a0522d" href="run://obtctl clractivebg #a0522d"> </a>
|
|
<a class="w3-btn w3-circle w3-small w3-margin-bottom" style="background-color:#222222" href="run://obtctl clractivebg #222222"> </a>
|
|
</p>
|
|
</div>
|
|
<em>Note!<br />
|
|
Changing the background color will also set:
|
|
<ul>
|
|
<li>border color to the same color</li>
|
|
<li>computed BGCOLOR_TO color for a subtle gradient</li>
|
|
<li>accent color in Menu, Sidepanels and other jgmenu-based Mabox tools</li>
|
|
</ul>
|
|
You can change all of them to you liking afterwards.
|
|
</em>
|
|
<hr />
|
|
<h4>Przyciski</h4>
|
|
<p>Click icons below to change buttons</p>
|
|
<table class="w3-table w3-bordered w3-dark-grey w3-small w3-centered">
|
|
<tr class="w3-teal">
|
|
<th>Tiny</th>
|
|
<th>Normal</th>
|
|
<th>Bold</th>
|
|
<th>Dots</th>
|
|
</tr>
|
|
<tr>
|
|
<td><a href="run://obtctl buttons tiny"><img src="./img/tiny.png"></a></td>
|
|
<td><a href="run://obtctl buttons normal"><img src="./img/normal.png"></a></td>
|
|
<td><a href="run://obtctl buttons bold"><img src="./img/bold.png"></a></td>
|
|
<td><a href="run://obtctl buttons dots"><img src="./img/dots.png"></a></td>
|
|
</tr>
|
|
</table>
|
|
<hr />
|
|
<h4>Gradienty</h4>
|
|
<p>Openbox title bar can use various types of gradients...</p>
|
|
<table class="w3-table w3-bordered w3-dark-grey w3-small">
|
|
<tr class="w3-teal">
|
|
<th>Gradient type</th>
|
|
<th>Image (click to apply)</th>
|
|
</tr>
|
|
<tr>
|
|
<td>Solid color (no gradient)</td>
|
|
<td><a href="run://obtctl gradient solid"><img src="./img/solid.png"></a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Vertical</td>
|
|
<td><a href="run://obtctl gradient vertical"><img src="./img/vertical.png"></a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Horizontal</td>
|
|
<td><a href="run://obtctl gradient horizontal"><img src="./img/horizontal.png"></a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>MirrorHorizontal</td>
|
|
<td><a href="run://obtctl gradient mirrorhorizontal"><img src="./img/mirrorhorizontal.png"></a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>SplitVertical</td>
|
|
<td><a href="run://obtctl gradient splitvertical"><img src="./img/splitvertical.png"></a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Diagonal</td>
|
|
<td><a href="run://obtctl gradient diagonal"><img src="./img/diagonal.png"></a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>CrossDiagonal</td>
|
|
<td><a href="run://obtctl gradient crossdiagonal"><img src="./img/crossdiagonal.png"></a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Pyramid</td>
|
|
<td><a href="run://obtctl gradient pyramid"><img src="./img/pyramid.png"></a></td>
|
|
</tr>
|
|
<tr>
|
|
<th colspan="2" class="w3-teal">Raised or flat?</th>
|
|
</tr>
|
|
<tr>
|
|
<td>Raised</td>
|
|
<td><a href="run://obtctl raised 1"><img src="./img/raised.png"></a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Flat</td>
|
|
<td><a href="run://obtctl raised 0"><img src="./img/flat.png"></a></td>
|
|
</tr>
|
|
</table>
|
|
<hr />
|
|
|
|
</section>
|
|
|
|
<section id="Jgmenu" class="w3-container tab" style="display:none;min-height:100vh">
|
|
<div class="fixed"><a class="w3-button w3-round w3-tiny w3-lime w3-margin w3-display-topright" href="run://colorizer-menus -s">Launch Menus module</a></div>
|
|
<h2>Menu / Panele boczne</h2>
|
|
<p>Menu / Panele boczne ...</p>
|
|
</section>
|
|
|
|
<section id="Conky" class="w3-container tab" style="display:none;min-height:100vh;">
|
|
<div class="fixed"><a class="w3-button w3-round w3-tiny w3-lime w3-margin w3-display-topright" href="run://colorizer-conky -s">Uruchom moduł Conky</a></div>
|
|
<h2>Conky</h2>
|
|
<p>Mabox dostarcza kilku prostych konfiguracji Conky - możesz je łatwo dostosować za pomocą modułu Conky Colorizera.</p>
|
|
<p>W prosty sposób możesz ustawiać:
|
|
<ul>
|
|
<li>kolor tła lub ustawić przezroczystość</li>
|
|
<li>kolory tekstu</li>
|
|
<li>obramowanie</li>
|
|
<li>pozycję na ekranie</li>
|
|
<li>efekt cienia lub obrysu</li>
|
|
</ul>
|
|
</p>
|
|
<p><strong>Ustawienia globalne</strong> pozwalają na zmiany dla wszystkich instancji Conky od razu.</p>
|
|
|
|
<p><strong>Ustawienia indywidualne</strong> umożliwiają dostosowywanie pojedynczych Conky, co może być bardzo przydatne w przypadku niektórych tapet.</p>
|
|
</section>
|
|
|
|
<section id="Terminal" class="w3-container tab" style="display:none;min-height:100vh">
|
|
<div class="fixed">
|
|
<a class="w3-button w3-round w3-tiny w3-lime w3-margin w3-display-topright" href="termo://theme.sh -i2">Wybierz Motyw Terminala</a>
|
|
</div>
|
|
<h2>Motyw Terminala</h2>
|
|
<p>Mabox comes with many terminal themes available (~400)</p>
|
|
<p>The interactive selector will help you find a suitable theme</p>
|
|
<p>You can run terminal theme selector any time from cli by <strong>th</strong> alias</p>
|
|
<img src="img/theme.sh.png">
|
|
</section>
|
|
<section id="Tint2" class="w3-container tab" style="display:none;min-height:100vh;">
|
|
<h2>Panel Tint2</h2>
|
|
<p>Moduł Tint2 Colorizera nie jest jeszcze dostępny, ale jest w planach.</p>
|
|
<p>Póki co, możesz użyć całkiem fajnego menu konfiguracji panelu.</p>
|
|
<p><a class="w3-button w3-inline w3-round w3-tiny w3-lime" href="run://jgtint2-pipe -s">Menu konfiguracji Tint2</a></p>
|
|
|
|
<p><a class="w3-button w3-inline w3-round w3-tiny w3-lime" href="run://jgtint2launcher -s">Dodaj/Usuń Programy do launchera</a></p>
|
|
</section>
|
|
<section id="Wallpapers" class="w3-container tab" style="display:none;min-height:100vh;">
|
|
<div class="fixed"><a class="w3-button w3-round w3-tiny w3-lime w3-margin w3-display-topright" href="run://jgwallpaperchanger -c">Launch Wallpaper Menu</a></div>
|
|
<h2>Tapety</h2>
|
|
<p>Colorizer automatycznie generuje paletę kolorów z aktualnie ustawionej tapety.</p>
|
|
<p></p>
|
|
</section>
|
|
<section id="Gradients" class="w3-container tab" style="display:none;min-height:100vh;">
|
|
<h2>Gradienty</h2>
|
|
<p>Colorizer dostarcza ponad 300 gotowych, pięknych gradientów.
|
|
Możesz je wykorzystać do dekoracji okien Openbox lub do ustawienia tła menu / paneli bocznych.</p>
|
|
<p></p>
|
|
</section>
|
|
<section id="Save" class="w3-container tab" style="display:none;min-height:100vh;">
|
|
<div class="fixed"><a class="w3-button w3-round w3-tiny w3-lime w3-margin w3-display-topright" href="run://mb-obthemes">Uruchom Manadżera Motywów</a></div>
|
|
<h2>Zapisywanie i przywracanie</h2>
|
|
<p>Jeśli jesteś zadowolony z obecnej konfiguracji, możesz ją zapisać jako meta-motyw co pozwala ją później przywrócić.</p>
|
|
<p>Menadżer Motywów zapisuje:
|
|
<ul>
|
|
<li>Motyw Openbox (dekoracja okien)</li>
|
|
<li>Motyw GTK oraz Ikon</li>
|
|
<li>Tapetę</li>
|
|
<li>Conky</li>
|
|
<li>Motyw Terminala</li>
|
|
<li>Kolory Menu / Paneli bocznych</li>
|
|
<li>Konfigurację panelu Tint2</li>
|
|
</ul>
|
|
</p><a class="w3-button w3-round w3-tiny w3-lime w3-margin" href="run://mb-obthemes">Uruchom Menadżera Motywów</a>
|
|
</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>
|
|
|