feat: Add more colour control

main.py

@@ -104,6 +104,8 @@ def edit():
     location = ""
     avatar = ""
     bg_colour = ""
+    fg_colour = ""
+    text_colour = ""
 
     if 'data' in data:
         html = data['data'].encode('utf-8').decode('unicode-escape')
@@ -121,10 +123,15 @@ def edit():
         avatar = data['avatar']
     if 'bg_colour' in data:
         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,
                            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'])
@@ -150,6 +157,8 @@ def send_edit():
     data['location'] = request.form['location']
     data['avatar'] = request.form['avatar']
     data['bg_colour'] = request.form['bg_colour']
+    data['fg_colour'] = request.form['fg_colour']
+    data['text_colour'] = request.form['text_colour']
 
     # Convert to json
     data = json.dumps(data)

sites/slds.py

@@ -59,9 +59,9 @@ def clean_template():
     with open('templates/city.html') as f:
         data = f.read()
     
-    data = data.replace('#f1ffff', '{{bg_colour}}')
+    data = data.replace('#f1ffff', '{{fg_colour}}')
     data = data.replace('#1fffff', '{{text_colour}}')
-    data = data.replace('#000000', '{{text_colour}}')
+    data = data.replace('#000000', '{{bg_colour}}')
     # Save
     with open('templates/city.html', 'w') as f:
         f.write(data)

sites/website.py

@@ -23,14 +23,10 @@ def render(data,db_object):
         return "<h1>Invalid HTML</h1><br>" + str(e)
     
     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:
         avatar = db_object['avatar']
@@ -39,13 +35,17 @@ def render(data,db_object):
         hns = db_object['HNS']
         btc = db_object['BTC']
         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:
         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,
-                           avatar=avatar,main_domain=main_domain,
+                            fg_colour=fg_colour, avatar=avatar,main_domain=main_domain,
                            hnschat=hnschat,location=location, hns_icon=hns_icon,
                            hns=hns,btc=btc,eth=eth, data=html)
     
@@ -75,15 +75,14 @@ def calculate_contrast_ratio(color1, color2):
     return contrast_ratio
 
 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)
 
-    # Adjust the contrast color based on the contrast ratio
     if ratio < 4.5:
-        # If the contrast ratio is below the threshold, use black as the foreground color
         return (0, 0, 0)  # Black
     else:
         return contrast_color

templates/city.html

@@ -52,6 +52,7 @@
             <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>

templates/edit.html

@@ -34,7 +34,9 @@
     </section>
     <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}}">
-            <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 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;">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}}"><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>