44 featgrimace (#45) · rogerioromao.dev/purrform-frontend@65eb9ce

+234 -233

assets/scss/custom/layouts/_footer.scss

··· 1 1 .footer { 2 - background-color: $headingColor; 3 - padding-bottom: 0; 4 - // margin-top: 2rem; 5 - border: 0; 2 + background-color: $headingColor; 3 + padding-bottom: 0; 4 + // margin-top: 2rem; 5 + border: 0; 6 6 7 - .main-container { 8 - max-width: 95%; 9 - padding: 0 5px; 10 - } 7 + .main-container { 8 + max-width: 95%; 9 + padding: 0 5px; 10 + } 11 11 12 - .footer-info { 13 - justify-content: space-between !important; 14 - padding: 0; 15 - margin: 0 auto 1.5rem; 16 - width: 100%; 17 - .footer-info-col { 18 - &.col3 { 12 + .footer-info { 13 + justify-content: space-between !important; 19 14 padding: 0; 20 - } 15 + margin: 0 auto 1.5rem; 16 + width: 100%; 17 + .footer-info-col { 18 + &.col3 { 19 + padding: 0; 20 + } 21 21 22 - &.col3-desktop { 23 - display: none; 24 - @include breakpoint("medium") { 25 - display: block; 22 + &.col3-desktop { 23 + display: none; 24 + @include breakpoint('medium') { 25 + display: block; 26 + } 27 + } 26 28 } 27 - } 28 - } 29 - .footer-info-col, 30 - .footer-info-heading { 31 - color: $white-color; 32 - font-size: 18px; 33 - .footer-info-list { 34 - padding-left: 0; 35 - display: grid; 36 - grid-column-gap: 0; 37 - grid-row-gap: 0.2rem; 38 - grid-template-columns: 1fr 1fr; 39 - .empty-right, .empty-left { 40 - display: none; 41 - } 42 - @include breakpoint("medium") { 43 - margin: auto; 44 - grid-row-gap: 0.7rem; 45 - } 46 - li { 47 - position: relative; 48 - height: 45px; 29 + .footer-info-col, 30 + .footer-info-heading { 31 + color: $white-color; 32 + font-size: 18px; 33 + .footer-info-list { 34 + padding-left: 0; 35 + display: grid; 36 + grid-column-gap: 0; 37 + grid-row-gap: 0.2rem; 38 + grid-template-columns: 1fr 1fr; 39 + .empty-right, 40 + .empty-left { 41 + display: none; 42 + } 43 + @include breakpoint('medium') { 44 + margin: auto; 45 + grid-row-gap: 0.7rem; 46 + } 47 + li { 48 + position: relative; 49 + height: 45px; 49 50 50 - @include breakpoint("medium") { 51 - height: auto; 52 - } 53 - a { 54 - color: $white-color; 55 - } 51 + @include breakpoint('medium') { 52 + height: auto; 53 + } 54 + a { 55 + color: $white-color; 56 + } 56 57 57 - &.col3-mobile { 58 - display: block; 59 - h3 { 60 - margin: auto; 58 + &.col3-mobile { 59 + display: block; 60 + h3 { 61 + margin: auto; 62 + } 63 + address { 64 + a { 65 + padding-left: 27px; 66 + font-size: 15px; 67 + } 68 + } 69 + &.mobile-footer-address { 70 + strong { 71 + margin: 0; 72 + } 73 + a { 74 + display: none; 75 + } 76 + } 77 + @include breakpoint('medium') { 78 + display: none; 79 + } 80 + } 81 + } 61 82 } 62 83 address { 63 - a { 64 - padding-left: 27px; 65 - font-size: 15px; 66 - } 67 - } 68 - &.mobile-footer-address { 69 - strong { 70 - margin: 0; 71 - } 72 - a { 73 - display: none; 74 - } 75 - } 76 - @include breakpoint("medium") { 77 - display: none; 78 - } 79 - } 80 - } 81 - } 82 - address { 83 - font-style: normal; 84 - a { 85 - display: inline-block; 86 - border: 1px solid $gold-color; 87 - padding: 8px 5px; 88 - padding-left: 27px; 89 - border-radius: 10px; 90 - color: $secondary-color !important; 91 - background: url(https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/original/image-manager/ph-phone-call.png) 92 - 2px center no-repeat; 84 + font-style: normal; 85 + a { 86 + display: inline-block; 87 + border: 1px solid $gold-color; 88 + padding: 8px 5px; 89 + padding-left: 27px; 90 + border-radius: 10px; 91 + color: $secondary-color !important; 92 + background: url(https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/original/image-manager/ph-phone-call.png) 93 + 2px center no-repeat; 93 94 94 - @include breakpoint("medium") { 95 - padding: 8px 12px; 96 - padding-left: 40px; 97 - background: url(https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/original/image-manager/ph-phone-call.png) 98 - 10px center no-repeat; 99 - } 100 - } 95 + @include breakpoint('medium') { 96 + padding: 8px 12px; 97 + padding-left: 40px; 98 + background: url(https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/original/image-manager/ph-phone-call.png) 99 + 10px center no-repeat; 100 + } 101 + } 101 102 102 - strong { 103 - display: block; 104 - margin-top: 1rem; 105 - font-weight: 400; 106 - @include breakpoint("medium") { 107 - font-weight: 700; 108 - } 109 - } 110 - } 103 + strong { 104 + display: block; 105 + margin-top: 1rem; 106 + font-weight: 400; 107 + @include breakpoint('medium') { 108 + font-weight: 700; 109 + } 110 + } 111 + } 111 112 112 - &.newsletterSubscription { 113 - margin-top: 4.5rem; 114 - .footer-info-heading { 115 - width: 100%; 116 - @include breakpoint("medium") { 117 - width: 90%; 118 - } 119 - } 120 - p { 121 - display: none; 113 + &.newsletterSubscription { 114 + margin-top: 4.5rem; 115 + .footer-info-heading { 116 + width: 100%; 117 + @include breakpoint('medium') { 118 + width: 90%; 119 + } 120 + } 121 + p { 122 + display: none; 123 + } 124 + @include breakpoint('medium') { 125 + margin-top: 0; 126 + } 127 + } 122 128 } 123 - @include breakpoint("medium") { 124 - margin-top: 0; 129 + @include breakpoint('medium') { 130 + width: 100%; 125 131 } 126 - } 127 132 } 128 - @include breakpoint("medium") { 129 - width: 100%; 130 - } 131 - } 132 133 133 - .footer-pages { 134 - // flex: 70%; 135 - margin-left: 0; 136 - margin-bottom: 1.5rem; 137 - ul { 138 - grid-row-gap: 0.3rem; 139 - display: grid; 134 + .footer-pages { 135 + // flex: 70%; 136 + margin-left: 0; 137 + margin-bottom: 1.5rem; 138 + ul { 139 + grid-row-gap: 0.3rem; 140 + display: grid; 140 141 141 - @media only screen and (max-width: 801px) { 142 - grid-template-columns: 50% 50%; 142 + @media only screen and (max-width: 801px) { 143 + grid-template-columns: 50% 50%; 143 144 144 - column-width: 100px; 145 - column-gap: 10px; 145 + column-width: 100px; 146 + column-gap: 10px; 146 147 147 - /* grid-auto-flow: column; 148 + /* grid-auto-flow: column; 148 149 grid-template-rows: repeat(15, auto);*/ 149 - } 150 + } 151 + 152 + li { 153 + width: 100% !important; 154 + } 150 155 151 - li { 152 - width: 100% !important; 153 - } 156 + @include breakpoint('medium') { 157 + grid-template-columns: 50% 50%; 158 + } 159 + } 154 160 155 - @include breakpoint("medium") { 156 - grid-template-columns: 50% 50%; 157 - } 161 + @include breakpoint('medium') { 162 + margin-bottom: 0; 163 + } 158 164 } 159 165 160 - @include breakpoint("medium") { 161 - margin-bottom: 0; 162 - } 163 - } 166 + .newsletterSubscription { 167 + display: block; 164 168 165 - .newsletterSubscription { 166 - display: block; 169 + .form-input { 170 + border-radius: 32px; 171 + padding: 14px, 0px, 14px, 16px; 172 + font-size: 14px; 173 + } 167 174 168 - .form-input { 169 - border-radius: 32px; 170 - padding: 14px, 0px, 14px, 16px; 171 - font-size: 14px; 172 - } 175 + h3 { 176 + width: 100%; 177 + margin-bottom: 1.5rem; 178 + @include breakpoint('medium') { 179 + width: 75%; 180 + } 181 + } 173 182 174 - h3 { 175 - width: 100%; 176 - margin-bottom: 1.5rem; 177 - @include breakpoint("medium") { 178 - width: 75%; 179 - } 180 - } 183 + .socialLinks { 184 + display: flex; 185 + grid-gap: 0.6rem; 186 + justify-content: center; 187 + position: relative; 188 + bottom: 25px; 189 + .icon { 190 + height: 28px; 191 + width: 28px; 192 + svg { 193 + fill: $white-color; 194 + transform: scale(1.2, 1.2); 195 + } 196 + } 197 + @include breakpoint('medium') { 198 + justify-content: flex-start; 199 + } 200 + } 181 201 182 - .socialLinks { 183 - display: flex; 184 - grid-gap: 0.6rem; 185 - justify-content: center; 186 - position: relative; 187 - bottom: 25px; 188 - .icon { 189 - height: 28px; 190 - width: 28px; 191 - svg { 192 - fill: $white-color; 193 - transform: scale(1.2, 1.2); 202 + @media only screen and (max-width: 801px) { 203 + width: 100%; 204 + margin: auto; 205 + flex: 30%; 194 206 } 195 - } 196 - @include breakpoint("medium") { 197 - justify-content: flex-start; 198 - } 199 207 } 200 208 201 - @media only screen and (max-width: 801px) { 202 - width: 100%; 203 - margin: auto; 204 - flex: 30%; 205 - } 206 - } 209 + .footer-bottom { 210 + background-color: $white-color; 211 + 212 + padding: 0.5rem 0; 207 213 208 - .footer-bottom { 209 - background-color: $white-color; 214 + .container { 215 + grid-template-columns: 1fr; 216 + align-items: center; 210 217 211 - padding: 0.5rem 0; 218 + .footer-copyright { 219 + padding-top: 0.5rem; 220 + } 221 + ul { 222 + padding-top: 0.5rem; 223 + li { 224 + margin: auto; 225 + } 212 226 213 - .container { 214 - grid-template-columns: 1fr; 215 - align-items: center; 227 + li:nth-of-type(2) { 228 + display: none; 229 + } 230 + li:nth-of-type(3) { 231 + display: none; 232 + } 216 233 217 - .footer-copyright { 218 - padding-top: 0.5rem; 219 - } 220 - ul { 221 - padding-top: 0.5rem; 222 - li { 223 - margin: auto; 224 - } 234 + @include breakpoint('medium') { 235 + li:nth-of-type(2) { 236 + display: block; 237 + } 238 + li:nth-of-type(3) { 239 + display: block; 240 + } 241 + } 242 + } 225 243 226 - li:nth-of-type(2) { 227 - display: none; 228 - } 229 - li:nth-of-type(3) { 230 - display: none; 244 + @include breakpoint('medium') { 245 + grid-template-columns: 2fr 2fr 1fr; 246 + } 231 247 } 232 248 233 - @include breakpoint("medium") { 234 - li:nth-of-type(2) { 235 - display: block; 236 - } 237 - li:nth-of-type(3) { 238 - display: block; 239 - } 249 + .powered-by { 250 + color: $input-field-text; 251 + font-size: 14px; 240 252 } 241 - } 242 253 243 - @include breakpoint("medium") { 244 - grid-template-columns: 2fr 2fr 1fr; 245 - } 246 - } 254 + ul { 255 + margin: 0; 256 + list-style: none; 257 + display: flex; 247 258 248 - .powered-by { 249 - color: $input-field-text; 250 - font-size: 14px; 251 - } 259 + li { 260 + padding: 0 0.5rem; 261 + font-size: 14px; 252 262 253 - ul { 254 - margin: 0; 255 - list-style: none; 256 - display: flex; 257 - 258 - li { 259 - padding: 0 0.5rem; 260 - font-size: 14px; 261 - 262 - a { 263 - color: $input-field-text; 263 + a { 264 + color: $input-field-text; 265 + } 266 + } 264 267 } 265 - } 266 - } 267 268 268 - .footer-payment-icons { 269 - margin: 0; 270 - display: none; 271 - .footer-payment-icon { 272 - width: 58px; 273 - height: 40px; 274 - } 269 + .footer-payment-icons { 270 + margin: 0; 271 + display: none; 272 + .footer-payment-icon { 273 + width: 58px; 274 + height: 40px; 275 + } 275 276 276 - @include breakpoint("medium") { 277 - display: block; 278 - } 277 + @include breakpoint('medium') { 278 + display: flex; 279 + } 280 + } 279 281 } 280 - } 281 282 }

+1 -1

config.json

··· 1 1 { 2 - "name": "diet builder test v2", 2 + "name": "grimace scale page", 3 3 "version": "6.10.0", 4 4 "template_engine": "handlebars_v4", 5 5 "meta": {

+165 -158

templates/pages/custom/page/feline-grimace-scale.html

··· 8 8 :root { 9 9 --bg: #f7f4f0; 10 10 --card: #ffffff; 11 - --purple: #7b5ea7; 12 - --purple-light: #ede8f5; 13 - --purple-mid: #b39ddb; 14 - --accent: #e8a0bf; 15 - --text: #2c2240; 16 - --text-muted: #7a6e8a; 17 - --selected: #7b5ea7; 18 - --border: #e0d8ed; 11 + --purple: #546052; 12 + --purple-light: #edf1ec; 13 + --purple-mid: #859E7D; 14 + --accent: #a8c4a2; 15 + --text: #2a3329; 16 + --text-muted: #687E6B; 17 + --selected: #546052; 18 + --border: #d4ddd3; 19 19 --score-low: #4caf87; 20 20 --score-mid: #e8a020; 21 21 --score-high: #e05555; ··· 30 30 background: var(--bg); 31 31 color: var(--text); 32 32 min-height: 100vh; 33 - padding: 40px 20px 60px; 34 33 } 35 34 36 35 body::before { ··· 38 37 position: fixed; 39 38 top: -120px; right: -120px; 40 39 width: 420px; height: 420px; 41 - background: radial-gradient(circle, #c9b8e830 0%, transparent 70%); 40 + background: radial-gradient(circle, #859e7d30 0%, transparent 70%); 42 41 pointer-events: none; 43 42 z-index: 0; 44 43 } ··· 48 47 position: fixed; 49 48 bottom: -80px; left: -80px; 50 49 width: 320px; height: 320px; 51 - background: radial-gradient(circle, #e8a0bf20 0%, transparent 70%); 50 + background: radial-gradient(circle, #687e6b20 0%, transparent 70%); 52 51 pointer-events: none; 53 52 z-index: 0; 54 53 } ··· 142 141 margin-bottom: 24px; 143 142 overflow: hidden; 144 143 animation: fadeUp 0.5s ease both; 145 - box-shadow: 0 2px 20px #7b5ea708; 144 + box-shadow: 0 2px 20px #54605208; 146 145 transition: box-shadow var(--transition); 147 146 } 148 147 149 - .unit-card:hover { box-shadow: 0 6px 32px #7b5ea714; } 148 + .unit-card:hover { box-shadow: 0 6px 32px #54605214; } 150 149 .unit-card:nth-child(1) { animation-delay: 0.1s; } 151 150 .unit-card:nth-child(2) { animation-delay: 0.15s; } 152 151 .unit-card:nth-child(3) { animation-delay: 0.2s; } ··· 164 163 165 164 .unit-header h2 { 166 165 font-family: 'DM Sans', sans-serif; 166 + color: white; 167 167 font-size: 0.82rem; 168 168 font-weight: 600; 169 169 letter-spacing: 2px; ··· 273 273 background: var(--card); 274 274 border-radius: var(--radius); 275 275 border: 1.5px solid var(--border); 276 + margin-bottom: 24px; 276 277 overflow: hidden; 277 278 animation: fadeUp 0.5s 0.4s ease both; 278 - box-shadow: 0 2px 20px #7b5ea708; 279 + box-shadow: 0 2px 20px #54605208; 279 280 } 280 281 281 282 .score-panel-header { ··· 288 289 } 289 290 290 291 .score-panel-header h2 { 292 + color: white; 291 293 font-family: 'Playfair Display', serif; 292 294 font-size: 1.1rem; 293 295 font-weight: 600; ··· 339 341 340 342 .total-number { 341 343 font-family: 'Playfair Display', serif; 342 - font-size: 4rem; 344 + font-size: 3.6rem; 345 + margin-right: 3px; 343 346 font-weight: 700; 344 347 line-height: 1; 345 348 min-width: 80px; ··· 432 435 top: 0; 433 436 width: 2px; 434 437 height: 14px; 435 - background: #c0392b; 438 + background: var(--score-mid); 436 439 border-radius: 2px; 437 440 } 438 441 439 442 .cutoff-label { 440 443 position: absolute; 441 - left: 40%; 444 + left: calc(40% + 5px); 442 445 transform: translateX(-50%); 443 446 top: 0; 444 447 font-size: 0.65rem; 445 - color: #c0392b; 448 + color: var(--score-mid); 446 449 font-weight: 600; 447 450 white-space: nowrap; 448 451 padding-left: 6px; ··· 491 494 </header> 492 495 493 496 <div class="notice"> 494 - ⚠️ <strong>For owners:</strong> Always consult your vet before administering any medication. Some human pain killers can be fatal to cats. 497 + ⚠️ <strong>For owners:</strong> Always consult your vet before administering any medication. Some human pain killers can be fatal to cats. The FGS has been developed and validated for acute pain assessment. If the cat has a chronic condition, the FGS is not reliable. 495 498 </div> 496 499 497 500 <div class="instructions"> 498 - <strong>Wait until the cat has finished before scoring:</strong> 501 + <strong>Observe the cat in real-time.</strong> Observe the cat awake and undisturbed from a distance for 30 seconds and then 502 + score each FGS action unit. If the cat is doing any of the following, wait until they have finished before scoring. 499 503 <div class="wait-list"> 500 504 <span>🧹 Grooming</span> 501 505 <span>😴 Sleeping</span> ··· 508 512 509 513 <div class="score-panel"> 510 514 <div class="score-panel-header"> 511 - <span>📊</span> 512 515 <h2>Your Scores</h2> 513 516 </div> 514 517 <div class="score-breakdown" id="score-breakdown"></div> ··· 552 555 { 553 556 score: 0, label: 'Ears facing forward', sublabel: 'Absent', 554 557 svg: `<svg viewBox="0 0 110 90" fill="none" xmlns="http://www.w3.org/2000/svg"> 555 - <ellipse cx="55" cy="55" rx="30" ry="26" fill="#f0eaf8" stroke="#7b5ea7" stroke-width="1.5"/> 556 - <polygon points="32,36 22,14 44,30" fill="#f0eaf8" stroke="#7b5ea7" stroke-width="1.5" stroke-linejoin="round"/> 557 - <polygon points="78,36 88,14 66,30" fill="#f0eaf8" stroke="#7b5ea7" stroke-width="1.5" stroke-linejoin="round"/> 558 - <circle cx="44" cy="53" r="5" fill="#7b5ea7" opacity="0.7"/> 559 - <circle cx="66" cy="53" r="5" fill="#7b5ea7" opacity="0.7"/> 560 - <path d="M47 66 Q55 72 63 66" stroke="#7b5ea7" stroke-width="1.5" fill="none" stroke-linecap="round"/> 561 - <line x1="38" y1="56" x2="24" y2="52" stroke="#7b5ea7" stroke-width="1.2" stroke-linecap="round"/> 562 - <line x1="38" y1="59" x2="23" y2="59" stroke="#7b5ea7" stroke-width="1.2" stroke-linecap="round"/> 563 - <line x1="72" y1="56" x2="86" y2="52" stroke="#7b5ea7" stroke-width="1.2" stroke-linecap="round"/> 564 - <line x1="72" y1="59" x2="87" y2="59" stroke="#7b5ea7" stroke-width="1.2" stroke-linecap="round"/> 558 + <ellipse cx="55" cy="55" rx="30" ry="26" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 559 + <polygon points="32,36 22,14 44,30" fill="#edf1ec" stroke="#546052" stroke-width="1.5" stroke-linejoin="round"/> 560 + <polygon points="78,36 88,14 66,30" fill="#edf1ec" stroke="#546052" stroke-width="1.5" stroke-linejoin="round"/> 561 + <circle cx="44" cy="53" r="5" fill="#546052" opacity="0.7"/> 562 + <circle cx="66" cy="53" r="5" fill="#546052" opacity="0.7"/> 563 + <path d="M47 66 Q55 72 63 66" stroke="#546052" stroke-width="1.5" fill="none" stroke-linecap="round"/> 564 + <line x1="38" y1="56" x2="24" y2="52" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/> 565 + <line x1="38" y1="59" x2="23" y2="59" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/> 566 + <line x1="72" y1="56" x2="86" y2="52" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/> 567 + <line x1="72" y1="59" x2="87" y2="59" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/> 565 568 </svg>` 566 569 }, 567 570 { 568 571 score: 1, label: 'Ears slightly pulled apart', sublabel: 'Moderately present or uncertain', 569 572 svg: `<svg viewBox="0 0 110 90" fill="none" xmlns="http://www.w3.org/2000/svg"> 570 - <ellipse cx="55" cy="55" rx="30" ry="26" fill="#f0eaf8" stroke="#7b5ea7" stroke-width="1.5"/> 571 - <polygon points="32,36 16,18 40,32" fill="#f0eaf8" stroke="#7b5ea7" stroke-width="1.5" stroke-linejoin="round"/> 572 - <polygon points="78,36 94,18 70,32" fill="#f0eaf8" stroke="#7b5ea7" stroke-width="1.5" stroke-linejoin="round"/> 573 - <circle cx="44" cy="53" r="5" fill="#7b5ea7" opacity="0.7"/> 574 - <circle cx="66" cy="53" r="5" fill="#7b5ea7" opacity="0.7"/> 575 - <path d="M47 66 Q55 71 63 66" stroke="#7b5ea7" stroke-width="1.5" fill="none" stroke-linecap="round"/> 576 - <line x1="38" y1="56" x2="24" y2="52" stroke="#7b5ea7" stroke-width="1.2" stroke-linecap="round"/> 577 - <line x1="38" y1="59" x2="23" y2="59" stroke="#7b5ea7" stroke-width="1.2" stroke-linecap="round"/> 578 - <line x1="72" y1="56" x2="86" y2="52" stroke="#7b5ea7" stroke-width="1.2" stroke-linecap="round"/> 579 - <line x1="72" y1="59" x2="87" y2="59" stroke="#7b5ea7" stroke-width="1.2" stroke-linecap="round"/> 573 + <ellipse cx="55" cy="55" rx="30" ry="26" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 574 + <polygon points="32,36 16,18 40,32" fill="#edf1ec" stroke="#546052" stroke-width="1.5" stroke-linejoin="round"/> 575 + <polygon points="78,36 94,18 70,32" fill="#edf1ec" stroke="#546052" stroke-width="1.5" stroke-linejoin="round"/> 576 + <circle cx="44" cy="53" r="5" fill="#546052" opacity="0.7"/> 577 + <circle cx="66" cy="53" r="5" fill="#546052" opacity="0.7"/> 578 + <path d="M47 66 Q55 71 63 66" stroke="#546052" stroke-width="1.5" fill="none" stroke-linecap="round"/> 579 + <line x1="38" y1="56" x2="24" y2="52" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/> 580 + <line x1="38" y1="59" x2="23" y2="59" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/> 581 + <line x1="72" y1="56" x2="86" y2="52" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/> 582 + <line x1="72" y1="59" x2="87" y2="59" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/> 580 583 </svg>` 581 584 }, 582 585 { 583 586 score: 2, label: 'Ears rotated outwards', sublabel: 'Markedly present', 584 587 svg: `<svg viewBox="0 0 110 90" fill="none" xmlns="http://www.w3.org/2000/svg"> 585 - <ellipse cx="55" cy="55" rx="30" ry="26" fill="#f0eaf8" stroke="#7b5ea7" stroke-width="1.5"/> 586 - <polygon points="30,38 10,30 36,34" fill="#f0eaf8" stroke="#7b5ea7" stroke-width="1.5" stroke-linejoin="round"/> 587 - <polygon points="80,38 100,30 74,34" fill="#f0eaf8" stroke="#7b5ea7" stroke-width="1.5" stroke-linejoin="round"/> 588 - <circle cx="44" cy="53" r="5" fill="#7b5ea7" opacity="0.7"/> 589 - <circle cx="66" cy="53" r="5" fill="#7b5ea7" opacity="0.7"/> 590 - <path d="M47 66 Q55 70 63 66" stroke="#7b5ea7" stroke-width="1.5" fill="none" stroke-linecap="round"/> 591 - <line x1="38" y1="56" x2="24" y2="52" stroke="#7b5ea7" stroke-width="1.2" stroke-linecap="round"/> 592 - <line x1="38" y1="59" x2="23" y2="59" stroke="#7b5ea7" stroke-width="1.2" stroke-linecap="round"/> 593 - <line x1="72" y1="56" x2="86" y2="52" stroke="#7b5ea7" stroke-width="1.2" stroke-linecap="round"/> 594 - <line x1="72" y1="59" x2="87" y2="59" stroke="#7b5ea7" stroke-width="1.2" stroke-linecap="round"/> 588 + <ellipse cx="55" cy="55" rx="30" ry="26" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 589 + <polygon points="30,38 10,30 36,34" fill="#edf1ec" stroke="#546052" stroke-width="1.5" stroke-linejoin="round"/> 590 + <polygon points="80,38 100,30 74,34" fill="#edf1ec" stroke="#546052" stroke-width="1.5" stroke-linejoin="round"/> 591 + <circle cx="44" cy="53" r="5" fill="#546052" opacity="0.7"/> 592 + <circle cx="66" cy="53" r="5" fill="#546052" opacity="0.7"/> 593 + <path d="M47 66 Q55 70 63 66" stroke="#546052" stroke-width="1.5" fill="none" stroke-linecap="round"/> 594 + <line x1="38" y1="56" x2="24" y2="52" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/> 595 + <line x1="38" y1="59" x2="23" y2="59" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/> 596 + <line x1="72" y1="56" x2="86" y2="52" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/> 597 + <line x1="72" y1="59" x2="87" y2="59" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/> 595 598 </svg>` 596 599 } 597 600 ] ··· 603 606 { 604 607 score: 0, label: 'Eyes opened', sublabel: 'Absent', 605 608 svg: `<svg viewBox="0 0 110 90" fill="none" xmlns="http://www.w3.org/2000/svg"> 606 - <ellipse cx="55" cy="52" rx="30" ry="26" fill="#f0eaf8" stroke="#7b5ea7" stroke-width="1.5"/> 607 - <polygon points="32,34 22,14 44,30" fill="#f0eaf8" stroke="#7b5ea7" stroke-width="1.5"/> 608 - <polygon points="78,34 88,14 66,30" fill="#f0eaf8" stroke="#7b5ea7" stroke-width="1.5"/> 609 - <ellipse cx="42" cy="50" rx="8" ry="8" fill="white" stroke="#7b5ea7" stroke-width="1.5"/> 610 - <ellipse cx="68" cy="50" rx="8" ry="8" fill="white" stroke="#7b5ea7" stroke-width="1.5"/> 611 - <circle cx="42" cy="50" r="4" fill="#3a2a5a"/> 612 - <circle cx="68" cy="50" r="4" fill="#3a2a5a"/> 609 + <ellipse cx="55" cy="52" rx="30" ry="26" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 610 + <polygon points="32,34 22,14 44,30" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 611 + <polygon points="78,34 88,14 66,30" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 612 + <ellipse cx="42" cy="50" rx="8" ry="8" fill="white" stroke="#546052" stroke-width="1.5"/> 613 + <ellipse cx="68" cy="50" rx="8" ry="8" fill="white" stroke="#546052" stroke-width="1.5"/> 614 + <circle cx="42" cy="50" r="4" fill="#2a3329"/> 615 + <circle cx="68" cy="50" r="4" fill="#2a3329"/> 613 616 <circle cx="44" cy="48" r="1.5" fill="white"/> 614 617 <circle cx="70" cy="48" r="1.5" fill="white"/> 615 - <path d="M47 65 Q55 70 63 65" stroke="#7b5ea7" stroke-width="1.5" fill="none" stroke-linecap="round"/> 618 + <path d="M47 65 Q55 70 63 65" stroke="#546052" stroke-width="1.5" fill="none" stroke-linecap="round"/> 616 619 </svg>` 617 620 }, 618 621 { 619 622 score: 1, label: 'Partially closed eyes', sublabel: 'Moderately present or uncertain', 620 623 svg: `<svg viewBox="0 0 110 90" fill="none" xmlns="http://www.w3.org/2000/svg"> 621 - <ellipse cx="55" cy="52" rx="30" ry="26" fill="#f0eaf8" stroke="#7b5ea7" stroke-width="1.5"/> 622 - <polygon points="32,34 22,14 44,30" fill="#f0eaf8" stroke="#7b5ea7" stroke-width="1.5"/> 623 - <polygon points="78,34 88,14 66,30" fill="#f0eaf8" stroke="#7b5ea7" stroke-width="1.5"/> 624 - <ellipse cx="42" cy="50" rx="8" ry="5.5" fill="white" stroke="#7b5ea7" stroke-width="1.5"/> 625 - <ellipse cx="68" cy="50" rx="8" ry="5.5" fill="white" stroke="#7b5ea7" stroke-width="1.5"/> 626 - <circle cx="42" cy="51" r="3.5" fill="#3a2a5a"/> 627 - <circle cx="68" cy="51" r="3.5" fill="#3a2a5a"/> 628 - <line x1="34" y1="45" x2="50" y2="45" stroke="#7b5ea7" stroke-width="1.8" stroke-linecap="round"/> 629 - <line x1="60" y1="45" x2="76" y2="45" stroke="#7b5ea7" stroke-width="1.8" stroke-linecap="round"/> 630 - <path d="M47 65 Q55 70 63 65" stroke="#7b5ea7" stroke-width="1.5" fill="none" stroke-linecap="round"/> 624 + <ellipse cx="55" cy="52" rx="30" ry="26" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 625 + <polygon points="32,34 22,14 44,30" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 626 + <polygon points="78,34 88,14 66,30" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 627 + <ellipse cx="42" cy="50" rx="8" ry="5.5" fill="white" stroke="#546052" stroke-width="1.5"/> 628 + <ellipse cx="68" cy="50" rx="8" ry="5.5" fill="white" stroke="#546052" stroke-width="1.5"/> 629 + <circle cx="42" cy="51" r="3.5" fill="#2a3329"/> 630 + <circle cx="68" cy="51" r="3.5" fill="#2a3329"/> 631 + <line x1="34" y1="45" x2="50" y2="45" stroke="#546052" stroke-width="1.8" stroke-linecap="round"/> 632 + <line x1="60" y1="45" x2="76" y2="45" stroke="#546052" stroke-width="1.8" stroke-linecap="round"/> 633 + <path d="M47 65 Q55 70 63 65" stroke="#546052" stroke-width="1.5" fill="none" stroke-linecap="round"/> 631 634 </svg>` 632 635 }, 633 636 { 634 637 score: 2, label: 'Squinted eyes', sublabel: 'Markedly present', 635 638 svg: `<svg viewBox="0 0 110 90" fill="none" xmlns="http://www.w3.org/2000/svg"> 636 - <ellipse cx="55" cy="52" rx="30" ry="26" fill="#f0eaf8" stroke="#7b5ea7" stroke-width="1.5"/> 637 - <polygon points="32,34 22,14 44,30" fill="#f0eaf8" stroke="#7b5ea7" stroke-width="1.5"/> 638 - <polygon points="78,34 88,14 66,30" fill="#f0eaf8" stroke="#7b5ea7" stroke-width="1.5"/> 639 - <ellipse cx="42" cy="52" rx="8" ry="3" fill="white" stroke="#7b5ea7" stroke-width="1.5"/> 640 - <ellipse cx="68" cy="52" rx="8" ry="3" fill="white" stroke="#7b5ea7" stroke-width="1.5"/> 641 - <circle cx="42" cy="52" r="2" fill="#3a2a5a"/> 642 - <circle cx="68" cy="52" r="2" fill="#3a2a5a"/> 643 - <line x1="34" y1="49" x2="50" y2="49" stroke="#7b5ea7" stroke-width="2" stroke-linecap="round"/> 644 - <line x1="60" y1="49" x2="76" y2="49" stroke="#7b5ea7" stroke-width="2" stroke-linecap="round"/> 645 - <path d="M47 66 Q55 70 63 66" stroke="#7b5ea7" stroke-width="1.5" fill="none" stroke-linecap="round"/> 639 + <ellipse cx="55" cy="52" rx="30" ry="26" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 640 + <polygon points="32,34 22,14 44,30" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 641 + <polygon points="78,34 88,14 66,30" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 642 + <ellipse cx="42" cy="52" rx="8" ry="3" fill="white" stroke="#546052" stroke-width="1.5"/> 643 + <ellipse cx="68" cy="52" rx="8" ry="3" fill="white" stroke="#546052" stroke-width="1.5"/> 644 + <circle cx="42" cy="52" r="2" fill="#2a3329"/> 645 + <circle cx="68" cy="52" r="2" fill="#2a3329"/> 646 + <line x1="34" y1="49" x2="50" y2="49" stroke="#546052" stroke-width="2" stroke-linecap="round"/> 647 + <line x1="60" y1="49" x2="76" y2="49" stroke="#546052" stroke-width="2" stroke-linecap="round"/> 648 + <path d="M47 66 Q55 70 63 66" stroke="#546052" stroke-width="1.5" fill="none" stroke-linecap="round"/> 646 649 </svg>` 647 650 } 648 651 ] ··· 654 657 { 655 658 score: 0, label: 'Relaxed (round shape)', sublabel: 'Absent', 656 659 svg: `<svg viewBox="0 0 110 90" fill="none" xmlns="http://www.w3.org/2000/svg"> 657 - <ellipse cx="55" cy="52" rx="30" ry="26" fill="#f0eaf8" stroke="#7b5ea7" stroke-width="1.5"/> 658 - <polygon points="32,34 22,14 44,30" fill="#f0eaf8" stroke="#7b5ea7" stroke-width="1.5"/> 659 - <polygon points="78,34 88,14 66,30" fill="#f0eaf8" stroke="#7b5ea7" stroke-width="1.5"/> 660 - <circle cx="44" cy="50" r="4.5" fill="#7b5ea7" opacity="0.6"/> 661 - <circle cx="66" cy="50" r="4.5" fill="#7b5ea7" opacity="0.6"/> 662 - <ellipse cx="55" cy="62" rx="12" ry="10" fill="white" stroke="#7b5ea7" stroke-width="1.5"/> 663 - <ellipse cx="55" cy="62" rx="8" ry="7" fill="#f0eaf8"/> 664 - <path d="M47 67 Q55 73 63 67" stroke="#7b5ea7" stroke-width="1.5" fill="none" stroke-linecap="round"/> 660 + <ellipse cx="55" cy="52" rx="30" ry="26" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 661 + <polygon points="32,34 22,14 44,30" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 662 + <polygon points="78,34 88,14 66,30" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 663 + <circle cx="44" cy="47" r="4.5" fill="#546052" opacity="0.6"/> 664 + <circle cx="66" cy="47" r="4.5" fill="#546052" opacity="0.6"/> 665 + <ellipse cx="55" cy="58" rx="3" ry="2" fill="#546052" opacity="0.55"/> 666 + <line x1="55" y1="60" x2="55" y2="64" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/> 667 + <path d="M 41,61 A 7,7 0 1,0 55,61" fill="#edf1ec" stroke="#546052" stroke-width="1.3" stroke-linecap="round"/> 668 + <path d="M 55,61 A 7,7 0 1,0 69,61" fill="#edf1ec" stroke="#546052" stroke-width="1.3" stroke-linecap="round"/> 665 669 </svg>` 666 670 }, 667 671 { 668 672 score: 1, label: 'Mild tension', sublabel: 'Moderately present or uncertain', 669 673 svg: `<svg viewBox="0 0 110 90" fill="none" xmlns="http://www.w3.org/2000/svg"> 670 - <ellipse cx="55" cy="52" rx="30" ry="26" fill="#f0eaf8" stroke="#7b5ea7" stroke-width="1.5"/> 671 - <polygon points="32,34 22,14 44,30" fill="#f0eaf8" stroke="#7b5ea7" stroke-width="1.5"/> 672 - <polygon points="78,34 88,14 66,30" fill="#f0eaf8" stroke="#7b5ea7" stroke-width="1.5"/> 673 - <circle cx="44" cy="50" r="4.5" fill="#7b5ea7" opacity="0.6"/> 674 - <circle cx="66" cy="50" r="4.5" fill="#7b5ea7" opacity="0.6"/> 675 - <ellipse cx="55" cy="62" rx="11" ry="8.5" fill="white" stroke="#7b5ea7" stroke-width="1.5"/> 676 - <path d="M47 67 Q55 72 63 67" stroke="#7b5ea7" stroke-width="1.5" fill="none" stroke-linecap="round"/> 674 + <ellipse cx="55" cy="52" rx="30" ry="26" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 675 + <polygon points="32,34 22,14 44,30" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 676 + <polygon points="78,34 88,14 66,30" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 677 + <circle cx="44" cy="47" r="4.5" fill="#546052" opacity="0.6"/> 678 + <circle cx="66" cy="47" r="4.5" fill="#546052" opacity="0.6"/> 679 + <ellipse cx="55" cy="58" rx="3" ry="2" fill="#546052" opacity="0.55"/> 680 + <line x1="55" y1="60" x2="55" y2="64" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/> 681 + <path d="M 40,62 A 9,6 0 1,0 52,62" fill="#edf1ec" stroke="#546052" stroke-width="1.3" stroke-linecap="round"/> 682 + <path d="M 58,62 A 9,6 0 1,0 70,62" fill="#edf1ec" stroke="#546052" stroke-width="1.3" stroke-linecap="round"/> 677 683 </svg>` 678 684 }, 679 685 { 680 686 score: 2, label: 'Tense (elliptical shape)', sublabel: 'Markedly present', 681 687 svg: `<svg viewBox="0 0 110 90" fill="none" xmlns="http://www.w3.org/2000/svg"> 682 - <ellipse cx="55" cy="52" rx="30" ry="26" fill="#f0eaf8" stroke="#7b5ea7" stroke-width="1.5"/> 683 - <polygon points="32,34 22,14 44,30" fill="#f0eaf8" stroke="#7b5ea7" stroke-width="1.5"/> 684 - <polygon points="78,34 88,14 66,30" fill="#f0eaf8" stroke="#7b5ea7" stroke-width="1.5"/> 685 - <circle cx="44" cy="50" r="4.5" fill="#7b5ea7" opacity="0.6"/> 686 - <circle cx="66" cy="50" r="4.5" fill="#7b5ea7" opacity="0.6"/> 687 - <ellipse cx="55" cy="62" rx="14" ry="6" fill="white" stroke="#7b5ea7" stroke-width="1.5"/> 688 - <path d="M47 65 Q55 68 63 65" stroke="#7b5ea7" stroke-width="1.5" fill="none" stroke-linecap="round"/> 688 + <ellipse cx="55" cy="52" rx="30" ry="26" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 689 + <polygon points="32,34 22,14 44,30" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 690 + <polygon points="78,34 88,14 66,30" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 691 + <circle cx="44" cy="47" r="4.5" fill="#546052" opacity="0.6"/> 692 + <circle cx="66" cy="47" r="4.5" fill="#546052" opacity="0.6"/> 693 + <ellipse cx="55" cy="58" rx="3" ry="2" fill="#546052" opacity="0.55"/> 694 + <line x1="55" y1="60" x2="55" y2="64" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/> 695 + <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"/> 696 + <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"/> 689 697 </svg>` 690 698 } 691 699 ] ··· 697 705 { 698 706 score: 0, label: 'Loose and curved', sublabel: 'Absent', 699 707 svg: `<svg viewBox="0 0 110 90" fill="none" xmlns="http://www.w3.org/2000/svg"> 700 - <ellipse cx="55" cy="52" rx="28" ry="24" fill="#f0eaf8" stroke="#7b5ea7" stroke-width="1.5"/> 701 - <polygon points="33,36 24,16 44,32" fill="#f0eaf8" stroke="#7b5ea7" stroke-width="1.5"/> 702 - <polygon points="77,36 86,16 66,32" fill="#f0eaf8" stroke="#7b5ea7" stroke-width="1.5"/> 703 - <circle cx="44" cy="51" r="4" fill="#7b5ea7" opacity="0.6"/> 704 - <circle cx="66" cy="51" r="4" fill="#7b5ea7" opacity="0.6"/> 705 - <path d="M47 64 Q55 69 63 64" stroke="#7b5ea7" stroke-width="1.5" fill="none" stroke-linecap="round"/> 708 + <ellipse cx="55" cy="52" rx="28" ry="24" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 709 + <polygon points="33,36 24,16 44,32" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 710 + <polygon points="77,36 86,16 66,32" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 711 + <circle cx="44" cy="51" r="4" fill="#546052" opacity="0.6"/> 712 + <circle cx="66" cy="51" r="4" fill="#546052" opacity="0.6"/> 713 + <path d="M47 64 Q55 69 63 64" stroke="#546052" stroke-width="1.5" fill="none" stroke-linecap="round"/> 706 714  707 - <path d="M38 53 Q22 50 10 53" stroke="#7b5ea7" stroke-width="1.2" fill="none" stroke-linecap="round"/> 708 - <path d="M38 57 Q22 57 10 60" stroke="#7b5ea7" stroke-width="1.2" fill="none" stroke-linecap="round"/> 709 - <path d="M38 61 Q22 64 10 68" stroke="#7b5ea7" stroke-width="1.2" fill="none" stroke-linecap="round"/> 710 - <path d="M72 53 Q88 50 100 53" stroke="#7b5ea7" stroke-width="1.2" fill="none" stroke-linecap="round"/> 711 - <path d="M72 57 Q88 57 100 60" stroke="#7b5ea7" stroke-width="1.2" fill="none" stroke-linecap="round"/> 712 - <path d="M72 61 Q88 64 100 68" stroke="#7b5ea7" stroke-width="1.2" fill="none" stroke-linecap="round"/> 715 + <path d="M38 53 Q22 50 10 53" stroke="#546052" stroke-width="1.2" fill="none" stroke-linecap="round"/> 716 + <path d="M38 57 Q22 57 10 60" stroke="#546052" stroke-width="1.2" fill="none" stroke-linecap="round"/> 717 + <path d="M38 61 Q22 64 10 68" stroke="#546052" stroke-width="1.2" fill="none" stroke-linecap="round"/> 718 + <path d="M72 53 Q88 50 100 53" stroke="#546052" stroke-width="1.2" fill="none" stroke-linecap="round"/> 719 + <path d="M72 57 Q88 57 100 60" stroke="#546052" stroke-width="1.2" fill="none" stroke-linecap="round"/> 720 + <path d="M72 61 Q88 64 100 68" stroke="#546052" stroke-width="1.2" fill="none" stroke-linecap="round"/> 713 721 </svg>` 714 722 }, 715 723 { 716 724 score: 1, label: 'Slightly curved or straight (closer together)', sublabel: 'Moderately present or uncertain', 717 725 svg: `<svg viewBox="0 0 110 90" fill="none" xmlns="http://www.w3.org/2000/svg"> 718 - <ellipse cx="55" cy="52" rx="28" ry="24" fill="#f0eaf8" stroke="#7b5ea7" stroke-width="1.5"/> 719 - <polygon points="33,36 24,16 44,32" fill="#f0eaf8" stroke="#7b5ea7" stroke-width="1.5"/> 720 - <polygon points="77,36 86,16 66,32" fill="#f0eaf8" stroke="#7b5ea7" stroke-width="1.5"/> 721 - <circle cx="44" cy="51" r="4" fill="#7b5ea7" opacity="0.6"/> 722 - <circle cx="66" cy="51" r="4" fill="#7b5ea7" opacity="0.6"/> 723 - <path d="M47 64 Q55 69 63 64" stroke="#7b5ea7" stroke-width="1.5" fill="none" stroke-linecap="round"/> 726 + <ellipse cx="55" cy="52" rx="28" ry="24" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 727 + <polygon points="33,36 24,16 44,32" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 728 + <polygon points="77,36 86,16 66,32" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 729 + <circle cx="44" cy="51" r="4" fill="#546052" opacity="0.6"/> 730 + <circle cx="66" cy="51" r="4" fill="#546052" opacity="0.6"/> 731 + <path d="M47 64 Q55 69 63 64" stroke="#546052" stroke-width="1.5" fill="none" stroke-linecap="round"/> 724 732  725 - <line x1="38" y1="54" x2="10" y2="54" stroke="#7b5ea7" stroke-width="1.2" stroke-linecap="round"/> 726 - <line x1="38" y1="58" x2="10" y2="58" stroke="#7b5ea7" stroke-width="1.2" stroke-linecap="round"/> 727 - <line x1="38" y1="62" x2="10" y2="63" stroke="#7b5ea7" stroke-width="1.2" stroke-linecap="round"/> 728 - <line x1="72" y1="54" x2="100" y2="54" stroke="#7b5ea7" stroke-width="1.2" stroke-linecap="round"/> 729 - <line x1="72" y1="58" x2="100" y2="58" stroke="#7b5ea7" stroke-width="1.2" stroke-linecap="round"/> 730 - <line x1="72" y1="62" x2="100" y2="63" stroke="#7b5ea7" stroke-width="1.2" stroke-linecap="round"/> 733 + <line x1="38" y1="54" x2="10" y2="54" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/> 734 + <line x1="38" y1="58" x2="10" y2="58" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/> 735 + <line x1="38" y1="62" x2="10" y2="63" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/> 736 + <line x1="72" y1="54" x2="100" y2="54" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/> 737 + <line x1="72" y1="58" x2="100" y2="58" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/> 738 + <line x1="72" y1="62" x2="100" y2="63" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/> 731 739 </svg>` 732 740 }, 733 741 { 734 742 score: 2, label: 'Straight and moving forward', sublabel: 'Markedly present', 735 743 svg: `<svg viewBox="0 0 110 90" fill="none" xmlns="http://www.w3.org/2000/svg"> 736 - <ellipse cx="55" cy="52" rx="28" ry="24" fill="#f0eaf8" stroke="#7b5ea7" stroke-width="1.5"/> 737 - <polygon points="33,36 24,16 44,32" fill="#f0eaf8" stroke="#7b5ea7" stroke-width="1.5"/> 738 - <polygon points="77,36 86,16 66,32" fill="#f0eaf8" stroke="#7b5ea7" stroke-width="1.5"/> 739 - <circle cx="44" cy="51" r="4" fill="#7b5ea7" opacity="0.6"/> 740 - <circle cx="66" cy="51" r="4" fill="#7b5ea7" opacity="0.6"/> 741 - <path d="M47 64 Q55 69 63 64" stroke="#7b5ea7" stroke-width="1.5" fill="none" stroke-linecap="round"/> 744 + <ellipse cx="55" cy="52" rx="28" ry="24" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 745 + <polygon points="33,36 24,16 44,32" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 746 + <polygon points="77,36 86,16 66,32" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 747 + <circle cx="44" cy="51" r="4" fill="#546052" opacity="0.6"/> 748 + <circle cx="66" cy="51" r="4" fill="#546052" opacity="0.6"/> 749 + <path d="M47 64 Q55 69 63 64" stroke="#546052" stroke-width="1.5" fill="none" stroke-linecap="round"/> 742 750  743 - <line x1="38" y1="55" x2="6" y2="51" stroke="#7b5ea7" stroke-width="1.2" stroke-linecap="round"/> 744 - <line x1="38" y1="58" x2="6" y2="58" stroke="#7b5ea7" stroke-width="1.2" stroke-linecap="round"/> 745 - <line x1="38" y1="61" x2="6" y2="65" stroke="#7b5ea7" stroke-width="1.2" stroke-linecap="round"/> 746 - <line x1="72" y1="55" x2="104" y2="51" stroke="#7b5ea7" stroke-width="1.2" stroke-linecap="round"/> 747 - <line x1="72" y1="58" x2="104" y2="58" stroke="#7b5ea7" stroke-width="1.2" stroke-linecap="round"/> 748 - <line x1="72" y1="61" x2="104" y2="65" stroke="#7b5ea7" stroke-width="1.2" stroke-linecap="round"/> 751 + <line x1="38" y1="55" x2="6" y2="51" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/> 752 + <line x1="38" y1="58" x2="6" y2="58" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/> 753 + <line x1="38" y1="61" x2="6" y2="65" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/> 754 + <line x1="72" y1="55" x2="104" y2="51" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/> 755 + <line x1="72" y1="58" x2="104" y2="58" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/> 756 + <line x1="72" y1="61" x2="104" y2="65" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/> 749 757 </svg>` 750 758 } 751 759 ] ··· 758 766 score: 0, label: 'Head above the shoulder line', sublabel: 'Absent', 759 767 svg: `<svg viewBox="0 0 110 90" fill="none" xmlns="http://www.w3.org/2000/svg"> 760 768  761 - <ellipse cx="55" cy="72" rx="32" ry="16" fill="#e8e0f4" stroke="#7b5ea7" stroke-width="1.5"/> 769 + <ellipse cx="55" cy="72" rx="32" ry="16" fill="#dce6da" stroke="#546052" stroke-width="1.5"/> 762 770  763 - <ellipse cx="55" cy="40" rx="22" ry="20" fill="#f0eaf8" stroke="#7b5ea7" stroke-width="1.5"/> 764 - <polygon points="40,26 32,10 50,24" fill="#f0eaf8" stroke="#7b5ea7" stroke-width="1.5"/> 765 - <polygon points="70,26 78,10 60,24" fill="#f0eaf8" stroke="#7b5ea7" stroke-width="1.5"/> 766 - <circle cx="46" cy="40" r="4" fill="#7b5ea7" opacity="0.6"/> 767 - <circle cx="64" cy="40" r="4" fill="#7b5ea7" opacity="0.6"/> 771 + <ellipse cx="55" cy="40" rx="22" ry="20" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 772 + <polygon points="40,26 32,10 50,24" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 773 + <polygon points="70,26 78,10 60,24" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 774 + <circle cx="46" cy="40" r="4" fill="#546052" opacity="0.6"/> 775 + <circle cx="64" cy="40" r="4" fill="#546052" opacity="0.6"/> 768 776  769 777 <line x1="10" y1="58" x2="100" y2="58" stroke="#aaa" stroke-width="1" stroke-dasharray="4,3"/> 770 778 </svg>` ··· 772 780 { 773 781 score: 1, label: 'Head aligned with the shoulder line', sublabel: 'Moderately present or uncertain', 774 782 svg: `<svg viewBox="0 0 110 90" fill="none" xmlns="http://www.w3.org/2000/svg"> 775 - <ellipse cx="55" cy="72" rx="32" ry="16" fill="#e8e0f4" stroke="#7b5ea7" stroke-width="1.5"/> 783 + <ellipse cx="55" cy="72" rx="32" ry="16" fill="#dce6da" stroke="#546052" stroke-width="1.5"/> 776 784  777 - <ellipse cx="55" cy="52" rx="22" ry="20" fill="#f0eaf8" stroke="#7b5ea7" stroke-width="1.5"/> 778 - <polygon points="40,38 32,20 50,36" fill="#f0eaf8" stroke="#7b5ea7" stroke-width="1.5"/> 779 - <polygon points="70,38 78,20 60,36" fill="#f0eaf8" stroke="#7b5ea7" stroke-width="1.5"/> 780 - <circle cx="46" cy="52" r="4" fill="#7b5ea7" opacity="0.6"/> 781 - <circle cx="64" cy="52" r="4" fill="#7b5ea7" opacity="0.6"/> 785 + <ellipse cx="55" cy="52" rx="22" ry="20" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 786 + <polygon points="40,38 32,20 50,36" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 787 + <polygon points="70,38 78,20 60,36" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 788 + <circle cx="46" cy="52" r="4" fill="#546052" opacity="0.6"/> 789 + <circle cx="64" cy="52" r="4" fill="#546052" opacity="0.6"/> 782 790 <line x1="10" y1="58" x2="100" y2="58" stroke="#aaa" stroke-width="1" stroke-dasharray="4,3"/> 783 791 </svg>` 784 792 }, 785 793 { 786 794 score: 2, label: 'Head below the shoulder line or tilted down', sublabel: 'Markedly present', 787 795 svg: `<svg viewBox="0 0 110 90" fill="none" xmlns="http://www.w3.org/2000/svg"> 788 - <ellipse cx="55" cy="72" rx="32" ry="14" fill="#e8e0f4" stroke="#7b5ea7" stroke-width="1.5"/> 796 + <ellipse cx="55" cy="72" rx="32" ry="14" fill="#dce6da" stroke="#546052" stroke-width="1.5"/> 789 797  790 - <ellipse cx="55" cy="66" rx="22" ry="18" fill="#f0eaf8" stroke="#7b5ea7" stroke-width="1.5"/> 791 - <polygon points="40,52 33,34 50,50" fill="#f0eaf8" stroke="#7b5ea7" stroke-width="1.5"/> 792 - <polygon points="70,52 77,34 60,50" fill="#f0eaf8" stroke="#7b5ea7" stroke-width="1.5"/> 793 - <circle cx="46" cy="65" r="4" fill="#7b5ea7" opacity="0.6"/> 794 - <circle cx="64" cy="65" r="4" fill="#7b5ea7" opacity="0.6"/> 798 + <ellipse cx="55" cy="66" rx="22" ry="18" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 799 + <polygon points="40,52 33,34 50,50" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 800 + <polygon points="70,52 77,34 60,50" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 801 + <circle cx="46" cy="65" r="4" fill="#546052" opacity="0.6"/> 802 + <circle cx="64" cy="65" r="4" fill="#546052" opacity="0.6"/> 795 803 <line x1="10" y1="58" x2="100" y2="58" stroke="#aaa" stroke-width="1" stroke-dasharray="4,3"/> 796 804 </svg>` 797 805 } ··· 830 838 function getInterpText(total) { 831 839 if (total === 0) return 'This cat is not in pain. If you are a cat owner and are concerned, please consult your veterinary surgeon.'; 832 840 if (total <= 3) return 'This cat is not in pain or has mild pain. Pain should be re-evaluated at regular intervals since FGS scores could increase, and the cat might require analgesics.'; 833 - if (total <= 8) return 'This cat is likely to be in pain. This score indicates the need for additional analgesia. This decision should be made by a veterinary surgeon based on clinical judgement. If in doubt, reassess in 10–15 minutes.'; 834 - return 'This cat is likely to be in severe pain. This score indicates the need for additional analgesia. This decision should be made by a veterinary surgeon. If in doubt, reassess in 10–15 minutes.'; 841 + if (total <= 8) return 'This cat is likely to be in pain. This score indicates the need for additional analgesia. This decision should be made by a veterinary surgeon based on clinical judgement. If in doubt, reassess in 10–15 minutes. Clinical judgement will differentiate if the FGS scores are high due to pain, rather than other factors such as stress, fear or sedation.'; 842 + return 'This cat is likely to be in severe pain. This score indicates the need for additional analgesia. This decision should be made by a veterinary surgeon. If in doubt, reassess in 10–15 minutes. Clinical judgement will differentiate if the FGS scores are high due to pain, rather than other factors such as stress, fear or sedation.'; 835 843 } 836 844 837 845 function updateScorePanel() { ··· 939 947 updateScorePanel(); 940 948 </script> 941 949 </body> 942 - </html> 943 950 944 951 {{/partial}} 945 952 {{> layout/base}}

Configure Feed

Configure Feed