tpl/default/install.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   {include="includes"}
   5 </head>
   6 <body>
   7 <div id="header" class="pure-u-0 pure-u-lg-visible">
   8   <h1 id="header-title">
   9     <a>Shaarli</a>
  10   </h1>
  11 </div>
  12 <div class="clear"></div>
  13
  14 {$ratioLabel='1-4'}
  15 {$ratioInput='3-4'}
  16
  17 <form method="POST" action="#" name="installform" id="installform">
  18 <div class="pure-g">
  19   <div class="pure-u-lg-1-6 pure-u-1-8"></div>
  20   <div class="pure-u-lg-2-3 pure-u-3-4 page-form page-form-complete">
  21     <h2 class="window-title">{'Install'|t}</h2>
  22
  23     <div class="center">
  24       {'It looks like it\'s the first time you run Shaarli. Please configure it.'|t}
  25     </div>
  26
  27     <div class="pure-g">
  28       <div class="pure-u-lg-{$ratioLabel} pure-u-1">
  29         <div class="form-label">
  30           <label for="username">
  31             <span class="label-name">{'Username'|t}</span>
  32           </label>
  33         </div>
  34       </div>
  35       <div class="pure-u-lg-{$ratioInput} pure-u-1">
  36         <div class="form-input">
  37           <input type="text" name="setlogin" id="username">
  38         </div>
  39       </div>
  40     </div>
  41
  42     <div class="pure-g">
  43       <div class="pure-u-lg-{$ratioLabel} pure-u-1">
  44         <div class="form-label">
  45           <label for="password">
  46             <span class="label-name">{'Password'|t}</span>
  47           </label>
  48         </div>
  49       </div>
  50       <div class="pure-u-lg-{$ratioInput} pure-u-1">
  51         <div class="form-input">
  52           <input type="text" name="setpassword" id="password">
  53         </div>
  54       </div>
  55     </div>
  56
  57     <div class="pure-g">
  58       <div class="pure-u-lg-{$ratioLabel} pure-u-1 ">
  59         <div class="form-label">
  60           <label>
  61             <span class="label-name">{'Timezone'|t}</span>
  62           </label>
  63         </div>
  64       </div>
  65       <div class="pure-u-lg-{$ratioInput} pure-u-1 ">
  66         <div class="form-input">
  67           {ignore}FIXME! too hackish, needs to be fixed upstream{/ignore}
  68           <div class="timezone" id="timezone-remove">{$timezone_html}</div>
  69           <div class="timezone" id="timezone-add"></div>
  70         </div>
  71       </div>
  72     </div>
  73
  74     <div class="pure-g">
  75       <div class="pure-u-lg-{$ratioLabel} pure-u-1">
  76         <div class="form-label">
  77           <label for="title">
  78             <span class="label-name">{'Shaarli title'|t}</span>
  79           </label>
  80         </div>
  81       </div>
  82       <div class="pure-u-lg-{$ratioInput} pure-u-1">
  83         <div class="form-input">
  84           <input type="text" name="title" id="title" placeholder="{'My links'|t}">
  85         </div>
  86       </div>
  87     </div>
  88
  89     <div class="pure-g">
  90       <div class="pure-u-lg-{$ratioLabel} pure-u-1">
  91         <div class="form-label">
  92           <label for="update">
  93             <span class="label-name">{'Check updates'|t}</span><br>
  94             <span class="label-desc">
  95               {'Notify me when a new release is ready'|t}
  96             </span>
  97           </label>
  98         </div>
  99       </div>
 100       <div class="pure-u-lg-{$ratioInput} pure-u-1 ">
 101         <div class="form-input">
 102           <input type="checkbox" name="updateCheck" id="update" checked="checked">
 103
 104         </div>
 105       </div>
 106     </div>
 107
 108     <div class="center">
 109       <input type="submit" value="{'Create config'|t}" name="Save">
 110     </div>
 111   </div>
 112 </div>
 113 </form>
 114 {include="page.footer"}
 115 <script>
 116   // FIXME!
 117   (function (window, document) {
 118     var toRemove = document.getElementById('timezone-remove');
 119     var firstSelect = toRemove.getElementsByTagName('select')[0];
 120     var secondSelect = toRemove.getElementsByTagName('select')[1];
 121     toRemove.parentNode.removeChild(toRemove);
 122     var toAdd = document.getElementById('timezone-add');
 123     var newTimezone = '<span class="timezone-continent">Continent ' + firstSelect.outerHTML + '</span>';
 124     newTimezone += ' <span class="timezone-country">Country ' + secondSelect.outerHTML + '</span>';
 125     toAdd.innerHTML = newTimezone;
 126   })(this, this.document);
 127 </script>
 128 </body>
 129 </html>