install.html 5.0 KB

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