Create placeholder content and "yes" page styles.

12 files changed, 223 insertions, 56 deletions

diff --git a/app/placeholder_messages.py b/app/placeholder_messages.py
new file mode 100644
index 0000000..4416106
--- /dev/null
+++ b/app/placeholder_messages.py
@@ -0,0 +1,20 @@
+messages = [{
+    'author': 'A.Banyan_97',
+    'date': 'Dec. 26th, 2019',
+    'content': "How is it going?"
+}, {
+    'author': 'itsgeorgeeid',
+    'date': 'Dec. 25th, 2019',
+    'content': "Bas man we should have a private sesh."
+}, {
+    'author': 'Country_V',
+    'date': 'Dec. 24th, 2019',
+    'content': "Have you checked out Young Thug's latest leak?!"
+}, {
+    'author':
+    'Blendoit',
+    'date':
+    'Dec. 26th, 2019',
+    'content':
+    "Ah, I'm creating a new website with a friend from college, how about you?"
+}]
diff --git a/app/placeholder_news.py b/app/placeholder_news.py
new file mode 100644
index 0000000..a55f8c7
--- /dev/null
+++ b/app/placeholder_news.py
@@ -0,0 +1,37 @@
+news = [{
+    'author': 'CNN',
+    'date': 'Dec. 26th, 2019',
+    'content': "Breaking news: the squad is in shambles."
+}, {
+    'author': 'Blendoit',
+    'date': 'Dec. 25th, 2019',
+    'content': "Ah, this is a public personal update."
+}, {
+    'author': 'Country_V',
+    'date': 'Dec. 24th, 2019',
+    'content': "This is a second public personal update."
+}, {
+    'author': 'CNN',
+    'date': 'Dec. 26th, 2019',
+    'content': "Breaking news: the squad is in shambles."
+}, {
+    'author': 'Blendoit',
+    'date': 'Dec. 25th, 2019',
+    'content': "Ah, this is a public personal update."
+}, {
+    'author': 'Country_V',
+    'date': 'Dec. 24th, 2019',
+    'content': "This is a second public personal update."
+}, {
+    'author': 'CNN',
+    'date': 'Dec. 26th, 2019',
+    'content': "Breaking news: the squad is in shambles."
+}, {
+    'author': 'Blendoit',
+    'date': 'Dec. 25th, 2019',
+    'content': "Ah, this is a public personal update."
+}, {
+    'author': 'Country_V',
+    'date': 'Dec. 24th, 2019',
+    'content': "This is a second public personal update."
+}]
diff --git a/app/routes.py b/app/routes.py
index f1497b8..7152edd 100644
--- a/app/routes.py
+++ b/app/routes.py
@@ -1,5 +1,7 @@
 from flask import Flask, render_template, flash, redirect, url_for
 from forms import RegistrationForm, LoginForm
+from placeholder_news import news
+from placeholder_messages import messages
 
 app = Flask(__name__)
 app.config['SECRET_KEY'] = 'foobarblendoitfoobar!'
