examples/widget-gallery/index.html

   1 <!--
   2  * Copyright (c) 2012, Intel Corporation.
   3  *
   4  * This program is licensed under the terms and conditions of the
   5  * Apache License, version 2.0.  The full text of the Apache License is at
   6  * http://www.apache.org/licenses/LICENSE-2.0
   7  *
   8 -->
   9
  10 <!DOCTYPE html>
  11 <html>
  12   <head>
  13     <meta charset="utf-8">
  14     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  15
  16     <title>Cowhide Widget Gallery</title>
  17     <meta name="description" content="A widget gallery showcasing Cowhide's capabilities.">
  18     <meta name="viewport" content="width=device-width">
  19
  20     <link id="cowhide-theme" rel="stylesheet" href="../../cowhide-default.css">
  21   </head>
  22
  23   <body>
  24     <div class="container page">
  25       <h1>
  26         Cowhide
  27         <small>An HTML5 framework built on top of Twitter Bootstrap.</small>
  28       </h1>
  29
  30       <div class="well">
  31         <button id="night-mode-toggle" class="btn btn-primary" data-toggle="button">Night mode</button>
  32         <button id="driving-mode-toggle" class="btn btn-primary" data-toggle="button" data-ignore-driving-mode="true">Driving mode</button>
  33
  34         <div class="pull-right">
  35           <form class="form-inline" id="font-size-test">
  36             <div class="control-group">
  37               <div class="input-append">
  38                 <input type="text"
  39                        id="button-font-size" placeholder="Button font size"/>
  40                 <span class="add-on">px</span>
  41                 <button class="btn" type="button">Apply</button>
  42               </div>
  43             </div>
  44         </div>
  45       </div>
  46
  47       <h2>Cowhide Widget Gallery <small>A partial list.</small></h2>
  48       <div id="application">
  49         <h3>Radio buttons</h3>
  50         <form>
  51           <label class="radio">
  52             <input type="radio" name="a" value="1">Radio option 1
  53           </label>
  54           <label class="radio">
  55             <input type="radio" name="a" value="2">Radio option 2
  56           </label>
  57             <label class="radio">
  58             <input type="radio" name="a" value="3">Radio option 3
  59           </label>
  60         </form>
  61
  62         <h3>Check buttons</h3>
  63         <form>
  64           <label class="checkbox">
  65             <input type="checkbox" name="a" value="1">Checkbox option 1
  66           </label>
  67           <label class="checkbox">
  68             <input type="checkbox" name="a" value="2">Checkbox option 2
  69           </label>
  70             <label class="checkbox">
  71             <input type="checkbox" name="a" value="3">Checkbox option 3
  72           </label>
  73         </form>
  74
  75         <h3>Text scrolling on a button</h3>
  76         <button class="btn btn-primary" data-marquee="true" data-fixed-width="200">
  77           This is a very long text and needs to scroll
  78         </button>
  79       </div>
  80     </div> <!-- container -->
  81
  82     <!-- The glorious cowhide framework. -->
  83     <script src="../../cowhide.js"></script>
  84     <script src="javascripts/widget-gallery.js"></script>
  85   </body>
  86 </html>