git.roojs.org Git - bootswatch/blob - tests/thumbnail.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3   <head>
   4     <title>Bootswatch: Default Bootstrap</title>
   5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   6     <meta charset="utf-8">
   7     <link rel="stylesheet" href="../amelia/bootstrap.css" media="screen" id="stylesheet">
   8     <link rel="stylesheet" href="../bower_components/font-awesome/css/font-awesome.min.css">
   9     <link rel="stylesheet" href="../assets/css/bootswatch.min.css">
  10     <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  11     <!--[if lt IE 9]>
  12       <script src="../bower_components/bootstrap/assets/js/html5shiv.js"></script>
  13       <script src="../bower_components/bootstrap/assets/js/respond.min.js"></script>
  14     <![endif]-->
  15     <style>
  16
  17         body,
  18         .navbar,
  19         .container {
  20           width: 500px;
  21         }
  22
  23         h1, p, .bs-example {
  24           text-align: center;
  25         }
  26
  27         .lead {
  28           margin-bottom: 2em;
  29         }
  30
  31         .page-header {
  32           border-bottom: none;
  33         }
  34
  35     </style>
  36   </head>
  37   <body>
  38
  39     <div class="navbar navbar-default navbar-fixed-top">
  40       <div class="container">
  41         <div class="navbar-header">
  42           <a href="../" class="navbar-brand">Bootswatch</a>
  43           <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
  44             <span class="icon-bar"></span>
  45             <span class="icon-bar"></span>
  46             <span class="icon-bar"></span>
  47           </button>
  48         </div>
  49         <div class="navbar-collapse collapse" id="navbar-main">
  50           <ul class="nav navbar-nav">
  51             <li class="dropdown active">
  52               <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="themes">Themes <span class="caret"></span></a>
  53               <ul class="dropdown-menu" aria-labelledby="themes">
  54                 <li><a tabindex="-1" href="../default/">Default</a></li>
  55                 <li class="divider"></li>
  56                 <li><a tabindex="-1" href="../amelia/">Amelia</a></li>
  57                 <li><a tabindex="-1" href="../cerulean/">Cerulean</a></li>
  58                 <li><a tabindex="-1" href="../cosmo/">Cosmo</a></li>
  59                 <li><a tabindex="-1" href="../cyborg/">Cyborg</a></li>
  60                 <li><a tabindex="-1" href="../flatly/">Flatly</a></li>
  61                 <li><a tabindex="-1" href="../journal/">Journal</a></li>
  62                 <li><a tabindex="-1" href="../readable/">Readable</a></li>
  63                 <li><a tabindex="-1" href="../simplex/">Simplex</a></li>
  64                 <li><a tabindex="-1" href="../slate/">Slate</a></li>
  65                 <li><a tabindex="-1" href="../spacelab/">Spacelab</a></li>
  66                 <li><a tabindex="-1" href="../united/">United</a></li>
  67               </ul>
  68             </li>
  69             <li class="dropdown">
  70               <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="download">Download <span class="caret"></span></a>
  71               <ul class="dropdown-menu" aria-labelledby="download">
  72                 <li><a tabindex="-1" href="../default/">bootstrap.min.css</a></li>
  73                 <li><a tabindex="-1" href="../amelia/">bootstrap.css</a></li>
  74                 <li class="divider"></li>
  75                 <li><a tabindex="-1" href="../cerulean/">variables.less</a></li>
  76                 <li><a tabindex="-1" href="../cosmo/">bootswatch.less</a></li>
  77               </ul>
  78             </li>
  79             <li>
  80               <a href="../help/">Help</a>
  81             </li>
  82             <li>
  83               <a href="http://news.bootswatch.com">Blog</a>
  84             </li>
  85           </ul>
  86
  87         </div>
  88       </div>
  89     </div>
  90
  91
  92
  93     <div class="container">
  94
  95       <div class="row">
  96         <div class="col-12">
  97           <div class="page-header">
  98             <h1 id="theme">Amelia</h1>
  99             <p id="description" class="lead">Sweet and cheery</p>
 100             <div class="bs-example">
 101               <button type="button" class="btn btn-default">Default</button>
 102               <button type="button" class="btn btn-primary">Primary</button>
 103               <button type="button" class="btn btn-success">Success</button>
 104               <button type="button" class="btn btn-info">Info</button>
 105               <button type="button" class="btn btn-warning">Warning</button>
 106               <button type="button" class="btn btn-danger">Danger</button>
 107             </div>
 108           </div>
 109         </div>
 110       </div>
 111
 112     </div>
 113
 114
 115     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 116     <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js"></script>
 117     <script>
 118
 119       $.get("http://api.bootswatch.com", function (data) {
 120
 121            var t_menu = "<div id='menu' style='position:fixed;top:10px;right:10px;'><select>{{#.}}<option data-description='{{description}}'>{{name}}</option>{{/.}}</select></div>";
 122            var t_previews = "{{#.}}<div class='preview hidden' id='{{name}}'><h1>{{name}}: {{description}}</h1><p><a href='{{preview}}'><img src='{{thumbnail}}'></a></p></div>{{/.}}";
 123
 124            var o_menu = Mustache.render(t_menu, data.themes);
 125            var o_previews = Mustache.render(t_previews, data.themes);
 126
 127           $('body').append(o_menu);
 128
 129           $('#menu').change(function(){
 130
 131             var theme = $('#menu :selected');
 132             $('#theme').text(theme.text());
 133             $('#description').text(theme.data('description'));
 134
 135             theme = '../' + theme.text().toLowerCase() + '/bootstrap.min.css';
 136             $('#stylesheet').attr('href', theme);
 137           });
 138
 139       }, "json");
 140
 141     </script>
 142
 143   </body>
 144 </html>