feat: Finish adding v2 layout

main.py

@@ -44,8 +44,8 @@ def index():
             resp = make_response(redirect('/'))
             resp.set_cookie('token', '', expires=0)
             return resp
-        return render_template('index.html',account=user['email'],account_link="account",CITY_DOMAIN=CITY_DOMAIN)
-    return render_template('index.html',account="Login",account_link="login",CITY_DOMAIN=CITY_DOMAIN)
+        return render_template('index.html',account=user['email'],account_link="account",account_link_name="Account",CITY_DOMAIN=CITY_DOMAIN)
+    return render_template('index.html',account="Login",account_link="login",account_link_name="Login",CITY_DOMAIN=CITY_DOMAIN)
 
 @app.route('/signup', methods=['POST'])
 def signup():
@@ -75,14 +75,14 @@ def login():
     if not user['success']:
         return error(user['message'])
     # Redirect to dashboard with cookie
-    resp = make_response(redirect('/edit'))
+    resp = make_response(redirect('/account'))
     resp.set_cookie('token', user['token'])
     return resp
 
 @app.route('/edit')
 def edit():
     if 'token' not in request.cookies:
-        return redirect('/')
+        return redirect('/login')
 
     token = request.cookies['token']
     if not accounts.validate_token(token):
@@ -91,7 +91,7 @@ def edit():
     user = accounts.validate_token(token)
     if not user:
         # Remove cookie
-        resp = make_response(redirect('/'))
+        resp = make_response(redirect('/login'))
         resp.set_cookie('token', '', expires=0)
         return resp
     
@@ -100,6 +100,10 @@ def edit():
     hns = ""
     btc = ""
     eth = ""
+    hnschat = ""
+    location = ""
+    avatar = ""
+    bg_colour = ""
 
     if 'data' in data:
         html = data['data'].encode('utf-8').decode('unicode-escape')
@@ -109,8 +113,18 @@ def edit():
         btc = data['BTC']
     if 'ETH' in data:
         eth = data['ETH']
+    if 'hnschat' in data:
+        hnschat = data['hnschat']
+    if 'location' in data:
+        location = data['location']
+    if 'avatar' in data:
+        avatar = data['avatar']
+    if 'bg_colour' in data:
+        bg_colour = data['bg_colour']
 
-    return render_template('edit.html',account=user['email'],account_link="account",data=html,hns=hns,btc=btc,eth=eth)
+    return render_template('edit.html',account=user['email'],account_link="account",account_link_name="Account",data=html,
+                           hns=hns,btc=btc,eth=eth,hnschat=hnschat,location=location,avatar=avatar,
+                           bg_colour=bg_colour,CITY_DOMAIN=CITY_DOMAIN,domain=user['domain'])
 
 
 @app.route('/edit', methods=['POST'])
@@ -122,7 +136,7 @@ def send_edit():
     user = accounts.validate_token(token)
     if not user:
         # Remove cookie
-        resp = make_response(redirect('/'))
+        resp = make_response(redirect('/login'))
         resp.set_cookie('token', '', expires=0)
         return resp
     
@@ -132,6 +146,10 @@ def send_edit():
     data['HNS'] = request.form['hns']
     data['BTC'] = request.form['btc']
     data['ETH'] = request.form['eth']
+    data['hnschat'] = request.form['hnschat']
+    data['location'] = request.form['location']
+    data['avatar'] = request.form['avatar']
+    data['bg_colour'] = request.form['bg_colour']
 
     # Convert to json
     data = json.dumps(data)
@@ -163,6 +181,7 @@ def claim():
 def catch_all(path):
     account = "Login"
     account_link = "login"
+    account_link_name = "Login"
     site = "Null"
     domain = ""
     if 'domain' in request.args:
@@ -178,17 +197,22 @@ def catch_all(path):
             return resp
         account = user['email']
         account_link = "account"
+        account_link_name = "Account"
         site = user['domain'] + "." + CITY_DOMAIN
     elif path != "signup" and path != "login":
         return redirect('/')
     
+    if path == "account":
+        account_link = "logout"
+        account_link_name = "Logout"
+
     # If file exists, load it
     if os.path.isfile('templates/' + path):
-        return render_template(path,account=account,account_link=account_link,site=site,CITY_DOMAIN=CITY_DOMAIN,domain=domain)
+        return render_template(path,account=account,account_link=account_link,account_link_name=account_link_name,site=site,CITY_DOMAIN=CITY_DOMAIN,domain=domain)
     
     # Try with .html
     if os.path.isfile('templates/' + path + '.html'):
-        return render_template(path + '.html',account=account,account_link=account_link,site=site,CITY_DOMAIN=CITY_DOMAIN,domain=domain)
+        return render_template(path + '.html',account=account,account_link=account_link,account_link_name=account_link_name,site=site,CITY_DOMAIN=CITY_DOMAIN,domain=domain)
     return redirect('/') # 404 catch all
 
 # 404 catch all

templates/account.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html data-bs-theme="light" lang="en">
+<html data-bs-theme="light" lang="en" style="background: #000000;">
 
 <head>
     <meta charset="utf-8">
@@ -9,26 +9,31 @@
     <link rel="stylesheet" href="assets/css/styles.min.css">
 </head>
 
