feat: Add more colour control
This commit is contained in:
parent
c5cc90daac
commit
8b3e0d4cab
11
main.py
11
main.py
@ -104,6 +104,8 @@ def edit():
|
|||||||
location = ""
|
location = ""
|
||||||
avatar = ""
|
avatar = ""
|
||||||
bg_colour = ""
|
bg_colour = ""
|
||||||
|
fg_colour = ""
|
||||||
|
text_colour = ""
|
||||||
|
|
||||||
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')
|
||||||
@ -121,10 +123,15 @@ def edit():
|
|||||||
avatar = data['avatar']
|
avatar = data['avatar']
|
||||||
if 'bg_colour' in data:
|
if 'bg_colour' in data:
|
||||||
bg_colour = data['bg_colour']
|
bg_colour = data['bg_colour']
|
||||||
|
if 'fg_colour' in data:
|
||||||
|
fg_colour = data['fg_colour']
|
||||||
|
if 'text_colour' in data:
|
||||||
|
text_colour = data['text_colour']
|
||||||
|
|
||||||
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,location=location,avatar=avatar,
|
hns=hns,btc=btc,eth=eth,hnschat=hnschat,location=location,avatar=avatar,
|
||||||
bg_colour=bg_colour,CITY_DOMAIN=CITY_DOMAIN,domain=user['domain'])
|
bg_colour=bg_colour,fg_colour=fg_colour,text_colour=text_colour,
|
||||||
|
CITY_DOMAIN=CITY_DOMAIN,domain=user['domain'])
|
||||||
|
|
||||||
|
|
||||||
@app.route('/edit', methods=['POST'])
|
@app.route('/edit', methods=['POST'])
|
||||||
@ -150,6 +157,8 @@ def send_edit():
|
|||||||
data['location'] = request.form['location']
|
data['location'] = request.form['location']
|
||||||
data['avatar'] = request.form['avatar']
|
data['avatar'] = request.form['avatar']
|
||||||
data['bg_colour'] = request.form['bg_colour']
|
data['bg_colour'] = request.form['bg_colour']
|
||||||
|
data['fg_colour'] = request.form['fg_colour']
|
||||||
|
data['text_colour'] = request.form['text_colour']
|
||||||
|
|
||||||
# Convert to json
|
# Convert to json
|
||||||
data = json.dumps(data)
|
data = json.dumps(data)
|
||||||
|
@ -59,9 +59,9 @@ def clean_template():
|
|||||||
with open('templates/city.html') as f:
|
with open('templates/city.html') as f:
|
||||||
data = f.read()
|
data = f.read()
|
||||||
|
|
||||||
data = data.replace('#f1ffff', '{{bg_colour}}')
|
data = data.replace('#f1ffff', '{{fg_colour}}')
|
||||||
data = data.replace('#1fffff', '{{text_colour}}')
|
data = data.replace('#1fffff', '{{text_colour}}')
|
||||||
data = data.replace('#000000', '{{text_colour}}')
|
data = data.replace('#000000', '{{bg_colour}}')
|
||||||
# Save
|
# Save
|
||||||
with open('templates/city.html', 'w') as f:
|
with open('templates/city.html', 'w') as f:
|
||||||
f.write(data)
|
f.write(data)
|
||||||
|
@ -23,14 +23,10 @@ def render(data,db_object):
|
|||||||
return "<h1>Invalid HTML</h1><br>" + str(e)
|
return "<h1>Invalid HTML</h1><br>" + str(e)
|
||||||
|
|
||||||
bg_colour = db_object['bg_colour']
|
bg_colour = db_object['bg_colour']
|
||||||
hex_colour = bg_colour.lstrip('#')
|
fg_colour = db_object['fg_colour']
|
||||||
text_colour = generate_foreground_color(tuple(int(hex_colour[i:i+2], 16) for i in (0, 2, 4)))
|
text_colour = db_object['text_colour']
|
||||||
text_colour = rgb_to_hex(text_colour)
|
|
||||||
|
|
||||||
if (text_colour == "#000000"):
|
|
||||||
hns_icon = "assets/img/HNS.png"
|
|
||||||
else:
|
|
||||||
hns_icon = "assets/img/HNSW.png"
|
|
||||||
|
|
||||||
try:
|
try:
|
||||||
avatar = db_object['avatar']
|
avatar = db_object['avatar']
|
||||||
@ -39,13 +35,17 @@ def render(data,db_object):
|
|||||||
hns = db_object['HNS']
|
hns = db_object['HNS']
|
||||||
btc = db_object['BTC']
|
btc = db_object['BTC']
|
||||||
eth = db_object['ETH']
|
eth = db_object['ETH']
|
||||||
|
if (rgb_to_hex(generate_foreground_color(fg_colour)) == ""):
|
||||||
|
hns_icon = "assets/img/HNSW.png"
|
||||||
|
else:
|
||||||
|
hns_icon = "assets/img/HNS.png"
|
||||||
|
|
||||||
except Exception as e:
|
except Exception as e:
|
||||||
return "<h1>Invalid data</h1><br><h2>Please contact support</h2><br>" + str(e)
|
return "<h1>Invalid data</h1><br><h2>Please contact support</h2><br>" + str(e)
|
||||||
|
|
||||||
|
|
||||||
return render_template('city.html',html=html,bg_colour=bg_colour,text_colour=text_colour,
|
return render_template('city.html',html=html,bg_colour=bg_colour,text_colour=text_colour,
|
||||||
avatar=avatar,main_domain=main_domain,
|
fg_colour=fg_colour, avatar=avatar,main_domain=main_domain,
|
||||||
hnschat=hnschat,location=location, hns_icon=hns_icon,
|
hnschat=hnschat,location=location, hns_icon=hns_icon,
|
||||||
hns=hns,btc=btc,eth=eth, data=html)
|
hns=hns,btc=btc,eth=eth, data=html)
|
||||||
|
|
||||||
@ -75,15 +75,14 @@ def calculate_contrast_ratio(color1, color2):
|
|||||||
return contrast_ratio
|
return contrast_ratio
|
||||||
|
|
||||||
def generate_foreground_color(background_color):
|
def generate_foreground_color(background_color):
|
||||||
# A color with a high contrast ratio against the background color
|
# Convert to RGB tuple
|
||||||
contrast_color = (255, 255, 255) # White
|
background_color=background_color.lstrip('#')
|
||||||
|
background_color = tuple(int(background_color[i:i+2], 16) for i in (0, 2, 4))
|
||||||
|
|
||||||
# Calculate the contrast ratio
|
contrast_color = (255, 255, 255) # White
|
||||||
ratio = calculate_contrast_ratio(background_color, contrast_color)
|
ratio = calculate_contrast_ratio(background_color, contrast_color)
|
||||||
|
|
||||||
# Adjust the contrast color based on the contrast ratio
|
|
||||||
if ratio < 4.5:
|
if ratio < 4.5:
|
||||||
# If the contrast ratio is below the threshold, use black as the foreground color
|
|
||||||
return (0, 0, 0) # Black
|
return (0, 0, 0) # Black
|
||||||
else:
|
else:
|
||||||
return contrast_color
|
return contrast_color
|
||||||
|
@ -52,6 +52,7 @@
|
|||||||
<p class="align-self-baseline" style="color: #f1ffff;">Powered by <a href="https://{{main_domain}}" target="_blank">ShakeCities</a></p>
|
<p class="align-self-baseline" style="color: #f1ffff;">Powered by <a href="https://{{main_domain}}" target="_blank">ShakeCities</a></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div style="height: 10px;"></div>
|
||||||
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
|
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
|
||||||
<script src="assets/js/script.min.js"></script>
|
<script src="assets/js/script.min.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
@ -34,7 +34,9 @@
|
|||||||
</section>
|
</section>
|
||||||
<section style="width: 80%;margin: auto;">
|
<section style="width: 80%;margin: auto;">
|
||||||
<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}}">
|
<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 </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 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 </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 </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 </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}}"><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>
|
<div style="text-align: center;"><input class="btn btn-primary" type="submit" style="margin-top: 10px;"></div>
|
||||||
</form>
|
</form>
|
||||||
</section>
|
</section>
|
||||||
|
Loading…
Reference in New Issue
Block a user