Tiny File Manager

Back Back Up Advanced Editor

<!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">

</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>

</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>
		</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&amp;body=http://proto.io/freebies/onoff/" class="email">Email</a>
			</div>
		</div>
-->
	</div>
	
	</body>
	</html>