-<body>
-    <nav class="navbar navbar-expand-md bg-dark py-3" data-bs-theme="dark">
-        <div class="container"><a class="navbar-brand d-flex align-items-center" href="/"><span class="bs-icon-sm bs-icon-rounded bs-icon-primary d-flex justify-content-center align-items-center me-2 bs-icon"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-bezier">
-                        <path fill-rule="evenodd" d="M0 10.5A1.5 1.5 0 0 1 1.5 9h1A1.5 1.5 0 0 1 4 10.5v1A1.5 1.5 0 0 1 2.5 13h-1A1.5 1.5 0 0 1 0 11.5v-1zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1zm10.5.5A1.5 1.5 0 0 1 13.5 9h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1a1.5 1.5 0 0 1-1.5-1.5v-1zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1zM6 4.5A1.5 1.5 0 0 1 7.5 3h1A1.5 1.5 0 0 1 10 4.5v1A1.5 1.5 0 0 1 8.5 7h-1A1.5 1.5 0 0 1 6 5.5v-1zM7.5 4a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1z"></path>
-                        <path d="M6 4.5H1.866a1 1 0 1 0 0 1h2.668A6.517 6.517 0 0 0 1.814 9H2.5c.123 0 .244.015.358.043a5.517 5.517 0 0 1 3.185-3.185A1.503 1.503 0 0 1 6 5.5v-1zm3.957 1.358A1.5 1.5 0 0 0 10 5.5v-1h4.134a1 1 0 1 1 0 1h-2.668a6.517 6.517 0 0 1 2.72 3.5H13.5c-.123 0-.243.015-.358.043a5.517 5.517 0 0 0-3.185-3.185z"></path>
-                    </svg></span><span>Brand</span></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-6"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
-            <div class="collapse navbar-collapse flex-grow-0 order-md-first" id="navcol-6">
-                <ul class="navbar-nav me-auto">
-                    <li class="nav-item"><a class="nav-link active" href="/signup">Create your page</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/edit">Edit your page</a></li>
-                </ul>
-                <div class="d-md-none my-2"><button class="btn btn-light me-2" type="button">Button</button><button class="btn btn-primary" type="button">Button</button></div>
-            </div>
-            <div class="d-none d-md-block"><a class="btn btn-primary" role="button" href="/account">{{account}}</a></div>
-        </div>
-    </nav>
+<body style="background: #000000;color: #ffffff;margin: auto;width: 95%;">
+    <section>
+        <section style="height: 15vh;background: url(&quot;assets/img/alexander-slattery-LI748t0BK8w-unsplash.webp&quot;) bottom / cover no-repeat;min-height: 130px;"></section>
+        <section class="d-print-none d-lg-none d-xl-none d-xxl-none" style="width: 30vw;border-radius: 50%;background: #000000;padding: 20px;height: 30vw;margin: auto;margin-top: -15vw;display: flex;"><img class="img-fluid" src="assets/img/HNSW.png" width="100%"></section>
+        <section class="d-print-none d-lg-none d-xl-none d-xxl-none" style="display: block;width: 100%;text-align: center;margin-top: 10px;">
+            <div style="display: inline-block;margin: auto;"><a class="btn btn-primary" role="button" style="margin: 10px;" href="/signup">Create your page</a><a class="btn btn-primary" role="button" style="margin: 10px;" href="/{{account_link}}">{{account}}</a></div>
+        </section>
+        <section class="d-none d-print-block d-lg-block d-xl-block d-xxl-block" style="display: block;">
+            <div style="width: 100%;text-align: right;margin-top: -4em;"><a class="btn btn-primary" role="button" style="margin: 10px;" href="/signup">Create a new page</a><a class="btn btn-primary" role="button" style="margin: 10px;" href="/{{account_link}}">{{account_link_name}}</a></div>
+        </section>
+        <section class="d-none d-print-block d-lg-block d-xl-block d-xxl-block" style="width: 15vw;border-radius: 50%;background: #000000;padding: 20px;height: 15vw;margin: auto;display: flex;margin-top: -6vw;"><img class="img-fluid" src="assets/img/HNSW.png" width="100%"></section>
+        <section class="d-none d-print-block d-lg-block d-xl-block d-xxl-block" style="height: 3em;"></section>
+    </section>
     <section style="margin-top: 50px;text-align: center;">
-        <p>Email: {{account}}<br>Site: <a href="https://{{site}}" target="_blank">{{site}}</a></p><a class="btn btn-primary" role="button" href="/logout">Logout</a>
+        <h1>Welcome to ShakeCities</h1>
+        <p>Congratulations your site is ready for use.<br><br></p>
+        <div style="max-width: 10em;margin: auto;"><a class="btn btn-primary" role="button" href="https://{{site}}" style="display: block;margin: 10px;">Visit your site</a><a class="btn btn-primary" role="button" href="/edit" style="display: block;margin: 10px;">Edit your site</a><a class="btn btn-primary" role="button" href="/logout" style="display: block;margin: 10px;">Logout</a></div>
+    </section>
+    <section style="margin: 20px;height: 40px;text-align: center;margin-top: 40px;">
+        <div>
+            <p style="color: #ffffff;">Copyright © ShakeCities 2023</p>
+        </div>
     </section>
     <script src="assets/bootstrap/js/bootstrap.min.js"></script>
