The repo for Purrform's main BigCommerce store.
feat: update grimace scale page name and replace SVGs with images
+25
-184
+1
-1
config.json
+1
-1
config.json
+24
-183
templates/pages/custom/page/feline-grimace-scale.html
+24
-183
templates/pages/custom/page/feline-grimace-scale.html
···
253
253
margin-bottom: 12px;
254
254
}
255
255
256
+
.cat-illustration img {
257
+
width: 100%;
258
+
height: 100%;
259
+
object-fit: contain;
260
+
display: block;
261
+
mix-blend-mode: multiply;
262
+
}
263
+
256
264
.option-label {
257
265
font-size: 0.8rem;
258
266
font-weight: 600;
···
563
571
options: [
564
572
{
565
573
score: 0, label: 'Ears facing forward', sublabel: 'Absent',
566
-
svg: `<svg viewBox="0 0 110 90" fill="none" xmlns="http://www.w3.org/2000/svg">
567
-
<ellipse cx="55" cy="55" rx="30" ry="26" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/>
568
-
<polygon points="32,36 22,14 44,30" fill="#edf1ec" stroke="#546052" stroke-width="1.5" stroke-linejoin="round"/>
569
-
<polygon points="78,36 88,14 66,30" fill="#edf1ec" stroke="#546052" stroke-width="1.5" stroke-linejoin="round"/>
570
-
<circle cx="44" cy="53" r="5" fill="#546052" opacity="0.7"/>
571
-
<circle cx="66" cy="53" r="5" fill="#546052" opacity="0.7"/>
572
-
<path d="M47 66 Q55 72 63 66" stroke="#546052" stroke-width="1.5" fill="none" stroke-linecap="round"/>
573
-
<line x1="38" y1="56" x2="24" y2="52" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/>
574
-
<line x1="38" y1="59" x2="23" y2="59" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/>
575
-
<line x1="72" y1="56" x2="86" y2="52" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/>
576
-
<line x1="72" y1="59" x2="87" y2="59" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/>
577
-
</svg>`
574
+
img: `<img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/-a-ear-position-0.jpg?t=1771863537" alt="Ear position - absent" loading="lazy">`
578
575
},
579
576
{
580
577
score: 1, label: 'Ears slightly pulled apart', sublabel: 'Moderately present or uncertain',
581
-
svg: `<svg viewBox="0 0 110 90" fill="none" xmlns="http://www.w3.org/2000/svg">
582
-
<ellipse cx="55" cy="55" rx="30" ry="26" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/>
583
-
<polygon points="32,36 16,18 40,32" fill="#edf1ec" stroke="#546052" stroke-width="1.5" stroke-linejoin="round"/>
584
-
<polygon points="78,36 94,18 70,32" fill="#edf1ec" stroke="#546052" stroke-width="1.5" stroke-linejoin="round"/>
585
-
<circle cx="44" cy="53" r="5" fill="#546052" opacity="0.7"/>
586
-
<circle cx="66" cy="53" r="5" fill="#546052" opacity="0.7"/>
587
-
<path d="M47 66 Q55 71 63 66" stroke="#546052" stroke-width="1.5" fill="none" stroke-linecap="round"/>
588
-
<line x1="38" y1="56" x2="24" y2="52" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/>
589
-
<line x1="38" y1="59" x2="23" y2="59" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/>
590
-
<line x1="72" y1="56" x2="86" y2="52" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/>
591
-
<line x1="72" y1="59" x2="87" y2="59" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/>
592
-
</svg>`
578
+
img: `<img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/-a-ear-position-1.jpg?t=1771863537" alt="Ear position - moderately present" loading="lazy">`
593
579
},
594
580
{
595
581
score: 2, label: 'Ears rotated outwards', sublabel: 'Markedly present',
596
-
svg: `<svg viewBox="0 0 110 90" fill="none" xmlns="http://www.w3.org/2000/svg">
597
-
<ellipse cx="55" cy="55" rx="30" ry="26" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/>
598
-
<polygon points="30,38 10,30 36,34" fill="#edf1ec" stroke="#546052" stroke-width="1.5" stroke-linejoin="round"/>
599
-
<polygon points="80,38 100,30 74,34" fill="#edf1ec" stroke="#546052" stroke-width="1.5" stroke-linejoin="round"/>
600
-
<circle cx="44" cy="53" r="5" fill="#546052" opacity="0.7"/>
601
-
<circle cx="66" cy="53" r="5" fill="#546052" opacity="0.7"/>
602
-
<path d="M47 66 Q55 70 63 66" stroke="#546052" stroke-width="1.5" fill="none" stroke-linecap="round"/>
603
-
<line x1="38" y1="56" x2="24" y2="52" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/>
604
-
<line x1="38" y1="59" x2="23" y2="59" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/>
605
-
<line x1="72" y1="56" x2="86" y2="52" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/>
606
-
<line x1="72" y1="59" x2="87" y2="59" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/>
607
-
</svg>`
582
+
img: `<img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/-a-ear-position-2.jpg?t=1771863538" alt="Ear position - markedly present" loading="lazy">`
608
583
}
609
584
]
610
585
},
···
614
589
options: [
615
590
{
616
591
score: 0, label: 'Eyes opened', sublabel: 'Absent',
617
-
svg: `<svg viewBox="0 0 110 90" fill="none" xmlns="http://www.w3.org/2000/svg">
618
-
<ellipse cx="55" cy="52" rx="30" ry="26" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/>
619
-
<polygon points="32,34 22,14 44,30" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/>
620
-
<polygon points="78,34 88,14 66,30" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/>
621
-
<ellipse cx="42" cy="50" rx="8" ry="8" fill="white" stroke="#546052" stroke-width="1.5"/>
622
-
<ellipse cx="68" cy="50" rx="8" ry="8" fill="white" stroke="#546052" stroke-width="1.5"/>
623
-
<circle cx="42" cy="50" r="4" fill="#2a3329"/>
624
-
<circle cx="68" cy="50" r="4" fill="#2a3329"/>
625
-
<circle cx="44" cy="48" r="1.5" fill="white"/>
626
-
<circle cx="70" cy="48" r="1.5" fill="white"/>
627
-
<path d="M47 65 Q55 70 63 65" stroke="#546052" stroke-width="1.5" fill="none" stroke-linecap="round"/>
628
-
</svg>`
592
+
img: `<img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/-b-orbital-tightening-0.jpg?t=1771863539" alt="Orbital tightening - absent" loading="lazy">`
629
593
},
630
594
{
631
595
score: 1, label: 'Partially closed eyes', sublabel: 'Moderately present or uncertain',
632
-
svg: `<svg viewBox="0 0 110 90" fill="none" xmlns="http://www.w3.org/2000/svg">
633
-
<ellipse cx="55" cy="52" rx="30" ry="26" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/>
634
-
<polygon points="32,34 22,14 44,30" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/>
635
-
<polygon points="78,34 88,14 66,30" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/>
636
-
<ellipse cx="42" cy="50" rx="8" ry="5.5" fill="white" stroke="#546052" stroke-width="1.5"/>
637
-
<ellipse cx="68" cy="50" rx="8" ry="5.5" fill="white" stroke="#546052" stroke-width="1.5"/>
638
-
<circle cx="42" cy="51" r="3.5" fill="#2a3329"/>
639
-
<circle cx="68" cy="51" r="3.5" fill="#2a3329"/>
640
-
<line x1="34" y1="45" x2="50" y2="45" stroke="#546052" stroke-width="1.8" stroke-linecap="round"/>
641
-
<line x1="60" y1="45" x2="76" y2="45" stroke="#546052" stroke-width="1.8" stroke-linecap="round"/>
642
-
<path d="M47 65 Q55 70 63 65" stroke="#546052" stroke-width="1.5" fill="none" stroke-linecap="round"/>
643
-
</svg>`
596
+
img: `<img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/-b-orbital-tightening-1.jpg?t=1771863539" alt="Orbital tightening - moderately present" loading="lazy">`
644
597
},
645
598
{
646
599
score: 2, label: 'Squinted eyes', sublabel: 'Markedly present',
647
-
svg: `<svg viewBox="0 0 110 90" fill="none" xmlns="http://www.w3.org/2000/svg">
648
-
<ellipse cx="55" cy="52" rx="30" ry="26" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/>
649
-
<polygon points="32,34 22,14 44,30" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/>
650
-
<polygon points="78,34 88,14 66,30" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/>
651
-
<ellipse cx="42" cy="52" rx="8" ry="3" fill="white" stroke="#546052" stroke-width="1.5"/>
652
-
<ellipse cx="68" cy="52" rx="8" ry="3" fill="white" stroke="#546052" stroke-width="1.5"/>
653
-
<circle cx="42" cy="52" r="2" fill="#2a3329"/>
654
-
<circle cx="68" cy="52" r="2" fill="#2a3329"/>
655
-
<line x1="34" y1="49" x2="50" y2="49" stroke="#546052" stroke-width="2" stroke-linecap="round"/>
656
-
<line x1="60" y1="49" x2="76" y2="49" stroke="#546052" stroke-width="2" stroke-linecap="round"/>
657
-
<path d="M47 66 Q55 70 63 66" stroke="#546052" stroke-width="1.5" fill="none" stroke-linecap="round"/>
658
-
</svg>`
600
+
img: `<img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/-b-orbital-tightening-2.jpg?t=1771863540" alt="Orbital tightening - markedly present" loading="lazy">`
659
601
}
660
602
]
661
603
},
···
665
607
options: [
666
608
{
667
609
score: 0, label: 'Relaxed (round shape)', sublabel: 'Absent',
668
-
svg: `<svg viewBox="0 0 110 90" fill="none" xmlns="http://www.w3.org/2000/svg">
669
-
<ellipse cx="55" cy="52" rx="30" ry="26" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/>
670
-
<polygon points="32,34 22,14 44,30" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/>
671
-
<polygon points="78,34 88,14 66,30" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/>
672
-
<circle cx="44" cy="47" r="4.5" fill="#546052" opacity="0.6"/>
673
-
<circle cx="66" cy="47" r="4.5" fill="#546052" opacity="0.6"/>
674
-
<ellipse cx="55" cy="58" rx="3" ry="2" fill="#546052" opacity="0.55"/>
675
-
<line x1="55" y1="60" x2="55" y2="64" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/>
676
-
<path d="M 41,61 A 7,7 0 1,0 55,61" fill="#edf1ec" stroke="#546052" stroke-width="1.3" stroke-linecap="round"/>
677
-
<path d="M 55,61 A 7,7 0 1,0 69,61" fill="#edf1ec" stroke="#546052" stroke-width="1.3" stroke-linecap="round"/>
678
-
</svg>`
610
+
img: `<img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/-c-muzzle-tension-0.jpg?t=1771863541" alt="Muzzle tension - absent" loading="lazy">`
679
611
},
680
612
{
681
613
score: 1, label: 'Mild tension', sublabel: 'Moderately present or uncertain',
682
-
svg: `<svg viewBox="0 0 110 90" fill="none" xmlns="http://www.w3.org/2000/svg">
683
-
<ellipse cx="55" cy="52" rx="30" ry="26" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/>
684
-
<polygon points="32,34 22,14 44,30" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/>
685
-
<polygon points="78,34 88,14 66,30" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/>
686
-
<circle cx="44" cy="47" r="4.5" fill="#546052" opacity="0.6"/>
687
-
<circle cx="66" cy="47" r="4.5" fill="#546052" opacity="0.6"/>
688
-
<ellipse cx="55" cy="58" rx="3" ry="2" fill="#546052" opacity="0.55"/>
689
-
<line x1="55" y1="60" x2="55" y2="64" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/>
690
-
<path d="M 40,62 A 9,6 0 1,0 52,62" fill="#edf1ec" stroke="#546052" stroke-width="1.3" stroke-linecap="round"/>
691
-
<path d="M 58,62 A 9,6 0 1,0 70,62" fill="#edf1ec" stroke="#546052" stroke-width="1.3" stroke-linecap="round"/>
692
-
</svg>`
614
+
img: `<img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/-c-muzzle-tension-1.jpg?t=1771863542" alt="Muzzle tension - moderately present" loading="lazy">`
693
615
},
694
616
{
695
617
score: 2, label: 'Tense (elliptical shape)', sublabel: 'Markedly present',
696
-
svg: `<svg viewBox="0 0 110 90" fill="none" xmlns="http://www.w3.org/2000/svg">
697
-
<ellipse cx="55" cy="52" rx="30" ry="26" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/>
698
-
<polygon points="32,34 22,14 44,30" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/>
699
-
<polygon points="78,34 88,14 66,30" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/>
700
-
<circle cx="44" cy="47" r="4.5" fill="#546052" opacity="0.6"/>
701
-
<circle cx="66" cy="47" r="4.5" fill="#546052" opacity="0.6"/>
702
-
<ellipse cx="55" cy="58" rx="3" ry="2" fill="#546052" opacity="0.55"/>
703
-
<line x1="55" y1="60" x2="55" y2="64" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/>
704
-
<path d="M 39,63 A 10.5,4.5 0 1,0 53,63" fill="#edf1ec" stroke="#546052" stroke-width="1.3" stroke-linecap="round"/>
705
-
<path d="M 59,63 A 10.5,4.5 0 1,0 71,63" fill="#edf1ec" stroke="#546052" stroke-width="1.3" stroke-linecap="round"/>
706
-
</svg>`
618
+
img: `<img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/-c-muzzle-tension-2.jpg?t=1771863542" alt="Muzzle tension - markedly present" loading="lazy">`
707
619
}
708
620
]
709
621
},
···
713
625
options: [
714
626
{
715
627
score: 0, label: 'Loose and curved', sublabel: 'Absent',
716
-
svg: `<svg viewBox="0 0 110 90" fill="none" xmlns="http://www.w3.org/2000/svg">
717
-
<ellipse cx="55" cy="52" rx="28" ry="24" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/>
718
-
<polygon points="33,36 24,16 44,32" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/>
719
-
<polygon points="77,36 86,16 66,32" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/>
720
-
<circle cx="44" cy="51" r="4" fill="#546052" opacity="0.6"/>
721
-
<circle cx="66" cy="51" r="4" fill="#546052" opacity="0.6"/>
722
-
<path d="M47 64 Q55 69 63 64" stroke="#546052" stroke-width="1.5" fill="none" stroke-linecap="round"/>
723
-
<!-- curved whiskers -->
724
-
<path d="M38 53 Q22 50 10 53" stroke="#546052" stroke-width="1.2" fill="none" stroke-linecap="round"/>
725
-
<path d="M38 57 Q22 57 10 60" stroke="#546052" stroke-width="1.2" fill="none" stroke-linecap="round"/>
726
-
<path d="M38 61 Q22 64 10 68" stroke="#546052" stroke-width="1.2" fill="none" stroke-linecap="round"/>
727
-
<path d="M72 53 Q88 50 100 53" stroke="#546052" stroke-width="1.2" fill="none" stroke-linecap="round"/>
728
-
<path d="M72 57 Q88 57 100 60" stroke="#546052" stroke-width="1.2" fill="none" stroke-linecap="round"/>
729
-
<path d="M72 61 Q88 64 100 68" stroke="#546052" stroke-width="1.2" fill="none" stroke-linecap="round"/>
730
-
</svg>`
628
+
img: `<img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/-d-whiskers-change-0.jpg?t=1771863543" alt="Whiskers change - absent" loading="lazy">`
731
629
},
732
630
{
733
631
score: 1, label: 'Slightly curved or straight (closer together)', sublabel: 'Moderately present or uncertain',
734
-
svg: `<svg viewBox="0 0 110 90" fill="none" xmlns="http://www.w3.org/2000/svg">
735
-
<ellipse cx="55" cy="52" rx="28" ry="24" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/>
736
-
<polygon points="33,36 24,16 44,32" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/>
737
-
<polygon points="77,36 86,16 66,32" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/>
738
-
<circle cx="44" cy="51" r="4" fill="#546052" opacity="0.6"/>
739
-
<circle cx="66" cy="51" r="4" fill="#546052" opacity="0.6"/>
740
-
<path d="M47 64 Q55 69 63 64" stroke="#546052" stroke-width="1.5" fill="none" stroke-linecap="round"/>
741
-
<!-- straighter whiskers -->
742
-
<line x1="38" y1="54" x2="10" y2="54" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/>
743
-
<line x1="38" y1="58" x2="10" y2="58" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/>
744
-
<line x1="38" y1="62" x2="10" y2="63" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/>
745
-
<line x1="72" y1="54" x2="100" y2="54" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/>
746
-
<line x1="72" y1="58" x2="100" y2="58" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/>
747
-
<line x1="72" y1="62" x2="100" y2="63" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/>
748
-
</svg>`
632
+
img: `<img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/-d-whiskers-change-1.jpg?t=1771863544" alt="Whiskers change - moderately present" loading="lazy">`
749
633
},
750
634
{
751
635
score: 2, label: 'Straight and moving forward', sublabel: 'Markedly present',
752
-
svg: `<svg viewBox="0 0 110 90" fill="none" xmlns="http://www.w3.org/2000/svg">
753
-
<ellipse cx="55" cy="52" rx="28" ry="24" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/>
754
-
<polygon points="33,36 24,16 44,32" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/>
755
-
<polygon points="77,36 86,16 66,32" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/>
756
-
<circle cx="44" cy="51" r="4" fill="#546052" opacity="0.6"/>
757
-
<circle cx="66" cy="51" r="4" fill="#546052" opacity="0.6"/>
758
-
<path d="M47 64 Q55 69 63 64" stroke="#546052" stroke-width="1.5" fill="none" stroke-linecap="round"/>
759
-
<!-- forward-pointing whiskers -->
760
-
<line x1="38" y1="55" x2="6" y2="51" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/>
761
-
<line x1="38" y1="58" x2="6" y2="58" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/>
762
-
<line x1="38" y1="61" x2="6" y2="65" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/>
763
-
<line x1="72" y1="55" x2="104" y2="51" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/>
764
-
<line x1="72" y1="58" x2="104" y2="58" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/>
765
-
<line x1="72" y1="61" x2="104" y2="65" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/>
766
-
</svg>`
636
+
img: `<img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/-d-whiskers-change-2.jpg?t=1771863545" alt="Whiskers change - markedly present" loading="lazy">`
767
637
}
768
638
]
769
639
},
···
773
643
options: [
774
644
{
775
645
score: 0, label: 'Head above the shoulder line', sublabel: 'Absent',
776
-
svg: `<svg viewBox="0 0 110 90" fill="none" xmlns="http://www.w3.org/2000/svg">
777
-
<!-- body -->
778
-
<ellipse cx="55" cy="72" rx="32" ry="16" fill="#dce6da" stroke="#546052" stroke-width="1.5"/>
779
-
<!-- head high -->
780
-
<ellipse cx="55" cy="40" rx="22" ry="20" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/>
781
-
<polygon points="40,26 32,10 50,24" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/>
782
-
<polygon points="70,26 78,10 60,24" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/>
783
-
<circle cx="46" cy="40" r="4" fill="#546052" opacity="0.6"/>
784
-
<circle cx="64" cy="40" r="4" fill="#546052" opacity="0.6"/>
785
-
<!-- shoulder line dashes -->
786
-
<line x1="10" y1="58" x2="100" y2="58" stroke="#aaa" stroke-width="1" stroke-dasharray="4,3"/>
787
-
</svg>`
646
+
img: `<img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/-e-head-position-0.jpg?t=1771863545" alt="Head position - absent" loading="lazy">`
788
647
},
789
648
{
790
649
score: 1, label: 'Head aligned with the shoulder line', sublabel: 'Moderately present or uncertain',
791
-
svg: `<svg viewBox="0 0 110 90" fill="none" xmlns="http://www.w3.org/2000/svg">
792
-
<ellipse cx="55" cy="72" rx="32" ry="16" fill="#dce6da" stroke="#546052" stroke-width="1.5"/>
793
-
<!-- head level -->
794
-
<ellipse cx="55" cy="52" rx="22" ry="20" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/>
795
-
<polygon points="40,38 32,20 50,36" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/>
796
-
<polygon points="70,38 78,20 60,36" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/>
797
-
<circle cx="46" cy="52" r="4" fill="#546052" opacity="0.6"/>
798
-
<circle cx="64" cy="52" r="4" fill="#546052" opacity="0.6"/>
799
-
<line x1="10" y1="58" x2="100" y2="58" stroke="#aaa" stroke-width="1" stroke-dasharray="4,3"/>
800
-
</svg>`
650
+
img: `<img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/-e-head-position-1.jpg?t=1771863546" alt="Head position - moderately present" loading="lazy">`
801
651
},
802
652
{
803
653
score: 2, label: 'Head below the shoulder line or tilted down', sublabel: 'Markedly present',
804
-
svg: `<svg viewBox="0 0 110 90" fill="none" xmlns="http://www.w3.org/2000/svg">
805
-
<ellipse cx="55" cy="72" rx="32" ry="14" fill="#dce6da" stroke="#546052" stroke-width="1.5"/>
806
-
<!-- head low/down -->
807
-
<ellipse cx="55" cy="66" rx="22" ry="18" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/>
808
-
<polygon points="40,52 33,34 50,50" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/>
809
-
<polygon points="70,52 77,34 60,50" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/>
810
-
<circle cx="46" cy="65" r="4" fill="#546052" opacity="0.6"/>
811
-
<circle cx="64" cy="65" r="4" fill="#546052" opacity="0.6"/>
812
-
<line x1="10" y1="58" x2="100" y2="58" stroke="#aaa" stroke-width="1" stroke-dasharray="4,3"/>
813
-
</svg>`
654
+
img: `<img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/-e-head-position-2.jpg?t=1771863547" alt="Head position - markedly present" loading="lazy">`
814
655
}
815
656
]
816
657
}
···
922
763
${unit.options.map(opt => `
923
764
<button class="option-btn" data-unit="${unit.id}" data-score="${opt.score}" aria-pressed="false">
924
765
<div class="score-pill">${opt.score}</div>
925
-
<div class="cat-illustration">${opt.svg}</div>
766
+
<div class="cat-illustration">${opt.img}</div>
926
767
<div class="option-label">${opt.label}</div>
927
768
<div class="option-sublabel">${opt.sublabel}</div>
928
769
</button>