design and authors

exquisite_branch/display.py

@@ -12,7 +12,7 @@ def display():
     db = get_db()
 
     branches = db.execute(
-        "SELECT content, branch, parent FROM branches"
+        "SELECT content, branch, parent, username FROM branches"
     ).fetchall()
 
     streams = []

exquisite_branch/draw.py

@@ -16,15 +16,16 @@ def draw(parent=None):
     if request.method == 'POST':
         content = request.form.get('content')
         branch = request.form.get('branch')
+        username = request.form.get('username')
         if request.is_json:
             data = request.get_json()
             content = data['content']
             branch = data['branch']
-
+            username = data['username']
 
         db.execute(
-            'INSERT INTO branches (content, parent, branch) VALUES (?, ?, ?)',
-            (content, parent, branch,)
+            'INSERT INTO branches (content, parent, branch, username) VALUES (?, ?, ?, ?)',
+            (content, parent, branch, username)
         )
         db.commit()
         print(url_for('share.share', branch=f"{branch}"))
@@ -58,10 +59,11 @@ def last():
     if request.method == 'POST':
         content = request.form['content']
         branch = request.form['branch']
+        username = request.form['username']
 
         db.execute(
-            'INSERT INTO branches (content, parent, branch) VALUES (?, ?, ?)',
-            (content, parent, branch,)
+            'INSERT INTO branches (content, parent, branch, username) VALUES (?, ?, ?, ?)',
+            (content, parent, branch, username)
         )
         db.commit()
         print(url_for('share.share', branch=f"{branch}"))
@@ -80,9 +82,11 @@ def new():
         content = request.form['content']
         branch = request.form['branch']
 
+        username = request.form['username']
+
         db.execute(
-            'INSERT INTO branches (content, parent, branch) VALUES (?, ?, ?)',
-            (content, parent, branch,)
+            'INSERT INTO branches (content, parent, branch, username) VALUES (?, ?, ?, ?)',
+            (content, parent, branch, username)
         )
         db.commit()
         return redirect(url_for('share.share', branch=branch))

exquisite_branch/schema.sql

@@ -4,5 +4,6 @@ CREATE TABLE branches (
     id INTEGER PRIMARY KEY AUTOINCREMENT,
     branch TEXT NOT NULL,
     content TEXT NOT NULL,
-    parent TEXT NOT NULL
+    parent TEXT NOT NULL,
+    username TEXT
 );

exquisite_branch/static/css/display.css

@@ -10,6 +10,21 @@
 	position: absolute;
 }
 
