custom profile card themes

colours are all stored in the member table so they can be personal. maybe the form can be expanded so hex codes can be copy pasted between member profiles. idc about that rn though. also the style tag inside the index.html and full.html will flag a gazillion errors in vscode or any competent editor because it isnt technically valid css but ignore all of that. god bless

myriad/home.py

@@ -11,8 +11,8 @@ bp = Blueprint('home', __name__)
 @bp.route('/')
 def index():
     db = get_db()
-    fronters = db.execute("SELECT * FROM member WHERE front=(?)",(1,)).fetchall()
-    homepage = db.execute("SELECT * FROM member WHERE homepage=(?)",(1,)).fetchall()
+    fronters = db.execute("SELECT * FROM member WHERE front=(?) ORDER BY member_name",(1,)).fetchall()
+    homepage = db.execute("SELECT * FROM member WHERE homepage=(?) ORDER BY member_name",(1,)).fetchall()
 
     icons={}
     for member in homepage:

myriad/manage.py

@@ -85,6 +85,25 @@ def edit(mid):
 
             # the above cleanup operations should be a button in the manage sidebar but for now they are here.
 
+        if "c9" in request.form:
+            c9 = request.form["c9"]
+            c10 = request.form["c10"]
+            c11 = request.form["c11"]
+            c12 = request.form["c12"]
+            c13 = request.form["c13"]
+            c14 = request.form["c14"]
+            c15 = request.form["c15"]
+            c16 = request.form["c16"]
+            #c17 = request.form["c17"]
+            #c18 = request.form["c18"]
+            #c19 = request.form["c19"]
+            #c20 = request.form["c20"]
+            c21 = request.form["c21"]
+            c22 = request.form["c22"]
+
+            db.execute("UPDATE member SET card_border=(?), card_bg=(?), heading_bg=(?), heading_border=(?), heading_name=(?), heading_subtitle=(?), card_text=(?), icon_border=(?), a1=(?), a2=(?) WHERE id=(?)",(c9, c10, c11, c12, c13, c14, c15, c16, c21, c22, mid))
+            db.commit()
+
 
         member = db.execute("SELECT * FROM member WHERE id=(?)",(mid,)).fetchone()
         icons = db.execute("SELECT * FROM icons WHERE member_id=(?)",(mid,)).fetchall()

myriad/schema.sql

@@ -4,8 +4,6 @@ DROP TABLE IF EXISTS icons;
 DROP TABLE IF EXISTS groups;
 DROP TABLE IF EXISTS group_members;
 DROP TABLE IF EXISTS pages;
