From 569d40161b8713804c3a9e7e5216d72e1efe7279 Mon Sep 17 00:00:00 2001 From: nsde Date: Thu, 21 Sep 2023 23:59:10 +0200 Subject: [PATCH] Added user dashboard Co-authored-by: Leander --- .vscode/settings.json | 6 ++-- web/__main__.py | 0 web/account.py | 39 ++++++++++++++++---------- web/app.py | 2 +- web/static/css/_vars.sass | 8 +++--- web/static/css/base.css | 15 +++++++--- web/static/css/base.css.map | 2 +- web/static/css/base.sass | 8 +++++- web/static/css/footer.css.map | 2 +- web/static/css/home.css | 34 ++++++++++------------- web/static/css/home.css.map | 2 +- web/static/css/home.sass | 14 ++++------ web/static/css/input.css | 34 ++++++++++++++++++++--- web/static/css/input.css.map | 2 +- web/static/css/input.sass | 25 +++++++++++++++++ web/static/css/navbar.css | 6 ++-- web/static/css/navbar.css.map | 2 +- web/static/css/profile.css | 20 ++++++++++++++ web/static/css/profile.css.map | 1 + web/static/css/profile.sass | 20 ++++++++++++++ web/templates/account.html | 37 ++++++++++++++++++++++++- web/templates/common/begin.html | 2 +- web/templates/index.html | 49 +++++++++++++++++++++------------ web/tos.py | 0 24 files changed, 243 insertions(+), 87 deletions(-) mode change 100644 => 100755 web/__main__.py mode change 100644 => 100755 web/account.py mode change 100644 => 100755 web/app.py create mode 100644 web/static/css/profile.css create mode 100644 web/static/css/profile.css.map create mode 100644 web/static/css/profile.sass mode change 100644 => 100755 web/tos.py diff --git a/.vscode/settings.json b/.vscode/settings.json index e092ab3..8e3871d 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -18,7 +18,8 @@ "web/static/css/footer.css": true, "web/static/css/home.css": true, "web/static/css/input.css": true, - "web/static/css/navbar.css": true + "web/static/css/navbar.css": true, + "web/static/css/profile.css": true }, "hide-files.files": [ "static/css/base.css", @@ -30,6 +31,7 @@ "web/static/css/footer.css", "web/static/css/home.css", "web/static/css/input.css", - "web/static/css/navbar.css" + "web/static/css/navbar.css", + "web/static/css/profile.css" ] } \ No newline at end of file diff --git a/web/__main__.py b/web/__main__.py old mode 100644 new mode 100755 diff --git a/web/account.py b/web/account.py old mode 100644 new mode 100755 index 8245a58..6766cfb --- a/web/account.py +++ b/web/account.py @@ -1,6 +1,7 @@ import os import flask import requests +import functools from dotenv import load_dotenv from requests_oauthlib import OAuth2Session @@ -12,20 +13,23 @@ os.environ['OAUTHLIB_INSECURE_TRANSPORT'] = '0' # change this to '1' if you're r API_URL = 'https://discordapp.com/api' CLIENT_ID = str(os.environ['DISCORD_CLIENT_ID']) CLIENT_SECRET = os.environ['DISCORD_CLIENT_SECRET'] -# REDIRECT_URI = 'https://nova-oss.com/callback/discord' -REDIRECT_URI = 'http://localhost:2211/callback/discord' +REDIRECT_URI = 'https://nova-oss.com/callback/discord' +# REDIRECT_URI = 'http://localhost:2211/callback/discord' SCOPES = ['identify'] +@functools.lru_cache(maxsize=128) def get_user(discord_id: int) -> dict: - return requests.get( + res = requests.get( url=f'http://localhost:2333/users?discord_id={discord_id}', timeout=3, headers={ 'Content-Type': 'application/json', - 'Authorization': os.getenv('CORE_API_KEY') + 'Authorization': os.environ['CORE_API_KEY'] } ).json() + return res + def register(app): @app.route('/logout') def logout(): @@ -34,28 +38,32 @@ def register(app): @app.route('/account') def account_view(): - discord_id = flask.session.get('discord_id') - - if not discord_id: + try: + discord_id = flask.session['discord_id'] + except KeyError: return flask.redirect('/login') discord_account = OAuth2Session(CLIENT_ID, token=flask.session['discord_token']) - profile = discord_account.get(f'{API_URL}/users/@me').json() + discord_user = discord_account.get(f'{API_URL}/users/@me').json() db_user = get_user(discord_id) user = { - 'name': profile['username'], - 'avatar': profile['avatar'], - 'role': db_user['role'], - 'credits': db_user['credits'], - 'api_key': db_user['api_key'] + 'username': discord_user.get('username'), + 'display_name': discord_user.get('global_name'), + 'avatar': f'https://cdn.discordapp.com/avatars/{discord_user.get("id")}/{discord_user.get("avatar")}.png', + 'role': db_user.get('role'), + 'credits': db_user.get('credits'), + 'api_key': db_user.get('api_key') } return flask.render_template('account.html', user=user) @app.route('/login') def login_view(): + if flask.session.get('discord_token'): + return flask.redirect('/account') + return flask.render_template('login.html') @app.route('/auth/discord', methods=['POST', 'GET']) @@ -78,9 +86,10 @@ def register(app): client_secret=CLIENT_SECRET, authorization_response=flask.request.url, ) - flask.session['discord_token'] = token - print('Token:', token) + flask.session.permanent = True + flask.session['discord_token'] = token + flask.session['discord_id'] = discord_account.get(f'{API_URL}/users/@me').json()['id'] return flask.redirect('/account') diff --git a/web/app.py b/web/app.py old mode 100644 new mode 100755 index 797c67a..91e43fe --- a/web/app.py +++ b/web/app.py @@ -14,7 +14,7 @@ log.disabled = True def create_app() -> flask.Flask: app = flask.Flask(__name__) app.wsgi_app = ProxyFix(app.wsgi_app, x_for=1, x_proto=1, x_host=1, x_prefix=1) - app.secret_key = secrets.token_hex(16) + app.secret_key = os.environ['FLASK_SECRET_KEY'] app.jinja_env.trim_blocks = True app.jinja_env.lstrip_blocks = True diff --git a/web/static/css/_vars.sass b/web/static/css/_vars.sass index d821551..1d9de7a 100644 --- a/web/static/css/_vars.sass +++ b/web/static/css/_vars.sass @@ -5,10 +5,10 @@ $secondary-dark: #0e0e0e $border: #161d2bb0 $soft: #fcf7f824 -$primary: #b53d61 -$primary-light: #f45a88 -$primary-glow: #f45a8861 -$primary-soft: #f79ab624 +$primary: #5f44b9 +$primary-light: #b88df0 +$primary-glow: #683a9638 +$primary-soft: #cc9af724 $accent: #28aaf0 $error: #ef3628 diff --git a/web/static/css/base.css b/web/static/css/base.css index 2e9ed81..4837873 100644 --- a/web/static/css/base.css +++ b/web/static/css/base.css @@ -38,14 +38,14 @@ h3, h3 * { main a { text-decoration: underline; - text-decoration-color: #b53d61; + text-decoration-color: #5f44b9; text-underline-offset: 2px; text-decoration-thickness: 5px; transition: 0.2s; } main a:hover { text-decoration-thickness: 0; - background: rgba(244, 90, 136, 0.3803921569); + background: rgba(104, 58, 150, 0.2196078431); } main p { @@ -59,7 +59,7 @@ img { mark { color: #f3f3f3; - background: #b53d61; + background: #5f44b9; padding: 5px 7px; border-radius: 5px; } @@ -118,11 +118,18 @@ h6 { } .special-gradient { - background: linear-gradient(83deg, rgb(244, 90, 136) 7%, rgb(40, 170, 240) 100%); + background: linear-gradient(45deg, #be89ec 7%, #2867f0 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } +.box { + background: rgba(204, 154, 247, 0.1411764706); + border: 2px solid rgba(204, 154, 247, 0.1411764706); + border-radius: 5px; + padding: 1rem 2rem; +} + @media (max-width: 900px) { body { margin: 0 2rem; diff --git a/web/static/css/base.css.map b/web/static/css/base.css.map index f62a07c..50d9bdd 100644 --- a/web/static/css/base.css.map +++ b/web/static/css/base.css.map @@ -1 +1 @@ -{"version":3,"sources":["base.sass","base.css","_vars.sass"],"names":[],"mappings":"AAEA;EACI,uBAAA;ACDJ;;ADGA;EACI,yBELS;ADKb;;ADEA;EACI,gBEUS;EFTT,cAAA;ACCJ;;ADCA;EACI,sBAAA;EACA,YAAA;EACA,cEfG;EFgBH,gCAAA;ACEJ;;ADAA;EACI,qBAAA;ACGJ;;ADAI;EACI,gBAAA;EACA,iBAAA;EACA,+BAAA;ACGR;;ADAI;EACI,mBAAA;ACGR;;ADAI;EACI,mBAAA;ACGR;;ADDA;EACI,0BAAA;EACA,8BE9BM;EF+BN,0BAAA;EACA,8BAAA;EAEA,gBAAA;ACGJ;ADDI;EACI,4BAAA;EACA,4CEpCO;ADuCf;;ADDA;EACI,YAAA;ACIJ;;ADFA;EACI,cAAA;EACA,eAAA;ACKJ;;ADHA;EACI,cEvDG;EFwDH,mBEjDM;EFkDN,gBAAA;EACA,kBAAA;ACMJ;;ADJA;EACI,8CAAA;EACA,gBAAA;EACA,mBE7DQ;EF8DR,kBE/CG;EFgDH,sBAAA;EACA,gCAAA;ACOJ;;ADLA;EACI,cAAA;EACA,kBAAA;EACA,8BAAA;EACA,YAAA;EACA,mBEvEQ;EFwER,WAAA;EACA,kBE1DG;ADkEP;ADNI;EACI,0BEjEA;ADyER;ADPI;EACI,0BElED;AD2EP;ADRI;EACI,0BEnEE;AD6EV;;ADRA;EACI,8CAAA;EACA,gBAAA;EACA,mBErFQ;EFsFR,kBEvEG;EFwEH,sBAAA;ACWJ;;ADRI;EACI,mBAAA;ACWR;;ADTA;EACI,iBAAA;ACYJ;;ADVA;EACI,YAAA;EACA,mBAAA;ACaJ;;ADXA;EAEI,aAAA;ACaJ;;ADXA;EACI,gFAAA;EACA,6BAAA;EACA,oCAAA;ACcJ;;ADZA;EACI;IACI,cAAA;IACA,gBAAA;ECeN;AACF","file":"base.css","sourcesContent":["@import '_vars'\n\nhtml\n scroll-behavior: smooth\n\nbody\n background-color: $background\n\nnav, main, footer\n max-width: $main-width\n margin: 0 auto\n\n*, *::before, *::after\n box-sizing: border-box\n border: none\n color: $text\n font-family: 'Inter', sans-serif\n\na\n text-decoration: none\n\nh1, h2, h3\n &, *\n font-weight: 700\n line-height: 3rem\n font-family: 'Syne', sans-serif\n\nh2\n &, *\n line-height: 2.2rem\n\nh3\n &, *\n line-height: 1.5rem\n\nmain a\n text-decoration: underline\n text-decoration-color: $primary\n text-underline-offset: 2px\n text-decoration-thickness: 5px\n\n transition: 0.2s\n\n &:hover\n text-decoration-thickness: 0\n background: $primary-glow\n\nmain p\n opacity: 0.9\n\nimg\n display: block\n max-width: 100%\n\nmark\n color: $text\n background: $primary\n padding: 5px 7px\n border-radius: 5px\n\nkbd\n font-family: 'Courier New', Courier, monospace\n font-weight: 600\n background: $secondary\n border-radius: $edge\n padding: 0.2rem 0.4rem\n border-bottom: 3px solid $secondary-dark\n\nblockquote\n margin-left: 0\n padding: 1rem 1rem\n border-left: 5px solid $accent\n opacity: 0.8\n background: $secondary\n width: 100%\n border-radius: $edge\n\n &.error\n border-left-color: $error\n &.warning\n border-left-color: $warn\n &.success\n border-left-color: $success\n\ncode\n font-family: 'Courier New', Courier, monospace\n font-weight: 600\n background: $secondary\n border-radius: $edge\n padding: 0.2rem 0.4rem\n\npre code\n *, &\n font-weight: normal\n\np, p *, ol, ul, li\n line-height: 32px\n\nh6\n opacity: 0.7\n font-weight: normal\n\n:focus:not(:focus-visible)\n\n outline: none\n\n.special-gradient\n background: linear-gradient(83deg, rgba(244,90,136,1) 7%, rgba(40,170,240,1) 100%)\n -webkit-background-clip: text\n -webkit-text-fill-color: transparent\n\n@media (max-width: 900px)\n body\n margin: 0 2rem\n margin-top: 2rem\n","html {\n scroll-behavior: smooth;\n}\n\nbody {\n background-color: #03060d;\n}\n\nnav, main, footer {\n max-width: 800px;\n margin: 0 auto;\n}\n\n*, *::before, *::after {\n box-sizing: border-box;\n border: none;\n color: #f3f3f3;\n font-family: \"Inter\", sans-serif;\n}\n\na {\n text-decoration: none;\n}\n\nh1, h1 *, h2, h2 *, h3, h3 * {\n font-weight: 700;\n line-height: 3rem;\n font-family: \"Syne\", sans-serif;\n}\n\nh2, h2 * {\n line-height: 2.2rem;\n}\n\nh3, h3 * {\n line-height: 1.5rem;\n}\n\nmain a {\n text-decoration: underline;\n text-decoration-color: #b53d61;\n text-underline-offset: 2px;\n text-decoration-thickness: 5px;\n transition: 0.2s;\n}\nmain a:hover {\n text-decoration-thickness: 0;\n background: rgba(244, 90, 136, 0.3803921569);\n}\n\nmain p {\n opacity: 0.9;\n}\n\nimg {\n display: block;\n max-width: 100%;\n}\n\nmark {\n color: #f3f3f3;\n background: #b53d61;\n padding: 5px 7px;\n border-radius: 5px;\n}\n\nkbd {\n font-family: \"Courier New\", Courier, monospace;\n font-weight: 600;\n background: #252a38;\n border-radius: 5px;\n padding: 0.2rem 0.4rem;\n border-bottom: 3px solid #0e0e0e;\n}\n\nblockquote {\n margin-left: 0;\n padding: 1rem 1rem;\n border-left: 5px solid #28aaf0;\n opacity: 0.8;\n background: #252a38;\n width: 100%;\n border-radius: 5px;\n}\nblockquote.error {\n border-left-color: #ef3628;\n}\nblockquote.warning {\n border-left-color: #f09928;\n}\nblockquote.success {\n border-left-color: #28ef6b;\n}\n\ncode {\n font-family: \"Courier New\", Courier, monospace;\n font-weight: 600;\n background: #252a38;\n border-radius: 5px;\n padding: 0.2rem 0.4rem;\n}\n\npre code *, pre code {\n font-weight: normal;\n}\n\np, p *, ol, ul, li {\n line-height: 32px;\n}\n\nh6 {\n opacity: 0.7;\n font-weight: normal;\n}\n\n:focus:not(:focus-visible) {\n outline: none;\n}\n\n.special-gradient {\n background: linear-gradient(83deg, rgb(244, 90, 136) 7%, rgb(40, 170, 240) 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n@media (max-width: 900px) {\n body {\n margin: 0 2rem;\n margin-top: 2rem;\n }\n}","$text: #f3f3f3\n$background: #03060d\n$secondary: #252a38\n$secondary-dark: #0e0e0e\n$border: #161d2bb0\n$soft: #fcf7f824\n\n$primary: #b53d61\n$primary-light: #f45a88\n$primary-glow: #f45a8861\n$primary-soft: #f79ab624\n$accent: #28aaf0\n\n$error: #ef3628\n$warn: #f09928\n$success: #28ef6b\n\n$edge: 5px\n\n$main-width: 800px\n$more-width: 1000px\n"]} \ No newline at end of file +{"version":3,"sources":["base.sass","base.css","_vars.sass"],"names":[],"mappings":"AAEA;EACI,uBAAA;ACDJ;;ADGA;EACI,yBELS;ADKb;;ADEA;EACI,gBEUS;EFTT,cAAA;ACCJ;;ADCA;EACI,sBAAA;EACA,YAAA;EACA,cEfG;EFgBH,gCAAA;ACEJ;;ADAA;EACI,qBAAA;ACGJ;;ADAI;EACI,gBAAA;EACA,iBAAA;EACA,+BAAA;ACGR;;ADAI;EACI,mBAAA;ACGR;;ADAI;EACI,mBAAA;ACGR;;ADDA;EACI,0BAAA;EACA,8BE9BM;EF+BN,0BAAA;EACA,8BAAA;EAEA,gBAAA;ACGJ;ADDI;EACI,4BAAA;EACA,4CEpCO;ADuCf;;ADDA;EACI,YAAA;ACIJ;;ADFA;EACI,cAAA;EACA,eAAA;ACKJ;;ADHA;EACI,cEvDG;EFwDH,mBEjDM;EFkDN,gBAAA;EACA,kBAAA;ACMJ;;ADJA;EACI,8CAAA;EACA,gBAAA;EACA,mBE7DQ;EF8DR,kBE/CG;EFgDH,sBAAA;EACA,gCAAA;ACOJ;;ADLA;EACI,cAAA;EACA,kBAAA;EACA,8BAAA;EACA,YAAA;EACA,mBEvEQ;EFwER,WAAA;EACA,kBE1DG;ADkEP;ADNI;EACI,0BEjEA;ADyER;ADPI;EACI,0BElED;AD2EP;ADRI;EACI,0BEnEE;AD6EV;;ADRA;EACI,8CAAA;EACA,gBAAA;EACA,mBErFQ;EFsFR,kBEvEG;EFwEH,sBAAA;ACWJ;;ADRI;EACI,mBAAA;ACWR;;ADTA;EACI,iBAAA;ACYJ;;ADVA;EACI,YAAA;EACA,mBAAA;ACaJ;;ADXA;EAEI,aAAA;ACaJ;;ADXA;EACI,4DAAA;EACA,6BAAA;EACA,oCAAA;ACcJ;;ADZA;EACI,6CEtGW;EFuGX,mDAAA;EACA,kBEjGG;EFkGH,kBAAA;ACeJ;;ADbA;EACI;IACI,cAAA;IACA,gBAAA;ECgBN;AACF","file":"base.css","sourcesContent":["@import '_vars'\n\nhtml\n scroll-behavior: smooth\n\nbody\n background-color: $background\n\nnav, main, footer\n max-width: $main-width\n margin: 0 auto\n\n*, *::before, *::after\n box-sizing: border-box\n border: none\n color: $text\n font-family: 'Inter', sans-serif\n\na\n text-decoration: none\n\nh1, h2, h3\n &, *\n font-weight: 700\n line-height: 3rem\n font-family: 'Syne', sans-serif\n\nh2\n &, *\n line-height: 2.2rem\n\nh3\n &, *\n line-height: 1.5rem\n\nmain a\n text-decoration: underline\n text-decoration-color: $primary\n text-underline-offset: 2px\n text-decoration-thickness: 5px\n\n transition: 0.2s\n\n &:hover\n text-decoration-thickness: 0\n background: $primary-glow\n\nmain p\n opacity: 0.9\n\nimg\n display: block\n max-width: 100%\n\nmark\n color: $text\n background: $primary\n padding: 5px 7px\n border-radius: 5px\n\nkbd\n font-family: 'Courier New', Courier, monospace\n font-weight: 600\n background: $secondary\n border-radius: $edge\n padding: 0.2rem 0.4rem\n border-bottom: 3px solid $secondary-dark\n\nblockquote\n margin-left: 0\n padding: 1rem 1rem\n border-left: 5px solid $accent\n opacity: 0.8\n background: $secondary\n width: 100%\n border-radius: $edge\n\n &.error\n border-left-color: $error\n &.warning\n border-left-color: $warn\n &.success\n border-left-color: $success\n\ncode\n font-family: 'Courier New', Courier, monospace\n font-weight: 600\n background: $secondary\n border-radius: $edge\n padding: 0.2rem 0.4rem\n\npre code\n *, &\n font-weight: normal\n\np, p *, ol, ul, li\n line-height: 32px\n\nh6\n opacity: 0.7\n font-weight: normal\n\n:focus:not(:focus-visible)\n\n outline: none\n\n.special-gradient\n background: linear-gradient(45deg, #be89ec 7%, #2867f0 100%)\n -webkit-background-clip: text\n -webkit-text-fill-color: transparent\n\n.box\n background: $primary-soft\n border: 2px solid $primary-soft\n border-radius: $edge\n padding: 1rem 2rem\n\n@media (max-width: 900px)\n body\n margin: 0 2rem\n margin-top: 2rem\n","html {\n scroll-behavior: smooth;\n}\n\nbody {\n background-color: #03060d;\n}\n\nnav, main, footer {\n max-width: 800px;\n margin: 0 auto;\n}\n\n*, *::before, *::after {\n box-sizing: border-box;\n border: none;\n color: #f3f3f3;\n font-family: \"Inter\", sans-serif;\n}\n\na {\n text-decoration: none;\n}\n\nh1, h1 *, h2, h2 *, h3, h3 * {\n font-weight: 700;\n line-height: 3rem;\n font-family: \"Syne\", sans-serif;\n}\n\nh2, h2 * {\n line-height: 2.2rem;\n}\n\nh3, h3 * {\n line-height: 1.5rem;\n}\n\nmain a {\n text-decoration: underline;\n text-decoration-color: #5f44b9;\n text-underline-offset: 2px;\n text-decoration-thickness: 5px;\n transition: 0.2s;\n}\nmain a:hover {\n text-decoration-thickness: 0;\n background: rgba(104, 58, 150, 0.2196078431);\n}\n\nmain p {\n opacity: 0.9;\n}\n\nimg {\n display: block;\n max-width: 100%;\n}\n\nmark {\n color: #f3f3f3;\n background: #5f44b9;\n padding: 5px 7px;\n border-radius: 5px;\n}\n\nkbd {\n font-family: \"Courier New\", Courier, monospace;\n font-weight: 600;\n background: #252a38;\n border-radius: 5px;\n padding: 0.2rem 0.4rem;\n border-bottom: 3px solid #0e0e0e;\n}\n\nblockquote {\n margin-left: 0;\n padding: 1rem 1rem;\n border-left: 5px solid #28aaf0;\n opacity: 0.8;\n background: #252a38;\n width: 100%;\n border-radius: 5px;\n}\nblockquote.error {\n border-left-color: #ef3628;\n}\nblockquote.warning {\n border-left-color: #f09928;\n}\nblockquote.success {\n border-left-color: #28ef6b;\n}\n\ncode {\n font-family: \"Courier New\", Courier, monospace;\n font-weight: 600;\n background: #252a38;\n border-radius: 5px;\n padding: 0.2rem 0.4rem;\n}\n\npre code *, pre code {\n font-weight: normal;\n}\n\np, p *, ol, ul, li {\n line-height: 32px;\n}\n\nh6 {\n opacity: 0.7;\n font-weight: normal;\n}\n\n:focus:not(:focus-visible) {\n outline: none;\n}\n\n.special-gradient {\n background: linear-gradient(45deg, #be89ec 7%, #2867f0 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.box {\n background: rgba(204, 154, 247, 0.1411764706);\n border: 2px solid rgba(204, 154, 247, 0.1411764706);\n border-radius: 5px;\n padding: 1rem 2rem;\n}\n\n@media (max-width: 900px) {\n body {\n margin: 0 2rem;\n margin-top: 2rem;\n }\n}","$text: #f3f3f3\n$background: #03060d\n$secondary: #252a38\n$secondary-dark: #0e0e0e\n$border: #161d2bb0\n$soft: #fcf7f824\n\n$primary: #5f44b9\n$primary-light: #b88df0\n$primary-glow: #683a9638\n$primary-soft: #cc9af724\n$accent: #28aaf0\n\n$error: #ef3628\n$warn: #f09928\n$success: #28ef6b\n\n$edge: 5px\n\n$main-width: 800px\n$more-width: 1000px\n"]} \ No newline at end of file diff --git a/web/static/css/base.sass b/web/static/css/base.sass index 2f80f59..d02557b 100644 --- a/web/static/css/base.sass +++ b/web/static/css/base.sass @@ -105,10 +105,16 @@ h6 outline: none .special-gradient - background: linear-gradient(83deg, rgba(244,90,136,1) 7%, rgba(40,170,240,1) 100%) + background: linear-gradient(45deg, #be89ec 7%, #2867f0 100%) -webkit-background-clip: text -webkit-text-fill-color: transparent +.box + background: $primary-soft + border: 2px solid $primary-soft + border-radius: $edge + padding: 1rem 2rem + @media (max-width: 900px) body margin: 0 2rem diff --git a/web/static/css/footer.css.map b/web/static/css/footer.css.map index d0969fa..de21f0b 100644 --- a/web/static/css/footer.css.map +++ b/web/static/css/footer.css.map @@ -1 +1 @@ -{"version":3,"sources":["footer.sass","_vars.sass","footer.css"],"names":[],"mappings":"AAEA;EACI,iBAAA;EACA,iBAAA;EACA,gBCcS;ACfb;AFGI;EACI,iBCYK;ACbb;AFGI;EACI,aAAA;EACA,sBAAA;EAEA,mBAAA;AEFR;AFIQ;EACI,oBAAA;EACA,qBAAA;AEFZ;AFIY;EACI,eAAA;EACA,gBAAA;AEFhB;AFIY;EACI,UAAA;EACA,eAAA;EACA,gBAAA;EACA,cAAA;EACA,mBAAA;AEFhB;AFIY;EACI,uBAAA;EAAA,kBAAA;EACA,eAAA;EACA,YAAA;EACA,cAAA;EACA,qBAAA;EACA,mBAAA;AEFhB;AFIgB;EACI,YAAA;AEFpB;AFII;EACI,YAAA;AEFR;;AFIA;EAEQ;IACI,mBAAA;IACA,qCAAA;EEFV;EFIU;IACI,mBAAA;EEFd;AACF;AFGA;EAEQ;IACI,0BAAA;EEFV;AACF","file":"footer.css","sourcesContent":["@import '_vars'\n\nfooter\n padding-top: 4rem\n margin: 4rem auto\n max-width: $main-width\n\n &.wide\n max-width: $more-width\n\n div.rows\n display: grid\n grid-auto-flow: column\n // justify-content: space-between\n margin-bottom: 2rem\n\n div.row\n margin-right: 1.5rem\n margin-bottom: 0.5rem\n\n &:last-child\n margin-right: 0\n margin-bottom: 0\n\n h2\n opacity: 1\n font-size: 1rem\n font-weight: 500\n margin: 1rem 0\n line-height: normal\n\n a\n width: fit-content\n font-size: 14px\n opacity: 0.6\n display: block\n text-decoration: none\n margin-bottom: 1rem\n\n &:hover\n opacity: 0.8\n\n p\n opacity: 0.7\n\n@media (max-width: 1000px)\n footer\n div.rows\n grid-auto-flow: row\n grid-template-columns: repeat(2, 1fr)\n\n div.row\n margin-bottom: 1rem\n\n@media (max-width: 600px)\n footer\n div.rows\n grid-template-columns: 1fr\n","$text: #f3f3f3\n$background: #03060d\n$secondary: #252a38\n$secondary-dark: #0e0e0e\n$border: #161d2bb0\n$soft: #fcf7f824\n\n$primary: #b53d61\n$primary-light: #f45a88\n$primary-glow: #f45a8861\n$primary-soft: #f79ab624\n$accent: #28aaf0\n\n$error: #ef3628\n$warn: #f09928\n$success: #28ef6b\n\n$edge: 5px\n\n$main-width: 800px\n$more-width: 1000px\n","footer {\n padding-top: 4rem;\n margin: 4rem auto;\n max-width: 800px;\n}\nfooter.wide {\n max-width: 1000px;\n}\nfooter div.rows {\n display: grid;\n grid-auto-flow: column;\n margin-bottom: 2rem;\n}\nfooter div.rows div.row {\n margin-right: 1.5rem;\n margin-bottom: 0.5rem;\n}\nfooter div.rows div.row:last-child {\n margin-right: 0;\n margin-bottom: 0;\n}\nfooter div.rows div.row h2 {\n opacity: 1;\n font-size: 1rem;\n font-weight: 500;\n margin: 1rem 0;\n line-height: normal;\n}\nfooter div.rows div.row a {\n width: fit-content;\n font-size: 14px;\n opacity: 0.6;\n display: block;\n text-decoration: none;\n margin-bottom: 1rem;\n}\nfooter div.rows div.row a:hover {\n opacity: 0.8;\n}\nfooter p {\n opacity: 0.7;\n}\n\n@media (max-width: 1000px) {\n footer div.rows {\n grid-auto-flow: row;\n grid-template-columns: repeat(2, 1fr);\n }\n footer div.rows div.row {\n margin-bottom: 1rem;\n }\n}\n@media (max-width: 600px) {\n footer div.rows {\n grid-template-columns: 1fr;\n }\n}"]} \ No newline at end of file +{"version":3,"sources":["footer.sass","_vars.sass","footer.css"],"names":[],"mappings":"AAEA;EACI,iBAAA;EACA,iBAAA;EACA,gBCcS;ACfb;AFGI;EACI,iBCYK;ACbb;AFGI;EACI,aAAA;EACA,sBAAA;EAEA,mBAAA;AEFR;AFIQ;EACI,oBAAA;EACA,qBAAA;AEFZ;AFIY;EACI,eAAA;EACA,gBAAA;AEFhB;AFIY;EACI,UAAA;EACA,eAAA;EACA,gBAAA;EACA,cAAA;EACA,mBAAA;AEFhB;AFIY;EACI,uBAAA;EAAA,kBAAA;EACA,eAAA;EACA,YAAA;EACA,cAAA;EACA,qBAAA;EACA,mBAAA;AEFhB;AFIgB;EACI,YAAA;AEFpB;AFII;EACI,YAAA;AEFR;;AFIA;EAEQ;IACI,mBAAA;IACA,qCAAA;EEFV;EFIU;IACI,mBAAA;EEFd;AACF;AFGA;EAEQ;IACI,0BAAA;EEFV;AACF","file":"footer.css","sourcesContent":["@import '_vars'\n\nfooter\n padding-top: 4rem\n margin: 4rem auto\n max-width: $main-width\n\n &.wide\n max-width: $more-width\n\n div.rows\n display: grid\n grid-auto-flow: column\n // justify-content: space-between\n margin-bottom: 2rem\n\n div.row\n margin-right: 1.5rem\n margin-bottom: 0.5rem\n\n &:last-child\n margin-right: 0\n margin-bottom: 0\n\n h2\n opacity: 1\n font-size: 1rem\n font-weight: 500\n margin: 1rem 0\n line-height: normal\n\n a\n width: fit-content\n font-size: 14px\n opacity: 0.6\n display: block\n text-decoration: none\n margin-bottom: 1rem\n\n &:hover\n opacity: 0.8\n\n p\n opacity: 0.7\n\n@media (max-width: 1000px)\n footer\n div.rows\n grid-auto-flow: row\n grid-template-columns: repeat(2, 1fr)\n\n div.row\n margin-bottom: 1rem\n\n@media (max-width: 600px)\n footer\n div.rows\n grid-template-columns: 1fr\n","$text: #f3f3f3\n$background: #03060d\n$secondary: #252a38\n$secondary-dark: #0e0e0e\n$border: #161d2bb0\n$soft: #fcf7f824\n\n$primary: #5f44b9\n$primary-light: #b88df0\n$primary-glow: #683a9638\n$primary-soft: #cc9af724\n$accent: #28aaf0\n\n$error: #ef3628\n$warn: #f09928\n$success: #28ef6b\n\n$edge: 5px\n\n$main-width: 800px\n$more-width: 1000px\n","footer {\n padding-top: 4rem;\n margin: 4rem auto;\n max-width: 800px;\n}\nfooter.wide {\n max-width: 1000px;\n}\nfooter div.rows {\n display: grid;\n grid-auto-flow: column;\n margin-bottom: 2rem;\n}\nfooter div.rows div.row {\n margin-right: 1.5rem;\n margin-bottom: 0.5rem;\n}\nfooter div.rows div.row:last-child {\n margin-right: 0;\n margin-bottom: 0;\n}\nfooter div.rows div.row h2 {\n opacity: 1;\n font-size: 1rem;\n font-weight: 500;\n margin: 1rem 0;\n line-height: normal;\n}\nfooter div.rows div.row a {\n width: fit-content;\n font-size: 14px;\n opacity: 0.6;\n display: block;\n text-decoration: none;\n margin-bottom: 1rem;\n}\nfooter div.rows div.row a:hover {\n opacity: 0.8;\n}\nfooter p {\n opacity: 0.7;\n}\n\n@media (max-width: 1000px) {\n footer div.rows {\n grid-auto-flow: row;\n grid-template-columns: repeat(2, 1fr);\n }\n footer div.rows div.row {\n margin-bottom: 1rem;\n }\n}\n@media (max-width: 600px) {\n footer div.rows {\n grid-template-columns: 1fr;\n }\n}"]} \ No newline at end of file diff --git a/web/static/css/home.css b/web/static/css/home.css index 911deaf..d97493e 100644 --- a/web/static/css/home.css +++ b/web/static/css/home.css @@ -9,42 +9,38 @@ header h1 { line-height: 4rem; } -div.featured-box { - background: rgba(247, 154, 182, 0.1411764706); - border: 2px solid rgba(244, 90, 136, 0.3803921569); - border-radius: 5px; - padding: 2rem; +div.featured__facts { margin-block: 2rem; display: flex; vertical-align: middle; transition: all 200ms; } -div.featured-box:hover { +div.featured__facts:hover { scale: 1.025; filter: brightness(1.1) saturate(1.1); - box-shadow: 0 0 30px rgba(244, 90, 136, 0.3803921569); + box-shadow: 0 0 30px rgba(104, 58, 150, 0.2196078431); } -div.featured-box img { +div.featured__facts img, div.featured__facts svg { + width: 50px; height: 50px; -o-object-fit: cover; object-fit: cover; } -div.featured-box h2 { +div.featured__facts h2 { vertical-align: middle; margin-block: auto; margin-left: 1rem; font-size: 1.5rem; } -div.featured-box h2 span { - color: #f45a88; +div.featured__facts h2 span { + color: #b88df0; } div.user-quotes div.user-quote__field { + cursor: pointer; margin-block: 2rem; - padding-inline: 2rem; - padding-block: 2rem; - background: rgba(247, 154, 182, 0.1411764706); - border: 2px solid rgba(244, 90, 136, 0.3803921569); + background: rgba(204, 154, 247, 0.1411764706); + border: 2px solid rgba(104, 58, 150, 0.2196078431); border-radius: 5px; position: relative; transition: all 200ms; @@ -54,13 +50,13 @@ div.user-quotes div.user-quote__field { div.user-quotes div.user-quote__field:hover { scale: 1.025; filter: brightness(1.1) saturate(1.1); - box-shadow: 0 0 30px rgba(244, 90, 136, 0.3803921569); + box-shadow: 0 0 30px rgba(104, 58, 150, 0.2196078431); } div.user-quotes div.user-quote__field::before { font-family: "Times New Roman", Times, serif; content: "“"; font-size: 150px; - color: rgba(247, 154, 182, 0.1411764706); + color: rgba(204, 154, 247, 0.1411764706); position: absolute; bottom: -1rem; left: 1rem; @@ -71,7 +67,7 @@ div.user-quotes div.user-quote__field img { width: 100px; height: 100px; border-radius: 50%; - border: 3px solid rgba(244, 90, 136, 0.3803921569); + border: 3px solid rgba(104, 58, 150, 0.2196078431); position: absolute; top: 1rem; right: 1rem; @@ -81,7 +77,7 @@ div.user-quotes div.user-quote__field img { div.user-quotes div.user-quote__field span.user-quote__username { font-size: 1rem; font-weight: 600; - color: #b53d61; + color: #b88df0; } div.user-quotes div.user-quote__field p { margin-block: 0; diff --git a/web/static/css/home.css.map b/web/static/css/home.css.map index 2ae1ae7..7819c4f 100644 --- a/web/static/css/home.css.map +++ b/web/static/css/home.css.map @@ -1 +1 @@ -{"version":3,"sources":["home.css","home.sass","_vars.sass"],"names":[],"mappings":"AAAA,gBAAgB;ACEhB;EACI,gBCgBS;EDfT,cAAA;EACA,eAAA;EACA,oBAAA;ADAJ;ACEI;EACI,iBAAA;ADAR;;ACEA;EACI,6CCFW;EDGX,kDAAA;EACA,kBCGG;EDFH,aAAA;EACA,kBAAA;EACA,aAAA;EACA,sBAAA;EACA,qBAAA;ADCJ;ACCI;EACI,YAAA;EACA,qCAAA;EACA,qDAAA;ADCR;ACCI;EACI,YAAA;EACA,oBAAA;KAAA,iBAAA;ADCR;ACCI;EACI,sBAAA;EACA,kBAAA;EACA,iBAAA;EACA,iBAAA;ADCR;ACCQ;EACI,cC7BI;AF8BhB;;ACMI;EACI,kBAAA;EACA,oBAAA;EACA,mBAAA;EACA,6CCtCO;EDuCP,kDAAA;EACA,kBCjCD;EDkCC,kBAAA;EACA,qBAAA;EACA,gCAAA;EACA,iBAAA;ADHR;ACKQ;EACI,YAAA;EACA,qCAAA;EACA,qDAAA;ADHZ;ACKQ;EACI,4CAAA;EACA,YAAA;EACA,gBAAA;EACA,wCCvDG;EDwDH,kBAAA;EACA,aAAA;EACA,UAAA;EAGA,yBAAA;ADLZ;ACOQ;EACI,eAAA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;EACA,kDAAA;EACA,kBAAA;EACA,SAAA;EACA,WAAA;EACA,yBAAA;KAAA,sBAAA;ADLZ;ACOQ;EACI,eAAA;EACA,gBAAA;EACA,cChFF;AF2EV;ACOQ;EACI,eAAA;EACA,iBAAA;EACA,mBAAA;ADLZ;;ACOA;EACI;IACI,eAAA;EDJN;ECMM;IACI,iBAAA;EDJV;ECMM;IACI,eAAA;EDJV;AACF","file":"home.css","sourcesContent":["@charset \"UTF-8\";\nheader {\n max-width: 800px;\n margin: 0 auto;\n font-size: 40px;\n margin-bottom: 15rem;\n}\nheader h1 {\n line-height: 4rem;\n}\n\ndiv.featured-box {\n background: rgba(247, 154, 182, 0.1411764706);\n border: 2px solid rgba(244, 90, 136, 0.3803921569);\n border-radius: 5px;\n padding: 2rem;\n margin-block: 2rem;\n display: flex;\n vertical-align: middle;\n transition: all 200ms;\n}\ndiv.featured-box:hover {\n scale: 1.025;\n filter: brightness(1.1) saturate(1.1);\n box-shadow: 0 0 30px rgba(244, 90, 136, 0.3803921569);\n}\ndiv.featured-box img {\n height: 50px;\n object-fit: cover;\n}\ndiv.featured-box h2 {\n vertical-align: middle;\n margin-block: auto;\n margin-left: 1rem;\n font-size: 1.5rem;\n}\ndiv.featured-box h2 span {\n color: #f45a88;\n}\n\ndiv.user-quotes div.user-quote__field {\n margin-block: 2rem;\n padding-inline: 2rem;\n padding-block: 2rem;\n background: rgba(247, 154, 182, 0.1411764706);\n border: 2px solid rgba(244, 90, 136, 0.3803921569);\n border-radius: 5px;\n position: relative;\n transition: all 200ms;\n box-shadow: 0 0 30px transparent;\n min-height: 200px;\n}\ndiv.user-quotes div.user-quote__field:hover {\n scale: 1.025;\n filter: brightness(1.1) saturate(1.1);\n box-shadow: 0 0 30px rgba(244, 90, 136, 0.3803921569);\n}\ndiv.user-quotes div.user-quote__field::before {\n font-family: \"Times New Roman\", Times, serif;\n content: \"“\";\n font-size: 150px;\n color: rgba(247, 154, 182, 0.1411764706);\n position: absolute;\n bottom: -1rem;\n left: 1rem;\n transform: rotate(180deg);\n}\ndiv.user-quotes div.user-quote__field img {\n cursor: pointer;\n width: 100px;\n height: 100px;\n border-radius: 50%;\n border: 3px solid rgba(244, 90, 136, 0.3803921569);\n position: absolute;\n top: 1rem;\n right: 1rem;\n object-fit: scale-down;\n}\ndiv.user-quotes div.user-quote__field span.user-quote__username {\n font-size: 1rem;\n font-weight: 600;\n color: #b53d61;\n}\ndiv.user-quotes div.user-quote__field p {\n margin-block: 0;\n font-size: 1.5rem;\n padding-right: 7rem;\n}\n\n@media (max-width: 800px) {\n header {\n font-size: 26px;\n }\n header h1 {\n line-height: 3rem;\n }\n header h3 {\n font-size: 28px;\n }\n}","@import '_vars'\n\nheader\n max-width: $main-width\n margin: 0 auto\n font-size: 40px\n margin-bottom: 15rem\n\n h1\n line-height: 4rem\n\ndiv.featured-box\n background: $primary-soft\n border: 2px solid $primary-glow\n border-radius: $edge\n padding: 2rem\n margin-block: 2rem\n display: flex\n vertical-align: middle\n transition: all 200ms\n\n &:hover\n scale: 1.025\n filter: brightness(1.1) saturate(1.1)\n box-shadow: 0 0 30px $primary-glow\n\n img\n height: 50px\n object-fit: cover\n\n h2\n vertical-align: middle\n margin-block: auto\n margin-left: 1rem\n font-size: 1.5rem\n\n span\n color: $primary-light\n\ndiv.user-quotes\n // display: grid\n // grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))\n // grid-gap: 2rem\n\n div.user-quote__field\n margin-block: 2rem\n padding-inline: 2rem\n padding-block: 2rem\n background: $primary-soft\n border: 2px solid $primary-glow\n border-radius: $edge\n position: relative\n transition: all 200ms\n box-shadow: 0 0 30px transparent\n min-height: 200px\n\n &:hover\n scale: 1.025\n filter: brightness(1.1) saturate(1.1)\n box-shadow: 0 0 30px $primary-glow\n\n &::before\n font-family: 'Times New Roman', Times, serif\n content: '\\201c'\n font-size: 150px\n color: $primary-soft\n position: absolute\n bottom: -1rem\n left: 1rem\n \n // show at the bottom left\n transform: rotate(180deg)\n\n img\n cursor: pointer\n width: 100px\n height: 100px\n border-radius: 50%\n border: 3px solid $primary-glow\n position: absolute\n top: 1rem\n right: 1rem\n object-fit: scale-down\n\n span.user-quote__username\n font-size: 1rem\n font-weight: 600\n color: $primary\n\n p\n margin-block: 0\n font-size: 1.5rem\n padding-right: 7rem\n\n@media (max-width: 800px)\n header\n font-size: 26px\n \n h1\n line-height: 3rem\n\n h3\n font-size: 28px\n","$text: #f3f3f3\n$background: #03060d\n$secondary: #252a38\n$secondary-dark: #0e0e0e\n$border: #161d2bb0\n$soft: #fcf7f824\n\n$primary: #b53d61\n$primary-light: #f45a88\n$primary-glow: #f45a8861\n$primary-soft: #f79ab624\n$accent: #28aaf0\n\n$error: #ef3628\n$warn: #f09928\n$success: #28ef6b\n\n$edge: 5px\n\n$main-width: 800px\n$more-width: 1000px\n"]} \ No newline at end of file +{"version":3,"sources":["home.css","home.sass","_vars.sass"],"names":[],"mappings":"AAAA,gBAAgB;ACEhB;EACI,gBCgBS;EDfT,cAAA;EACA,eAAA;EACA,oBAAA;ADAJ;ACEI;EACI,iBAAA;ADAR;;ACEA;EACI,kBAAA;EACA,aAAA;EACA,sBAAA;EACA,qBAAA;ADCJ;ACCI;EACI,YAAA;EACA,qCAAA;EACA,qDAAA;ADCR;ACCI;EACI,WAAA;EACA,YAAA;EACA,oBAAA;KAAA,iBAAA;ADCR;ACCI;EACI,sBAAA;EACA,kBAAA;EACA,iBAAA;EACA,iBAAA;ADCR;ACCQ;EACI,cC1BI;AF2BhB;;ACMI;EACI,eAAA;EACA,kBAAA;EACA,6CClCO;EDmCP,kDAAA;EACA,kBC7BD;ED8BC,kBAAA;EACA,qBAAA;EACA,gCAAA;EACA,iBAAA;ADHR;ACKQ;EACI,YAAA;EACA,qCAAA;EACA,qDAAA;ADHZ;ACKQ;EACI,4CAAA;EACA,YAAA;EACA,gBAAA;EACA,wCCnDG;EDoDH,kBAAA;EACA,aAAA;EACA,UAAA;EAGA,yBAAA;ADLZ;ACOQ;EACI,eAAA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;EACA,kDAAA;EACA,kBAAA;EACA,SAAA;EACA,WAAA;EACA,yBAAA;KAAA,sBAAA;ADLZ;ACOQ;EACI,eAAA;EACA,gBAAA;EACA,cC3EI;AFsEhB;ACOQ;EACI,eAAA;EACA,iBAAA;EACA,mBAAA;ADLZ;;ACOA;EACI;IACI,eAAA;EDJN;ECMM;IACI,iBAAA;EDJV;ECMM;IACI,eAAA;EDJV;AACF","file":"home.css","sourcesContent":["@charset \"UTF-8\";\nheader {\n max-width: 800px;\n margin: 0 auto;\n font-size: 40px;\n margin-bottom: 15rem;\n}\nheader h1 {\n line-height: 4rem;\n}\n\ndiv.featured__facts {\n margin-block: 2rem;\n display: flex;\n vertical-align: middle;\n transition: all 200ms;\n}\ndiv.featured__facts:hover {\n scale: 1.025;\n filter: brightness(1.1) saturate(1.1);\n box-shadow: 0 0 30px rgba(104, 58, 150, 0.2196078431);\n}\ndiv.featured__facts img, div.featured__facts svg {\n width: 50px;\n height: 50px;\n object-fit: cover;\n}\ndiv.featured__facts h2 {\n vertical-align: middle;\n margin-block: auto;\n margin-left: 1rem;\n font-size: 1.5rem;\n}\ndiv.featured__facts h2 span {\n color: #b88df0;\n}\n\ndiv.user-quotes div.user-quote__field {\n cursor: pointer;\n margin-block: 2rem;\n background: rgba(204, 154, 247, 0.1411764706);\n border: 2px solid rgba(104, 58, 150, 0.2196078431);\n border-radius: 5px;\n position: relative;\n transition: all 200ms;\n box-shadow: 0 0 30px transparent;\n min-height: 200px;\n}\ndiv.user-quotes div.user-quote__field:hover {\n scale: 1.025;\n filter: brightness(1.1) saturate(1.1);\n box-shadow: 0 0 30px rgba(104, 58, 150, 0.2196078431);\n}\ndiv.user-quotes div.user-quote__field::before {\n font-family: \"Times New Roman\", Times, serif;\n content: \"“\";\n font-size: 150px;\n color: rgba(204, 154, 247, 0.1411764706);\n position: absolute;\n bottom: -1rem;\n left: 1rem;\n transform: rotate(180deg);\n}\ndiv.user-quotes div.user-quote__field img {\n cursor: pointer;\n width: 100px;\n height: 100px;\n border-radius: 50%;\n border: 3px solid rgba(104, 58, 150, 0.2196078431);\n position: absolute;\n top: 1rem;\n right: 1rem;\n object-fit: scale-down;\n}\ndiv.user-quotes div.user-quote__field span.user-quote__username {\n font-size: 1rem;\n font-weight: 600;\n color: #b88df0;\n}\ndiv.user-quotes div.user-quote__field p {\n margin-block: 0;\n font-size: 1.5rem;\n padding-right: 7rem;\n}\n\n@media (max-width: 800px) {\n header {\n font-size: 26px;\n }\n header h1 {\n line-height: 3rem;\n }\n header h3 {\n font-size: 28px;\n }\n}","@import '_vars'\n\nheader\n max-width: $main-width\n margin: 0 auto\n font-size: 40px\n margin-bottom: 15rem\n\n h1\n line-height: 4rem\n\ndiv.featured__facts\n margin-block: 2rem\n display: flex\n vertical-align: middle\n transition: all 200ms\n\n &:hover\n scale: 1.025\n filter: brightness(1.1) saturate(1.1)\n box-shadow: 0 0 30px $primary-glow\n\n img, svg\n width: 50px\n height: 50px\n object-fit: cover\n\n h2\n vertical-align: middle\n margin-block: auto\n margin-left: 1rem\n font-size: 1.5rem\n\n span\n color: $primary-light\n\ndiv.user-quotes\n // display: grid\n // grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))\n // grid-gap: 2rem\n\n div.user-quote__field\n cursor: pointer\n margin-block: 2rem\n background: $primary-soft\n border: 2px solid $primary-glow\n border-radius: $edge\n position: relative\n transition: all 200ms\n box-shadow: 0 0 30px transparent\n min-height: 200px\n\n &:hover\n scale: 1.025\n filter: brightness(1.1) saturate(1.1)\n box-shadow: 0 0 30px $primary-glow\n\n &::before\n font-family: 'Times New Roman', Times, serif\n content: '\\201c'\n font-size: 150px\n color: $primary-soft\n position: absolute\n bottom: -1rem\n left: 1rem\n \n // show at the bottom left\n transform: rotate(180deg)\n\n img\n cursor: pointer\n width: 100px\n height: 100px\n border-radius: 50%\n border: 3px solid $primary-glow\n position: absolute\n top: 1rem\n right: 1rem\n object-fit: scale-down\n\n span.user-quote__username\n font-size: 1rem\n font-weight: 600\n color: $primary-light\n\n p\n margin-block: 0\n font-size: 1.5rem\n padding-right: 7rem\n\n@media (max-width: 800px)\n header\n font-size: 26px\n \n h1\n line-height: 3rem\n\n h3\n font-size: 28px\n","$text: #f3f3f3\n$background: #03060d\n$secondary: #252a38\n$secondary-dark: #0e0e0e\n$border: #161d2bb0\n$soft: #fcf7f824\n\n$primary: #5f44b9\n$primary-light: #b88df0\n$primary-glow: #683a9638\n$primary-soft: #cc9af724\n$accent: #28aaf0\n\n$error: #ef3628\n$warn: #f09928\n$success: #28ef6b\n\n$edge: 5px\n\n$main-width: 800px\n$more-width: 1000px\n"]} \ No newline at end of file diff --git a/web/static/css/home.sass b/web/static/css/home.sass index 7e4aacb..f13defa 100644 --- a/web/static/css/home.sass +++ b/web/static/css/home.sass @@ -9,11 +9,7 @@ header h1 line-height: 4rem -div.featured-box - background: $primary-soft - border: 2px solid $primary-glow - border-radius: $edge - padding: 2rem +div.featured__facts margin-block: 2rem display: flex vertical-align: middle @@ -24,7 +20,8 @@ div.featured-box filter: brightness(1.1) saturate(1.1) box-shadow: 0 0 30px $primary-glow - img + img, svg + width: 50px height: 50px object-fit: cover @@ -43,9 +40,8 @@ div.user-quotes // grid-gap: 2rem div.user-quote__field + cursor: pointer margin-block: 2rem - padding-inline: 2rem - padding-block: 2rem background: $primary-soft border: 2px solid $primary-glow border-radius: $edge @@ -85,7 +81,7 @@ div.user-quotes span.user-quote__username font-size: 1rem font-weight: 600 - color: $primary + color: $primary-light p margin-block: 0 diff --git a/web/static/css/input.css b/web/static/css/input.css index 20eefc9..e329d13 100644 --- a/web/static/css/input.css +++ b/web/static/css/input.css @@ -7,17 +7,17 @@ button { font-weight: 600; margin-bottom: 1rem; color: #f3f3f3; - background: #b53d61; + background: #5f44b9; transition: box-shadow 0.2s; } button:hover { filter: brightness(1.2); } button.special { - box-shadow: 0 0 20px rgba(244, 90, 136, 0.3803921569); + box-shadow: 0 0 20px rgba(104, 58, 150, 0.2196078431); } button.special:hover { - box-shadow: 0 0 20px #b53d61; + box-shadow: 0 0 20px #5f44b9; } button.secondary { color: #f3f3f3; @@ -41,7 +41,7 @@ input:not([type=checkbox]):not([type=radio]) { padding: 0.5rem 1rem; color: #f3f3f3; background: #252a38; - border: 1px solid #b53d61; + border: 1px solid #5f44b9; } input:not([type=checkbox]):not([type=radio]):focus { outline: none; @@ -49,4 +49,30 @@ input:not([type=checkbox]):not([type=radio]):focus { input[type=radio] { filter: hue-rotate(50deg); +} + +span.secret { + cursor: pointer; + font-size: 14px; + font-family: monospace; + padding: 2px 4px; + border-radius: 5px; + color: transparent; + background: rgba(252, 247, 248, 0.1411764706); + transition: color 200ms; +} +span.secret.revealed { + color: #f3f3f3; + background: rgba(252, 247, 248, 0.1411764706); +} + +.copied::after { + content: "Copied!"; + position: absolute; + padding: 2px 4px; + transform: translateX(10px); + border-radius: 5px; + background: rgba(252, 247, 248, 0.1411764706); + border: 1px solid #28ef6b; + color: #f3f3f3; }/*# sourceMappingURL=input.css.map */ \ No newline at end of file diff --git a/web/static/css/input.css.map b/web/static/css/input.css.map index 7edecd8..5db3116 100644 --- a/web/static/css/input.css.map +++ b/web/static/css/input.css.map @@ -1 +1 @@ -{"version":3,"sources":["input.sass","_vars.sass","input.css"],"names":[],"mappings":"AAEA;EACI,cAAA;EACA,eAAA;EACA,eAAA;EACA,kBCWG;EDVH,sBAAA;EACA,gBAAA;EACA,mBAAA;EAEA,cCXG;EDYH,mBCLM;EDON,2BAAA;AEHJ;AFKI;EACI,uBAAA;AEHR;AFKI;EACI,qDAAA;AEHR;AFKQ;EACI,4BAAA;AEHZ;AFKI;EACI,cC1BD;ED2BC,mBCzBI;ED0BJ,gDAAA;AEHR;AFKI;EACI,YAAA;EACA,qBAAA;EACA,sBAAA;EACA,mBAAA;AEHR;AFKI;EACI,6CChCD;AC6BP;;AFKA;EACI,WAAA;EACA,eAAA;EACA,kBCzBG;ED0BH,oBAAA;EAEA,cC7CG;ED8CH,mBC5CQ;ED6CR,yBAAA;AEHJ;AFKI;EACI,aAAA;AEHR;;AFKA;EACI,yBAAA;AEFJ","file":"input.css","sourcesContent":["@import '_vars'\n\nbutton\n line-height: 2\n cursor: pointer\n font-size: 16px\n border-radius: $edge\n padding: 0.7rem 1.5rem\n font-weight: 600\n margin-bottom: 1rem\n\n color: $text\n background: $primary\n\n transition: box-shadow 0.2s\n\n &:hover\n filter: brightness(1.2)\n\n &.special\n box-shadow: 0 0 20px $primary-glow\n\n &:hover\n box-shadow: 0 0 20px $primary\n\n &.secondary\n color: $text\n background: $secondary\n border: 1px solid $border\n\n svg, img\n height: 24px\n display: inline-block\n vertical-align: middle\n filter: invert(180)\n\n mark\n background: $soft\n\ninput:not([type=\"checkbox\"]):not([type=\"radio\"])\n width: 100%\n font-size: 18px\n border-radius: $edge\n padding: 0.5rem 1rem\n\n color: $text\n background: $secondary\n border: 1px solid $primary\n\n &:focus\n outline: none\n\ninput[type=\"radio\"]\n filter: hue-rotate(50deg)\n","$text: #f3f3f3\n$background: #03060d\n$secondary: #252a38\n$secondary-dark: #0e0e0e\n$border: #161d2bb0\n$soft: #fcf7f824\n\n$primary: #b53d61\n$primary-light: #f45a88\n$primary-glow: #f45a8861\n$primary-soft: #f79ab624\n$accent: #28aaf0\n\n$error: #ef3628\n$warn: #f09928\n$success: #28ef6b\n\n$edge: 5px\n\n$main-width: 800px\n$more-width: 1000px\n","button {\n line-height: 2;\n cursor: pointer;\n font-size: 16px;\n border-radius: 5px;\n padding: 0.7rem 1.5rem;\n font-weight: 600;\n margin-bottom: 1rem;\n color: #f3f3f3;\n background: #b53d61;\n transition: box-shadow 0.2s;\n}\nbutton:hover {\n filter: brightness(1.2);\n}\nbutton.special {\n box-shadow: 0 0 20px rgba(244, 90, 136, 0.3803921569);\n}\nbutton.special:hover {\n box-shadow: 0 0 20px #b53d61;\n}\nbutton.secondary {\n color: #f3f3f3;\n background: #252a38;\n border: 1px solid rgba(22, 29, 43, 0.6901960784);\n}\nbutton svg, button img {\n height: 24px;\n display: inline-block;\n vertical-align: middle;\n filter: invert(180);\n}\nbutton mark {\n background: rgba(252, 247, 248, 0.1411764706);\n}\n\ninput:not([type=checkbox]):not([type=radio]) {\n width: 100%;\n font-size: 18px;\n border-radius: 5px;\n padding: 0.5rem 1rem;\n color: #f3f3f3;\n background: #252a38;\n border: 1px solid #b53d61;\n}\ninput:not([type=checkbox]):not([type=radio]):focus {\n outline: none;\n}\n\ninput[type=radio] {\n filter: hue-rotate(50deg);\n}"]} \ No newline at end of file +{"version":3,"sources":["input.sass","_vars.sass","input.css"],"names":[],"mappings":"AAEA;EACI,cAAA;EACA,eAAA;EACA,eAAA;EACA,kBCWG;EDVH,sBAAA;EACA,gBAAA;EACA,mBAAA;EAEA,cCXG;EDYH,mBCLM;EDON,2BAAA;AEHJ;AFKI;EACI,uBAAA;AEHR;AFKI;EACI,qDAAA;AEHR;AFKQ;EACI,4BAAA;AEHZ;AFKI;EACI,cC1BD;ED2BC,mBCzBI;ED0BJ,gDAAA;AEHR;AFKI;EACI,YAAA;EACA,qBAAA;EACA,sBAAA;EACA,mBAAA;AEHR;AFKI;EACI,6CChCD;AC6BP;;AFKA;EACI,WAAA;EACA,eAAA;EACA,kBCzBG;ED0BH,oBAAA;EAEA,cC7CG;ED8CH,mBC5CQ;ED6CR,yBAAA;AEHJ;AFKI;EACI,aAAA;AEHR;;AFKA;EACI,yBAAA;AEFJ;;AFIA;EACI,eAAA;EACA,eAAA;EACA,sBAAA;EACA,gBAAA;EACA,kBC3CG;ED4CH,kBAAA;EACA,6CCzDG;ED2DH,uBAAA;AEFJ;AFII;EACI,cCnED;EDoEC,6CC/DD;AC6DP;;AFIA;EACI,kBAAA;EACA,kBAAA;EACA,gBAAA;EACA,2BAAA;EACA,kBC1DG;ED2DH,6CCvEG;EDwEH,yBAAA;EACA,cC9EG;AC6EP","file":"input.css","sourcesContent":["@import '_vars'\n\nbutton\n line-height: 2\n cursor: pointer\n font-size: 16px\n border-radius: $edge\n padding: 0.7rem 1.5rem\n font-weight: 600\n margin-bottom: 1rem\n\n color: $text\n background: $primary\n\n transition: box-shadow 0.2s\n\n &:hover\n filter: brightness(1.2)\n\n &.special\n box-shadow: 0 0 20px $primary-glow\n\n &:hover\n box-shadow: 0 0 20px $primary\n\n &.secondary\n color: $text\n background: $secondary\n border: 1px solid $border\n\n svg, img\n height: 24px\n display: inline-block\n vertical-align: middle\n filter: invert(180)\n\n mark\n background: $soft\n\ninput:not([type=\"checkbox\"]):not([type=\"radio\"])\n width: 100%\n font-size: 18px\n border-radius: $edge\n padding: 0.5rem 1rem\n\n color: $text\n background: $secondary\n border: 1px solid $primary\n\n &:focus\n outline: none\n\ninput[type=\"radio\"]\n filter: hue-rotate(50deg)\n\nspan.secret\n cursor: pointer\n font-size: 14px\n font-family: monospace\n padding: 2px 4px\n border-radius: $edge\n color: transparent\n background: $soft\n\n transition: color 200ms\n\n &.revealed\n color: $text\n background: $soft\n\n.copied::after\n content: 'Copied!'\n position: absolute\n padding: 2px 4px\n transform: translateX(10px)\n border-radius: $edge\n background: $soft\n border: 1px solid $success\n color: $text\n","$text: #f3f3f3\n$background: #03060d\n$secondary: #252a38\n$secondary-dark: #0e0e0e\n$border: #161d2bb0\n$soft: #fcf7f824\n\n$primary: #5f44b9\n$primary-light: #b88df0\n$primary-glow: #683a9638\n$primary-soft: #cc9af724\n$accent: #28aaf0\n\n$error: #ef3628\n$warn: #f09928\n$success: #28ef6b\n\n$edge: 5px\n\n$main-width: 800px\n$more-width: 1000px\n","button {\n line-height: 2;\n cursor: pointer;\n font-size: 16px;\n border-radius: 5px;\n padding: 0.7rem 1.5rem;\n font-weight: 600;\n margin-bottom: 1rem;\n color: #f3f3f3;\n background: #5f44b9;\n transition: box-shadow 0.2s;\n}\nbutton:hover {\n filter: brightness(1.2);\n}\nbutton.special {\n box-shadow: 0 0 20px rgba(104, 58, 150, 0.2196078431);\n}\nbutton.special:hover {\n box-shadow: 0 0 20px #5f44b9;\n}\nbutton.secondary {\n color: #f3f3f3;\n background: #252a38;\n border: 1px solid rgba(22, 29, 43, 0.6901960784);\n}\nbutton svg, button img {\n height: 24px;\n display: inline-block;\n vertical-align: middle;\n filter: invert(180);\n}\nbutton mark {\n background: rgba(252, 247, 248, 0.1411764706);\n}\n\ninput:not([type=checkbox]):not([type=radio]) {\n width: 100%;\n font-size: 18px;\n border-radius: 5px;\n padding: 0.5rem 1rem;\n color: #f3f3f3;\n background: #252a38;\n border: 1px solid #5f44b9;\n}\ninput:not([type=checkbox]):not([type=radio]):focus {\n outline: none;\n}\n\ninput[type=radio] {\n filter: hue-rotate(50deg);\n}\n\nspan.secret {\n cursor: pointer;\n font-size: 14px;\n font-family: monospace;\n padding: 2px 4px;\n border-radius: 5px;\n color: transparent;\n background: rgba(252, 247, 248, 0.1411764706);\n transition: color 200ms;\n}\nspan.secret.revealed {\n color: #f3f3f3;\n background: rgba(252, 247, 248, 0.1411764706);\n}\n\n.copied::after {\n content: \"Copied!\";\n position: absolute;\n padding: 2px 4px;\n transform: translateX(10px);\n border-radius: 5px;\n background: rgba(252, 247, 248, 0.1411764706);\n border: 1px solid #28ef6b;\n color: #f3f3f3;\n}"]} \ No newline at end of file diff --git a/web/static/css/input.sass b/web/static/css/input.sass index 4565fed..0064100 100644 --- a/web/static/css/input.sass +++ b/web/static/css/input.sass @@ -52,3 +52,28 @@ input:not([type="checkbox"]):not([type="radio"]) input[type="radio"] filter: hue-rotate(50deg) + +span.secret + cursor: pointer + font-size: 14px + font-family: monospace + padding: 2px 4px + border-radius: $edge + color: transparent + background: $soft + + transition: color 200ms + + &.revealed + color: $text + background: $soft + +.copied::after + content: 'Copied!' + position: absolute + padding: 2px 4px + transform: translateX(10px) + border-radius: $edge + background: $soft + border: 1px solid $success + color: $text diff --git a/web/static/css/navbar.css b/web/static/css/navbar.css index 9a98d1c..0a66b62 100644 --- a/web/static/css/navbar.css +++ b/web/static/css/navbar.css @@ -5,7 +5,7 @@ nav { } nav > .logo { display: inline-block; - stroke: #f45a88; + stroke: #b88df0; min-height: 40px; min-width: 40px; height: 40px; @@ -41,7 +41,7 @@ nav #menu { transition: color 0.1s; } .link-menu > a:hover { - color: #f45a88; + color: #b88df0; } @media (max-width: 800px) { @@ -71,7 +71,7 @@ nav #menu { line-height: 3rem; } nav .logo { - stroke: #f45a88; + stroke: #b88df0; } nav #menu { display: block; diff --git a/web/static/css/navbar.css.map b/web/static/css/navbar.css.map index ab5414f..aa3cdb4 100644 --- a/web/static/css/navbar.css.map +++ b/web/static/css/navbar.css.map @@ -1 +1 @@ -{"version":3,"sources":["navbar.sass","navbar.css","_vars.sass"],"names":[],"mappings":"AAEA;EACI,aAAA;EACA,mBAAA;EACA,kBAAA;ACDJ;ADGI;EACI,qBAAA;EACA,eEDQ;EFER,gBAAA;EACA,eAAA;EACA,YAAA;EACA,WAAA;EAEA,iBAAA;EACA,uBAAA;ACFR;ADII;EACI,gBAAA;EACA,eAAA;EACA,yBAAA;KAAA,sBAAA;UAAA,iBAAA;ACFR;ADIQ;EACI,eAAA;EACA,kBAAA;EACA,SAAA;ACFZ;ADKI;EACI,YAAA;ACHR;ADMI;EACI,aAAA;EACA,eAAA;ACJR;;ADOI;EACI,eAAA;EACA,gBAAA;EACA,iBAAA;EACA,qBAAA;EACA,sBAAA;ACJR;ADMQ;EACI,cEtCI;ADkChB;;ADMA;EACI;IACI,sCAAA;IACA,UAAA;IAEA,YAAA;IACA,YAAA;IACA,kBAAA;IACA,SAAA;IACA,WAAA;IACA,mBExDI;IFyDJ,eAAA;IACA,kBE3CD;IF4CC,kCAAA;YAAA,0BAAA;IACA,gDAAA;IAEA,wCAAA;ECLN;EDOM;IACI,UAAA;IACA,kBAAA;ECLV;EDOM;IACI,eAAA;IACA,cAAA;IACA,iBAAA;ECLV;EDQM;IACI,eErEI;ED+Dd;EDQM;IACI,cAAA;IACA,gBAAA;IACA,eAAA;IACA,YAAA;IACA,WAAA;IACA,eAAA;IACA,gBAAA;ECNV;EDQU;IACI,wBAAA;ECNd;AACF;ADOA;EAEQ;IACI,aAAA;ECNV;AACF","file":"navbar.css","sourcesContent":["@import '_vars'\n\nnav\n display: flex\n align-items: center\n position: relative\n\n >.logo\n display: inline-block\n stroke: $primary-light\n min-height: 40px\n min-width: 40px\n height: 40px\n width: 40px\n\n margin-right: 8px\n transition: stroke 0.2s\n\n >h1\n font-weight: 500\n font-size: 20px\n user-select: none\n\n mark\n font-size: 1rem\n position: relative\n top: -3px\n\n\n >span\n flex-grow: 1\n\n\n #menu\n display: none\n cursor: pointer\n\n.link-menu\n >a\n font-size: 14px\n font-weight: 600\n margin-left: 2rem\n text-decoration: none\n transition: color 0.1s\n\n &:hover\n color: $primary-light\n\n@media (max-width: 800px)\n .link-menu\n transform: scale(0.8) translateX(1rem)\n opacity: 0\n\n z-index: 100\n width: 200px\n position: absolute\n top: 5rem\n right: 2rem\n background: $secondary\n padding: 1rem 0\n border-radius: $edge\n backdrop-filter: blur(4px)\n border: 1px solid $border\n\n transition: transform 0.2s, opacity 0.2s\n\n &.open\n opacity: 1\n transform: inherit\n\n a\n font-size: 20px\n display: block\n line-height: 3rem\n\n nav\n .logo\n stroke: $primary-light\n\n #menu\n display: block\n min-height: 32px\n min-width: 32px\n height: 32px\n width: 32px\n cursor: pointer\n transition: 0.5s\n\n &.active\n transform: rotate(90deg)\n\n@media (max-width: 400px)\n nav\n h1\n display: none","nav {\n display: flex;\n align-items: center;\n position: relative;\n}\nnav > .logo {\n display: inline-block;\n stroke: #f45a88;\n min-height: 40px;\n min-width: 40px;\n height: 40px;\n width: 40px;\n margin-right: 8px;\n transition: stroke 0.2s;\n}\nnav > h1 {\n font-weight: 500;\n font-size: 20px;\n user-select: none;\n}\nnav > h1 mark {\n font-size: 1rem;\n position: relative;\n top: -3px;\n}\nnav > span {\n flex-grow: 1;\n}\nnav #menu {\n display: none;\n cursor: pointer;\n}\n\n.link-menu > a {\n font-size: 14px;\n font-weight: 600;\n margin-left: 2rem;\n text-decoration: none;\n transition: color 0.1s;\n}\n.link-menu > a:hover {\n color: #f45a88;\n}\n\n@media (max-width: 800px) {\n .link-menu {\n transform: scale(0.8) translateX(1rem);\n opacity: 0;\n z-index: 100;\n width: 200px;\n position: absolute;\n top: 5rem;\n right: 2rem;\n background: #252a38;\n padding: 1rem 0;\n border-radius: 5px;\n backdrop-filter: blur(4px);\n border: 1px solid rgba(22, 29, 43, 0.6901960784);\n transition: transform 0.2s, opacity 0.2s;\n }\n .link-menu.open {\n opacity: 1;\n transform: inherit;\n }\n .link-menu a {\n font-size: 20px;\n display: block;\n line-height: 3rem;\n }\n nav .logo {\n stroke: #f45a88;\n }\n nav #menu {\n display: block;\n min-height: 32px;\n min-width: 32px;\n height: 32px;\n width: 32px;\n cursor: pointer;\n transition: 0.5s;\n }\n nav #menu.active {\n transform: rotate(90deg);\n }\n}\n@media (max-width: 400px) {\n nav h1 {\n display: none;\n }\n}","$text: #f3f3f3\n$background: #03060d\n$secondary: #252a38\n$secondary-dark: #0e0e0e\n$border: #161d2bb0\n$soft: #fcf7f824\n\n$primary: #b53d61\n$primary-light: #f45a88\n$primary-glow: #f45a8861\n$primary-soft: #f79ab624\n$accent: #28aaf0\n\n$error: #ef3628\n$warn: #f09928\n$success: #28ef6b\n\n$edge: 5px\n\n$main-width: 800px\n$more-width: 1000px\n"]} \ No newline at end of file +{"version":3,"sources":["navbar.sass","navbar.css","_vars.sass"],"names":[],"mappings":"AAEA;EACI,aAAA;EACA,mBAAA;EACA,kBAAA;ACDJ;ADGI;EACI,qBAAA;EACA,eEDQ;EFER,gBAAA;EACA,eAAA;EACA,YAAA;EACA,WAAA;EAEA,iBAAA;EACA,uBAAA;ACFR;ADII;EACI,gBAAA;EACA,eAAA;EACA,yBAAA;KAAA,sBAAA;UAAA,iBAAA;ACFR;ADIQ;EACI,eAAA;EACA,kBAAA;EACA,SAAA;ACFZ;ADKI;EACI,YAAA;ACHR;ADMI;EACI,aAAA;EACA,eAAA;ACJR;;ADOI;EACI,eAAA;EACA,gBAAA;EACA,iBAAA;EACA,qBAAA;EACA,sBAAA;ACJR;ADMQ;EACI,cEtCI;ADkChB;;ADMA;EACI;IACI,sCAAA;IACA,UAAA;IAEA,YAAA;IACA,YAAA;IACA,kBAAA;IACA,SAAA;IACA,WAAA;IACA,mBExDI;IFyDJ,eAAA;IACA,kBE3CD;IF4CC,kCAAA;YAAA,0BAAA;IACA,gDAAA;IAEA,wCAAA;ECLN;EDOM;IACI,UAAA;IACA,kBAAA;ECLV;EDOM;IACI,eAAA;IACA,cAAA;IACA,iBAAA;ECLV;EDQM;IACI,eErEI;ED+Dd;EDQM;IACI,cAAA;IACA,gBAAA;IACA,eAAA;IACA,YAAA;IACA,WAAA;IACA,eAAA;IACA,gBAAA;ECNV;EDQU;IACI,wBAAA;ECNd;AACF;ADOA;EAEQ;IACI,aAAA;ECNV;AACF","file":"navbar.css","sourcesContent":["@import '_vars'\n\nnav\n display: flex\n align-items: center\n position: relative\n\n >.logo\n display: inline-block\n stroke: $primary-light\n min-height: 40px\n min-width: 40px\n height: 40px\n width: 40px\n\n margin-right: 8px\n transition: stroke 0.2s\n\n >h1\n font-weight: 500\n font-size: 20px\n user-select: none\n\n mark\n font-size: 1rem\n position: relative\n top: -3px\n\n\n >span\n flex-grow: 1\n\n\n #menu\n display: none\n cursor: pointer\n\n.link-menu\n >a\n font-size: 14px\n font-weight: 600\n margin-left: 2rem\n text-decoration: none\n transition: color 0.1s\n\n &:hover\n color: $primary-light\n\n@media (max-width: 800px)\n .link-menu\n transform: scale(0.8) translateX(1rem)\n opacity: 0\n\n z-index: 100\n width: 200px\n position: absolute\n top: 5rem\n right: 2rem\n background: $secondary\n padding: 1rem 0\n border-radius: $edge\n backdrop-filter: blur(4px)\n border: 1px solid $border\n\n transition: transform 0.2s, opacity 0.2s\n\n &.open\n opacity: 1\n transform: inherit\n\n a\n font-size: 20px\n display: block\n line-height: 3rem\n\n nav\n .logo\n stroke: $primary-light\n\n #menu\n display: block\n min-height: 32px\n min-width: 32px\n height: 32px\n width: 32px\n cursor: pointer\n transition: 0.5s\n\n &.active\n transform: rotate(90deg)\n\n@media (max-width: 400px)\n nav\n h1\n display: none","nav {\n display: flex;\n align-items: center;\n position: relative;\n}\nnav > .logo {\n display: inline-block;\n stroke: #b88df0;\n min-height: 40px;\n min-width: 40px;\n height: 40px;\n width: 40px;\n margin-right: 8px;\n transition: stroke 0.2s;\n}\nnav > h1 {\n font-weight: 500;\n font-size: 20px;\n user-select: none;\n}\nnav > h1 mark {\n font-size: 1rem;\n position: relative;\n top: -3px;\n}\nnav > span {\n flex-grow: 1;\n}\nnav #menu {\n display: none;\n cursor: pointer;\n}\n\n.link-menu > a {\n font-size: 14px;\n font-weight: 600;\n margin-left: 2rem;\n text-decoration: none;\n transition: color 0.1s;\n}\n.link-menu > a:hover {\n color: #b88df0;\n}\n\n@media (max-width: 800px) {\n .link-menu {\n transform: scale(0.8) translateX(1rem);\n opacity: 0;\n z-index: 100;\n width: 200px;\n position: absolute;\n top: 5rem;\n right: 2rem;\n background: #252a38;\n padding: 1rem 0;\n border-radius: 5px;\n backdrop-filter: blur(4px);\n border: 1px solid rgba(22, 29, 43, 0.6901960784);\n transition: transform 0.2s, opacity 0.2s;\n }\n .link-menu.open {\n opacity: 1;\n transform: inherit;\n }\n .link-menu a {\n font-size: 20px;\n display: block;\n line-height: 3rem;\n }\n nav .logo {\n stroke: #b88df0;\n }\n nav #menu {\n display: block;\n min-height: 32px;\n min-width: 32px;\n height: 32px;\n width: 32px;\n cursor: pointer;\n transition: 0.5s;\n }\n nav #menu.active {\n transform: rotate(90deg);\n }\n}\n@media (max-width: 400px) {\n nav h1 {\n display: none;\n }\n}","$text: #f3f3f3\n$background: #03060d\n$secondary: #252a38\n$secondary-dark: #0e0e0e\n$border: #161d2bb0\n$soft: #fcf7f824\n\n$primary: #5f44b9\n$primary-light: #b88df0\n$primary-glow: #683a9638\n$primary-soft: #cc9af724\n$accent: #28aaf0\n\n$error: #ef3628\n$warn: #f09928\n$success: #28ef6b\n\n$edge: 5px\n\n$main-width: 800px\n$more-width: 1000px\n"]} \ No newline at end of file diff --git a/web/static/css/profile.css b/web/static/css/profile.css new file mode 100644 index 0000000..c113cac --- /dev/null +++ b/web/static/css/profile.css @@ -0,0 +1,20 @@ +div.profile-base div.profile-header { + display: flex; +} +div.profile-base div.profile-header img { + height: 100px; + -o-object-fit: cover; + object-fit: cover; + -o-object-position: center; + object-position: center; + border-radius: 50%; +} +div.profile-base div.profile-header h2 { + margin-block: auto; + margin-left: 1rem; + font-size: 2rem; +} +div.profile-base div.profile-info { + line-height: 1.5rem; + padding: 2rem; +}/*# sourceMappingURL=profile.css.map */ \ No newline at end of file diff --git a/web/static/css/profile.css.map b/web/static/css/profile.css.map new file mode 100644 index 0000000..2094663 --- /dev/null +++ b/web/static/css/profile.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["profile.sass","profile.css"],"names":[],"mappings":"AAGI;EACI,aAAA;ACFR;ADIQ;EACI,aAAA;EACA,oBAAA;KAAA,iBAAA;EACA,0BAAA;KAAA,uBAAA;EACA,kBAAA;ACFZ;ADIQ;EACI,kBAAA;EACA,iBAAA;EACA,eAAA;ACFZ;ADII;EACI,mBAAA;EACA,aAAA;ACFR","file":"profile.css","sourcesContent":["@import '_vars'\n\ndiv.profile-base\n div.profile-header\n display: flex\n\n img\n height: 100px\n object-fit: cover\n object-position: center\n border-radius: 50%\n\n h2\n margin-block: auto\n margin-left: 1rem\n font-size: 2rem\n\n div.profile-info\n line-height: 1.5rem\n padding: 2rem\n","div.profile-base div.profile-header {\n display: flex;\n}\ndiv.profile-base div.profile-header img {\n height: 100px;\n object-fit: cover;\n object-position: center;\n border-radius: 50%;\n}\ndiv.profile-base div.profile-header h2 {\n margin-block: auto;\n margin-left: 1rem;\n font-size: 2rem;\n}\ndiv.profile-base div.profile-info {\n line-height: 1.5rem;\n padding: 2rem;\n}"]} \ No newline at end of file diff --git a/web/static/css/profile.sass b/web/static/css/profile.sass new file mode 100644 index 0000000..712819f --- /dev/null +++ b/web/static/css/profile.sass @@ -0,0 +1,20 @@ +@import '_vars' + +div.profile-base + div.profile-header + display: flex + + img + height: 100px + object-fit: cover + object-position: center + border-radius: 50% + + h2 + margin-block: auto + margin-left: 1rem + font-size: 2rem + + div.profile-info + line-height: 1.5rem + padding: 2rem diff --git a/web/templates/account.html b/web/templates/account.html index 7131b1c..7d688a7 100644 --- a/web/templates/account.html +++ b/web/templates/account.html @@ -1,8 +1,43 @@ {% include 'common/begin.html' %}
-

