File "on_off.html"
Full Path: /home/analogde/www/Virtual/work/on_off.html
File size: 12.8 KB
MIME-type: text/html
Charset: utf-8
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>On/Off Flipswitch HTML5/CSS3 Generator - Proto.io</title>
<meta name="description" content="Generate pure CSS3 On/Off flipswitches with animated transitions. As engineered for Proto.io." />
<meta name="keywords" content="on, off, flipswitch, flip,switch, on, off, generator, css3, freebies, proto.io, proto, prototypes, mobile, prototyping,toggle,checkboxes" />
<meta property="og:title" content="On/Off Flipswitch HTML5/CSS3 Generator - Proto.io">
<meta property="og:description" content="Generate pure CSS3 On/Off flipswitches with animated transitions. As engineered for Proto.io.">
<meta property="og:image" content="http://static.proto.io/images/freebies/onoff_facebook_share.png">
<script type="text/javascript" src="http://staticprotoio-proto.netdna-ssl.com/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://staticprotoio-proto.netdna-ssl.com/js/jquery-ui-1.8.18.slider.min.js"></script>
<script type="text/javascript" src="http://staticprotoio-proto.netdna-ssl.com/js/jquery.miniColors.js?5.9.16.0"></script>
<link type="text/css" rel="stylesheet" href="http://staticprotoio-proto.netdna-ssl.com/js/css/jquery.miniColors.css?5.9.16.0">
<script type="text/javascript" src="http://staticprotoio-proto.netdna-ssl.com/js/jquery.snippet.js?5.9.16.0"></script>
<link type="text/css" rel="stylesheet" href="http://staticprotoio-proto.netdna-ssl.com/js/css/jquery.snippet.min.css?5.9.16.0">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400,600">
<link rel="stylesheet" type="text/css" href="/en/fonts/webfonts.css?5.9.16.0">
<script type="text/javascript" src="http://staticprotoio-proto.netdna-ssl.com/js/freebies.js?5.9.16.0"></script>
<link type="text/css" rel="stylesheet" href="http://staticprotoio-proto.netdna-ssl.com/css/freebies.css?5.9.16.0">
<style id="onoffswitch-style">
.onoffswitch {
position: relative; width: 90px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #999999; border-radius: 20px;
}
.onoffswitch-inner {
width: 200%; margin-left: -100%;
-moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
-o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.onoffswitch-inner:before {
contents: "ON";
padding-left: 10px;
background-color: #2FCCFF; color: #FFFFFF;
}
.onoffswitch-inner:after {
contents: "OFF";
padding-right: 10px;
background-color: #EEEEEE; color: #999999;
text-align: right;
}
.onoffswitch-switch {
width: 18px; margin: 6px;
background: #FFFFFF;
border: 2px solid #999999; border-radius: 20px;
position: absolute; top: 0; bottom: 0; right: 56px;
-moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
-o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}
</style>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script>
$(document).ready(function(){
onoff.init();
onoff.renderCss(true);
onoff.renderHtml();
});
</script>
</head>
<body>
<img src="http://staticprotoio-proto.netdna-ssl.com/images/freebies/onoff_pinterest.png" class="pinterest-img">
<div class="header">
<div class="page-margins">
<h1>On/Off FlipSwitch</h1>
<p class="subheader">Generate pure CSS3 On/Off flipswitches with animated transitions.</p>
</div>
</div>
<div id="component-demo-wrapper">
<div class="page-margins">
<a id="as-seen-on-header" href="http://proto.io" target="_blank"></a>
</div>
<div id="component-demo-container">
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="onoffswitch1" checked>
<label class="onoffswitch-label" for="onoffswitch1">
<div class="onoffswitch-inner"></div>
<div class="onoffswitch-switch"></div>
</label>
</div>
</div>
</div>
<a href="/freebies/" id="more-freebies">More freebies</a>
<div class="page-margins">
<div id="supported-browsers">
<div class="supported-full"></div>
<div class="supported-note opera"><div class="tooltip">A bug in Opera overflows content outside of the container's curved corners. Switches with a large border-radius setting may look broken.</div></div>
<div class="supported-note ie"><div class="tooltip"><span>IE9+ fully supported.</span>As IE6-8 do not support the CSS :checked selector, the switch will not reflect the "ON" state of the checkbox. Although this can be solved with Javascript, it is outside of the scope of this generator.</div></div>
</div>
<form id="properties" autocomplete="off">
<div class="col col1">
<div class="property-group">
<h3>Style</h3>
<div class="property radio-property inline-radio-property">
<input type="radio" name="style" value="custom" id="style-custom" checked>
<label for="style-custom">Custom</label>
<input type="radio" name="style" value="ios5" id="style-ios5">
<label for="style-ios5">iOS5</label>
<input type="radio" name="style" value="ios4" id="style-ios4">
<label for="style-ios4">iOS4</label>
<input type="radio" name="style" value="android" id="style-android">
<label for="style-android">Android</label>
<input type="radio" name="style" value="metro" id="style-metro">
<label for="style-metro">Windows 8</label>
</div>
<div class="property">
<a class="link-property" href="#" id="random-style">Random style</a> |
<a class="link-property" href="#" id="revert-style">Reset to style default state</a>
</div>
</div>
<div class="property-group">
<h3>Active state</h3>
<div class="property">
<label for="active-bg-color">Active background color</label>
<input type="text" name="active-bg-color" id="active-bg-color" value="#2FCCFF" class="picker">
</div>
<div class="property">
<label for="active-text-color">Active text color</label>
<input type="text" name="active-text-color" id="active-text-color" value="#FFFFFF" class="picker">
</div>
<div class="property">
<label for="active-text">Active text</label>
<input type="text" name="active-text" id="active-text" value="ON">
</div>
</div>
<div class="property-group">
<h3>Inactive state </h3>
<div class="property">
<label for="inactive-bg-color">Inactive background color</label>
<input type="text" name="inactive-bg-color" id="inactive-bg-color" value="#EEEEEE" class="picker">
</div>
<div class="property">
<label for="inactive-text-color">Inactive text color</label>
<input type="text" name="inactive-text-color" id="inactive-text-color" value="#999999" class="picker">
</div>
<div class="property">
<label for="inactive-text">Inactive text</label>
<input type="text" name="inactive-text" id="inactive-text" value="OFF">
</div>
</div>
</div>
<div class="col col2">
<div class="property-group">
<h3>Switch</h3>
<div class="property">
<label for="switch-size">Switch size</label>
<div class="slider" id="switch-size-slider" data-min="5" data-max="50"></div>
<input type="text" name="switch-size" id="switch-size" class="slider-value" value="18">
</div>
<div class="property">
<label>Dual switch color</label>
<div class="onoffswitch">
<input type="checkbox" name="dual-switch-color" id="dual-switch-color" class="onoffswitch-checkbox">
<label class="onoffswitch-label" for="dual-switch-color">
<div class="onoffswitch-inner"></div>
<div class="onoffswitch-switch"></div>
</label>
</div>
</div>
<div class="property" id="switch-color-property">
<label for="switch-color">Switch background color</label>
<input type="text" name="switch-color" id="switch-color" value="#FFFFFF" class="picker">
</div>
<div class="property" id="active-switch-color-property" style="display: none;">
<label for="active-switch-color">Active switch color</label>
<input type="text" name="active-switch-color" id="active-switch-color" value="#27A1CA" class="picker">
</div>
<div class="property" id="inactive-switch-color-property" style="display: none;">
<label for="inactive-switch-color">Inactive switch color</label>
<input type="text" name="inactive-switch-color" id="inactive-switch-color" value="#A1A1A1" class="picker">
</div>
<div class="property">
<label for="switch-border-color">Switch border color</label>
<input type="text" name="switch-border-color" id="switch-border-color" value="#999999" class="picker">
</div>
<div class="property">
<label>Switch ON by default</label>
<div class="onoffswitch">
<input type="checkbox" name="switch-default-state" id="switch-default-state" class="onoffswitch-checkbox" checked>
<label class="onoffswitch-label" for="switch-default-state">
<div class="onoffswitch-inner"></div>
<div class="onoffswitch-switch"></div>
</label>
</div>
</div>
</div>
<div class="property-group">
<h3>Labels</h3>
<div class="property">
<label for="font-size">Font size</label>
<div class="slider" id="font-size-slider" data-min="10" data-max="40"></div>
<input type="text" name="font-size" id="font-size" class="slider-value" value="14">
</div>
<div class="property">
<label for="spacing">Text spacing</label>
<div class="slider" id="text-spacing-slider" data-min="5" data-max="50"></div>
<input type="text" name="spacing" id="spacing" class="slider-value" value="10">
</div>
</div>
<!--
<div class="property-group">
<h3>Sizing</h3>
<div class="property">
<label for="width">Width</label>
<div class="slider" id="width-slider" data-min="40" data-max="200"></div>
<input type="text" name="width" id="width" class="slider-value" value="90">
</div>
<div class="property">
<label for="height">Height</label>
<div class="slider" id="height-slider" data-min="5" data-max="75"></div>
<input type="text" name="height" id="height" class="slider-value" value="30">
</div>
<div class="property">
<label for="border-radius">Border radius</label>
<div class="slider" id="border-radius-slider" data-min="0" data-max="50"></div>
<input type="text" name="border-radius" id="border-radius" class="slider-value" value="20">
</div>
</div>
-->
</div>
</form>
<!--
<h3>Get the CSS</h3>
<div id="css" class="code code-css"></div>
<h3>Get the HTML</h3>
<div id="html" class="code code-html"></div>
<p style="margin-top: 30px;"> Please contact us with your ideas, thoughts, questions or for anything else on how we can improve this tool. Thanks! <a href="mailto:suggestions@proto.io">suggestions@proto.io</a></p>
<div id="footer">
<div id="as-seen-on-footer">As engineered for <a href="http://proto.io" target="_blank">Proto.io</a></div>
<div class="social-share">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://bit.ly/Mf89wD" data-text="Cool freebie from Proto.io! Generate CSS3-only On/Off flipswitches with animated transitions!" data-hashtags="css3,ui" data-counturl="http://proto.io/freebies/onoff/" data-related="protoio">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<div class="fb-like" data-href="http://proto.io/freebies/onoff/" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false"></div>
<a href="mailto:?subject=Generate pure CSS On/Off flipswitches with animated transitions&body=http://proto.io/freebies/onoff/" class="email">Email</a>
</div>
</div>
-->
</div>
</body>
</html>