Add character plate to FFXIV shrine

themes/red/layouts/_default/ffxiv.html

@@ -7,59 +7,49 @@
 
     <div class="tabs-container">
         <input type="radio" id="tab-1" name="my-tabs" checked>
-        <label for="tab-1" class="tab-label">Warrior of Light</label>
+        <label for="tab-1" class="tab-label">Adventurer Plate</label>
         <div class="container">
-            <div class="box" style="width: 50%">
+            <div class="box">
-                <h2>Character</h2>
+                <div style="width:100%; height:auto; aspect-ratio: 1.846153846153846; display: inline-block; position: relative">
-
+                    <img style="pointer-events: none; position: absolute; width: 50%" src="backing.png"/>
-                <p>Here's my WoL, and she's stayed consistent shortly after I purchased Shadowbringers.</p>
+                    <img style="pointer-events: none; position:absolute; left: 10%; top: 10%; width: 80%; z-index: 1" src="base-plate.png"/>
-
+                    <img style="pointer-events: none; position:absolute; left: 10%; top: 10%; width: 80%; z-index: 2" src="pattern-overlay.png"/>
-                <img style="display: block; margin-left: auto; margin-right: auto;margin-bottom:10px;width:50%" src="plate-portrait.png" />
+                    <img style="pointer-events: none; position:absolute;z-index:4; width:100%" src="plate-frame.png"/>
-
+                    <img style="pointer-events: none; position:absolute;z-index:3; width:25%; left: 15%; top: 15%" src="plate-portrait.png"/>
-                <table>
+                    <img style="pointer-events: none; position:absolute;z-index:5; height:135%; top: -14%; left: 5%" src="portrait-frame.png"/>
-                    <tr>
+                    <img style="pointer-events: none; position:absolute;z-index:5; width:100%; top: 0" src="top-border.png"/>
-                        <th>Gender</th>
+                    <img style="pointer-events: none; position:absolute;z-index:5; width:100%; bottom: 0" src="bottom-border.png"/>
-                        <td>{{ $char.appearance.gender }}</td>
+                    <div style="position: absolute; top: 30%; left: 45%; color: white; z-index: 99">
-                    </tr>
+                        <b>Title</b>
-                    <tr>
+                        <p>{{ $char.plate_title }}</p>
-                        <th>Race</th>
+                        <b>Name</b>
-                        <td>{{ $char.appearance.race }} / {{ $char.appearance.tribe }}</td>
+                        <p>{{ $char.name }}</p>
-                    </tr>
+                        <b>Favorite Class/Job</b>
-                    <tr>
+                        <p>{{ $char.plate_classjob }} LEVEL {{ $char.plate_classjob_level }}</p>
-                        <th>Height</th>
+                        <b>Comment</b>
-                        <td>6' 3" (191 cm)</td>
+                        <p>{{ $char.search_comment }}</p>
-                    </tr>
-                    <tr>
-                        <th>Nameday</th>
-                        <td>{{ $char.nameday }}</td>
-                    </tr>
-                    <tr>
-                        <th>City-state</th>
-                        <td>{{ $char.city_state }}</td>
-                    </tr>
-                    <tr>
-                        <th>Guardian Deity</th>
-                        <td>{{ $char.guardian }}</td>
-                    </tr>
-                </table>
-            </div>
-
-            <div style="width: 50%">
-                <div class="box" style="height: 600px">
-                    <h2>Artwork</h2>
-
-                    <p>Here's some fan art of my WoL, I want to do more general FFXIV fan art in the future too!</p>
-
-                    <div style="height: 500px; overflow: auto">
-                    {{ partial "art-section" . }}
                     </div>
+                </div>
+                <p style="text-align: center">Generated by <a href="http://xiv.zone/software/auracite">Auracite</a>.</p>
+            </div>
+        </div>
 
+        <input type="radio" id="tab-2" name="my-tabs" checked>
+        <label for="tab-2" class="tab-label">Artwork</label>
+        <div class="container">
+            <div class="box">
+                <h2>Artwork</h2>
+
+                <p>Here's some fan art of my WoL, I want to do more general FFXIV fan art in the future too!</p>
+
+                <div style="height: 500px; overflow: auto">
+                {{ partial "art-section" . }}
                 </div>
             </div>
         </div>
 
-        <input type="radio" id="tab-2" name="my-tabs">
+        <input type="radio" id="tab-3" name="my-tabs">
-        <label for="tab-2" class="tab-label">Mods</label>
+        <label for="tab-3" class="tab-label">Mods</label>
         <div class="container">
             <div class="box">
                 <h2>My Mods</h2>