install.html 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  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>
  65. <span class="label-name">{'Timezone'|t}</span><br>
  66. <span class="label-desc">{'Continent'|t} &middot; {'City'|t}</span>
  67. </label>
  68. </div>
  69. </div>
  70. <div class="pure-u-lg-{$ratioInput} pure-u-1">
  71. <div class="form-input">
  72. <div class="timezone">
  73. <select id="continent" name="continent">
  74. {loop="$continents"}
  75. {if="$key !== 'selected'"}
  76. <option value="{$value}" {if="$continents.selected === $value"}selected{/if}>
  77. {$value}
  78. </option>
  79. {/if}
  80. {/loop}
  81. </select>
  82. <select id="city" name="city">
  83. {loop="$cities"}
  84. {if="$key !== 'selected'"}
  85. <option value="{$value.city}"
  86. {if="$cities.selected === $value.city"}selected{/if}
  87. data-continent="{$value.continent}">
  88. {$value.city}
  89. </option>
  90. {/if}
  91. {/loop}
  92. </select>
  93. </div>
  94. </div>
  95. </div>
  96. </div>
  97. <div class="pure-g">
  98. <div class="pure-u-lg-{$ratioLabel} pure-u-7-8">
  99. <div class="form-label">
  100. <label for="update">
  101. <span class="label-name">{'Check updates'|t}</span><br>
  102. <span class="label-desc">
  103. {'Notify me when a new release is ready'|t}
  104. </span>
  105. </label>
  106. </div>
  107. </div>
  108. <div class="pure-u-lg-{$ratioInput} pure-u-1-8">
  109. <div class="form-input">
  110. <input type="checkbox" name="updateCheck" id="update" checked="checked">
  111. </div>
  112. </div>
  113. </div>
  114. <div class="pure-g">
  115. <div class="pure-u-lg-{$ratioLabel} pure-u-{$ratioLabelMobile}">
  116. <div class="form-label">
  117. <label for="enableApi">
  118. <span class="label-name">{'Enable REST API'|t}</span><br>
  119. <span class="label-desc">{'Allow third party software to use Shaarli such as mobile application'|t}</span>
  120. </label>
  121. </div>
  122. </div>
  123. <div class="pure-u-lg-{$ratioInput} pure-u-{$ratioInputMobile}">
  124. <div class="form-input">
  125. <input type="checkbox" name="enableApi" id="enableApi" checked />
  126. </div>
  127. </div>
  128. </div>
  129. <div class="center">
  130. <input type="submit" value="{'Install'|t}" name="Save">
  131. </div>
  132. </div>
  133. </div>
  134. </form>
  135. {include="page.footer"}
  136. </body>
  137. </html>