powerhouse-rp-toolkit
Version:
Renaissance Periodization Training Toolkit for PowerHouseATX
1,603 lines (1,548 loc) • 170 kB
HTML
<!doctype html>
<html lang="en">
<head>
<script type="importmap">
{
"imports": {
"4Sv7K": "./dataVisualization.417d2cdc.js",
"4ujR8": "./sw.js"
}
}
</script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>PowerHouseATX Workout Calculator - Advanced Intelligence</title>
<link rel="manifest" href="manifest.webmanifest" />
<meta name="theme-color" content="#667eea" />
<meta
name="description"
content="Advanced AI-powered training intelligence system for optimal workout programming and progression"
/>
<link rel="icon" href="favicon.78009137.ico" />
<link rel="stylesheet" href="ProgramDesignWorkspace.64e9132c.css" />
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
color: #fff;
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
min-height: 100vh;
padding: 20px;
font-family:
-apple-system,
BlinkMacSystemFont,
Segoe UI,
Roboto,
Oxygen,
Ubuntu,
Cantarell,
sans-serif;
line-height: 1.6;
position: relative;
overflow-x: hidden;
}
body:before {
content: "";
pointer-events: none;
z-index: 1;
background-image:
radial-gradient(circle at 20% 80%, #ff00001a 0%, #0000 50%),
radial-gradient(circle at 80% 20%, #ff00000d 0%, #0000 50%),
radial-gradient(circle at 40% 40%, #ff000008 0%, #0000 50%);
position: fixed;
inset: 0;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #0a0a0a;
}
::-webkit-scrollbar-thumb {
background: red;
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: #c00;
}
.container {
z-index: 2;
width: 100%;
max-width: 1400px;
margin: 0 auto;
position: relative;
}
.header-section {
text-align: center;
backdrop-filter: blur(10px);
background: #1a1a1af2;
border: 1px solid #ff00004d;
border-radius: 16px;
margin-bottom: 40px;
padding: 35px;
position: relative;
box-shadow:
0 8px 32px #0006,
inset 0 1px #ffffff1a;
}
h1 {
-webkit-text-fill-color: transparent;
text-transform: uppercase;
letter-spacing: -1.5px;
text-shadow: 0 0 40px #ff000080;
background: linear-gradient(135deg, red 0%, #ff6b6b 100%) text;
margin-bottom: 0.25rem;
font-size: 3.5rem;
font-weight: 900;
line-height: 1;
}
.page-title {
color: #e0e0e0;
text-transform: uppercase;
letter-spacing: 0.5px;
text-shadow: 0 0 10px #ffffff1a;
margin-bottom: 1rem;
font-size: 2.2rem;
font-weight: 700;
}
.subtitle {
color: #999;
letter-spacing: 1px;
font-size: 1.1rem;
font-weight: 300;
}
.rp-status {
background: #0000004d;
border: 1px solid #f003;
border-radius: 12px;
margin: 20px 0;
padding: 20px;
}
.status-grid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin-top: 15px;
display: grid;
}
.status-item {
text-align: center;
background: #ffffff0d;
border-radius: 8px;
padding: 10px;
}
.status-value {
color: red;
font-size: 1.8rem;
font-weight: 700;
}
.status-label {
color: #ccc;
text-transform: uppercase;
letter-spacing: 0.5px;
font-size: 0.9rem;
}
.chart-section {
backdrop-filter: blur(10px);
background: #1a1a1af2;
border: 1px solid #ff00004d;
border-radius: 16px;
margin: 20px 0;
padding: 35px;
box-shadow:
0 8px 32px #0006,
inset 0 1px #ffffff1a;
}
.chart-header {
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 10px;
margin-bottom: 20px;
display: flex;
}
.chart-controls {
flex-wrap: wrap;
gap: 10px;
display: flex;
}
.chart-controls button {
margin: 0;
padding: 8px 16px;
font-size: 0.9rem;
}
#weeklyChart {
max-height: 400px;
}
.volume-status {
margin-top: 15px;
}
.volume-analysis {
flex-wrap: wrap;
align-items: center;
gap: 15px;
display: flex;
}
.status-indicator {
text-transform: uppercase;
letter-spacing: 0.5px;
border-radius: 20px;
padding: 8px 16px;
font-size: 0.9rem;
font-weight: 700;
}
.status-indicator.under-minimum {
color: #fff;
background: #f44;
}
.status-indicator.maintenance {
color: #fff;
background: #fa0;
}
.status-indicator.optimal {
color: #000;
background: #4f4;
}
.status-indicator.high {
color: #000;
background: #ff4;
}
.status-indicator.maximum {
color: #fff;
background: #f44;
}
.landmarks-display {
flex-wrap: wrap;
gap: 15px;
display: flex;
}
.landmarks-display span {
background: #ffffff1a;
border-radius: 4px;
padding: 4px 8px;
font-size: 0.8rem;
}
.section-banner {
text-align: center;
cursor: pointer;
user-select: none;
background: linear-gradient(135deg, #f003 0%, #ff00001a 100%);
border: 1px solid #ff00004d;
border-radius: 12px;
margin: 40px 0 20px;
padding: 20px;
transition: all 0.3s;
}
.section-banner:hover {
background: linear-gradient(135deg, #ff00004d 0%, #ff000026 100%);
}
.section-banner h3 {
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
justify-content: center;
align-items: center;
gap: 10px;
margin-bottom: 8px;
font-size: 1.8rem;
font-weight: 700;
display: flex;
}
.expand-icon {
font-size: 1.2rem;
transition: transform 0.3s;
}
.section-banner.expanded .expand-icon {
transform: rotate(180deg);
}
.section-content {
max-height: 0;
transition: max-height 0.4s;
overflow: hidden;
}
.section-content.expanded {
max-height: 3000px;
}
.calculator-grid {
grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
gap: 2rem;
margin-top: 2rem;
display: grid;
}
.calculator {
backdrop-filter: blur(10px);
background: #1a1a1af2;
border: 1px solid #ff00004d;
border-radius: 16px;
margin: 20px 0;
padding: 35px;
transition: all 0.3s;
box-shadow:
0 8px 32px #0006,
inset 0 1px #ffffff1a;
}
.calculator:hover {
border-color: #ff000080;
transform: translateY(-2px);
box-shadow:
0 12px 40px #00000080,
0 0 20px #ff00001a,
inset 0 1px #ffffff1a;
}
.calculator h2 {
color: #fff;
border-bottom: 3px solid red;
margin-bottom: 1.5rem;
padding-bottom: 0.75rem;
font-size: 2rem;
font-weight: 700;
position: relative;
}
.calculator h2:after {
content: "";
background: linear-gradient(90deg, red 0%, #0000 100%);
width: 60px;
height: 3px;
position: absolute;
bottom: -3px;
left: 0;
}
.input-group {
margin-bottom: 1.5rem;
}
label {
color: #fff;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 10px;
font-size: 0.95rem;
font-weight: 600;
display: block;
}
input[type="number"],
select {
color: #fff;
background: #00000080;
border: 2px solid #ffffff1a;
border-radius: 10px;
width: 100%;
padding: 14px 16px;
font-size: 1rem;
font-weight: 500;
transition: all 0.3s;
}
input[type="number"]:focus,
select:focus {
background: #000000b3;
border-color: red;
outline: none;
box-shadow:
0 0 0 4px #ff00001a,
inset 0 0 0 1px #f003;
}
input.rir-good {
border-color: #4caf50;
box-shadow: 0 0 0 2px #4caf5033;
}
input.rir-warning {
border-color: #ff9800;
box-shadow: 0 0 0 2px #ff980033;
}
input.rir-danger {
border-color: #f44336;
box-shadow: 0 0 0 2px #f4433633;
}
.radio-group {
flex-wrap: wrap;
gap: 20px;
margin-top: 10px;
display: flex;
}
.radio-group label {
text-transform: none;
letter-spacing: normal;
cursor: pointer;
align-items: center;
gap: 8px;
margin: 0;
font-size: 1rem;
font-weight: 500;
display: flex;
}
input[type="radio"] {
accent-color: red;
width: auto;
margin: 0;
transform: scale(1.2);
}
input[type="checkbox"] {
accent-color: red;
margin-right: 0.5rem;
transform: scale(1.5);
}
.helper-text {
color: #bbb;
margin-top: 5px;
font-size: 0.875rem;
font-style: italic;
line-height: 1.4;
}
button {
color: #fff;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 1px;
background: linear-gradient(135deg, red 0%, #c00 100%);
border: none;
border-radius: 10px;
justify-content: center;
align-items: center;
gap: 10px;
width: 100%;
margin-top: 25px;
padding: 16px 32px;
font-size: 1.1rem;
font-weight: 700;
transition: all 0.3s;
display: inline-flex;
position: relative;
overflow: hidden;
box-shadow: 0 4px 15px #ff00004d;
}
button:hover {
background: linear-gradient(135deg, #ff1a1a 0%, #e60000 100%);
transform: translateY(-3px);
box-shadow: 0 8px 25px #f006;
}
button:active {
transform: translateY(-1px);
box-shadow: 0 4px 15px #ff00004d;
}
button.small {
width: auto;
margin: 5px;
padding: 8px 16px;
font-size: 0.9rem;
}
.result {
background: linear-gradient(135deg, #0009 0%, #000c 100%);
border: 2px solid #ffffff1a;
border-radius: 14px;
align-items: center;
min-height: 60px;
margin-top: 1.5rem;
padding: 25px;
font-weight: 600;
transition: all 0.4s;
display: flex;
position: relative;
overflow: hidden;
}
.result.success {
color: #a5d6a7;
background: linear-gradient(135deg, #2e7d3226 0%, #2e7d3214 100%);
border-color: #2e7d32b3;
}
.result.warning {
color: #ffcc80;
background: linear-gradient(135deg, #f57c0026 0%, #f57c0014 100%);
border-color: #f57c00b3;
}
.result.danger {
color: #ef9a9a;
background: linear-gradient(135deg, #d32f2f26 0%, #d32f2f14 100%);
border-color: #d32f2fb3;
}
.feedback-results {
width: 100%;
}
.main-recommendation {
border-bottom: 1px solid #ffffff1a;
margin-bottom: 20px;
padding-bottom: 15px;
}
.main-recommendation h4 {
color: red;
margin-bottom: 10px;
font-size: 1.2rem;
}
.advice {
margin-bottom: 8px;
font-size: 1.1rem;
font-weight: 600;
}
.sets-info {
color: #ccc;
font-size: 1rem;
}
.algorithm-details {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin-top: 15px;
display: grid;
}
.algorithm-details > div {
background: #ffffff0d;
border-radius: 8px;
padding: 10px;
font-size: 0.9rem;
}
.stimulus-add_sets {
color: #4caf50;
}
.stimulus-maintain {
color: #ffcc80;
}
.stimulus-reduce_sets {
color: #ff9800;
}
.rir-feedback {
border-radius: 8px;
margin-top: 15px;
padding: 12px;
font-size: 0.95rem;
}
.rir-feedback.normal {
background: #4caf5033;
}
.rir-feedback.medium {
background: #ff980033;
}
.rir-feedback.high {
background: #f4433633;
}
.deload-warning {
background: #ff980033;
border: 1px solid #ff980080;
border-radius: 8px;
margin-top: 15px;
padding: 15px;
font-weight: 600;
}
.advanced-volume-controls {
border-top: 1px solid #ffffff1a;
padding-top: 20px;
}
.landmark-grid {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px;
margin-bottom: 20px;
display: grid;
}
.autoregulation-section {
border-top: 1px solid #ffffff1a;
margin-top: 20px;
padding-top: 20px;
}
.autoregulation-section h4 {
color: red;
margin-bottom: 15px;
font-size: 1.2rem;
}
.rir-tooltip {
pointer-events: none;
font-size: 12px;
font-weight: 600;
}
.rir-schedule-display,
.load-feedback-section,
.load-progression-section {
border-top: 1px solid #ffffff1a;
margin-top: 20px;
padding-top: 15px;
}
.rir-schedule-display h4,
.load-feedback-section h4,
.load-progression-section h4 {
color: red;
margin-bottom: 12px;
font-size: 1.1rem;
font-weight: 600;
}
#rirScheduleContent {
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 10px;
margin: 15px 0;
display: grid;
}
.rir-week-target {
text-align: center;
background: #ff00001a;
border: 1px solid #ff00004d;
border-radius: 8px;
padding: 12px;
font-weight: 600;
}
.rir-week-target.current {
background: #f003;
border-color: #ff000080;
box-shadow: 0 0 10px #ff00004d;
}
.rir-week-target .week-label {
color: #ccc;
margin-bottom: 4px;
font-size: 0.9rem;
}
.rir-week-target .rir-value {
color: red;
font-size: 1.4rem;
font-weight: 700;
}
#loadAdjustmentContent,
#loadProgressionContent {
font-size: 0.95rem;
}
.load-adjustment-item {
background: #ffffff0d;
border-left: 3px solid red;
border-radius: 6px;
margin: 8px 0;
padding: 10px;
}
.load-adjustment-item .muscle-name {
color: red;
margin-bottom: 4px;
font-weight: 600;
}
.load-adjustment-item .adjustment-details {
color: #ccc;
font-size: 0.9rem;
}
.progression-recommendation {
background: #4caf501a;
border: 1px solid #4caf504d;
border-radius: 8px;
margin: 10px 0;
padding: 15px;
}
.progression-recommendation.maintain {
background: #ffc1071a;
border-color: #ffc1074d;
}
.progression-recommendation.reduce {
background: #f443361a;
border-color: #f443364d;
}
.progression-recommendation .action {
margin-bottom: 8px;
font-size: 1.1rem;
font-weight: 600;
}
.progression-recommendation .reasoning {
color: #ccc;
font-size: 0.9rem;
line-height: 1.4;
}
.rir-schedule-info {
background: #ffffff08;
border: 1px solid #ffffff1a;
border-radius: 8px;
margin-top: 20px;
padding: 15px;
}
.rir-schedule-info .helper-text {
font-size: 0.9rem;
line-height: 1.5;
}
.rir-schedule-display button,
.load-feedback-section button,
.load-progression-section button {
background: linear-gradient(135deg, red 0%, #c00 100%);
width: auto;
min-width: 180px;
margin: 5px 0;
}
.section-banner.advanced {
background: linear-gradient(135deg, #007bff33 0%, #007bff1a 100%);
border-color: #007bff4d;
}
.section-content#advanced-content {
max-height: 0;
transition: max-height 0.4s;
display: none;
overflow: hidden;
}
.section-content#advanced-content.expanded {
max-height: 3000px;
display: block;
}
.live-session-controls {
margin-bottom: 20px;
}
.session-controls {
flex-wrap: wrap;
gap: 10px;
margin-top: 15px;
display: flex;
}
.session-controls button {
flex: 1;
min-width: 140px;
margin: 0;
}
.live-monitor {
color: #e2e8f0;
background: #1a202c;
border: 1px solid #63b3ed4d;
border-radius: 15px;
margin: 20px 0;
padding: 25px;
}
.live-monitor h4 {
color: #63b3ed;
margin-bottom: 20px;
font-size: 1.1rem;
}
.monitor-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 15px;
display: grid;
}
.monitor-stat {
text-align: center;
background: #ffffff0d;
border-radius: 10px;
padding: 15px;
}
.monitor-stat .value {
color: #63b3ed;
font-size: 2em;
font-weight: 700;
display: block;
}
.monitor-stat .label {
opacity: 0.8;
margin-top: 5px;
font-size: 0.9em;
}
.intelligence-panel {
color: #fff;
background: linear-gradient(135deg, #1a365d, #2c5282);
border-radius: 15px;
margin: 20px 0;
padding: 25px;
}
.intelligence-panel h4 {
color: #63b3ed;
margin-bottom: 20px;
}
.intelligence-controls,
.analytics-controls {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
margin: 15px 0;
display: grid;
}
.intelligence-controls button,
.analytics-controls button {
margin: 0;
padding: 12px 16px;
font-size: 0.95rem;
}
.system-status {
background: #ffffff05;
border: 1px solid #ffffff1a;
border-radius: 10px;
margin-top: 20px;
padding: 15px;
}
.system-status h4 {
color: red;
margin-bottom: 15px;
}
.system-status .status-grid {
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 10px;
display: grid;
}
.system-status .status-indicator {
text-align: center;
background: #ffffff08;
border-radius: 8px;
padding: 10px;
}
.system-status .status-indicator span:first-child {
font-size: 1.5em;
display: block;
}
.system-status .status-indicator span:last-child {
color: #ccc;
margin-top: 5px;
font-size: 0.8em;
display: block;
}
.recommendation {
background: #ffffff1a;
border-left: 4px solid #63b3ed;
border-radius: 8px;
margin: 10px 0;
padding: 15px;
}
.recommendation.high-priority {
background: #f565651a;
border-left-color: #f56565;
}
.recommendation.medium-priority {
background: #ed89361a;
border-left-color: #ed8936;
}
.analytics-requirements {
background: #ffc1071a;
border: 1px solid #ffc1074d;
border-radius: 8px;
margin: 15px 0;
padding: 15px;
}
.program-config {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin: 20px 0;
display: grid;
}
.program-config .input-group {
margin: 0;
}
.result-panel {
border: 1px solid #ffffff1a;
border-radius: 10px;
margin-top: 15px;
padding: 20px;
font-size: 0.95rem;
line-height: 1.5;
}
.result-panel.success {
background: #4caf501a;
border-color: #4caf504d;
}
.result-panel.warning {
background: #ff98001a;
border-color: #ff98004d;
}
.result-panel.error {
background: #f443361a;
border-color: #f443364d;
}
.loading {
border: 2px solid #f3f3f3;
border-top-color: #5a67d8;
border-radius: 50%;
width: 20px;
height: 20px;
animation: 1s ease-in-out infinite spin;
display: inline-block;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.performance-controls {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 10px;
margin: 15px 0;
display: grid;
}
.performance-dashboard {
background: #007bff1a;
border: 1px solid #007bff4d;
border-radius: 12px;
margin: 20px 0;
padding: 20px;
}
.metrics-grid {
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 15px;
margin-top: 15px;
display: grid;
}
.metric-card {
text-align: center;
background: #ffffff0d;
border: 1px solid #ffffff1a;
border-radius: 8px;
padding: 15px;
}
.metric-value {
color: #63b3ed;
font-size: 1.8rem;
font-weight: 700;
display: block;
}
.metric-label {
color: #ccc;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-top: 5px;
font-size: 0.8rem;
}
.export-controls {
margin: 20px 0;
}
.export-options {
background: #ffffff08;
border-radius: 8px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
margin: 15px 0;
padding: 15px;
display: grid;
}
.checkbox-label {
cursor: pointer;
align-items: center;
gap: 8px;
text-transform: none !important;
letter-spacing: normal !important;
margin: 0 !important;
font-size: 0.9rem !important;
font-weight: 500 !important;
display: flex !important;
}
.export-actions {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 10px;
margin: 15px 0;
display: grid;
}
.export-actions button {
width: auto !important;
margin: 0 !important;
}
.feedback-controls {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 10px;
margin: 15px 0;
display: grid;
}
.feedback-stats {
background: #4caf501a;
border: 1px solid #4caf504d;
border-radius: 12px;
margin: 20px 0;
padding: 20px;
}
.stats-grid {
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 15px;
margin-top: 15px;
display: grid;
}
.stat-item {
text-align: center;
background: #ffffff0d;
border: 1px solid #ffffff1a;
border-radius: 8px;
padding: 15px;
}
.stat-value {
color: #4caf50;
font-size: 1.8rem;
font-weight: 700;
display: block;
}
.stat-label {
color: #ccc;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-top: 5px;
font-size: 0.8rem;
}
.feedback-widget {
z-index: 1000;
position: fixed;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
.feedback-toggle {
color: #fff;
cursor: pointer;
background: linear-gradient(135deg, red 0%, #c00 100%);
border-radius: 20px 0 0 20px;
padding: 10px 15px;
font-size: 0.9rem;
font-weight: 600;
transition: all 0.3s;
box-shadow: -3px 0 10px #0000004d;
}
.feedback-toggle:hover {
background: linear-gradient(135deg, #ff1a1a 0%, #e60000 100%);
transform: translate(-5px);
}
.feedback-panel {
backdrop-filter: blur(10px);
background: #1a1a1af2;
border: 1px solid #ff00004d;
border-radius: 12px;
width: 320px;
padding: 20px;
position: absolute;
top: 0;
right: 100%;
box-shadow: -5px 0 20px #00000080;
}
.feedback-header {
border-bottom: 1px solid #ffffff1a;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
padding-bottom: 10px;
display: flex;
}
.feedback-header h3 {
color: red;
margin: 0;
font-size: 1.1rem;
}
.feedback-header button {
color: #ccc;
cursor: pointer;
background: 0 0;
border: none;
width: auto;
height: auto;
margin: 0;
padding: 0;
font-size: 1.5rem;
}
</style>
</head>
<body>
<div class="container">
<header class="header-section">
<h1>PowerHouseATX</h1>
<div class="page-title">Workout Calculator</div>
<p class="subtitle">Evidence-Based Muscle Building</p>
<button class="small" onclick="handleSignOut()" style="float: right">
Sign Out
</button>
<div class="quick-start-guide" id="quickStartGuide">
<h3>🚀 First-Time Quick-Start Guide</h3>
<div class="quick-start-content">
<ol class="quick-start-steps">
<li>
<strong>Set volume landmarks</strong> → open "Program Setup"
section below
</li>
<li>
<strong>Track daily volume</strong> → use "Daily Volume" for
each muscle group
</li>
<li>
<strong>Log a workout</strong> → use "Set Feedback" after each
exercise
</li>
<li>
<strong>End of week</strong> → tick "Last workout" & review
Weekly analysis
</li>
<li>
<strong>Start next week</strong> → follow the new RIR target
</li>
</ol>
<div class="quick-start-actions">
<button
class="quick-start-btn"
onclick="document.getElementById('quickStartGuide').style.display = 'none'; return false;"
style="cursor: pointer; font-weight: 700"
>
GOT IT, HIDE THIS GUIDE
</button>
<label class="quick-start-checkbox">
<input type="checkbox" id="dontShowQuickStart" /> Don't show
again
</label>
</div>
</div>
</div>
<div class="rp-status">
<h3>Current Training Status</h3>
<div class="status-grid">
<div class="status-item">
<div class="status-value" id="currentWeek">1</div>
<div class="status-label">Week</div>
</div>
<div class="status-item">
<div class="status-value" id="currentMeso">4</div>
<div class="status-label">Meso Length</div>
</div>
<div class="status-item">
<div class="status-value" id="currentBlock">1</div>
<div class="status-label">Block</div>
</div>
<div class="status-item">
<div class="status-value" id="targetRIR">4.5</div>
<div class="status-label">Target RIR</div>
</div>
<div class="status-item">
<div class="status-value" id="currentPhase">Accumulation</div>
<div class="status-label">Phase</div>
</div>
</div>
</div>
</header>
<div class="chart-section">
<div class="chart-header">
<h2>Weekly Volume by Muscle</h2>
<div class="chart-controls">
<button class="small" onclick="resetWeeklyData()">
Reset Week
</button>
<button class="small" onclick="exportSummary()">
📊 Export Chart
</button>
</div>
</div>
<canvas id="weeklyChart"></canvas>
</div>
<div class="section-banner" onclick="toggleSection('daily')">
<h3>Daily Training <span class="expand-icon">▼</span></h3>
<p>Use during or right after your workout</p>
</div>
<div class="section-content" id="daily-content">
<div class="calculator-grid">
<section class="calculator" id="mevCard">
<h2>Set Feedback (RP Algorithms)</h2>
<div class="input-group">
<label for="muscleSelect">Muscle group:</label>
<select id="muscleSelect">
<option value="Chest">Chest</option>
<option value="Back">Back</option>
<option value="Quads">Quads</option>
<option value="Hamstrings">Hamstrings</option>
<option value="Shoulders">Shoulders</option>
<option value="Biceps">Biceps</option>
<option value="Triceps">Triceps</option>
<option value="Calves">Calves</option>
<option value="Abs">Abs</option>
<option value="Forearms">Forearms</option>
<option value="Neck">Neck</option>
<option value="Traps">Traps</option>
</select>
</div>
<div class="input-group">
<label for="currentSets">Current weekly sets:</label>
<input type="number" id="currentSets" min="0" value="0" />
<div class="helper-text">Click to edit inline</div>
</div>
<div class="input-group">
<label>Workload (RP Table 2.2):</label>
<div
style="
grid-template-columns: repeat(3, 1fr);
gap: 15px;
display: grid;
"
>
<div>
<label for="mmc" style="font-size: 0.8rem"
>Mind-Muscle (0-3):</label
>
<input type="number" id="mmc" min="0" max="3" value="2" />
</div>
<div>
<label for="pump" style="font-size: 0.8rem"
>Pump (0-3):</label
>
<input type="number" id="pump" min="0" max="3" value="2" />
</div>
<div>
<label for="dis" style="font-size: 0.8rem"
>Workload (0-3):</label
>
<input type="number" id="dis" min="0" max="3" value="2" />
</div>
</div>
<div class="helper-text">
Rate your workout quality factors (0=poor, 3=excellent)
</div>
</div>
<div class="input-group">
<label>Performance vs last time:</label>
<div class="radio-group">
<label
><input type="radio" name="perf" value="3" /> Much
Better</label
>
<label
><input type="radio" name="perf" value="2" checked />
Better</label
>
<label><input type="radio" name="perf" value="1" /> Same</label>
<label
><input type="radio" name="perf" value="0" /> Worse</label
>
</div>
</div>
<div class="input-group">
<label for="sore">Current soreness level (0-3):</label>
<input type="number" id="sore" min="0" max="3" value="1" />
<div class="helper-text">0=None, 1=Mild, 2=Moderate, 3=High</div>
</div>
<div class="input-group">
<label for="jointAche">Joint ache level (0-3):</label>
<input type="number" id="jointAche" min="0" max="3" value="0" />
<div class="helper-text">0=None, 1=Mild, 2=Moderate, 3=Pain</div>
</div>
<div class="input-group">
<label for="perfChange">Performance change:</label>
<select id="perfChange">
<option value="1">Personal Record (+1)</option>
<option value="0" selected>Same as last time (0)</option>
<option value="-1">Performance drop (-1)</option>
</select>
<div class="helper-text">
Strength performance vs recent sessions
</div>
</div>
<div class="autoregulation-section">
<h4>Effort Validation</h4>
<div class="input-group">
<label for="actualRIR">Actual RIR this set:</label>
<input
type="number"
id="actualRIR"
min="0"
max="10"
step="0.5"
placeholder="e.g. 2.5"
/>
<div class="helper-text">
How many more reps could you have done? (Target:
<span id="targetRIRDisplay">4.5</span>)
</div>
</div>
</div>
<button onclick="submitFeedback()">
Process with RP Algorithms
</button>
<output id="mevOut" class="result"></output>
</section>
</div>
</div>
<div class="section-banner" onclick="toggleSection('weekly')">
<h3>Weekly Planning <span class="expand-icon">▼</span></h3>
<p>End-of-week review and next week setup</p>
</div>
<div class="section-content" id="weekly-content">
<div class="calculator-grid">
<section class="calculator" id="deloadCard">
<h2>Deload Analysis</h2>
<div class="input-group">
<label>
<input type="checkbox" id="halfMuscles" /> Most muscles needed
recovery (≥6 muscle groups)
</label>
</div>
<div class="input-group">
<label>
<input type="checkbox" id="mrvBreach" /> Hit MRV twice in a row
</label>
</div>
<div class="input-group">
<label>
<input type="checkbox" id="illness" /> Illness / Minor Injury
</label>
</div>
<div class="input-group">
<label>
<input type="checkbox" id="lowMotivation" /> Low
motivation/enjoyment
</label>
</div>
<button onclick="analyzeDeload()">Analyze Deload Need</button>
<output id="deloadOut" class="result"></output>
</section>
<section class="calculator" id="autoVolumeCard">
<h2>🤖 Auto-Volume Progression</h2>
<div class="input-group">
<p class="helper-text">
Automatically progress all muscles based on weekly feedback.
System starts each muscle at MEV and adds +1-2 sets per week
based on recovery indicators.
</p>
</div>
<div class="input-group">
<h4>Progression Logic:</h4>
<ul style="margin: 10px 0; padding-left: 20px; font-size: 0.9rem">
<li><strong>Start:</strong> All muscles begin at MEV</li>
<li>
<strong>+1 set:</strong> Good recovery (soreness ≤1,
performance ≥0)
</li>
<li><strong>+2 sets:</strong> At MEV or low stimulus (≤3)</li>
<li><strong>Hold volume:</strong> At MRV or fatigue present</li>
<li><strong>Deload:</strong> Most muscles at MRV</li>
</ul>
</div>
<div
class="input-group"
style="flex-wrap: wrap; gap: 10px; display: flex"
>
<button
type="button"
class="small"
onclick="initializeAllMusclesAtMEV()"
style="
background: linear-gradient(135deg, #4caf50, #45a049);
flex: 1;
min-width: 150px;
"
>
🎯 Initialize at MEV
</button>
<button
type="button"
class="small"
onclick="advanceToNextWeek()"
style="
background: linear-gradient(135deg, #2196f3, #1976d2);
flex: 1;
min-width: 150px;
"
>
📅 Next Week
</button>
<button
onclick="runAutoVolumeProgression()"
style="
background: linear-gradient(135deg, #f44, #f66);
flex: 2;
min-width: 200px;
font-weight: 700;
"
>
▶️ Run Weekly Auto-Progression
</button>
</div>
<output id="autoVolumeOut" class="result"> </output>
</section>
<section class="calculator" id="freqCard">
<h2>Frequency Optimization</h2>
<div class="input-group">
<label for="soreDays">Days until soreness gone:</label>
<input type="number" id="soreDays" min="0" value="2" />
</div>
<div class="input-group">
<label for="sessionGap">Current session gap (days):</label>
<input type="number" id="sessionGap" min="1" value="3" />
</div>
<div class="input-group">
<label for="trainingAge">Training experience:</label>
<select id="trainingAge">
<option value="beginner">Beginner (< 1 year)</option>
<option value="intermediate" selected>
Intermediate (1-3 years)
</option>
<option value="advanced">Advanced (> 3 years)</option>
</select>
</div>
<button onclick="analyzeFrequency()">Optimize Frequency</button>
<output id="freqOut" class="result"></output>
</section>
</div>
</div>
<div class="section-banner" onclick="toggleSection('setup')">
<h3>Program Setup <span class="expand-icon">▼</span></h3>
<p>Configure volume landmarks and training blocks</p>
</div>
<div class="section-content" id="setup-content">
<div class="calculator-grid">
<section class="calculator" id="volumeCard">
<h2>Volume Landmarks (RP Method)</h2>
<div class="input-group">
<label for="landmarkMuscle">Muscle to configure:</label>
<select id="landmarkMuscle">
<option value="Chest">Chest</option>
<option value="Back">Back</option>
<option value="Quads">Quads</option>
<option value="Hamstrings">Hamstrings</option>
<option value="Shoulders">Shoulders</option>
<option value="Biceps">Biceps</option>
<option value="Triceps">Triceps</option>
<option value="Calves">Calves</option>
<option value="Abs">Abs</option>
<option value="Forearms">Forearms</option>
<option value="Neck">Neck</option>
<option value="Traps">Traps</option>
</select>
</div>
<div class="landmark-grid">
<div class="input-group">
<label for="mv">MV (Maintenance Volume):</label>
<input type="number" id="mv" min="0" value="4" />
<div class="helper-text">Minimum to maintain muscle</div>
</div>
<div class="input-group">
<label for="mev">MEV (Minimum Effective):</label>
<input type="number" id="mev" min="0" value="8" />
<div class="helper-text">Minimum for growth</div>
</div>
<div class="input-group">
<label for="mav">MAV (Maximum Adaptive):</label>
<input type="number" id="mav" min="0" value="16" />
<div class="helper-text">Best volume for adaptation</div>
</div>
<div class="input-group">
<label for="mrv">MRV (Maximum Recoverable):</label>
<input type="number" id="mrv" min="0" value="22" />
<div class="helper-text">Maximum you can recover from</div>
</div>
</div>
<div class="input-group">
<button
type="button"
class="small"
onclick="applyVolumePreset('beginner')"
>
Beginner Preset
</button>
<button
type="button"
class="small"
onclick="applyVolumePreset('intermediate')"
>
Intermediate Preset
</button>
<button
type="button"
class="small"
onclick="applyVolumePreset('advanced')"
>
Advanced Preset
</button>
</div>
<button onclick="saveLandmarks()">Save Volume Landmarks</button>
<output id="volumeOut" class="result"></output>
<div id="volumeStatus" class="volume-status"></div>
</section>
<section class="calculator" id="mesoCard">
<h2>Mesocycle Setup</h2>
<div class="input-group">
<label for="mesoLength">Mesocycle length (weeks):</label>
<input type="number" id="mesoLength" min="2" max="8" value="4" />
<div class="helper-text">Typical range: 3-6 weeks</div>
</div>
<div class="input-group">
<label for="currentWeekNum">Current week number:</label>
<input type="number" id="currentWeekNum" min="1" value="1" />
</div>
<div class="input-group">
<label for="trainingGoal">Primary goal:</label>
<select id="trainingGoal">
<option value="hypertrophy" selected>Hypertrophy</option>
<option value="strength">Strength</option>
<option value="power">Power</option>
<option value="endurance">Endurance</option>
</select>
</div>
<button onclick="setupMeso()">Setup Mesocycle</button>
<output id="mesoOut" class="result"></output>
</section>
<section class="calculator" id="rirScheduleCard">
<h2>RIR Schedule & Load Feedback</h2>
<div class="input-group">
<label for="rirMesocycleLength">Mesocycle length (weeks):</label>
<input
type="number"
id="rirMesocycleLength"
min="3"
max="6"
value="4"
/>
<div class="helper-text">Standard progression: 4-6 weeks</div>
</div>
<div class="input-group">
<label for="rirCurrentWeek">Current week:</label>
<input
type="number"
id="rirCurrentWeek"
min="1"
max="6"
value="1"
/>
</div>
<div class="rir-schedule-display">
<button onclick="showRIRSchedule()" class="small">
Show RIR Schedule
</button>
<div id="rirScheduleDisplay" class="result" style="display: none">
<h4>Weekly RIR Targets</h4>
<div id="rirScheduleContent"></div>
</div>
</div>
<div class="load-feedback-section">
<h4>Weekly Load Adjustments</h4>
<div class="input-group">
<label>
<input type="checkbox" id="simulateRIRFeedback" checked />
Use simulated RIR feedback for demo
</label>
<div class="helper-text">
Uncheck to manually input RIR values
</div>
</div>
<button onclick="runWeeklyLoadAdjustments()" class="small">
Process Weekly Adjustments
</button>
<div
id="loadAdjustmentResults"
class="result"
style="display: none"
>
<div class="feedback-results">
<div id="loadAdjustmentContent"></div>
</div>
</div>
</div>
<div class="load-progression-section">
<h4>Next Week Progression</h4>
<button onclick="showNextWeekLoadProgression()" class="small">
Show Load Progression
</button>
<div
id="loadProgressionResults"
class="result"
style="display: none"
>
<div class="feedback-results">
<div id="loadProgressionContent"></div>
</div>
</div>
</div>
<div class="rir-schedule-info">
<div class="helper-text">
<strong>RIR Schedule System:</strong><br />
• Automatically progresses RIR targets weekly: [3, 2, 1, 0]<br />
• Processes feedback to adjust training loads (-15% to +15%)<br />
• Provides next week progression recommendations<br />
• Integrates with auto-progression system
</div>
</div>
</section>
</div>
</div>
<div class="advanced section-banner" onclick="toggleSection('advanced')">
<h3>Advanced Intelligence <span class="expand-icon">▼</span></h3>
<p>AI-powered training optimization and live performance monitoring</p>
</div>
<div class="section-content" id="advanced-content">
<div class="calculator-grid">
<section class="calculator" id="liveMonitorCard">
<h2>🔴 Live Performance Monitor</h2>
<div class="input-group">
<p class="helper-text">
Real-time feedback during training sessions with automatic
performance analysis and next-set recommendations.
</p>
</div>
<div class="live-session-controls">
<div class="input-group">
<label for="liveExercise">Exercise:</label>
<input
id="liveExercise"