Illustrated build (CraftySalamander format)

Author: CraftySalamander

public/assets/salamander.png

@@ -49,11 +49,15 @@
         onerror="this.src = 'assets/placeholder.png';" class="desktop-only icon"
         alt="This website is Ad-Free, consider donating to maintain it!"><span>Donate Coin</span></a>
     <a id="copyForOverlayBtn" class="desktop-only" style="color:aqua;"
-      title="Copy build to Clipboard for AoE4_Overlay!">
+      title="Copy Simple TXT Build to Clipboard for AoE4_Overlay!">
       <span style="font-size: 4.8rem; margin-top: -0.8rem;">M</span>
-      <span onclick="window.open('https://github.com/FluffyMaguro/AoE4_Overlay')" onmouseenter="overlayEnterHelp()"
-        onmouseleave="overlayLeaveHelp() " title="Click to learn more about AoE4_Overlay!" id="AoE4_Overlay">?</span>
-      <span id="hybridOverlayText" style="text-align: center;">Text to Clipboard</span></a>
+      <span onclick="window.open('https://github.com/FluffyMaguro/AoE4_Overlay')" onmouseenter="simpleTxtOverlayEnterHelp()"
+        onmouseleave="simpleTxtOverlayLeaveHelp() " title="Click to learn more about AoE4_Overlay!" id="AoE4_Overlay">?</span>
+      <span id="hybridSimpleTxtOverlayText" style="text-align: center;">Simple TXT Build to Clipboard</span></a>
+    <a id="copyForIllustratedOverlayBtn" class="desktop-only" style="color:aqua;" title="Copy Illustrated Build to Clipboard for AoE4_Overlay!">
+      <img src="assets/salamander.png" class="salamander_icon">
+      <span onclick="window.open('https://github.com/FluffyMaguro/AoE4_Overlay')" onmouseenter="illustratedOverlayEnterHelp()" onmouseleave="illustratedOverlayLeaveHelp() " title="Click to learn more about AoE4_Overlay!" id="AoE4_Overlay">?</span>
+      <span id="hybridIllustratedOverlayText" style="text-align: center;">Illustrated Build to Clipboard</span></a>
     <a class="dropdown">
       <nav class="dropbtn">
         <div></div>

public/build.html

@@ -71,6 +71,12 @@ table tbody tr td:nth-child(6) {
     cursor: pointer;
 }
 
+#copyForIllustratedOverlayBtn {
+    display: flex;
+    position: relative;
+    cursor: pointer;
+}
+
 #AoE4_Overlay {
     background: aqua;
     outline: #181C29 solid 0.1rem;
@@ -89,25 +95,27 @@ table tbody tr td:nth-child(6) {
     cursor: pointer;
 }
 
-#hybridOverlayText {
+#hybridSimpleTxtOverlayText {
+    margin-top: -.7rem;
+}
+
+#hybridIllustratedOverlayText {
     margin-top: -.7rem;
 }
 
 #AoE4_Overlay:hover {
     background: black;
-    color:#fff;
+    color: #fff;
     outline-color: #fff;
 }
 
 @media screen and (max-width:800px) {
     html {
         font-size: 6.7px;
     }
-
     .civStatsMore {
         display: none;
     }
-
     table .buildTime {
         width: 24px;
     }

public/css/build.css

@@ -197,6 +197,14 @@ section {
     max-width: 4.8rem;
 }
 
+.salamander_icon {
+    cursor: pointer;
+    width: 4.8rem;
+    margin: 0.2rem;
+    max-height: 4.8rem;
+    max-width: 4.8rem;
+}
+
 table {
     font-size: 2.2rem;
     line-height: 5rem;
@@ -346,26 +354,21 @@ button {
     html {
         font-size: 6.7px;
     }
-
     .buildTime img {
         height: 16px;
     }
-
     main {
         flex-direction: column;
     }
-
     .tooltipContainer,
     header a span,
     .desktop-only {
         display: none;
     }
-
     header {
         letter-spacing: 0.5rem;
         font-size: 2.4rem;
     }
-
     .dropbtn {
         padding-left: 10rem;
     }
@@ -416,7 +419,10 @@ button {
     cursor: pointer
 }
 
-.modal .modal-footer .btn, .modal .modal-footer .btn-large, .modal .modal-footer .btn-small, .modal .modal-footer .btn-flat {
+.modal .modal-footer .btn,
+.modal .modal-footer .btn-large,
+.modal .modal-footer .btn-small,
+.modal .modal-footer .btn-flat {
     margin: 6px 0
 }
 
@@ -441,6 +447,7 @@ button {
     font-size: 13px;
     text-align: center;
 }
+
 #cookies-eu-more,
 #cookies-eu-accept,
 #cookies-eu-reject {
@@ -455,13 +462,15 @@ button {
     font-weight: bold;
     transition: background 0.07s, color 0.07s, border-color 0.07s;
 }
+
 #cookies-eu-more:hover,
 #cookies-eu-more:focus,
 #cookies-eu-accept:hover,
 #cookies-eu-accept:focus {
     background: #fff;
     color: #222;
 }
+
 #cookies-eu-more {
     margin-left: 7px;
 }
@@ -475,6 +484,7 @@ button {
     margin: 2px 0;
     border: 1px solid #666;
 }
+
 #cookies-eu-reject:hover,
 #cookies-eu-reject:focus {
     border-color: #fff;