+    <script src="assets/js/script.min.js"></script>
 </body>
 
 </html>

templates/assets/css/styles.min.css

@@ -1 +1 @@
-.bs-icon{--bs-icon-size:.75rem;display:flex;flex-shrink:0;justify-content:center;align-items:center;font-size:var(--bs-icon-size);width:calc(var(--bs-icon-size) * 2);height:calc(var(--bs-icon-size) * 2);color:var(--bs-primary)}.bs-icon-xs{--bs-icon-size:1rem;width:calc(var(--bs-icon-size) * 1.5);height:calc(var(--bs-icon-size) * 1.5)}.bs-icon-sm{--bs-icon-size:1rem}.bs-icon-md{--bs-icon-size:1.5rem}.bs-icon-lg{--bs-icon-size:2rem}.bs-icon-xl{--bs-icon-size:2.5rem}.bs-icon.bs-icon-primary{color:var(--bs-white);background:var(--bs-primary)}.bs-icon.bs-icon-primary-light{color:var(--bs-primary);background:rgba(var(--bs-primary-rgb),.2)}.bs-icon.bs-icon-semi-white{color:var(--bs-primary);background:rgba(255,255,255,.5)}.bs-icon.bs-icon-rounded{border-radius:.5rem}.bs-icon.bs-icon-circle{border-radius:50%}
+.bs-icon{--bs-icon-size:.75rem;display:flex;flex-shrink:0;justify-content:center;align-items:center;font-size:var(--bs-icon-size);width:calc(var(--bs-icon-size) * 2);height:calc(var(--bs-icon-size) * 2);color:var(--bs-primary)}.bs-icon-xs{--bs-icon-size:1rem;width:calc(var(--bs-icon-size) * 1.5);height:calc(var(--bs-icon-size) * 1.5)}.bs-icon-sm{--bs-icon-size:1rem}.bs-icon-md{--bs-icon-size:1.5rem}.bs-icon-lg{--bs-icon-size:2rem}.bs-icon-xl{--bs-icon-size:2.5rem}.bs-icon.bs-icon-primary{color:var(--bs-white);background:var(--bs-primary)}.bs-icon.bs-icon-primary-light{color:var(--bs-primary);background:rgba(var(--bs-primary-rgb),.2)}.bs-icon.bs-icon-semi-white{color:var(--bs-primary);background:rgba(255,255,255,.5)}.bs-icon.bs-icon-rounded{border-radius:.5rem}.bs-icon.bs-icon-circle{border-radius:50%}.right-align{right:5%}

templates/assets/js/script.min.js

@@ -0,0 +1 @@
+document.addEventListener("DOMContentLoaded",(function(){[].slice.call(document.querySelectorAll("[data-bss-tooltip]")).map((function(t){return new bootstrap.Tooltip(t)}))}),!1);

templates/edit.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html data-bs-theme="light" lang="en">
+<html data-bs-theme="light" lang="en" style="background: #000000;">
 
 <head>
     <meta charset="utf-8">
@@ -9,29 +9,35 @@
     <link rel="stylesheet" href="assets/css/styles.min.css">
 </head>
 
