Make it pretty per #5

docker/app/backend/triumph-tracker.py

@@ -17,7 +17,9 @@
 WANTED_SEALS = [
     'King\'s Fall',
     'Last Wish',
-    'Vow of the Disciple'
+    'Vow of the Disciple',
+    'Deep Stone Crypt',
+    'Vault of Glass'
 ]
 MANIFEST_DATA = Path(__file__).parent / '../manifest.sqlite3'
 CLAN_DATA = Path(__file__).parent / '../clan_data.sqlite3'

docker/app/frontend/app.py

@@ -56,11 +56,11 @@ def modified_time():
 @app.route('/raid/<raid_id>')
 def raid(raid_id):
     conn = get_db_connection()
-    raid_name = conn.execute("select name from raids where id=%s" % (raid_id,)).fetchone()
+    seal_name = conn.execute("select seal from raids where id=%s" % (raid_id,)).fetchone()
     cheevos = conn.execute("select * from cheevos where raid=%s" % (raid_id,)).fetchall()
     players = conn.execute('select * from players').fetchall()
     conn.close()
-    return render_template('raid.html', raid_name=raid_name, cheevos=cheevos, players=players)
+    return render_template('raid.html', seal_name=seal_name, cheevos=cheevos, players=players)
 
 if __name__ == '__main__':
    app.run(debug = True)

docker/app/frontend/static/triumph-tracker.css

@@ -1,8 +1,101 @@
-nav a {
-    color: #828282;
-    font-size: 2em;
-    margin-left: 50px;
-    text-decoration: none;
+body {
+  font-family: Verdana,Arial,sans-serif;
+  background-color: #7e7e7e;
+  margin: 0;
+}
+
+.box {
+  display: flex;
+  flex-flow: column;
+  min-height: 100vh;
+  margin-left: 50px;
+  margin-right: 50px;
+}
+
+.box .row {
+}
+
+.box .row.header {
+  flex: 0 1 auto;
+  font-family: "Audiowide", sans-serif;
+}
+
+.box .row.header a {
+  color: #000000;
+  font-size: 2.5em;
+  text-decoration: none;
+}
+
+.box .row.header a:hover {
+  font-size: 2.5em;
+  text-decoration: none;
+  filter: invert(85%) sepia(42%) saturate(841%) hue-rotate(343deg) brightness(101%) contrast(101%);
+}
+
+.box .row.header img {
+    width: 50px;
+    vertical-align: middle;
+}
+
+.box .row.content {
+  flex: 1 1 auto;
+  background-image: url("eg-bg.png");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+}
+
+.box .row.raidlist {
+  background-color: rgba(182, 182, 182, 0.9);
+  border-radius: 30px 0px 30px;
+  padding: 20px;
+  outline-style: groove;
+  outline-color: #ffd329;
+  outline-width: thin;
+}
+
+.box .row.footer {
+  flex: 0 1 40px;
+  font-family: "Audiowide", sans-serif;
+}
+
+.box .row.footer a {
+  color: #000000;
+  text-decoration: none;
+  position: absolute;
+  right: 50px;
+}
+
+.box .row.footer a:hover {
+  color: #ffd329;
+  text-decoration: none;
+  position: absolute;
+  right: 50px;
+}
+
+.sealtext {
+  margin: 30px;
+  margin-left: 50px;
+}
+.sealtext a {
+  color: #000000;
+  text-decoration: none;
+  background-color: #ffd329;
+  border-radius: 5px 0px 5px;
+  padding: 10px;
+  outline-style: groove;
+  outline-width: thin;
+}
+
+.sealtext a:hover {
+  color: #ffd329;
+  text-decoration: none;
+  background-color: #7e7e7e;
+  border-radius: 5px 0px 5px;
+  padding: 10px;
+  outline-style: groove;
+  outline-width: thin;
+  outline-color: #000000;
 }
 
 table.GeneratedTable {
@@ -27,7 +120,7 @@ table.GeneratedTable thead {
 }
 
 .highlight {
-  background-color: #d2c322;
+  background-color: #b6b6b6;
 }
 
 /* The switch - the box around the slider */

docker/app/frontend/static/triumph-tracker.js

@@ -9,10 +9,10 @@ $(document).ready(function(){
       if($('#highlighter').is(':checked')){
          $("#GeneratedTable td").each(function() {
             if ($(this).text() == 'Incomplete'){
-               $(this).css('background-color', 'red');
+               $(this).css('background-color', '#ffa7a7');
             }
             if ($(this).text() == 'Done'){
-               $(this).css('background-color', 'green');
+               $(this).css('background-color', '#8eff9f');
             }
          }); 
       } else {

docker/app/frontend/templates/base.html

@@ -7,25 +7,18 @@
     <link rel="stylesheet" href="{{ url_for('static', filename = 'triumph-tracker.css') }}">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
     <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide">
     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
     <script src="{{ url_for('static', filename='triumph-tracker.js') }}"></script>
     <script>$("#about").dialog({ autoOpen: false });</script>
 
 </head>
 <body>
-    <nav>
-        <a href="{{ url_for('index') }}">EarlGreyders Triumph Tracker</a>
-        <a href="#" onclick="getAbout()">About</a>
-    </nav>
-    <hr>
-    <div class="content">
-        {% block content %} {% endblock %}
-    </div>
     <div id="about" title="About Triumph Tracker" style="display:none">
         <p> <a href="https://github.com/hanzov69/triumph-tracker-service">GitHub</a><br/><br/>
             Bungie Manifest Version: <br/>
             <span id="manifest_version">{{ manifest_version }}</span><br/>
-            Lost Modified<br/><span id="manifest_modified"></span><br/>
+            Last Modified<br/><span id="manifest_modified"></span><br/>
             <br/>
             Clan Data last updated<br/><span id="clan_data_modified"></span><br/>
             <br/>
@@ -34,5 +27,19 @@
             <br/>MrChristian for other stuff.
         </p>
     </div>
+    <div class="box">
+        <div class="row header">
+            <a href="https://earlgreyders.wang"><img src="{{ url_for('static', filename = 'logo.png') }}"></a>
+            <a href="{{ url_for('index') }}">EARL GREYDERS.RAID</a>
+        </div>
+        <br/>
+        <div class="row content">
+            {% block content %} {% endblock %}
+        </div>
+        <div class="row footer">
+            <a href="#" onclick="getAbout()">ABOUT</a>
+        </div>
+    </div>
+
 </body>
 </html>

docker/app/frontend/templates/index.html

@@ -1,12 +1,11 @@
 {% extends 'base.html' %}
 
 {% block content %}
-    <h1>{% block title %} Raids {% endblock %}</h1>
-    {% for raid in raids %}
-        <div class='raid'>
-            <p>
-                {{ raid['name'] }} - <a href="raid/{{ raid['id'] }}">{{ raid['seal'] }}</a>
-            </p>
-        </div>
-    {% endfor %}
-{% endblock %}
+    <div class="row raidlist">       
+            {% for raid in raids %}
+            <div class="sealtext">
+                <span><a href="raid/{{ raid['id'] }}">{{ raid['name'] }}</a></span><br/>
+            </div>
+            {% endfor %}
+    </div>
+{% endblock %}

docker/app/frontend/templates/raid.html

@@ -1,7 +1,7 @@
 {% extends 'base.html' %}
 
 {% block content %}
-    <h1>{% block title %} {{ raid_name.name }} {% endblock %}</h1>
+    <h1>{% block title %} {{ seal_name.seal }} {% endblock %}</h1>
     Hide Completed&nbsp;
     <label class="switch">
         <input type="checkbox" id="hiderowcheck">