+.svg-container {
+	display: inline-block;
+	margin: 0;
+	padding: 0;
+	position: relative;
+}
+
+.author {
+	position: absolute;
+	left: 50%;
+	bottom: 50px;
+	font-size: 1rem;
+	background-color: white;
+}
+
 .branches {
 	overflow-x: auto;
 	overflow-y: hidden;

exquisite_branch/static/css/global.css

@@ -2,9 +2,27 @@ html,
 body {
 	margin: 0;
 	background-color: var(--background);
+	color: var(--color);
 	font-size: 1.25rem;
 }
 
 * {
 	box-sizing: border-box;
 }
+
+a {
+	color: currentColor;
+	text-decoration: none;
+}
+
+a:hover {
+	color: tomato;
+}
+
+nav {
+	text-align: center;
+}
+
+nav > * + * {
+	margin-left: 1ch;
+}

exquisite_branch/static/css/home.css

@@ -0,0 +1,43 @@
+header {
+	text-align: center;
+	padding: 1rem;
+}
+
+header object {
+	width: 100vmin;
+	height: auto;
+	margin: 0 auto;
+}
+
+object svg {
+	width: 100%;
+}
+
+header h1 {
+	font-size: 2rem;
+	font-weight: normal;
+	margin: 0;
+}
+
+main {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+
+	margin-top: 100px;
+}
+
+main > * + * {
+	margin-top: 1rem;
+}
+
+@media (max-width: 767.98px) {
+	header object {
+		width: 75vw;
+	}
+
+	header h1 {
+		font-size: 1rem;
+	}
+}

exquisite_branch/static/css/share.css

@@ -24,5 +24,5 @@ button.clipboard {
 }
 
 button.clipboard:hover {
-	color: dodgerblue;
+	color: tomato;
 }

exquisite_branch/static/css/variables.css

@@ -1,3 +1,4 @@
 :root {
-	--background: #ddd;
+	--background: #edd;
+	--color: black;
 }

exquisite_branch/templates/base.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Exquisite Branch</title>
+		<link rel="stylesheet" href="{{url_for('static', filename='css/variables.css')}}" />
+		<link rel="stylesheet" href="{{url_for('static', filename='css/global.css')}}" />
+
+		{%block head %}{%endblock%}
+	</head>
+	<body>
+		<nav>
+			{%block nav %}
+			<a href="{{url_for('home.home')}}">Home</a>
+			<a href="{{url_for('display.display')}}">Results</a>
+			{% endblock %}
+		</nav>
+		{%block contents %} {%endblock%}
+	</body>
+</html>

exquisite_branch/templates/display.html

@@ -1,37 +1,49 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>Display</title>
-		<link rel="stylesheet" href="{{url_for('static', filename='css/variables.css')}}" />
-		<link rel="stylesheet" href="{{url_for('static', filename='css/global.css')}}" />
-		<link rel="stylesheet" href="{{url_for('static', filename='css/display.css')}}" />
-	</head>
-	<body>
-		<h1>Exquisite Branch</h1>
+{%extends 'base.html' %} {%block head %}
 
-		<div class="streams">
-			{% for stream in streams %}
-			<div
-				class="stream"
-				style="color: rgb({{ range(0, 255) | random }},{{ range(0, 255) | random }},{{ range(0, 255) | random }}); transform: translate({{ range(-5, 5) | random }}px, {{ range(-5, 5) | random }}px)"
+<link rel="stylesheet" href="{{url_for('static', filename='css/display.css')}}" />
+<title>Display</title>
+{%endblock%} {%block nav%}
+<a href="{{url_for('home.home')}}">Home</a>
+<a href="{{url_for('draw.last')}}">Draw</a>
+
+{%endblock%} {%block contents%}
+
+<h1>Exquisite Branch</h1>
+
+<div class="streams">
+	{% for stream in streams %}
+	<div
+		class="stream"
+		style="color: rgb({{ range(0, 255) | random }},{{ range(0, 255) | random }},{{ range(0, 255) | random }}); transform: translate({{ range(-5, 5) | random }}px, {{ range(-5, 5) | random }}px)"
+	>
+		{% for branch in stream %}
+		<div class="svg-container">
+			{{branch['content'] | safe}}
+			<span
+				class="author"
+				style="transform: translate({{ range(-50, 50) | random }}px, {{ range(-10, 10) | random }}px"
 			>
-				{% for branch in stream %} {{branch['content'] | safe}} {%endfor%}
-			</div>
-			{%endfor%}
+				{{ branch['username']}}
+			</span>
 		</div>
+		{%endfor%}
+	</div>
+	{%endfor%}
+</div>
 
-		{{colors}}
+{{colors}}
 
-		<h2>Branches</h2>
-		<div class="branches">
-			{% for stream in streams %}
-			<div class="branch">
-				{% for branch in stream %} {{branch['content'] | safe}} {%endfor%}
-			</div>
-			{%endfor%}
+<h2>Branches</h2>
+<div class="branches">
+	{% for stream in streams %}
+	<div class="branch">
+		{% for branch in stream %}
+		<div class="svg-container">
+			{{branch['content'] | safe}}
+			<span class="author"> {{ branch['username']}} </span>
 		</div>
-	</body>
-</html>
+		{%endfor%}
+	</div>
+	{%endfor%}
+</div>
+{%endblock%}

exquisite_branch/templates/draw.html

@@ -1,54 +1,51 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>Draw</title>
+{%extends 'base.html' %} {%block head %}
+<title>Draw</title>
+<link rel="stylesheet" href="{{url_for('static', filename='css/draw.css')}}" />
+<script src="{{url_for('static', filename='js/draw.js')}}" defer></script>
 
-		<script src="{{url_for('static', filename='js/draw.js')}}" defer></script>
+{%endblock%} {%block nav%}
+<a href="{{url_for('home.home')}}">Home</a>
+<a href="{{url_for('display.display')}}">Results</a>
 
-		<link rel="stylesheet" href="{{url_for('static', filename='css/variables.css')}}" />
-		<link rel="stylesheet" href="{{url_for('static', filename='css/global.css')}}" />
-		<link rel="stylesheet" href="{{url_for('static', filename='css/draw.css')}}" />
-	</head>
-	<body>
-		<h1>Draw</h1>
-		<div id="divSmoothingFactor">
-			<label for="cmbBufferSize">Buffer size:</label>
-			<select id="cmbBufferSize">
-				<option value="1">1 - No smoothing</option>
-				<option value="4">4 - Sharp curves</option>
-				<option value="8" selected="selected">8 - Smooth curves</option>
-				<option value="12">12 - Very smooth curves</option>
-				<option value="16">16 - Super smooth curves</option>
-				<option value="20">20 - Hyper smooth curves</option>
-			</select>
-		</div>
+{%endblock%} {%block contents%}
 
-		<div id="svg-container">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				xmlns:xlink="http://www.w3.org/1999/xlink"
-				version="1.1"
-				id="svgElement"
-				x="0px"
-				y="0px"
-				width="500px"
-				height="500px"
-				viewBox="0 0 500 500"
-				enable-background="new 0 0 500 500"
-				xml:space="preserve"
-				data-parent="{{parent or None}}"
-				data-branch="{{branch}}"
-			></svg>
-			<div id="previous">{% if content %} {{content|safe}} {% endif %}</div>
-		</div>
+<h1>Draw</h1>
 
-		<form method="POST">
-			<input type="hidden" name="branch" value="{{branch}}" />
-			<input type="hidden" name="content" />
-			<input type="submit" />
-		</form>
-	</body>
-</html>
+<div id="divSmoothingFactor">
+	<label for="cmbBufferSize">Smoothing</label>
+	<select id="cmbBufferSize">
+		<option value="1">1 - No smoothing</option>
+		<option value="4">4 - Sharp curves</option>
+		<option value="8" selected="selected">8 - Smooth curves</option>
+		<option value="12">12 - Very smooth curves</option>
+		<option value="16">16 - Super smooth curves</option>
+		<option value="20">20 - Hyper smooth curves</option>
+	</select>
+</div>
+
+<div id="svg-container">
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		xmlns:xlink="http://www.w3.org/1999/xlink"
+		version="1.1"
+		id="svgElement"
+		x="0px"
+		y="0px"
+		width="500px"
+		height="500px"
+		viewBox="0 0 500 500"
+		enable-background="new 0 0 500 500"
+		xml:space="preserve"
+		data-parent="{{parent or None}}"
+		data-branch="{{branch}}"
+	></svg>
+	<div id="previous">{% if content %} {{content|safe}} {% endif %}</div>
+</div>
+
+<form method="POST">
+	<input type="hidden" name="branch" value="{{branch}}" />
+	<input type="hidden" name="content" />
+	<input type="text" name="username" placeholder="Name" />
+	<input type="submit" />
+</form>
+{%endblock%}

exquisite_branch/templates/home.html

@@ -7,11 +7,21 @@
 		<title>Exquisite Branch</title>
 		<link rel="stylesheet" href="{{url_for('static', filename='css/variables.css')}}" />
 		<link rel="stylesheet" href="{{url_for('static', filename='css/global.css')}}" />
+		<link rel="stylesheet" href="{{url_for('static', filename='css/home.css')}}" />
 	</head>
 	<body>
-		<h1>Exquisite Branch</h1>
-		<a href="{{url_for('draw.new')}}">Start new</a> <br />
-		<a href="{{url_for('draw.last')}}">Continue from last</a> <br />
-		<a href="{{url_for('display.display')}}">Display results</a>
+		<header class="title">
+			<object
+				data="{{url_for('static', filename='img/logo.svg')}}"
+				type="image/svg+xml"
+			></object>
+
+			<h1>really exquisite indeed</h1>
+		</header>
+		<main>
+			<a href="{{url_for('draw.new')}}">Start new</a> <br />
+			<a href="{{url_for('draw.last')}}">Continue from last</a> <br />
+			<a href="{{url_for('display.display')}}">Display results</a>
+		</main>
 	</body>
 </html>

exquisite_branch/templates/share.html

@@ -1,24 +1,20 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>Share</title>
-		<link rel="stylesheet" href="{{url_for('static', filename='css/variables.css')}}" />
-		<link rel="stylesheet" href="{{url_for('static', filename='css/global.css')}}" />
-		<link rel="stylesheet" href="{{url_for('static', filename='css/share.css')}}" />
+{%extends 'base.html' %} {%block head %}
+<title>Share</title>
+<link rel="stylesheet" href="{{url_for('static', filename='css/share.css')}}" />
+<script src="{{url_for('static', filename='js/copy.js')}}" defer></script>
 
-		<script src="{{url_for('static', filename='js/copy.js')}}" defer></script>
-	</head>
-	<body>
-		<div class="share">
-			Send this link to your friends:
-			<a
-				href="{{url_for('draw.draw', parent=branch)}}"
-				data-copy="{{ url_for('draw.draw', parent=branch, _external=True, _scheme='https')}}"
-				>{{ url_for('draw.draw', parent=branch, _external=True, _scheme='https')}}</a
-			>
-		</div>
-	</body>
-</html>
+{%endblock%} {%block nav %}
+<a href="{{url_for('home.home')}}">Home</a>
+<a href="{{url_for('display.display')}}">Results</a>
+{% endblock %} {%block contents %}
+
+<div class="share">
+	Send this link to your friends:
+	<a
+		href="{{url_for('draw.draw', parent=branch)}}"
+		data-copy="{{ url_for('draw.draw', parent=branch, _external=True, _scheme='https')}}"
+		>{{ url_for('draw.draw', parent=branch, _external=True, _scheme='https')}}</a
+	>
+</div>
+
+{%endblock%}