-<body>
-    <nav class="navbar navbar-expand-md bg-dark py-3" data-bs-theme="dark">
-        <div class="container"><a class="navbar-brand d-flex align-items-center" href="/"><span class="bs-icon-sm bs-icon-rounded bs-icon-primary d-flex justify-content-center align-items-center me-2 bs-icon"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-bezier">
-                        <path fill-rule="evenodd" d="M0 10.5A1.5 1.5 0 0 1 1.5 9h1A1.5 1.5 0 0 1 4 10.5v1A1.5 1.5 0 0 1 2.5 13h-1A1.5 1.5 0 0 1 0 11.5v-1zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1zm10.5.5A1.5 1.5 0 0 1 13.5 9h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1a1.5 1.5 0 0 1-1.5-1.5v-1zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1zM6 4.5A1.5 1.5 0 0 1 7.5 3h1A1.5 1.5 0 0 1 10 4.5v1A1.5 1.5 0 0 1 8.5 7h-1A1.5 1.5 0 0 1 6 5.5v-1zM7.5 4a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1z"></path>
-                        <path d="M6 4.5H1.866a1 1 0 1 0 0 1h2.668A6.517 6.517 0 0 0 1.814 9H2.5c.123 0 .244.015.358.043a5.517 5.517 0 0 1 3.185-3.185A1.503 1.503 0 0 1 6 5.5v-1zm3.957 1.358A1.5 1.5 0 0 0 10 5.5v-1h4.134a1 1 0 1 1 0 1h-2.668a6.517 6.517 0 0 1 2.72 3.5H13.5c-.123 0-.243.015-.358.043a5.517 5.517 0 0 0-3.185-3.185z"></path>
-                    </svg></span><span>Brand</span></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-6"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
-            <div class="collapse navbar-collapse flex-grow-0 order-md-first" id="navcol-6">
-                <ul class="navbar-nav me-auto">
-                    <li class="nav-item"><a class="nav-link active" href="/signup">Create your page</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/edit">Edit your page</a></li>
-                </ul>
-                <div class="d-md-none my-2"><button class="btn btn-light me-2" type="button">Button</button><button class="btn btn-primary" type="button">Button</button></div>
-            </div>
-            <div class="d-none d-md-block"><a class="btn btn-primary" role="button" href="/account">{{account}}</a></div>
-        </div>
-    </nav>
+<body style="background: #000000;color: #ffffff;">
+    <section>
+        <section style="height: 15vh;background: url(&quot;assets/img/alexander-slattery-LI748t0BK8w-unsplash.webp&quot;) bottom / cover no-repeat;min-height: 130px;"></section>
+        <section class="d-print-none d-lg-none d-xl-none d-xxl-none" style="width: 30vw;border-radius: 50%;background: #000000;padding: 20px;height: 30vw;margin: auto;margin-top: -15vw;display: flex;"><img class="img-fluid" src="assets/img/HNSW.png" width="100%"></section>
+        <section class="d-print-none d-lg-none d-xl-none d-xxl-none" style="display: block;width: 100%;text-align: center;margin-top: 10px;">
+            <div style="display: inline-block;margin: auto;"><a class="btn btn-primary" role="button" style="margin: 10px;" href="/signup">Create your page</a><a class="btn btn-primary" role="button" style="margin: 10px;" href="/{{account_link}}">{{account}}</a></div>
+        </section>
+        <section class="d-none d-print-block d-lg-block d-xl-block d-xxl-block" style="display: block;">
+            <div style="width: 100%;text-align: right;margin-top: -4em;"><a class="btn btn-primary" role="button" style="margin: 10px;" href="/signup">Create a new page</a><a class="btn btn-primary" role="button" style="margin: 10px;" href="/{{account_link}}">{{account_link_name}}</a></div>
+        </section>
+        <section class="d-none d-print-block d-lg-block d-xl-block d-xxl-block" style="width: 15vw;border-radius: 50%;background: #000000;padding: 20px;height: 15vw;margin: auto;display: flex;margin-top: -6vw;"><img class="img-fluid" src="assets/img/HNSW.png" width="100%"></section>
+        <section class="d-none d-print-block d-lg-block d-xl-block d-xxl-block" style="height: 3em;"></section>
+    </section>
     <section style="margin-top: 50px;">
-        <h1 style="text-align: center;">Edit your page</h1>
+        <h1 style="text-align: center;margin-bottom: 30px;">Edit your page</h1>
     </section>
     <section style="width: 80%;margin: auto;">
-        <form method="post"><textarea class="form-control form-control-lg" rows="25" name="data" placeholder="Website data">{{data}}</textarea><input class="form-control" type="text" style="margin-top: 10px;" placeholder="HNS Address" name="hns" value="{{hns}}"><input class="form-control" type="text" style="margin-top: 10px;" name="btc" placeholder="BTC Address" value="{{btc}}"><input class="form-control" type="text" style="margin-top: 10px;" placeholder="ETH Address" name="eth" value="{{eth}}"><input class="btn btn-primary" type="submit" style="margin-top: 10px;"></form>
+        <form method="post"><input class="form-control" type="text" style="margin-top: 10px;" name="avatar" value="{{avatar}}" placeholder="Avatar URL"><input class="form-control" type="text" style="margin-top: 10px;" name="location" value="{{location}}" placeholder="Location"><input class="form-control" type="text" style="margin-top: 10px;" name="hnschat" placeholder="HNSChat" value="{{hnschat}}">
+            <div class="d-xl-flex justify-content-xl-center align-items-xl-center" style="margin-bottom: 10px;margin-top: 10px;"><label class="form-label" style="display: inline-block;margin-right: 15px;">Background colour&nbsp;</label><input class="form-control form-control-color" type="color" style="display: inline-block;border-radius: 50%;width: 50px;height: 50px;" name="bg_colour" value="{{bg_colour}}"></div><textarea class="form-control form-control-lg" rows="15" name="data" placeholder="HTML Content">{{data}}</textarea><input class="form-control" type="text" style="margin-top: 10px;" placeholder="HNS Address" name="hns" value="{{hns}}"><input class="form-control" type="text" style="margin-top: 10px;" name="btc" placeholder="BTC Address" value="{{btc}}"><input class="form-control" type="text" style="margin-top: 10px;" placeholder="ETH Address" name="eth" value="{{eth}}">
+            <div style="text-align: center;"><input class="btn btn-primary" type="submit" style="margin-top: 10px;"></div>
+        </form>
+    </section>
+    <section style="margin: 20px;height: 40px;text-align: center;margin-top: 40px;">
+        <div>
+            <p style="color: #ffffff;">Copyright © ShakeCities 2023</p>
+        </div>
     </section>
     <script src="assets/bootstrap/js/bootstrap.min.js"></script>
+    <script src="assets/js/script.min.js"></script>
 </body>
 
 </html>

templates/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html data-bs-theme="light" lang="en">
+<html data-bs-theme="light" lang="en" style="background: black;">
 
 <head>
     <meta charset="utf-8">
@@ -9,23 +9,75 @@
     <link rel="stylesheet" href="assets/css/styles.min.css">
 </head>
 
