diff options
| -rw-r--r-- | app/placeholder_messages.py | 20 | ||||
| -rw-r--r-- | app/placeholder_news.py | 37 | ||||
| -rw-r--r-- | app/routes.py | 7 | ||||
| -rw-r--r-- | app/static/img/home.png | bin | 0 -> 814455 bytes | |||
| -rw-r--r-- | app/static/img/home.xcf | bin | 0 -> 2777134 bytes | |||
| -rw-r--r-- | app/static/styles/default.css | 6 | ||||
| -rw-r--r-- | app/static/styles/home.css | 17 | ||||
| -rw-r--r-- | app/static/styles/no.css | 35 | ||||
| -rw-r--r-- | app/static/styles/yes.css | 96 | ||||
| -rw-r--r-- | app/templates/home.html | 2 | ||||
| -rw-r--r-- | app/templates/no.html | 10 | ||||
| -rw-r--r-- | app/templates/yes.html | 49 |
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 Binary files differnew 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 Binary files differnew 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> |
