From 6056f5a2f5e00347c73e827e6f1f781d08d91799 Mon Sep 17 00:00:00 2001 From: blendoit Date: Thu, 23 Jan 2020 19:21:01 -0800 Subject: Create placeholder content and "yes" page styles. --- app/placeholder_messages.py | 20 +++++++++ app/placeholder_news.py | 37 ++++++++++++++++ app/routes.py | 7 ++- app/static/img/home.png | Bin 0 -> 814455 bytes app/static/img/home.xcf | Bin 0 -> 2777134 bytes app/static/styles/default.css | 6 ++- app/static/styles/home.css | 17 ++++++-- app/static/styles/no.css | 35 ++++++++------- app/static/styles/yes.css | 96 +++++++++++++++++++++++++++++++----------- app/templates/home.html | 2 - app/templates/no.html | 10 ++--- app/templates/yes.html | 49 ++++++++++++++++++++- 12 files changed, 223 insertions(+), 56 deletions(-) create mode 100644 app/placeholder_messages.py create mode 100644 app/placeholder_news.py create mode 100644 app/static/img/home.png create mode 100644 app/static/img/home.xcf (limited to 'app') 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 Binary files /dev/null and b/app/static/img/home.png differ diff --git a/app/static/img/home.xcf b/app/static/img/home.xcf new file mode 100644 index 0000000..4c586e5 Binary files /dev/null and b/app/static/img/home.xcf differ 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 @@ {% extends "base.html" %} - {% block content %}
@@ -20,5 +19,4 @@
- {% 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 @@
- {% for post in posts %} -
-

{{post.author}}

-

{{post.date}}

-

{{post.content}}

-
- {% endfor %} +

+ Tell me, no +

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 @@
-

yes, no?

+ +
+ {% for message in messages %} +
+

{{message.author}}

+

{{message.date}}

+

{{message.content}}

+
+ {% endfor %} +
+ +
+ {% for news in news %} +
+

{{news.author}}

+

{{news.date}}

+

{{news.content}}

+
+ {% endfor %} +
+ +
+
+ Buy my sourdough, ah +
+
+ Check out this sponsored link, ere. +
+
+ Another random ad (from a high-paying sponsor hopefully) +
+
+ Ah I literally don't have any other placeholder ideas for ads. +
+
+ Buy my sourdough, ah +
+
+ Check out this sponsored link, ere. +
+
+ Another random ad (from a high-paying sponsor hopefully) +
+
+ Ah I literally don't have any other placeholder ideas for ads. +
+
+
-- cgit v1.2.3