Hotland - Bad Opinion Zone is real

content/programming/opinions.tree

@@ -1,7 +1,92 @@
 %% title = "Hotland - Bad Opinion Zone"
 
 % id = "01HBTSXTTAAAHGKD4TZZW14KFK"
-- > "Hotland - Bad Opinion Zone"
+  template = true
+- ``` =html
+<style>
+    @font-face {
+        font-family: "Determination Sans";
+        src: url('/static/font/DTM-Sans.otf?cache=b3-4fe96c14');
+    }
+
+    .undertale-save-box {
+        --icon-heart: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAQ0lEQVQY042P0QoAMARF7/X/3zzTsoW0nBRd5wHAUCs9DYQTM/rwMEssWCmrUodgwEjiPfIjSPqmEYj4chVZdmjEJGzAMxYAKMRofgAAAABJRU5ErkJggg==');
+    
+        border: 6px solid white;
+        background: black;
+        color: white;
+
+        font-family: "Determination Sans";
+        font-size: 20pt;
+        line-height: 1;
+
+        width: 424px;
+        height: 174px;
+        padding: 20px 24px 17px 24px;
+
+        display: flex;
+        flex-direction: column;
+
+        &>ul.row {
+            padding-left: 0;
+            margin-left: 0;
+
+            display: flex;
+            flex-direction: row;
+
+            &.player-info { padding-bottom: 14px; }
+            &.buttons { margin-top: auto; }
+
+            &>li {
+                display: block;
+
+                &.player-name { width: 146px; }
+                &.love { width: 138px; }
+                &.button-save, &.button-return { width: 180px; }
+            }
+
+            &.buttons {
+                &>li {
+                    padding-left: 30px;
+                    cursor: pointer;
+
+                    &:hover {
+                        image-rendering: pixelated;
+                        background-image: var(--icon-heart);
+                        background-repeat: no-repeat;
+                        background-size: 18px;
+                        background-position: 2px 4px;
+                    }
+
+                    &>a {
+                        text-decoration: none;
+                        color: white;
+                    }
+                }
+            }
+        }
+
+        &.file-saved {
+            color: #ff0;
+        }
+    }
+</style>
+
+<div class="undertale-save-box">
+    <ul class="row player-info">
+        <li class="player-name">SIGSEGV</li>
+        <li class="love">LV 1</li>
+        <li class="play-time">0:00</li>
+    </ul>
+    <ul class="row">
+        <li class="save-point">Hotland – Bad Opinion Zone</li>
+    </ul>
+    <ul class="row buttons">
+        <li class="button-save">Save</li>
+        <li class="button-return"><a href="/">Return</a></li>
+    </ul>
+</div>
+```
 
 % id = "01HBTSXTTAMWJ2BM6395YS72FN"
 + :page: log verbosity levels are stupid