2665 lines
92 KiB
HTML
2665 lines
92 KiB
HTML
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>NHS Weight Loss Medicine Eligibility Checker</title>
|
|
<style>
|
|
@font-face {
|
|
font-family: 'Avenir LT Std';
|
|
src: url('fonts/Avenir LT 55 Roman.ttf') format('truetype');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Avenir LT Std';
|
|
src: url('fonts/avenir-lt-std-95-black.otf') format('opentype');
|
|
font-weight: bold;
|
|
font-style: normal;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Avenir LT Std', Arial, sans-serif;
|
|
line-height: 1.6;
|
|
color: #231f20;
|
|
background-color: #f8fafc;
|
|
padding: 20px;
|
|
}
|
|
|
|
.calculator-container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
border: 4px solid var(--primary-color);
|
|
background: var(--brand-white);
|
|
margin-bottom: 0px;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
box-shadow: 0 8px 32px rgba(14, 6, 97, 0.1);
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.header {
|
|
background: #0E0661;
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 0px;
|
|
margin-bottom: 0px;
|
|
padding: 16px 32px;
|
|
}
|
|
|
|
.header-content {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
}
|
|
|
|
.header-logo-container {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
}
|
|
|
|
.header-title {
|
|
font-size: 18px;
|
|
line-height: 1;
|
|
letter-spacing: -0.025em;
|
|
padding: 0;
|
|
font-weight: normal;
|
|
margin: 0;
|
|
}
|
|
|
|
.content {
|
|
padding: 0 8px 8px;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.step-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
background: var(--brand-white);
|
|
border-radius: 12px;
|
|
padding: 16px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
|
border: 1px solid var(--border-color);
|
|
transition: all 0.3s ease;
|
|
height: 100%;
|
|
justify-content: flex-start;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.step-content.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.prose {
|
|
max-width: none;
|
|
}
|
|
|
|
.prose p {
|
|
margin-bottom: 16px;
|
|
font-size: 18px;
|
|
font-family: 'Avenir LT Std', Arial, sans-serif;
|
|
color: #231f20;
|
|
}
|
|
|
|
.important-box {
|
|
margin: 0px 0;
|
|
padding: 0px 24px 0;
|
|
background: #fefce8;
|
|
color: #374151;
|
|
border: 1px solid #FFC240;
|
|
position: relative;
|
|
}
|
|
|
|
.important-header {
|
|
display: inline-block;
|
|
position: relative;
|
|
margin-left: -24px;
|
|
margin-bottom: 8px;
|
|
font-size: 20px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.important-label {
|
|
font-weight: bold;
|
|
background: #FFC240;
|
|
display: inline-block;
|
|
padding: 8px 32px;
|
|
position: relative;
|
|
top: -16px;
|
|
}
|
|
|
|
.important-content {
|
|
font-size: 16px;
|
|
padding-bottom: 24px;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
margin-bottom: 0px;
|
|
font-family: 'Avenir LT Std', Arial, sans-serif;
|
|
color: #202755;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
margin-bottom: 16px;
|
|
font-family: 'Avenir LT Std', Arial, sans-serif;
|
|
color: #202755;
|
|
}
|
|
|
|
.radio-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.radio-option {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 6px;
|
|
padding: 12px;
|
|
border: 1px solid #d1d5db;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.radio-option:hover {
|
|
background-color: #f9fafb;
|
|
}
|
|
|
|
.radio-option input[type="radio"] {
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.checkbox-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.checkbox-option {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
padding: 9px;
|
|
border: 1px solid #d1d5db;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.checkbox-option:hover {
|
|
background-color: #f9fafb;
|
|
}
|
|
|
|
.checkbox-option input[type="checkbox"] {
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.condition-description {
|
|
font-size: 14px;
|
|
color: #4b5563;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.form-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.input-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.input-group label {
|
|
margin-bottom: 4px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.input-group input {
|
|
width: 100%;
|
|
padding: 8px;
|
|
border: 1px solid #d1d5db;
|
|
border-radius: 6px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.bmi-methods {
|
|
display: flex;
|
|
gap: 16px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.method-btn {
|
|
padding: 8px 16px;
|
|
border: none;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.method-btn.active {
|
|
background: #0E0661;
|
|
color: white;
|
|
}
|
|
|
|
.method-btn.inactive {
|
|
background: #e5e7eb;
|
|
color: #374151;
|
|
}
|
|
|
|
.method-btn.inactive:hover {
|
|
background: #d1d5db;
|
|
}
|
|
|
|
.bmi-result {
|
|
padding: 16px;
|
|
background: #f3f4f6;
|
|
border-radius: 6px;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.info-box {
|
|
padding-left: 16px;
|
|
padding-right: 16px;
|
|
padding-top: 8px;
|
|
padding-bottom: 8px;
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.info-box.blue {
|
|
background: #dbeafe;
|
|
border: 1px solid #1FB8DB;
|
|
}
|
|
|
|
.info-box.green {
|
|
background: #dcfce7;
|
|
border: 1px solid #2EB67D;
|
|
}
|
|
|
|
.info-box.yellow {
|
|
background: #fefce8;
|
|
border: 1px solid #FFC240;
|
|
}
|
|
|
|
.button-group {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.button-group .btn {
|
|
flex: 1;
|
|
}
|
|
|
|
.btn {
|
|
padding: 8px 24px;
|
|
border: none;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: #0E0661;
|
|
color: white;
|
|
}
|
|
|
|
.btn-primary:hover:not(:disabled) {
|
|
background: #1058A5;
|
|
}
|
|
|
|
.btn-primary:disabled {
|
|
background: #d1d5db;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: #e5e7eb;
|
|
color: #374151;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: #d1d5db;
|
|
}
|
|
|
|
.btn-large {
|
|
padding: 12px 24px;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
width: 100%;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.result-box {
|
|
padding: 12px;
|
|
border-radius: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.result-box.success {
|
|
background: #dcfce7;
|
|
border: 1px solid #2EB67D;
|
|
}
|
|
|
|
.result-box.warning {
|
|
background: #fefce8;
|
|
border: 1px solid #FFC240;
|
|
}
|
|
|
|
.result-box.orange {
|
|
background: #fed7aa;
|
|
border: 1px solid #EE710C;
|
|
}
|
|
|
|
.cohort-info {
|
|
background: white;
|
|
padding: 16px;
|
|
border-radius: 6px;
|
|
border: 1px solid #d1d5db;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.timeline-box {
|
|
background: #dbeafe;
|
|
border: 1px solid #1FB8DB;
|
|
padding: 24px;
|
|
border-radius: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.timeline-item {
|
|
font-size: 14px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.header-logo {
|
|
flex-shrink: 0;
|
|
max-height: 500px;
|
|
height: auto;
|
|
width: auto;
|
|
max-width: 300px;
|
|
padding: 0px 0px 0px 0px;
|
|
object-fit: contain;
|
|
margin-left: auto;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
body {
|
|
padding: 10px;
|
|
}
|
|
|
|
.calculator-container {
|
|
border-width: 2px;
|
|
height: calc(100vh - 20px);
|
|
max-height: 100%;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.header {
|
|
padding: 12px 15px;
|
|
gap: 10px;
|
|
}
|
|
|
|
.header-title {
|
|
font-size: 17px;
|
|
padding: 10;
|
|
}
|
|
|
|
.header-logo {
|
|
max-height: 100px;
|
|
max-width: 200px;
|
|
}
|
|
|
|
.content {
|
|
padding: 0 15px 15px;
|
|
}
|
|
|
|
.step-content {
|
|
padding: 16px 15px;
|
|
gap: 12px;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
#step-result {
|
|
min-height: 0;
|
|
}
|
|
|
|
.prose p {
|
|
font-size: 15px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.important-box {
|
|
margin: 15px 0;
|
|
padding: 15px;
|
|
}
|
|
|
|
.important-header {
|
|
margin-left: -15px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.important-label {
|
|
padding: 5px 12px;
|
|
font-size: 13px;
|
|
top: -10px;
|
|
}
|
|
|
|
.important-content {
|
|
font-size: 14px;
|
|
padding-bottom: 15px;
|
|
}
|
|
|
|
.button-group {
|
|
flex-direction: row;
|
|
gap: 10px;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.button-group .btn {
|
|
flex: 1;
|
|
}
|
|
|
|
.print-section {
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.btn {
|
|
width: 100%;
|
|
min-height: 44px;
|
|
font-size: 15px;
|
|
padding: 10px 20px;
|
|
}
|
|
|
|
.btn-large {
|
|
font-size: 16px;
|
|
padding: 12px 20px;
|
|
}
|
|
|
|
.radio-option, .checkbox-option {
|
|
padding: 12px;
|
|
min-height: 44px;
|
|
gap: 8px;
|
|
}
|
|
|
|
.radio-option input[type="radio"],
|
|
.checkbox-option input[type="checkbox"] {
|
|
width: 18px;
|
|
height: 18px;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.condition-description {
|
|
font-size: 13px;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 20px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 18px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.input-label {
|
|
font-size: 14px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.modern-input, .modern-select {
|
|
padding: 10px 12px;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.modern-select {
|
|
background-position: right 12px center;
|
|
}
|
|
|
|
.input-row {
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.height-input-row {
|
|
flex-direction: row;
|
|
gap: 10px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.weight-toggle-row {
|
|
flex-direction: row;
|
|
gap: 10px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.weight-toggle-row .input-col:last-child {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.input-col[style*="flex: 0 0 120px"] {
|
|
flex: 0 0 auto !important;
|
|
align-self: flex-start;
|
|
width: auto;
|
|
}
|
|
|
|
#step-result {
|
|
min-height: 0;
|
|
}
|
|
|
|
.prose p {
|
|
font-size: 15px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.important-box {
|
|
margin: 15px 0;
|
|
padding: 15px;
|
|
}
|
|
|
|
.important-header {
|
|
margin-left: -15px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.important-label {
|
|
padding: 5px 12px;
|
|
font-size: 13px;
|
|
top: -10px;
|
|
}
|
|
|
|
.important-content {
|
|
font-size: 14px;
|
|
padding-bottom: 15px;
|
|
}
|
|
|
|
.button-group {
|
|
flex-direction: row;
|
|
gap: 10px;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.button-group .btn {
|
|
flex: 1;
|
|
}
|
|
|
|
.print-section {
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.btn {
|
|
width: 100%;
|
|
min-height: 44px;
|
|
font-size: 15px;
|
|
padding: 10px 20px;
|
|
}
|
|
|
|
.btn-large {
|
|
font-size: 16px;
|
|
padding: 12px 20px;
|
|
}
|
|
|
|
.radio-option, .checkbox-option {
|
|
padding: 12px;
|
|
min-height: 44px;
|
|
gap: 8px;
|
|
}
|
|
|
|
.radio-option input[type="radio"],
|
|
.checkbox-option input[type="checkbox"] {
|
|
width: 18px;
|
|
height: 18px;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.condition-description {
|
|
font-size: 13px;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 20px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 18px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.input-label {
|
|
font-size: 14px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.modern-input, .modern-select {
|
|
padding: 10px 12px;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.modern-select {
|
|
background-position: right 12px center;
|
|
}
|
|
|
|
.input-row {
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.height-input-row {
|
|
flex-direction: row;
|
|
gap: 10px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.weight-toggle-row {
|
|
flex-direction: row;
|
|
gap: 10px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.weight-toggle-row .input-col:last-child {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.input-col[style*="flex: 0 0 120px"] {
|
|
flex: 0 0 auto !important;
|
|
align-self: flex-start;
|
|
width: auto;
|
|
}
|
|
|
|
.condition-list li {
|
|
padding: 4px 0;
|
|
font-size: 12px;
|
|
color: var(--text-primary);
|
|
break-inside: avoid;
|
|
page-break-inside: avoid;
|
|
}
|
|
}
|
|
|
|
.unit-toggle {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.unit-btn {
|
|
padding: 6px 12px;
|
|
border: 1px solid #d1d5db;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease-out;
|
|
font-size: 14px;
|
|
background: white;
|
|
color: #374151;
|
|
}
|
|
|
|
.unit-btn.active {
|
|
background: #0E0661;
|
|
color: white;
|
|
border-color: #0E0661;
|
|
}
|
|
|
|
.unit-btn:hover:not(.active) {
|
|
background: #f3f4f6;
|
|
border-color: #9ca3af;
|
|
}
|
|
|
|
.radio-option, .checkbox-option {
|
|
transition: all 0.2s ease-out;
|
|
}
|
|
|
|
.radio-option:hover, .checkbox-option:hover {
|
|
background-color: #f9fafb;
|
|
border-color: #0E0661;
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.btn {
|
|
transition: all 0.2s ease-out;
|
|
}
|
|
|
|
.btn:hover:not(:disabled) {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.btn-primary:hover:not(:disabled) {
|
|
background: #1058A5;
|
|
box-shadow: 0 4px 12px rgba(14, 6, 97, 0.3);
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: #d1d5db;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.input-group input {
|
|
transition: all 0.15s ease-in-out;
|
|
}
|
|
|
|
.input-group input:focus {
|
|
outline: none;
|
|
border-color: #0E0661;
|
|
box-shadow: 0 0 0 3px rgba(14, 6, 97, 0.1);
|
|
}
|
|
|
|
.input-group input:hover {
|
|
border-color: #9ca3af;
|
|
}
|
|
|
|
.method-btn {
|
|
transition: all 0.2s ease-out;
|
|
}
|
|
|
|
.method-btn:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.bmi-result {
|
|
transition: all 0.3s ease-in-out;
|
|
opacity: 1;
|
|
}
|
|
|
|
.bmi-result.hidden {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
}
|
|
|
|
.step-content {
|
|
transition: opacity 0.4s ease-in-out;
|
|
}
|
|
|
|
.height-imperial {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: end;
|
|
}
|
|
|
|
.height-imperial .input-group {
|
|
flex: 1;
|
|
}
|
|
|
|
.height-imperial .input-group:first-child {
|
|
flex: 0 0 80px;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
|
|
.radio-option:focus-within, .checkbox-option:focus-within {
|
|
border-color: #0E0661;
|
|
box-shadow: 0 0 0 3px rgba(14, 6, 97, 0.1);
|
|
}
|
|
|
|
#condition-count {
|
|
transition: all 0.2s ease-out;
|
|
}
|
|
|
|
.input-error {
|
|
border-color: #ef4444 !important;
|
|
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
|
|
}
|
|
|
|
.input-success {
|
|
border-color: #2EB67D !important;
|
|
}
|
|
|
|
.bmi-card {
|
|
background: white;
|
|
border-radius: 12px;
|
|
padding: 24px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
border: 1px solid #e5e7eb;
|
|
margin-bottom: 24px;
|
|
height: auto;
|
|
}
|
|
|
|
.bmi-tabs {
|
|
display: flex;
|
|
background: #f8fafc;
|
|
border-radius: 8px;
|
|
padding: 4px;
|
|
margin-bottom: 24px;
|
|
border: 1px solid #e5e7eb;
|
|
}
|
|
|
|
.bmi-tab {
|
|
flex: 1;
|
|
padding: 12px 16px;
|
|
border: none;
|
|
background: transparent;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
transition: all 0.2s ease-out;
|
|
color: #6b7280;
|
|
}
|
|
|
|
.bmi-tab.active {
|
|
background: #0E0661;
|
|
color: white;
|
|
box-shadow: 0 2px 4px rgba(14, 6, 97, 0.2);
|
|
}
|
|
|
|
.bmi-tab:hover:not(.active) {
|
|
background: #e5e7eb;
|
|
color: #374151;
|
|
}
|
|
|
|
.bmi-content {
|
|
min-height: auto;
|
|
transition: all 0.3s ease-in-out;
|
|
}
|
|
|
|
.unit-switch {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-bottom: 20px;
|
|
padding: 12px 16px;
|
|
background: #f8fafc;
|
|
border-radius: 8px;
|
|
border: 1px solid #e5e7eb;
|
|
}
|
|
|
|
.unit-switch-label {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #374151;
|
|
}
|
|
|
|
.toggle-switch {
|
|
position: relative;
|
|
width: 60px;
|
|
height: 28px;
|
|
background: #d1d5db;
|
|
border-radius: 14px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.toggle-switch.active {
|
|
background: #0E0661;
|
|
}
|
|
|
|
.toggle-slider {
|
|
position: absolute;
|
|
top: 2px;
|
|
left: 2px;
|
|
width: 24px;
|
|
height: 24px;
|
|
background: white;
|
|
border-radius: 12px;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.toggle-switch.active .toggle-slider {
|
|
transform: translateX(32px);
|
|
}
|
|
|
|
.unit-labels {
|
|
display: flex;
|
|
gap: 8px;
|
|
font-size: 12px;
|
|
color: #6b7280;
|
|
}
|
|
|
|
.unit-label.active {
|
|
color: #0E0661;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.input-row {
|
|
display: flex;
|
|
gap: 16px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.input-col {
|
|
flex: 1;
|
|
}
|
|
|
|
.input-col.small {
|
|
flex: 0 0 100px;
|
|
}
|
|
|
|
.modern-input {
|
|
width: 100%;
|
|
padding: 12px 16px;
|
|
border: 2px solid #e5e7eb;
|
|
border-radius: 8px;
|
|
font-size: 16px;
|
|
transition: all 0.2s ease-out;
|
|
background: white;
|
|
}
|
|
|
|
.modern-input:focus {
|
|
outline: none;
|
|
border-color: #0E0661;
|
|
box-shadow: 0 0 0 3px rgba(14, 6, 97, 0.1);
|
|
}
|
|
|
|
.modern-input:hover {
|
|
border-color: #9ca3af;
|
|
}
|
|
|
|
.modern-input.error {
|
|
border-color: #ef4444;
|
|
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
|
|
}
|
|
|
|
.modern-input.success {
|
|
border-color: #2EB67D;
|
|
}
|
|
|
|
.input-label {
|
|
display: block;
|
|
margin-bottom: 6px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #374151;
|
|
}
|
|
|
|
.bmi-result-card {
|
|
background: linear-gradient(135deg, #f8fafc 0%, #e5e7eb 100%);
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
border: 2px solid #e5e7eb;
|
|
transition: all 0.3s ease-out;
|
|
}
|
|
|
|
.bmi-result-card.show {
|
|
transform: scale(1.02);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.bmi-result-card.normal {
|
|
background: linear-gradient(135deg, #dcfce7 0%, #2EB67D 100%);
|
|
border-color: #2EB67D;
|
|
}
|
|
|
|
.bmi-result-card.overweight {
|
|
background: linear-gradient(135deg, #fefce8 0%, #1FB8DB 100%);
|
|
border-color: #FFC240;
|
|
}
|
|
|
|
.bmi-result-card.obese {
|
|
background: linear-gradient(135deg, #fee2e2 0%, #FFC240 100%);
|
|
border-color: #ef4444;
|
|
}
|
|
|
|
.bmi-value {
|
|
font-size: 32px;
|
|
font-weight: bold;
|
|
color: #0E0661;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.bmi-category {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #374151;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.bmi-description {
|
|
font-size: 14px;
|
|
color: #6b7280;
|
|
}
|
|
|
|
.manual-bmi-input {
|
|
text-align: center;
|
|
}
|
|
|
|
.manual-bmi-input .modern-input {
|
|
font-size: 24px;
|
|
text-align: center;
|
|
font-weight: 600;
|
|
color: #0E0661;
|
|
}
|
|
|
|
.fade-in {
|
|
animation: fadeIn 0.3s ease-out;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.progress-container {
|
|
position: relative;
|
|
background: #f8fafc;
|
|
border-top: 1px solid #e5e7eb;
|
|
padding: 16px 32px;
|
|
margin-top: auto;
|
|
}
|
|
|
|
.progress-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.progress-text {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #374151;
|
|
}
|
|
|
|
.progress-percentage {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #0E0661;
|
|
}
|
|
|
|
.progress-bar-track {
|
|
width: 100%;
|
|
height: 8px;
|
|
background: #e5e7eb;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
flex: 1;
|
|
}
|
|
|
|
.progress-bar-fill {
|
|
height: 100%;
|
|
background: #2EB67D;
|
|
border-radius: 4px;
|
|
transition: width 0.4s ease-out;
|
|
width: 0%;
|
|
position: relative;
|
|
}
|
|
|
|
.progress-bar-fill::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
|
|
animation: shimmer 2s infinite;
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% { transform: translateX(-100%); }
|
|
100% { transform: translateX(100%); }
|
|
}
|
|
|
|
.inline-unit-toggle {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
padding: 8px 12px;
|
|
background: #f8fafc;
|
|
border-radius: 8px;
|
|
border: 1px solid #e5e7eb;
|
|
min-width: 100px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.inline-unit-label {
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: #374151;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.compact-toggle-switch {
|
|
position: relative;
|
|
width: 50px;
|
|
height: 24px;
|
|
background: #d1d5db;
|
|
border-radius: 12px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.compact-toggle-switch.active {
|
|
background: #0E0661;
|
|
}
|
|
|
|
.compact-toggle-slider {
|
|
position: absolute;
|
|
top: 2px;
|
|
left: 2px;
|
|
width: 20px;
|
|
height: 20px;
|
|
background: white;
|
|
border-radius: 10px;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.compact-toggle-switch.active .compact-toggle-slider {
|
|
transform: translateX(26px);
|
|
}
|
|
|
|
.compact-unit-labels {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
margin-top: 4px;
|
|
font-size: 10px;
|
|
color: #6b7280;
|
|
}
|
|
|
|
.compact-unit-label.active {
|
|
color: #0E0661;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.selected-conditions {
|
|
background: #f8fafc;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
margin: 6px 0;
|
|
}
|
|
|
|
.selected-conditions h4 {
|
|
color: var(--primary-color);
|
|
font-size: 16px;
|
|
margin-bottom: 4px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.condition-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
column-count: 2;
|
|
column-gap: 20px;
|
|
break-inside: avoid;
|
|
}
|
|
|
|
.condition-list li {
|
|
padding: 4px 0;
|
|
color: var(--text-primary);
|
|
break-inside: avoid;
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
.condition-list li:before {
|
|
content: "✓ ";
|
|
color: var(--success-color);
|
|
font-weight: bold;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.print-section {
|
|
margin-top: 12px;
|
|
display: flex;
|
|
gap: 16px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.btn-print {
|
|
background: var(--secondary-color);
|
|
color: var(--brand-white);
|
|
border: 1px solid #0E0661;
|
|
padding: 12px 24px;
|
|
font-size: 16px;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
font-family: 'Avenir LT Std', Arial, sans-serif;
|
|
font-weight: 500;
|
|
flex: 1;
|
|
}
|
|
|
|
.btn-print:hover {
|
|
background: #1a9bc7;
|
|
border-color: #1a9bc7;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba(31, 184, 219, 0.3);
|
|
}
|
|
|
|
@media print {
|
|
@page {
|
|
size: A4;
|
|
margin: 15mm;
|
|
}
|
|
|
|
* {
|
|
-webkit-print-color-adjust: exact !important;
|
|
color-adjust: exact !important;
|
|
}
|
|
|
|
body {
|
|
background: white !important;
|
|
font-size: 10pt !important;
|
|
line-height: 1.3 !important;
|
|
color: black !important;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.calculator-container {
|
|
box-shadow: none !important;
|
|
border: 1px solid #000 !important;
|
|
border-radius: 0 !important;
|
|
max-width: 100% !important;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
height: auto !important;
|
|
min-height: auto !important;
|
|
}
|
|
|
|
.header {
|
|
display: none;
|
|
}
|
|
|
|
.header-title {
|
|
display: none;
|
|
}
|
|
|
|
.header-logo {
|
|
max-height: 25pt !important;
|
|
}
|
|
|
|
.content {
|
|
padding: 10pt !important;
|
|
}
|
|
|
|
.step-content {
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
box-shadow: none !important;
|
|
border: none !important;
|
|
background: white !important;
|
|
min-height: auto !important;
|
|
gap: 8pt !important;
|
|
}
|
|
|
|
.step-content:not(#step-result) {
|
|
display: none !important;
|
|
}
|
|
|
|
.progress-container, .btn, .print-section {
|
|
display: none !important;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 12pt !important;
|
|
margin: 8pt 0 6pt 0 !important;
|
|
color: black !important;
|
|
page-break-after: avoid;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 11pt !important;
|
|
margin: 6pt 0 4pt 0 !important;
|
|
color: black !important;
|
|
page-break-after: avoid;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 10pt !important;
|
|
margin: 4pt 0 2pt 0 !important;
|
|
color: black !important;
|
|
}
|
|
|
|
.result-box, .timeline-box, .info-box, .cohort-info, .selected-conditions {
|
|
background: white !important;
|
|
border: 1px solid #333 !important;
|
|
box-shadow: none !important;
|
|
page-break-inside: avoid;
|
|
margin: 6pt 0 !important;
|
|
padding: 8pt !important;
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
.timeline-item, .condition-list li {
|
|
margin-bottom: 3pt !important;
|
|
font-size: 9pt !important;
|
|
line-height: 1.2 !important;
|
|
}
|
|
|
|
.condition-list li {
|
|
padding: 1pt 0 !important;
|
|
}
|
|
|
|
.print-header {
|
|
display: block !important;
|
|
text-align: center;
|
|
margin: 0 0 10pt 0 !important;
|
|
font-size: 8pt !important;
|
|
color: #666 !important;
|
|
border-bottom: 1px solid #ccc !important;
|
|
padding-bottom: 6pt !important;
|
|
}
|
|
|
|
.print-header p {
|
|
margin: 2pt 0 !important;
|
|
}
|
|
|
|
p {
|
|
margin: 3pt 0 !important;
|
|
font-size: 9pt !important;
|
|
line-height: 1.2 !important;
|
|
}
|
|
|
|
.result-box h3,
|
|
.timeline-box h3,
|
|
.cohort-info p:first-child {
|
|
page-break-after: avoid !important;
|
|
}
|
|
|
|
#step-result .result-box {
|
|
margin-bottom: 4pt !important;
|
|
}
|
|
|
|
#step-result .timeline-box {
|
|
margin-bottom: 4pt !important;
|
|
}
|
|
|
|
#step-result .info-box {
|
|
margin: 3pt 0 !important;
|
|
}
|
|
|
|
#step-result .selected-conditions {
|
|
margin: 3pt 0 !important;
|
|
}
|
|
|
|
#step-result .cohort-info {
|
|
margin-top: 3pt !important;
|
|
margin-bottom: 3pt !important;
|
|
}
|
|
|
|
#step-result {
|
|
height: auto !important;
|
|
min-height: auto !important;
|
|
gap: 8pt !important;
|
|
}
|
|
}
|
|
|
|
.print-header {
|
|
display: none;
|
|
}
|
|
|
|
#step-result {
|
|
height: auto;
|
|
min-height: 550px;
|
|
gap: 6px;
|
|
}
|
|
|
|
.modern-select {
|
|
width: 100%;
|
|
padding: 12px 16px;
|
|
border: 2px solid #e5e7eb;
|
|
border-radius: 8px;
|
|
font-size: 16px;
|
|
background-color: white;
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd' /%3E%3C/svg%3E");
|
|
background-repeat: no-repeat;
|
|
background-position: right 16px center;
|
|
background-size: 1.2em;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease-out;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.modern-select:focus {
|
|
outline: none;
|
|
border-color: #0E0661;
|
|
box-shadow: 0 0 0 3px rgba(14, 6, 97, 0.1);
|
|
}
|
|
|
|
.modern-select:hover:not(:disabled) {
|
|
border-color: #9ca3af;
|
|
}
|
|
|
|
.modern-select:disabled {
|
|
background-color: #f3f4f6;
|
|
color: #9ca3af;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.modern-select option {
|
|
padding: 8px 12px;
|
|
background-color: white;
|
|
color: #231f20;
|
|
}
|
|
|
|
.progress-percentage {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #0E0661;
|
|
}
|
|
|
|
.progress-bar-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.progress-bar-track {
|
|
height: 8px;
|
|
background: #e5e7eb;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
flex: 1;
|
|
}
|
|
|
|
.progress-bar-fill {
|
|
height: 100%;
|
|
background: #2EB67D;
|
|
border-radius: 4px;
|
|
transition: width 0.4s ease-out;
|
|
width: 0%;
|
|
position: relative;
|
|
}
|
|
|
|
.calculator-container::-webkit-scrollbar,
|
|
.step-content::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
.calculator-container::-webkit-scrollbar-track,
|
|
.step-content::-webkit-scrollbar-track {
|
|
background: rgba(248, 250, 252, 0.3);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.calculator-container::-webkit-scrollbar-thumb,
|
|
.step-content::-webkit-scrollbar-thumb {
|
|
background: rgba(14, 6, 97, 0.4);
|
|
border-radius: 4px;
|
|
transition: all 0.2s ease-out;
|
|
}
|
|
|
|
.calculator-container::-webkit-scrollbar-thumb:hover,
|
|
.step-content::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(14, 6, 97, 0.6);
|
|
}
|
|
|
|
.calculator-container::-webkit-scrollbar-thumb:active,
|
|
.step-content::-webkit-scrollbar-thumb:active {
|
|
background: rgba(14, 6, 97, 0.8);
|
|
}
|
|
|
|
.calculator-container,
|
|
.step-content {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba(14, 6, 97, 0.4) rgba(248, 250, 252, 0.3);
|
|
}
|
|
|
|
.progress-bar-track {
|
|
width: 100%;
|
|
}
|
|
|
|
.height-input-row {
|
|
display: flex;
|
|
gap: 16px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.height-input-row .input-col {
|
|
flex: 1;
|
|
}
|
|
|
|
.weight-toggle-row {
|
|
display: flex;
|
|
gap: 16px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.weight-toggle-row .input-col:first-child {
|
|
flex: 1;
|
|
}
|
|
|
|
.weight-toggle-row .input-col:last-child {
|
|
flex: 0 0 120px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="calculator-container" role="main">
|
|
<div class="header">
|
|
<div class="header-content">
|
|
<h1 class="header-title">
|
|
Weight Loss Medicine Eligibility Checker
|
|
</h1>
|
|
</div>
|
|
<div class="header-logo-container">
|
|
<img src="ICS_logo_white.png" alt="Norfolk and Waveney Integrated Care System logo" class="header-logo" role="img">
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
<div id="step-start" class="step-content" role="region" aria-labelledby="start-heading">
|
|
<div class="prose">
|
|
<p>
|
|
The NHS is implementing a phased rollout of tirzepatide (Mounjaro) for weight management
|
|
from June 2025.
|
|
</p>
|
|
<p>
|
|
This checker will help you understand if you might be eligible for these
|
|
treatments for weight loss based on the latest NHS interim guidance,
|
|
not for the treatment of other conditions such as type 2 diabetes.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="important-box" role="note" aria-labelledby="important-heading">
|
|
<h3 class="important-header" id="important-heading">
|
|
<span class="important-label">
|
|
Important
|
|
</span>
|
|
</h3>
|
|
<div class="important-content">
|
|
<p>
|
|
Meeting the eligibility criteria shown here does not guarantee access to these
|
|
medicines. This tool is for informational purposes only and does not
|
|
replace professional medical advice. You will need to discuss your
|
|
options with healthcare professionals who will consider your full
|
|
medical history and circumstances. Access is subject to phased rollout
|
|
and local capacity.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="btn btn-primary btn-large" onclick="startAssessment()" aria-describedby="important-heading">
|
|
Start Check
|
|
</button>
|
|
</div>
|
|
|
|
<div id="step-age" class="step-content hidden">
|
|
<h2>What is your age?</h2>
|
|
|
|
<div class="radio-group">
|
|
<label class="radio-option">
|
|
<input type="radio" name="age" value="18" onchange="handleAgeChange()">
|
|
<span>18 years or older</span>
|
|
</label>
|
|
<label class="radio-option">
|
|
<input type="radio" name="age" value="under18" onchange="handleAgeChange()">
|
|
<span>Under 18 years</span>
|
|
</div>
|
|
|
|
<div class="button-group">
|
|
<button class="btn btn-secondary" onclick="goToPrevStep()">Back</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="step-ethnicity" class="step-content hidden">
|
|
<h2>Ethnicity</h2>
|
|
|
|
<p class="prose">
|
|
NHS guidance uses lower BMI thresholds for certain ethnicity groups.
|
|
Please select your ethnicity:
|
|
</p>
|
|
|
|
<div class="form-group">
|
|
<label class="input-label" for="ethnicity-select">Select your ethnicity:</label>
|
|
<select id="ethnicity-select" name="ethnicity" class="modern-select" onchange="handleEthnicityChange()">
|
|
<option value="" disabled selected>Please select...</option>
|
|
<option value="white_british">White British/European/Other White</option>
|
|
<option value="south_asian">South Asian (Indian, Pakistani, Bangladeshi, Sri Lankan)</option>
|
|
<option value="chinese">Chinese</option>
|
|
<option value="other_asian">Other Asian</option>
|
|
<option value="middle_eastern">Middle Eastern</option>
|
|
<option value="black_african">Black African</option>
|
|
<option value="african_caribbean">African-Caribbean</option>
|
|
<option value="mixed_other">Mixed/Other</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div id="ethnicity-note" class="info-box blue hidden">
|
|
<p>
|
|
<strong>Note:</strong> NHS guidance uses BMI thresholds that are 2.5 kg/m² lower
|
|
for people from South Asian, Chinese, other Asian, Middle Eastern, Black African
|
|
or African-Caribbean ethnic backgrounds.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="button-group">
|
|
<button class="btn btn-secondary" onclick="goToPrevStep()">Back</button>
|
|
<button id="ethnicity-next-btn" class="btn btn-primary" disabled onclick="goToNextStep()">Next</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="step-bmi" class="step-content hidden">
|
|
<h2>Body Mass Index (BMI)</h2>
|
|
|
|
<div class="bmi-card">
|
|
<div class="bmi-tabs">
|
|
<button id="calculate-tab" class="bmi-tab active" onclick="switchBmiMethod('calculate')">
|
|
Calculate my BMI
|
|
</button>
|
|
<button id="manual-tab" class="bmi-tab" onclick="switchBmiMethod('manual')">
|
|
Enter my BMI
|
|
</button>
|
|
</div>
|
|
|
|
<div id="bmi-content" class="bmi-content">
|
|
|
|
<div id="calculator-mode" class="fade-in">
|
|
<div id="metric-inputs">
|
|
<div class="weight-toggle-row">
|
|
<div class="input-col">
|
|
<label class="input-label" for="weight-input">Weight (kg)</label>
|
|
<input
|
|
type="text"
|
|
id="weight-input"
|
|
class="modern-input"
|
|
placeholder="70"
|
|
oninput="handleBmiInput()"
|
|
inputmode="decimal"
|
|
>
|
|
</div>
|
|
<div class="input-col">
|
|
<div class="inline-unit-toggle">
|
|
<div class="compact-toggle-switch" id="unit-toggle" onclick="toggleUnits()">
|
|
<div class="compact-toggle-slider"></div>
|
|
</div>
|
|
<div class="compact-unit-labels">
|
|
<span id="metric-label" class="compact-unit-label active">Metric</span>
|
|
<span id="imperial-label" class="compact-unit-label">Imperial</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-row">
|
|
<div class="input-col">
|
|
<label class="input-label" for="height-input">Height (cm)</label>
|
|
<input
|
|
type="text"
|
|
id="height-input"
|
|
class="modern-input"
|
|
placeholder="175"
|
|
oninput="handleBmiInput()"
|
|
inputmode="decimal"
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="imperial-inputs" style="display: none;">
|
|
<div class="weight-toggle-row">
|
|
<div class="input-col">
|
|
<label class="input-label" for="weight-lbs-input">Weight (lbs)</label>
|
|
<input
|
|
type="text"
|
|
id="weight-lbs-input"
|
|
class="modern-input"
|
|
placeholder="154"
|
|
oninput="handleBmiInput()"
|
|
inputmode="decimal"
|
|
>
|
|
</div>
|
|
<div class="input-col">
|
|
<div class="inline-unit-toggle">
|
|
<div class="compact-toggle-switch" id="unit-toggle-imperial" onclick="toggleUnits()">
|
|
<div class="compact-toggle-slider"></div>
|
|
</div>
|
|
<div class="compact-unit-labels">
|
|
<span class="compact-unit-label">Metric</span>
|
|
<span class="compact-unit-label active">Imperial</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="height-input-row">
|
|
<div class="input-col">
|
|
<label class="input-label" for="height-ft-input">Height - Feet</label>
|
|
<input
|
|
type="text"
|
|
id="height-ft-input"
|
|
class="modern-input"
|
|
placeholder="5"
|
|
oninput="handleBmiInput()"
|
|
inputmode="numeric"
|
|
>
|
|
</div>
|
|
<div class="input-col">
|
|
<label class="input-label" for="height-in-input">Height - Inches</label>
|
|
<input
|
|
type="text"
|
|
id="height-in-input"
|
|
class="modern-input"
|
|
placeholder="9"
|
|
oninput="handleBmiInput()"
|
|
inputmode="decimal"
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="manual-mode" style="display: none;">
|
|
<div class="manual-bmi-input">
|
|
<label class="input-label" for="manual-bmi-input-field">Your BMI</label>
|
|
<input
|
|
type="text"
|
|
id="manual-bmi-input"
|
|
class="modern-input"
|
|
placeholder="25.0"
|
|
oninput="handleManualBmiInput()"
|
|
inputmode="decimal"
|
|
>
|
|
<p style="margin-top: 8px; font-size: 14px; color: #6b7280;">
|
|
Enter your BMI if you already know it
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="bmi-result" class="bmi-result-card" style="display: none;">
|
|
<div class="bmi-value" id="bmi-display">--</div>
|
|
<div class="bmi-category" id="bmi-category">BMI Category</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="button-group">
|
|
<button class="btn btn-secondary" onclick="goToPrevStep()">Back</button>
|
|
<button id="bmi-next-btn" class="btn btn-primary" disabled onclick="handleBmiSubmit()">Next</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="step-comorbidities" class="step-content hidden">
|
|
<h2>Qualifying Health Conditions</h2>
|
|
|
|
<p class="prose">
|
|
Please select any of the following qualifying health conditions that apply to you.
|
|
These are specific conditions defined in NHS guidance:
|
|
</p>
|
|
|
|
<div class="checkbox-group">
|
|
<label class="checkbox-option">
|
|
<input type="checkbox" name="comorbidities" value="ascvd" onchange="handleComorbidityChange()">
|
|
<div>
|
|
<span style="font-weight: 500;">Heart disease</span>
|
|
<p class="condition-description">
|
|
Established heart disease, peripheral vascular disease, or heart failure
|
|
</p>
|
|
</div>
|
|
</label>
|
|
|
|
<label class="checkbox-option">
|
|
<input type="checkbox" name="comorbidities" value="hypertension" onchange="handleComorbidityChange()">
|
|
<div>
|
|
<span style="font-weight: 500;">High blood pressure</span>
|
|
<p class="condition-description">
|
|
Established diagnosis of high blood pressure requiring medication
|
|
</p>
|
|
</div>
|
|
</label>
|
|
|
|
<label class="checkbox-option">
|
|
<input type="checkbox" name="comorbidities" value="dyslipidaemia" onchange="handleComorbidityChange()">
|
|
<div>
|
|
<span style="font-weight: 500;">High cholesterol</span>
|
|
<p class="condition-description">
|
|
Treated with medication (e.g., statins), or abnormal blood results leading to a diagnosis of "dyslipidaemia".
|
|
</p>
|
|
</div>
|
|
</label>
|
|
|
|
<label class="checkbox-option">
|
|
<input type="checkbox" name="comorbidities" value="osa" onchange="handleComorbidityChange()">
|
|
<div>
|
|
<span style="font-weight: 500;">Obstructive sleep apnoea (breathing problems during sleep)</span>
|
|
<p class="condition-description">
|
|
Established diagnosis confirmed by sleep study and requiring treatment
|
|
(e.g., CPAP machine)
|
|
</p>
|
|
</div>
|
|
</label>
|
|
|
|
<label class="checkbox-option">
|
|
<input type="checkbox" name="comorbidities" value="diabetes" onchange="handleComorbidityChange()">
|
|
<div>
|
|
<span style="font-weight: 500;">Type 2 diabetes</span>
|
|
<p class="condition-description">
|
|
Established type 2 diabetes diagnosis
|
|
</p>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="info-box blue">
|
|
<p>
|
|
<strong>Selected conditions:</strong> <span id="condition-count">0</span> of 5
|
|
</p>
|
|
<p style="margin-top: 4px;">
|
|
The number of qualifying conditions affects which treatment cohort you may be eligible for.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="button-group">
|
|
<button class="btn btn-secondary" onclick="goToPrevStep()">Back</button>
|
|
<button class="btn btn-primary" onclick="goToNextStep()">Next</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="step-previousAttempts" class="step-content hidden">
|
|
<h2>Previous Weight Loss Attempts</h2>
|
|
|
|
<p class="prose">
|
|
Have you made serious attempts to lose weight through diet, exercise,
|
|
and/or behavior changes for at least 6 months without achieving or
|
|
maintaining significant weight loss?
|
|
</p>
|
|
|
|
<div class="info-box blue">
|
|
<p>
|
|
<strong>Why do we ask this?</strong> NHS guidance requires that people have tried
|
|
other weight loss methods first before being prescribed weight loss medication.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="radio-group">
|
|
<label class="radio-option">
|
|
<input type="radio" name="previousAttempts" value="true" onchange="handlePreviousAttemptsChange()">
|
|
<span>Yes</span>
|
|
</label>
|
|
|
|
<label class="radio-option">
|
|
<input type="radio" name="previousAttempts" value="false" onchange="handlePreviousAttemptsChange()">
|
|
<span>No</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="button-group">
|
|
<button class="btn btn-secondary" onclick="goToPrevStep()">Back</button>
|
|
<button id="attempts-next-btn" class="btn btn-primary" disabled onclick="goToNextStep()">Next</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="step-result" class="step-content hidden">
|
|
<div class="print-header">
|
|
<p><strong>NHS Norfolk & Waveney ICB Weight Loss Medicine Eligibility Checker</strong></p>
|
|
<p>Generated on: <span id="print-date"></span></p>
|
|
<p>Please take this summary to your GP for discussion</p>
|
|
</div>
|
|
|
|
<div id="result-content">
|
|
</div>
|
|
|
|
<div class="timeline-box">
|
|
<h3>Phased rollout details</h3>
|
|
<div style="font-size: 14px; margin-top: 8px;">
|
|
<div class="timeline-item"><strong>Year 1 (2025/26):</strong> 4 or more qualifying conditions and BMI greater or equal to <span id="timeline-bmi-1">40</span></div>
|
|
<div class="timeline-item"><strong>Year 2 (2026/27):</strong> 4 or more qualifying conditions and BMI between <span id="timeline-bmi-2a">35</span> and <span id="timeline-bmi-2b">39.9</span></div>
|
|
<div class="timeline-item"><strong>Year 3 (2027/28):</strong> 3 or more qualifying conditions and BMI greater or equal to <span id="timeline-bmi-3">40</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="info-box blue">
|
|
<p>
|
|
This tool is based on NHS interim guidance and is for informational purposes only.
|
|
It does not replace professional medical advice. The NHS offers various weight
|
|
management options, and medication is just one possibility. Final decisions depend
|
|
on clinical assessment and local service capacity.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="print-section">
|
|
<button class="btn-print" onclick="printResults()">
|
|
🖨️ Print Results for GP
|
|
</button>
|
|
<button class="btn btn-primary" style="flex: 1; padding: 12px 24px; font-size: 16px; font-weight: 500;" onclick="resetForm()">
|
|
Start Again
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="progress-container">
|
|
<div class="progress-bar-container">
|
|
<div class="progress-bar-track">
|
|
<div class="progress-bar-fill" id="progress-bar-fill"></div>
|
|
</div>
|
|
<span class="progress-percentage" id="progress-percentage">0%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let currentStep = 'start';
|
|
let answers = {
|
|
ethnicity: null,
|
|
bmi: null,
|
|
comorbidities: {
|
|
ascvd: false,
|
|
hypertension: false,
|
|
dyslipidaemia: false,
|
|
osa: false,
|
|
diabetes: false
|
|
},
|
|
previousAttempts: null
|
|
};
|
|
let bmiMethod = 'calculate';
|
|
let unitSystem = 'metric';
|
|
let ageBasedIneligible = false;
|
|
|
|
const steps = ['start', 'age', 'ethnicity', 'bmi', 'comorbidities', 'previousAttempts', 'result'];
|
|
|
|
function getAdjustedBmiThreshold(threshold) {
|
|
const lowerThresholdEthnicities = ['south_asian', 'chinese', 'other_asian', 'middle_eastern', 'black_african', 'african_caribbean'];
|
|
if (answers.ethnicity && lowerThresholdEthnicities.includes(answers.ethnicity)) {
|
|
return threshold - 2.5;
|
|
}
|
|
return threshold;
|
|
}
|
|
|
|
function countQualifyingComorbidities() {
|
|
return Object.values(answers.comorbidities).filter(Boolean).length;
|
|
}
|
|
|
|
function lbsToKg(lbs) {
|
|
return lbs * 0.453592;
|
|
}
|
|
|
|
function feetInchesToCm(feet, inches) {
|
|
const totalInches = (feet * 12) + inches;
|
|
return totalInches * 2.54;
|
|
}
|
|
|
|
function switchBmiMethod(method) {
|
|
bmiMethod = method;
|
|
|
|
const calculateTab = document.getElementById('calculate-tab');
|
|
const manualTab = document.getElementById('manual-tab');
|
|
const calculatorMode = document.getElementById('calculator-mode');
|
|
const manualMode = document.getElementById('manual-mode');
|
|
|
|
if (method === 'calculate') {
|
|
calculateTab.className = 'bmi-tab active';
|
|
manualTab.className = 'bmi-tab';
|
|
calculatorMode.style.display = 'block';
|
|
manualMode.style.display = 'none';
|
|
calculatorMode.className = 'fade-in';
|
|
} else {
|
|
calculateTab.className = 'bmi-tab';
|
|
manualTab.className = 'bmi-tab active';
|
|
calculatorMode.style.display = 'none';
|
|
manualMode.style.display = 'block';
|
|
manualMode.className = 'fade-in';
|
|
}
|
|
|
|
updateBmiDisplay();
|
|
updateUI();
|
|
}
|
|
|
|
function toggleUnits() {
|
|
unitSystem = unitSystem === 'metric' ? 'imperial' : 'metric';
|
|
|
|
const toggle = document.getElementById('unit-toggle');
|
|
const toggleImperial = document.getElementById('unit-toggle-imperial');
|
|
const metricInputs = document.getElementById('metric-inputs');
|
|
const imperialInputs = document.getElementById('imperial-inputs');
|
|
const metricLabelInMetricView = document.querySelector('#metric-inputs #metric-label');
|
|
const imperialLabelInMetricView = document.querySelector('#metric-inputs #imperial-label');
|
|
const metricLabelInImperialView = document.querySelector('#imperial-inputs .compact-unit-labels span:first-child');
|
|
const imperialLabelInImperialView = document.querySelector('#imperial-inputs .compact-unit-labels span:last-child');
|
|
|
|
|
|
if (unitSystem === 'imperial') {
|
|
toggle.classList.add('active');
|
|
if (toggleImperial) toggleImperial.classList.add('active');
|
|
|
|
if(metricLabelInMetricView) metricLabelInMetricView.classList.remove('active');
|
|
if(imperialLabelInMetricView) imperialLabelInMetricView.classList.add('active');
|
|
|
|
metricInputs.style.display = 'none';
|
|
imperialInputs.style.display = 'block';
|
|
|
|
document.getElementById('weight-input').value = '';
|
|
document.getElementById('height-input').value = '';
|
|
} else {
|
|
toggle.classList.remove('active');
|
|
if (toggleImperial) toggleImperial.classList.remove('active');
|
|
|
|
if(metricLabelInImperialView) metricLabelInImperialView.classList.add('active');
|
|
if(imperialLabelInImperialView) imperialLabelInImperialView.classList.remove('active');
|
|
|
|
metricInputs.style.display = 'block';
|
|
imperialInputs.style.display = 'none';
|
|
|
|
document.getElementById('weight-lbs-input').value = '';
|
|
document.getElementById('height-ft-input').value = '';
|
|
document.getElementById('height-in-input').value = '';
|
|
}
|
|
|
|
updateBmiDisplay();
|
|
updateUI();
|
|
}
|
|
|
|
function handleBmiInput() {
|
|
const inputs = document.querySelectorAll('#calculator-mode .modern-input');
|
|
inputs.forEach(input => {
|
|
input.value = input.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');
|
|
|
|
input.classList.remove('error', 'success');
|
|
if (input.value && parseFloat(input.value) > 0) {
|
|
input.classList.add('success');
|
|
} else if (input.value && parseFloat(input.value) <= 0 && input.value !== '') {
|
|
input.classList.add('error');
|
|
}
|
|
});
|
|
|
|
updateBmiDisplay();
|
|
updateUI();
|
|
}
|
|
|
|
function handleManualBmiInput() {
|
|
const input = document.getElementById('manual-bmi-input');
|
|
|
|
input.value = input.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');
|
|
const value = input.value;
|
|
|
|
input.classList.remove('error', 'success');
|
|
if (value && parseFloat(value) > 0) {
|
|
input.classList.add('success');
|
|
answers.bmi = parseFloat(value);
|
|
} else if (value && parseFloat(value) <= 0 && value !== '') {
|
|
input.classList.add('error');
|
|
answers.bmi = null;
|
|
} else {
|
|
answers.bmi = null;
|
|
}
|
|
|
|
updateBmiDisplay();
|
|
updateUI();
|
|
}
|
|
|
|
function calculateBmiFromInputs() {
|
|
let weight, height;
|
|
|
|
if (unitSystem === 'metric') {
|
|
weight = parseFloat(document.getElementById('weight-input').value) || 0;
|
|
height = parseFloat(document.getElementById('height-input').value) || 0;
|
|
} else {
|
|
const weightLbs = parseFloat(document.getElementById('weight-lbs-input').value) || 0;
|
|
const feet = parseFloat(document.getElementById('height-ft-input').value) || 0;
|
|
const inches = parseFloat(document.getElementById('height-in-input').value) || 0;
|
|
|
|
weight = lbsToKg(weightLbs);
|
|
height = feetInchesToCm(feet, inches);
|
|
}
|
|
|
|
if (weight > 0 && height > 0) {
|
|
const heightInMeters = height / 100;
|
|
const bmi = weight / (heightInMeters * heightInMeters);
|
|
return parseFloat(bmi.toFixed(1));
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
function getBmiCategory(bmi) {
|
|
if (bmi < 18.5) return { category: 'Underweight', class: 'underweight' };
|
|
if (bmi < 25) return { category: 'Normal weight', class: 'normal' };
|
|
if (bmi < 30) return { category: 'Overweight', class: 'overweight' };
|
|
if (bmi < 35) return { category: 'Obese', class: 'obese' };
|
|
return { category: 'Severely obese', class: 'obese' };
|
|
}
|
|
|
|
function updateBmiDisplay() {
|
|
const resultCard = document.getElementById('bmi-result');
|
|
const bmiDisplay = document.getElementById('bmi-display');
|
|
const categoryDisplay = document.getElementById('bmi-category');
|
|
|
|
let bmi = null;
|
|
|
|
if (bmiMethod === 'calculate') {
|
|
bmi = calculateBmiFromInputs();
|
|
if (bmi) {
|
|
answers.bmi = bmi;
|
|
const manualBmiInputField = document.getElementById('manual-bmi-input');
|
|
if (manualBmiInputField) manualBmiInputField.value = bmi;
|
|
} else {
|
|
answers.bmi = null;
|
|
}
|
|
} else {
|
|
const manualBmiInputField = document.getElementById('manual-bmi-input');
|
|
if (manualBmiInputField && manualBmiInputField.value) {
|
|
bmi = parseFloat(manualBmiInputField.value);
|
|
answers.bmi = bmi > 0 ? bmi : null;
|
|
} else {
|
|
answers.bmi = null;
|
|
}
|
|
}
|
|
|
|
|
|
if (answers.bmi && answers.bmi > 0) {
|
|
const categoryInfo = getBmiCategory(answers.bmi);
|
|
|
|
bmiDisplay.textContent = answers.bmi;
|
|
categoryDisplay.textContent = categoryInfo.category;
|
|
|
|
resultCard.className = `bmi-result-card show ${categoryInfo.class}`;
|
|
resultCard.style.display = 'block';
|
|
} else {
|
|
bmiDisplay.textContent = '--';
|
|
categoryDisplay.textContent = 'BMI Category';
|
|
resultCard.className = 'bmi-result-card';
|
|
resultCard.style.display = 'none';
|
|
if (bmiMethod === 'calculate') {
|
|
answers.bmi = null;
|
|
}
|
|
}
|
|
updateUI();
|
|
}
|
|
|
|
function showStep(stepName) {
|
|
steps.forEach(step => {
|
|
const element = document.getElementById(`step-${step}`);
|
|
if (element) {
|
|
element.classList.add('hidden');
|
|
}
|
|
});
|
|
|
|
const currentElement = document.getElementById(`step-${stepName}`);
|
|
if (currentElement) {
|
|
currentElement.classList.remove('hidden');
|
|
if (currentElement.scrollTop > 0) {
|
|
currentElement.scrollTop = 0;
|
|
} else if (document.querySelector('.calculator-container').scrollTop > 0) {
|
|
document.querySelector('.calculator-container').scrollTop = 0;
|
|
}
|
|
}
|
|
|
|
currentStep = stepName;
|
|
|
|
if (stepName === 'result') {
|
|
updateResult();
|
|
}
|
|
|
|
updateProgressBar();
|
|
}
|
|
|
|
function startAssessment() {
|
|
showStep('age');
|
|
}
|
|
|
|
function goToNextStep() {
|
|
const currentIndex = steps.indexOf(currentStep);
|
|
if (currentIndex < steps.length - 1) {
|
|
showStep(steps[currentIndex + 1]);
|
|
}
|
|
}
|
|
|
|
function goToPrevStep() {
|
|
const currentIndex = steps.indexOf(currentStep);
|
|
if (currentIndex > 0) {
|
|
showStep(steps[currentIndex - 1]);
|
|
}
|
|
}
|
|
|
|
function resetForm() {
|
|
answers = {
|
|
ethnicity: null,
|
|
bmi: null,
|
|
comorbidities: {
|
|
ascvd: false,
|
|
hypertension: false,
|
|
dyslipidaemia: false,
|
|
osa: false,
|
|
diabetes: false
|
|
},
|
|
previousAttempts: null
|
|
};
|
|
bmiMethod = 'calculate';
|
|
unitSystem = 'metric';
|
|
ageBasedIneligible = false;
|
|
|
|
document.querySelectorAll('input').forEach(input => {
|
|
if (input.type === 'radio' || input.type === 'checkbox') {
|
|
input.checked = false;
|
|
} else {
|
|
input.value = '';
|
|
input.classList.remove('error', 'success');
|
|
}
|
|
});
|
|
|
|
switchBmiMethod('calculate');
|
|
const unitToggle = document.getElementById('unit-toggle');
|
|
const unitToggleImperial = document.getElementById('unit-toggle-imperial');
|
|
if (unitSystem === 'imperial') {
|
|
toggleUnits();
|
|
} else {
|
|
if (unitToggle) unitToggle.classList.remove('active');
|
|
if (unitToggleImperial) unitToggleImperial.classList.remove('active');
|
|
document.getElementById('metric-inputs').style.display = 'block';
|
|
document.getElementById('imperial-inputs').style.display = 'none';
|
|
const metricLabelInMetricView = document.querySelector('#metric-inputs #metric-label');
|
|
const imperialLabelInMetricView = document.querySelector('#metric-inputs #imperial-label');
|
|
if(metricLabelInMetricView) metricLabelInMetricView.classList.add('active');
|
|
if(imperialLabelInMetricView) imperialLabelInMetricView.classList.remove('active');
|
|
}
|
|
|
|
|
|
document.getElementById('bmi-result').style.display = 'none';
|
|
document.getElementById('bmi-display').textContent = '--';
|
|
document.getElementById('bmi-category').textContent = 'BMI Category';
|
|
|
|
|
|
document.getElementById('ethnicity-select').value = "";
|
|
|
|
const conditionCountEl = document.getElementById('condition-count');
|
|
if(conditionCountEl) conditionCountEl.textContent = '0';
|
|
|
|
updateUI();
|
|
showStep('start');
|
|
}
|
|
|
|
function handleAgeChange() {
|
|
const selected = document.querySelector('input[name="age"]:checked');
|
|
if (selected) {
|
|
if (selected.value === 'under18') {
|
|
ageBasedIneligible = true;
|
|
showStep('result');
|
|
} else {
|
|
ageBasedIneligible = false;
|
|
showStep('ethnicity');
|
|
}
|
|
}
|
|
}
|
|
|
|
function handleEthnicityChange() {
|
|
const selectElement = document.getElementById('ethnicity-select');
|
|
const selectedValue = selectElement.value;
|
|
if (selectedValue) {
|
|
answers.ethnicity = selectedValue;
|
|
} else {
|
|
answers.ethnicity = null;
|
|
}
|
|
updateUI();
|
|
}
|
|
|
|
function handleComorbidityChange() {
|
|
const checkboxes = document.querySelectorAll('input[name="comorbidities"]');
|
|
|
|
Object.keys(answers.comorbidities).forEach(key => {
|
|
answers.comorbidities[key] = false;
|
|
});
|
|
|
|
checkboxes.forEach((checkbox) => {
|
|
if(checkbox.checked) {
|
|
answers.comorbidities[checkbox.value] = true;
|
|
}
|
|
});
|
|
|
|
updateUI();
|
|
}
|
|
|
|
function handlePreviousAttemptsChange() {
|
|
const selected = document.querySelector('input[name="previousAttempts"]:checked');
|
|
|
|
if (selected) {
|
|
answers.previousAttempts = selected.value === 'true';
|
|
updateUI();
|
|
}
|
|
}
|
|
|
|
function handleBmiSubmit() {
|
|
if (answers.bmi && answers.bmi > 0) {
|
|
goToNextStep();
|
|
} else {
|
|
alert('Please enter or calculate a valid BMI value before continuing.');
|
|
}
|
|
}
|
|
|
|
function updateUI() {
|
|
const ethnicityNote = document.getElementById('ethnicity-note');
|
|
const ethnicityNextBtn = document.getElementById('ethnicity-next-btn');
|
|
|
|
if (ethnicityNote && ethnicityNextBtn) {
|
|
const lowerThresholdEthnicities = ['south_asian', 'chinese', 'other_asian', 'middle_eastern', 'black_african', 'african_caribbean'];
|
|
|
|
if (answers.ethnicity && lowerThresholdEthnicities.includes(answers.ethnicity)) {
|
|
ethnicityNote.classList.remove('hidden');
|
|
} else {
|
|
ethnicityNote.classList.add('hidden');
|
|
}
|
|
|
|
ethnicityNextBtn.disabled = answers.ethnicity === null;
|
|
}
|
|
|
|
const bmiNextBtn = document.getElementById('bmi-next-btn');
|
|
if (bmiNextBtn) {
|
|
bmiNextBtn.disabled = !(answers.bmi && answers.bmi > 0);
|
|
}
|
|
|
|
const conditionCountEl = document.getElementById('condition-count');
|
|
if (conditionCountEl) {
|
|
const newCount = countQualifyingComorbidities();
|
|
if (conditionCountEl.textContent !== newCount.toString()) {
|
|
conditionCountEl.style.transform = 'scale(1.2)';
|
|
setTimeout(() => {
|
|
conditionCountEl.textContent = newCount;
|
|
conditionCountEl.style.transform = 'scale(1)';
|
|
}, 100);
|
|
}
|
|
}
|
|
|
|
const attemptsNextBtn = document.getElementById('attempts-next-btn');
|
|
if (attemptsNextBtn) {
|
|
attemptsNextBtn.disabled = answers.previousAttempts === null;
|
|
}
|
|
|
|
updateTimelineBMI();
|
|
|
|
if (currentStep === 'result') {
|
|
updateResult();
|
|
}
|
|
}
|
|
|
|
function updateTimelineBMI() {
|
|
const timelineBmi1 = document.getElementById('timeline-bmi-1');
|
|
const timelineBmi2a = document.getElementById('timeline-bmi-2a');
|
|
const timelineBmi2b = document.getElementById('timeline-bmi-2b');
|
|
const timelineBmi3 = document.getElementById('timeline-bmi-3');
|
|
|
|
if(timelineBmi1) timelineBmi1.textContent = getAdjustedBmiThreshold(40);
|
|
if(timelineBmi2a) timelineBmi2a.textContent = getAdjustedBmiThreshold(35);
|
|
if(timelineBmi2b) timelineBmi2b.textContent = getAdjustedBmiThreshold(39.9);
|
|
if(timelineBmi3) timelineBmi3.textContent = getAdjustedBmiThreshold(40);
|
|
}
|
|
|
|
function updateResult() {
|
|
const resultContent = document.getElementById('result-content');
|
|
const printDate = document.getElementById('print-date');
|
|
|
|
if (printDate) {
|
|
printDate.textContent = new Date().toLocaleDateString('en-GB');
|
|
}
|
|
|
|
if (ageBasedIneligible) {
|
|
let html = '<div class="result-box warning">';
|
|
html += '<h3>You are not eligible for tirzepatide (Mounjaro)</h3>';
|
|
html += '<div style="margin-top: 16px;">';
|
|
html += '<p><strong>Age:</strong> You must be over the age of 18 to be eligible for NHS weight loss medications.</p>';
|
|
html += '<p style="margin-top: 12px;">Please speak with your GP or healthcare provider about appropriate weight management support for your age group.</p>';
|
|
html += '</div>';
|
|
html += '</div>';
|
|
resultContent.innerHTML = html;
|
|
document.querySelector('.timeline-box').style.display = 'none';
|
|
return;
|
|
}
|
|
|
|
const eligibilityResult = determineEligibilityAndCohort();
|
|
const comorbidityCount = countQualifyingComorbidities();
|
|
const selectedConditions = getSelectedConditions();
|
|
|
|
const timelineBox = document.querySelector('.timeline-box');
|
|
if (timelineBox) {
|
|
if (eligibilityResult.eligible && eligibilityResult.cohort === "1") {
|
|
timelineBox.style.display = 'none';
|
|
} else {
|
|
timelineBox.style.display = 'block';
|
|
}
|
|
}
|
|
|
|
let resultClass = 'warning';
|
|
if (eligibilityResult.eligible) {
|
|
if (eligibilityResult.cohort === '1') {
|
|
resultClass = 'success';
|
|
} else if (eligibilityResult.cohort === '2' || eligibilityResult.cohort === '3') {
|
|
resultClass = 'orange';
|
|
}
|
|
}
|
|
|
|
|
|
let html = '<div class="result-box ' + resultClass + '">';
|
|
html += '<h3>';
|
|
if (eligibilityResult.eligible) {
|
|
html += 'You may be eligible for tirzepatide';
|
|
if (eligibilityResult.cohort !== '1') {
|
|
html += ' in the future';
|
|
};
|
|
} else {
|
|
html += 'You may not currently be eligible for tirzepatide (Mounjaro)';
|
|
}
|
|
html += '</h3>';
|
|
html += '<div style="margin-top: 16px;">';
|
|
|
|
|
|
html += '<p><strong>BMI:</strong> ' + (answers.bmi || 'Not provided');
|
|
if (answers.ethnicity && ['south_asian', 'chinese', 'other_asian', 'middle_eastern', 'black_african', 'african_caribbean'].includes(answers.ethnicity)) {
|
|
html += ' (adjusted thresholds apply for your ethnic background).';
|
|
} else {
|
|
html += '.';
|
|
}
|
|
html += '</p>';
|
|
|
|
html += '<p><strong>Qualifying conditions:</strong> You have ' + comorbidityCount + ' out of 5 qualifying conditions.</p>';
|
|
|
|
if (answers.previousAttempts === false) {
|
|
html += '<p><strong>Previous Weight Loss Attempts:</strong> You indicated you have not made serious attempts to lose weight through lifestyle changes. NHS guidelines require this before prescribing weight loss medication.</p>';
|
|
} else if (answers.previousAttempts === true) {
|
|
html += '<p><strong>Previous Weight Loss Attempts:</strong> You indicated you have made serious attempts to lose weight through lifestyle changes.</p>';
|
|
}
|
|
|
|
|
|
if (selectedConditions.length > 0) {
|
|
html += '<div class="selected-conditions">';
|
|
html += '<h4>Your Selected Qualifying Conditions:</h4>';
|
|
html += '<ul class="condition-list">';
|
|
selectedConditions.forEach(condition => {
|
|
html += '<li>' + condition + '</li>';
|
|
});
|
|
html += '</ul>';
|
|
html += '</div>';
|
|
}
|
|
|
|
|
|
if (eligibilityResult.eligible) {
|
|
html += '<div class="cohort-info">';
|
|
html += '<p><strong>Cohort ' + eligibilityResult.cohort + ' - ' + eligibilityResult.year + '</strong></p>';
|
|
html += '<p style="margin-top: 8px;">';
|
|
html += 'You meet the criteria for ' + eligibilityResult.year + ' with ' + comorbidityCount + ' qualifying ';
|
|
html += 'conditions and a BMI of ' + answers.bmi + '.';
|
|
html += '</p>';
|
|
html += '<p style="margin-top: 8px;">';
|
|
|
|
if (eligibilityResult.cohort === '1') {
|
|
html += '<strong>Next steps:</strong> Speak with your GP about your weight management ';
|
|
html += 'options. Access to tirzepatide is subject to the phased rollout ';
|
|
html += 'and local service capacity.';
|
|
} else if (eligibilityResult.cohort === '2') {
|
|
html += '<strong>Next steps:</strong> You may be eligible from June 2026. Access will be subject to the phased rollout ';
|
|
html += 'and local service capacity. Discuss with your GP closer to this time if appropriate.';
|
|
} else if (eligibilityResult.cohort === '3') {
|
|
html += '<strong>Next steps:</strong> You may be eligible from April 2027. Access will be subject to the phased rollout ';
|
|
html += 'and local service capacity. Discuss with your GP closer to this time if appropriate.';
|
|
}
|
|
|
|
html += '</p>';
|
|
html += '</div>';
|
|
} else if (!eligibilityResult.eligible && answers.previousAttempts === true) {
|
|
html += '<div class="cohort-info" style="border-color: #FFC240;">';
|
|
html += '<p style="font-weight: 500;">Potential future eligibility (based on timeline):</p>';
|
|
let potentialShown = false;
|
|
|
|
if (comorbidityCount >= 4 && answers.bmi >= getAdjustedBmiThreshold(35) && answers.bmi < getAdjustedBmiThreshold(40)) {
|
|
html += '<p style="margin-top: 4px;">• With ' + comorbidityCount + ' conditions and BMI ' + answers.bmi + ', you might meet criteria for Year 2 (2026/27).</p>';
|
|
potentialShown = true;
|
|
}
|
|
if (comorbidityCount >= 3 && answers.bmi >= getAdjustedBmiThreshold(40)) {
|
|
html += '<p style="margin-top: 4px;">• With ' + comorbidityCount + ' conditions and BMI ' + answers.bmi + ', you might meet criteria for Year 3 (2027/28) if not Year 1.</p>';
|
|
potentialShown = true;
|
|
}
|
|
if (!potentialShown) {
|
|
html += '<p style="margin-top: 4px;">Based on your current BMI and number of conditions, you do not appear to meet the criteria for the phased rollout timeline. Please discuss other weight management options with your GP.</p>';
|
|
}
|
|
html += '</div>';
|
|
}
|
|
|
|
|
|
html += '</div>';
|
|
html += '</div>';
|
|
|
|
resultContent.innerHTML = html;
|
|
}
|
|
|
|
|
|
function determineEligibilityAndCohort() {
|
|
const hasMadePreviousAttempts = answers.previousAttempts;
|
|
const comorbidityCount = countQualifyingComorbidities();
|
|
const bmi = answers.bmi;
|
|
|
|
if (!bmi || bmi <=0) {
|
|
return { eligible: false, cohort: null, year: null };
|
|
}
|
|
|
|
if (hasMadePreviousAttempts === false) {
|
|
return { eligible: false, cohort: null, year: null, reason: "previousAttempts" };
|
|
}
|
|
|
|
const year1BmiThreshold = getAdjustedBmiThreshold(40);
|
|
if (comorbidityCount >= 4 && bmi >= year1BmiThreshold && hasMadePreviousAttempts) {
|
|
return { eligible: true, cohort: "1", year: "Year 1 (2025/26)"};
|
|
}
|
|
|
|
const year2LowerBmi = getAdjustedBmiThreshold(35);
|
|
const year2UpperBmi = getAdjustedBmiThreshold(39.9);
|
|
if (comorbidityCount >= 4 && bmi >= year2LowerBmi && bmi <= year2UpperBmi && hasMadePreviousAttempts) {
|
|
return { eligible: true, cohort: "2", year: "Year 2 (2026/27)"};
|
|
}
|
|
|
|
const year3BmiThreshold = getAdjustedBmiThreshold(40);
|
|
if (comorbidityCount === 3 && bmi >= year3BmiThreshold && hasMadePreviousAttempts) {
|
|
return { eligible: true, cohort: "3", year: "Year 3 (2027/28)"};
|
|
}
|
|
|
|
return { eligible: false, cohort: null, year: null };
|
|
}
|
|
|
|
|
|
function updateProgressBar() {
|
|
const currentStepIndex = steps.indexOf(currentStep);
|
|
const totalProgressSteps = 5;
|
|
|
|
let progressPercentage = 0;
|
|
|
|
if (currentStep === 'start') {
|
|
progressPercentage = 0;
|
|
} else if (currentStep === 'result' || ageBasedIneligible) {
|
|
progressPercentage = 100;
|
|
} else {
|
|
const progressOrder = ['age', 'ethnicity', 'bmi', 'comorbidities', 'previousAttempts'];
|
|
const progressStepIndex = progressOrder.indexOf(currentStep);
|
|
if (progressStepIndex !== -1) {
|
|
progressPercentage = ((progressStepIndex +1) / totalProgressSteps) * 100;
|
|
}
|
|
}
|
|
|
|
const progressBarFill = document.getElementById('progress-bar-fill');
|
|
const progressPercentageElement = document.getElementById('progress-percentage');
|
|
|
|
if (progressBarFill) {
|
|
progressBarFill.style.width = `${Math.max(0, Math.min(100, progressPercentage))}%`;
|
|
}
|
|
if (progressPercentageElement) {
|
|
progressPercentageElement.textContent = `${Math.round(Math.max(0, Math.min(100, progressPercentage)))}%`;
|
|
}
|
|
}
|
|
|
|
function getSelectedConditions() {
|
|
const conditionMap = {
|
|
'ascvd': 'Heart disease',
|
|
'hypertension': 'High blood pressure',
|
|
'dyslipidaemia': 'High cholesterol',
|
|
'osa': 'Obstructive sleep apnoea',
|
|
'diabetes': 'Type 2 diabetes'
|
|
};
|
|
|
|
const selectedConditions = [];
|
|
for (const [key, value] of Object.entries(answers.comorbidities)) {
|
|
if (value) {
|
|
selectedConditions.push(conditionMap[key]);
|
|
}
|
|
}
|
|
return selectedConditions;
|
|
}
|
|
|
|
function printResults() {
|
|
window.print();
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
updateUI();
|
|
updateProgressBar();
|
|
|
|
switchBmiMethod('calculate');
|
|
if (unitSystem === 'imperial') {
|
|
toggleUnits();
|
|
} else {
|
|
const unitToggle = document.getElementById('unit-toggle');
|
|
if (unitToggle) unitToggle.classList.remove('active');
|
|
document.getElementById('metric-inputs').style.display = 'block';
|
|
document.getElementById('imperial-inputs').style.display = 'none';
|
|
const metricLabelInMetricView = document.querySelector('#metric-inputs #metric-label');
|
|
const imperialLabelInMetricView = document.querySelector('#metric-inputs #imperial-label');
|
|
if(metricLabelInMetricView) metricLabelInMetricView.classList.add('active');
|
|
if(imperialLabelInMetricView) imperialLabelInMetricView.classList.remove('active');
|
|
}
|
|
updateBmiDisplay();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |