--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ {include="includes"}
+</head>
+<body>
+<div id="header" class="pure-u-0 pure-u-lg-visible">
+ <h1 id="header-title">
+ <a>Shaarli</a>
+ </h1>
+</div>
+<div class="clear"></div>
+
+{$ratioLabel='1-4'}
+{$ratioInput='3-4'}
+
+<form method="POST" action="#" name="installform" id="installform">
+<div class="pure-g">
+ <div class="pure-u-lg-1-6 pure-u-1-8"></div>
+ <div class="pure-u-lg-2-3 pure-u-3-4 page-form page-form-complete">
+ <h2 class="window-title">{'Install'|t}</h2>
+
+ <div class="center">
+ {'It looks like it\'s the first time you run Shaarli. Please configure it.'|t}
+ </div>
+
+ <div class="pure-g">
+ <div class="pure-u-lg-{$ratioLabel} pure-u-1">
+ <div class="form-label">
+ <label for="username">
+ <span class="label-name">{'Username'|t}</span>
+ </label>
+ </div>
+ </div>
+ <div class="pure-u-lg-{$ratioInput} pure-u-1">
+ <div class="form-input">
+ <input type="text" name="setlogin" id="username">
+ </div>
+ </div>
+ </div>
+
+ <div class="pure-g">
+ <div class="pure-u-lg-{$ratioLabel} pure-u-1">
+ <div class="form-label">
+ <label for="password">
+ <span class="label-name">{'Password'|t}</span>
+ </label>
+ </div>
+ </div>
+ <div class="pure-u-lg-{$ratioInput} pure-u-1">
+ <div class="form-input">
+ <input type="text" name="setpassword" id="password">
+ </div>
+ </div>
+ </div>
+
+ <div class="pure-g">
+ <div class="pure-u-lg-{$ratioLabel} pure-u-1 ">
+ <div class="form-label">
+ <label>
+ <span class="label-name">{'Timezone'|t}</span>
+ </label>
+ </div>
+ </div>
+ <div class="pure-u-lg-{$ratioInput} pure-u-1 ">
+ <div class="form-input">
+ {ignore}FIXME! too hackish, needs to be fixed upstream{/ignore}
+ <div class="timezone" id="timezone-remove">{$timezone_html}</div>
+ <div class="timezone" id="timezone-add"></div>
+ </div>
+ </div>
+ </div>
+
+ <div class="pure-g">
+ <div class="pure-u-lg-{$ratioLabel} pure-u-1">
+ <div class="form-label">
+ <label for="title">
+ <span class="label-name">{'Shaarli title'|t}</span>
+ </label>
+ </div>
+ </div>
+ <div class="pure-u-lg-{$ratioInput} pure-u-1">
+ <div class="form-input">
+ <input type="text" name="title" id="title" placeholder="{'My links'|t}">
+ </div>
+ </div>
+ </div>
+
+ <div class="pure-g">
+ <div class="pure-u-lg-{$ratioLabel} pure-u-1">
+ <div class="form-label">
+ <label for="update">
+ <span class="label-name">{'Check updates'|t}</span><br>
+ <span class="label-desc">
+ {'Notify me when a new release is ready'|t}
+ </span>
+ </label>
+ </div>
+ </div>
+ <div class="pure-u-lg-{$ratioInput} pure-u-1 ">
+ <div class="form-input">
+ <input type="checkbox" name="updateCheck" id="update" checked="checked">
+
+ </div>
+ </div>
+ </div>
+
+ <div class="center">
+ <input type="submit" value="{'Create config'|t}" name="Save">
+ </div>
+ </div>
+</div>
+</form>
+{include="page.footer"}
+<script>
+ // FIXME!
+ (function (window, document) {
+ var toRemove = document.getElementById('timezone-remove');
+ var firstSelect = toRemove.getElementsByTagName('select')[0];
+ var secondSelect = toRemove.getElementsByTagName('select')[1];
+ toRemove.parentNode.removeChild(toRemove);
+ var toAdd = document.getElementById('timezone-add');
+ var newTimezone = '<span class="timezone-continent">Continent ' + firstSelect.outerHTML + '</span>';
+ newTimezone += ' <span class="timezone-country">Country ' + secondSelect.outerHTML + '</span>';
+ toAdd.innerHTML = newTimezone;
+ })(this, this.document);
+</script>
+</body>
+</html>