-<body>
-    <nav class="navbar navbar-expand-md bg-dark py-3" data-bs-theme="dark">
-        <div class="container"><a class="navbar-brand d-flex align-items-center" href="/"><span class="bs-icon-sm bs-icon-rounded bs-icon-primary d-flex justify-content-center align-items-center me-2 bs-icon"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-bezier">
-                        <path fill-rule="evenodd" d="M0 10.5A1.5 1.5 0 0 1 1.5 9h1A1.5 1.5 0 0 1 4 10.5v1A1.5 1.5 0 0 1 2.5 13h-1A1.5 1.5 0 0 1 0 11.5v-1zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1zm10.5.5A1.5 1.5 0 0 1 13.5 9h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1a1.5 1.5 0 0 1-1.5-1.5v-1zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1zM6 4.5A1.5 1.5 0 0 1 7.5 3h1A1.5 1.5 0 0 1 10 4.5v1A1.5 1.5 0 0 1 8.5 7h-1A1.5 1.5 0 0 1 6 5.5v-1zM7.5 4a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1z"></path>
-                        <path d="M6 4.5H1.866a1 1 0 1 0 0 1h2.668A6.517 6.517 0 0 0 1.814 9H2.5c.123 0 .244.015.358.043a5.517 5.517 0 0 1 3.185-3.185A1.503 1.503 0 0 1 6 5.5v-1zm3.957 1.358A1.5 1.5 0 0 0 10 5.5v-1h4.134a1 1 0 1 1 0 1h-2.668a6.517 6.517 0 0 1 2.72 3.5H13.5c-.123 0-.243.015-.358.043a5.517 5.517 0 0 0-3.185-3.185z"></path>
-                    </svg></span><span>Brand</span></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-6"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
-            <div class="collapse navbar-collapse flex-grow-0 order-md-first" id="navcol-6">
-                <ul class="navbar-nav me-auto">
-                    <li class="nav-item"><a class="nav-link active" href="/signup">Create your page</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/edit">Edit your page</a></li>
-                </ul>
-                <div class="d-md-none my-2"><button class="btn btn-light me-2" type="button">Button</button><button class="btn btn-primary" type="button">Button</button></div>
+<body style="width: 95%;margin: auto;background: transparent;color: #ffffff;">
+    <section>
+        <section style="height: 15vh;background: url(&quot;assets/img/alexander-slattery-LI748t0BK8w-unsplash.webp&quot;) bottom / cover no-repeat;min-height: 130px;"></section>
+        <section class="d-print-none d-lg-none d-xl-none d-xxl-none" style="width: 30vw;border-radius: 50%;background: #000000;padding: 20px;height: 30vw;margin: auto;margin-top: -15vw;display: flex;"><img class="img-fluid" src="assets/img/HNSW.png" width="100%"></section>
+        <section class="d-print-none d-lg-none d-xl-none d-xxl-none" style="display: block;width: 100%;text-align: center;margin-top: 10px;">
+            <div style="display: inline-block;margin: auto;"><a class="btn btn-primary" role="button" style="margin: 10px;" href="/signup">Create your page</a><a class="btn btn-primary" role="button" style="margin: 10px;" href="/{{account_link}}">{{account}}</a></div>
+        </section>
+        <section class="d-none d-print-block d-lg-block d-xl-block d-xxl-block" style="display: block;">
+            <div style="width: 100%;text-align: right;margin-top: -4em;"><a class="btn btn-primary" role="button" style="margin: 10px;" href="/signup">Create a new page</a><a class="btn btn-primary" role="button" style="margin: 10px;" href="/{{account_link}}">{{account_link_name}}</a></div>
+        </section>
+        <section class="d-none d-print-block d-lg-block d-xl-block d-xxl-block" style="width: 15vw;border-radius: 50%;background: #000000;padding: 20px;height: 15vw;margin: auto;display: flex;margin-top: -6vw;"><img class="img-fluid" src="assets/img/HNSW.png" width="100%"></section>
+        <section class="d-none d-print-block d-lg-block d-xl-block d-xxl-block" style="height: 3em;"></section>
+    </section>
+    <section style="margin-top: 10px;">
+        <div class="row" style="margin: 0px;">
+            <div class="col" style="background: var(--bs-body-color);margin-right: 10px;border-radius: 10px;">
+                <h1 style="margin: 10px;">Heading</h1>
+                <p style="margin: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vivamus urna nisi dapibus nascetur convallis sollicitudin tempus lorem condimentum. Aptent dictumst montes id mattis molestie parturient morbi lobortis cubilia pharetra. Natoque adipiscing mollis parturient odio elit eu varius vulputate phasellus gravida. Et eget donec fringilla viverra id eu tempor ullamcorper aliquet vehicula. Et euismod magnis interdum mollis tellus lacinia at sollicitudin morbi inceptos.<br><br>Dictumst natoque imperdiet per praesent nisl morbi fermentum ultrices vivamus eu. Dictum venenatis netus orci himenaeos dictumst mattis pulvinar mattis laoreet tempor. Vulputate consequat in duis convallis mus mattis suspendisse semper netus varius. Magna placerat lectus eleifend nisi nunc laoreet lorem ipsum primis pellentesque. Fusce inceptos ante orci habitasse dui torquent dictum habitant iaculis sit. Interdum sociis eu porta inceptos parturient neque tortor lectus vivamus nunc.</p>
             </div>
