feat: add AnatomyView

src/views/AnatomyView.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import RefImage from "@/components/RefImage.vue";
+import ColorTable from "@/components/ColorTable.vue";
+import TextBlock from "@/components/TextBlock.vue";
+
+const colors = [
+  { name: "Front", value: "#e7c7b1" },
+  { name: "Arms, legs", value: "#493428" },
+  { name: "Back Main", value: "#422322" },
+  { name: "Back Spine", value: "#341c1c" },
+  { name: "Highlight scales, tissue", value: "#6bb9db" },
+  { name: "Spikes, tail club", value: "#f8ebdd" },
+  { name: "Eyes primary", value: "#a7eef1" },
+  { name: "Eyes secondary", value: "#6dabd1" },
+];
+</script>
+
+<template>
+  <RefImage>
+    <source
+      srcset="
+        @/assets/viktor-ref-SFW-alpha.png?w=400;700;1000&avif&quality=75&srcset
+      "
+      type="image/avif"
+    />
+    <source
+      srcset="
+        @/assets/viktor-ref-SFW-alpha.png?w=400;700;1000&webp&quality=100&srcset
+      "
+      type="image/webp"
+    />
+    <img src="@/assets/viktor-ref-SFW-alpha.png?w=700&png" alt="" />
+
+    <template #caption>
+      Viktor Ref &copy; <a href="http://twitter.com/sabertoofs">sabertoofs</a>
+    </template>
+  </RefImage>
+
+  <ColorTable :colors="colors"></ColorTable>
+
+  <TextBlock>
+    <p>
+      Viktor is a bipedal plantigrade Ankylosaurus. His skin is mostly
+      bicolored, with several shades of brown.
+    </p>
+
+    <p>
+      His forehead, nose, chest, belly and crotch are of light desert sand
+      colors that run through the underside of his tail.
+    </p>
+
+    <p>
+      His cheeks, shoulders, back and thighs, in contrast, stand out with a rich
+      walnut brown, which is also found on the sides of his tail. From the back
+      of his head, down his spine and across the top of his tail is a continuous
+      strip of deep dark cedar brown. Arms and legs are distinguished by a light
+      earthy brown.
+    </p>
+
+    <p>
+      His entire body is speckled with scattered aquamarine spots, which come in
+      pairs of one large and one small spot. The only exceptions are the spots
+      on his cheeks and behind his lower cheek horns, which come in threes and
+      his the top side of his snout, which sports a big single spot. Mouth,
+      tongue, nostrils and any other tissue of his body also feature this color.
+    </p>
+
+    <p>His eyes shine with a mixture of light sea green and electric blue.</p>
+
+    <p>
+      Horns and claws are of a typical bone white. Starting with the double pair
+      of horns on his head, a parallel line of horns continues down his back,
+      with additional horns adorning his shoulders and thighs. His tail is also
+      armed with horns on both sides along its entire length. At the tip of the
+      tail is a club-like ossification that he can use for fending off foes.
+    </p>
+
+    <p>He owes his strong, stocky physique to years of hard physical labor.</p>
+  </TextBlock>
+</template>