feat: Add option for selecting template
All checks were successful
Build Docker / Build SLDs Image (push) Successful in 19s
Build Docker / Build Main Image (push) Successful in 19s

This commit is contained in:
Nathan Woodburn 2023-11-18 13:21:38 +11:00
parent 4a21cf9a5a
commit ca10141843
Signed by: nathanwoodburn
GPG Key ID: 203B000478AD0EF1
7 changed files with 150 additions and 47 deletions

13
main.py
View File

@ -33,6 +33,9 @@ if IMAGE_LOCATION == None:
random_sites = "" random_sites = ""
# Templates available for user
templates = ['Standard', 'Original']
#Assets routes #Assets routes
@app.route('/assets/<path:path>') @app.route('/assets/<path:path>')
def assets(path): def assets(path):
@ -134,6 +137,7 @@ def edit():
fg_colour = "" fg_colour = ""
text_colour = "" text_colour = ""
email = "" email = ""
template = ""
if 'data' in data: if 'data' in data:
html = data['data'].encode('utf-8').decode('unicode-escape') html = data['data'].encode('utf-8').decode('unicode-escape')
@ -165,10 +169,14 @@ def edit():
if 'email' in data: if 'email' in data:
email = data['email'] email = data['email']
if 'template' in data:
selected_template = data['template']
return render_template('edit.html',account=user['email'],account_link="account",account_link_name="Account",data=html, 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,email=email,location=location,avatar=avatar, hns=hns,btc=btc,eth=eth,hnschat=hnschat,email=email,location=location,avatar=avatar,
bg_colour=bg_colour,fg_colour=fg_colour,text_colour=text_colour, bg_colour=bg_colour,fg_colour=fg_colour,text_colour=text_colour,templates=templates,
CITY_DOMAIN=CITY_DOMAIN,domain=user['domain']) selected_template=selected_template,CITY_DOMAIN=CITY_DOMAIN,domain=user['domain'])
@app.route('/edit', methods=['POST']) @app.route('/edit', methods=['POST'])
@ -196,6 +204,7 @@ def send_edit():
data['fg_colour'] = request.form['fg_colour'] data['fg_colour'] = request.form['fg_colour']
data['text_colour'] = request.form['text_colour'] data['text_colour'] = request.form['text_colour']
data['email'] = request.form['email'] data['email'] = request.form['email']
data['template'] = request.form['template']
# Convert to json # Convert to json
data = json.dumps(data) data = json.dumps(data)

View File

@ -54,17 +54,20 @@ def catch_all(path):
def not_found(e): def not_found(e):
return redirect('/') return redirect('/')
def clean_template(): def clean_templates():
# Clean template # Clean template
with open('templates/city.html') as f: for file in os.listdir('templates'):
data = f.read() if file.endswith('.html'):
with open('templates/' + file) as f:
data = data.replace('#f1ffff', '{{fg_colour}}') data = f.read()
data = data.replace('#1fffff', '{{text_colour}}')
data = data.replace('#000000', '{{bg_colour}}') data = data.replace('#f1ffff', '{{fg_colour}}')
# Save data = data.replace('#1fffff', '{{text_colour}}')
with open('templates/city.html', 'w') as f: data = data.replace('#000000', '{{bg_colour}}')
f.write(data) # Save
with open('templates/' + file, 'w') as f:
f.write(data)
print("Cleaned " + file, flush=True)
print("Cleaned template", flush=True) print("Cleaned template", flush=True)
if __name__ == '__main__': if __name__ == '__main__':

View File

@ -25,7 +25,7 @@ class GunicornApp(BaseApplication):
if __name__ == '__main__': if __name__ == '__main__':
print("Cleaning template...", flush=True) print("Cleaning template...", flush=True)
slds.clean_template() slds.clean_templates()
workers = os.getenv('WORKERS') workers = os.getenv('WORKERS')
threads = os.getenv('THREADS') threads = os.getenv('THREADS')
if workers is None: if workers is None:

View File