-            <div class="d-none d-md-block"><a class="btn btn-primary" role="button" href="/{{account_link}}">{{account}}</a></div>
+            <div class="col" style="background: var(--bs-body-color);margin-left: 10px;border-radius: 10px;">
+                <h1 style="margin: 10px;">Heading</h1>
+                <p style="margin: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Conubia semper malesuada lobortis blandit ac leo leo potenti vel rutrum volutpat. Orci taciti arcu ipsum arcu rhoncus tortor aliquet id magna malesuada amet. Diam inceptos tempor gravida mattis mollis at imperdiet eros per cras sagittis.<br><br>Aliquet faucibus elit lacus elementum sed malesuada a vestibulum lacinia bibendum eleifend. Viverra mattis eleifend cum nulla nascetur parturient lectus vitae nostra a sem. Vel proin ullamcorper platea aenean vivamus volutpat lacus velit rutrum mi consequat. Ac gravida risus purus ligula mollis potenti duis ultricies eleifend tellus adipiscing.<br><br>Congue aenean lobortis fermentum lectus vel justo scelerisque id vitae mauris lacus. Gravida porta dolor tellus sem iaculis dictumst a mus in lorem ipsum. Dapibus pulvinar pretium ornare mauris duis sagittis non ullamcorper orci vestibulum venenatis. Imperdiet posuere penatibus sed senectus enim sollicitudin semper justo lorem aptent cras.</p>
             </div>
-    </nav>
+        </div>
+    </section>
+    <section>
+        <section class="d-print-none d-md-none d-lg-none d-xl-none d-xxl-none" style="background: var(--bs-body-color);text-align: center;padding-top: 10px;padding-bottom: 10px;margin-bottom: 25px;margin-top: 40px;border-radius: 10px;">
+            <div style="margin: 20px;">
+                <h1>Contact</h1>
+                <div class="list-group list-group-horizontal" data-bs-theme="dark" style="margin: auto;width: 80%;"><button class="list-group-item list-group-item-action" style="width: 33%;padding: 0px;margin: 10px;"><a class="btn btn-primary" role="button" style="width: 100%;" target="_blank" href="https://discord.com">Discord</a></button><button class="list-group-item list-group-item-action" style="width: 33%;padding: 0px;margin: 10px;"><a class="btn btn-primary" role="button" style="width: 100%;" target="_blank" href="mailto:email@example.com">Email</a></button><button class="list-group-item list-group-item-action" style="width: 33%;padding: 0px;margin: 10px;"><a class="btn btn-primary" role="button" style="width: 100%;" target="_blank" href="https://twitter.com">Twitter</a></button></div>
+            </div>
+            <div style="margin: 20px;">
+                <h1>Donate</h1>
+                <p>hs1...</p>
+            </div>
+        </section>
+        <section class="d-none d-print-block d-md-block d-lg-block d-xl-block d-xxl-block" style="background: var(--bs-body-color);text-align: center;padding-top: 10px;padding-bottom: 10px;margin-bottom: 25px;margin-top: 40px;border-radius: 10px;">
+            <div style="margin: 20px;">
+                <h1>Contact</h1>
+                <div class="list-group list-group-horizontal" data-bs-theme="dark" style="margin: auto;width: 50%;"><button class="list-group-item list-group-item-action" style="width: 33%;padding: 0px;margin: 10px;"><a class="btn btn-primary" role="button" style="width: 100%;" target="_blank" href="https://discord.com">Discord</a></button><button class="list-group-item list-group-item-action" style="width: 33%;padding: 0px;margin: 10px;"><a class="btn btn-primary" role="button" style="width: 100%;" target="_blank" href="mailto:email@example.com">Email</a></button><button class="list-group-item list-group-item-action" style="width: 33%;padding: 0px;margin: 10px;"><a class="btn btn-primary" role="button" style="width: 100%;" target="_blank" href="https://twitter.com">Twitter</a></button></div>
+            </div>
+            <div style="margin: 20px;">
+                <h1>Donate</h1>
+                <p data-bs-toggle="tooltip" data-bss-tooltip="" id="hns_address" title="Copy">hs1.......</p><script>
+    function copyToClipboard(element) {
+            const textToCopy = element.textContent;
+            const textArea = document.createElement('textarea');
+            textArea.value = textToCopy;
+            document.body.appendChild(textArea);
+            textArea.select();
+            document.execCommand('copy');
+            document.body.removeChild(textArea);
+        }
+
+    const hns = document.getElementById('hns_address');
+    hns.addEventListener('click', () => {
+        copyToClipboard(hns);
+    });
+</script>
+            </div>
+        </section>
+    </section>
+    <section style="margin: 20px;height: 40px;text-align: center;margin-top: 40px;">
+        <div>
+            <p style="color: #ffffff;">Copyright © ShakeCities 2023</p>
+        </div>
+    </section>
     <script src="assets/bootstrap/js/bootstrap.min.js"></script>
+    <script src="assets/js/script.min.js"></script>
 </body>
 
 </html>

templates/login.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html data-bs-theme="light" lang="en">
+<html data-bs-theme="light" lang="en" style="background: #000000;">
 
 <head>
     <meta charset="utf-8">
