+1 -2

assets/scss/custom/_marketing-tokens.scss

reviewed

··· 1 1 // ── Shared Marketing Page Tokens ─────────────────────────────────────── 2 2 // Used by Diet Builder, Feline Grimace Scale, and any future marketing/tool 3 3 // pages that follow this design language. 4 4 - // 5 4 // Individual page files alias these into their own namespace (--db-*, --fgs-*) 6 5 // so they can override per-page without breaking others. 7 6 8 7 :root { 9 8 --brand-bg: #f7f4f0; 10 10 - --brand-card: #ffffff; 9 9 + --brand-card: #fff; 11 10 --brand-green: #546052; 12 11 --brand-green-light: #edf1ec; 13 12 --brand-green-mid: #859e7d;

+12

assets/scss/custom/_variables.scss

reviewed

··· 23 23 $color-gray-lightest: #f3f2f2; 24 24 $color-white: #fff; 25 25 $color-text: #232524; 26 26 + 27 27 + /* Marketing Pages Tokens */ 28 28 + $marketing-brand-bg: #f7f4f0; 29 29 + $marketing-brand-card: $color-white; 30 30 + $marketing-brand-green: $color-brand-dark; 31 31 + $marketing-brand-green-light: #edf1ec; 32 32 + $marketing-brand-green-mid: #859e7d; 33 33 + $marketing-brand-text: #2a3329; 34 34 + $marketing-brand-text-muted: $color-brand-primary; 35 35 + $marketing-brand-border: #d4ddd3; 36 36 + $marketing-brand-radius: 16px; 37 37 + $marketing-brand-transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);

+77

assets/scss/custom/pages/_calculators.scss

reviewed