-DROP TABLE IF EXISTS themes;
-DROP TABLE IF EXISTS member_themes;
 
 CREATE TABLE user (
   id INTEGER PRIMARY KEY AUTOINCREMENT,
@@ -23,6 +21,20 @@ CREATE TABLE member (
   main_icon INTEGER,
   homepage BOOLEAN NOT NULL DEFAULT 0,
   front BOOLEAN NOT NULL DEFAULT 0,
+  card_border TEXT NOT NULL DEFAULT '#99dfff',
+  card_bg TEXT NOT NULL DEFAULT '#e6f7ff',
+  heading_bg TEXT NOT NULL DEFAULT '#b3e7ff',
+  heading_border TEXT NOT NULL DEFAULT '#008bcc',
+  heading_name TEXT NOT NULL DEFAULT 'black',
+  heading_subtitle TEXT NOT NULL DEFAULT 'black',
+  card_text TEXT NOT NULL DEFAULT 'black',
+  icon_border TEXT NOT NULL DEFAULT '#008bcc',
+  page_bg TEXT NOT NULL DEFAULT '#00b7ff',
+  gradient1 TEXT NOT NULL DEFAULT '#00b7ff',
+  gradient2 TEXT NOT NULL DEFAULT '#57c785',
+  gradient3 TEXT NOT NULL DEFAULT '#eddd53',
+  a1 TEXT NOT NULL DEFAULT '#008bcc',
+  a2 TEXT NOT NULL DEFAULT '#026897',
   FOREIGN KEY (user_id) REFERENCES user (id),
   FOREIGN KEY (main_icon) REFERENCES icons (id)
 );
@@ -53,22 +65,4 @@ CREATE TABLE pages (
   member_id INTEGER NOT NULL,
   page_location TEXT NOT NULL,
   FOREIGN KEY (member_id) REFERENCES member (id)
-);
-
-CREATE TABLE themes (
-  id INTEGER PRIMARY KEY AUTOINCREMENT,
-  theme_name TEXT NOT NULL,
-  color1 TEXT NOT NULL,
-  color2 TEXT NOT NULL,
-  color3 TEXT NOT NULL,
-  color4 TEXT NOT NULL,
-  color5 TEXT NOT NULL
-);
-
-CREATE TABLE member_themes (
-  id INTEGER PRIMARY KEY AUTOINCREMENT,
-  theme_id INTEGER NOT NULL,
-  member_id INTEGER NOT NULL,
-  FOREIGN KEY (theme_id) REFERENCES themes (id),
-  FOREIGN KEY (member_id) REFERENCES member (id)
 );

myriad/static/style.css

@@ -5,7 +5,7 @@
 
 body{
     background: #00b7ff;
-    background: linear-gradient(90deg, rgba(0, 183, 255, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(237, 221, 83, 1) 100%);
+    background: linear-gradient(90deg, #00b7ff 0%, #57c785 50%, #eddd53 100%);
     font-family:monospace;
     font-size:12px; 
     scrollbar-color:#008bcc #b3e7ff;

myriad/templates/base.html

@@ -14,7 +14,6 @@
     {% if g.user %}
     <div class="heading">Manage</div>
     <div class="navitem">> <a href="{{ url_for('manage.new') }}">Add New Member</a></div>
-    <div class="navitem">> <a href="">Profile Themes</a></div>
     {% endif %}
 
     <div class="heading">Administration</div>

myriad/templates/full.html

@@ -9,21 +9,58 @@
     <div class="maintext">
         jump to:<br>
         {% for member in memberlist %}
-        <a href="#{{ member[0] }}">{{ member[3] }}</a> | 
+        <a href="#m{{ member[0] }}">{{ member[3] }}</a> | 
         {% endfor %}
     </div>
   
     {% for member in memberlist %}
 
-    <div class="profile" id="{{ member[0] }}">
-        <div class="heading"><b>{{ member[3] }}</b> {{ member[4] }}</div>
+    <style>
+        #m{{member[0]}}{
+            background-color:{{member[10]}};
+	        border-color:{{member[9]}};
+            color:{{member[15]}};
+        }
+        #m{{member[0]}} .heading
+        {
+            background-color:{{member[11]}};
+            border-color:{{member[12]}};
+            color:{{member[14]}};
+        }
+        #m{{member[0]}} .heading b
+        {
+            color:{{member[13]}};
+        }
+        #m{{member[0]}} a{
+            color: {{member[21]}};
+        }
+        #m{{member[0]}} a:hover{
+            color: {{member[22]}};
+        }
+        #m{{member[0]}} ::selection {
+            background: {{member[12]}};
+            color: white;
+            text-shadow: none;
+        }
+        #m{{member[0]}} ::-moz-selection {
+            background: {{member[12]}};
+            color: #EEE;
+            text-shadow: none;
+        }
+        #m{{member[0]}} .icon{
+            border-color:{{member[16]}};
+        }
+    </style>
+
+    <div class="profile" id="m{{ member[0] }}">
+        <div class="heading"><b>{{ member[3]|safe }}</b> {{ member[4]|safe }}</div>
         {% if icons[member[0]] %}
         <img src="{{ url_for('static', filename='icons/'+icons[member[0]]) }}" class="icon">
         {% else %}
         <img src="{{ url_for('static', filename='any.jpg') }}" class="icon">
         {% endif %}
         <div class="bio">
-            {{ member[5] }} 
+            {{ member[5]|safe }} 
         </div>
         <br class="clear" />
         {% if g.user %}<div class="heading links">{% if member[8]==0 %}<a href="{{ url_for('manage.add_to_front', mid=member[0]) }}">Add to Front</a>{% else %}<a href="{{ url_for('manage.remove_front', mid=member[0]) }}">Remove from Front</a>{% endif %} &#9734 <a href="{{ url_for('manage.edit', mid=member[0]) }}">Edit</a> &#9734 {% if member[7]==0 %}<a href="{{ url_for('manage.add_to_home', mid=member[0]) }}">Pin to Homepage</a>{% else %}<a href="{{ url_for('manage.remove_home', mid=member[0]) }}">Unpin from Homepage</a>{% endif %}</div>{% endif %}

myriad/templates/index.html

@@ -7,15 +7,54 @@
   </div>
 
   {% for member in home_pins %}