@@ -27,14 +29,17 @@ posts = [{
 def home():
     return render_template('home.html', posts=posts)
 
+
 @app.route("/yes")
 def yes():
-    return render_template("yes.html")
+    return render_template("yes.html", messages=messages, news=news)
+
 
 @app.route("/no")
 def no():
     return render_template("no.html")
 
+
 @app.route("/register", methods=['GET', 'POST'])
 def register():
     form = RegistrationForm()
diff --git a/app/static/img/home.png b/app/static/img/home.png
new file mode 100644
index 0000000..11bce1e
--- /dev/null
+++ b/app/static/img/home.png
diff --git a/app/static/img/home.xcf b/app/static/img/home.xcf
new file mode 100644
index 0000000..4c586e5
--- /dev/null
+++ b/app/static/img/home.xcf
diff --git a/app/static/styles/default.css b/app/static/styles/default.css
index 47ba29d..51c6549 100644
--- a/app/static/styles/default.css
+++ b/app/static/styles/default.css
@@ -4,6 +4,9 @@
     --home: rgba(200, 200, 200, 0.7);
     --yes: rgba(0, 255, 0, 0.7);
     --no: rgba(255, 0, 0, 0.7);
+    background-image: url(../img/home.png);
+    background-repeat: repeat-x;
+    transition-timing-function: ease-in-out;
 }
 
 * {
@@ -17,9 +20,10 @@ body {
 }
 
 h1 {
-
 }
 
 h2 {
+}
 
+p {
 }
diff --git a/app/static/styles/home.css b/app/static/styles/home.css
index 262b40c..e2617bd 100644
--- a/app/static/styles/home.css
+++ b/app/static/styles/home.css
@@ -1,22 +1,23 @@
 .main {
     height: 100%;
     position: absolute;
+    z-index: 1;
     left: 3%;
     right: 3%;
-    background: linear-gradient(to top, var(--secondary-color), var(--primary-color)) fixed;
 }
 
 .tab-yes {
     height: 100%;
-    width: 10%;
+    width: 3%;
     float: left;
     position: fixed;
     z-index: -1;
+    left: 0;
     background: var(--yes);
 }
 .tab-no {
     height: 100%;
-    width: 10%;
+    width: 3%;
     float: right;
     position: fixed;
     z-index: -1;
@@ -24,6 +25,16 @@
     background: var(--no);
 }
 
+.tab-yes:hover {
+    width: 4%;
+    transition: 0.2s;
+}
+
+.tab-no:hover {
+    width: 4%;
+    transition: 0.2s;
+}
+
 .tab-yes:hover ~ .main {
     left: 5%;
     transition: 0.2s;
diff --git a/app/static/styles/no.css b/app/static/styles/no.css
index 09171a6..352a635 100644
--- a/app/static/styles/no.css
+++ b/app/static/styles/no.css
@@ -1,47 +1,50 @@
 .main {
     height: 100%;
-    right: 0;
-    left: 6%;
     position: absolute;
     z-index: 1;
-    background: linear-gradient(to top, var(--secondary-color), var(--primary-color)) fixed;
+    left: 7%;
 }
 
-.tab-home {
+.tab-yes {
     height: 100%;
     width: 3%;
     float: left;
     position: relative;
-    z-index: 0;
-    background: var(--home);
+    z-index: 1;
+    background: var(--yes);
 }
 
-.tab-yes {
+.tab-home {
     height: 100%;
     width: 3%;
     float: left;
     position: relative;
-    z-index: -1;
-    background: var(--yes);
+    z-index: 1;
+    background: var(--home);
 }
 
-.tab-home:hover ~ .main {
-    left: 9%;
+.tab-home:hover {
+    width: 4%;
     transition: 0.2s;
 }
 
-.tab-home:hover {
-    width: 6%;
+.tab-yes:hover ~ .main {
+    left: 10%;
     transition: 0.2s;
 }
 
-.tab-yes:hover ~ .main {
-    left: 9%;
+.tab-home:hover ~ .main {
+    left: 8%;
+    transition: 0.2s;
+}
+
+.tab-yes:hover ~ .tab-home {
+    width: 5%;
     transition: 0.2s;
 }
 
 .tab-yes:hover {
-    width: 6%;
+    width: 4%;
     transition: 0.2s;
 }
 
diff --git a/app/static/styles/yes.css b/app/static/styles/yes.css
index 96443e1..3e8e614 100644
--- a/app/static/styles/yes.css
+++ b/app/static/styles/yes.css
@@ -1,54 +1,100 @@
+/* Main page components. */
 .main {
     height: 100%;
-    right: 6%;
-    left: 0;
-    position: absolute;
-    z-index: 1;
-    background: linear-gradient(to top, var(--secondary-color), var(--primary-color)) fixed;
+    position: relative;
+    z-index: 0;
+    overflow: hidden;
 }
 
-.tab-home {
+/* Feeds. */
+.feed-message {
     height: 100%;
-    width: 3%;
-    float: right;
+    width: 30%;
     position: relative;
-    z-index: 0;
-    background: var(--home);
+    float: left;
+    overflow: auto;
+}
+.feed-post {
+    height: 100%;
+    width: 30%;
+    position: relative;
+    float: left;
+    overflow: auto;
+}
+.feed-ads {
+    height: 100%;
+    width: 20%;
+    position: relative;
+    float: left;
+    overflow: auto;
 }
 
+/* Tabs. */
 .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 {
+    height: 100%;
+    width: 3%;
+    float: right;
+    position: relative;
+    background: var(--home);
 }
-
 .tab-home:hover {
-    width: 6%;
+    width: 4%;
     transition: 0.2s;
 }
-
-.tab-no:hover ~ .main {
-    right: 9%;
+.tab-no:hover ~ .tab-home {
+    width: 5%;
     transition: 0.2s;
 }
-
 .tab-no:hover {
-    width: 6%;
+    width: 4%;
     transition: 0.2s;
 }
 
-.post {
+/* Messages. */
+.message {
     background: white;
     border-radius: 14px;
     padding: 1rem;
-    margin: 1rem;
-    width: 20%;
+    margin: 0.5rem;
+}
+.message:hover {
+    background: linear-gradient(to left, var(--no) 50%, var(--yes) 50%);
+    cursor: pointer;
+    transition: 0.8s;
+    color: white;
+}
+
+/* News. */
+.news {
+    background: white;
+    border-radius: 14px;
+    padding: 1rem;
+    margin: 0.5rem;
+}
+.news:hover {
+    background: linear-gradient(to left, var(--no) 50%, var(--yes) 50%);
+    cursor: pointer;
+    transition: 0.8s;
+    color: white;
+}
+
+/* Ads. */
+.ad {
+    background: white;
+    border-radius: 14px;
+    padding: 1rem;
+    margin: 0.5rem;
+}
+.ad:hover {
+    background: linear-gradient(to left, var(--no) 50%, var(--yes) 50%);
+    cursor: pointer;
+    transition: 0.8s;
+    color: white;
 }
diff --git a/app/templates/home.html b/app/templates/home.html
index 89984eb..6205c03 100644
--- a/app/templates/home.html
+++ b/app/templates/home.html
@@ -2,7 +2,6 @@
 <link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/home.css') }}">
 
 {% extends "base.html" %}
-
 {% block content %}
 
 <div>
@@ -20,5 +19,4 @@
     </div>
 </div>
 
-
 {% endblock content %}
diff --git a/app/templates/no.html b/app/templates/no.html
index e1b9238..5bb7a0f 100644
--- a/app/templates/no.html
+++ b/app/templates/no.html
@@ -9,13 +9,9 @@
     <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 %}
+        <p>
+            Tell me, no
+        </p>
     </div>
 </div>
 
diff --git a/app/templates/yes.html b/app/templates/yes.html
index b915221..00a330d 100644
--- a/app/templates/yes.html
+++ b/app/templates/yes.html
@@ -9,7 +9,54 @@
     <a href="{{ url_for('home') }}" class="tab-home"></a>
 
     <div class="main">
-        <p> yes, no?</p>
+
+        <div class="feed-message">
+            {% for message in messages %}
+            <div class="message">
+                <h1>{{message.author}}</h1>
+                <h2>{{message.date}}</h2>
+                <p>{{message.content}}</p>
+            </div>
+            {% endfor %}
+        </div>
+
+        <div class="feed-post">
+            {% for news in news %}
+            <div class="news">
+                <h1>{{news.author}}</h1>
+                <h2>{{news.date}}</h2>
+                <p>{{news.content}}</p>
+            </div>
+            {% endfor %}
+        </div>
+
+        <div class="feed-ads">
+            <div class="ad">
+                Buy my sourdough, ah
+            </div>
+            <div class="ad">
+                Check out this sponsored link, ere.
+            </div>
+            <div class="ad">
+                Another random ad (from a high-paying sponsor hopefully)
+            </div>
+            <div class="ad">
+                Ah I literally don't have any other placeholder ideas for ads.
+            </div>
+            <div class="ad">
+                Buy my sourdough, ah
+            </div>
+            <div class="ad">
+                Check out this sponsored link, ere.
+            </div>
+            <div class="ad">
+                Another random ad (from a high-paying sponsor hopefully)
+            </div>
+            <div class="ad">
+                Ah I literally don't have any other placeholder ideas for ads.
+            </div>
+        </div>
+        </div>
     </div>
 </div>