End of Home page, begin of Poll page and Configuration

* Finished Home page behavior;
* Started Poll (just the title for now);
* Changed POST /polls return code to 206 (CREATED);
+ Add a configuration file (only app_url inside of it for now).

.gitignore

@@ -7,3 +7,4 @@ composer.lock
 
 ## App ##
 db/
+config/app.php

config/app.default.php

@@ -0,0 +1,5 @@
+<?php
+
+$VERLAINE = [
+	"app_url" => "",
+];

index.php

@@ -1,6 +1,7 @@
 <?php
 require __DIR__ . "/vendor/autoload.php";
 require __DIR__ . "/models/Poll.php";
+require __DIR__ . "/config/app.php";
 
 function format_poll($poll)
 {
@@ -19,7 +20,7 @@ Flight::route("POST /polls", function () {
 		$request_json = $request->data;
 		$poll = Poll::create_poll($request_json);
 		if ($poll)
-			Flight::json(format_poll($poll));
+			Flight::json(format_poll($poll), 206);
 		else
 			Flight::halt(403, "<h1>403 Forbidden</h1><h3>Invalid data.</h3>");
 	}
@@ -43,7 +44,8 @@ Flight::route("GET /polls/@id:[a-fA-F0-9]+", function ($id) {
 });
 
 Flight::route("/", function () {
-	Flight::render("home", [], "body_content");
+	global $VERLAINE;
+	Flight::render("home", ["app_url" => $VERLAINE["app_url"]], "body_content");
 	Flight::render("layout");
 });
 

static/css/main.css

@@ -32,8 +32,21 @@ main
   margin: 0 5%;
 }
 
-main form input,
+main p
-main form button
+{
+  font-size: 1.5em;
+  text-align: center;
+}
+main p strong
+{
+  font-family: "PT Serif", serif;
+  font-size: 1.2em;
+  font-weight: normal;
+}
+
+main input,
+main button,
+main a.button
 {
   transition: background 0.1s ease-in;
   display: block;
@@ -43,34 +56,47 @@ main form button
   box-sizing: border-box;
 
   background: #141414;
+  color: #ECECEC;
   border: none;
   outline: none;
 
   font-size: 1.3em;
   text-align: center;
+  text-decoration: none;
 }
-main form input[type="submit"],
+main input[type="submit"],
-main form button
+main button,
+main a.button
 { cursor: pointer; }
 
-main form input[type="submit"]
+main input[type="submit"]
 { margin-top: 1em; }
 
-main form input:focus,
+main input:focus,
-main form input[type="submit"]:hover,
+main input[type="submit"]:hover,
-main form button:hover
+main button:hover,
+main a.button:hover
 { background: #1D1D1D; }
 
-main form input[name="title"],
+main input[name="title"],
-main form input[name="title"]:focus
+main input[name="title"]:focus
 {
   background: transparent;
   font-family: "PT Serif", serif;
   font-size: 1.5em;
 }
 
+@keyframes scalex
+{
+  0%
+  { transform: scaleX(0); }
+  100%
+  { transform: scaleX(1); }
+}
+
 main #choices .choice
 {
+  animation: scalex 0.2s linear;
   display: flex;
   flex-direction: row;
   margin: auto;
@@ -86,6 +112,16 @@ main #choices .choice .delete
   width: 4em;
 }
 
+/*
+ * IFNEZIUN
+ */
+h1.poll
+{
+  margin: 1.5em 5%;
+  font-family: "PT Serif", serif;
+  font-size: 2.5rem;
+}
+
 footer
 {
   display: block;

static/js/new.js

@@ -44,7 +44,11 @@ document.addEventListener("DOMContentLoaded", () => {
 		}).then((res) => {
 			return res.json();
 		}).then((json) => {
-			console.log(json);
+			form.setAttribute("hidden", true);
+			let result_el = document.getElementById("result");
+			result_el.innerHTML = result_el.innerHTML.replace(/:poll_title/g, json.title);
+			result_el.innerHTML = result_el.innerHTML.replace(/:poll_url/g, `/polls/${json.id}`);
+			result_el.removeAttribute("hidden");
 		});
 	});
 });

views/home.php

@@ -11,6 +11,11 @@
     <button type="button" id="add-choice">New choice</button>
     <input type="submit" value="Create poll" />
   </form>
+  <div id="result" hidden>
+    <p>Your poll <strong>:poll_title</strong> is ready!</p>
+    <input type="text" name="pollurl" value="<?= $app_url ?>:poll_url" />
+    <a class="button" href=":poll_url">See the poll!</a>
+  </div>
 </main>
 
 <template id="choice">

views/poll.php

@@ -1,4 +1,4 @@
-<h1>mdr todo</h1>
+<h1 class="poll"><?= $poll->title ?></h1>
 <main>
 	<pre>
 		<?= var_dump($poll) ?>