-  <div class="profile" id="{{ member[0] }}">
-        <div class="heading"><b>{{ member[3] }}</b> {{ member[4] }}</div>
+
+  <style>
+        #m{{member[0]}}{
+            background-color:{{member[10]}};
+	        border-color:{{member[9]}};
+            color:{{member[15]}};
+        }
+        #m{{member[0]}} .heading
+        {
+            background-color:{{member[11]}};
+            border-color:{{member[12]}};
+            color:{{member[14]}};
+        }
+        #m{{member[0]}} .heading b
+        {
+            color:{{member[13]}};
+        }
+        #m{{member[0]}} a{
+            color: {{member[21]}};
+        }
+        #m{{member[0]}} a:hover{
+            color: {{member[22]}};
+        }
+        #m{{member[0]}} ::selection {
+            background: {{member[12]}};
+            color: white;
+            text-shadow: none;
+        }
+        #m{{member[0]}} ::-moz-selection {
+            background: {{member[12]}};
+            color: #EEE;
+            text-shadow: none;
+        }
+        #m{{member[0]}} .icon{
+            border-color:{{member[16]}};
+        }
+    </style>
+
+
+  <div class="profile" id="m{{ member[0] }}">
+        <div class="heading"><b>{{ member[3]|safe }}</b> {{ member[4]|safe }}</div>
         {% if icons[member[0]] %}
         <img src="{{ url_for('static', filename='icons/'+icons[member[0]]) }}" class="icon">
         {% else %}
         <img src="{{ url_for('static', filename='any.jpg') }}" class="icon">
         {% endif %}
         <div class="bio">
-            {{ member[5] }} 
+            {{ member[5]|safe }} 
         </div>
         <br class="clear" />
         {% if g.user %}<div class="heading links">{% if member[8]==0 %}<a href="{{ url_for('manage.add_to_front', mid=member[0]) }}">Add to Front</a>{% else %}<a href="{{ url_for('manage.remove_front', mid=member[0]) }}">Remove from Front</a>{% endif %} &#9734 <a href="{{ url_for('manage.edit', mid=member[0]) }}">Edit</a> &#9734 {% if member[7]==0 %}<a href="{{ url_for('manage.add_to_home', mid=member[0]) }}">Pin to Homepage</a>{% else %}<a href="{{ url_for('manage.remove_home', mid=member[0]) }}">Unpin from Homepage</a>{% endif %}</div>{% endif %}

myriad/templates/manage/edit.html

@@ -38,19 +38,39 @@
 
   <div class="heading">Manage Theme</div>
 
-  <!-- <form method="post">
-    <label for="favcolor">Color 1:</label>
-    <input type="color" id="color1" name="color1" value="#ff0000"><br>
-    <label for="favcolor">Color 2:</label>
-    <input type="color" id="color1" name="color1" value="#ff0000"><br>
-    <label for="favcolor">Color 3:</label>
-    <input type="color" id="color1" name="color1" value="#ff0000"><br>
-    <label for="favcolor">Color 4:</label>
-    <input type="color" id="color1" name="color1" value="#ff0000"><br>
-    <label for="favcolor">Color 5:</label>
-    <input type="color" id="color1" name="color1" value="#ff0000"><br>
+  <form method="post">
+    <label for="c9">Card border colour:</label>
+    <input type="color" id="c9" name="c9" value="{{member[9]}}"><br>
+
+    <label for="c10">Card background colour:</label>
+    <input type="color" id="c10" name="c10" value="{{member[10]}}"><br>
+
+    <label for="c11">Heading background colour:</label>
+    <input type="color" id="c11" name="c11" value="{{member[11]}}"><br>
+
+    <label for="c12">Accent colour:</label>
+    <input type="color" id="c12" name="c12" value="{{member[12]}}"><br>
+
+    <label for="c13">Heading name text colour:</label>
+    <input type="color" id="c13" name="c13" value="{{member[13]}}"><br>
+    
+    <label for="c14">Heading subtitle text colour:</label>
+    <input type="color" id="c14" name="c14" value="{{member[14]}}"><br>
+
+    <label for="c15">Card text colour:</label>
+    <input type="color" id="c15" name="c15" value="{{member[15]}}"><br>
+
+    <label for="c16">Icon border colour:</label>
+    <input type="color" id="c16" name="c16" value="{{member[16]}}"><br>
+
+    <label for="c21">Links colour:</label>
+    <input type="color" id="c21" name="c21" value="{{member[21]}}"><br>
+
+    <label for="c22">Links hover colour:</label>
+    <input type="color" id="c22" name="c22" value="{{member[22]}}"><br>
+
     <input type="submit" value="Set Member Theme">
-  </form> -->
+  </form>
 
   <a href="">Click here to reset member theme to default</a>