@@ -9,21 +9,19 @@
     <link rel="stylesheet" href="assets/css/styles.min.css">
 </head>
 
-<body>
-    <nav class="navbar navbar-expand-md bg-dark py-3" data-bs-theme="dark">
-        <div class="container"><a class="navbar-brand d-flex align-items-center" href="/"><span class="bs-icon-sm bs-icon-rounded bs-icon-primary d-flex justify-content-center align-items-center me-2 bs-icon"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-bezier">
-                        <path fill-rule="evenodd" d="M0 10.5A1.5 1.5 0 0 1 1.5 9h1A1.5 1.5 0 0 1 4 10.5v1A1.5 1.5 0 0 1 2.5 13h-1A1.5 1.5 0 0 1 0 11.5v-1zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1zm10.5.5A1.5 1.5 0 0 1 13.5 9h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1a1.5 1.5 0 0 1-1.5-1.5v-1zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1zM6 4.5A1.5 1.5 0 0 1 7.5 3h1A1.5 1.5 0 0 1 10 4.5v1A1.5 1.5 0 0 1 8.5 7h-1A1.5 1.5 0 0 1 6 5.5v-1zM7.5 4a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1z"></path>
-                        <path d="M6 4.5H1.866a1 1 0 1 0 0 1h2.668A6.517 6.517 0 0 0 1.814 9H2.5c.123 0 .244.015.358.043a5.517 5.517 0 0 1 3.185-3.185A1.503 1.503 0 0 1 6 5.5v-1zm3.957 1.358A1.5 1.5 0 0 0 10 5.5v-1h4.134a1 1 0 1 1 0 1h-2.668a6.517 6.517 0 0 1 2.72 3.5H13.5c-.123 0-.243.015-.358.043a5.517 5.517 0 0 0-3.185-3.185z"></path>
-                    </svg></span><span>Brand</span></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-6"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
-            <div class="collapse navbar-collapse flex-grow-0 order-md-first" id="navcol-6">
-                <ul class="navbar-nav me-auto">
-                    <li class="nav-item"><a class="nav-link active" href="/signup">Create your page</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/edit">Edit your page</a></li>
-                </ul>
-                <div class="d-md-none my-2"><button class="btn btn-light me-2" type="button">Button</button><button class="btn btn-primary" type="button">Button</button></div>
-            </div>
-        </div>
-    </nav>
+<body style="background: #000000;width: 95%;margin: auto;">
+    <section>
+        <section style="height: 15vh;background: url(&quot;assets/img/alexander-slattery-LI748t0BK8w-unsplash.webp&quot;) bottom / cover no-repeat;min-height: 130px;"></section>
+        <section class="d-print-none d-lg-none d-xl-none d-xxl-none" style="width: 30vw;border-radius: 50%;background: #000000;padding: 20px;height: 30vw;margin: auto;margin-top: -15vw;display: flex;"><img class="img-fluid" src="assets/img/HNSW.png" width="100%"></section>
+        <section class="d-print-none d-lg-none d-xl-none d-xxl-none" style="display: block;width: 100%;text-align: center;margin-top: 10px;">
+            <div style="display: inline-block;margin: auto;"><a class="btn btn-primary" role="button" style="margin: 10px;" href="/signup">Create your page</a><a class="btn btn-primary" role="button" style="margin: 10px;" href="/{{account_link}}">{{account}}</a></div>
+        </section>
+        <section class="d-none d-print-block d-lg-block d-xl-block d-xxl-block" style="display: block;">
+            <div style="width: 100%;text-align: right;margin-top: -4em;"><a class="btn btn-primary" role="button" style="margin: 10px;" href="/signup">Create a new page</a><a class="btn btn-primary" role="button" style="margin: 10px;" href="/{{account_link}}">{{account_link_name}}</a></div>
+        </section>
+        <section class="d-none d-print-block d-lg-block d-xl-block d-xxl-block" style="width: 15vw;border-radius: 50%;background: #000000;padding: 20px;height: 15vw;margin: auto;display: flex;margin-top: -6vw;"><img class="img-fluid" src="assets/img/HNSW.png" width="100%"></section>
+        <section class="d-none d-print-block d-lg-block d-xl-block d-xxl-block" style="height: 3em;"></section>
+    </section>
     <section style="width: 50%;margin: auto;margin-top: 50px;">
         <div class="card bg-dark" style="padding-bottom: 40px;">
             <div class="card-body">
@@ -32,7 +30,13 @@
             <form style="width: 80%;margin: auto;text-align: right;margin-top: 20px;" method="post"><input class="form-control" type="email" style="margin: auto;width: 100%;margin-top: 10px;" placeholder="email" name="email" required=""><input class="form-control" type="password" style="margin: auto;width: 100%;margin-top: 10px;" name="password" placeholder="Password" required="" minlength="6"><input class="btn btn-primary" type="submit" style="margin-top: 10px;"></form>
         </div>
     </section>
+    <section style="margin: 20px;height: 40px;text-align: center;margin-top: 40px;">
+        <div>
+            <p style="color: #ffffff;">Copyright © ShakeCities 2023</p>
+        </div>
+    </section>
     <script src="assets/bootstrap/js/bootstrap.min.js"></script>
+    <script src="assets/js/script.min.js"></script>
 </body>
 
 </html>