@ -66,9 +66,17 @@ def render(data,db_object):
if email != "": if email != "":
email = "<a href='mailto:"+email+"'><img src='"+email_icon+"' width='30px' height='20px' style='margin-right: 5px;margin-left:-10px;'>" + email + "</a>" email = "<a href='mailto:"+email+"'><img src='"+email_icon+"' width='30px' height='20px' style='margin-right: 5px;margin-left:-10px;'>" + email + "</a>"
if avatar != "":
avatar = "<img src='"+avatar+"' width='200vw' height='200vw' style='border-radius: 50%;margin-right: 5px;'>"
else:
avatar = "<h1>" + request.host.split(':')[0] + "/</h1>"
if 'template' in db_object:
if db_object['template'] != "":
return render_template(get_template(db_object['template']),bg_colour=bg_colour,text_colour=text_colour,
fg_colour=fg_colour, avatar=avatar,main_domain=main_domain,
hnschat=hnschat,email=email,location=location, hns_icon=hns_icon,
hns=hns,btc=btc,eth=eth, data=html)
except Exception as e: except Exception as e:
return "<h1>Invalid data</h1><br><h2>Please contact support</h2><br><p>This can often be fixed by saving your site again in the editor</p><br>" + "<script>console.log('" + str(e).replace('\'','') + "');</script>" return "<h1>Invalid data</h1><br><h2>Please contact support</h2><br><p>This can often be fixed by saving your site again in the editor</p><br>" + "<script>console.log('" + str(e).replace('\'','') + "');</script>"
@ -120,3 +128,9 @@ def generate_foreground_color(background_color):
def rgb_to_hex(rgb_color): def rgb_to_hex(rgb_color):
return "#{:02x}{:02x}{:02x}".format(*rgb_color) return "#{:02x}{:02x}{:02x}".format(*rgb_color)
def get_template(template):
if template == "Original":
return "city-old.html"
return "city.html"

79
templates/city-old.html Normal file
View File

@ -0,0 +1,79 @@
<!DOCTYPE html>
<html data-bs-theme="light" lang="en" style="width: 100vw;height: 99vh;">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>ShakeCities</title>
<meta name="twitter:description" content="Unlock web ownership's future with ShakeCities! Create your free, secure Handshake domain site. Integrate crypto payments, explore HNSChat, and join us in shaping the decentralized web!">
<meta name="description" content="Unlock web ownership's future with ShakeCities! Create your free, secure Handshake domain site. Integrate crypto payments, explore HNSChat, and join us in shaping the decentralized web!">
<meta name="twitter:card" content="summary">
<meta property="og:type" content="website">
<meta property="og:image" content="https://shakecities.com/assets/img/alexander-slattery-LI748t0BK8w-unsplash.webp">
<meta property="og:title" content="ShakeCities">
<meta name="twitter:title" content="ShakeCities">
<meta name="twitter:image" content="https://shakecities.com/assets/img/alexander-slattery-LI748t0BK8w-unsplash.webp">
<meta property="og:description" content="Unlock web ownership's future with ShakeCities! Create your free, secure Handshake domain site. Integrate crypto payments, explore HNSChat, and join us in shaping the decentralized web!">
<link rel="icon" type="image/png" sizes="670x700" href="assets/img/HNS.png">
<link rel="icon" type="image/png" sizes="670x700" href="assets/img/HNSW.png" media="(prefers-color-scheme: dark)">
<link rel="icon" type="image/png" sizes="670x700" href="assets/img/HNS.png">
<link rel="icon" type="image/png" sizes="670x700" href="assets/img/HNSW.png" media="(prefers-color-scheme: dark)">
<link rel="icon" type="image/png" sizes="670x700" href="assets/img/HNS.png">
<link rel="icon" type="image/png" sizes="670x700" href="assets/img/HNS.png">
<link rel="icon" type="image/png" sizes="670x700" href="assets/img/HNS.png">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/styles.min.css">
</head>
<body style="height: 99vh;width: 100vw;color: #1fffff;background: #000000;overflow-x: hidden;">
<div style="margin: 10px;">
<div class="row row-cols-1 row-cols-sm-1 row-cols-md-1 row-cols-lg-1 row-cols-xl-2 row-cols-xxl-2 justify-content-center align-items-center" style="margin: 0px;">
<div class="col text-center align-self-center m-auto">
<div class="d-xl-flex align-items-xl-center" style="background: #f1ffff;padding: 10px;border-radius: 10px;">
<div>{{avatar|safe}}</div>
<div class="d-none d-sm-none d-md-none d-lg-none d-xl-block d-xxl-block" style="width: 40px;"></div>
<div>
<div>
<p style="font-size: 24px;">{{hnschat|safe}}</p>
</div>
<div>
<p style="font-size: 24px;">{{email|safe}}</p>
</div>
<div>
<p style="font-size: 24px;">{{location|safe}}</p>
</div>
</div>
</div>
</div>
<div class="col text-center align-self-center m-auto">
<div class="d-xl-flex align-items-xl-center" style="background: #f1ffff;padding: 10px;border-radius: 10px;">
<div>
<div>
<p style="font-size: 24px;margin-bottom: 0px;"><a href="/.well-known/wallets/HNS" target="_blank">{{hns|safe}}</a></p>
</div>
<div>
<p style="font-size: 24px;margin-bottom: 0px;"><a href="/.well-known/wallets/BTC" target="_blank">{{btc|safe}}</a></p>
</div>
<div>
<p style="font-size: 24px;margin-bottom: 0px;"><a href="/.well-known/wallets/ETH" target="_blank">{{eth|safe}}</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="background: #f1ffff;border-radius: 10px;padding-top: 2%;padding-left: 2%;padding-right: 2%;padding-bottom: 2%;margin: 22px;">
<p style="font-size: 24px;">{{data|safe}}</p>
</div>
<div class="d-flex justify-content-xl-start align-items-xl-center" style="margin-right: 1%;margin-left: 1%;height: 6%;margin-top: 0.5%;">
<div class="d-inline-block d-print-inline-block d-sm-none d-md-none d-lg-none d-xl-inline-block d-xxl-inline-block" style="display: inline-flex;width: 3vw;height: 3vw;background: #f1ffff;padding: 4px;border-radius: 50%;"><img src="{{hns_icon}}" width="100%" height="100%"></div>
<div class="d-xl-flex align-items-xl-center" style="display: inline-flex;padding: 1%;height: 100%;margin-left: 2%;">
<p class="align-self-baseline" style="color: #f1ffff;">Powered by <a href="https://{{main_domain}}" target="_blank">ShakeCities</a></p>
</div>
</div>
<div style="height: 10px;"></div>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/script.min.js"></script>
</body>
</html>

