Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

132 lines (116 sloc) 6.355 kb
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Maciej Ciemborowicz" />
<title>4bit. Terminal Color Scheme Designer</title>
<meta name="description" content="This application allows you to create custom theme for a Linux terminal and export it to the .Xresources / .Xdefaults configuration file (xterm, aterm, eterm, rxvt, urxvt) and *.colorscheme (konsole, yakuake)."/>
<link href="css/merged.css" rel="stylesheet" />
<style id="outline-fix"></style>
</head>
<body onmousedown="document.getElementById('outline-fix').innerHTML='a{outline:none}';" onkeydown="document.getElementById('outline-fix').innerHTML=''">
<div id="fb-root"></div>
<div class="wrapper">
<header>
<h1><a href="http://ciembor.github.com/4bit"><span class="blue">4</span><span class="cyan">b</span><span class="magenta">i</span><span class="red">t</span></a> Terminal Color Scheme Designer</h1>
<section id="skews">
<div id="social-media" class="skew">
<div class="inner">
<div id="fb-sux">
<div id="fb" class="fb-like" data-send="false" data-font="verdana" data-layout="button_count" data-width="0" data-colorscheme="light" data-show-faces="true"></div>
</div>
<div class="buttons">
<a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-via="ciembor">Tweet</a>
<div class="g-plusone" data-size="medium" data-annotation="none"></div>
</div>
</div>
</div>
<a href="#" id="get-scheme-button" class="skew"><span>Get Scheme</span></a>
</section>
</header>
<div class="distance"></div>
<div id="app" class="vertical-center">
<section id="display"></section>
<section id="controls">
<section id="global-properties">
<h2>Global Properties</h2>
<h3>Hue: </h3>
<div id="hue-slider"></div>
<h3>Saturation: </h3>
<div id="saturation-slider"></div>
</section>
<section id="lightness">
<h2>Lightness</h2>
<h3>Color: </h3>
<div id="lightness-slider"></div>
<h3>Black: </h3>
<div id="black-slider"></div>
<h3>White: </h3>
<div id="white-slider"></div>
</section>
<section id="advanced">
<h2>Advanced</h2>
<ul>
<li><a href="#dye">Dye</a></li>
<li><a href="#background">Background</a></li>
<li><a href="#foreground">Foreground</a></li>
</ul>
<div id="dye">
<input type="text" id="dye-colorpicker" />
<form class="radio-group" id="dye-radio">
<input id="dye-1" type="radio" name="dye" value="none" checked="checked" /><label for="dye-1">none</label>
<input id="dye-2" type="radio" name="dye" value="all" /><label for="dye-2">all</label>
<input id="dye-3" type="radio" name="dye" value="achromatic" /><label for="dye-3">achromatic</label>
<input id="dye-4" type="radio" name="dye" value="color" /><label for="dye-4">color</label>
</form>
</div>
<div id="background">
<input type="text" id="background-colorpicker" />
<form class="radio-group" id="background-radio">
<input id="bg-1" type="radio" name="background" value="custom" checked="checked" /><label for="bg-1">custom</label>
<input id="bg-2" type="radio" name="background" value="black" /><label for="bg-2">black</label>
<input id="bg-3" type="radio" name="background" value="bright_black" /><label for="bg-3">bright_black</label>
<input id="bg-4" type="radio" name="background" value="white" /><label for="bg-4">white</label>
<input id="bg-5" type="radio" name="background" value="bright_white" /><label for="bg-5">bright_white</label>
</form>
</div>
<div id="foreground">
<input type="text" id="foreground-colorpicker" />
<form class="radio-group">
<input id="fg-1" type="radio" name="foreground" value="custom" checked="checked" /><label for="fg-1">custom</label>
<input id="fg-2" type="radio" name="foreground" value="black" /><label for="fg-2">black</label>
<input id="fg-3" type="radio" name="foreground" value="bright_black" /><label for="fg-3">bright_black</label>
<input id="fg-4" type="radio" name="foreground" value="white" /><label for="fg-4">white</label>
<input id="fg-5" type="radio" name="foreground" value="bright_white" /><label for="fg-5">bright_white</label>
</form>
</div>
</section>
</section>
</div>
</div>
<footer id="footer">
<p class="left"><a href="http://github.com/ciembor/4bit" target="_blank"><img src="images/github.png" alt="" /> Fork 4bit on GitHub.</a></p>
<p class="right">Developed by <a href="http://ciemborowicz.pl" rel="me" target="_blank">Maciej Ciemborowicz</a> <a href="https://twitter.com/ciembor" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false">follow</a> and <a href="https://github.com/ciembor/4bit#contributors" target="_blank">contributors</a> in 2012.</p>
</footer>
<div id="dialog-modal" title="Export scheme to the configuration file">
<ul>
<li>
<p>xterm / aterm / rxvt / urxvt <a href="#" target="_blank" id="xresources-button" class="get-scheme-link">.Xresources</a></p>
</li>
<li>
<p>konsole / yakuake <a href="#" target="_blank" id="konsole-button" class="get-scheme-link">*.colorscheme</a>
</li>
</ul>
</div>
<!-- JavaScript ------------------------------------------------------------------------------>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>window.jQuery || document.write("<script src='lib/js/jquery-1.8.0.min.js'>\x3C/script>")</script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
<script>window._ || document.write("<script src='lib/js/underscore-min.js'>\x3C/script>")</script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
<script>window.Backbone || document.write("<script src='lib/js/backbone-min.js'>\x3C/script>")</script>
<script src="js/compiled.js"></script>
<script>_4bit();</script>
<!-- End of JavaScript ----------------------------------------------------------------------->
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.