12 files changed, 419 insertions, 0 deletions
diff --git a/app/forms.py b/app/forms.py
new file mode 100644
index 0000000..ae6a2dc
--- /dev/null
+++ b/app/forms.py
@@ -0,0 +1,28 @@
+from flask_wtf import FlaskForm
+from wtforms import StringField, PasswordField, SubmitField, BooleanField
+from wtforms.validators import DataRequired, Length, EqualTo
+
+
+class RegistrationForm(FlaskForm):
+    alias = StringField('Alias',
+                        validators=[DataRequired(),
+                                    Length(min=2, max=20)])
+    password = PasswordField('Password', validators=[DataRequired()])
+    password_confirm = PasswordField(
+        'Confirm Password', validators=[DataRequired(),
+                                        EqualTo('password')])
+    submit = SubmitField('Create Alias')
+
+
+class LoginForm(FlaskForm):
+    alias = StringField('Alias',
+                        validators=[DataRequired(),
+                                    Length(min=2, max=20)])
+    password = PasswordField('Password', validators=[DataRequired()])
+    remember = BooleanField('Remember Alias')
+    submit = SubmitField('Login Alias')
+
+
+class NewMessage(FlaskForm):
+    recipient = StringField('Recipient', validators=[DataRequired()])
+    message = StringField('message', validators=[DataRequired()])
diff --git a/app/routes.py b/app/routes.py
new file mode 100644
index 0000000..f1497b8
--- /dev/null
+++ b/app/routes.py
@@ -0,0 +1,54 @@
+from flask import Flask, render_template, flash, redirect, url_for
+from forms import RegistrationForm, LoginForm
+
+app = Flask(__name__)
+app.config['SECRET_KEY'] = 'foobarblendoitfoobar!'
+
+posts = [{
+    'author':
+    'Marius',
+    'date':
+    'Dec. 26th, 2019',
+    'content':
+    "this is a test where I write a message that isn't too short, it isn't too long, it's just the right size."
+}, {
+    'author': 'Achille',
+    'date': 'Dec. 25th, 2019',
+    'content': "this is a second test!"
+}, {
+    'author': 'Jeanne',
+    'date': 'Dec. 24th, 2019',
+    'content': "this is a third test!"
+}]
+
+
+@app.route("/")
+@app.route("/home")
+def home():
+    return render_template('home.html', posts=posts)
+
+@app.route("/yes")
+def yes():
+    return render_template("yes.html")
+
+@app.route("/no")
+def no():
+    return render_template("no.html")
+
+@app.route("/register", methods=['GET', 'POST'])
+def register():
+    form = RegistrationForm()
+    if form.validate_on_submit():
+        flash(f"Alias created for {form.alias.data}.", 'success')
+        return redirect(url_for('home'))
+    return render_template('register.html', title="Register", form=form)
+
+
+@app.route("/login")
+def login():
+    form = LoginForm()
+    return render_template('login.html', title="Login", form=form)
+
+
+if __name__ == '__main__':
+    app.run(debug=True)
diff --git a/app/static/styles/default.css b/app/static/styles/default.css
new file mode 100644
index 0000000..47ba29d
--- /dev/null
+++ b/app/static/styles/default.css
@@ -0,0 +1,25 @@
+:root {
+    --primary-color: #003B5C;
+    --secondary-color: #C3D7EE;
+    --home: rgba(200, 200, 200, 0.7);
+    --yes: rgba(0, 255, 0, 0.7);
+    --no: rgba(255, 0, 0, 0.7);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: 'Liberation Sans', sans-serif;
+    line-height: 1.2;
+}
+
+h1 {
+
+}
+
+h2 {
+
+}
diff --git a/app/static/styles/home.css b/app/static/styles/home.css
new file mode 100644
index 0000000..262b40c
--- /dev/null
+++ b/app/static/styles/home.css
@@ -0,0 +1,50 @@
+.main {
+    height: 100%;
+    position: absolute;
+    left: 3%;
+    right: 3%;
+    background: linear-gradient(to top, var(--secondary-color), var(--primary-color)) fixed;
+}
+
+.tab-yes {
+    height: 100%;
+    width: 10%;
+    float: left;
+    position: fixed;
+    z-index: -1;
+    background: var(--yes);
+}
+.tab-no {
+    height: 100%;
+    width: 10%;
+    float: right;
+    position: fixed;
+    z-index: -1;
+    right: 0;
+    background: var(--no);
+}
+
+.tab-yes:hover ~ .main {
+    left: 5%;
+    transition: 0.2s;
+}
+
+.tab-no:hover ~ .main {
+    right: 5%;
+    transition: 0.2s;
+}
+
+.post {
+    background: white;
+    border-radius: 14px;
+    padding: 1rem;
+    margin: 1rem;
+    width: 20%;
+}
+
+.post:hover {
+    background: linear-gradient(to left, var(--no) 50%, var(--yes) 50%);
+    cursor: pointer;
+    transition: 0.8s;
+    color: white;
+}
diff --git a/app/static/styles/no.css b/app/static/styles/no.css
new file mode 100644
index 0000000..09171a6
--- /dev/null
+++ b/app/static/styles/no.css
@@ -0,0 +1,54 @@
+.main {
+    height: 100%;
+    right: 0;
+    left: 6%;
+    position: absolute;
+    z-index: 1;
+    background: linear-gradient(to top, var(--secondary-color), var(--primary-color)) fixed;
+}
+
+.tab-home {
+    height: 100%;
+    width: 3%;
+    float: left;
+    position: relative;
+    z-index: 0;
+    background: var(--home);
+}
+
+.tab-yes {
+    height: 100%;
+    width: 3%;
+    float: left;
+    position: relative;
+    z-index: -1;
+    background: var(--yes);
+}
+
+.tab-home:hover ~ .main {
+    left: 9%;
+    transition: 0.2s;
+}
+
+.tab-home:hover {
+    width: 6%;
+    transition: 0.2s;
+}
+
+.tab-yes:hover ~ .main {
+    left: 9%;
+    transition: 0.2s;
+}
+
+.tab-yes:hover {
+    width: 6%;
+    transition: 0.2s;
+}
+
+.post {
+    background: white;
+    border-radius: 14px;
+    padding: 1rem;
+    margin: 1rem;
+    width: 20%;
+}
diff --git a/app/static/styles/yes.css b/app/static/styles/yes.css
new file mode 100644
index 0000000..96443e1
--- /dev/null
+++ b/app/static/styles/yes.css
@@ -0,0 +1,54 @@
+.main {
+    height: 100%;
+    right: 6%;
+    left: 0;
+    position: absolute;
+    z-index: 1;
+    background: linear-gradient(to top, var(--secondary-color), var(--primary-color)) fixed;
+}
+
+.tab-home {
+    height: 100%;
+    width: 3%;
+    float: right;
+    position: relative;
+    z-index: 0;
+    background: var(--home);
+}
+
+.tab-no {
+    height: 100%;
+    width: 3%;
+    float: right;
+    position: relative;
+    z-index: -1;
+    background: var(--no);
+}
+
+.tab-home:hover ~ .main {
+    right: 9%;
+    transition: 0.2s;
+}
+
+.tab-home:hover {
+    width: 6%;
+    transition: 0.2s;
+}
+
+.tab-no:hover ~ .main {
+    right: 9%;
+    transition: 0.2s;
+}
+
+.tab-no:hover {
+    width: 6%;
+    transition: 0.2s;
+}
+
+.post {
+    background: white;
+    border-radius: 14px;
+    padding: 1rem;
+    margin: 1rem;
+    width: 20%;
+}
diff --git a/app/templates/base.html b/app/templates/base.html
new file mode 100644
index 0000000..5520493
--- /dev/null
+++ b/app/templates/base.html
@@ -0,0 +1,25 @@
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to">
+
+        {% if title %}
+        <title>{{ title }}</title>
+        {% else %}
+        <title>Blendoit</title>
+        {% endif %}
+    </head>
+    <body>
+        {% with messages = get_flashed_messages(with_categories=true) %}
+        {% if messages %}
+        {% for message in messages %}
+        <div class="alert">
+            {{ message }}
+        </div>
+        {% endfor %}
+        {% endif %}
+        {% endwith %}
+
+        {% block content %}{% endblock %}
+    </body>
+</html>
diff --git a/app/templates/home.html b/app/templates/home.html
new file mode 100644
index 0000000..89984eb
--- /dev/null
+++ b/app/templates/home.html
@@ -0,0 +1,24 @@
+<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/default.css') }}">
+<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/home.css') }}">
+
+{% extends "base.html" %}
+
+{% block content %}
+
+<div>
+    <a href="{{ url_for('yes') }}" class="tab-yes"></a>
+    <a href="{{ url_for('no') }}" class="tab-no"></a>
+
+    <div class="main">
+        {% for post in posts %}
+        <div class="post">
+            <h1>{{post.author}}</h1>
+            <h2>{{post.date}}</h2>
+            <p>{{post.content}}</p>
+        </div>
+        {% endfor %}
+    </div>
+</div>
+
+
+{% endblock content %}
diff --git a/app/templates/login.html b/app/templates/login.html
new file mode 100644
index 0000000..63217e1
--- /dev/null
+++ b/app/templates/login.html
@@ -0,0 +1,34 @@
+{% extends "base.html" %}
+{% block content %}
+
+<div class="content-section">
+    <form method="POST" action="">
+        {{ form.hidden_tag() }}
+        <fieldset class="form-group">
+            <legend>Join Today</legend>
+            <div class="form-group">
+                {{ form.alias.label }}
+                {{ form.alias }}
+            </div>
+            <div class="form-group">
+                {{ form.password.label }}
+                {{ form.password }}
+            </div>
+            <div class="form-group">
+                {{ form.password_confirm.label }}
+                {{ form.password_confirm }}
+            </div>
+        </fieldset>
+        <div class="form-group">
+            {{ form.submit(class="btn") }}
+        </div>
+    </form>
+</div>
+
+<div>
+    <small>
+        Already have an account? <a href="{{ url_for('login') }}">Sign In</a>
+    </small>
+</div>
+
+{% endblock content %}
diff --git a/app/templates/no.html b/app/templates/no.html
new file mode 100644
index 0000000..e1b9238
--- /dev/null
+++ b/app/templates/no.html
@@ -0,0 +1,23 @@
+<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/default.css') }}">
+<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/no.css') }}">
+
+{% extends "base.html" %}
+{% block content %}
+
+<div>
+    <a href="{{ url_for('yes') }}" class="tab-yes"></a>
+    <a href="{{ url_for('home') }}" class="tab-home"></a>
+
+    <div class="main">
+        {% for post in posts %}
+        <div class="post">
+            <h1>{{post.author}}</h1>
+            <h2>{{post.date}}</h2>
+            <p>{{post.content}}</p>
+        </div>
+        {% endfor %}
+    </div>
+</div>
+
+
+{% endblock content %}
diff --git a/app/templates/register.html b/app/templates/register.html
new file mode 100644
index 0000000..456b8f7
--- /dev/null
+++ b/app/templates/register.html
@@ -0,0 +1,31 @@
+{% extends "base.html" %}
+{% block content %}
+
+<div class="content-section">
+    <form method="POST" action="">
+        {{ form.hidden_tag() }}
+        <fieldset class="form-group">
+            <legend>Create a new alias</legend>
+            <div class="form-group">
+                {{ form.alias.label(class="form-control-label") }}
+                {{ form.alias(class="form-control") }}
+            </div>
+            <div class="form-group">
+                {{ form.password.label(class="form-control-label") }}
+                {{ form.password(class="form-control") }}
+            </div>
+            <div class="form-group">
+                {{ form.password_confirm.label(class="form-control-label") }}
+                {{ form.password_confirm(class="form-control") }}
+            </div>
+        </fieldset>
+        <div class="form-group">
+            {{ form.submit(class="btn") }}
+        </div>
+    </form>
+</div>
+<div>
+    Sign in with existing alias? <a href="{{ url_for('login') }}">Sign In</a>
+</div>
+
+{% endblock content %}
diff --git a/app/templates/yes.html b/app/templates/yes.html
new file mode 100644
index 0000000..b915221
--- /dev/null
+++ b/app/templates/yes.html
@@ -0,0 +1,17 @@
+<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/default.css') }}">
+<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/yes.css') }}">
+
+{% extends "base.html" %}
+{% block content %}
+
+<div>
+    <a href="{{ url_for('no') }}" class="tab-no"></a>
+    <a href="{{ url_for('home') }}" class="tab-home"></a>
+
+    <div class="main">
+        <p> yes, no?</p>
+    </div>
+</div>
+
+
+{% endblock content %}