View File

@ -26,44 +26,37 @@
</head> </head>
<body style="height: 99vh;width: 100vw;color: #1fffff;background: #000000;overflow-x: hidden;"> <body style="height: 99vh;width: 100vw;color: #1fffff;background: #000000;overflow-x: hidden;">
<div style="margin: 10px;"> <div class="text-center" style="margin: 10px;">
<div class="row row-cols-1 row-cols-sm-1 row-cols-md-1 row-cols-lg-1 row-cols-xl-2 row-cols-xxl-2 justify-content-center align-items-center" style="margin: 0px;"> <div>{{avatar|safe}}</div>
<div class="col text-center align-self-center m-auto"> <div>
<div class="d-xl-flex align-items-xl-center" style="background: #f1ffff;padding: 10px;border-radius: 10px;"><img src="{{avatar}}" width="200vw" height="200vw" style="border-radius: 50%;"> <div>
<div class="d-none d-sm-none d-md-none d-lg-none d-xl-block d-xxl-block" style="width: 40px;"></div> <p style="font-size: 24px;">{{hnschat|safe}}</p>
<div>
<div>
<p style="font-size: 24px;">{{hnschat|safe}}</p>
</div>
<div>
<p style="font-size: 24px;">{{email|safe}}</p>
</div>
<div>
<p style="font-size: 24px;">{{location|safe}}</p>
</div>
</div>
</div>
</div> </div>
<div class="col text-center align-self-center m-auto"> <div>
<div class="d-xl-flex align-items-xl-center" style="background: #f1ffff;padding: 10px;border-radius: 10px;"> <p style="font-size: 24px;">{{email|safe}}</p>
<div> </div>
<div> <div>
<p style="font-size: 24px;margin-bottom: 0px;"><a href="/.well-known/wallets/HNS" target="_blank">{{hns|safe}}</a></p> <p style="font-size: 24px;">{{location|safe}}</p>
</div>
<div>
<p style="font-size: 24px;margin-bottom: 0px;"><a href="/.well-known/wallets/BTC" target="_blank">{{btc|safe}}</a></p>
</div>
<div>
<p style="font-size: 24px;margin-bottom: 0px;"><a href="/.well-known/wallets/ETH" target="_blank">{{eth|safe}}</a></p>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
<div style="background: #f1ffff;border-radius: 10px;padding-top: 2%;padding-left: 2%;padding-right: 2%;padding-bottom: 2%;margin: 22px;"> <div style="background: #f1ffff;border-radius: 10px;padding: 25px;padding-top: 2%;padding-left: 2%;padding-right: 2%;padding-bottom: 2%;margin: 22px;">
<p style="font-size: 24px;">{{data|safe}}</p> <p style="font-size: 24px;">{{data|safe}}</p>
</div> </div>
<div class="text-center" style="background: #f1ffff;padding: 25px;border-radius: 10px;margin: 22px;">
<h1>Donate</h1>
<div>
<div>
<p style="font-size: 24px;margin-bottom: 0px;"><a href="/.well-known/wallets/HNS" target="_blank">{{hns|safe}}</a></p>
</div>
<div>
<p style="font-size: 24px;margin-bottom: 0px;"><a href="/.well-known/wallets/BTC" target="_blank">{{btc|safe}}</a></p>
</div>
<div>
<p style="font-size: 24px;margin-bottom: 0px;"><a href="/.well-known/wallets/ETH" target="_blank">{{eth|safe}}</a></p>
</div>
</div>
</div>
<div class="d-flex justify-content-xl-start align-items-xl-center" style="margin-right: 1%;margin-left: 1%;height: 6%;margin-top: 0.5%;"> <div class="d-flex justify-content-xl-start align-items-xl-center" style="margin-right: 1%;margin-left: 1%;height: 6%;margin-top: 0.5%;">
<div class="d-inline-block d-print-inline-block d-sm-none d-md-none d-lg-none d-xl-inline-block d-xxl-inline-block" style="display: inline-flex;width: 3vw;height: 3vw;background: #f1ffff;padding: 4px;border-radius: 50%;"><img src="{{hns_icon}}" width="100%" height="100%"></div> <div class="d-inline-block d-print-inline-block d-sm-none d-md-none d-lg-none d-xl-inline-block d-xxl-inline-block" style="display: inline-flex;width: 3vw;height: 3vw;background: #f1ffff;padding: 4px;border-radius: 50%;"><img src="{{hns_icon}}" width="100%" height="100%"></div>
<div class="d-xl-flex align-items-xl-center" style="display: inline-flex;padding: 1%;height: 100%;margin-left: 2%;"> <div class="d-xl-flex align-items-xl-center" style="display: inline-flex;padding: 1%;height: 100%;margin-left: 2%;">

