tpl/default/install.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   {include="includes"}
   5 </head>
   6 <body>
   7
   8 {$ratioLabel='1-4'}
   9 {$ratioInput='3-4'}
  10 {$ratioLabelMobile='7-8'}
  11 {$ratioInputMobile='1-8'}
  12
  13 <form method="POST" action="#" name="installform" id="installform">
  14 <div class="pure-g">
  15   <div class="pure-u-lg-1-6 pure-u-1-24"></div>
  16   <div class="pure-u-lg-2-3 pure-u-22-24 page-form page-form-complete">
  17     <h2 class="window-title">{'Install Shaarli'|t}</h2>
  18
  19     <div class="center">
  20       {'It looks like it\'s the first time you run Shaarli. Please configure it.'|t}
  21     </div>
  22
  23     <div class="pure-g">
  24       <div class="pure-u-lg-{$ratioLabel} pure-u-1">
  25         <div class="form-label">
  26           <label for="username">
  27             <span class="label-name">{'Username'|t}</span>
  28           </label>
  29         </div>
  30       </div>
  31       <div class="pure-u-lg-{$ratioInput} pure-u-1">
  32         <div class="form-input">
  33           <input type="text" name="setlogin" id="username">
  34         </div>
  35       </div>
  36     </div>
  37
  38     <div class="pure-g">
  39       <div class="pure-u-lg-{$ratioLabel} pure-u-1">
  40         <div class="form-label">
  41           <label for="password">
  42             <span class="label-name">{'Password'|t}</span>
  43           </label>
  44         </div>
  45       </div>
  46       <div class="pure-u-lg-{$ratioInput} pure-u-1">
  47         <div class="form-input">
  48           <input type="password" name="setpassword" id="password">
  49         </div>
  50       </div>
  51     </div>
  52
  53     <div class="pure-g">
  54       <div class="pure-u-lg-{$ratioLabel} pure-u-1">
  55         <div class="form-label">
  56           <label for="title">
  57             <span class="label-name">{'Shaarli title'|t}</span>
  58           </label>
  59         </div>
  60       </div>
  61       <div class="pure-u-lg-{$ratioInput} pure-u-1">
  62         <div class="form-input">
  63           <input type="text" name="title" id="title" placeholder="{'My links'|t}">
  64         </div>
  65       </div>
  66     </div>
  67
  68     <div class="pure-g">
  69       <div class="pure-u-lg-{$ratioLabel} pure-u-1">
  70         <div class="form-label">
  71           <label>
  72             <span class="label-name">{'Timezone'|t}</span><br>
  73             <span class="label-desc">{'Continent'|t} &middot; {'City'|t}</span>
  74           </label>
  75         </div>
  76       </div>
  77       <div class="pure-u-lg-{$ratioInput} pure-u-1">
  78         <div class="form-input">
  79           <div class="timezone">
  80             <select id="continent" name="continent">
  81               {loop="$continents"}
  82                 {if="$key !== 'selected'"}
  83                   <option value="{$value}" {if="$continents.selected === $value"}selected{/if}>
  84                     {$value}
  85                   </option>
  86                 {/if}
  87               {/loop}
  88             </select>
  89             <select id="city" name="city">
  90               {loop="$cities"}
  91                 {if="$key !== 'selected'"}
  92                   <option value="{$value.city}"
  93                           {if="$cities.selected === $value.city"}selected{/if}
  94                           data-continent="{$value.continent}">
  95                     {$value.city}
  96                   </option>
  97                 {/if}
  98               {/loop}
  99             </select>
 100           </div>
 101         </div>
 102       </div>
 103     </div>
 104
 105     <div class="pure-g">
 106       <div class="pure-u-lg-{$ratioLabel} pure-u-7-8">
 107         <div class="form-label">
 108           <label for="update">
 109             <span class="label-name">{'Check updates'|t}</span><br>
 110             <span class="label-desc">
 111               {'Notify me when a new release is ready'|t}
 112             </span>
 113           </label>
 114         </div>
 115       </div>
 116       <div class="pure-u-lg-{$ratioInput} pure-u-1-8">
 117         <div class="form-input">
 118           <input type="checkbox" name="updateCheck" id="update" checked="checked">
 119         </div>
 120       </div>
 121     </div>
 122
 123     <div class="pure-g">
 124       <div class="pure-u-lg-{$ratioLabel} pure-u-{$ratioLabelMobile}">
 125         <div class="form-label">
 126           <label for="enableApi">
 127             <span class="label-name">{'Enable REST API'|t}</span><br>
 128             <span class="label-desc">{'Allow third party software to use Shaarli such as mobile application'|t}</span>
 129           </label>
 130         </div>
 131       </div>
 132       <div class="pure-u-lg-{$ratioInput} pure-u-{$ratioInputMobile}">
 133         <div class="form-input">
 134           <input type="checkbox" name="enableApi" id="enableApi" checked />
 135         </div>
 136       </div>
 137     </div>
 138
 139     <div class="center">
 140       <input type="submit" value="{'Install'|t}" name="Save">
 141     </div>
 142   </div>
 143 </div>
 144 </form>
 145 {include="page.footer"}
 146 </body>
 147 </html>