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 for="language">
  72             <span class="label-name">{'Language'|t}</span>
  73           </label>
  74         </div>
  75       </div>
  76       <div class="pure-u-lg-{$ratioInput} pure-u-1">
  77         <div class="form-input">
  78           <select name="language" id="language" class="align">
  79             {loop="$languages"}
  80               <option value="{$key}">
  81                 {$value}
  82               </option>
  83             {/loop}
  84           </select>
  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>
  93             <span class="label-name">{'Timezone'|t}</span><br>
  94             <span class="label-desc">{'Continent'|t} &middot; {'City'|t}</span>
  95           </label>
  96         </div>
  97       </div>
  98       <div class="pure-u-lg-{$ratioInput} pure-u-1">
  99         <div class="form-input">
 100           <div class="timezone">
 101             <select id="continent" name="continent">
 102               {loop="$continents"}
 103                 {if="$key !== 'selected'"}
 104                   <option value="{$value}" {if="$continents.selected === $value"}selected{/if}>
 105                     {$value}
 106                   </option>
 107                 {/if}
 108               {/loop}
 109             </select>
 110             <select id="city" name="city">
 111               {loop="$cities"}
 112                 {if="$key !== 'selected'"}
 113                   <option value="{$value.city}"
 114                           {if="$cities.selected === $value.city"}selected{/if}
 115                           data-continent="{$value.continent}">
 116                     {$value.city}
 117                   </option>
 118                 {/if}
 119               {/loop}
 120             </select>
 121           </div>
 122         </div>
 123       </div>
 124     </div>
 125
 126     <div class="pure-g">
 127       <div class="pure-u-lg-{$ratioLabel} pure-u-7-8">
 128         <div class="form-label">
 129           <label for="update">
 130             <span class="label-name">{'Check updates'|t}</span><br>
 131             <span class="label-desc">
 132               {'Notify me when a new release is ready'|t}
 133             </span>
 134           </label>
 135         </div>
 136       </div>
 137       <div class="pure-u-lg-{$ratioInput} pure-u-1-8">
 138         <div class="form-input">
 139           <input type="checkbox" name="updateCheck" id="update" checked="checked">
 140         </div>
 141       </div>
 142     </div>
 143
 144     <div class="pure-g">
 145       <div class="pure-u-lg-{$ratioLabel} pure-u-{$ratioLabelMobile}">
 146         <div class="form-label">
 147           <label for="enableApi">
 148             <span class="label-name">{'Enable REST API'|t}</span><br>
 149             <span class="label-desc">{'Allow third party software to use Shaarli such as mobile application'|t}</span>
 150           </label>
 151         </div>
 152       </div>
 153       <div class="pure-u-lg-{$ratioInput} pure-u-{$ratioInputMobile}">
 154         <div class="form-input">
 155           <input type="checkbox" name="enableApi" id="enableApi" checked />
 156         </div>
 157       </div>
 158     </div>
 159
 160     <div class="center">
 161       <input type="submit" value="{'Install'|t}" name="Save">
 162     </div>
 163   </div>
 164 </div>
 165 </form>
 166 {include="page.footer"}
 167 </body>
 168 </html>