Implement server webhook icons as cosmetics & fixes

webapp/titanembeds/templates/admin_cosmetics.html.j2

@@ -14,6 +14,7 @@
               <th>User ID</th>
               <th>CSS</th>
               <th>CSS Limit</th>
+              <th>Webhook Icon</th>
               <th>Submit</th>
           </tr>
         </thead>
@@ -24,6 +25,16 @@
                     <input id="new_user_id" placeholder="User ID">
                 </div>
             </td>
+            <td>
+                <div class="switch">
+                    <label>
+                      Off
+                      <input type="checkbox" id="new_css_switch">
+                      <span class="lever"></span>
+                      On
+                    </label>
+                </div>
+            </td>
             <td>
                 <div class="input-field inline">
                     <input id="new_css_limit" placeholder="CSS Limit" type="number">
@@ -33,7 +44,7 @@
                 <div class="switch">
                     <label>
                       Off
-                      <input type="checkbox" id="new_css_switch">
+                      <input type="checkbox" id="new_webhook_icon_switch">
                       <span class="lever"></span>
                       On
                     </label>
@@ -57,6 +68,7 @@
               <th>User ID</th>
               <th>CSS</th>
               <th>CSS Limit</th>
+              <th>Webhook Icon</th>
           </tr>
         </thead>
         <tbody>
@@ -79,6 +91,16 @@
                     <input placeholder="CSS Limit" type="number" value="{{ cosmetic.css_limit }}" onchange="update_css_limit('{{ cosmetic.user_id }}', $(this).val())">
                 </div>
             </td>
+            <td>
+                <div class="switch">
+                    <label>
+                      Off
+                      <input type="checkbox" {% if cosmetic.webhook_icon %}checked{% endif %} onchange="update_webhook_icon_switch('{{ cosmetic.user_id }}', this)">
+                      <span class="lever"></span>
+                      On
+                    </label>
+                </div>
+            </td>
           </tr>
           {% endfor %}
         </tbody>

webapp/titanembeds/templates/administrate_guild.html.j2

@@ -112,6 +112,16 @@
             <p>Because we are a partner with <a href="https://discord.io" target="_blank">Discord.io</a>, we enable you to enter your custom discord.io link and replace the discord.gg link on the embed!</p>
             <p>(Leave blank if none - enter to submit)</p>
             <input id="discordio" value="{{ guild['discordio'] }}">
+
+            <br>
+            
+            <p class="flow-text">Webhook Guest User Avatar URL</p>
+            <p>If enabled Webhook Messages, you may set it so that the guest users may have a custom avatar instead of the Titan logo. Source must be the permanent URL location to the image file (try imgur and get direct link to image).</p>
+            <p>(Leave blank if none - enter to submit)</p>
+            {% if not cosmetics.webhook_icon %}
+            <p class="red lighten-4"><strong>Your user account does not have access to change webhook avatar url. Please visit the Titan Tokens shop to activate this cosmetic item.</strong></p>
+            {% endif %}
+            <input id="webhook_icon" value="{{ guild['webhook_icon'] }}" {% if not cosmetics.webhook_icon %}disabled{% endif %}>
           </div>
         </div>
       </div>

webapp/titanembeds/templates/dashboard.html.j2

@@ -32,13 +32,14 @@
 
 <hr>
 
-{% if cosmetics is none %}
+{% if (not cosmetics) or (cosmetics and not cosmetics.css) %}
 <div class="row">
   <div class="col s12">
     <div class="card-panel indigo lighten-5 z-depth-3 hoverable black-text">
-      <h4>Cosmetics!</h4>
-      <p class="flow-text">Would you like to have <strong>cosmetics</strong> such as <em>custom CSS</em> for your embed?</p>
+      <h4>User Defined CSS!</h4>
+      <p class="flow-text">Would you like to have <strong>user defined css</strong> (e.g. custom css) for your embed?</p>
       <a class="waves-effect waves-light btn" href="https://discord.io/Titan">Talk to us!</a>
+      <p>The first slot is on the house. Increasing the slot count requires the user to spend Titan Tokens. However, we do offer unlimited predefined CSS Color Variables at no charge.</p>
     </div>
   </div>
 </div>

webapp/titanembeds/templates/donate.html.j2

@@ -40,6 +40,14 @@
             </div>
         </div>
     </div>
+    <div class="col s12">
+        <div class="card-panel indigo lighten-5 z-depth-3 hoverable black-text">
+            <h4>Webhook Guest User Avatar <strong>[300 tokens]</strong></h4>
+            <p class="flow-text">Tired of the bland Titan logo for your guests avatars in your servers? Enables your account to be able to set webhook icons for guests for all servers you can manage.</p>
+            <p>(Note: Webhook Messages has to be enabled & Titan needs server permissions to create webhooks)</p>
+            <a class="waves-effect waves-light btn" id="buy-webhook-guest-user-avatar-btn" {% if cosmetics.webhook_icon %}disabled{% endif %}>{% if cosmetics.webhook_icon %}Already Purchased{% else %}Buy{% endif %}</a>
+        </div>
+    </div>
 </div>
 {% endblock %}
 {% block script %}