templates/signup.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html data-bs-theme="light" lang="en">
+<html data-bs-theme="light" lang="en" style="background: #000000;">
 
 <head>
     <meta charset="utf-8">
@@ -9,22 +9,19 @@
     <link rel="stylesheet" href="assets/css/styles.min.css">
 </head>
 
-<body>
-    <nav class="navbar navbar-expand-md bg-dark py-3" data-bs-theme="dark">
-        <div class="container"><a class="navbar-brand d-flex align-items-center" href="/"><span class="bs-icon-sm bs-icon-rounded bs-icon-primary d-flex justify-content-center align-items-center me-2 bs-icon"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-bezier">
-                        <path fill-rule="evenodd" d="M0 10.5A1.5 1.5 0 0 1 1.5 9h1A1.5 1.5 0 0 1 4 10.5v1A1.5 1.5 0 0 1 2.5 13h-1A1.5 1.5 0 0 1 0 11.5v-1zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1zm10.5.5A1.5 1.5 0 0 1 13.5 9h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1a1.5 1.5 0 0 1-1.5-1.5v-1zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1zM6 4.5A1.5 1.5 0 0 1 7.5 3h1A1.5 1.5 0 0 1 10 4.5v1A1.5 1.5 0 0 1 8.5 7h-1A1.5 1.5 0 0 1 6 5.5v-1zM7.5 4a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1z"></path>
-                        <path d="M6 4.5H1.866a1 1 0 1 0 0 1h2.668A6.517 6.517 0 0 0 1.814 9H2.5c.123 0 .244.015.358.043a5.517 5.517 0 0 1 3.185-3.185A1.503 1.503 0 0 1 6 5.5v-1zm3.957 1.358A1.5 1.5 0 0 0 10 5.5v-1h4.134a1 1 0 1 1 0 1h-2.668a6.517 6.517 0 0 1 2.72 3.5H13.5c-.123 0-.243.015-.358.043a5.517 5.517 0 0 0-3.185-3.185z"></path>
-                    </svg></span><span>Brand</span></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-6"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
-            <div class="collapse navbar-collapse flex-grow-0 order-md-first" id="navcol-6">
-                <ul class="navbar-nav me-auto">
-                    <li class="nav-item"><a class="nav-link active" href="/signup">Create your page</a></li>
-                    <li class="nav-item"><a class="nav-link" href="/edit">Edit your page</a></li>
-                </ul>
-                <div class="d-md-none my-2"><button class="btn btn-light me-2" type="button">Button</button><button class="btn btn-primary" type="button">Button</button></div>
-            </div>
-            <div class="d-none d-md-block"><a class="btn btn-primary" role="button" href="/{{account_link}}">{{account}}</a></div>
-        </div>
-    </nav>
+<body style="background: #000000;width: 95%;margin: auto;">
+    <section>
+        <section style="height: 15vh;background: url(&quot;assets/img/alexander-slattery-LI748t0BK8w-unsplash.webp&quot;) bottom / cover no-repeat;min-height: 130px;"></section>
+        <section class="d-print-none d-lg-none d-xl-none d-xxl-none" style="width: 30vw;border-radius: 50%;background: #000000;padding: 20px;height: 30vw;margin: auto;margin-top: -15vw;display: flex;"><img class="img-fluid" src="assets/img/HNSW.png" width="100%"></section>
+        <section class="d-print-none d-lg-none d-xl-none d-xxl-none" style="display: block;width: 100%;text-align: center;margin-top: 10px;">
+            <div style="display: inline-block;margin: auto;"><a class="btn btn-primary" role="button" style="margin: 10px;" href="/signup">Create your page</a><a class="btn btn-primary" role="button" style="margin: 10px;" href="/{{account_link}}">{{account}}</a></div>
+        </section>
+        <section class="d-none d-print-block d-lg-block d-xl-block d-xxl-block" style="display: block;">
+            <div style="width: 100%;text-align: right;margin-top: -4em;"><a class="btn btn-primary" role="button" style="margin: 10px;" href="/signup">Create a new page</a><a class="btn btn-primary" role="button" style="margin: 10px;" href="/{{account_link}}">{{account_link_name}}</a></div>
+        </section>
+        <section class="d-none d-print-block d-lg-block d-xl-block d-xxl-block" style="width: 15vw;border-radius: 50%;background: #000000;padding: 20px;height: 15vw;margin: auto;display: flex;margin-top: -6vw;"><img class="img-fluid" src="assets/img/HNSW.png" width="100%"></section>
+        <section class="d-none d-print-block d-lg-block d-xl-block d-xxl-block" style="height: 3em;"></section>
+    </section>
     <section style="width: 50%;margin: auto;margin-top: 50px;">
         <div class="card bg-dark" style="padding-bottom: 40px;">
             <div class="card-body">
@@ -35,7 +32,13 @@
             </form>
         </div>
     </section>
+    <section style="margin: 20px;height: 40px;text-align: center;margin-top: 40px;">
+        <div>
+            <p style="color: #ffffff;">Copyright © ShakeCities 2023</p>
+        </div>
+    </section>
     <script src="assets/bootstrap/js/bootstrap.min.js"></script>
+    <script src="assets/js/script.min.js"></script>
 </body>
 
 </html>