From eebe7d1681c477f390ba7aa63d84958c8981e78f Mon Sep 17 00:00:00 2001 From: Veno Server Date: Tue, 25 Aug 2009 03:53:19 -0500 Subject: [PATCH] Started building a mini layout-color-switcher to test applying color formulas to a layout scheme. Ended up getting drawn away for an hour tracking down a bug for work, but I wanted to make sure this stuff was committed - I'll probably pick this up later tonight, provided I don't pass out or something. --- css/example.css | 56 ++++++++++++++++ index.php | 7 +- index2.php | 175 ++++++++++++++++++++++++++++++++++++++++++++++++ js/franz.js | 5 +- 4 files changed, 241 insertions(+), 2 deletions(-) create mode 100644 index2.php diff --git a/css/example.css b/css/example.css index b5b5944..9358260 100644 --- a/css/example.css +++ b/css/example.css @@ -172,3 +172,59 @@ a:hover { text-decoration: underline; } .hideme { display: none; } + + +/* CSS for example layout - 4AM code, hush ;P */ +#testLayout { + display: none; + position: fixed; + top: 20px; + right: 20px; + width: 200px; + height: 200px; + padding: 5px; + opacity: .7; + background-color: #292929; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -moz-box-shadow: 1px 1px 7px #333; + -webkit-box-shadow: 1px 1px 7px #333; +} + +#testBanner, #testContent { + padding: 5px; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + background-color: #000; +} + +#testBanner { height: 20px; margin: 0 0 5px 0; } +#testContent { height: 155px; } +#testContent p { margin: 0 0 5px 0; } + +#layoutMods { + display: none; + position: absolute; + top: 10px; + left: 10px; + width: 330px; + background-color: #000; + opacity: .8; + padding: 10px 4px; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; +} + +#layoutMods a { + background-color: #498FB2; + border: 1px solid #55A2C9; + padding: 5px 10px 4px; + color: #fff; + text-decoration: none; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + opacity: .8; + margin: 0 0 4px 0; +} + +#layoutMods a:hover { text-decoration: none; opacity: 1; } diff --git a/index.php b/index.php index 6205adb..b829d8d 100644 --- a/index.php +++ b/index.php @@ -139,7 +139,12 @@ + + + + + + +
+ Main Background + Header Background + Content Background +
+ +
+
+ This is an example layout +
+
+

+ This is an example layout to test colors with. +

+

+ Click on a color to set it for one of these layout sections! +

+
+
+ +

Franz - client side color swatches

+ +
+ Upload an image +
+ + +
+ +
+
+ + +
+
+ + +
+

Try out: + lol.png, + testjubs.jpg, + stars.jpg, + 1600.jpg, + fallout.jpg +

+ +
+ +
+ +
+

+ Sort by Hue + Saturation (HSV) + Saturation (HSL) + Value (HSV) + Lightness (HSL) +

+
+ +
+
+ +
+
+ + + + + + + diff --git a/js/franz.js b/js/franz.js index d090490..c880fde 100644 --- a/js/franz.js +++ b/js/franz.js @@ -169,7 +169,10 @@ var franz = { } document.getElementById("log_colors").innerHTML = docStr; - if(typeof jQuery != "undefined") $("#container_bottom").fadeIn("slow"); + if(typeof jQuery != "undefined") { + $("#container_bottom").fadeIn("fast"); + setTimeout(function() { $("#testLayout").fadeIn("slow"); }, 500); + } else document.getElementById("container_bottom").style.display = "block"; return false;