View File

@ -49,6 +49,11 @@
<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> <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>
<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;">Foreground colour&nbsp;</label><input class="form-control form-control-color" type="color" style="display: inline-block;border-radius: 50%;width: 50px;height: 50px;" name="fg_colour" value="{{fg_colour}}"></div> <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;">Foreground colour&nbsp;</label><input class="form-control form-control-color" type="color" style="display: inline-block;border-radius: 50%;width: 50px;height: 50px;" name="fg_colour" value="{{fg_colour}}"></div>
<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;">Text colour&nbsp;</label><input class="form-control form-control-color" type="color" style="display: inline-block;border-radius: 50%;width: 50px;height: 50px;" name="text_colour" value="{{text_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}}" required="" pattern="hs1[A-Za-z0-9]+"><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}}" required="" pattern="0x[A-Za-z0-9]+"> <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;">Text colour&nbsp;</label><input class="form-control form-control-color" type="color" style="display: inline-block;border-radius: 50%;width: 50px;height: 50px;" name="text_colour" value="{{text_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}}" required="" pattern="hs1[A-Za-z0-9]+"><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}}" required="" pattern="0x[A-Za-z0-9]+">
<div style="margin-top: 10px;"><label class="form-label" style="margin-right: 25px;">Template</label><select class="form-select" id="template" name="template" style="width:auto;display:inline-block;">
{% for template in templates %}
<option value="{{ template }}" {% if template == selected_template %}selected{% endif %}>{{ template }}</option>
{% endfor %}
</select></div>
<div style="text-align: center;"><input class="btn btn-primary" type="submit" style="margin-top: 10px;"></div> <div style="text-align: center;"><input class="btn btn-primary" type="submit" style="margin-top: 10px;"></div>
</form> </form>
</section> </section>