··· 1 1 .dry-matter-basis-calculator-page { 2 2 + .calculator-toggler { 3 3 + margin: 0 auto 2rem; 4 4 + width: 100%; 5 5 + justify-content: space-between; 6 6 + display: none; 7 7 + 8 8 + p { 9 9 + padding: 12px; 10 10 + text-align: center; 11 11 + margin-bottom: 0; 12 12 + margin-top: 0; 13 13 + 14 14 + a { 15 15 + color: $marketing-brand-text; 16 16 + } 17 17 + } 18 18 + 19 19 + p.active { 20 20 + border-bottom: 2px solid $marketing-brand-green; 21 21 + font-weight: 700; 22 22 + } 23 23 + 24 24 + @include breakpoint('medium') { 25 25 + width: 35%; 26 26 + display: flex; 27 27 + } 28 28 + } 29 29 + 30 30 + // ── Toggler (mobile) ───────────────────────────────────────── 31 31 + .calculator-toggler-mobile { 32 32 + background-color: $marketing-brand-green-light; 33 33 + display: block; 34 34 + width: 100vw; 35 35 + position: relative; 36 36 + left: calc(-50vw + 50%); 37 37 + padding: 1rem 0; 38 38 + 39 39 + .inner { 40 40 + margin: auto; 41 41 + width: 92%; 42 42 + 43 43 + p { 44 44 + padding: 0.5rem 0.8rem; 45 45 + margin-bottom: 0.2rem; 46 46 + 47 47 + a { 48 48 + color: $marketing-brand-text; 49 49 + } 50 50 + } 51 51 + 52 52 + p#toggler-active { 53 53 + background-color: $marketing-brand-card; 54 54 + border-radius: 30px; 55 55 + 56 56 + span { 57 57 + float: right; 58 58 + 59 59 + &.open { 60 60 + rotate: 180deg; 61 61 + } 62 62 + } 63 63 + } 64 64 + 65 65 + #toggler-dropdown { 66 66 + display: none; 67 67 + 68 68 + &.active { 69 69 + display: block; 70 70 + } 71 71 + } 72 72 + } 73 73 + 74 74 + @include breakpoint('medium') { 75 75 + display: none; 76 76 + } 77 77 + } 78 78 + 2 79 #dmb-test { 3 80 display: none; 4 81 background-color: $headingColor;

+63 -73

assets/scss/custom/pages/_rawsome-catculator.scss

reviewed

··· 1 1 // ── Rawsome Catculator ──────────────────────────────────────────────── 2 2 3 3 - // CSS Variables — aliased from shared marketing tokens (_marketing-tokens.scss) 4 4 - :root { 5 5 - --rc-bg: var(--brand-bg); 6 6 - --rc-card: var(--brand-card); 7 7 - --rc-green: var(--brand-green); 8 8 - --rc-green-light: var(--brand-green-light); 9 9 - --rc-green-mid: var(--brand-green-mid); 10 10 - --rc-text: var(--brand-text); 11 11 - --rc-text-muted: var(--brand-text-muted); 12 12 - --rc-border: var(--brand-border); 13 13 - --rc-radius: var(--brand-radius); 14 14 - --rc-transition: var(--brand-transition); 15 15 - } 16 16 - 17 3 // Full-width wrapper that breaks out of container 18 4 .rawsome-catculator-page { 19 5 width: 100vw; 20 6 margin-left: calc(-50vw + 50%); 21 21 - background: var(--rc-bg); 7 7 + background: $marketing-brand-bg; 22 8 min-height: 100vh; 23 9 position: relative; 24 10 padding: 2rem 1rem; ··· 36 22 h1 { 37 23 font-weight: 700; 38 24 font-size: clamp(1.8rem, 5vw, 2.8rem); 39 39 - color: var(--rc-green); 25 25 + color: $marketing-brand-green; 40 26 line-height: 1.1; 41 27 letter-spacing: -0.5px; 42 28 margin-bottom: 1rem; ··· 45 31 p { 46 32 font-size: 1rem; 47 33 font-weight: 300; 48 48 - color: var(--rc-text-muted); 34 34 + color: $marketing-brand-text-muted; 49 35 line-height: 1.6; 50 36 max-width: 520px; 51 37 margin-inline: auto; ··· 66 52 margin-top: 0; 67 53 68 54 a { 69 69 - color: var(--rc-text); 55 55 + color: $marketing-brand-text; 70 56 } 71 57 } 72 58 73 59 p.active { 74 74 - border-bottom: 2px solid var(--rc-green); 60 60 + border-bottom: 2px solid $marketing-brand-green; 75 61 font-weight: 700; 76 62 } 77 63 ··· 83 69 84 70 // ── Toggler (mobile) ───────────────────────────────────────── 85 71 .calculator-toggler-mobile { 86 86 - background-color: var(--rc-green-light); 72 72 + background-color: $marketing-brand-green-light; 87 73 display: block; 88 74 width: 100vw; 89 75 position: relative; ··· 99 85 margin-bottom: 0.2rem; 100 86 101 87 a { 102 102 - color: var(--rc-text); 88 88 + color: $marketing-brand-text; 103 89 } 104 90 } 105 91 106 92 p#toggler-active { 107 107 - background-color: var(--rc-card); 93 93 + background-color: $marketing-brand-card; 108 94 border-radius: 30px; 109 95 110 96 span { ··· 141 127 // Step heading rendered by JS (renderStep) 142 128 .catculator-step__heading { 143 129 font-weight: 600; 144 144 - color: var(--rc-green); 130 130 + color: $marketing-brand-green; 145 131 font-size: 1.5rem; 146 132 text-align: center; 147 133 margin-bottom: 1.5rem; ··· 149 135 150 136 // ── Disclaimer copy ────────────────────────────────────────── 151 137 .calculator-disclaimer { 152 152 - margin: 3rem auto; 138 138 + margin: 4rem auto; 153 139 text-align: center; 154 140 max-width: 640px; 155 141 156 142 p { 157 157 - color: var(--rc-text-muted); 143 143 + margin-top: 2rem; 144 144 + color: $marketing-brand-text-muted; 158 145 font-size: 0.95rem; 159 146 line-height: 1.6; 147 147 + text-wrap: pretty; 160 148 } 161 149 } 162 150 } 163 151 164 152 // ── Buttons ────────────────────────────────────────────────────────── 165 153 .rawsome-button--primary { 166 166 - transition: all var(--rc-transition); 167 167 - border: 2px solid var(--rc-green); 154 154 + transition: all $marketing-brand-transition; 155 155 + border: 2px solid $marketing-brand-green; 168 156 color: #fff; 169 157 font-size: 1rem; 170 158 font-weight: 600; ··· 174 162 justify-content: center; 175 163 min-width: 120px; 176 164 height: 3rem; 177 177 - background-color: var(--rc-green); 178 178 - border-radius: var(--rc-radius); 165 165 + background-color: $marketing-brand-green; 166 166 + border-radius: $marketing-brand-radius; 179 167 cursor: pointer; 180 168 padding: 0 1.25rem; 181 169 ··· 191 179 } 192 180 193 181 &:hover { 194 194 - background-color: var(--rc-card); 195 195 - color: var(--rc-green); 182 182 + background-color: $marketing-brand-card; 183 183 + color: $marketing-brand-green; 196 184 box-shadow: 0 4px 16px rgba(84, 96, 82, 0.2); 197 185 198 186 p, 199 187 a { 200 200 - color: var(--rc-green); 188 188 + color: $marketing-brand-green; 201 189 } 202 190 } 203 191 ··· 208 196 } 209 197 210 198 .rawsome-button--secondary { 211 211 - background-color: var(--rc-card); 199 199 + background-color: $marketing-brand-card; 212 200 font-weight: 600; 213 213 - color: var(--rc-green); 214 214 - border: 2px solid var(--rc-green); 215 215 - transition: all var(--rc-transition); 216 216 - border-radius: var(--rc-radius); 201 201 + color: $marketing-brand-green; 202 202 + border: 2px solid $marketing-brand-green; 203 203 + transition: all $marketing-brand-transition; 204 204 + border-radius: $marketing-brand-radius; 217 205 text-align: center; 218 206 min-width: 120px; 219 207 height: 3rem; ··· 224 212 padding: 0 1.25rem; 225 213 226 214 &:hover { 227 227 - background-color: var(--rc-green-light); 215 215 + background-color: $marketing-brand-green-light; 228 216 } 229 217 } 230 218 ··· 251 239 } 252 240 253 241 .cat_weight_p { 254 254 - color: var(--rc-text); 242 242 + color: $marketing-brand-text; 255 243 font-weight: 600; 256 244 text-transform: uppercase; 257 245 font-size: 0.8rem; ··· 263 251 #weight_input { 264 252 width: 100%; 265 253 height: 3.5rem; 266 266 - border: 2px solid var(--rc-border); 267 267 - border-radius: var(--rc-radius); 268 268 - background-color: var(--rc-card); 269 269 - color: var(--rc-text); 254 254 + border: 2px solid $marketing-brand-border; 255 255 + border-radius: $marketing-brand-radius; 256 256 + background-color: $marketing-brand-card; 257 257 + color: $marketing-brand-text; 270 258 font-size: 1.2rem; 271 259 text-align: center; 272 260 appearance: textfield; 273 273 - -moz-appearance: textfield; 274 261 transition: 275 275 - border-color var(--rc-transition), 276 276 - box-shadow var(--rc-transition); 262 262 + border-color $marketing-brand-transition, 263 263 + box-shadow $marketing-brand-transition; 277 264 278 265 &:focus { 279 266 outline: none; 280 280 - border-color: var(--rc-green); 267 267 + border-color: $marketing-brand-green; 281 268 box-shadow: 0 0 0 3px rgba(84, 96, 82, 0.1); 282 269 } 283 270 284 271 &::-webkit-outer-spin-button, 285 272 &::-webkit-inner-spin-button { 286 286 - -webkit-appearance: none; 287 273 margin: 0; 288 274 } 289 275 } ··· 439 425 .catculator-col__img--kitten { 440 426 width: 75px; 441 427 height: 75px; 442 442 - margin: 75px 0 30px 0; 428 428 + margin: 75px 0 30px; 443 429 } 430 430 + 444 431 .catculator-col__img--young { 445 432 width: 125px; 446 433 height: 91px; 447 447 - margin: 59px 0 30px 0; 434 434 + margin: 59px 0 30px; 448 435 } 436 436 + 449 437 .catculator-col__img--adolescent { 450 438 height: 106px; 451 451 - margin: 44px 0 30px 0; 439 439 + margin: 44px 0 30px; 452 440 } 441 441 + 453 442 .catculator-col__img--preAdult { 454 443 height: 128px; 455 455 - margin: 22px 0 30px 0; 444 444 + margin: 22px 0 30px; 456 445 } 446 446 + 457 447 .catculator-col__img--adult { 458 448 width: 90px; 459 449 height: 140px; 460 460 - margin: 10px 0 30px 0; 450 450 + margin: 10px 0 30px; 461 451 } 462 452 463 453 // ── Results: heading + inner card ──────────────────────────────────── 464 454 .recom_daily_amount_heading { 465 465 - color: var(--rc-green); 455 455 + color: $marketing-brand-green; 466 456 font-weight: 700; 467 457 font-size: 1.5rem; 468 458 text-align: center; ··· 491 481 } 492 482 493 483 .recom_daily_amount_inner { 494 494 - background-color: var(--rc-card); 484 484 + background-color: $marketing-brand-card; 495 485 margin: auto; 496 486 width: 100%; 497 497 - border-radius: var(--rc-radius); 487 487 + border-radius: $marketing-brand-radius; 498 488 padding: 18px 10px; 499 489 500 490 .rc_reccoms { 501 501 - background-color: var(--rc-green-light); 491 491 + background-color: $marketing-brand-green-light; 502 492 width: 95%; 503 493 margin: auto; 504 504 - border-radius: var(--rc-radius); 494 494 + border-radius: $marketing-brand-radius; 505 495 506 496 p { 507 497 padding: 7px 15px; 508 508 - color: var(--rc-text); 498 498 + color: $marketing-brand-text; 509 499 510 500 span { 511 501 float: right; 512 502 margin: 0; 513 513 - color: var(--rc-green); 503 503 + color: $marketing-brand-green; 514 504 515 505 @include breakpoint('medium') { 516 506 float: none; ··· 535 525 margin: 10px auto; 536 526 537 527 p { 538 538 - color: var(--rc-text-muted); 528 528 + color: $marketing-brand-text-muted; 539 529 text-align: center; 540 530 } 541 531 ··· 566 556 right: 0; 567 557 left: 0; 568 558 margin: auto; 569 569 - border: 6px solid var(--rc-green); 559 559 + border: 6px solid $marketing-brand-green; 570 560 border-top-color: #bd9b60; 571 561 border-radius: 50%; 572 562 animation: rawsome-button-loading-spinner 1s ease infinite; ··· 589 579 590 580 // ── Bottom "product types" info table ──────────────────────────────── 591 581 #rawsome-bottom { 582 582 + border-top: 1px solid $marketing-brand-border; 592 583 margin-top: 2rem; 593 584 width: 100vw; 594 585 position: relative; ··· 610 601 justify-content: center; 611 602 gap: 0.75rem; 612 603 padding: 1.5rem 1rem; 613 613 - background-color: var(--rc-bg); 614 614 - border-radius: var(--rc-radius); 604 604 + border-radius: $marketing-brand-radius; 615 605 616 606 img { 617 607 width: auto; ··· 622 612 h1 { 623 613 margin: 0.5rem auto; 624 614 font-size: 1.25rem; 625 625 - color: var(--rc-green); 615 615 + color: $marketing-brand-green; 626 616 font-weight: 700; 627 617 } 628 618 629 619 p { 630 620 margin-bottom: 0.5rem; 631 631 - color: var(--rc-text-muted); 621 621 + color: $marketing-brand-text-muted; 632 622 font-size: 0.95rem; 633 623 } 634 624 ··· 681 671 682 672 #rda-title, 683 673 #swal2-title { 684 684 - color: var(--rc-green); 674 674 + color: $marketing-brand-green; 685 675 text-align: center; 686 676 } 687 677 ··· 719 709 .product-section__title { 720 710 text-align: center; 721 711 margin-bottom: 1.5rem; 722 722 - color: var(--rc-green); 712 712 + color: $marketing-brand-green; 723 713 } 724 714 725 715 .wrapper { 726 716 padding: 15px 10px; 727 727 - border-radius: var(--rc-radius); 728 728 - background-color: var(--rc-card); 729 729 - border: 2px solid var(--rc-green); 717 717 + border-radius: $marketing-brand-radius; 718 718 + background-color: $marketing-brand-card; 719 719 + border: 2px solid $marketing-brand-green; 730 720 display: flex; 731 721 flex-direction: column; 732 722 ··· 746 736 text-align: center; 747 737 line-height: 1.2; 748 738 font-size: 0.875rem; 749 749 - color: var(--rc-green); 739 739 + color: $marketing-brand-green; 750 740 } 751 741 } 752 742 ··· 758 748 margin: 0; 759 749 font-size: 0.8rem; 760 750 font-weight: 700; 761 761 - color: var(--rc-green); 751 751 + color: $marketing-brand-green; 762 752 letter-spacing: 0.3px; 763 753 } 764 754 }

+178 -236

templates/pages/custom/page/dry-matter-basis-calculator.html

reviewed

··· 1 1 - {{#partial "page"}} 2 2 - {{> components/common/breadcrumbs breadcrumbs=breadcrumbs}} 1 1 + {{#partial "page"}} 3 2 4 4 - {{{region name="page_builder_content__above-toggler"}}} 5 5 - 6 6 - {{> components/custom/calculator-toggler}} 7 7 - {{> components/custom/calculator-toggler-mobile}} 8 8 - 9 9 - {{{region name="page_builder_content__below-toggler"}}} 10 10 - <!--<div class="dry-matter-basis-calculator-page"> 11 11 - 12 12 - <div class="calculator-heading"> 13 13 - <h1> 14 14 - How much protein are you currently feeding your cat? 15 15 - </h1> 16 16 - <p>Use our calculator below to compare how much protein Purrform provides versus other cat foods</p> 17 17 - 3 3 + <div class="dry-matter-basis-calculator-page"> 4 4 + <div class="calculator-heading"> 5 5 + <h1> 6 6 + How much protein are you currently feeding your cat? 7 7 + </h1> 8 8 + <p>Use our calculator below to compare how much protein Purrform provides versus other cat foods</p> 18 9 </div> 19 10 20 20 - {{> components/custom/calculator-toggler}} 21 21 - {{> components/custom/calculator-toggler-mobile}} 11 11 + {{> components/custom/calculator-toggler}} 12 12 + {{> components/custom/calculator-toggler-mobile}} 22 13 23 23 - <div id="dry-matter-container"> 24 24 - <div class="dmc1"> 25 25 - <h1>Dry Matter Basis Calculator</h1> 26 26 - <p> 27 27 - This calculator will help you find out how much protein your cat is 28 28 - really eating & compare it to the amount in other cat foods. As cats are 29 29 - carnivores, it is vital that they are fed a high protein diet to have a 30 30 - long and healthy life. 31 31 - </p> 32 32 - <p> 33 33 - Dry Matter Basis (DMB or DM) removes the water from the equation. When 34 34 - foods are considered on a dry matter basis, they can be directly 35 35 - compared to one another. In other words, you can compare a canned food 36 36 - with 78% water, to a dry food that contains 11%, or compare two wet 37 37 - foods with different moisture contents. See the example below: 38 38 - </p> 39 39 - <p> 40 40 - At first glance, it appears that dry food has more protein than canned 41 41 - food. However, the canned food on a dry matter basis, contains 45% 42 42 - protein, as opposed to the dry food, which contains only 40% protein, 43 43 - when calculated. 44 44 - </p> 45 45 - <p> 46 46 - The calculator will give you the true content of protein for any of our 47 47 - products once the moisture has been extracted. You will also be able to 48 48 - do some comparisons with commercial wet and dry foods and other raw 49 49 - foods. 50 50 - </p> 51 51 - </div> 52 52 - <div class="dmc2"> 53 53 - <h1> 54 54 - Input the <span class="green-col">% of protein</span> and the 55 55 - <span class="green-col">% moisture</span> of the food you want to 56 56 - calculate: 57 57 - </h1>--> 14 14 + <div id="dry-matter-container"> 15 15 + <div class="dmc1"> 16 16 + <h1>Dry Matter Basis Calculator</h1> 17 17 + <p> 18 18 + This calculator will help you find out how much protein your cat is 19 19 + really eating & compare it to the amount in other cat foods. As cats are 20 20 + carnivores, it is vital that they are fed a high protein diet to have a 21 21 + long and healthy life. 22 22 + </p> 23 23 + <p> 24 24 + Dry Matter Basis (DMB or DM) removes the water from the equation. When 25 25 + foods are considered on a dry matter basis, they can be directly 26 26 + compared to one another. In other words, you can compare a canned food 27 27 + with 78% water, to a dry food that contains 11%, or compare two wet 28 28 + foods with different moisture contents. See the example below: 29 29 + </p> 30 30 + <p> 31 31 + At first glance, it appears that dry food has more protein than canned 32 32 + food. However, the canned food on a dry matter basis, contains 45% 33 33 + protein, as opposed to the dry food, which contains only 40% protein, 34 34 + when calculated. 35 35 + </p> 36 36 + <p> 37 37 + The calculator will give you the true content of protein for any of our 38 38 + products once the moisture has been extracted. You will also be able to 39 39 + do some comparisons with commercial wet and dry foods and other raw 40 40 + foods. 41 41 + </p> 42 42 + </div> 43 43 + <div class="dmc2"> 44 44 + <h1> 45 45 + Input the <span class="green-col">% of protein</span> and the 46 46 + <span class="green-col">% moisture</span> of the food you want to 47 47 + calculate: 48 48 + </h1> 58 49 50 50 + <div class="percent-calculator"> 51 51 + <div> 52 52 + <label for="ingredient"><strong>% Protein</strong></label> 53 53 + <input 54 54 + id="ingredient" 55 55 + style=" 56 56 + border-radius: 32px; 57 57 + border: 1px solid #dbdada; 58 58 + padding-left: 10px; 59 59 + color: #000000; 60 60 + font-weight: bold; 61 61 + font-size: 18px; 62 62 + margin-right: 10px; 59 63 60 60 - <!--<div class="percent-calculator"> 61 61 - <p><strong>% Protein</strong></p> 62 62 - <p><strong>% Moisture</strong></p> 63 63 - 64 64 - </div>--> 65 65 - 66 66 - 67 67 - <!--<div class="percent-calculator"> 68 68 - <div> 69 69 - <label for="ingredient"><strong>% Protein</strong></label> 70 70 - <input 71 71 - id="ingredient" 72 72 - style=" 73 73 - border-radius: 32px; 74 74 - border: 1px solid #dbdada; 75 75 - padding-left: 10px; 76 76 - color: #000000; 77 77 - font-weight: bold; 78 78 - font-size: 18px; 79 79 - margin-right: 10px; 64 64 + height: 3rem; 65 65 + " 66 66 + /> 67 67 + </div> 68 68 + <div> 69 69 + <label for="moisture"><strong>% Moisture</strong></label> 70 70 + <input 71 71 + id="moisture" 72 72 + style=" 73 73 + border-radius: 32px; 74 74 + border: 1px solid #dbdada; 75 75 + padding-left: 10px; 76 76 + color: #000000; 77 77 + font-weight: bold; 78 78 + font-size: 18px; 79 79 + margin-right: 10px; 80 80 81 81 - height: 3rem; 82 82 - " 83 83 - /> 81 81 + height: 3rem; 82 82 + " 83 83 + /> 84 84 </div> 85 85 <div> 86 86 - <label for="moisture"><strong>% Moisture</strong></label> 87 87 - <input 88 88 - id="moisture" 89 89 - style=" 90 90 - border-radius: 32px; 91 91 - border: 1px solid #dbdada; 92 92 - padding-left: 10px; 93 93 - color: #000000; 94 94 - font-weight: bold; 95 95 - font-size: 18px; 96 96 - margin-right: 10px; 97 97 - 98 98 - height: 3rem; 99 99 - " 100 100 - /> 101 101 - </div> 102 102 - <div> 103 103 - <button 104 104 - id="calcBtn" 105 105 - style=" 106 106 - height: 3rem; 107 107 - border-color: #687d6a; 108 108 - border-radius: 40px; 109 109 - background-color: #687d6a; 110 110 - text-align: center; 111 111 - " 112 112 - > 113 113 - <p 114 114 - style=" 115 115 - color: #fff; 116 116 - font-size: 18px; 117 117 - font-weight: bold; 118 118 - margin: auto; 119 119 - padding-bottom: 3px; 120 120 - " 86 86 + <button 87 87 + id="calcBtn" 88 88 + style=" 89 89 + height: 3rem; 90 90 + border-color: #687d6a; 91 91 + border-radius: 40px; 92 92 + background-color: #687d6a; 93 93 + text-align: center; 94 94 + " 121 95 > 122 122 - Calculate 123 123 - </p> 124 124 - </button> 96 96 + <p 97 97 + style=" 98 98 + color: #fff; 99 99 + font-size: 18px; 100 100 + font-weight: bold; 101 101 + margin: auto; 102 102 + padding-bottom: 3px; 103 103 + " 104 104 + > 105 105 + Calculate 106 106 + </p> 107 107 + </button> 125 108 </div> 126 126 - </div> 109 109 + </div> 127 110 128 128 - <div id="dmb-test"> 111 111 + <div id="dmb-test"> 129 112 <h3>Dry Matter Basis</h3> 130 113 <p id="dmb-protein"></p> 131 114 <p id="dmb-moisure"></p> 132 115 <p id="dmb-dmb"></p> 133 133 - </div> 134 134 - 135 135 - <div id="DMBWindow"></div> 136 136 - <style> 137 137 - @media only screen and (max-width: 640px) { 138 138 - .percent-calculator input, 139 139 - .percent-calculator button { 140 140 - width: 100% !important; 141 141 - margin-bottom: 10px; 142 142 - } 143 143 - } 144 144 - </style> 145 145 - <script> 146 146 - let closeWindow = () => { 147 147 - let DMBWindow = document.getElementById("DMBWindow"); 148 148 - DMBWindow.innerHTML = ``; 149 149 - }; 150 150 - 151 151 - let showCalc = () => { 152 152 - //alert("tester") 153 153 - let calcBtn = document.getElementById("calcBtn"); 154 154 - let calcInfo = document.getElementById("dmb-test"); 155 155 - //let dmbProtein = document.getElementById('dmb-protein'); 156 156 - //let dmbMoisure = document.getElementById('dmb-moisure'); 157 157 - //let dmbDmb = document.getElementById('dmb-dmb'); 158 158 - 159 159 - let ingredientPercent = document.getElementById("ingredient").value; 160 160 - let moisturePercent = document.getElementById("moisture").value; 161 161 - let moisture = 100 - moisturePercent; 162 162 - 163 163 - let DMBcalc = ((ingredientPercent / moisture) * 100).toFixed(2); 116 116 + </div> 164 117 165 165 - calcInfo.style.display = "block"; 166 166 - 167 167 - document.getElementById("dmb-protein").innerHTML = 168 168 - "% Protein = " + `${ingredientPercent}`; 169 169 - document.getElementById("dmb-moisure").innerHTML = 170 170 - "% Moisture = " + `${moisture}`; 171 171 - document.getElementById("dmb-dmb").innerHTML = 172 172 - "DMB = " + `${DMBcalc}` + "%"; 173 173 - }; 118 118 + <div id="DMBWindow"></div> 119 119 + </div> 120 120 + </div> 174 121 175 175 - /* let calcPercent = () => { 176 176 - let ingredientPercent = document.getElementById('ingredient').value 177 177 - let moisturePercent = document.getElementById('moisture').value 178 178 - let moisture = (100 - moisturePercent) 179 179 - let calcBtn = document.getElementById('calcBtn') 180 180 - let DMBcalc = (((ingredientPercent / moisture) * 100).toFixed(2)) 181 181 - let DMBWindow = document.getElementById('DMBWindow') 182 182 - DMBWindow.innerHTML += ` 183 183 - <div onclick='closeWindow()' style='width: 100vw; position: fixed; top: 0; left: 0; height: 100vh; z-index: 98; opacity: 50%; background-color: #000000'></div> 184 184 - <div class="calculate_popup" style='border: 1px solid #00000000; border-radius: 45px; z-index: 1000; width: 500px; height: 350px; position: fixed; top: calc((100% - 350px) / 2); left: calc((100% - 500px) / 2); background-color: #687D6A;'> 185 185 - <p style='color: #fff; font-size: 24px; font-weight: bold; position: relative; top: 60px; left: 10.5%;'> 186 186 - Dry Matter Basis 187 187 - </p> 188 188 - <p style='color: #fff; font-size: 24px; font-weight: bold; position: relative; top: 50px; left: 10%;'> 189 189 - %Protein = ${ingredientPercent} 190 190 - </p> 191 191 - <p style='color: #fff; font-size: 24px; font-weight: bold; position: relative; top: 40px; left: 10%;'> 192 192 - %Moisture = ${moisture} 193 193 - </p> 194 194 - <p style='color: #fff; font-size: 24px; font-weight: bold; position: relative; top: 35px; left: 10%;'> 195 195 - DMB = ${DMBcalc}% 196 196 - </p> 197 197 - <div class="calculate_close" onclick='closeWindow()' style='background-color: #00000000; width: 25px; height: 25px; position: relative; right:0;bottom:130px;left:460px;cursor: pointer;'> 198 198 - <img src='https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/1024px-cross-icon-white-.svg.png' style='width: 100%; height: 100%;'/> 199 199 - </div> 200 200 - </div> 201 201 - ` 202 202 - } */ 203 203 - // calcBtn.addEventListener('click', calcPercent) 204 204 - calcBtn.addEventListener("click", showCalc); 205 205 - </script> 122 122 + <div id="dry-matter-bottom"> 123 123 + <div class="dry-matter-info-table"> 124 124 + <div> 125 125 + <h3>Dry Food</h3> 126 126 + <p>Protein = 36%</p> 127 127 + <p> Moisture = 11%</p> 128 128 + <p> 100% (dry and wet) - 11% (wet) = 89% dry</p> 129 129 + <p> (36% Protein / 89%dry) x 100</p> 130 130 + <p><strong>= 40% Protein DMB in dry food</strong></p> 131 131 + </div> 132 132 + <div> 133 133 + <h3>Canned Food</h3> 134 134 + <p>Protein = 10%</p> 135 135 + <p> Moisture = 78%</p> 136 136 + <p> 100% (dry and wet) - 78% (wet) = 22% dry</p> 137 137 + <p>(10% Protein / 22%dry) x 100</p> 138 138 + <p><strong>= 45% Protein DMB in dry food</strong></p> 139 139 + </div> 140 140 + <div> 141 141 + <h3>Calculating the Dry Matter Basis</h3> 142 142 + <table> 143 143 + <thead > 144 144 + <tr> 145 145 + <th>Dry Food</th> 146 146 + <th>Canned Food</th> 147 147 + </tr> 148 148 + <tr> 149 149 + <td>Protein 36%</td> 150 150 + <td>Protein 10%</td> 151 151 + </tr> 152 152 + <tr> 153 153 + <td>Fat 18%</td> 154 154 + <td>Fat 5%</td> 155 155 + </tr> 156 156 + <tr> 157 157 + <td>Moisture 11%</td> 158 158 + <td>Moisture 78%</td> 159 159 + </tr> 160 160 + </thead> 161 161 + </table> 162 162 + </div> 206 163 </div> 207 207 - </div> 164 164 + </div> 165 165 + {{/partial}} 166 166 + {{> layout/base}} 208 167 209 209 - <div id="dry-matter-bottom"> 210 168 211 211 - <div class="dry-matter-info-table"> 212 212 - <div> 213 213 - <h3>Dry Food</h3> 214 214 - <p>Protein = 36%</p> 215 215 - <p> Moisture = 11%</p> 216 216 - <p> 100% (dry and wet) - 11% (wet) = 89% dry</p> 217 217 - <p> (36% Protein / 89%dry) x 100</p> 218 218 - <p><strong>= 40% Protein DMB in dry food</strong></p> 219 219 - </div> 220 220 - <div> 221 221 - <h3>Canned Food</h3> 222 222 - <p>Protein = 10%</p> 223 223 - <p> Moisture = 78%</p> 224 224 - <p> 100% (dry and wet) - 78% (wet) = 22% dry</p> 225 225 - <p>(10% Protein / 22%dry) x 100</p> 226 226 - <p><strong>= 45% Protein DMB in dry food</strong></p> 227 227 - </div> 228 228 - <div> 229 229 - <h3>Calculating the Dry Matter Basis</h3> 230 230 - <table> 231 231 - <thead > 232 232 - <tr> 233 233 - <th>Dry Food</th> 234 234 - <th>Canned Food</th> 235 235 - 236 236 - </tr> 169 169 + <style> 170 170 + @media only screen and (max-width: 640px) { 171 171 + .percent-calculator input, 172 172 + .percent-calculator button { 173 173 + width: 100% !important; 174 174 + margin-bottom: 10px; 175 175 + } 176 176 + } 177 177 + </style> 237 178 238 238 - <tr> 239 239 - <td>Protein 36%</td> 240 240 - 241 241 - <td>Protein 10%</td> 242 242 - </tr> 179 179 + <script> 180 180 + let closeWindow = () => { 181 181 + let DMBWindow = document.getElementById("DMBWindow"); 182 182 + DMBWindow.innerHTML = ``; 183 183 + }; 243 184 244 244 - <tr> 245 245 - 246 246 - <td>Fat 18%</td> 247 247 - <td>Fat 5%</td> 248 248 - </tr> 185 185 + let showCalc = () => { 186 186 + let calcBtn = document.getElementById("calcBtn"); 187 187 + let calcInfo = document.getElementById("dmb-test"); 249 188 250 250 - <tr> 251 251 - <td>Moisture 11%</td> 252 252 - <td>Moisture 78%</td> 253 253 - </tr> 189 189 + let ingredientPercent = document.getElementById("ingredient").value; 190 190 + let moisturePercent = document.getElementById("moisture").value; 191 191 + let moisture = 100 - moisturePercent; 254 192 255 255 - </thead> 256 256 - </table> 193 193 + let DMBcalc = ((ingredientPercent / moisture) * 100).toFixed(2); 257 194 258 258 - </div> 259 259 - </div> 195 195 + calcInfo.style.display = "block"; 260 196 261 261 - </div> 197 197 + document.getElementById("dmb-protein").innerHTML = 198 198 + "% Protein = " + `${ingredientPercent}`; 199 199 + document.getElementById("dmb-moisure").innerHTML = 200 200 + "% Moisture = " + `${moisture}`; 201 201 + document.getElementById("dmb-dmb").innerHTML = 202 202 + "DMB = " + `${DMBcalc}` + "%"; 203 203 + }; 262 204 263 263 - </div>--> 264 264 - {{/partial}} {{> layout/base}} 205 205 + calcBtn.addEventListener("click", showCalc); 206 206 + </script>

+3 -3

templates/pages/custom/page/rawsome-catculator.html

reviewed

··· 17 17 <p> 18 18 Please note that the generic calculation is calculated by using an 19 19 average of 150kcal per 100g of PurrForm food. 20 20 - <br /><br /> 20 20 + <br /> 21 21 Please refer to the RDA to find out how much to feed by product. 22 22 - <br /><br /> 22 22 + <br /> 23 23 These are guidelines only and may need to be adjusted accordingly. 24 24 - <br /><br /> 24 24 + <br /> 25 25 If you need further information please contact us on 26 26 enquiry@purrform.co.uk. 27 27 </p>