Welcome back, {{ user.username }}

+

Welcome back, {{ user.display_name or 'Guest' }}!

+
+
+ Discord profile avatar +

{{ user.username or 'Guest' }}

+
+
+ Your reward rank: {{ user.role or 'default' }}
+ API credits: {{ user.credits or 0 }}
+ Secret API key (click to reveal): +
+ {{ user.api_key or '-' }} +
(Click again to copy) +
+ +
+ Logout +
+
{% include 'common/end.html' %} \ No newline at end of file diff --git a/web/templates/common/begin.html b/web/templates/common/begin.html index f56dfbe..de20cbc 100644 --- a/web/templates/common/begin.html +++ b/web/templates/common/begin.html @@ -6,7 +6,7 @@ {% include 'common/seo.html' %} - {% for css in 'navbar base footer input fonts'.split() %} + {% for css in 'navbar base footer input fonts profile'.split() %} {% endfor %} diff --git a/web/templates/index.html b/web/templates/index.html index 9b3e7f3..87085b6 100644 --- a/web/templates/index.html +++ b/web/templates/index.html @@ -3,18 +3,18 @@

Free Generative AI for Everyone

-

Make AI Open Again

+

Open source ・ no CC required

- - - +
@@ -28,15 +28,22 @@

About Nova

-
- +
+ + + + + +

Free forever - no credit card required

-
- +
+ + +

Open source on GitHub

-
+

Featured in Free Media Heck Yeah

@@ -44,43 +51,49 @@

What users say

-
+
Krit

We can all agree that NovaAI is the best.

-
+
+ + forrany +

NovaAI responses are so fast. Probably the fastest API I've ever used, other [Discord servers] like FoxGPT and PurGPT are not as fast as NovaAI.

+
+ +
Tech With Anirudh

NovaOSS is really good, I mean really. The code's good. The website's good. The API's good.

-
+
David

Nova is good. I love it because [it's] free and easy.

-
+
Tolgchu (co-owner of PurGPT)

Would you like a fully open-source API including GPT-4-32k? It's even fully free and has 0% reverse engineering!

-
+
Koru (owner of Skailar)

Nova [is] an open source, ethically sourced (no reverse engineering, just like us) API with high limits and a big amount of available models.

-
+
Perl (owner of GeniusAI)

I love the credit system in this API.

-
+
Flying Elephant

You are so excellent [...]. Thank you for your contributions.

diff --git a/web/tos.py b/web/tos.py old mode 100644 new mode 100755