The repo for Purrform's main BigCommerce store.
Calculator (#61)
authored by
Rogerio Romao
and committed by
GitHub
101fe3bd
9e50e2cb
+2216
-1944
+4
assets/js/app.js
+4
assets/js/app.js
···
57
57
import('./theme/custom/diet-builder'),
58
58
'pages/custom/page/feline-grimace-scale': () =>
59
59
import('./theme/custom/feline-grimace-scale'),
60
+
'pages/custom/page/rawsome-catculator': () =>
61
+
import('./theme/custom/rawsome-catculator'),
62
+
'pages/custom/page/dry-matter-basis-calculator': () =>
63
+
import('./theme/custom/dry-matter-basis-calculator'),
60
64
};
61
65
62
66
/**
+47
assets/js/theme/custom/dry-matter-basis-calculator.js
+47
assets/js/theme/custom/dry-matter-basis-calculator.js
···
1
+
import PageManager from '../page-manager';
2
+
3
+
export default class DryMatterBasisCalculator extends PageManager {
4
+
onReady() {
5
+
this.proteinInput = document.getElementById('dmb-protein-input');
6
+
this.moistureInput = document.getElementById('dmb-moisture-input');
7
+
this.calcBtn = document.getElementById('dmb-calc-btn');
8
+
this.resultEl = document.querySelector('.dmb-result');
9
+
if (!this.calcBtn) return;
10
+
this.calcBtn.addEventListener('click', () => this.calculate());
11
+
}
12
+
13
+
calculate() {
14
+
const protein = parseFloat(this.proteinInput.value);
15
+
const moisture = parseFloat(this.moistureInput.value);
16
+
17
+
if (Number.isNaN(protein) || Number.isNaN(moisture) || moisture >= 100 || moisture < 0 || protein < 0) {
18
+
this.resultEl.hidden = true;
19
+
return;
20
+
}
21
+
22
+
const dry = 100 - moisture;
23
+
const dmb = ((protein / dry) * 100).toFixed(2);
24
+
this.render({ protein, moisture, dry, dmb });
25
+
}
26
+
27
+
render({ protein, moisture, dry, dmb }) {
28
+
this.resultEl.hidden = false;
29
+
this.resultEl.innerHTML = '';
30
+
31
+
const rows = [
32
+
`% Protein = ${protein}`,
33
+
`% Moisture = ${moisture} (dry portion = ${dry}%)`,
34
+
`DMB = ${dmb}%`,
35
+
];
36
+
37
+
const heading = document.createElement('h3');
38
+
heading.textContent = 'Dry Matter Basis';
39
+
this.resultEl.appendChild(heading);
40
+
41
+
rows.forEach((text) => {
42
+
const p = document.createElement('p');
43
+
p.textContent = text;
44
+
this.resultEl.appendChild(p);
45
+
});
46
+
}
47
+
}
+87
-32
assets/js/theme/custom/feline-grimace-scale.js
+87
-32
assets/js/theme/custom/feline-grimace-scale.js
···
8
8
label: 'Ear Position',
9
9
options: [
10
10
{
11
-
score: 0, label: 'Ears facing forward', sublabel: 'Absent',
11
+
score: 0,
12
+
label: 'Ears facing forward',
13
+
sublabel: 'Absent',
12
14
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">',
13
15
},
14
16
{
15
-
score: 1, label: 'Ears slightly pulled apart', sublabel: 'Moderately present or uncertain',
17
+
score: 1,
18
+
label: 'Ears slightly pulled apart',
19
+
sublabel: 'Moderately present or uncertain',
16
20
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">',
17
21
},
18
22
{
19
-
score: 2, label: 'Ears rotated outwards', sublabel: 'Markedly present',
23
+
score: 2,
24
+
label: 'Ears rotated outwards',
25
+
sublabel: 'Markedly present',
20
26
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">',
21
27
},
22
28
],
···
26
32
label: 'Orbital Tightening',
27
33
options: [
28
34
{
29
-
score: 0, label: 'Eyes opened', sublabel: 'Absent',
35
+
score: 0,
36
+
label: 'Eyes opened',
37
+
sublabel: 'Absent',
30
38
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">',
31
39
},
32
40
{
33
-
score: 1, label: 'Partially closed eyes', sublabel: 'Moderately present or uncertain',
41
+
score: 1,
42
+
label: 'Partially closed eyes',
43
+
sublabel: 'Moderately present or uncertain',
34
44
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">',
35
45
},
36
46
{
37
-
score: 2, label: 'Squinted eyes', sublabel: 'Markedly present',
47
+
score: 2,
48
+
label: 'Squinted eyes',
49
+
sublabel: 'Markedly present',
38
50
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">',
39
51
},
40
52
],
···
44
56
label: 'Muzzle Tension',
45
57
options: [
46
58
{
47
-
score: 0, label: 'Relaxed (round shape)', sublabel: 'Absent',
59
+
score: 0,
60
+
label: 'Relaxed (round shape)',
61
+
sublabel: 'Absent',
48
62
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">',
49
63
},
50
64
{
51
-
score: 1, label: 'Mild tension', sublabel: 'Moderately present or uncertain',
65
+
score: 1,
66
+
label: 'Mild tension',
67
+
sublabel: 'Moderately present or uncertain',
52
68
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">',
53
69
},
54
70
{
55
-
score: 2, label: 'Tense (elliptical shape)', sublabel: 'Markedly present',
71
+
score: 2,
72
+
label: 'Tense (elliptical shape)',
73
+
sublabel: 'Markedly present',
56
74
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">',
57
75
},
58
76
],
···
62
80
label: 'Whiskers Change',
63
81
options: [
64
82
{
65
-
score: 0, label: 'Loose and curved', sublabel: 'Absent',
83
+
score: 0,
84
+
label: 'Loose and curved',
85
+
sublabel: 'Absent',
66
86
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">',
67
87
},
68
88
{
69
-
score: 1, label: 'Slightly curved or straight (closer together)', sublabel: 'Moderately present or uncertain',
89
+
score: 1,
90
+
label: 'Slightly curved or straight (closer together)',
91
+
sublabel: 'Moderately present or uncertain',
70
92
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">',
71
93
},
72
94
{
73
-
score: 2, label: 'Straight and moving forward', sublabel: 'Markedly present',
95
+
score: 2,
96
+
label: 'Straight and moving forward',
97
+
sublabel: 'Markedly present',
74
98
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">',
75
99
},
76
100
],
···
80
104
label: 'Head Position',
81
105
options: [
82
106
{
83
-
score: 0, label: 'Head above the shoulder line', sublabel: 'Absent',
107
+
score: 0,
108
+
label: 'Head above the shoulder line',
109
+
sublabel: 'Absent',
84
110
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">',
85
111
},
86
112
{
87
-
score: 1, label: 'Head aligned with the shoulder line', sublabel: 'Moderately present or uncertain',
113
+
score: 1,
114
+
label: 'Head aligned with the shoulder line',
115
+
sublabel: 'Moderately present or uncertain',
88
116
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">',
89
117
},
90
118
{
91
-
score: 2, label: 'Head below the shoulder line or tilted down', sublabel: 'Markedly present',
119
+
score: 2,
120
+
label: 'Head below the shoulder line or tilted down',
121
+
sublabel: 'Markedly present',
92
122
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">',
93
123
},
94
124
],
···
121
151
}
122
152
123
153
function getInterpText(total) {
124
-
if (total === 0) return 'This cat is not in pain. If you are a cat owner and are concerned, please consult your veterinary surgeon.';
125
-
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.';
126
-
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.';
154
+
if (total === 0)
155
+
return 'This cat is not in pain. If you are a cat owner and are concerned, please consult your veterinary surgeon.';
156
+
if (total <= 3)
157
+
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.';
158
+
if (total <= 8)
159
+
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.';
127
160
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.';
128
161
}
129
162
···
131
164
132
165
export default class FelineGrimaceScale extends PageManager {
133
166
onReady() {
134
-
this.scores = { ears: null, eyes: null, muzzle: null, whiskers: null, head: null };
167
+
this.scores = {
168
+
ears: null,
169
+
eyes: null,
170
+
muzzle: null,
171
+
whiskers: null,
172
+
head: null,
173
+
};
135
174
this.buildUI();
136
175
this.updateScorePanel();
137
176
}
···
148
187
totalEl.textContent = total;
149
188
totalEl.className = `total-number ${colorClass}`;
150
189
totalEl.classList.add('pop-animate');
151
-
totalEl.addEventListener('animationend', () => totalEl.classList.remove('pop-animate'), { once: true });
190
+
totalEl.addEventListener(
191
+
'animationend',
192
+
() => totalEl.classList.remove('pop-animate'),
193
+
{ once: true },
194
+
);
152
195
153
196
const badge = document.getElementById('interp-badge');
154
197
badge.className = `interp-badge ${getBadgeClass(total)}`;
155
198
badge.textContent = getBadgeLabel(total);
156
199
157
-
document.getElementById('interp-text').textContent = getInterpText(total);
200
+
document.getElementById('interp-text').textContent =
201
+
getInterpText(total);
158
202
159
203
const fill = document.getElementById('progress-fill');
160
204
fill.style.width = `${(total / 10) * 100}%`;
161
205
fill.className = `progress-fill ${colorClass}`;
162
206
163
-
unitIds.forEach(id => {
207
+
unitIds.forEach((id) => {
164
208
const el = document.getElementById(`score-val-${id}`);
165
209
if (el) {
166
-
el.textContent = this.scores[id] !== null ? this.scores[id] : '—';
167
-
el.style.color = this.scores[id] !== null ? 'var(--fgs-green)' : 'var(--fgs-text-muted)';
210
+
el.textContent =
211
+
this.scores[id] !== null ? this.scores[id] : '—';
212
+
el.style.color =
213
+
this.scores[id] !== null ? '#546153' : '#687d6a';
168
214
}
169
215
});
170
216
171
-
unitIds.forEach(id => {
217
+
unitIds.forEach((id) => {
172
218
const unitBadge = document.getElementById(`unit-badge-${id}`);
173
219
if (unitBadge) {
174
220
if (this.scores[id] !== null) {
···
196
242
breakdown.appendChild(item);
197
243
});
198
244
199
-
units.forEach(unit => {
245
+
units.forEach((unit) => {
200
246
const card = document.createElement('div');
201
247
card.className = 'unit-card';
202
248
card.innerHTML = /* html */ `
···
205
251
<span class="unit-score-badge" id="unit-badge-${unit.id}">Not scored</span>
206
252
</div>
207
253
<div class="options-row" role="group" aria-label="${unit.label}">
208
-
${unit.options.map(opt => /* html */ `
254
+
${unit.options
255
+
.map(
256
+
(opt) => /* html */ `
209
257
<button class="option-btn" data-unit="${unit.id}" data-score="${opt.score}" aria-pressed="false">
210
258
<div class="score-pill">${opt.score}</div>
211
259
<div class="cat-illustration">${opt.img}</div>
212
260
<div class="option-label">${opt.label}</div>
213
261
<div class="option-sublabel">${opt.sublabel}</div>
214
262
</button>
215
-
`).join('')}
263
+
`,
264
+
)
265
+
.join('')}
216
266
</div>
217
267
`;
218
268
container.appendChild(card);
219
269
});
220
270
221
-
container.addEventListener('click', e => {
271
+
container.addEventListener('click', (e) => {
222
272
const btn = e.target.closest('.option-btn');
223
273
if (!btn) return;
224
274
const unitId = btn.dataset.unit;
225
275
const score = parseInt(btn.dataset.score, 10);
226
276
227
-
const siblings = btn.closest('.options-row').querySelectorAll('.option-btn');
228
-
siblings.forEach(s => { s.classList.remove('selected'); s.setAttribute('aria-pressed', 'false'); });
277
+
const siblings = btn
278
+
.closest('.options-row')
279
+
.querySelectorAll('.option-btn');
280
+
siblings.forEach((s) => {
281
+
s.classList.remove('selected');
282
+
s.setAttribute('aria-pressed', 'false');
283
+
});
229
284
230
285
btn.classList.add('selected');
231
286
btn.setAttribute('aria-pressed', 'true');
···
234
289
this.updateScorePanel();
235
290
});
236
291
}
237
-
}
292
+
}
+725
assets/js/theme/custom/rawsome-catculator.js
+725
assets/js/theme/custom/rawsome-catculator.js
···
1
+
import PageManager from '../page-manager';
2
+
3
+
// ── Constants ────────────────────────────────────────────────────────
4
+
5
+
const KCAL_PER_KG = 1500;
6
+
7
+
const CALCULATOR_API = 'https://purrform-apps-027e.onrender.com/calculator';
8
+
9
+
const AGE_CONFIG = {
10
+
1: {
11
+
label: '4-8 Weeks',
12
+
coef: 2.3,
13
+
meals: 'Feed as & when required',
14
+
activity: 95,
15
+
flow: 'kitten',
16
+
productKey: 'weaning',
17
+
},
18
+
2: {
19
+
label: '2-4 Months',
20
+
coef: 2.15,
21
+
meals: 'Divided into 4 to 6 meals a day',
22
+
activity: null,
23
+
flow: 'adolescent',
24
+
productKey: 'kitten',
25
+
},
26
+
3: {
27
+
label: '4-9 Months',
28
+
coef: 1.85,
29
+
meals: 'Divided into 3 to 4 meals a day',
30
+
activity: null,
31
+
flow: 'adult',
32
+
productKey: 'kitten',
33
+
},
34
+
4: {
35
+
label: '9-12 Months',
36
+
coef: 1.5,
37
+
meals: 'Divided into 2 meals a day',
38
+
activity: null,
39
+
flow: 'adult',
40
+
productKey: 'adult',
41
+
},
42
+
5: {
43
+
label: '12+ Months',
44
+
coef: 1.0,
45
+
meals: 'Divided into 2 meals a day',
46
+
activity: null,
47
+
flow: 'adult',
48
+
productKey: 'adult',
49
+
},
50
+
};
51
+
52
+
// activity_value constants from original code
53
+
const ACTIVITY_VALUES = {
54
+
neutered: { low: 52, moderate: 64, active: 75 },
55
+
intact: { low: 80, moderate: 87.5, active: 95 },
56
+
};
57
+
58
+
const CAT_IMAGES = {
59
+
ages: [
60
+
{
61
+
src: 'https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/cat1.png',
62
+
modifier: 'kitten',
63
+
},
64
+
{
65
+
src: 'https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/cat2.png',
66
+
modifier: 'young',
67
+
},
68
+
{
69
+
src: 'https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/cat3.png',
70
+
modifier: 'adolescent',
71
+
},
72
+
{
73
+
src: 'https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/original/image-manager/9-12-months-cat-03.png?t=1660570333&_gl=1*1lk0d6z*_ga*ODg5ODM2MTQ0LjE2NTYzMTgwNTQ.*_ga_WS2VZYPC6G*MTY2MDU2NzY4Ny4xMDQuMS4xNjYwNTcwMzQwLjMy',
74
+
modifier: 'preAdult',
75
+
},
76
+
{
77
+
src: 'https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/cat5.png',
78
+
modifier: 'adult',
79
+
},
80
+
],
81
+
weight: 'https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/cat-weight.png',
82
+
neutered:
83
+
'https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/kittengreen-new.png',
84
+
activity:
85
+
'https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/twocatsgreen.png',
86
+
};
87
+
88
+
// ── Helpers ──────────────────────────────────────────────────────────
89
+
90
+
function el(tag, attrs = {}, ...children) {
91
+
const element = document.createElement(tag);
92
+
for (const [key, value] of Object.entries(attrs)) {
93
+
if (key === 'className') {
94
+
element.className = value;
95
+
} else if (key === 'dataset') {
96
+
for (const [dk, dv] of Object.entries(value)) {
97
+
element.dataset[dk] = dv;
98
+
}
99
+
} else if (key.startsWith('on') && typeof value === 'function') {
100
+
element.addEventListener(key.slice(2).toLowerCase(), value);
101
+
} else {
102
+
element.setAttribute(key, value);
103
+
}
104
+
}
105
+
for (const child of children) {
106
+
if (typeof child === 'string') {
107
+
element.appendChild(document.createTextNode(child));
108
+
} else if (child) {
109
+
element.appendChild(child);
110
+
}
111
+
}
112
+
return element;
113
+
}
114
+
115
+
function calculateRDA(weight, activity, coef) {
116
+
const total = Math.round(
117
+
((weight ** 0.67 * activity * 1000) / KCAL_PER_KG) * coef,
118
+
);
119
+
const kcal = Math.round((150 * total) / 100);
120
+
return { total, kcal };
121
+
}
122
+
123
+
function calculateProductGrams(weight, activity, coef, caloriePerKg) {
124
+
return Math.round(
125
+
((weight ** 0.67 * activity * 1000) / (caloriePerKg * 10)) * coef,
126
+
);
127
+
}
128
+
129
+
// ── RawsomeCatculator Class ──────────────────────────────────────────
130
+
131
+
export default class RawsomeCatculator extends PageManager {
132
+
constructor(context) {
133
+
super(context);
134
+
135
+
this.state = {
136
+
age: null,
137
+
flow: null,
138
+
weight: null,
139
+
coef: null,
140
+
activity: null,
141
+
neutered: null,
142
+
meals: null,
143
+
total: null,
144
+
kcal: null,
145
+
products: { tubs: [], pouches: [] },
146
+
productsLoaded: false,
147
+
};
148
+
149
+
this.container = null;
150
+
this._productsPromise = null;
151
+
}
152
+
153
+
onReady() {
154
+
this.container = document.getElementById('catculator');
155
+
if (!this.container) return;
156
+
this.renderAgeStep();
157
+
}
158
+
159
+
// ── State ────────────────────────────────────────────────────────
160
+
161
+
resetState() {
162
+
this.state = {
163
+
age: null,
164
+
flow: null,
165
+
weight: null,
166
+
coef: null,
167
+
activity: null,
168
+
neutered: null,
169
+
meals: null,
170
+
total: null,
171
+
kcal: null,
172
+
products: { tubs: [], pouches: [] },
173
+
productsLoaded: false,
174
+
};
175
+
this._productsPromise = null;
176
+
this.renderAgeStep();
177
+
}
178
+
179
+
// ── API ──────────────────────────────────────────────────────────
180
+
181
+
fetchProducts(ageNum) {
182
+
const cfg = AGE_CONFIG[ageNum];
183
+
this._productsPromise = fetch(`${CALCULATOR_API}?age=${ageNum}`)
184
+
.then((res) => res.json())
185
+
.then((data) => {
186
+
this.state.products = {
187
+
tubs: data[`${cfg.productKey}_tubs`] ?? [],
188
+
pouches: data[`${cfg.productKey}_pouches`] ?? [],
189
+
};
190
+
this.state.productsLoaded = true;
191
+
})
192
+
.catch(() => {
193
+
this.state.productsLoaded = true;
194
+
});
195
+
return this._productsPromise;
196
+
}
197
+
198
+
// ── DOM helpers ──────────────────────────────────────────────────
199
+
200
+
clearContainer() {
201
+
while (this.container.firstChild) {
202
+
this.container.removeChild(this.container.firstChild);
203
+
}
204
+
}
205
+
206
+
renderStep(headingText, content) {
207
+
this.clearContainer();
208
+
const heading = el(
209
+
'p',
210
+
{ className: 'catculator-step__heading' },
211
+
headingText,
212
+
);
213
+
this.container.appendChild(heading);
214
+
if (content) this.container.appendChild(content);
215
+
}
216
+
217
+
_buildProductGrid(products) {
218
+
if (!products || products.length === 0) {
219
+
return el(
220
+
'div',
221
+
{ className: 'wrapper' },
222
+
el('p', {}, 'No product found'),
223
+
);
224
+
}
225
+
226
+
const grid = el('div', { className: 'product-grid' });
227
+
const { weight, activity, coef } = this.state;
228
+
229
+
products.forEach((product) => {
230
+
const grams = calculateProductGrams(
231
+
weight,
232
+
activity,
233
+
coef,
234
+
product.calorie,
235
+
);
236
+
const card = el(
237
+
'div',
238
+
{ className: 'wrapper' },
239
+
el(
240
+
'div',
241
+
{ className: 'image_wrap' },
242
+
el(
243
+
'a',
244
+
{ href: product.action_url },
245
+
el('img', { src: product.image }),
246
+
),
247
+
),
248
+
el(
249
+
'div',
250
+
{ className: 'content_wrap' },
251
+
el(
252
+
'a',
253
+
{ href: product.action_url },
254
+
el('p', { className: 'product-name' }, product.name),
255
+
),
256
+
),
257
+
el(
258
+
'div',
259
+
{ className: 'rda_wrap' },
260
+
el(
261
+
'p',
262
+
{ className: 'rda_label' },
263
+
`RDA: ${grams}g per day`,
264
+
),
265
+
),
266
+
el(
267
+
'div',
268
+
{ className: 'cta_wrap' },
269
+
el(
270
+
'a',
271
+
{ href: product.action_url },
272
+
el(
273
+
'button',
274
+
{ className: 'rawsome-button--primary' },
275
+
'View Product',
276
+
),
277
+
),
278
+
),
279
+
);
280
+
grid.appendChild(card);
281
+
});
282
+
283
+
return grid;
284
+
}
285
+
286
+
_renderProductRecommendations(container) {
287
+
if (!container) return;
288
+
289
+
container.innerHTML = '';
290
+
291
+
if (!this.state.productsLoaded) {
292
+
const loading = el(
293
+
'div',
294
+
{ className: 'product-results-loading cta--loading' },
295
+
el('span', { className: 'button--loading' }),
296
+
el('p', {}, 'Loading recommended products...'),
297
+
);
298
+
container.appendChild(loading);
299
+
return;
300
+
}
301
+
302
+
const { tubs, pouches } = this.state.products;
303
+
304
+
const tubsSection = el(
305
+
'section',
306
+
{ className: 'product-section' },
307
+
el('h1', { className: 'product-section__title' }, '450g Tubs'),
308
+
this._buildProductGrid(tubs),
309
+
);
310
+
311
+
const pouchesSection = el(
312
+
'section',
313
+
{ className: 'product-section' },
314
+
el('h1', { className: 'product-section__title' }, 'Pouches'),
315
+
this._buildProductGrid(pouches),
316
+
);
317
+
318
+
container.appendChild(tubsSection);
319
+
container.appendChild(el('hr', {}));
320
+
container.appendChild(pouchesSection);
321
+
}
322
+
323
+
// ── Steps ────────────────────────────────────────────────────────
324
+
325
+
renderAgeStep() {
326
+
const ages = [1, 2, 3, 4, 5];
327
+
const row = el('div', { className: 'catculator-row' });
328
+
329
+
ages.forEach((num) => {
330
+
const cfg = AGE_CONFIG[num];
331
+
const img = CAT_IMAGES.ages[num - 1];
332
+
const col = el(
333
+
'div',
334
+
{ className: 'catculator-col' },
335
+
el('img', {
336
+
src: img.src,
337
+
className: `catculator-col__img catculator-col__img--${img.modifier}`,
338
+
}),
339
+
el(
340
+
'button',
341
+
{
342
+
className: 'rawsome-button--primary',
343
+
onClick: () => this.selectAge(num),
344
+
},
345
+
el('p', {}, cfg.label),
346
+
),
347
+
);
348
+
row.appendChild(col);
349
+
});
350
+
351
+
this.renderStep('How old is your cat?', row);
352
+
}
353
+
354
+
selectAge(num) {
355
+
const cfg = AGE_CONFIG[num];
356
+
this.state.age = num;
357
+
this.state.flow = cfg.flow;
358
+
this.state.coef = cfg.coef;
359
+
this.state.meals = cfg.meals;
360
+
this.state.productsLoaded = false;
361
+
this.fetchProducts(num);
362
+
363
+
if (cfg.flow === 'kitten') {
364
+
this.state.activity = cfg.activity;
365
+
this.renderKittenWeightStep();
366
+
} else if (cfg.flow === 'adolescent') {
367
+
this.renderAdolescentWeightStep();
368
+
} else {
369
+
this.renderAdultWeightStep();
370
+
}
371
+
}
372
+
373
+
renderKittenWeightStep() {
374
+
const content = this._buildWeightLayout(
375
+
() => {
376
+
const w = this._readWeightInput();
377
+
if (!w) return;
378
+
this.state.weight = w;
379
+
this.catculate();
380
+
},
381
+
() => this.renderAgeStep(),
382
+
);
383
+
this.renderStep('How much does your cat weigh?', content);
384
+
}
385
+
386
+
renderAdolescentWeightStep() {
387
+
const content = this._buildWeightLayout(
388
+
() => {
389
+
const w = this._readWeightInput();
390
+
if (!w) return;
391
+
this.state.weight = w;
392
+
this.renderAdolescentNeuteredStep();
393
+
},
394
+
() => this.renderAgeStep(),
395
+
);
396
+
this.renderStep('How much does your cat weigh?', content);
397
+
}
398
+
399
+
renderAdultWeightStep() {
400
+
const content = this._buildWeightLayout(
401
+
() => {
402
+
const w = this._readWeightInput();
403
+
if (!w) return;
404
+
this.state.weight = w;
405
+
this.renderAdultNeuteredStep();
406
+
},
407
+
() => this.renderAgeStep(),
408
+
);
409
+
this.renderStep('How much does your cat weigh?', content);
410
+
}
411
+
412
+
_readWeightInput() {
413
+
const input = this.container.querySelector('#weight_input');
414
+
if (!input) return null;
415
+
const v = parseFloat(input.value);
416
+
return Number.isNaN(v) || v <= 0 ? null : v;
417
+
}
418
+
419
+
_buildWeightLayout(onNext, onBack) {
420
+
const input = el('input', {
421
+
id: 'weight_input',
422
+
type: 'number',
423
+
min: '0.1',
424
+
step: '0.1',
425
+
});
426
+
427
+
const nextBtn = el(
428
+
'button',
429
+
{
430
+
className: 'rawsome-button--primary',
431
+
disabled: 'disabled',
432
+
onClick: onNext,
433
+
},
434
+
'Next',
435
+
);
436
+
437
+
input.addEventListener('input', () => {
438
+
const v = parseFloat(input.value);
439
+
if (Number.isNaN(v) || v <= 0) {
440
+
nextBtn.setAttribute('disabled', 'disabled');
441
+
} else {
442
+
nextBtn.removeAttribute('disabled');
443
+
}
444
+
});
445
+
446
+
const backBtn = el(
447
+
'button',
448
+
{ className: 'rawsome-button--secondary', onClick: onBack },
449
+
'Back',
450
+
);
451
+
452
+
const buttons = el(
453
+
'div',
454
+
{ className: 'cat_weight_buttons' },
455
+
backBtn,
456
+
nextBtn,
457
+
);
458
+
const label = el('p', { className: 'cat_weight_p' }, 'kg');
459
+
const inputGroup = el(
460
+
'div',
461
+
{ className: 'cat_weight_input_group' },
462
+
label,
463
+
input,
464
+
buttons,
465
+
);
466
+
const img = el('img', {
467
+
src: CAT_IMAGES.weight,
468
+
className: 'cat_weight_img',
469
+
});
470
+
return el('div', { className: 'cat_weight_cal' }, img, inputGroup);
471
+
}
472
+
473
+
renderAdolescentNeuteredStep() {
474
+
const img = el('img', { src: CAT_IMAGES.neutered });
475
+
476
+
const yesBtn = el(
477
+
'button',
478
+
{
479
+
className: 'rawsome-button--primary',
480
+
onClick: () => {
481
+
this.state.neutered = true;
482
+
this.state.activity = ACTIVITY_VALUES.intact.moderate;
483
+
this.catculate();
484
+
},
485
+
},
486
+
'Yes',
487
+
);
488
+
489
+
const noBtn = el(
490
+
'button',
491
+
{
492
+
className: 'rawsome-button--primary',
493
+
onClick: () => {
494
+
this.state.neutered = false;
495
+
this.state.activity = ACTIVITY_VALUES.intact.active;
496
+
this.catculate();
497
+
},
498
+
},
499
+
'No',
500
+
);
501
+
502
+
const backBtn = el(
503
+
'button',
504
+
{
505
+
className: 'rawsome-button--secondary',
506
+
onClick: () => this.renderAdolescentWeightStep(),
507
+
},
508
+
'Back',
509
+
);
510
+
511
+
const btnGroup = el(
512
+
'div',
513
+
{ className: 'cat_button_group' },
514
+
yesBtn,
515
+
noBtn,
516
+
);
517
+
518
+
const layout = el(
519
+
'div',
520
+
{ className: 'cat_neutered' },
521
+
img,
522
+
btnGroup,
523
+
backBtn,
524
+
);
525
+
this.renderStep('Is your cat spayed / neutered?', layout);
526
+
}
527
+
528
+
renderAdultNeuteredStep() {
529
+
const img = el('img', { src: CAT_IMAGES.neutered });
530
+
531
+
const yesBtn = el(
532
+
'button',
533
+
{
534
+
className: 'rawsome-button--primary',
535
+
onClick: () => {
536
+
this.state.neutered = true;
537
+
this.renderAdultActivityStep();
538
+
},
539
+
},
540
+
'Yes',
541
+
);
542
+
543
+
const noBtn = el(
544
+
'button',
545
+
{
546
+
className: 'rawsome-button--primary',
547
+
onClick: () => {
548
+
this.state.neutered = false;
549
+
this.renderAdultActivityStep();
550
+
},
551
+
},
552
+
'No',
553
+
);
554
+
555
+
const backBtn = el(
556
+
'button',
557
+
{
558
+
className: 'rawsome-button--secondary',
559
+
onClick: () => this.renderAdultWeightStep(),
560
+
},
561
+
'Back',
562
+
);
563
+
564
+
const btnGroup = el(
565
+
'div',
566
+
{ className: 'cat_button_group' },
567
+
yesBtn,
568
+
noBtn,
569
+
);
570
+
571
+
const layout = el(
572
+
'div',
573
+
{ className: 'cat_spayed' },
574
+
img,
575
+
btnGroup,
576
+
backBtn,
577
+
);
578
+
this.renderStep('Is your cat spayed / neutered?', layout);
579
+
}
580
+
581
+
renderAdultActivityStep() {
582
+
const isNeutered = this.state.neutered;
583
+
const av = isNeutered
584
+
? ACTIVITY_VALUES.neutered
585
+
: ACTIVITY_VALUES.intact;
586
+
587
+
const makeBtn = (label, actVal) =>
588
+
el(
589
+
'button',
590
+
{
591
+
className: 'rawsome-button--primary',
592
+
onClick: () => {
593
+
this.state.activity = actVal;
594
+
this.catculate();
595
+
},
596
+
},
597
+
label,
598
+
);
599
+
600
+
const img = el('img', { src: CAT_IMAGES.activity });
601
+
602
+
const btnGroup = el(
603
+
'div',
604
+
{ className: 'cat_button_group' },
605
+
makeBtn('Not Much', av.low),
606
+
makeBtn('Moderately', av.moderate),
607
+
makeBtn('Active', av.active),
608
+
);
609
+
610
+
const backBtn = el(
611
+
'button',
612
+
{
613
+
className: 'rawsome-button--secondary',
614
+
onClick: () => this.renderAdultNeuteredStep(),
615
+
},
616
+
'Back',
617
+
);
618
+
619
+
const layout = el(
620
+
'div',
621
+
{ className: 'cat_active' },
622
+
img,
623
+
btnGroup,
624
+
backBtn,
625
+
);
626
+
this.renderStep('How active is your cat?', layout);
627
+
}
628
+
629
+
catculate() {
630
+
const { weight, activity, coef } = this.state;
631
+
const { total, kcal } = calculateRDA(weight, activity, coef);
632
+
this.state.total = total;
633
+
this.state.kcal = kcal;
634
+
this.renderResultStep();
635
+
}
636
+
637
+
renderResultStep() {
638
+
const { total, kcal, meals } = this.state;
639
+
640
+
// RDA rows
641
+
const servingRow = el(
642
+
'div',
643
+
{ className: 'rc_reccoms' },
644
+
el(
645
+
'p',
646
+
{},
647
+
'Serving per day: ',
648
+
el('span', {}, el('strong', {}, `${total}g`)),
649
+
),
650
+
);
651
+
652
+
const mealsRow = el(
653
+
'div',
654
+
{ className: 'daily_meals' },
655
+
el('p', {}, meals),
656
+
);
657
+
658
+
const calorieRow = el(
659
+
'div',
660
+
{ className: 'rc_reccoms' },
661
+
el(
662
+
'p',
663
+
{},
664
+
'Daily calorie intake: ',
665
+
el('span', {}, el('strong', {}, `${kcal} kcal`)),
666
+
),
667
+
);
668
+
669
+
const startOverBtn = el(
670
+
'button',
671
+
{
672
+
className: 'rawsome-button--secondary',
673
+
onClick: () => this.resetState(),
674
+
},
675
+
'Start Over',
676
+
);
677
+
678
+
const inner = el(
679
+
'div',
680
+
{ className: 'recom_daily_amount_inner' },
681
+
servingRow,
682
+
mealsRow,
683
+
calorieRow,
684
+
startOverBtn,
685
+
);
686
+
687
+
const productsContainer = el('div', {
688
+
className: 'product-recommendations',
689
+
id: 'catculator-products',
690
+
});
691
+
692
+
const outer = el(
693
+
'div',
694
+
{ className: 'recom_daily_amount' },
695
+
inner,
696
+
productsContainer,
697
+
);
698
+
699
+
// Heading is rendered separately via renderStep wrapper, but recom_daily_amount_heading
700
+
// needs to be full-width, so we replicate that structure inline here:
701
+
this.clearContainer();
702
+
703
+
const heading = el(
704
+
'p',
705
+
{ className: 'recom_daily_amount_heading' },
706
+
'Your Recommended Daily Amount (RDA) is...',
707
+
);
708
+
709
+
this.container.appendChild(heading);
710
+
this.container.appendChild(outer);
711
+
712
+
this._renderProductRecommendations(productsContainer);
713
+
714
+
if (this._productsPromise) {
715
+
this._productsPromise.then(() => {
716
+
const currentContainer = this.container.querySelector(
717
+
'#catculator-products',
718
+
);
719
+
if (currentContainer) {
720
+
this._renderProductRecommendations(currentContainer);
721
+
}
722
+
});
723
+
}
724
+
}
725
+
}
-19
assets/scss/custom/_marketing-tokens.scss
-19
assets/scss/custom/_marketing-tokens.scss
···
1
-
// ── Shared Marketing Page Tokens ───────────────────────────────────────
2
-
// Used by Diet Builder, Feline Grimace Scale, and any future marketing/tool
3
-
// pages that follow this design language.
4
-
//
5
-
// Individual page files alias these into their own namespace (--db-*, --fgs-*)
6
-
// so they can override per-page without breaking others.
7
-
8
-
:root {
9
-
--brand-bg: #f7f4f0;
10
-
--brand-card: #ffffff;
11
-
--brand-green: #546052;
12
-
--brand-green-light: #edf1ec;
13
-
--brand-green-mid: #859e7d;
14
-
--brand-text: #2a3329;
15
-
--brand-text-muted: #687e6b;
16
-
--brand-border: #d4ddd3;
17
-
--brand-radius: 16px;
18
-
--brand-transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
19
-
}
+12
assets/scss/custom/_variables.scss
+12
assets/scss/custom/_variables.scss
···
23
23
$color-gray-lightest: #f3f2f2;
24
24
$color-white: #fff;
25
25
$color-text: #232524;
26
+
27
+
/* Marketing Pages Tokens */
28
+
$marketing-brand-bg: #f7f4f0;
29
+
$marketing-brand-card: $color-white;
30
+
$marketing-brand-green: $color-brand-dark;
31
+
$marketing-brand-green-light: #edf1ec;
32
+
$marketing-brand-green-mid: #859e7d;
33
+
$marketing-brand-text: #2a3329;
34
+
$marketing-brand-text-muted: $color-brand-primary;
35
+
$marketing-brand-border: #d4ddd3;
36
+
$marketing-brand-radius: 16px;
37
+
$marketing-brand-transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
+5
-4
assets/scss/custom/main.scss
+5
-4
assets/scss/custom/main.scss
···
1
1
@import 'variables';
2
-
@import 'marketing-tokens';
2
+
3
3
/* Custom Page Styling */
4
4
@import 'pages/cart';
5
5
@import 'pages/pdp';
6
-
@import 'pages/calculators';
6
+
@import 'pages/rawsome-catculator';
7
+
@import 'pages/dry-matter-basis-calculator';
7
8
@import 'pages/diet-builder';
8
9
@import 'pages/feline-grimace-scale';
9
10
@import 'pages/account';
10
11
11
-
/*Components*/
12
+
/* Components */
12
13
@import 'components/widgets/homepage_carousel';
13
14
@import 'components/accountsReward';
14
15
@import 'components/widgets/3-column';
···
17
18
@import 'components/pagination';
18
19
@import 'components/blogs';
19
20
20
-
/*Layouts*/
21
+
/* Layouts */
21
22
@import 'layouts/footer';
22
23
23
24
.previewCartCheckout .previewCartCheckout-additionalCheckoutButtons {
-771
assets/scss/custom/pages/_calculators.scss
-771
assets/scss/custom/pages/_calculators.scss
···
1
-
.rawsome-catculator-page {
2
-
font-family: 'Filson Pro', sans-serif;
3
-
4
-
.calculator-heading {
5
-
margin: auto;
6
-
text-align: center;
7
-
margin-bottom: 2rem;
8
-
9
-
h1 {
10
-
font-weight: 700;
11
-
font-size: 36px;
12
-
margin-bottom: 1rem;
13
-
14
-
@include breakpoint('medium') {
15
-
font-size: 48px;
16
-
}
17
-
}
18
-
19
-
p {
20
-
font-size: 18px;
21
-
}
22
-
}
23
-
24
-
.calculator-toggler {
25
-
margin: 0 auto 2rem;
26
-
width: 100%;
27
-
justify-content: space-between;
28
-
display: none;
29
-
30
-
p {
31
-
padding: 12px;
32
-
text-align: center;
33
-
margin-bottom: 0;
34
-
margin-top: 0;
35
-
36
-
a {
37
-
color: $body-color;
38
-
}
39
-
}
40
-
41
-
p.active {
42
-
border-bottom: 2px solid $headingColor;
43
-
font-weight: 700;
44
-
}
45
-
46
-
@include breakpoint('medium') {
47
-
width: 35%;
48
-
display: flex;
49
-
}
50
-
}
51
-
52
-
.calculator-toggler-mobile {
53
-
background-color: $light-BgColor;
54
-
display: block;
55
-
width: 100vw;
56
-
position: relative;
57
-
left: calc(-50vw + 50%);
58
-
padding: 1rem 0;
59
-
60
-
.inner {
61
-
margin: auto;
62
-
width: 92%;
63
-
64
-
p {
65
-
padding: 0.5rem 0.8rem;
66
-
margin-bottom: 0.2rem;
67
-
68
-
a {
69
-
color: $body-color;
70
-
}
71
-
}
72
-
73
-
p#toggler-active {
74
-
background-color: $white-color;
75
-
border-radius: 30px;
76
-
77
-
span {
78
-
float: right;
79
-
80
-
&.open {
81
-
rotate: 180deg;
82
-
}
83
-
}
84
-
}
85
-
86
-
#toggler-dropdown {
87
-
display: none;
88
-
89
-
&.active {
90
-
display: block;
91
-
}
92
-
}
93
-
}
94
-
95
-
@include breakpoint('medium') {
96
-
display: none;
97
-
}
98
-
}
99
-
}
100
-
101
-
.rawsome-button--primary {
102
-
transition: all 0.2s ease;
103
-
border: 2px solid $headingColor;
104
-
color: #fff;
105
-
font-size: 18px;
106
-
font-weight: bold;
107
-
margin: 20px 0 0 141px;
108
-
text-align: center;
109
-
display: block;
110
-
width: 165px;
111
-
height: 3.5rem;
112
-
background-color: #687d6a;
113
-
border-radius: 45px;
114
-
115
-
&:hover {
116
-
background-color: white;
117
-
color: $headingColor;
118
-
119
-
p {
120
-
color: $headingColor;
121
-
}
122
-
}
123
-
}
124
-
125
-
.rawsome-button--secondary {
126
-
background-color: white;
127
-
font-weight: bold;
128
-
color: black;
129
-
border: 2px solid $input-field;
130
-
transition: all 0.2s ease;
131
-
border-radius: 45px;
132
-
text-align: center;
133
-
width: 165px;
134
-
height: 3.5rem;
135
-
display: block;
136
-
137
-
&:hover {
138
-
color: $headingColor;
139
-
border-color: black;
140
-
}
141
-
}
142
-
143
-
.cat_weight_cal {
144
-
margin-top: 35px;
145
-
display: block;
146
-
147
-
img {
148
-
width: 80%;
149
-
height: auto;
150
-
margin: auto;
151
-
display: block;
152
-
153
-
@include breakpoint('medium') {
154
-
width: 100%;
155
-
}
156
-
}
157
-
158
-
div {
159
-
justify-content: center;
160
-
161
-
.cat_weight_p {
162
-
margin: 5rem 0 0.5rem;
163
-
color: black;
164
-
font-weight: 700;
165
-
text-transform: uppercase;
166
-
167
-
@include breakpoint('medium') {
168
-
margin: 0 0 0.5rem;
169
-
}
170
-
}
171
-
172
-
#weight_input {
173
-
margin: 0.5rem 0 1rem;
174
-
width: 100%;
175
-
border: 2px solid $input-field;
176
-
padding-left: 15px;
177
-
font-size: 18px;
178
-
color: #687d6a;
179
-
border-radius: 45px;
180
-
height: 3.5rem;
181
-
}
182
-
183
-
div {
184
-
display: flex;
185
-
justify-content: space-between;
186
-
gap: 10px;
187
-
188
-
button {
189
-
margin: 0;
190
-
width: 50%;
191
-
}
192
-
}
193
-
}
194
-
195
-
@include breakpoint('medium') {
196
-
display: grid;
197
-
grid-template-columns: 1fr 1fr;
198
-
gap: 30px;
199
-
margin: auto;
200
-
width: 50%;
201
-
}
202
-
}
203
-
204
-
.cat_spayed {
205
-
display: block;
206
-
margin-top: 35px;
207
-
208
-
.rawsome-button--secondary {
209
-
margin: 20px 0 0 96px;
210
-
211
-
@include breakpoint('medium') {
212
-
margin: 40px 0 0 26px;
213
-
}
214
-
}
215
-
216
-
@include breakpoint('medium') {
217
-
display: flex !important;
218
-
flex-direction: row;
219
-
align-items: center;
220
-
}
221
-
}
222
-
223
-
.cat_neutered {
224
-
display: block !important;
225
-
margin-top: 35px;
226
-
227
-
.rawsome-button--primary {
228
-
margin: 20px auto 0;
229
-
230
-
@include breakpoint('medium') {
231
-
margin: 20px 0 0 141px;
232
-
}
233
-
}
234
-
235
-
.rawsome-button--secondary {
236
-
margin: 20px 0 0 96px;
237
-
238
-
@include breakpoint('medium') {
239
-
margin: 20px 0 0 26px !important;
240
-
}
241
-
}
242
-
243
-
@include breakpoint('medium') {
244
-
display: flex !important;
245
-
flex-direction: row;
246
-
align-items: center;
247
-
}
248
-
}
249
-
250
-
.cat_active {
251
-
display: block !important;
252
-
253
-
img {
254
-
margin: 0 !important;
255
-
}
256
-
257
-
.rawsome-button--primary {
258
-
margin: 10px auto;
259
-
260
-
@include breakpoint('medium') {
261
-
margin: 20px 0 0 26px;
262
-
}
263
-
}
264
-
265
-
.rawsome-button--secondary {
266
-
margin: 10px auto 0 !important;
267
-
268
-
@include breakpoint('medium') {
269
-
margin: 20px 0 0 26px !important;
270
-
}
271
-
}
272
-
273
-
@include breakpoint('medium') {
274
-
display: flex !important;
275
-
flex-direction: row;
276
-
align-items: center;
277
-
justify-content: center;
278
-
}
279
-
}
280
-
281
-
.recom_daily_amount_heading {
282
-
background-color: $headingColor;
283
-
color: $white-color;
284
-
font-weight: bold;
285
-
font-size: 24px;
286
-
text-align: center;
287
-
margin-bottom: 0;
288
-
padding: 3.5rem 0 0.5rem;
289
-
width: 99.4vw;
290
-
position: relative;
291
-
left: calc(-50vw + 50%);
292
-
}
293
-
294
-
.recom_daily_amount {
295
-
width: 99.4vw;
296
-
position: relative;
297
-
left: calc(-50vw + 50%);
298
-
background-color: $headingColor;
299
-
padding: 1rem 1rem 3rem;
300
-
301
-
.rda_account_btn_container {
302
-
margin: 1.5rem auto 0;
303
-
width: 95%;
304
-
305
-
.rda_account_btn {
306
-
margin: auto;
307
-
width: fit-content;
308
-
padding-left: 25px;
309
-
padding-right: 25px;
310
-
}
311
-
312
-
@include breakpoint('medium') {
313
-
width: 30%;
314
-
}
315
-
}
316
-
317
-
.recom_daily_amount_inner {
318
-
background-color: $white-color;
319
-
margin: auto;
320
-
width: 100%;
321
-
border-radius: 15px;
322
-
padding: 18px 10px;
323
-
324
-
.rc_reccoms {
325
-
background-color: $light-BgColor;
326
-
width: 95%;
327
-
margin: auto;
328
-
border-radius: 15px;
329
-
330
-
p {
331
-
padding: 7px 15px;
332
-
333
-
span {
334
-
float: right;
335
-
margin: 0;
336
-
337
-
@include breakpoint('medium') {
338
-
float: none;
339
-
margin-left: 70px;
340
-
}
341
-
}
342
-
}
343
-
344
-
&:last-of-type {
345
-
p {
346
-
span {
347
-
@include breakpoint('medium') {
348
-
margin-left: 45px;
349
-
}
350
-
}
351
-
}
352
-
}
353
-
}
354
-
355
-
.daily_meals {
356
-
width: 85%;
357
-
margin: 10px auto;
358
-
359
-
@include breakpoint('medium') {
360
-
width: 89%;
361
-
}
362
-
}
363
-
364
-
.rawsome-button--secondary {
365
-
width: 95%;
366
-
height: 2.5rem;
367
-
margin: 2rem auto 0;
368
-
position: relative;
369
-
}
370
-
371
-
@include breakpoint('medium') {
372
-
width: 30%;
373
-
}
374
-
}
375
-
}
376
-
377
-
.button--loading::after {
378
-
content: '';
379
-
position: absolute;
380
-
width: 30px;
381
-
height: 30px;
382
-
right: 0;
383
-
left: 0;
384
-
margin: auto;
385
-
border: 6px solid #687d6a;
386
-
border-top-color: #bd9b60;
387
-
border-radius: 50%;
388
-
animation: button-loading-spinner 1s ease infinite;
389
-
}
390
-
391
-
.cta--loading {
392
-
opacity: 0.2;
393
-
pointer-events: none;
394
-
}
395
-
396
-
@keyframes button-loading-spinner {
397
-
from {
398
-
transform: rotate(0turn);
399
-
}
400
-
401
-
to {
402
-
transform: rotate(1turn);
403
-
}
404
-
}
405
-
406
-
.catculator-row {
407
-
width: 100%;
408
-
409
-
.catculator-col {
410
-
width: 100%;
411
-
display: flex;
412
-
align-items: center;
413
-
justify-content: center;
414
-
415
-
@include breakpoint('large') {
416
-
display: block;
417
-
}
418
-
}
419
-
420
-
button {
421
-
margin-left: 1.5rem;
422
-
width: 80%;
423
-
height: 3.5rem;
424
-
border-radius: 40px;
425
-
background-color: #687d6a;
426
-
text-align: center;
427
-
}
428
-
429
-
@include breakpoint('large') {
430
-
display: flex;
431
-
flex-direction: row;
432
-
433
-
button {
434
-
margin-right: 95px;
435
-
margin-left: 0;
436
-
width: 150px;
437
-
}
438
-
}
439
-
}
440
-
441
-
#rawsome-bottom {
442
-
margin-top: 2rem;
443
-
background-color: #f3f2f2;
444
-
width: 100vw;
445
-
position: relative;
446
-
left: calc(-50vw + 50%);
447
-
padding: 3rem 0;
448
-
449
-
.rawsome-info-table {
450
-
display: grid;
451
-
grid-template-columns: auto;
452
-
margin: auto;
453
-
width: 92%;
454
-
455
-
div {
456
-
text-align: center;
457
-
margin-bottom: 2rem;
458
-
display: flex;
459
-
align-items: center;
460
-
justify-content: center;
461
-
462
-
div {
463
-
display: block;
464
-
padding-left: 20px;
465
-
466
-
@include breakpoint('medium') {
467
-
padding-left: 0;
468
-
}
469
-
}
470
-
471
-
img {
472
-
width: 30%;
473
-
474
-
@include breakpoint('medium') {
475
-
height: 120px;
476
-
width: auto;
477
-
}
478
-
}
479
-
480
-
h1 {
481
-
margin: 3rem auto 0.5rem;
482
-
}
483
-
484
-
p {
485
-
margin-bottom: 1rem;
486
-
}
487
-
488
-
@include breakpoint('medium') {
489
-
display: block;
490
-
}
491
-
}
492
-
493
-
@include breakpoint('medium') {
494
-
width: 81%;
495
-
grid-template-columns: auto auto auto;
496
-
}
497
-
}
498
-
499
-
@include breakpoint('medium') {
500
-
width: 99.4vw;
501
-
}
502
-
}
503
-
504
-
#show_RDA {
505
-
padding: 0;
506
-
position: static;
507
-
508
-
.modal-header {
509
-
padding-left: 2.25rem;
510
-
padding-right: 3.0357rem;
511
-
border-bottom: none;
512
-
513
-
.swal2-close {
514
-
position: absolute;
515
-
z-index: 2;
516
-
top: 0;
517
-
right: 0;
518
-
-ms-flex-align: center;
519
-
align-items: center;
520
-
-ms-flex-pack: center;
521
-
justify-content: center;
522
-
width: 1.2em;
523
-
height: 1.2em;
524
-
padding: 0;
525
-
overflow: hidden;
526
-
transition: color 0.1s ease-out;
527
-
border: none;
528
-
border-radius: 0;
529
-
background: 0 0;
530
-
color: #ccc;
531
-
font-family: serif;
532
-
font-size: 2.5em;
533
-
line-height: 1.2;
534
-
cursor: pointer;
535
-
}
536
-
}
537
-
538
-
#rda-title {
539
-
color: $white-color;
540
-
text-align: center;
541
-
}
542
-
543
-
#swal2-title {
544
-
color: $white-color;
545
-
text-align: center;
546
-
}
547
-
548
-
hr {
549
-
border: none;
550
-
margin: 0;
551
-
}
552
-
553
-
.swal2-content {
554
-
margin: auto;
555
-
width: 100%;
556
-
557
-
@include breakpoint('medium') {
558
-
width: 80%;
559
-
}
560
-
561
-
#swal2-content-pouches,
562
-
#swal2-content_tubs {
563
-
display: grid !important;
564
-
grid-template-columns: 1fr 1fr;
565
-
gap: 13px;
566
-
567
-
@include breakpoint('medium') {
568
-
grid-template-columns: 1fr 1fr 1fr 1fr;
569
-
}
570
-
}
571
-
572
-
.wrapper {
573
-
padding: 15px 10px;
574
-
border-radius: 20px;
575
-
background-color: $white-color;
576
-
577
-
.image_wrap {
578
-
img {
579
-
width: auto;
580
-
height: auto;
581
-
}
582
-
}
583
-
584
-
.content_wrap {
585
-
margin: 0.5rem auto 1rem;
586
-
587
-
p {
588
-
text-align: center;
589
-
}
590
-
}
591
-
592
-
.rawsome-button--primary {
593
-
margin: 0 auto;
594
-
width: 100%;
595
-
font-size: 16px;
596
-
597
-
@include breakpoint('medium') {
598
-
font-size: 18px;
599
-
}
600
-
}
601
-
602
-
@include breakpoint('medium') {
603
-
padding: 20px;
604
-
}
605
-
}
606
-
}
607
-
}
608
-
609
-
.dry-matter-basis-calculator-page {
610
-
#dmb-test {
611
-
display: none;
612
-
background-color: $headingColor;
613
-
border-radius: 20px;
614
-
padding: 30px 30px 20px;
615
-
margin-top: 20px;
616
-
617
-
h3 {
618
-
color: white;
619
-
font-weight: 700;
620
-
font-size: 24px;
621
-
margin: 0 0 1rem;
622
-
}
623
-
624
-
p {
625
-
color: white;
626
-
font-weight: 700;
627
-
font-size: 20px;
628
-
margin-bottom: 1rem;
629
-
}
630
-
}
631
-
632
-
#dry-matter-container {
633
-
padding-top: 2rem;
634
-
display: grid;
635
-
gap: 20px;
636
-
grid-template-columns: 1fr;
637
-
}
638
-
639
-
#dry-matter-container h1 {
640
-
color: #687d6a;
641
-
}
642
-
643
-
#dry-matter-container .dmc2 h1 {
644
-
color: #232524;
645
-
}
646
-
647
-
.green-col {
648
-
color: #687d6a;
649
-
}
650
-
651
-
.dmc2 {
652
-
order: -1;
653
-
border: 1px solid #dcdcdc;
654
-
border-radius: 40px;
655
-
box-shadow: 1px 1px 8px 2px rgba(220, 220, 220, 1);
656
-
padding: 0 20px 20px;
657
-
658
-
@include breakpoint('medium') {
659
-
padding: 0 30px 20px;
660
-
}
661
-
662
-
.percent-calculator {
663
-
display: block;
664
-
665
-
div {
666
-
position: relative;
667
-
668
-
input {
669
-
margin-top: 0.5rem;
670
-
}
671
-
672
-
#calcBtn {
673
-
width: 100%;
674
-
transition: all 0.2s ease;
675
-
border: 2px solid $headingColor !important;
676
-
677
-
&:hover {
678
-
background-color: white !important;
679
-
680
-
p {
681
-
color: $headingColor !important;
682
-
}
683
-
}
684
-
685
-
@include breakpoint('medium') {
686
-
position: absolute;
687
-
bottom: 0;
688
-
left: 0;
689
-
}
690
-
}
691
-
692
-
@include breakpoint('medium') {
693
-
padding: 0 0.7rem 0 0;
694
-
}
695
-
}
696
-
697
-
@include breakpoint('medium') {
698
-
display: grid;
699
-
max-width: 100%;
700
-
grid-template-columns: 35% 35% 30%;
701
-
702
-
p {
703
-
margin-bottom: 0.5rem;
704
-
}
705
-
706
-
input {
707
-
width: 100%;
708
-
}
709
-
}
710
-
}
711
-
}
712
-
713
-
#dry-matter-bottom {
714
-
margin-top: 2rem;
715
-
background-color: #f3f2f2;
716
-
width: 100vw;
717
-
position: relative;
718
-
left: calc(-50vw + 50%);
719
-
padding: 3rem 0;
720
-
721
-
.dry-matter-info-table {
722
-
display: grid;
723
-
grid-template-columns: auto;
724
-
margin: auto;
725
-
width: 92%;
726
-
727
-
p {
728
-
margin-bottom: 1rem;
729
-
}
730
-
731
-
strong {
732
-
font-size: 24px;
733
-
}
734
-
735
-
table {
736
-
width: 100%;
737
-
738
-
th {
739
-
font-weight: 700;
740
-
text-align: left;
741
-
color: #687d6a;
742
-
padding: 0.5rem 55px 0.5rem 0;
743
-
}
744
-
745
-
td {
746
-
padding: 0.5rem 55px 0.5rem 0;
747
-
border-bottom: 1px solid #dbdada;
748
-
}
749
-
}
750
-
751
-
@include breakpoint('medium') {
752
-
width: 81%;
753
-
grid-template-columns: auto auto auto;
754
-
}
755
-
}
756
-
757
-
@include breakpoint('medium') {
758
-
width: 99.4vw;
759
-
}
760
-
}
761
-
762
-
@include breakpoint('medium') {
763
-
#dry-matter-container {
764
-
grid-template-columns: 1fr 1fr;
765
-
}
766
-
767
-
.dmc2 {
768
-
order: 2;
769
-
}
770
-
}
771
-
}
+77
-92
assets/scss/custom/pages/_diet-builder.scss
+77
-92
assets/scss/custom/pages/_diet-builder.scss
···
1
1
// ── Diet Builder ─────────────────────────────────────────────────────
2
2
3
-
// CSS Variables — aliased from shared marketing tokens (_marketing-tokens.scss)
4
-
:root {
5
-
--db-bg: var(--brand-bg);
6
-
--db-card: var(--brand-card);
7
-
--db-green: var(--brand-green);
8
-
--db-green-light: var(--brand-green-light);
9
-
--db-green-mid: var(--brand-green-mid);
10
-
--db-text: var(--brand-text);
11
-
--db-text-muted: var(--brand-text-muted);
12
-
--db-selected: var(--brand-green);
13
-
--db-border: var(--brand-border);
14
-
--db-radius: var(--brand-radius);
15
-
--db-transition: var(--brand-transition);
16
-
}
17
-
18
3
// Import fonts
19
4
// @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=DM+Sans:wght@300;400;500;600&display=swap');
20
5
···
22
7
.diet-builder-wrapper {
23
8
width: 100vw;
24
9
margin-left: calc(-50vw + 50%);
25
-
background: var(--db-bg);
10
+
background: $marketing-brand-bg;
26
11
min-height: 100vh;
27
12
position: relative;
28
13
padding: 2rem 1rem;
···
45
30
animation: dbFadeDown 0.6s ease both;
46
31
47
32
em {
48
-
color: var(--db-text-muted);
33
+
color: $marketing-brand-text-muted;
49
34
font-size: 0.9rem;
50
35
}
51
36
···
58
43
h1 {
59
44
font-weight: 700;
60
45
font-size: clamp(1.8rem, 5vw, 2.8rem);
61
-
color: var(--db-green);
46
+
color: $marketing-brand-green;
62
47
line-height: 1.1;
63
48
letter-spacing: -0.5px;
64
49
margin-bottom: 1rem;
···
67
52
p {
68
53
font-size: 1rem;
69
54
font-weight: 300;
70
-
color: var(--db-text-muted);
55
+
color: $marketing-brand-text-muted;
71
56
line-height: 1.6;
72
57
max-width: 480px;
73
58
margin-inline: auto;
···
97
82
98
83
.diet-builder-step__heading {
99
84
font-weight: 600;
100
-
color: var(--db-green);
85
+
color: $marketing-brand-green;
101
86
font-size: 1.5rem;
102
87
text-align: center;
103
88
margin-bottom: 0.5rem;
104
89
}
105
90
106
91
.diet-builder-step__sub-heading {
107
-
color: var(--db-green);
92
+
color: $marketing-brand-green;
108
93
font-size: 0.95rem;
109
94
text-align: center;
110
95
margin-bottom: 1.5rem;
···
116
101
117
102
// ── Buttons ──────────────────────────────────────────────────
118
103
.diet-builder-btn--primary {
119
-
transition: all var(--db-transition);
120
-
border: 2px solid var(--db-green) !important;
104
+
transition: all $marketing-brand-transition;
105
+
border: 2px solid $marketing-brand-green;
121
106
color: white;
122
107
font-size: 1rem;
123
108
font-weight: 600;
···
127
112
justify-content: center;
128
113
min-width: 120px;
129
114
height: 3rem;
130
-
background-color: var(--db-green);
131
-
border-radius: var(--db-radius);
115
+
background-color: $marketing-brand-green;
116
+
border-radius: $marketing-brand-radius;
132
117
cursor: pointer;
133
118
134
119
&:hover {
135
-
background-color: white !important;
136
-
color: var(--db-green) !important;
120
+
background-color: white;
121
+
color: $marketing-brand-green;
137
122
box-shadow: 0 4px 16px rgba(84, 96, 82, 0.2);
138
123
}
139
124
···
146
131
.diet-builder-btn--secondary {
147
132
background-color: white;
148
133
font-weight: 600;
149
-
color: var(--db-green);
150
-
border: 2px solid var(--db-green);
151
-
transition: all var(--db-transition);
152
-
border-radius: var(--db-radius);
134
+
color: $marketing-brand-green;
135
+
border: 2px solid $marketing-brand-green;
136
+
transition: all $marketing-brand-transition;
137
+
border-radius: $marketing-brand-radius;
153
138
text-align: center;
154
139
min-width: 120px;
155
140
height: 3rem;
···
159
144
cursor: pointer;
160
145
161
146
&:hover {
162
-
background-color: var(--db-green-light);
147
+
background-color: $marketing-brand-green-light;
163
148
}
164
149
}
165
150
···
218
203
219
204
.diet-builder-col__img--adolescent {
220
205
height: 106px;
221
-
margin: 44px 0 30px 0;
206
+
margin: 44px 0 30px;
222
207
}
223
208
224
209
.diet-builder-col__img--preAdult {
225
210
height: 128px;
226
-
margin: 22px 0 30px 0;
211
+
margin: 22px 0 30px;
227
212
}
228
213
229
214
.diet-builder-col__img--adult {
···
245
230
.diet-builder-age-form__dob-label {
246
231
display: block;
247
232
text-transform: uppercase;
248
-
color: var(--db-text);
233
+
color: $marketing-brand-text;
249
234
font-size: 0.8rem;
250
235
font-weight: 600;
251
236
letter-spacing: 1px;
···
260
245
#cat-name {
261
246
width: 100%;
262
247
height: 3.5rem;
263
-
border: 2px solid var(--db-border);
264
-
border-radius: var(--db-radius);
265
-
background-color: var(--db-card);
266
-
color: var(--db-text);
248
+
border: 2px solid $marketing-brand-border;
249
+
border-radius: $marketing-brand-radius;
250
+
background-color: $marketing-brand-card;
251
+
color: $marketing-brand-text;
267
252
font-size: 1rem;
268
253
padding: 0 20px;
269
254
transition:
270
-
border-color var(--db-transition),
271
-
box-shadow var(--db-transition);
255
+
border-color $marketing-brand-transition,
256
+
box-shadow $marketing-brand-transition;
272
257
273
258
&:focus {
274
259
outline: none;
275
-
border-color: var(--db-green);
260
+
border-color: $marketing-brand-green;
276
261
box-shadow: 0 0 0 3px rgba(84, 96, 82, 0.1);
277
262
}
278
263
279
264
&::placeholder {
280
-
color: var(--db-text-muted);
265
+
color: $marketing-brand-text-muted;
281
266
}
282
267
}
283
268
···
309
294
label {
310
295
display: block;
311
296
text-transform: uppercase;
312
-
color: var(--db-text);
297
+
color: $marketing-brand-text;
313
298
font-size: 0.8rem;
314
299
font-weight: 600;
315
300
letter-spacing: 1px;
···
320
305
input[type='email'] {
321
306
width: 100%;
322
307
height: 3.5rem;
323
-
border: 2px solid var(--db-border);
324
-
border-radius: var(--db-radius);
325
-
background-color: var(--db-card);
326
-
color: var(--db-text);
308
+
border: 2px solid $marketing-brand-border;
309
+
border-radius: $marketing-brand-radius;
310
+
background-color: $marketing-brand-card;
311
+
color: $marketing-brand-text;
327
312
font-size: 1rem;
328
313
padding: 0 20px;
329
314
transition:
330
-
border-color var(--db-transition),
331
-
box-shadow var(--db-transition);
315
+
border-color $marketing-brand-transition,
316
+
box-shadow $marketing-brand-transition;
332
317
333
318
&:focus {
334
319
outline: none;
335
-
border-color: var(--db-green);
320
+
border-color: $marketing-brand-green;
336
321
box-shadow: 0 0 0 3px rgba(84, 96, 82, 0.1);
337
322
}
338
323
339
324
&::placeholder {
340
-
color: var(--db-text-muted);
325
+
color: $marketing-brand-text-muted;
341
326
}
342
327
}
343
328
···
353
338
354
339
input {
355
340
height: 3.5rem;
356
-
border: 2px solid var(--db-border);
357
-
border-radius: var(--db-radius);
358
-
background-color: var(--db-card);
359
-
color: var(--db-text);
341
+
border: 2px solid $marketing-brand-border;
342
+
border-radius: $marketing-brand-radius;
343
+
background-color: $marketing-brand-card;
344
+
color: $marketing-brand-text;
360
345
font-size: 1rem;
361
346
text-align: center;
362
347
appearance: textfield;
363
-
-moz-appearance: textfield;
364
348
transition:
365
-
border-color var(--db-transition),
366
-
box-shadow var(--db-transition);
349
+
border-color $marketing-brand-transition,
350
+
box-shadow $marketing-brand-transition;
367
351
368
352
&:focus {
369
353
outline: none;
370
-
border-color: var(--db-green);
354
+
border-color: $marketing-brand-green;
371
355
box-shadow: 0 0 0 3px rgba(84, 96, 82, 0.1);
372
356
}
373
357
374
358
&::-webkit-outer-spin-button,
375
359
&::-webkit-inner-spin-button {
376
-
-webkit-appearance: none;
360
+
appearance: none;
377
361
margin: 0;
378
362
}
379
363
380
364
&::placeholder {
381
-
color: var(--db-text-muted);
365
+
color: $marketing-brand-text-muted;
382
366
}
383
367
}
384
368
···
423
407
max-width: 250px;
424
408
425
409
.diet-builder-weight__label {
426
-
color: var(--db-text);
410
+
color: $marketing-brand-text;
427
411
font-weight: 600;
428
412
text-transform: uppercase;
429
413
font-size: 0.8rem;
···
435
419
#weight_input {
436
420
width: 100%;
437
421
height: 3.5rem;
438
-
border: 2px solid var(--db-border);
439
-
border-radius: var(--db-radius);
440
-
background-color: var(--db-card);
441
-
color: var(--db-text);
422
+
border: 2px solid $marketing-brand-border;
423
+
border-radius: $marketing-brand-radius;
424
+
background-color: $marketing-brand-card;
425
+
color: $marketing-brand-text;
442
426
font-size: 1.2rem;
443
427
text-align: center;
444
428
appearance: textfield;
445
-
-moz-appearance: textfield;
446
429
transition:
447
-
border-color var(--db-transition),
448
-
box-shadow var(--db-transition);
430
+
border-color $marketing-brand-transition,
431
+
box-shadow $marketing-brand-transition;
449
432
450
433
&:focus {
451
434
outline: none;
452
-
border-color: var(--db-green);
435
+
border-color: $marketing-brand-green;
453
436
box-shadow: 0 0 0 3px rgba(84, 96, 82, 0.1);
454
437
}
455
438
456
439
&::-webkit-outer-spin-button,
457
440
&::-webkit-inner-spin-button {
458
-
-webkit-appearance: none;
441
+
appearance: none;
459
442
margin: 0;
460
443
}
461
444
}
···
584
567
align-items: center;
585
568
586
569
.diet-builder-ingredients__description {
587
-
color: var(--db-text-muted);
570
+
color: $marketing-brand-text-muted;
588
571
font-size: 0.95rem;
589
572
text-align: center;
590
573
max-width: 500px;
···
610
593
}
611
594
612
595
.diet-builder-ingredients__card {
613
-
background-color: var(--db-card);
614
-
border: 2px solid var(--db-border);
615
-
border-radius: var(--db-radius);
596
+
background-color: $marketing-brand-card;
597
+
border: 2px solid $marketing-brand-border;
598
+
border-radius: $marketing-brand-radius;
616
599
padding: 16px 12px;
617
600
font-size: 0.9rem;
618
601
font-weight: 600;
619
-
color: var(--db-text);
602
+
color: $marketing-brand-text;
620
603
text-align: center;
621
604
cursor: pointer;
622
-
transition: all var(--db-transition);
605
+
transition: all $marketing-brand-transition;
623
606
624
607
&:hover {
625
-
background-color: var(--db-green-light);
626
-
border-color: var(--db-green-mid);
608
+
background-color: $marketing-brand-green-light;
609
+
border-color: $marketing-brand-green-mid;
627
610
}
628
611
629
612
&--selected {
630
-
background-color: var(--db-green);
613
+
background-color: $marketing-brand-green;
631
614
color: white;
632
-
border-color: var(--db-green);
615
+
border-color: $marketing-brand-green;
633
616
634
617
&:hover {
635
618
background-color: #465444;
···
675
658
}
676
659
677
660
.diet-builder-health__card {
678
-
background-color: var(--db-card);
679
-
border: 2px solid var(--db-border);
680
-
border-radius: var(--db-radius);
661
+
background-color: $marketing-brand-card;
662
+
border: 2px solid $marketing-brand-border;
663
+
border-radius: $marketing-brand-radius;
681
664
padding: 16px 12px;
682
665
display: flex;
683
666
align-items: center;
684
667
justify-content: center;
685
668
font-size: 0.85rem;
686
669
font-weight: 600;
687
-
color: var(--db-text);
670
+
color: $marketing-brand-text;
688
671
text-align: center;
689
672
cursor: pointer;
690
-
transition: all var(--db-transition);
673
+
transition: all $marketing-brand-transition;
691
674
min-height: 60px;
692
675
693
676
&:hover {
694
-
background-color: var(--db-green-light);
695
-
border-color: var(--db-green-mid);
677
+
background-color: $marketing-brand-green-light;
678
+
border-color: $marketing-brand-green-mid;
696
679
}
697
680
698
681
&--selected {
699
-
background-color: var(--db-green);
682
+
background-color: $marketing-brand-green;
700
683
color: white;
701
-
border-color: var(--db-green);
684
+
border-color: $marketing-brand-green;
702
685
703
686
&:hover {
704
687
background-color: #465444;
···
1031
1014
.diet-builder-product-grid {
1032
1015
display: grid;
1033
1016
grid-template-columns: 1fr 1fr;
1034
-
grid-gap: 13px;
1017
+
gap: 13px;
1035
1018
1036
1019
@include breakpoint('medium') {
1037
1020
grid-template-columns: 1fr 1fr 1fr 1fr;
···
1091
1074
opacity: 0;
1092
1075
transform: translateY(-16px);
1093
1076
}
1077
+
1094
1078
to {
1095
1079
opacity: 1;
1096
1080
transform: translateY(0);
···
1102
1086
opacity: 0;
1103
1087
transform: translateY(20px);
1104
1088
}
1089
+
1105
1090
to {
1106
1091
opacity: 1;
1107
1092
transform: translateY(0);
+345
assets/scss/custom/pages/_dry-matter-basis-calculator.scss
+345
assets/scss/custom/pages/_dry-matter-basis-calculator.scss
···
1
+
// ── Dry Matter Basis Calculator ───────────────────────────────────────
2
+
3
+
.dry-matter-basis-calculator-page {
4
+
width: 100vw;
5
+
margin-left: calc(-50vw + 50%);
6
+
background: $marketing-brand-bg;
7
+
min-height: 100vh;
8
+
position: relative;
9
+
padding: 2rem 1rem;
10
+
11
+
// ── Heading ───────────────────────────────────────────────────
12
+
.calculator-heading {
13
+
margin: 2rem auto;
14
+
text-align: center;
15
+
max-width: 70ch;
16
+
text-wrap: balance;
17
+
position: relative;
18
+
z-index: 1;
19
+
animation: dmbFadeDown 0.6s ease both;
20
+
21
+
h1 {
22
+
font-weight: 700;
23
+
font-size: clamp(1.8rem, 5vw, 2.8rem);
24
+
color: $marketing-brand-green;
25
+
line-height: 1.1;
26
+
letter-spacing: -0.5px;
27
+
margin-bottom: 1rem;
28
+
}
29
+
30
+
p {
31
+
font-size: 1rem;
32
+
font-weight: 300;
33
+
color: $marketing-brand-text-muted;
34
+
line-height: 1.6;
35
+
max-width: 520px;
36
+
margin-inline: auto;
37
+
}
38
+
}
39
+
40
+
// ── Toggler (desktop) ─────────────────────────────────────────
41
+
.calculator-toggler {
42
+
margin: 0 auto 2rem;
43
+
width: 100%;
44
+
justify-content: space-between;
45
+
display: none;
46
+
47
+
p {
48
+
padding: 12px;
49
+
text-align: center;
50
+
margin-bottom: 0;
51
+
margin-top: 0;
52
+
53
+
a {
54
+
color: $marketing-brand-text;
55
+
}
56
+
}
57
+
58
+
p.active {
59
+
border-bottom: 2px solid $marketing-brand-green;
60
+
font-weight: 700;
61
+
}
62
+
63
+
@include breakpoint('medium') {
64
+
width: 35%;
65
+
display: flex;
66
+
}
67
+
}
68
+
69
+
// ── Toggler (mobile) ──────────────────────────────────────────
70
+
.calculator-toggler-mobile {
71
+
background-color: $marketing-brand-green-light;
72
+
display: block;
73
+
width: 100vw;
74
+
position: relative;
75
+
left: calc(-50vw + 50%);
76
+
padding: 1rem 0;
77
+
78
+
.inner {
79
+
margin: auto;
80
+
width: 92%;
81
+
82
+
p {
83
+
padding: 0.5rem 0.8rem;
84
+
margin-bottom: 0.2rem;
85
+
86
+
a {
87
+
color: $marketing-brand-text;
88
+
}
89
+
}
90
+
91
+
p#toggler-active {
92
+
background-color: $marketing-brand-card;
93
+
border-radius: 30px;
94
+
95
+
span {
96
+
float: right;
97
+
98
+
&.open {
99
+
rotate: 180deg;
100
+
}
101
+
}
102
+
}
103
+
104
+
#toggler-dropdown {
105
+
display: none;
106
+
107
+
&.active {
108
+
display: block;
109
+
}
110
+
}
111
+
}
112
+
113
+
@include breakpoint('medium') {
114
+
display: none;
115
+
}
116
+
}
117
+
118
+
// ── Main calculator grid ──────────────────────────────────────
119
+
#dry-matter-container {
120
+
padding-top: 2rem;
121
+
display: grid;
122
+
gap: 2rem;
123
+
grid-template-columns: 1fr;
124
+
125
+
@include breakpoint('medium') {
126
+
grid-template-columns: 1fr 1fr;
127
+
}
128
+
}
129
+
130
+
// ── Intro column ──────────────────────────────────────────────
131
+
.dmb-intro {
132
+
h2 {
133
+
font-size: 1.4rem;
134
+
font-weight: 700;
135
+
color: $marketing-brand-green;
136
+
margin-bottom: 1rem;
137
+
}
138
+
139
+
p {
140
+
font-size: 0.95rem;
141
+
color: $marketing-brand-text-muted;
142
+
line-height: 1.65;
143
+
margin-bottom: 1rem;
144
+
}
145
+
}
146
+
147
+
// ── Input card ────────────────────────────────────────────────
148
+
.dmb-input {
149
+
order: -1;
150
+
background-color: $marketing-brand-card;
151
+
border: 2px solid $marketing-brand-border;
152
+
border-radius: $marketing-brand-radius;
153
+
padding: 1.5rem 1.25rem 1.75rem;
154
+
box-shadow: 0 2px 12px rgba(84, 96, 82, 0.08);
155
+
156
+
@include breakpoint('medium') {
157
+
order: 2;
158
+
padding: 1.75rem 2rem 2rem;
159
+
}
160
+
161
+
h2 {
162
+
font-size: 1.1rem;
163
+
font-weight: 600;
164
+
color: $marketing-brand-text;
165
+
line-height: 1.4;
166
+
margin-bottom: 1.5rem;
167
+
}
168
+
169
+
.dmb-green {
170
+
color: $marketing-brand-green;
171
+
}
172
+
}
173
+
174
+
// ── Input fields ──────────────────────────────────────────────
175
+
.dmb-input__fields {
176
+
display: flex;
177
+
flex-direction: column;
178
+
gap: 1rem;
179
+
180
+
@include breakpoint('medium') {
181
+
display: grid;
182
+
grid-template-columns: 1fr 1fr auto;
183
+
align-items: flex-end;
184
+
gap: 0.75rem;
185
+
}
186
+
}
187
+
188
+
.dmb-input__field {
189
+
display: flex;
190
+
flex-direction: column;
191
+
gap: 0.4rem;
192
+
193
+
label {
194
+
font-size: 0.85rem;
195
+
color: $marketing-brand-text;
196
+
text-transform: uppercase;
197
+
letter-spacing: 0.5px;
198
+
}
199
+
200
+
input[type='number'] {
201
+
width: 100%;
202
+
height: 3.5rem;
203
+
border: 2px solid $marketing-brand-border;
204
+
border-radius: $marketing-brand-radius;
205
+
background-color: $marketing-brand-bg;
206
+
color: $marketing-brand-text;
207
+
font-size: 1.2rem;
208
+
font-weight: 600;
209
+
text-align: center;
210
+
appearance: textfield;
211
+
transition:
212
+
border-color $marketing-brand-transition,
213
+
box-shadow $marketing-brand-transition;
214
+
215
+
&:focus {
216
+
outline: none;
217
+
border-color: $marketing-brand-green;
218
+
box-shadow: 0 0 0 3px rgba(84, 96, 82, 0.1);
219
+
}
220
+
221
+
&::-webkit-outer-spin-button,
222
+
&::-webkit-inner-spin-button {
223
+
appearance: none;
224
+
margin: 0;
225
+
}
226
+
}
227
+
228
+
&.dmb-input__field--btn {
229
+
@include breakpoint('medium') {
230
+
padding-bottom: 0;
231
+
}
232
+
233
+
.rawsome-button--primary {
234
+
width: 100%;
235
+
height: 3.5rem;
236
+
}
237
+
}
238
+
}
239
+
240
+
// ── Result panel ──────────────────────────────────────────────
241
+
.dmb-result {
242
+
margin-top: 1.5rem;
243
+
background-color: $marketing-brand-green;
244
+
border-radius: $marketing-brand-radius;
245
+
padding: 1.25rem 1.5rem;
246
+
247
+
h3 {
248
+
color: #fff;
249
+
font-size: 1.1rem;
250
+
font-weight: 700;
251
+
margin: 0 0 0.75rem;
252
+
}
253
+
254
+
p {
255
+
color: #fff;
256
+
font-size: 1rem;
257
+
font-weight: 600;
258
+
margin-bottom: 0.5rem;
259
+
260
+
&:last-child {
261
+
margin-bottom: 0;
262
+
}
263
+
}
264
+
}
265
+
}
266
+
267
+
// ── Bottom info section ───────────────────────────────────────────────
268
+
#dry-matter-bottom {
269
+
border-top: 1px solid $marketing-brand-border;
270
+
margin-top: 2rem;
271
+
width: 100vw;
272
+
position: relative;
273
+
left: calc(-50vw + 50%);
274
+
padding: 3rem 0;
275
+
276
+
.dry-matter-info-table {
277
+
display: grid;
278
+
grid-template-columns: 1fr;
279
+
gap: 2rem;
280
+
margin: auto;
281
+
width: 92%;
282
+
283
+
> div {
284
+
background-color: $marketing-brand-card;
285
+
border: 2px solid $marketing-brand-border;
286
+
border-radius: $marketing-brand-radius;
287
+
padding: 1.5rem;
288
+
289
+
h3 {
290
+
font-size: 1.1rem;
291
+
font-weight: 700;
292
+
color: $marketing-brand-green;
293
+
margin: 0 0 1rem;
294
+
}
295
+
296
+
p {
297
+
color: $marketing-brand-text-muted;
298
+
font-size: 0.95rem;
299
+
margin-bottom: 0.5rem;
300
+
301
+
&:last-child {
302
+
margin-bottom: 0;
303
+
}
304
+
305
+
strong {
306
+
font-size: 1rem;
307
+
color: $marketing-brand-green;
308
+
}
309
+
}
310
+
}
311
+
312
+
@include breakpoint('medium') {
313
+
width: 81%;
314
+
grid-template-columns: 1fr 1fr 1fr;
315
+
}
316
+
}
317
+
}
318
+
319
+
// ── Comparison table (third info card) ───────────────────────────────
320
+
.dmb-comparison-table {
321
+
display: grid;
322
+
grid-template-columns: 1fr 1fr;
323
+
gap: 1rem;
324
+
325
+
.dmb-comparison-table__col {
326
+
.dmb-comparison-table__heading {
327
+
font-weight: 700;
328
+
color: $marketing-brand-green;
329
+
margin-bottom: 0.5rem;
330
+
}
331
+
}
332
+
}
333
+
334
+
// ── Animations ────────────────────────────────────────────────────────
335
+
@keyframes dmbFadeDown {
336
+
from {
337
+
opacity: 0;
338
+
transform: translateY(-16px);
339
+
}
340
+
341
+
to {
342
+
opacity: 1;
343
+
transform: translateY(0);
344
+
}
345
+
}
+59
-55
assets/scss/custom/pages/_feline-grimace-scale.scss
+59
-55
assets/scss/custom/pages/_feline-grimace-scale.scss
···
3
3
// CSS Variables — aliased from shared marketing tokens (_marketing-tokens.scss)
4
4
// FGS-specific score colours are defined here only.
5
5
:root {
6
-
--fgs-bg: var(--brand-bg);
7
-
--fgs-card: var(--brand-card);
8
-
--fgs-green: var(--brand-green);
9
-
--fgs-green-light: var(--brand-green-light);
10
-
--fgs-green-mid: var(--brand-green-mid);
11
-
--fgs-text: var(--brand-text);
12
-
--fgs-text-muted: var(--brand-text-muted);
13
-
--fgs-border: var(--brand-border);
14
6
--fgs-score-low: #4caf87;
15
7
--fgs-score-mid: #e8a020;
16
8
--fgs-score-high: #e05555;
17
-
--fgs-radius: var(--brand-radius);
18
-
--fgs-transition: var(--brand-transition);
19
9
}
20
10
21
11
.fgs-page {
22
12
width: 100vw;
23
13
margin-left: calc(-50vw + 50%);
24
-
background: var(--fgs-bg);
14
+
background: $marketing-brand-bg;
25
15
min-height: 100vh;
26
16
position: relative;
27
17
···
74
64
h1 {
75
65
font-size: clamp(1.8rem, 5vw, 2.8rem);
76
66
font-weight: 700;
77
-
color: var(--fgs-green);
67
+
color: $marketing-brand-green;
78
68
line-height: 1.1;
79
69
letter-spacing: -0.5px;
80
70
}
81
71
82
72
p {
83
73
margin-top: 10px;
84
-
color: var(--fgs-text-muted);
74
+
color: $marketing-brand-text-muted;
85
75
font-size: 0.95rem;
86
76
font-weight: 300;
87
77
max-width: 480px;
···
108
98
// ── Instructions ──────────────────────────────────────────────────────
109
99
110
100
.fgs-instructions {
111
-
background: var(--fgs-green-light);
112
-
border-radius: var(--fgs-radius);
101
+
background: $marketing-brand-green-light;
102
+
border-radius: $marketing-brand-radius;
113
103
padding: 18px 22px;
114
104
margin-bottom: 32px;
115
105
font-size: 0.88rem;
116
-
color: var(--fgs-text);
106
+
color: $marketing-brand-text;
117
107
line-height: 1.7;
118
108
animation: fgsFadeDown 0.75s ease both;
119
109
120
110
strong {
121
-
color: var(--fgs-green);
111
+
color: $marketing-brand-green;
122
112
}
123
113
124
114
.fgs-wait-list {
···
133
123
padding: 4px 14px;
134
124
font-size: 0.82rem;
135
125
font-weight: 500;
136
-
color: var(--fgs-green);
137
-
border: 1.5px solid var(--fgs-green-mid);
126
+
color: $marketing-brand-green;
127
+
border: 1.5px solid $marketing-brand-green-mid;
138
128
}
139
129
}
140
130
}
···
142
132
// ── Action Unit Cards ─────────────────────────────────────────────────
143
133
144
134
.unit-card {
145
-
background: var(--fgs-card);
146
-
border-radius: var(--fgs-radius);
147
-
border: 1.5px solid var(--fgs-border);
135
+
background: $marketing-brand-card;
136
+
border-radius: $marketing-brand-radius;
137
+
border: 1.5px solid $marketing-brand-border;
148
138
margin-bottom: 24px;
149
139
overflow: hidden;
150
140
animation: fgsFadeUp 0.5s ease both;
151
141
box-shadow: 0 2px 20px #54605208;
152
-
transition: box-shadow var(--fgs-transition);
142
+
transition: box-shadow $marketing-brand-transition;
153
143
154
144
&:hover {
155
145
box-shadow: 0 6px 32px #54605214;
···
158
148
&:nth-child(1) {
159
149
animation-delay: 0.1s;
160
150
}
151
+
161
152
&:nth-child(2) {
162
153
animation-delay: 0.15s;
163
154
}
155
+
164
156
&:nth-child(3) {
165
157
animation-delay: 0.2s;
166
158
}
159
+
167
160
&:nth-child(4) {
168
161
animation-delay: 0.25s;
169
162
}
163
+
170
164
&:nth-child(5) {
171
165
animation-delay: 0.3s;
172
166
}
173
167
}
174
168
175
169
.unit-header {
176
-
background: var(--fgs-green);
170
+
background: $marketing-brand-green;
177
171
color: white;
178
172
padding: 14px 22px;
179
173
display: flex;
···
195
189
padding: 4px 14px;
196
190
font-size: 0.82rem;
197
191
font-weight: 600;
198
-
transition: background var(--fgs-transition);
192
+
transition: background $marketing-brand-transition;
199
193
200
194
&.selected {
201
195
background: white;
202
-
color: var(--fgs-green);
196
+
color: $marketing-brand-green;
203
197
}
204
198
}
205
199
}
···
208
202
display: grid;
209
203
grid-template-columns: repeat(3, 1fr);
210
204
gap: 0;
211
-
border-top: 1px solid var(--fgs-border);
205
+
border-top: 1px solid $marketing-brand-border;
212
206
}
213
207
214
208
.option-btn {
···
220
214
cursor: pointer;
221
215
border: none;
222
216
background: transparent;
223
-
transition: background var(--fgs-transition);
224
-
border-right: 1px solid var(--fgs-border);
217
+
transition: background $marketing-brand-transition;
218
+
border-right: 1px solid $marketing-brand-border;
225
219
outline: none;
226
220
text-align: center;
227
221
-webkit-tap-highlight-color: transparent;
···
231
225
}
232
226
233
227
&:hover {
234
-
background: var(--fgs-green-light);
228
+
background: $marketing-brand-green-light;
235
229
}
236
230
237
231
&.selected {
238
-
background: var(--fgs-green-light);
232
+
background: $marketing-brand-green-light;
239
233
240
234
&::after {
241
235
content: '';
242
236
position: absolute;
243
237
inset: 0;
244
-
border: 2.5px solid var(--fgs-green);
238
+
border: 2.5px solid $marketing-brand-green;
245
239
border-radius: 0;
246
240
pointer-events: none;
247
241
}
248
242
249
243
.score-pill {
250
-
border-color: var(--fgs-green);
251
-
background: var(--fgs-green);
244
+
border-color: $marketing-brand-green;
245
+
background: $marketing-brand-green;
252
246
color: white;
253
247
transform: scale(1.1);
254
248
}
···
259
253
width: 32px;
260
254
height: 32px;
261
255
border-radius: 50%;
262
-
border: 2.5px solid var(--fgs-border);
256
+
border: 2.5px solid $marketing-brand-border;
263
257
display: flex;
264
258
align-items: center;
265
259
justify-content: center;
266
260
font-weight: 700;
267
261
font-size: 0.9rem;
268
-
color: var(--fgs-text-muted);
262
+
color: $marketing-brand-text-muted;
269
263
margin-bottom: 14px;
270
-
transition: all var(--fgs-transition);
264
+
transition: all $marketing-brand-transition;
271
265
background: white;
272
266
}
273
267
···
288
282
.option-label {
289
283
font-size: 0.8rem;
290
284
font-weight: 600;
291
-
color: var(--fgs-text);
285
+
color: $marketing-brand-text;
292
286
line-height: 1.3;
293
287
margin-bottom: 4px;
294
288
}
295
289
296
290
.option-sublabel {
297
291
font-size: 0.72rem;
298
-
color: var(--fgs-text-muted);
292
+
color: $marketing-brand-text-muted;
299
293
line-height: 1.3;
300
294
font-weight: 400;
301
295
}
···
303
297
// ── Score Panel ───────────────────────────────────────────────────────
304
298
305
299
.score-panel {
306
-
background: var(--fgs-card);
307
-
border-radius: var(--fgs-radius);
308
-
border: 1.5px solid var(--fgs-border);
300
+
background: $marketing-brand-card;
301
+
border-radius: $marketing-brand-radius;
302
+
border: 1.5px solid $marketing-brand-border;
309
303
margin-bottom: 24px;
310
304
overflow: hidden;
311
305
animation: fgsFadeUp 0.5s 0.4s ease both;
···
313
307
}
314
308
315
309
.score-panel-header {
316
-
background: var(--fgs-text);
310
+
background: $marketing-brand-text;
317
311
color: white;
318
312
padding: 16px 22px;
319
313
display: flex;
···
339
333
min-width: 100px;
340
334
text-align: center;
341
335
padding: 12px 8px;
342
-
border-right: 1px solid var(--fgs-border);
336
+
border-right: 1px solid $marketing-brand-border;
343
337
344
338
&:last-child {
345
339
border-right: none;
···
351
345
font-weight: 600;
352
346
letter-spacing: 1.5px;
353
347
text-transform: uppercase;
354
-
color: var(--fgs-text-muted);
348
+
color: $marketing-brand-text-muted;
355
349
margin-bottom: 6px;
356
350
}
357
351
358
352
.score-item-value {
359
353
font-size: 1.6rem;
360
354
font-weight: 700;
361
-
color: var(--fgs-text);
362
-
transition: all var(--fgs-transition);
355
+
color: $marketing-brand-text;
356
+
transition: all $marketing-brand-transition;
363
357
}
364
358
365
359
.total-section {
···
367
361
display: flex;
368
362
align-items: center;
369
363
gap: 24px;
370
-
border-top: 1.5px solid var(--fgs-border);
364
+
border-top: 1.5px solid $marketing-brand-border;
371
365
margin-top: 16px;
372
366
flex-wrap: wrap;
373
367
}
···
384
378
&.color-0 {
385
379
color: var(--fgs-score-low);
386
380
}
381
+
387
382
&.color-mild {
388
383
color: var(--fgs-score-low);
389
384
}
385
+
390
386
&.color-pain {
391
387
color: var(--fgs-score-mid);
392
388
}
389
+
393
390
&.color-severe {
394
391
color: var(--fgs-score-high);
395
392
}
···
400
397
font-weight: 600;
401
398
letter-spacing: 1.5px;
402
399
text-transform: uppercase;
403
-
color: var(--fgs-text-muted);
400
+
color: $marketing-brand-text-muted;
404
401
margin-bottom: 4px;
405
402
}
406
403
···
412
409
413
410
.total-out-of {
414
411
font-size: 1rem;
415
-
color: var(--fgs-text-muted);
412
+
color: $marketing-brand-text-muted;
416
413
font-weight: 300;
417
414
align-self: flex-end;
418
415
padding-bottom: 8px;
···
440
437
background: #e8f5ef;
441
438
color: #2d7a59;
442
439
}
440
+
443
441
&.badge-pain {
444
442
background: #fff3e0;
445
443
color: #b56b00;
446
444
}
445
+
447
446
&.badge-severe {
448
447
background: #fde8e8;
449
448
color: #c0392b;
···
453
452
.interp-text {
454
453
font-size: 0.85rem;
455
454
line-height: 1.6;
456
-
color: var(--fgs-text);
455
+
color: $marketing-brand-text;
457
456
transition: opacity 0.3s ease;
458
457
}
459
458
···
467
466
display: flex;
468
467
justify-content: space-between;
469
468
font-size: 0.75rem;
470
-
color: var(--fgs-text-muted);
469
+
color: $marketing-brand-text-muted;
471
470
margin-bottom: 6px;
472
471
font-weight: 500;
473
472
}
474
473
475
474
.progress-track {
476
475
height: 8px;
477
-
background: var(--fgs-border);
476
+
background: $marketing-brand-border;
478
477
border-radius: 20px;
479
478
overflow: hidden;
480
479
}
···
491
490
&.color-pain {
492
491
background: var(--fgs-score-mid);
493
492
}
493
+
494
494
&.color-severe {
495
495
background: var(--fgs-score-high);
496
496
}
···
526
526
527
527
.fgs-attribution {
528
528
font-size: 0.65rem;
529
-
color: var(--fgs-text-muted);
529
+
color: $marketing-brand-text-muted;
530
530
text-align: right;
531
531
padding: 0 22px 12px;
532
532
font-style: italic;
···
539
539
opacity: 0;
540
540
transform: translateY(-16px);
541
541
}
542
+
542
543
to {
543
544
opacity: 1;
544
545
transform: translateY(0);
···
550
551
opacity: 0;
551
552
transform: translateY(20px);
552
553
}
554
+
553
555
to {
554
556
opacity: 1;
555
557
transform: translateY(0);
···
560
562
0% {
561
563
transform: scale(1);
562
564
}
565
+
563
566
50% {
564
567
transform: scale(1.15);
565
568
}
569
+
566
570
100% {
567
571
transform: scale(1);
568
572
}
···
581
585
582
586
.option-btn {
583
587
border-right: none;
584
-
border-bottom: 1px solid var(--fgs-border);
588
+
border-bottom: 1px solid $marketing-brand-border;
585
589
flex-direction: row;
586
590
gap: 14px;
587
591
text-align: left;
+747
assets/scss/custom/pages/_rawsome-catculator.scss
+747
assets/scss/custom/pages/_rawsome-catculator.scss
···
1
+
// ── Rawsome Catculator ────────────────────────────────────────────────
2
+
3
+
// Full-width wrapper that breaks out of container
4
+
.rawsome-catculator-page {
5
+
width: 100vw;
6
+
margin-left: calc(-50vw + 50%);
7
+
background: $marketing-brand-bg;
8
+
min-height: 100vh;
9
+
position: relative;
10
+
padding: 2rem 1rem;
11
+
12
+
// ── Heading ───────────────────────────────────────────────────
13
+
.calculator-heading {
14
+
margin: 2rem auto;
15
+
text-align: center;
16
+
max-width: 70ch;
17
+
text-wrap: balance;
18
+
position: relative;
19
+
z-index: 1;
20
+
animation: rcFadeDown 0.6s ease both;
21
+
22
+
h1 {
23
+
font-weight: 700;
24
+
font-size: clamp(1.8rem, 5vw, 2.8rem);
25
+
color: $marketing-brand-green;
26
+
line-height: 1.1;
27
+
letter-spacing: -0.5px;
28
+
margin-bottom: 1rem;
29
+
}
30
+
31
+
p {
32
+
font-size: 1rem;
33
+
font-weight: 300;
34
+
color: $marketing-brand-text-muted;
35
+
line-height: 1.6;
36
+
max-width: 520px;
37
+
margin-inline: auto;
38
+
}
39
+
}
40
+
41
+
// ── Toggler (desktop) ─────────────────────────────────────────
42
+
.calculator-toggler {
43
+
margin: 0 auto 2rem;
44
+
width: 100%;
45
+
justify-content: space-between;
46
+
display: none;
47
+
48
+
p {
49
+
padding: 12px;
50
+
text-align: center;
51
+
margin-bottom: 0;
52
+
margin-top: 0;
53
+
54
+
a {
55
+
color: $marketing-brand-text;
56
+
}
57
+
}
58
+
59
+
p.active {
60
+
border-bottom: 2px solid $marketing-brand-green;
61
+
font-weight: 700;
62
+
}
63
+
64
+
@include breakpoint('medium') {
65
+
width: 35%;
66
+
display: flex;
67
+
}
68
+
}
69
+
70
+
// ── Toggler (mobile) ─────────────────────────────────────────
71
+
.calculator-toggler-mobile {
72
+
background-color: $marketing-brand-green-light;
73
+
display: block;
74
+
width: 100vw;
75
+
position: relative;
76
+
left: calc(-50vw + 50%);
77
+
padding: 1rem 0;
78
+
79
+
.inner {
80
+
margin: auto;
81
+
width: 92%;
82
+
83
+
p {
84
+
padding: 0.5rem 0.8rem;
85
+
margin-bottom: 0.2rem;
86
+
87
+
a {
88
+
color: $marketing-brand-text;
89
+
}
90
+
}
91
+
92
+
p#toggler-active {
93
+
background-color: $marketing-brand-card;
94
+
border-radius: 30px;
95
+
96
+
span {
97
+
float: right;
98
+
99
+
&.open {
100
+
rotate: 180deg;
101
+
}
102
+
}
103
+
}
104
+
105
+
#toggler-dropdown {
106
+
display: none;
107
+
108
+
&.active {
109
+
display: block;
110
+
}
111
+
}
112
+
}
113
+
114
+
@include breakpoint('medium') {
115
+
display: none;
116
+
}
117
+
}
118
+
119
+
// ── Catculator wizard container ──────────────────────────────
120
+
#catculator {
121
+
width: 100%;
122
+
padding-top: 1.5rem;
123
+
position: relative;
124
+
z-index: 1;
125
+
}
126
+
127
+
// Step heading rendered by JS (renderStep)
128
+
.catculator-step__heading {
129
+
font-weight: 600;
130
+
color: $marketing-brand-green;
131
+
font-size: 1.5rem;
132
+
text-align: center;
133
+
margin-bottom: 1.5rem;
134
+
}
135
+
136
+
// ── Disclaimer copy ──────────────────────────────────────────
137
+
.calculator-disclaimer {
138
+
margin: 4rem auto;
139
+
text-align: center;
140
+
max-width: 640px;
141
+
142
+
p {
143
+
margin-top: 2rem;
144
+
color: $marketing-brand-text-muted;
145
+
font-size: 0.95rem;
146
+
line-height: 1.6;
147
+
text-wrap: pretty;
148
+
}
149
+
}
150
+
}
151
+
152
+
// ── Buttons ──────────────────────────────────────────────────────────
153
+
.rawsome-button--primary {
154
+
transition: all $marketing-brand-transition;
155
+
border: 2px solid $marketing-brand-green;
156
+
color: #fff;
157
+
font-size: 1rem;
158
+
font-weight: 600;
159
+
text-align: center;
160
+
display: inline-flex;
161
+
align-items: center;
162
+
justify-content: center;
163
+
min-width: 120px;
164
+
height: 3rem;
165
+
background-color: $marketing-brand-green;
166
+
border-radius: $marketing-brand-radius;
167
+
cursor: pointer;
168
+
padding: 0 1.25rem;
169
+
170
+
p {
171
+
margin: 0;
172
+
color: inherit;
173
+
font-weight: inherit;
174
+
}
175
+
176
+
a {
177
+
color: inherit;
178
+
text-decoration: none;
179
+
}
180
+
181
+
&:hover {
182
+
background-color: $marketing-brand-card;
183
+
color: $marketing-brand-green;
184
+
box-shadow: 0 4px 16px rgba(84, 96, 82, 0.2);
185
+
186
+
p,
187
+
a {
188
+
color: $marketing-brand-green;
189
+
}
190
+
}
191
+
192
+
&:disabled {
193
+
opacity: 0.5;
194
+
cursor: not-allowed;
195
+
}
196
+
}
197
+
198
+
.rawsome-button--secondary {
199
+
background-color: $marketing-brand-card;
200
+
font-weight: 600;
201
+
color: $marketing-brand-green;
202
+
border: 2px solid $marketing-brand-green;
203
+
transition: all $marketing-brand-transition;
204
+
border-radius: $marketing-brand-radius;
205
+
text-align: center;
206
+
min-width: 120px;
207
+
height: 3rem;
208
+
display: inline-flex;
209
+
align-items: center;
210
+
justify-content: center;
211
+
cursor: pointer;
212
+
padding: 0 1.25rem;
213
+
214
+
&:hover {
215
+
background-color: $marketing-brand-green-light;
216
+
}
217
+
}
218
+
219
+
// ── Weight step ──────────────────────────────────────────────────────
220
+
.cat_weight_cal {
221
+
margin-top: 1rem;
222
+
display: flex;
223
+
flex-direction: column;
224
+
align-items: center;
225
+
gap: 2rem;
226
+
227
+
.cat_weight_img {
228
+
width: 180px;
229
+
height: auto;
230
+
flex-shrink: 0;
231
+
}
232
+
233
+
.cat_weight_input_group {
234
+
display: flex;
235
+
flex-direction: column;
236
+
width: 100%;
237
+
max-width: 250px;
238
+
gap: 0.5rem;
239
+
}
240
+
241
+
.cat_weight_p {
242
+
color: $marketing-brand-text;
243
+
font-weight: 600;
244
+
text-transform: uppercase;
245
+
font-size: 0.8rem;
246
+
letter-spacing: 1px;
247
+
margin-bottom: 0.5rem;
248
+
text-align: center;
249
+
}
250
+
251
+
#weight_input {
252
+
width: 100%;
253
+
height: 3.5rem;
254
+
border: 2px solid $marketing-brand-border;
255
+
border-radius: $marketing-brand-radius;
256
+
background-color: $marketing-brand-card;
257
+
color: $marketing-brand-text;
258
+
font-size: 1.2rem;
259
+
text-align: center;
260
+
appearance: textfield;
261
+
transition:
262
+
border-color $marketing-brand-transition,
263
+
box-shadow $marketing-brand-transition;
264
+
265
+
&:focus {
266
+
outline: none;
267
+
border-color: $marketing-brand-green;
268
+
box-shadow: 0 0 0 3px rgba(84, 96, 82, 0.1);
269
+
}
270
+
271
+
&::-webkit-outer-spin-button,
272
+
&::-webkit-inner-spin-button {
273
+
margin: 0;
274
+
}
275
+
}
276
+
277
+
.cat_weight_buttons {
278
+
display: flex;
279
+
justify-content: center;
280
+
gap: 12px;
281
+
margin-top: 1.5rem;
282
+
283
+
button {
284
+
margin: 0;
285
+
min-width: 100px;
286
+
}
287
+
}
288
+
289
+
@include breakpoint('medium') {
290
+
flex-direction: row;
291
+
justify-content: center;
292
+
gap: 3rem;
293
+
max-width: 700px;
294
+
margin: 1rem auto 0;
295
+
}
296
+
}
297
+
298
+
// ── Neutered / Spayed step ───────────────────────────────────────────
299
+
.cat_spayed,
300
+
.cat_neutered {
301
+
display: flex;
302
+
flex-direction: column;
303
+
align-items: center;
304
+
gap: 2rem;
305
+
margin-top: 1rem;
306
+
307
+
img {
308
+
width: 200px;
309
+
height: auto;
310
+
flex-shrink: 0;
311
+
}
312
+
313
+
.cat_button_group {
314
+
display: flex;
315
+
flex-direction: column;
316
+
align-items: center;
317
+
gap: 12px;
318
+
319
+
@include breakpoint('medium') {
320
+
align-items: flex-start;
321
+
}
322
+
323
+
.rawsome-button--primary,
324
+
.rawsome-button--secondary {
325
+
margin: 0;
326
+
min-width: 160px;
327
+
}
328
+
}
329
+
330
+
> .rawsome-button--secondary {
331
+
margin: 0;
332
+
min-width: 160px;
333
+
}
334
+
335
+
@include breakpoint('medium') {
336
+
flex-direction: row;
337
+
justify-content: center;
338
+
gap: 3rem;
339
+
max-width: 800px;
340
+
margin: 1rem auto 0;
341
+
}
342
+
}
343
+
344
+
// ── Activity step ────────────────────────────────────────────────────
345
+
.cat_active {
346
+
display: flex;
347
+
flex-direction: column;
348
+
align-items: center;
349
+
gap: 2rem;
350
+
margin-top: 1rem;
351
+
352
+
img {
353
+
width: 250px;
354
+
height: auto;
355
+
flex-shrink: 0;
356
+
}
357
+
358
+
.cat_button_group {
359
+
display: flex;
360
+
flex-direction: column;
361
+
align-items: center;
362
+
gap: 12px;
363
+
364
+
@include breakpoint('medium') {
365
+
align-items: flex-start;
366
+
}
367
+
368
+
.rawsome-button--primary {
369
+
margin: 0;
370
+
min-width: 140px;
371
+
}
372
+
}
373
+
374
+
> .rawsome-button--secondary {
375
+
margin: 0;
376
+
min-width: 140px;
377
+
}
378
+
379
+
@include breakpoint('medium') {
380
+
flex-direction: row;
381
+
justify-content: center;
382
+
gap: 3rem;
383
+
max-width: 900px;
384
+
margin: 1rem auto 0;
385
+
}
386
+
}
387
+
388
+
// ── Age step: 5-col row of cats ──────────────────────────────────────
389
+
.catculator-row {
390
+
width: 100%;
391
+
display: flex;
392
+
flex-direction: column;
393
+
gap: 1rem;
394
+
395
+
.catculator-col {
396
+
width: 100%;
397
+
display: flex;
398
+
flex-direction: column;
399
+
align-items: center;
400
+
justify-content: center;
401
+
gap: 0.75rem;
402
+
}
403
+
404
+
.rawsome-button--primary {
405
+
width: 80%;
406
+
max-width: 220px;
407
+
}
408
+
409
+
@include breakpoint('large') {
410
+
flex-direction: row;
411
+
align-items: flex-end;
412
+
justify-content: space-between;
413
+
414
+
.catculator-col {
415
+
flex: 1;
416
+
}
417
+
418
+
.rawsome-button--primary {
419
+
width: 150px;
420
+
}
421
+
}
422
+
}
423
+
424
+
// Age-step cat images — sized to communicate the growth progression visually
425
+
.catculator-col__img--kitten {
426
+
width: 75px;
427
+
height: 75px;
428
+
margin: 75px 0 30px;
429
+
}
430
+
431
+
.catculator-col__img--young {
432
+
width: 125px;
433
+
height: 91px;
434
+
margin: 59px 0 30px;
435
+
}
436
+
437
+
.catculator-col__img--adolescent {
438
+
height: 106px;
439
+
margin: 44px 0 30px;
440
+
}
441
+
442
+
.catculator-col__img--preAdult {
443
+
height: 128px;
444
+
margin: 22px 0 30px;
445
+
}
446
+
447
+
.catculator-col__img--adult {
448
+
width: 90px;
449
+
height: 140px;
450
+
margin: 10px 0 30px;
451
+
}
452
+
453
+
// ── Results: heading + inner card ────────────────────────────────────
454
+
.recom_daily_amount_heading {
455
+
color: $marketing-brand-green;
456
+
font-weight: 700;
457
+
font-size: 1.5rem;
458
+
text-align: center;
459
+
margin-bottom: 1.5rem;
460
+
}
461
+
462
+
.recom_daily_amount {
463
+
padding: 0;
464
+
465
+
.recom_daily_amount_inner {
466
+
background-color: $marketing-brand-card;
467
+
margin: auto;
468
+
width: 100%;
469
+
border-radius: $marketing-brand-radius;
470
+
padding: 18px 10px;
471
+
472
+
.rc_reccoms {
473
+
background-color: $marketing-brand-green-light;
474
+
width: 95%;
475
+
margin: auto;
476
+
border-radius: $marketing-brand-radius;
477
+
478
+
p {
479
+
padding: 7px 15px;
480
+
color: $marketing-brand-text;
481
+
482
+
span {
483
+
float: right;
484
+
margin: 0;
485
+
color: $marketing-brand-green;
486
+
487
+
@include breakpoint('medium') {
488
+
float: none;
489
+
margin-left: 70px;
490
+
}
491
+
}
492
+
}
493
+
494
+
&:last-of-type {
495
+
p {
496
+
span {
497
+
@include breakpoint('medium') {
498
+
margin-left: 45px;
499
+
}
500
+
}
501
+
}
502
+
}
503
+
}
504
+
505
+
.daily_meals {
506
+
width: 85%;
507
+
margin: 10px auto;
508
+
509
+
p {
510
+
color: $marketing-brand-text-muted;
511
+
text-align: center;
512
+
}
513
+
514
+
@include breakpoint('medium') {
515
+
width: 89%;
516
+
}
517
+
}
518
+
519
+
.rawsome-button--secondary {
520
+
width: 95%;
521
+
height: 2.5rem;
522
+
margin: 2rem auto 0;
523
+
position: relative;
524
+
}
525
+
526
+
@include breakpoint('medium') {
527
+
width: 30%;
528
+
}
529
+
}
530
+
531
+
.product-recommendations {
532
+
margin: 2rem auto 0;
533
+
width: 100%;
534
+
535
+
.product-results-loading {
536
+
position: relative;
537
+
display: flex;
538
+
flex-direction: column;
539
+
align-items: center;
540
+
justify-content: center;
541
+
gap: 1rem;
542
+
min-height: 120px;
543
+
text-align: center;
544
+
color: $marketing-brand-text-muted;
545
+
}
546
+
547
+
.button--loading {
548
+
position: relative;
549
+
display: block;
550
+
width: 30px;
551
+
height: 30px;
552
+
margin: 0 auto;
553
+
}
554
+
555
+
.product-section {
556
+
margin-bottom: 2rem;
557
+
}
558
+
559
+
.product-grid {
560
+
display: grid;
561
+
grid-template-columns: 1fr;
562
+
gap: 13px;
563
+
564
+
@include breakpoint('small') {
565
+
grid-template-columns: 1fr 1fr;
566
+
}
567
+
568
+
@include breakpoint('medium') {
569
+
grid-template-columns: 1fr 1fr 1fr;
570
+
}
571
+
572
+
@include breakpoint('large') {
573
+
grid-template-columns: 1fr 1fr 1fr 1fr;
574
+
}
575
+
}
576
+
577
+
.product-section__title {
578
+
text-align: center;
579
+
margin-bottom: 1.5rem;
580
+
color: $marketing-brand-green;
581
+
}
582
+
583
+
.wrapper {
584
+
padding: 15px 10px;
585
+
border-radius: $marketing-brand-radius;
586
+
background-color: $marketing-brand-card;
587
+
border: 2px solid $marketing-brand-green;
588
+
display: flex;
589
+
flex-direction: column;
590
+
591
+
.image_wrap img {
592
+
width: auto;
593
+
height: 100px;
594
+
display: block;
595
+
margin: 0 auto;
596
+
object-fit: contain;
597
+
}
598
+
599
+
.content_wrap {
600
+
margin: 0.5rem auto;
601
+
flex: 1;
602
+
603
+
.product-name {
604
+
text-align: center;
605
+
line-height: 1.2;
606
+
font-size: 0.875rem;
607
+
color: $marketing-brand-green;
608
+
}
609
+
}
610
+
611
+
.rda_wrap {
612
+
text-align: center;
613
+
padding: 0.4rem 0 0.5rem;
614
+
615
+
.rda_label {
616
+
margin: 0;
617
+
font-size: 0.8rem;
618
+
font-weight: 700;
619
+
color: $marketing-brand-green;
620
+
letter-spacing: 0.3px;
621
+
}
622
+
}
623
+
624
+
.cta_wrap {
625
+
margin-top: auto;
626
+
}
627
+
628
+
.rawsome-button--primary {
629
+
display: block;
630
+
margin: 1.25rem auto 0;
631
+
width: 70%;
632
+
font-size: 0.75rem;
633
+
height: 2.5rem;
634
+
635
+
@include breakpoint('medium') {
636
+
font-size: 0.875rem;
637
+
}
638
+
}
639
+
640
+
@include breakpoint('medium') {
641
+
padding: 20px;
642
+
}
643
+
}
644
+
}
645
+
}
646
+
647
+
// ── Loading spinner ──────────────────────────────────────────────────
648
+
.button--loading::after {
649
+
content: '';
650
+
position: absolute;
651
+
width: 30px;
652
+
height: 30px;
653
+
right: 0;
654
+
left: 0;
655
+
margin: auto;
656
+
border: 6px solid $marketing-brand-green;
657
+
border-top-color: #bd9b60;
658
+
border-radius: 50%;
659
+
animation: rawsome-button-loading-spinner 1s ease infinite;
660
+
}
661
+
662
+
.cta--loading {
663
+
opacity: 0.2;
664
+
pointer-events: none;
665
+
}
666
+
667
+
@keyframes rawsome-button-loading-spinner {
668
+
from {
669
+
transform: rotate(0turn);
670
+
}
671
+
672
+
to {
673
+
transform: rotate(1turn);
674
+
}
675
+
}
676
+
677
+
// ── Bottom "product types" info table ────────────────────────────────
678
+
#rawsome-bottom {
679
+
border-top: 1px solid $marketing-brand-border;
680
+
margin-top: 2rem;
681
+
width: 100vw;
682
+
position: relative;
683
+
left: calc(-50vw + 50%);
684
+
padding: 3rem 0;
685
+
686
+
.rawsome-info-table {
687
+
display: grid;
688
+
grid-template-columns: 1fr;
689
+
gap: 2rem;
690
+
margin: auto;
691
+
width: 92%;
692
+
693
+
> div {
694
+
text-align: center;
695
+
display: flex;
696
+
flex-direction: column;
697
+
align-items: center;
698
+
justify-content: center;
699
+
gap: 0.75rem;
700
+
padding: 1.5rem 1rem;
701
+
border-radius: $marketing-brand-radius;
702
+
703
+
img {
704
+
width: auto;
705
+
height: 120px;
706
+
max-width: 40%;
707
+
}
708
+
709
+
h1 {
710
+
margin: 0.5rem auto;
711
+
font-size: 1.25rem;
712
+
color: $marketing-brand-green;
713
+
font-weight: 700;
714
+
}
715
+
716
+
p {
717
+
margin-bottom: 0.5rem;
718
+
color: $marketing-brand-text-muted;
719
+
font-size: 0.95rem;
720
+
}
721
+
722
+
.rawsome-button--primary {
723
+
width: 150px;
724
+
height: 3rem;
725
+
margin-top: 0.5rem;
726
+
}
727
+
}
728
+
729
+
@include breakpoint('medium') {
730
+
width: 81%;
731
+
grid-template-columns: 1fr 1fr 1fr;
732
+
}
733
+
}
734
+
}
735
+
736
+
// ── Animations ───────────────────────────────────────────────────────
737
+
@keyframes rcFadeDown {
738
+
from {
739
+
opacity: 0;
740
+
transform: translateY(-16px);
741
+
}
742
+
743
+
to {
744
+
opacity: 1;
745
+
transform: translateY(0);
746
+
}
747
+
}
+99
-253
templates/pages/custom/page/dry-matter-basis-calculator.html
+99
-253
templates/pages/custom/page/dry-matter-basis-calculator.html
···
1
-
{{#partial "page"}}
2
-
{{> components/common/breadcrumbs breadcrumbs=breadcrumbs}}
3
-
4
-
{{{region name="page_builder_content__above-toggler"}}}
5
-
6
-
{{> components/custom/calculator-toggler}}
7
-
{{> components/custom/calculator-toggler-mobile}}
8
-
9
-
{{{region name="page_builder_content__below-toggler"}}}
10
-
<!--<div class="dry-matter-basis-calculator-page">
11
-
12
-
<div class="calculator-heading">
13
-
<h1>
14
-
How much protein are you currently feeding your cat?
15
-
</h1>
16
-
<p>Use our calculator below to compare how much protein Purrform provides versus other cat foods</p>
17
-
18
-
</div>
19
-
20
-
{{> components/custom/calculator-toggler}}
21
-
{{> components/custom/calculator-toggler-mobile}}
22
-
23
-
<div id="dry-matter-container">
24
-
<div class="dmc1">
25
-
<h1>Dry Matter Basis Calculator</h1>
26
-
<p>
27
-
This calculator will help you find out how much protein your cat is
28
-
really eating & compare it to the amount in other cat foods. As cats are
29
-
carnivores, it is vital that they are fed a high protein diet to have a
30
-
long and healthy life.
31
-
</p>
32
-
<p>
33
-
Dry Matter Basis (DMB or DM) removes the water from the equation. When
34
-
foods are considered on a dry matter basis, they can be directly
35
-
compared to one another. In other words, you can compare a canned food
36
-
with 78% water, to a dry food that contains 11%, or compare two wet
37
-
foods with different moisture contents. See the example below:
38
-
</p>
39
-
<p>
40
-
At first glance, it appears that dry food has more protein than canned
41
-
food. However, the canned food on a dry matter basis, contains 45%
42
-
protein, as opposed to the dry food, which contains only 40% protein,
43
-
when calculated.
44
-
</p>
45
-
<p>
46
-
The calculator will give you the true content of protein for any of our
47
-
products once the moisture has been extracted. You will also be able to
48
-
do some comparisons with commercial wet and dry foods and other raw
49
-
foods.
50
-
</p>
1
+
{{#partial "page"}}
2
+
<div class="dry-matter-basis-calculator-page">
3
+
<div class="calculator-heading">
4
+
<h1>How much protein are you currently feeding your cat?</h1>
5
+
<p>
6
+
Use our calculator below to compare how much protein Purrform
7
+
provides versus other cat foods
8
+
</p>
51
9
</div>
52
-
<div class="dmc2">
53
-
<h1>
54
-
Input the <span class="green-col">% of protein</span> and the
55
-
<span class="green-col">% moisture</span> of the food you want to
56
-
calculate:
57
-
</h1>-->
58
10
59
-
60
-
<!--<div class="percent-calculator">
61
-
<p><strong>% Protein</strong></p>
62
-
<p><strong>% Moisture</strong></p>
63
-
64
-
</div>-->
65
-
66
-
67
-
<!--<div class="percent-calculator">
68
-
<div>
69
-
<label for="ingredient"><strong>% Protein</strong></label>
70
-
<input
71
-
id="ingredient"
72
-
style="
73
-
border-radius: 32px;
74
-
border: 1px solid #dbdada;
75
-
padding-left: 10px;
76
-
color: #000000;
77
-
font-weight: bold;
78
-
font-size: 18px;
79
-
margin-right: 10px;
80
-
81
-
height: 3rem;
82
-
"
83
-
/>
84
-
</div>
85
-
<div>
86
-
<label for="moisture"><strong>% Moisture</strong></label>
87
-
<input
88
-
id="moisture"
89
-
style="
90
-
border-radius: 32px;
91
-
border: 1px solid #dbdada;
92
-
padding-left: 10px;
93
-
color: #000000;
94
-
font-weight: bold;
95
-
font-size: 18px;
96
-
margin-right: 10px;
11
+
{{> components/custom/calculator-toggler}}
12
+
{{> components/custom/calculator-toggler-mobile}}
97
13
98
-
height: 3rem;
99
-
"
100
-
/>
101
-
</div>
102
-
<div>
103
-
<button
104
-
id="calcBtn"
105
-
style="
106
-
height: 3rem;
107
-
border-color: #687d6a;
108
-
border-radius: 40px;
109
-
background-color: #687d6a;
110
-
text-align: center;
111
-
"
112
-
>
113
-
<p
114
-
style="
115
-
color: #fff;
116
-
font-size: 18px;
117
-
font-weight: bold;
118
-
margin: auto;
119
-
padding-bottom: 3px;
120
-
"
121
-
>
122
-
Calculate
14
+
<div id="dry-matter-container">
15
+
<div class="dmb-intro">
16
+
<h2>Dry Matter Basis Calculator</h2>
17
+
<p>
18
+
This calculator will help you find out how much protein your cat is
19
+
really eating & compare it to the amount in other cat foods. As cats are
20
+
carnivores, it is vital that they are fed a high protein diet to have a
21
+
long and healthy life.
123
22
</p>
124
-
</button>
23
+
<p>
24
+
Dry Matter Basis (DMB or DM) removes the water from the equation. When
25
+
foods are considered on a dry matter basis, they can be directly
26
+
compared to one another. In other words, you can compare a canned food
27
+
with 78% water, to a dry food that contains 11%, or compare two wet
28
+
foods with different moisture contents. See the example below:
29
+
</p>
30
+
<p>
31
+
At first glance, it appears that dry food has more protein than canned
32
+
food. However, the canned food on a dry matter basis, contains 45%
33
+
protein, as opposed to the dry food, which contains only 40% protein,
34
+
when calculated.
35
+
</p>
36
+
<p>
37
+
The calculator will give you the true content of protein for any of our
38
+
products once the moisture has been extracted. You will also be able to
39
+
do some comparisons with commercial wet and dry foods and other raw
40
+
foods.
41
+
</p>
125
42
</div>
126
-
</div>
127
-
128
-
<div id="dmb-test">
129
-
<h3>Dry Matter Basis</h3>
130
-
<p id="dmb-protein"></p>
131
-
<p id="dmb-moisure"></p>
132
-
<p id="dmb-dmb"></p>
133
-
</div>
134
43
135
-
<div id="DMBWindow"></div>
136
-
<style>
137
-
@media only screen and (max-width: 640px) {
138
-
.percent-calculator input,
139
-
.percent-calculator button {
140
-
width: 100% !important;
141
-
margin-bottom: 10px;
142
-
}
143
-
}
144
-
</style>
145
-
<script>
146
-
let closeWindow = () => {
147
-
let DMBWindow = document.getElementById("DMBWindow");
148
-
DMBWindow.innerHTML = ``;
149
-
};
150
-
151
-
let showCalc = () => {
152
-
//alert("tester")
153
-
let calcBtn = document.getElementById("calcBtn");
154
-
let calcInfo = document.getElementById("dmb-test");
155
-
//let dmbProtein = document.getElementById('dmb-protein');
156
-
//let dmbMoisure = document.getElementById('dmb-moisure');
157
-
//let dmbDmb = document.getElementById('dmb-dmb');
158
-
159
-
let ingredientPercent = document.getElementById("ingredient").value;
160
-
let moisturePercent = document.getElementById("moisture").value;
161
-
let moisture = 100 - moisturePercent;
162
-
163
-
let DMBcalc = ((ingredientPercent / moisture) * 100).toFixed(2);
164
-
165
-
calcInfo.style.display = "block";
44
+
<div class="dmb-input">
45
+
<h2>
46
+
Input the <span class="dmb-green">% of protein</span> and the
47
+
<span class="dmb-green">% of moisture</span> of the food you want to
48
+
calculate:
49
+
</h2>
166
50
167
-
document.getElementById("dmb-protein").innerHTML =
168
-
"% Protein = " + `${ingredientPercent}`;
169
-
document.getElementById("dmb-moisure").innerHTML =
170
-
"% Moisture = " + `${moisture}`;
171
-
document.getElementById("dmb-dmb").innerHTML =
172
-
"DMB = " + `${DMBcalc}` + "%";
173
-
};
51
+
<div class="dmb-input__fields">
52
+
<div class="dmb-input__field">
53
+
<label for="dmb-protein-input"><strong> Protein %</strong></label>
54
+
<input id="dmb-protein-input" type="number" min="0" max="100" step="0.1" />
55
+
</div>
56
+
<div class="dmb-input__field">
57
+
<label for="dmb-moisture-input"><strong> Moisture %</strong></label>
58
+
<input id="dmb-moisture-input" type="number" min="0" max="99" step="0.1" />
59
+
</div>
60
+
<div class="dmb-input__field dmb-input__field--btn">
61
+
<button id="dmb-calc-btn" class="rawsome-button--primary">
62
+
Calculate
63
+
</button>
64
+
</div>
65
+
</div>
174
66
175
-
/* let calcPercent = () => {
176
-
let ingredientPercent = document.getElementById('ingredient').value
177
-
let moisturePercent = document.getElementById('moisture').value
178
-
let moisture = (100 - moisturePercent)
179
-
let calcBtn = document.getElementById('calcBtn')
180
-
let DMBcalc = (((ingredientPercent / moisture) * 100).toFixed(2))
181
-
let DMBWindow = document.getElementById('DMBWindow')
182
-
DMBWindow.innerHTML += `
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
-
<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
-
<p style='color: #fff; font-size: 24px; font-weight: bold; position: relative; top: 60px; left: 10.5%;'>
186
-
Dry Matter Basis
187
-
</p>
188
-
<p style='color: #fff; font-size: 24px; font-weight: bold; position: relative; top: 50px; left: 10%;'>
189
-
%Protein = ${ingredientPercent}
190
-
</p>
191
-
<p style='color: #fff; font-size: 24px; font-weight: bold; position: relative; top: 40px; left: 10%;'>
192
-
%Moisture = ${moisture}
193
-
</p>
194
-
<p style='color: #fff; font-size: 24px; font-weight: bold; position: relative; top: 35px; left: 10%;'>
195
-
DMB = ${DMBcalc}%
196
-
</p>
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
-
<img src='https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/1024px-cross-icon-white-.svg.png' style='width: 100%; height: 100%;'/>
199
-
</div>
200
-
</div>
201
-
`
202
-
} */
203
-
// calcBtn.addEventListener('click', calcPercent)
204
-
calcBtn.addEventListener("click", showCalc);
205
-
</script>
67
+
<div class="dmb-result" hidden></div>
68
+
</div>
206
69
</div>
207
-
</div>
208
70
209
-
<div id="dry-matter-bottom">
210
-
211
-
<div class="dry-matter-info-table">
212
-
<div>
213
-
<h3>Dry Food</h3>
214
-
<p>Protein = 36%</p>
215
-
<p> Moisture = 11%</p>
216
-
<p> 100% (dry and wet) - 11% (wet) = 89% dry</p>
217
-
<p> (36% Protein / 89%dry) x 100</p>
218
-
<p><strong>= 40% Protein DMB in dry food</strong></p>
219
-
</div>
220
-
<div>
221
-
<h3>Canned Food</h3>
222
-
<p>Protein = 10%</p>
223
-
<p> Moisture = 78%</p>
224
-
<p> 100% (dry and wet) - 78% (wet) = 22% dry</p>
225
-
<p>(10% Protein / 22%dry) x 100</p>
226
-
<p><strong>= 45% Protein DMB in dry food</strong></p>
227
-
</div>
228
-
<div>
229
-
<h3>Calculating the Dry Matter Basis</h3>
230
-
<table>
231
-
<thead >
232
-
<tr>
233
-
<th>Dry Food</th>
234
-
<th>Canned Food</th>
235
-
236
-
</tr>
237
-
238
-
<tr>
239
-
<td>Protein 36%</td>
240
-
241
-
<td>Protein 10%</td>
242
-
</tr>
243
-
244
-
<tr>
245
-
246
-
<td>Fat 18%</td>
247
-
<td>Fat 5%</td>
248
-
</tr>
249
-
250
-
<tr>
251
-
<td>Moisture 11%</td>
252
-
<td>Moisture 78%</td>
253
-
</tr>
254
-
255
-
</thead>
256
-
</table>
257
-
258
-
</div>
259
-
</div>
260
-
71
+
<div id="dry-matter-bottom">
72
+
<div class="dry-matter-info-table">
73
+
<div>
74
+
<h3>Dry Food</h3>
75
+
<p>Protein: 36%</p>
76
+
<p>Moisture: 11%</p>
77
+
<p>100% (dry and wet) − 11% (wet) = 89% dry</p>
78
+
<p>(36% Protein / 89% dry) × 100</p>
79
+
<p><strong>= 40% Protein DMB in dry food</strong></p>
80
+
</div>
81
+
<div>
82
+
<h3>Canned Food</h3>
83
+
<p>Protein: 10%</p>
84
+
<p>Moisture: 78%</p>
85
+
<p>100% (dry and wet) − 78% (wet) = 22% dry</p>
86
+
<p>(10% Protein / 22% dry) × 100</p>
87
+
<p><strong>= 45% Protein DMB in canned food</strong></p>
88
+
</div>
89
+
<div>
90
+
<h3>Calculating the Dry Matter Basis</h3>
91
+
<div class="dmb-comparison-table">
92
+
<div class="dmb-comparison-table__col">
93
+
<p class="dmb-comparison-table__heading">Dry Food</p>
94
+
<p>Protein: 36%</p>
95
+
<p>Fat: 18%</p>
96
+
<p>Moisture: 11%</p>
97
+
</div>
98
+
<div class="dmb-comparison-table__col">
99
+
<p class="dmb-comparison-table__heading">Canned Food</p>
100
+
<p>Protein: 10%</p>
101
+
<p>Fat: 5%</p>
102
+
<p>Moisture: 78%</p>
103
+
</div>
104
+
</div>
105
+
</div>
106
+
</div>
107
+
</div>
261
108
</div>
262
-
263
-
</div>-->
264
-
{{/partial}} {{> layout/base}}
109
+
{{/partial}}
110
+
{{> layout/base}}
+9
-718
templates/pages/custom/page/rawsome-catculator.html
+9
-718
templates/pages/custom/page/rawsome-catculator.html
···
1
1
{{#partial "page"}}
2
-
{{> components/common/breadcrumbs breadcrumbs=breadcrumbs}}
3
-
{{{region name="page_builder_content__above-toggler"}}}
4
-
{{{region name="page_builder_content__below-toggler"}}}
5
-
6
2
<div class="rawsome-catculator-page">
7
3
<div class="calculator-heading">
8
4
<h1>How much protein are you currently feeding your cat?</h1>
···
15
11
{{> components/custom/calculator-toggler}}
16
12
{{> components/custom/calculator-toggler-mobile}}
17
13
18
-
<div style="display: none">
19
-
<div class="tubs_temp" style="display: none"></div>
20
-
<div class="pouches_temp" style="display: none"></div>
21
-
</div>
22
-
<div id="catculator" style="width: 100%; padding-top: 1.5rem">
23
-
<p
24
-
style="
25
-
font-weight: bold;
26
-
color: #687d6a;
27
-
font-size: 24px;
28
-
text-align: center;
29
-
margin-bottom: 0;
30
-
"
31
-
>
32
-
How old is your cat?
33
-
</p>
34
-
<div class="catculator-row">
35
-
<div class="catculator-col">
36
-
<img
37
-
style="
38
-
width: 75px;
39
-
height: 75px;
40
-
margin: 75px 0px 30px 37px;
41
-
"
42
-
src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/cat1.png"
43
-
/>
44
-
<button class="rawsome-button--primary" onclick="age(1)">
45
-
<p>4-8 Weeks</p>
46
-
</button>
47
-
</div>
14
+
<div id="catculator"></div>
48
15
49
-
<div class="catculator-col">
50
-
<img
51
-
style="
52
-
width: 125px;
53
-
height: 91px;
54
-
margin: 59px 0px 30px 12px;
55
-
"
56
-
src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/cat2.png"
57
-
/>
58
-
<button class="rawsome-button--primary" onclick="age(2)">
59
-
<p>2-4 Months</p>
60
-
</button>
61
-
</div>
62
-
63
-
<div class="catculator-col">
64
-
<img
65
-
style="height: 106px; margin: 44px 0px 30px 0px"
66
-
src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/cat3.png"
67
-
/>
68
-
<button class="rawsome-button--primary" onclick="age(3)">
69
-
<p>4-9 Months</p>
70
-
</button>
71
-
</div>
72
-
73
-
<div class="catculator-col">
74
-
<img
75
-
style="height: 128px; margin: 22px 0px 30px 0px"
76
-
src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/original/image-manager/9-12-months-cat-03.png?t=1660570333&_gl=1*1lk0d6z*_ga*ODg5ODM2MTQ0LjE2NTYzMTgwNTQ.*_ga_WS2VZYPC6G*MTY2MDU2NzY4Ny4xMDQuMS4xNjYwNTcwMzQwLjMy"
77
-
/>
78
-
<button class="rawsome-button--primary" onclick="age(4)">
79
-
<p>9-12 Months</p>
80
-
</button>
81
-
</div>
82
-
83
-
<div class="catculator-col" style="margin-right: -120px !important">
84
-
<img
85
-
style="
86
-
width: 90px;
87
-
height: 140px;
88
-
margin: 10px 0px 30px 30px;
89
-
"
90
-
src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/cat5.png"
91
-
/>
92
-
<button class="rawsome-button--primary" onclick="age(5)">
93
-
<p>12+ Months</p>
94
-
</button>
95
-
</div>
96
-
</div>
97
-
</div>
98
-
99
-
<div style="margin: 3rem auto; text-align: center">
16
+
<div class="calculator-disclaimer">
100
17
<p>
101
18
Please note that the generic calculation is calculated by using an
102
19
average of 150kcal per 100g of PurrForm food.
103
20
<br />
104
-
<br />
105
21
Please refer to the RDA to find out how much to feed by product.
106
-
<br />
107
22
<br />
108
23
These are guidelines only and may need to be adjusted accordingly.
109
24
<br />
110
-
<br />
111
25
If you need further information please contact us on
112
26
enquiry@purrform.co.uk.
113
27
</p>
···
116
30
<div id="rawsome-bottom">
117
31
<div class="rawsome-info-table">
118
32
<div>
119
-
<img
120
-
src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/original/image-manager/cat1new.png?t=1638444894&_gl=1*558qiq*_ga*MTEwMDQ4NTI5Ny4xNjg1OTY5NDc0*_ga_WS2VZYPC6G*MTY4ODEyODk1My4xMDIuMS4xNjg4MTMxMzIyLjI5LjAuMA.."
121
-
/>
33
+
<img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/original/image-manager/cat1new.png?t=1638444894&_gl=1*558qiq*_ga*MTEwMDQ4NTI5Ny4xNjg1OTY5NDc0*_ga_WS2VZYPC6G*MTY4ODEyODk1My4xMDIuMS4xNjg4MTMxMzIyLjI5LjAuMA.." />
122
34
<div>
123
35
<h1>Super Fine Minced</h1>
124
36
<p>For baby kittens from 4-8 weeks old.</p>
125
-
<button
126
-
style="
127
-
display: block;
128
-
margin: 10px auto 20px auto;
129
-
width: 150px;
130
-
height: 3rem;
131
-
border-color: rgb(104, 125, 106);
132
-
border-radius: 40px;
133
-
background-color: rgb(104, 125, 106);
134
-
text-align: center;
135
-
"
136
-
>
137
-
<a
138
-
href="/all"
139
-
style="
140
-
color: #fff;
141
-
font-size: 18px;
142
-
font-weight: bold;
143
-
margin: auto;
144
-
padding-bottom: 3px;
145
-
text-decoration: none;
146
-
"
147
-
>
148
-
Shop Now
149
-
</a>
150
-
</button>
37
+
<a href="/all" class="rawsome-button--primary">Shop Now</a>
151
38
</div>
152
39
</div>
153
40
<div>
154
-
<img
155
-
src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/original/image-manager/cat3new.png?t=1638444909&_gl=1*1c7qqbf*_ga*MTEwMDQ4NTI5Ny4xNjg1OTY5NDc0*_ga_WS2VZYPC6G*MTY4ODEyODk1My4xMDIuMS4xNjg4MTMxMzIyLjI5LjAuMA.."
156
-
/>
41
+
<img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/original/image-manager/cat3new.png?t=1638444909&_gl=1*1c7qqbf*_ga*MTEwMDQ4NTI5Ny4xNjg1OTY5NDc0*_ga_WS2VZYPC6G*MTY4ODEyODk1My4xMDIuMS4xNjg4MTMxMzIyLjI5LjAuMA.." />
157
42
<div>
158
43
<h1>Finely Minced</h1>
159
44
<p>For kittens above 8 weeks to 9 months old.</p>
160
-
<button
161
-
style="
162
-
display: block;
163
-
margin: 10px auto 20px auto;
164
-
width: 150px;
165
-
height: 3rem;
166
-
border-color: rgb(104, 125, 106);
167
-
border-radius: 40px;
168
-
background-color: rgb(104, 125, 106);
169
-
text-align: center;
170
-
"
171
-
>
172
-
<a
173
-
href="/all"
174
-
style="
175
-
color: #fff;
176
-
font-size: 18px;
177
-
font-weight: bold;
178
-
margin: auto;
179
-
padding-bottom: 3px;
180
-
text-decoration: none;
181
-
"
182
-
>
183
-
Shop Now
184
-
</a>
185
-
</button>
45
+
<a href="/all" class="rawsome-button--primary">Shop Now</a>
186
46
</div>
187
47
</div>
188
48
<div>
189
-
<img
190
-
src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/original/image-manager/adult-cat-green-new2.png?t=1655893873&_gl=1*1j7s8a4*_ga*MTEwMDQ4NTI5Ny4xNjg1OTY5NDc0*_ga_WS2VZYPC6G*MTY4ODEyODk1My4xMDIuMS4xNjg4MTMxMzIyLjI5LjAuMA.."
191
-
/>
49
+
<img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/original/image-manager/adult-cat-green-new2.png?t=1655893873&_gl=1*1j7s8a4*_ga*MTEwMDQ4NTI5Ny4xNjg1OTY5NDc0*_ga_WS2VZYPC6G*MTY4ODEyODk1My4xMDIuMS4xNjg4MTMxMzIyLjI5LjAuMA.." />
192
50
<div>
193
51
<h1>Coarsely Minced</h1>
194
52
<p>For adult cats above the age of 9 months old.</p>
195
-
<button
196
-
style="
197
-
display: block;
198
-
margin: 10px auto 20px auto;
199
-
width: 150px;
200
-
height: 3rem;
201
-
border-color: rgb(104, 125, 106);
202
-
border-radius: 40px;
203
-
background-color: rgb(104, 125, 106);
204
-
text-align: center;
205
-
"
206
-
>
207
-
<a
208
-
href="/all"
209
-
style="
210
-
color: #fff;
211
-
font-size: 18px;
212
-
font-weight: bold;
213
-
margin: auto;
214
-
padding-bottom: 3px;
215
-
text-decoration: none;
216
-
"
217
-
>
218
-
Shop Now
219
-
</a>
220
-
</button>
53
+
<a href="/all" class="rawsome-button--primary">Shop Now</a>
221
54
</div>
222
55
</div>
223
56
</div>
224
57
</div>
225
58
</div>
226
59
227
-
<script
228
-
src="https://code.jquery.com/jquery-3.7.0.js"
229
-
integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM="
230
-
crossorigin="anonymous"
231
-
></script>
232
-
233
-
<script>
234
-
let age_value = null;
235
-
let weight_value = null;
236
-
let coef = null;
237
-
let activity_value = null;
238
-
let neutered_value = null;
239
-
let daily_meals = null;
240
-
let total = null;
241
-
let kcal = null;
242
-
const KCAL_PER_KG = 1500;
243
-
244
-
const age = (num) => {
245
-
$('.tubs_temp').html('');
246
-
$('.pouches_temp').html('');
247
-
age_value = num;
248
-
url = `https://purrform-apps-027e.onrender.com/calculator?age=${num}`;
249
-
250
-
$.ajax({
251
-
url: url,
252
-
method: 'GET',
253
-
success: function (response) {
254
-
var tubs;
255
-
var pouches;
256
-
if (response != '' && response != undefined) {
257
-
if (num == 1) {
258
-
if (response.hasOwnProperty('weaning_tubs')) {
259
-
tubs = response.weaning_tubs;
260
-
}
261
-
if (response.hasOwnProperty('weaning_pouches')) {
262
-
pouches = response.weaning_pouches;
263
-
}
264
-
}
265
-
if (num == 2 || num == 3) {
266
-
if (response.hasOwnProperty('kitten_tubs')) {
267
-
tubs = response.kitten_tubs;
268
-
}
269
-
if (response.hasOwnProperty('kitten_pouches')) {
270
-
pouches = response.kitten_pouches;
271
-
}
272
-
}
273
-
if (num == 4 || num == 5) {
274
-
if (response.hasOwnProperty('adult_tubs')) {
275
-
tubs = response.adult_tubs;
276
-
}
277
-
if (response.hasOwnProperty('adult_pouches')) {
278
-
pouches = response.adult_pouches;
279
-
}
280
-
}
281
-
}
282
-
if (tubs != null && tubs != undefined) {
283
-
$(tubs).each(function (i, val) {
284
-
p_id = val.id;
285
-
p_image = val.image;
286
-
p_name = val.name;
287
-
p_url = val.action_url;
288
-
p_cal_per_kg = val.calorie;
289
-
290
-
$('.tubs_temp').append(
291
-
'<div class="wrapper"><div class="image_wrap" style="">' +
292
-
'<a href="' +
293
-
p_url +
294
-
'"><img src="' +
295
-
p_image +
296
-
'"style="width: auto; height: auto; "/></a>' +
297
-
'</div>' +
298
-
'<div class="content_wrap" style="">' +
299
-
'<a href="' +
300
-
p_url +
301
-
'"><p style="line-height: 16px; font-size: 14px; color: #687D6A;">' +
302
-
p_name +
303
-
'</p></a>' +
304
-
'</div>' +
305
-
'<div class="cta_wrap" style="">' +
306
-
'<a href="' +
307
-
p_url +
308
-
'"><button class="rawsome-button--primary" data-calorie = "' +
309
-
p_cal_per_kg +
310
-
'" >150g per day</button></a>' +
311
-
'</div></div>'
312
-
);
313
-
});
314
-
} else {
315
-
$('.tubs_temp').html(
316
-
'<div class="wrapper"><p>No product found</p></div>'
317
-
);
318
-
}
319
-
if (pouches != null && pouches != undefined) {
320
-
$(pouches).each(function (i, val) {
321
-
p_id = val.id;
322
-
p_image = val.image;
323
-
p_name = val.name;
324
-
p_url = val.action_url;
325
-
p_cal_per_kg = val.calorie;
326
-
//console.log("Here is the product data");
327
-
//console.log(JSON.stringify(val));
328
-
$('.pouches_temp').append(
329
-
'<div class="wrapper"><div class="image_wrap" style="">' +
330
-
'<a href="' +
331
-
p_url +
332
-
'"><img src="' +
333
-
p_image +
334
-
'"style="width: auto; height: auto;"/></a>' +
335
-
'</div>' +
336
-
'<div class="content_wrap" style="">' +
337
-
'<a href="' +
338
-
p_url +
339
-
'"><p style="line-height: 16px; font-size: 14px; color: #687D6A;">' +
340
-
p_name +
341
-
'</p></a>' +
342
-
'</div>' +
343
-
'<div class="cta_wrap" style="">' +
344
-
'<a href="' +
345
-
p_url +
346
-
'"><button class="rawsome-button--primary" data-calorie = "' +
347
-
p_cal_per_kg +
348
-
'" >150g per day</button></a>' +
349
-
'</div></div>'
350
-
);
351
-
});
352
-
} else {
353
-
$('.pouches_temp').html(
354
-
'<div class="wrapper"><p>No product found</p></div>'
355
-
);
356
-
}
357
-
},
358
-
error: function (jqxhr, status, error) {
359
-
console.log('Something went wrong!');
360
-
console.log('jqxhr!' + JSON.stringify(jqxhr));
361
-
console.log('status' + status);
362
-
console.log('Error!' + error);
363
-
},
364
-
});
365
-
switch (num) {
366
-
case 1:
367
-
coef = 2.3;
368
-
daily_meals = `Feed as & when required`;
369
-
activity_value = 95;
370
-
toKittenPageTwo();
371
-
break;
372
-
case 2:
373
-
coef = 2.15;
374
-
daily_meals = `Divided into 4 to 6 meals a day`;
375
-
toAdolescentPageTwo();
376
-
break;
377
-
case 3:
378
-
coef = 1.85;
379
-
daily_meals = `Divided into 3 to 4 meals a day`;
380
-
toPageTwo();
381
-
break;
382
-
case 4:
383
-
coef = 1.5;
384
-
daily_meals = `Divided into 2 meals a day`;
385
-
toPageTwo();
386
-
break;
387
-
case 5:
388
-
coef = 1;
389
-
daily_meals = `Divided into 2 meals a day`;
390
-
toPageTwo();
391
-
break;
392
-
}
393
-
};
394
-
395
-
const weightInput = () => {
396
-
const weight_input = document.getElementById('weight_input');
397
-
const nextButton = weight_input.parentElement.querySelector(
398
-
'.rawsome-button--primary'
399
-
);
400
-
const value = parseFloat(weight_input.value);
401
-
402
-
nextButton.disabled = isNaN(value) || value <= 0;
403
-
};
404
-
405
-
const toKittenPageTwo = () => {
406
-
let catculator = document.getElementById('catculator');
407
-
catculator.innerHTML = /* html */`
408
-
<div id='catculator' style='width: 100%'>
409
-
<p style='font-weight: bold; color: #687D6A; font-size: 24px; text-align: center;'>
410
-
How much does your cat weigh?
411
-
</p>
412
-
<div class="cat_weight_cal">
413
-
<img src='https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/cat-weight.png'/>
414
-
<div style='display: flex; flex-direction: column; width: auto; height: auto;'>
415
-
<p class="cat_weight_p" >kg</p>
416
-
<input id='weight_input' type="number" min="1" step="1" oninput='weightInput()'/>
417
-
<div>
418
-
<button class="rawsome-button--secondary" onclick='toPageOne()'>Back</button>
419
-
<button class="rawsome-button--primary" onclick='weight(1)' disabled >Next</button>
420
-
</div>
421
-
</div>
422
-
423
-
</div>
424
-
425
-
</div>
426
-
`;
427
-
};
428
-
429
-
const toAdolescentPageTwo = () => {
430
-
let catculator = document.getElementById('catculator');
431
-
catculator.innerHTML = `
432
-
<div id='catculator' style='width: 100%'>
433
-
<p style='font-weight: bold; color: #687D6A; font-size: 24px; text-align: center;'>
434
-
How much does your cat weigh?
435
-
</p>
436
-
<div class="cat_weight_cal" >
437
-
<img src='https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/cat-weight.png'/>
438
-
<div style='display: flex; flex-direction: column; width: auto; height: auto;'>
439
-
<p class="cat_weight_p" >kg</p>
440
-
<input id='weight_input' type="number" min="1" step="1" oninput='weightInput()' />
441
-
<div>
442
-
<button class="rawsome-button--secondary" onclick='toPageOne()' >Back</button>
443
-
<button class="rawsome-button--primary" disabled onclick='weight(2)' >Next</button>
444
-
</div>
445
-
</div>
446
-
447
-
</div>
448
-
</div>
449
-
`;
450
-
};
451
-
452
-
const toAdolescentPageThree = () => {
453
-
let catculator = document.getElementById('catculator');
454
-
catculator.innerHTML = `
455
-
<div id='catculator' style='width: 100%'>
456
-
<p style='font-weight: bold; color: #687D6A; font-size: 24px; text-align: center;'>
457
-
Is your cat spayed / neutered?
458
-
</p>
459
-
<div class="cat_neutered" style='margin-top: 35px; display: flex; flex-direction: row;'>
460
-
<img style='width: 295px; height: 215px; margin-left: 10%;' src='https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/kittengreen-new.png'/>
461
-
<div style='display: flex; flex-direction: column; width: auto; height: auto;'>
462
-
<button class="rawsome-button--primary" onclick='neutered(true, 1)' >Yes</button>
463
-
<button class="rawsome-button--primary" onclick='neutered(false, 1)'>No</button>
464
-
</div>
465
-
<button class="rawsome-button--secondary" onclick='toAdolescentPageTwo()' >Back</button>
466
-
</div>
467
-
</div>
468
-
`;
469
-
};
470
-
471
-
const catculate = () => {
472
-
total = Math.round(
473
-
((Math.pow(weight_value, 0.67) * activity_value * 1000) /
474
-
KCAL_PER_KG) *
475
-
coef
476
-
);
477
-
kcal = Math.round((150 * total) / 100);
478
-
toPageFive();
479
-
};
480
-
481
-
const weight = (num) => {
482
-
weight_value = parseFloat(
483
-
document.getElementById('weight_input').value
484
-
);
485
-
switch (num) {
486
-
case 1:
487
-
activity_value = 95;
488
-
catculate();
489
-
break;
490
-
case 2:
491
-
toAdolescentPageThree();
492
-
break;
493
-
case 3:
494
-
toPageThree();
495
-
break;
496
-
}
497
-
};
498
-
499
-
const neutered = (bool, num) => {
500
-
neutered_value = bool;
501
-
if (num === 1) {
502
-
activity_value = neutered_value ? 87.5 : 95;
503
-
catculate();
504
-
} else toPageFour();
505
-
};
506
-
507
-
const activity = (num) => {
508
-
switch (num) {
509
-
case 1:
510
-
activity_value = neutered_value ? 52 : 80;
511
-
break;
512
-
case 2:
513
-
activity_value = neutered_value ? 64 : 87.5;
514
-
break;
515
-
case 3:
516
-
activity_value = neutered_value ? 75 : 95;
517
-
break;
518
-
}
519
-
catculate();
520
-
};
521
-
522
-
523
-
524
-
const reset = () => {
525
-
age_value = null;
526
-
weight_value = null;
527
-
coef = null;
528
-
activity_value = null;
529
-
neutered_value = null;
530
-
daily_meals = null;
531
-
total = null;
532
-
kcal = null;
533
-
toPageOne();
534
-
};
535
-
536
-
const closeProductWindow = () => {
537
-
document.getElementById('show_RDA').style.display = 'none';
538
-
const productWindow = document.getElementById('productWindow');
539
-
productWindow.innerHTML = ``;
540
-
};
541
-
542
-
const showProducts = () => {
543
-
// alert("show_RDA")
544
-
document.getElementById('show_RDA').style.display = 'block';
545
-
document.getElementById('show_RDA').style.visibility = 'visible';
546
-
const productWindow = document.getElementById('productWindow123');
547
-
getTubs = $('.tubs_temp');
548
-
getpouches = $('.pouches_temp');
549
-
productWindow.innerHTML =
550
-
`<div class="" id="show_RDA" tabindex="-1" aria-labelledby="redeem_point" style="display: block; visibility: visible;" aria-hidden="true">
551
-
<div class="modal-dialog">
552
-
<!--<div class="modal-header swal2-header">
553
-
<button type="button" class="swal2-close" onclick="document.getElementById('show_RDA').style.display='none';">x</button>
554
-
</div>-->
555
-
<div class="modal-content swal2-content" >
556
-
<h1 style="text-align:center; margin-bottom: 1.5rem;" id="swal2-title">450g Tubs</h1>
557
-
558
-
<div id="swal2-content_tubs" class="swal2-html-container tubs" style="display: block;">
559
-
` +
560
-
getTubs.html() +
561
-
`
562
-
</div>
563
-
<hr>
564
-
<h1 style="text-align:center; margin-bottom: 1.5rem;" id="swal2-title">Pouches</h1>
565
-
566
-
<div id="swal2-content-pouches" class="swal2-html-container tubs" style="display: block;">
567
-
568
-
` +
569
-
getpouches.html() +
570
-
`
571
-
</div>
572
-
<hr>
573
-
574
-
</div>
575
-
576
-
</div>
577
-
</div>
578
-
`;
579
-
getTubs.css('display', 'flex');
580
-
getpouches.css('display', 'flex');
581
-
$('.cta_wrap button').each(function () {
582
-
this_cal = $(this).attr('data-calorie');
583
-
this_cal = this_cal * 10;
584
-
585
-
this_total = Math.round(
586
-
((Math.pow(weight_value, 0.67) * activity_value * 1000) /
587
-
this_cal) *
588
-
coef
589
-
);
590
-
$(this).text(this_total + 'g per day');
591
-
});
592
-
};
593
-
594
-
const toPageOne = () => {
595
-
let catculator = document.getElementById('catculator');
596
-
catculator.innerHTML = `
597
-
<div id='catculator' style='width: 100%'>
598
-
<p style='font-weight: bold; color: #687D6A; font-size: 24px; text-align: center;'>
599
-
How old is your cat?
600
-
</p>
601
-
<div class="catculator-row" style='width: 100%; display: flex; flex-direction: row;'>
602
-
<div class="catculator-col">
603
-
<img style='width: 75px; height: 75px; margin: 75px 0px 30px 37px;' src='https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/cat1.png'/>
604
-
<button class="rawsome-button--primary" onclick='age(1)' >
605
-
<p style="color: #fff; font-size: 18px; font-weight: bold; margin: auto; padding-bottom: 3px;">
606
-
4-8 Weeks
607
-
</p>
608
-
</button>
609
-
</div>
610
-
611
-
<div class="catculator-col">
612
-
<img style='width: 125px; height: 91px; margin: 59px 0px 30px 12px;' src='https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/cat2.png'/>
613
-
<button class="rawsome-button--primary" onclick='age(2)' >
614
-
<p style="color: #fff; font-size: 18px; font-weight: bold; margin: auto; padding-bottom: 3px;">
615
-
2-4 Months
616
-
</p>
617
-
</button>
618
-
</div>
619
-
620
-
<div class="catculator-col">
621
-
<img style='width: 150px; height: 106px; margin: 44px 0px 30px 0px;' src='https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/cat3.png'/>
622
-
<button class="rawsome-button--primary" onclick='age(3)' >
623
-
<p style="color: #fff; font-size: 18px; font-weight: bold; margin: auto; padding-bottom: 3px;">
624
-
4-9 Months
625
-
</p>
626
-
</button>
627
-
</div>
628
-
629
-
<div class="catculator-col">
630
-
<img style='width: 95px; height: 128px; margin: 22px 0px 30px 27px;' src='https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/cat4.png'/>
631
-
<button class="rawsome-button--primary" onclick='age(4)'>
632
-
<p style="color: #fff; font-size: 18px; font-weight: bold; margin: auto; padding-bottom: 3px;">
633
-
9-12 Months
634
-
</p>
635
-
</button>
636
-
</div>
637
-
638
-
<div class="catculator-col">
639
-
<img style='width: 90px; height: 140px; margin: 10px 0px 30px 30px;' src='https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/cat5.png'/>
640
-
<button class="rawsome-button--primary" onclick='age(5)' >
641
-
<p style="color: #fff; font-size: 18px; font-weight: bold; margin: auto; padding-bottom: 3px;">
642
-
12+ Months
643
-
</p>
644
-
</button>
645
-
</div>
646
-
</div>
647
-
</div>
648
-
`;
649
-
};
650
-
651
-
const toPageFive = () => {
652
-
let catculator = document.getElementById('catculator');
653
-
catculator.innerHTML = `
654
-
<div id='catculator' style='width: 100%'>
655
-
<p class="recom_daily_amount_heading" >
656
-
Your Recommended Daily Amount (RDA) is...
657
-
</p>
658
-
<div class="recom_daily_amount">
659
-
<!--<img style='width: 138px; height: 215px; margin: 0px 116px 0px 116px;' src='https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/adult-cat-green-new.png'/>-->
660
-
<div class="recom_daily_amount_inner">
661
-
<div class="rc_reccoms" >
662
-
<p >Serving per day: <span><strong>${total}g</strong></span></p>
663
-
<!--<button style='cursor:auto;margin: -10px 0px 0px 50px; color: #fff; font-size: 18px; font-weight: bold; text-align: center; width: 165px; height: 3.5rem; background-color: #BD9B60; border-color: #00000000; border-radius: 45px;'>${total}g</button>-->
664
-
</div>
665
-
666
-
<div class="daily_meals">
667
-
<p >${daily_meals}</p>
668
-
</div>
669
-
670
-
<div class="rc_reccoms">
671
-
<div>
672
-
<p >Daily calorie intake: <span><strong>${kcal} kcal</strong></span></p>
673
-
<!--<button style='cursor:auto;margin: -10px 0px 0px 20px; color: #fff; font-size: 18px; font-weight: bold; text-align: center; width: 165px; height: 3.5rem; background-color: #BD9B60; border-color: #00000000; border-radius: 45px;'>${kcal} kcal</button></div>-->
674
-
675
-
</div>
676
-
</div>
677
-
<button class="rawsome-button--secondary" onclick='reset()'>Start Over</button>
678
-
</div>
679
-
680
-
681
-
<div class="rda_account_btn_container">
682
-
<button class="rda_account_btn rawsome-button--secondary" title="loading... please wait" id="show_product_cta" class="cta--loading" onclick='showProducts()' style=''>View your RDA on our products
683
-
<span class="button--loading"></span>
684
-
</button>
685
-
686
-
</div>
687
-
688
-
<div id="show_RDA" class="swal2-container swal2-center swal2-backdrop-show" style="overflow-y: auto;display:none">
689
-
<div id="productWindow123"></div>
690
-
</div>
691
-
692
-
</div>
693
-
`;
694
-
interval = setInterval(function () {
695
-
tub = $('.tubs_temp .wrapper').children().length;
696
-
pouche = $('.pouches_temp .wrapper').children().length;
697
-
if (tub > 0 || pouche > 0) {
698
-
clearInterval(interval);
699
-
$('.button--loading').hide();
700
-
$('#show_product_cta').removeClass('cta--loading');
701
-
$('#show_product_cta').removeAttr('title');
702
-
}
703
-
}, 500);
704
-
};
705
-
706
-
const toPageThree = () => {
707
-
let catculator = document.getElementById('catculator');
708
-
catculator.innerHTML = `
709
-
<div id='catculator' style='width: 100%'>
710
-
<p style='font-weight: bold; color: #687D6A; font-size: 24px; text-align: center;'>
711
-
Is your cat spayed / nuetered?
712
-
</p>
713
-
<div class="cat_spayed">
714
-
<img style='width: 295px; height: 215px; margin-left: 10%;' src='https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/kittengreen-new.png'/>
715
-
<div style='display: flex; flex-direction: column; width: auto; height: auto;'>
716
-
<button class="rawsome-button--primary" onclick='neutered(true, 2)' style='color: #fff; font-size: 18px; font-weight: bold; margin: 40px 0px 0px 96px; text-align: center; width: 165px; height: 3.5rem; background-color: #687D6A; border-color: #00000000; border-radius: 45px;'>Yes</button>
717
-
<button class="rawsome-button--primary" onclick='neutered(false, 2)' style='color: #fff; font-size: 18px; font-weight: bold; margin: 20px 0px 0px 96px; text-align: center; width: 165px; height: 3.5rem; background-color: #687D6A; border-color: #00000000; border-radius: 45px;'>No</button>
718
-
</div>
719
-
<button class="rawsome-button--secondary" onclick='toPageTwo()' >Back</button>
720
-
</div>
721
-
</div>
722
-
`;
723
-
};
724
-
725
-
const toPageFour = () => {
726
-
let catculator = document.getElementById('catculator');
727
-
catculator.innerHTML = `
728
-
<div id='catculator' style='width: 100%'>
729
-
<p style='font-weight: bold; color: #687D6A; font-size: 24px; text-align: center;'>
730
-
How active is your cat?
731
-
</p>
732
-
<div class="cat_active" style='margin-top: 35px; display: flex; flex-direction: row;'>
733
-
<img style='width: 371px; height: 190px; margin: 25px 0px 0px 5%;' src='https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/twocatsgreen.png'/>
734
-
<div style='display: flex; flex-direction: column; width: auto; height: auto;'>
735
-
<button class="rawsome-button--primary" onclick='activity(1)' >Not Much</button>
736
-
<button class="rawsome-button--primary" onclick='activity(2)' >Moderately</button>
737
-
<button class="rawsome-button--primary" onclick='activity(3)' >Active</button>
738
-
</div>
739
-
<button class="rawsome-button--secondary" onclick='toPageThree()' >Back</button>
740
-
</div>
741
-
</div>
742
-
`;
743
-
};
744
-
745
-
const toPageTwo = () => {
746
-
let catculator = document.getElementById('catculator');
747
-
catculator.innerHTML = `
748
-
<div id='catculator' style='width: 100%'>
749
-
<p style='font-weight: bold; color: #687D6A; font-size: 24px; text-align: center;'>
750
-
How much does your cat weigh?
751
-
</p>
752
-
<div class="cat_weight_cal" >
753
-
<img src='https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/cat-weight.png'/>
754
-
<div style='display: flex; flex-direction: column; width: auto; height: auto;'>
755
-
<p class="cat_weight_p" >kg</p>
756
-
<input id='weight_input' type="number" min="1" step="1" oninput='weightInput()' />
757
-
<div>
758
-
<button class="rawsome-button--secondary" onclick='toPageOne()' >Back</button>
759
-
<button class="rawsome-button--primary" onclick='weight(3)' disabled >Next</button>
760
-
</div>
761
-
</div>
762
-
763
-
</div>
764
-
</div>
765
-
`;
766
-
};
767
-
</script>
768
-
769
60
{{/partial}}
770
-
{{> layout/base}}
61
+
{{> layout/base}}