Endurance Performance Analyzer by @dbarale - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

styleDefinisce regole e stili CSS all'interno di un tag HTML (inline CSS)
<map>Inserisce immagini mappa cliccabili in un documento
<label>Mostrare un testo di etichetta per un elemento di input.
<video>Integra e controlla video in una pagina HTML
widthImposta la larghezza di un elemento HTML
actionDetermina la pagina di destinazione a cui verranno inviati i dati di un form HTML

Users

Log in to search for users

Explore

Find inspiration

cablepartdos-op1.html

venezia esercizio pretest

primo es =01/26/24

HTML - Esercizi

disney plus project

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html lang="en">
<head>
	
	<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-J9B6D7DC1X"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-J9B6D7DC1X');
</script>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
	<title>Kona Endurance Performance Analyzer</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="app.js"></script>
     <link rel="stylesheet" href="style.css">
     
<link rel="icon" type="image/x-icon" href="/fav.png">
     
     
</head>
<body>


<nav class="navbar navbar-expand-lg navbar-dark bg-dark custom-navbar">
  <div class="container-fluid">
    <a class="navbar-brand" href="index.html">
      <img src="https://app.konaendurance.com/cropped-shopheader.png" alt="" width="90" height="24">
      &nbsp;     </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
         <li class="nav-item">
          <a class="nav-link" href="https://konaendurance.com/">Home</a>
          </li>
		  <li class="nav-item">
          <a class="nav-link" href="https://konaendurance.com/about">About</a>
        </li>
		  <li class="nav-item">
          <a class="nav-link" href="https://konaendurance.com/coaching">Coaching</a>
        </li>
		  <li class="nav-item">
          <a class="nav-link" href="https://konaendurance.com/services">Pricing</a>
        </li>
		 
		  <li class="nav-item">
          <a class="nav-link" href="https://www.trainingpeaks.com/training-plans/search?language=all&sort.field=soldCount&sort.dir=desc&index=0&keyword=Florian+Bögge" target="_blank">Training Plans</a>
        </li>
       <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="https://app.konaendurance.com/">Bike Analyzer</a>
              </li>

              <li class="nav-item">
                <a class="nav-link" aria-current="page" href="https://app.konaendurance.com/run/index.html">Run Analyzer</a>
              </li>
        
          

       
      </ul>
    </div>
  </div>
</nav>


	<div class="container">
		<div class="card">
			<div class="form-group">
				
		
<div class="container">
	<br><h2 class="container-title"><center>Kona Endurance Performance Analyzer</center></h2><br>
		 <div class="card">
			 
<div class="card" id="page1a">
    <div class="card-body">
	    
	    
				   <section id="introduction">
    
        <p><center><b>Take your cycling and triathlon performance to the next level with our free Performance Analyzer!</b></center></p>
    </section>
    <section id="features">
	    
	     <div class="container">
    <div class="row">
      <div class="col-md-4">
        <img src="https://app.konaendurance.com/image1.jpeg" class="img-thumbnail" alt="Image 1" onclick="previewImage('image1.jpeg')">
      </div>
      <div class="col-md-4 d-none d-sm-block">
        <img src="https://app.konaendurance.com/image2.jpeg" class="img-thumbnail" alt="Image 2" onclick="previewImage('image2.jpeg')">
      </div>
      <div class="col-md-4 d-none d-sm-block">
        <img src="https://app.konaendurance.com/image3.jpeg" class="img-thumbnail" alt="Image 3" onclick="previewImage('image3.jpeg')">
      </div>
    </div>
  </div>

  <!-- Modal -->
<div class="modal fade" id="imagePreviewModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-body">
          <img id="previewImage" src="" class="img-fluid" alt="Preview Image">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>


  <script>
    function previewImage(src) {
      $('#previewImage').attr('src', src);
      $('#imagePreviewModal').modal('show');
    }
  </script>
	    <br>
       
       <center><h3>What It Is:</h3></center>
        <ol>
            <li><strong>VO2Max Calculator:</strong> Analyze your oxygen consumption and efficiency by simply entering your body weight and average power from the last step of your ramp test.</li><br>
            
            <li><strong>VLaMax Calculator:</strong> With your VO2Max calculated, enter additional information like height, age, and power from your 3 & 6min test to calculate your VLaMax. This key metric helps you understand your anaerobic capacity and tailor your training accordingly.</li><br>
            
            <li><strong>In-Depth Performance Analysis:</strong> Dive into your cycling and triathlon performance with detailed results like <b>FTP, Vo2Max, VLaMax, Training Zones, Estimated Glycogen Storage, Carb & Fat Consumption at different power outputs, Fatmax, and more.</b> Visual scales and charts help you gauge where you stand, and what you need to improve.</li>
       
        </ol>
    </section>
      <section id="call-to-action">
	      <center><h3>How It Works:</h3></center>
        <p>Our 2-step testing system spans two days. On day 1, perform an all out ramp test; on day 2, complete two time trials of 3 and 6 minutes each. Protocols and files for Garmin or Zwift are provided below. Our app will guide you through the analysis process and explain the results.</p><center><p> <b>And yes this is completely for free. </b>Save the $149 or whatever they charge these days and buy some flowers for your girl.</p></center>
    </section>
    <center><h3>The Test Protocols:</h3></center>
    
    
	  <div class="test-day">
        <span>All in one:</span>
        <a class="nav-link" href="https://www.trainingpeaks.com/training-plans/triathlon/tp-423760/vo2max-vlamax-test-week-english" download target="_blank">Free TrainingPeaks Test Protocol Plan English</a>|<a class="nav-link" href="https://www.trainingpeaks.com/training-plans/triathlon/tp-397785/vo2max-vlamax-testwoche" download target="_blank">Kostenlose TrainingPeaks Testwoche Deutsche Version</a>
      
    </div>
     <div class="test-day">
        <span>Test Day 1 - VO2Max Test:</span>
        <a class="nav-link" href="https://app.konaendurance.com/D1KonaEndurancePerformanceAnalyzer.pdf" download target="_blank">PDF Day 1</a>
        <a class="nav-link" href="https://app.konaendurance.com/1.zwo" download target="_blank">Zwift</a>
    </div>
        <div class="test-day">
        <span>Test Day 2 - VLaMax Test:</span>
        <a class="nav-link" href="https://app.konaendurance.com//D2KonaEndurancePerformanceAnalyzer.pdf" download target="_blank">PDF Day 2</a>
        <a class="nav-link" href="https://app.konaendurance.com/2.zwo" download target="_blank">Zwift</a>
    </div>
    
      <br>

             <div id="mc_embed_shell" class="form-group">
    
<div id="mc_embed_signup">
    <form action="https://konaendurance.us6.list-manage.com/subscribe/post?u=bca8d70a57d92e5419c9aab35&amp;id=ab54c6e9e0&amp;f_id=007616e3f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
       <center> <div id="mc_embed_signup_scroll" class="form-group"><h3>Get more free tools & plans:</h3></center> 
            <div class="mc-field-group"><label for="mce-EMAIL">Email Address <span class="asterisk">*</span></label><input type="email" name="EMAIL" class="form-control" id="mce-EMAIL" required="" value=""></div><div class="mc-field-group"><label for="mce-FNAME">First Name </label><input type="text" name="FNAME" class="form-control" id="mce-FNAME" value=""></div>
        <div id="mce-responses" class="clear foot">
            <div class="response" id="mce-error-response" style="display: none;"></div>
            <div class="response" id="mce-success-response" style="display: none;"></div>
        </div>
    <div aria-hidden="true" style="position: absolute; left: -5000px;">
        /* real people should not fill this in and expect good things - do not remove this or risk form bot signups */
        <input type="text" name="b_bca8d70a57d92e5419c9aab35_ab54c6e9e0" tabindex="-1" value="">
    </div>
        <div class="optionalParent">  <br>
            <div class="clear foot">
               <center> <input type="submit" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary" value="Thank You"></center>
                <p style="margin: 0px auto;"></p>
            </div>
        </div>
    </div>
</form>
</div>
<script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script><script type="text/javascript">(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='COMPANY';ftypes[3]='text';fnames[4]='ADDRESS';ftypes[4]='address';}(jQuery));var $mcj = jQuery.noConflict(true);</script></div>


     
        <br>
    
 
				</div>
			<button id="toggleButton" onclick="toggleCollapse()" class="btn btn-link">
  <span id="instructionsLabel" class="instructions-label">Hide Instructions</span>
  <span id="arrowIcon" class="arrow-down"></span>
</button>

	
  <div class="card">
    <div class="card-body" id="page1">
      <h3 class="card-title">Step 1: Calculate VO2Max</h3>
      <section id="introduction">
    
        <p>Enter the average power from the last stable 30 sec of you ramp test.</p>
    </section>
   <form name="cycleWatts" class="mb-3">
      <div class="form-group">
    <label for="inputKG">Bodyweight in kg:</label>
    <div class="input-group">
      <input type="number" class="form-control" id="inputKG" name="inputKG" oninput="convertToPounds(this.value)" style="width:50%;" step="0.01">
      <input type="text" class="form-control" id="inPounds" readonly style="width:50%;"> <!-- This will display the weight in pounds -->
    </div>
  </div>
  <!-- Rest of the form -->
  <div class="form-group">
    <label for="inputWatts">Avg Power Last Test Step (W):</label>
    <input type="number" class="form-control" id="inputWatts" name="inputWatts">
  </div>
  <div class="form-group">
    <label for="inputSeconds">Time Last Test Step in s:</label>
    <input type="number" class="form-control" id="inputSeconds" name="inputSeconds">
  </div>
 <center> <button id="calculateButton" onclick="cycleCalc(event)" class="btn btn-primary">Calculate VO2Max</button></center>
</form>

      <div id="alert"></div>
      <div id="zones"></div>
    </div>
  </div>
</div>

   <div class="container">
	   <br>
  <div class="card">
    <div class="card-body" id="page2" style="display:none;">
      <h1 class="card-title">Step 2: Calculate VLaMax</h1>
      <section id="introduction">
    
        <p>Enter more data from test day 2 to get the full results.</p>
    </section>
      <div class="form-group">
        <label for="displayedWeight">Bodyweight (kg):</label>
        <input type="number" class="form-control" id="displayedWeight" readonly>
      </div>
      <div class="form-group">
        <label for="vo2max">VO2Max (ml/min/kg):</label>
        <input type="number" class="form-control" id="vo2max" readonly>
      </div>
      <hr>
      <h4>Enter more information</h4>
      
      <form>
       <div class="form-group">
    <label for="height">Height in cm:</label>
    <div class="input-group">
      <input type="number" class="form-control" id="height" step="0.01" oninput="convertToFeet(this.value)" required style="width:50%;">
      <input type="text" class="form-control" id="inFeet" readonly style="width:50%;"> <!-- This will display the height in feet -->
    </div>
  </div>
        <div class="form-group">
          <label for="age">Age (years):</label>
          <input type="number" class="form-control" id="age" step="0.01" required>
        </div>
        <div class="form-group">
          <label for="sprintPower">20 sec Sprint test AVG (W):</label>
          <input type="number" class="form-control" id="sprintPower" step="0.01" required>
        </div>
        <div class="form-group">
          <label for="workload-3min">Workload 3min (W):</label>
          <input type="number" class="form-control" id="workload-3min" step="0.01" required>
        </div>
        <div class="form-group">
          <label for="workload-6min">Workload 6min (W):</label>
          <input type="number" class="form-control" id="workload-6min" step="0.01" required>
        </div>
        <!-- Add other input variables here as needed -->
       <center> <button onclick="calculateAndGoToPage3(event)" type="submit" id="finalbutton" class="btn btn-primary">Calculate VLaMax and get full results</button></center>
      </form>
    </div>
  </div>
</div>


<div class="container">
	<br>
  <div class="card">
    <div id="page3" style="display:none;">
      <div class="card-header text-center">
        <h1>Results</h1>
        <span class="instructions-label">Click the <i class="fa fa-question-circle"></i> to learn more</span>
      </div>
      <div id="results" class="card-body">
        <h4><b>FTP:<br></b> <span id="FTP">W</span><span class="question-mark" onclick="toggleFTPInfo()"><i class="fa fa-question-circle"></i></h4>
        <p><b>Relative Threshold:</b> <span id="RelSchwelle">W/kg</span></p>
        
<span class="label" onclick="toggleFTPInfo()">How do I improve my FTP? </span>
<div id="FTPInfoContainer" class="info-container" style="display:none;">
  <p> 
	  Improving FTP requires a combination of structured training, including high-intensity intervals, steady-state rides, proper nutrition, and recovery strategies. A targeted training plan focusing on these elements will help raise FTP and enhance both racing and general cycling performance. Your relative Threshold is your FTP divided by your body weight. This value makes it easier to compare yourself to other riders.</p><br>
  <a href="https://www.trainingpeaks.com/training-plans/triathlon/ironman/tp-379983/kona-endurance-build-8-weeks-long-distance-triathlon-plan-pr-plan-2-3-email-supp" target="_blank">Get our Kona Endurance FTP Boosting training plan</a><br>
  <br>
    <a href="https://www.trainingpeaks.com/training-plans/triathlon/ironman/tp-394627/kona-endurance-build-8-wochen-langdistanz-triathlon-plan-pr-plan-2-3-email-suppo" target="_blank">GERMAN FTP Booster Plan</a><br>
    <br>
                
            <li><strong>Performance Gauge:</strong>FTP is an excellent way to assess performance changes over time. A higher FTP means a cyclist can maintain a higher intensity for a more extended period, directly translating to faster times and better results..</li><br>
            
            <li><strong>Endurance:</strong>A higher FTP correlates to increased aerobic endurance. The ability to sustain a more vigorous effort for longer periods is crucial in long-distance races, including triathlons.</li><br>
            <li><strong>Pacing Strategy:</strong>Understanding your FTP can help you develop a better pacing strategy for races, ensuring you don't start too fast and burn out or go too slow and underperform.</li><br>
       
        </ol>
   
</div>

        <div class="scale-container">
          <div id="ftp-scale" class="scale"></div>
          <div class="labels">
            <span class="low">Low</span>
            <span class="high">High</span>
          </div>
        </div>

        <h4><b>VO2Max:<br></b> <span id="V02">ml/min/kg</span><span class="question-mark" onclick="toggleVO2Info()"><i class="fa fa-question-circle"></i></h4>      
<span class="label" onclick="toggleVO2Info()">How do I improve my VO2Max? </span>
<div id="vo2InfoContainer" class="info-container" style="display:none;">
  <p> 
	  Improving your VO2Max involves targeted training, including high-intensity interval training (HIIT), long aerobic runs, and proper nutrition and recovery practices. 
       Following a well-designed training plan that focuses on these aspects can lead to meaningful increases in VO2Max and subsequent enhancements in athletic performance.</p><br>
  <a href="https://www.trainingpeaks.com/training-plans/cycling/tp-391895/boost-your-vo2max-4-week-cycling-plan-advanced-kona-endurance" target="_blank">Get our Kona Endurance Vo2Max Boosting training plan</a><br>
  <br>
    <a href="https://www.trainingpeaks.com/training-plans/cycling/road-cycling/tp-309819/rad-vo2max-4-wochen-plan-kona-endurance" target="_blank">GERMAN Vo2Max Booster Plan</a><br>
    <br>
                
            <li><strong>Efficiency:</strong>A higher VO2Max allows the body to use oxygen more efficiently during exercise. This means that you can perform at a higher intensity or for a longer duration with less perceived effort.</li><br>
            
            <li><strong>Endurance:</strong>An increase in VO2Max often correlates with improved endurance. This allows athletes to maintain a more robust pace for more extended periods, essential for long-distance events like triathlons.</li><br>
            <li><strong>Recovery:</strong>Better VO2Max levels can also contribute to quicker recovery times between intense efforts, enabling more consistent and effective training.</li><br>
       
        </ol>
   
</div>

        <div class="scale-container">
          <div id="vo2max-scale" class="scale"></div>
          <div class="labels">
            <span id="vo2max-low" class="low">Low</span>
            <span id="vo2max-high" class="high">High</span>
          </div>
        </div>

        <h4><p id="vlamax-value"></p></h4>
       
        
        <span class="label" onclick="toggleVLAMAXInfo()">How do I improve my VLaMax? </span>
<div id="VLAMAXInfoContainer" class="info-container" style="display:none;">
  <p> 
	  VLaMax represents the maximum rate of lactate production in the body. It's a measure of how quickly your body can produce lactate, particularly in anaerobic, high-intensity efforts. In essence, VLaMax is an indicator of your anaerobic capacity, or how well your body performs without relying on oxygen.</p>
	 <p> For endurance athletes, a lower VLaMax may be more desirable as it means less lactate production at a given intensity. This translates to the ability to sustain efforts for a longer period without fatiguing.</p>
	  <br>
  <a href="https://www.trainingpeaks.com/training-plans/triathlon/ironman/tp-378813/kona-endurance-base-8-weeks-long-distance-triathlon-plan-pr-plan-1-3-email-suppo" target="_blank">Get our Kona Endurance lower your VLaMax training plan</a><br>
  <br>
    <a href="https://www.trainingpeaks.com/training-plans/triathlon/ironman/tp-394606/kona-endurance-base-8-wochen-langdistanz-triathlon-plan-pr-plan-1-3-email-suppor" target="_blank">GERMAN Lower your VLaMax Plan</a><br>
    <br>
                
            <li><strong>Energy Efficiency:</strong>The interplay between VLaMax and aerobic capabilities (such as VO2Max and FTP) can determine how efficiently you use energy in different types of exercise. By optimizing VLaMax, you can make sure you're using your anaerobic and aerobic systems in the most efficient way for your specific goals.</li><br>
            
            <li><strong>Recovery:</strong>Managing VLaMax properly can also impact how quickly you recover from hard efforts. Training to adjust this value to your specific needs will lead to more efficient training cycles and better long-term development.</li><br>
            <li><strong>Individualized Training:</strong>Understanding your VLaMax allows you to tailor your training more precisely. If you are a sprinter, you might focus on maintaining or even increasing VLaMax through explosive, short intervals. If you are an endurance athlete, you might work on reducing VLaMax through longer, steady efforts.</li><br>
       
        </ol>
   
</div>

       
        <div class="scale-container">
          <div id="vlamax-scale" class="reversed-scale"></div>
          <div class="labels">
            <span class="low">0.1</span>
            <span class="high">1.1</span>
          </div>
        </div>

        <p><b>Peak Power Output:</b> <span id="PPO">W</span></p>
        <p><b>Relative Power Output:</b> <span id="RelPPO">W/kg</span></p>
        <p><b>Fatmax:</b> <span id="Fatmax">W</span><span class="question-mark" onclick="toggleFATMInfo()"><i class="fa fa-question-circle"></i></p>
        
          
         <div id="FATMInfoContainer" class="info-container" style="display:none;">
  <p> 
	 FatMax refers to the exercise intensity at which fat oxidation rates reach their maximum value. <br></p><br>
 
 <ol>
            <li><strong>Efficient Energy Utilization:</strong>Fat is a more energy-dense fuel than carbohydrates. By optimizing the body's ability to burn fat at higher intensities, athletes can tap into a substantial energy reserve, allowing them to conserve glycogen stores for later stages of prolonged endurance events.</li><br>
            
            <li><strong>Improved Endurance Performance:</strong>Training at FatMax helps the body become more efficient at utilizing fat as a fuel source, which can enhance endurance performance. This allows athletes to maintain a given intensity for longer durations without depleting energy reserves as quickly.</li><br>
            
            <li><strong>Glycogen Sparing:</strong>By relying more on fat for energy during prolonged exercise, the body can conserve its glycogen stores. This is essential in endurance races, as depletion of glycogen can lead to fatigue and a significant drop in performance.</li>
       
        </ol> 
	  <br>
  <a href="https://www.trainingpeaks.com/training-plans/search?language=all&sort.field=soldCount&sort.dir=desc&index=0&keyword=Florian+B%C3%B6gge" target="_blank">Check out our Kona Endurance training plans</a><br>
  <br>
         
   
</div>

        
        
        <p id="vlamax-value1"></p>
        
         <p id="AT"></p>
         
         <div id="ATInfoContainer" class="info-container" style="display:none;">
  <p> 
	  AT (Anaerobic Threshold): AT refers to the point during exercise at which lactate starts to accumulate in the blood faster than it can be removed. This threshold indicates the transition between aerobic and anaerobic energy production, and it often marks the intensity that an athlete can sustain for about an hour.
 <br>FTP (Functional Threshold Power): FTP specifically refers to the highest power output (in watts) an athlete can maintain in a steady state WITHOUT fatigue for one hour. It's a practical measure used mainly in cycling to tailor training zones and gauge performance improvements.</p><br>
 
 <p>Note: The FTP is derived from the Vo2Max test and the AT is derived from the VLaMax test. AT is a more physiological concept, focusing on metabolic changes in the body, while FTP is a functional performance measure used to quantify cycling ability.</p>

	  <br>
  <a href="https://www.trainingpeaks.com/training-plans/search?language=all&sort.field=soldCount&sort.dir=desc&index=0&keyword=Florian+B%C3%B6gge" target="_blank">Check out our Kona Endurance training plans</a><br>
  <br>
         
   
</div>

         
         
          <p id="ATatvo2"></p>
           <div id="ATatvo2InfoContainer" class="info-container" style="display:none;">
          
 
        <ol>
            <li><strong>Connection Between Aerobic and Anaerobic Systems:</strong> AT represents the intensity level where the body starts to rely more on anaerobic energy production. Understanding the relationship between AT and VO2Max helps to identify the balance between aerobic and anaerobic energy utilization.</li><br>
            
            <li><strong>Performance Prediction:</strong>The ratio between AT and VO2Max is often correlated with endurance performance. Athletes with a higher AT relative to their VO2Max may have better stamina at high intensity levels.</li><br>
            
            <li><strong>Health and Injury Prevention:</strong>Training too often near or above the AT can lead to fatigue and potential health risks. Understanding where the AT lies in relation to VO2Max can help in planning recovery and avoiding overtraining.</li>
       
        </ol>  <br>
  <a href="https://www.trainingpeaks.com/training-plans/search?language=all&sort.field=soldCount&sort.dir=desc&index=0&keyword=Florian+B%C3%B6gge" target="_blank">Check out our Kona Endurance training plans</a><br>
  <br>
         
   
</div>

          
          
           <p id="BMR"></p>
           
           
            <div id="BMRInfoContainer" class="info-container" style="display:none;">
          
          
          BMR, or Basal Metabolic Rate, represents the number of calories the body needs to maintain basic physiological functions while at rest. It includes the energy required for breathing, circulating blood, regulating body temperature, cell growth, and other metabolic processes.
  <br>
        <ol>
            <li><strong>Energy Management:</strong>Endurance sports require a fine balance between energy intake and expenditure. Knowing BMR helps athletes plan their nutritional needs to fuel their bodies effectively for training and recovery.</li><br>
            
            <li><strong>Recovery Planning:</strong>Understanding BMR aids in planning post-workout nutrition to replenish energy stores and facilitate recovery. This is vital for endurance athletes, who often undergo intense, prolonged training sessions.</li><br>
            
            <li><strong>Performance Optimization:</strong>By aligning caloric intake with BMR and the additional energy expenditure of training, endurance athletes can ensure that they are properly fueled. This helps in optimizing performance during training and competition.</li>
       
        </ol>  <br>
  <a href="https://www.trainingpeaks.com/training-plans/search?language=all&sort.field=soldCount&sort.dir=desc&index=0&keyword=Florian+B%C3%B6gge" target="_blank">Check out our Kona Endurance training plans</a><br>
  <br>
         
   
</div>

           
           
            <p id="glycogen"></p>
            
            <div id="glycogenInfoContainer" class="info-container" style="display:none;">
          
          
          Glycogen is stored in form of glucose in the body, found mainly in the liver and muscles. During prolonged exercise, glycogen serves as a critical energy source, supplying glucose to the muscles and brain.
 <br>
        <ol>
            <li><strong>Endurance Performance:</strong>he body's glycogen stores are finite and can be depleted during extended periods of exercise. Once glycogen levels are significantly reduced, fatigue sets in, and performance declines. Therefore, understanding and managing glycogen stores is vital for maintaining energy levels during endurance events.</li><br>
            
            <li><strong>Nutritional Strategy:</strong>Pre-event carb-loading can maximize glycogen stores, and ingesting carbohydrates during exercise can prolong the time to exhaustion by preserving glycogen levels.</li><br>
            
            <li><strong>Training Adaptations:</strong>Strategic manipulation of glycogen levels (such as training in a glycogen-depleted state) might lead to specific training adaptations that improve endurance performance. This approach must be used carefully and under professional guidance..</li>
       
        </ol>  <br>
  <a href="https://www.trainingpeaks.com/training-plans/search?language=all&sort.field=soldCount&sort.dir=desc&index=0&keyword=Florian+B%C3%B6gge" target="_blank">Check out our Kona Endurance training plans</a><br>
  <br>
         
   
</div>
            
            
            <p id="fitnesslevel"></p>
        
        <p id="cho-utilization"></p>
        <p id="fat-utilization"></p>
        
        
        <table id="zones">
  <tr>
    <th style="width:75%">Training Zones</th>
    <th>FROM</th>
    <th>TO</th>
  </tr>
  <tr>
    <td align="center">Recovery</td>
    <td id="zeroLow" style="visibility: hidden;"></td>
    <td id="zeroHigh"></td>
    <td>W</td>
  </tr>
  <tr>
    <td align="center">Base</td>
    <td id="oneLow"></td>
    <td id="oneHigh"></td>
    <td>W</td>
  </tr>
  <tr>
    <td align="center">Sweetspot</td>
    <td id="twoLow"></td>
    <td id="twoHigh"></td>
    <td>W</td>
  </tr>
  <tr>
    <td align="center">HIT</td>
    <td id="threeLow"></td>
    <td id="threeHigh"></td>
    <td>W</td>
  </tr>
  <tr>
    <td align="center" style="font-weight:bold">Possible FTP with</td>
    <td colspan="2"></td>
    <td></td>
  </tr>
  <tr>
    <td align="center">5% improvement</td>
    <td colspan="2" id="POSSIM"></td>
    <td>W</td>
  </tr>
  <tr>
    <td align="center">10% improvement</td>
    <td colspan="2" id="POSSIM2"></td>
    <td>W</td>
  </tr>
</table>

        
        
      </div>
    </div>
  </div>
  <div class="chart-container">
    <div id="chart1" style="width: 100%;"><img src="https://images.squarespace-cdn.com/content/v1/6534b00ebdb5357b26bff095/401e822b-cbe3-4308-9714-d735c051a9ad/Kona+ENDURANCE+FRONT+BLK+PNG.png?format=1500w" class="watermark" alt="Kona Endurance" />
    </div>
    <div id="chartCombined" style="width: 100%; height: 500px;"></div>
        <div id="chart2" style="width: 100%;"></div>
        <div id="chart4" style="width: 100%;"></div>
  </div>
</div>



<script src="app.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<center><a href="https://konaendurance.com" target="/">Learn more about our coaching offer.</a></center>
</body>
<footer>
  &copy; <script>document.write(new Date().getFullYear());</script> Kona Endurance
</footer>
</html>

.scale-container {
  margin-bottom: 20px;
}



.scale {
  width: 100%;
  height: 12px;
  background: linear-gradient(to right, red, yellow, green); /* Gradient colors */
  border-radius: 10px; /* Rounded corners */
  position: relative;
  overflow: hidden; /* To maintain rounded corners for inner elements */
  
}


.athlete-indicator {
  position: absolute;
  width: 5px;
  height: 10px;
  background-color: blue;
  top: 0;
  bottom: 0;
  margin: auto;
}


.labels {
	width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #666;
}

.min-label {
  left: 10;
  font-size: 0px;
}

.max-label {
  right: 100;
  font-size: 0px;
   background-color: blue;
}


.reversed-scale {
  width: 100%;
  height: 12px;
  background: linear-gradient(to left, red, yellow, green); /* Gradient colors */
  border-radius: 10px; /* Rounded corners */
  position: relative;
  overflow: hidden; /* To maintain rounded corners for inner elements */
  
}

.reversed-athlete-indicator {
  position: absolute;
  width: 5px;
  height: 10px;
  background-color: blue;
  top: 0;
  bottom: 0;
  margin: auto;
}

#chart1, #chart2, #chart4 {
	width: 100%;
    margin-bottom: 20px;
}

#chart-container {
  width: 100% !important;
}

.custom-navbar {
  background-color: rgba(0, 0, 0, 0.9); /* Dark black with 90% opacity */
  font-family: 'Helvetica Neue';
}

.navbar-toggler-icon {
  display: none; /* Hide by default */
}

/* Show the toggler on extra small and small screens */
@media (max-width: 991.98px) {
  .navbar-toggler-icon {
    display: block;
  }
}


.test-day {
  display: flex;
  align-items: center;
  gap: 10px; /* Separation between items */
}

.nav-link {
  text-decoration: none;
  color: #007bff; /* Change this color to suit your design */
  font-family: 'Helvetica Neue';
}

.arrow-down {
   width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid black;
}

.arrow-up {

  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid black;
}

.instructions-label {
  font-size: 12px; /* Adjust the size as needed */
  display: block;
  text-align: center;
  margin-bottom: 5px; /* Adjust the space between the text and arrow */
  color: #555; /* Adjust the color as needed */
}

.question-mark {
  cursor: pointer;
}

.label {
  cursor: pointer;
    font-size: 0.8em;
}

.question-mark {
  display: inline-block;

  border-radius: 50%;
  padding: 2px 5px;
  margin-left: 5px;
  font-size: 0.8em;
}

.info-container {
  border: 1px solid #ccc;
  padding: 10px;
  margin-top: 10px;
}

 #zones {
    width: 77%;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid #dcdcdc;
    padding: 8px;
    text-align: left;
  }
  th {
    background-color: #f2f2f2;
  }
  tr:nth-child(even) {
    background-color: #f9f9f9;
  }
  .range {
    display: flex;
    justify-content: space-between;
  }
  .range span {
    display: inline-block;
    width: 45%; /* Adjust as needed */
  }
  
.watermark {
  position: absolute;
  z-index: 10; /* ensure it's on top of other elements */
  opacity: 0.2; /* control transparency */
  right: 10px; /* set the distance from the right edge of the container */
  bottom: 10px; /* set the distance from the bottom edge of the container */
  width: 50px; /* control the size of the watermark */
  pointer-events: none; /* makes it unclickable so it doesn't interfere with the chart */
}

footer {
  text-align: center;
  padding: 20px;
  background-color: #f3f3f3;
  margin-top: 20px;
  font-size: 0.8em; /* match the font size of your labels */
  color: #555; /* match the color of your instructions label */
}

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(draw);

// Don't be a cheap fuck just copying the code :* 

function toggleNavbar() {
  var navbar = document.getElementById("navbarNav");
  if (navbar.classList.contains('show')) {
    navbar.classList.remove('show');
  } else {
    navbar.classList.add('show');
  }
}






// Variable to keep track of the collapsed state
var isCollapsed = false;

// Function to apply the collapsed state to the container
function applyCollapseState() {
    if (isCollapsed) {
        document.getElementById('page1a').style.display = 'none';
    } else {
        document.getElementById('page1a').style.display = '';
    }
}

// Example function to navigate to page 2
function goToPage2() {
    // Your logic to show page 2
    document.getElementById('page2').style.display = '';

    // Apply the collapsed state to the container
    applyCollapseState();
}

// Example function to navigate to page 3
function goToPage3() {
    // Your logic to show page 3
    document.getElementById('page3').style.display = '';

    // Apply the collapsed state to the container
    applyCollapseState();
}



function toggleCollapse() {
  var container = document.getElementById('page1a');
  var arrowIcon = document.getElementById('arrowIcon');
  var instructionsLabel = document.getElementById('instructionsLabel');

  // Toggle collapsed state
  if (isCollapsed) {
    container.style.display = '';
    arrowIcon.className = 'arrow-up';
    instructionsLabel.innerHTML = 'Hide Instructions';
  } else {
    container.style.display = 'none';
    arrowIcon.className = 'arrow-down';
    instructionsLabel.innerHTML = 'Show Instructions';
  }

  // Update the collapsed state
  isCollapsed = !isCollapsed;
}

function applyCollapseState() {
  var container = document.getElementById('page1a');
  if (isCollapsed) {
    container.style.display = 'none';
  } else {
    container.style.display = '';
  }
}

function toggleVO2Info() {
  var container = document.getElementById('vo2InfoContainer');
  if (container.style.display === '' || container.style.display === 'block') {
    container.style.display = 'none';
  } else {
    container.style.display = 'block';
  }
}


function toggleFTPInfo() {
  var container = document.getElementById('FTPInfoContainer');
  if (container.style.display === '' || container.style.display === 'block') {
    container.style.display = 'none';
  } else {
    container.style.display = 'block';
  }
}

function toggleVLAMAXInfo() {
  var container = document.getElementById('VLAMAXInfoContainer');
  if (container.style.display === '' || container.style.display === 'block') {
    container.style.display = 'none';
  } else {
    container.style.display = 'block';
  }
}

function toggleATInfo() {
  var container = document.getElementById('ATInfoContainer');
  if (container.style.display === '' || container.style.display === 'block') {
    container.style.display = 'none';
  } else {
    container.style.display = 'block';
  }
}


function toggleATatvo2Info() {
  var container = document.getElementById('ATatvo2InfoContainer');
  if (container.style.display === '' || container.style.display === 'block') {
    container.style.display = 'none';
  } else {
    container.style.display = 'block';
  }
}


function toggleBMRInfo() {
  var container = document.getElementById('BMRInfoContainer');
  if (container.style.display === '' || container.style.display === 'block') {
    container.style.display = 'none';
  } else {
    container.style.display = 'block';
  }
}

function toggleglycogenInfo() {
  var container = document.getElementById('glycogenInfoContainer');
  if (container.style.display === '' || container.style.display === 'block') {
    container.style.display = 'none';
  } else {
    container.style.display = 'block';
  }
}

function toggleFATMInfo() {
  var container = document.getElementById('FATMInfoContainer');
  if (container.style.display === '' || container.style.display === 'block') {
    container.style.display = 'none';
  } else {
    container.style.display = 'block';
  }
}

function convertToPounds(kg) {
  var pounds = kg * 2.20462; // Conversion factor for kilograms to pounds
  document.getElementById('inPounds').value = (pounds ? pounds.toFixed(2) + ' lbs' : ''); // Display the weight in pounds
}

function convertToFeet(cm) {
  var feet = cm / 30.48; // Conversion factor for centimeters to feet
  document.getElementById('inFeet').value = (feet ? feet.toFixed(2) + ' ft' : ''); // Display the height in feet
}


function draw() {
  // Your code to call drawCharts or any necessary setup goes here
}
function cycleCalc(event) {
  isCollapsed = true; // Update the variable
  applyCollapseState(); // Apply the collapsed state to the container

  // Update the arrows and the instructions
  var arrowIcon = document.getElementById('arrowIcon');
  var instructionsLabel = document.getElementById('instructionsLabel');
  arrowIcon.className = 'arrow-down';
  instructionsLabel.innerHTML = 'Show Instructions';
  
       document.getElementById("alert").innerHTML = "";

    var cycleWatts = document.forms["cycleWatts"]["inputWatts"].value;
    var cycleSecs = document.forms["cycleWatts"]["inputSeconds"].value;
    var cycleWeight = document.forms["cycleWatts"]["inputKG"].value;

    if ((cycleWatts == 0 || "" || null || cycleWatts < 0) || (cycleSecs == 0 || "" || null || cycleSecs < 0) || (cycleWeight == 0 || "" || null || cycleWeight < 0)) {
        //alert;
        document.getElementById("alert").innerHTML = "We need all values to calculate the results.";

        event.preventDefault(); // prevents form from submitting
        return;
    } else {
        

event.preventDefault(); // prevents form from submitting

var PPO =  (cycleWatts-25) + (25/30*cycleSecs);
PPO = Math.round(PPO*100)/100;

var RelPPO = PPO / cycleWeight;
RelPPO = Math.round(RelPPO*100)/100;
var vMAXP = RelPPO;
var RePPO = PPO;

var V02 = (9.1175 * vMAXP) + 6.2449;
V02 = Math.round(V02*100)/100;
var FTPV0 = V02;

var displayedV02 = V02 - 4;
document.getElementById("V02").innerHTML = displayedV02 + " ml/min/kg";

var FTP = 56.66 * (FTPV0 * cycleWeight / 1000) ** 1.0594;
FTP = Math.round(FTP);
var SCHFTP = FTP;
document.getElementById("FTP").innerHTML = FTP + " W";

var RELSCH = SCHFTP / cycleWeight;
RELSCH = Math.round(RELSCH * 100) / 100;
document.getElementById("RelSchwelle").innerHTML = RELSCH + " W/kg";


var FATM = .7036 * SCHFTP - 4.8994;
FATM = Math.round(FATM);
var ZONFAT = FATM;
document.getElementById("Fatmax").innerHTML = FATM + " W";
var Zone0L = .20 * RePPO;
    var Zone0L = Math.round(Zone1L);


var displayedWeight = cycleWeight;

document.getElementById("PPO").innerHTML = PPO + " W";
document.getElementById("RelPPO").innerHTML = RelPPO + " W/kg";

// Zone calculations

     //Zone 0low
        document.getElementById("zeroLow").innerHTML = Zone0L;

    //Zone0 High
    var Zone0H = Math.round(.55* SCHFTP);
    document.getElementById("zeroHigh").innerHTML = Zone0H;



    document.getElementById("Fatmax").innerHTML = FATM+ " W";
    //Zone 1low
    var Zone1L = .35 * RePPO;
    var Zone1L = Math.round(Zone0H +1);
    document.getElementById("oneLow").innerHTML = Zone1L;

    //Zone1 High
    var Zone1H = Math.round(.70* SCHFTP);
    document.getElementById("oneHigh").innerHTML = Zone1H;

    //Zone2 Low
    var Zone2L = Math.round(.92* SCHFTP);
    document.getElementById("twoLow").innerHTML = Zone2L;


    //Zone2 High ties on Zone3Low
    var Zone2H = Math.round(SCHFTP *0.99);
    var Zone2H = Math.round(Zone2H);
    document.getElementById("twoHigh").innerHTML = Zone2H;

    //Zone3Low uses Zone 2H
    var Zone3L = Zone2H +1;
    document.getElementById("threeLow").innerHTML = Zone3L;

    //Zone3H
    var Zone3H = Math.round(SCHFTP *1.35);
    document.getElementById("threeHigh").innerHTML = Zone3H;


var POSSIM = Math.round(SCHFTP *1.052);
    document.getElementById("POSSIM").innerHTML = POSSIM;
    
    var POSSIM2 = Math.round(SCHFTP *1.12);
    document.getElementById("POSSIM2").innerHTML = POSSIM2;

document.getElementById("zones").style.display = "block";


        document.getElementById('page1').style.display = 'none';
        document.getElementById('page2').style.display = 'block';
        var V02 = (9.1175 * vMAXP) + 6.2449;
        var displayedV02 = Math.round(V02 - 4);
        document.getElementById('vo2max').value = displayedV02;
        document.getElementById('displayedWeight').value = displayedWeight;
        document.getElementById('FTP').value = FTP;

        event.preventDefault(); // prevents form from submitting
    }
}



function calculateAndGoToPage3(event) {
  // Prevent the default form submission behavior
  if (event) event.preventDefault();
    var vo2Max = document.getElementById('vo2max').value;

  
  const bodyMass = parseFloat(document.getElementById('displayedWeight').value);
  const vo2max = parseFloat(document.getElementById('vo2max').value);
  const workload3min = parseFloat(document.getElementById('workload-3min').value);
  const workload6min = parseFloat(document.getElementById('workload-6min').value);
  const sprintPower = parseFloat(document.getElementById('sprintPower').value);
  const height = parseFloat(document.getElementById('height').value);
  const age = parseFloat(document.getElementById('age').value);

 
const bmr = 651.0 + 13.7 * bodyMass + 5.0 * height - 6.8 * age;
const bmi = bodyMass / ((height / 100) ** 2);
const workload = (workload3min + workload6min) / 3.2;
const volRel = workload / bodyMass;
const vlamax = calculateVLAmax(vo2max, bmi, bodyMass, workload, sprintPower);
const vlamaxscale = vlamax;



function estimateFitnessLevel(vo2max, vlamax) {
  if (vo2max >= 65 && vlamax <= 0.5) {
    return 'elite';
  } else if (vo2max >= 50 && vlamax <= 0.7) {
    return 'advanced';
  } else if (vo2max >= 40 && vlamax <= 0.9) {
    return 'intermediate';
  } else {
    return 'beginner';
  }
}

function getGlycogenPerKgMuscle(fitnessLevel) {
  switch (fitnessLevel) {
    case 'elite':
      return 17;
    case 'advanced':
      return 15;
    case 'intermediate':
      return 14;
    case 'beginner':
    default:
      return 13;
  }
}


function estimateGlycogenStorage(bodyMass, bodyFatPercentage, liverGlycogen, muscleGlycogenPercentage) {
  const fatMass = bodyMass * bodyFatPercentage / 100;
  const leanMass = bodyMass - fatMass;
  const muscleMass = leanMass * muscleMassPercentage;
  
  const liverGlycogenStorage = liverGlycogen;
  const muscleGlycogenStorage = muscleMass * glycogenPerKgMuscle;
  
  return liverGlycogenStorage + muscleGlycogenStorage;
}


const bodyFatPercentage = 14; // assuming 10% for men and 15% for women as a typical fit long-distance triathlete
const liverGlycogen = 90; // assuming 90g for liver glycogen storage
const muscleMassPercentage = 0.70; // assuming 70% of lean mass as muscle mass
const fitnessLevel = estimateFitnessLevel(vo2max, vlamax);
const glycogenPerKgMuscle = getGlycogenPerKgMuscle(fitnessLevel);

const glycogenStorage = estimateGlycogenStorage(bodyMass, bodyFatPercentage, liverGlycogen, muscleMassPercentage, glycogenPerKgMuscle);

console.log(`Estimated fitness level: ${fitnessLevel}`);

console.log(`Assumed glycogen per kg of muscle: ${glycogenPerKgMuscle} g/kg`);


function calculateVLAmax(vo2max, bmi, weight, workload, sprintPower) {
  var maderFormula = 0.02049 / (workload / weight) * vo2max * (bmi / 22) * (1 + 0.000025 * age - 0.0000001 * weight);
  var sprintContribution = 0.000004 / (workload / weight) * sprintPower * (1 + 0.0000001 * age - 0.0000001 * weight);
  return maderFormula + sprintContribution;
}

  // Constants
  let Ks1 = 0.25;
  let Ks2 = 1.1;
  const VolRel = 0.45;
  const bw = bodyMass;
  const Watt_O2 = 12.5 / bodyMass;

  // Potentiate constants
  Ks1 = Ks1 ** 2;
  Ks2 = Ks2 ** 3;

  // Generate oxygen steady-states
  let VO2ss = [];
  for (let i = 1; i < vo2max; i += 0.01) {
    VO2ss.push(i);
  }

  // Calculate ADP
  const ADP = VO2ss.map((vo2) => Math.sqrt((Ks1 * vo2) / (vo2max - vo2)));

  // Calculate vLass
  const vLass = ADP.map((adp, index) => 60 * vlamax / (1 + (Ks2 / (adp ** 3))));

  // Calculate LaComb
  const LaComb = VO2ss.map((vo2) => (0.01576 / VolRel) * vo2);

  // Calculate vLanet
  const vLanet = vLass.map((vl, index) => Math.abs(vl - LaComb[index]));

  // Calculate overall demand and Intensity
  const overall_demand = vLass.map((vl, index) => ((vl * (VolRel * bw) * ((1 / 4.3) * 22.4) / bw) + VO2ss[index]));
  const Intensity = overall_demand.map(od => od / Watt_O2);

  // Find the anaerobic threshold
  const arg_sAT = vLanet.indexOf(Math.min(...vLanet));
  const sAT = Intensity[arg_sAT];

  // Calculate s_Fmx and pcVO2maxAT
 const s_Fmx = vLanet.slice(0, arg_sAT).reduce((max, x, i, arr) => (x > arr[max]) ? i : max, 0);
  const pcVO2maxAT = sAT * Watt_O2 / vo2max;
  
  const CHO_util = vLass.slice(0, arg_sAT + 400).map(vl => (bw * VolRel) * 60 / 1000 / 2 * 162.14);
  const Fat_util = vLanet.slice(0, arg_sAT).map(vl => (vl * VolRel) / 0.01576 * bw * 60 * 4.65 / 9.5 / 1000);

  // ADDED 
//added for send to server might be double - need to check
  const vlamaxValue = vlamax.toFixed(2);
  const sATValue = sAT.toFixed(2);
  const pcVO2maxATValue = pcVO2maxAT.toFixed(2);
  const bmrValue = bmr.toFixed(2);
  const glycogenStorageValue = glycogenStorage.toFixed(2);
  const fitnessLevelValue = fitnessLevel;

  document.getElementById('vlamax-value').innerHTML = '<b>VLaMax:</b><br> ' + vlamaxValue + ' mmol/l/s ' +  '<span class="question-mark" onclick="toggleVLAMAXInfo()"><i class="fa fa-question-circle"></i>';
  document.getElementById('AT').innerHTML =  '<b>Anaerobic Threshold:</b> ' + sATValue + 'w' + '<span class="question-mark" onclick="toggleATInfo()"><i class="fa fa-question-circle"></i>';
  document.getElementById('ATatvo2').innerHTML =  '<b>AT at % VO2max:</b> ' + pcVO2maxATValue + '<span class="question-mark" onclick="toggleATatvo2Info()"><i class="fa fa-question-circle"></i>';
  document.getElementById('BMR').innerHTML =  '<b>Base Metabolic Rate:</b> ' + bmrValue + ' kcal/day' + '<span class="question-mark" onclick="toggleBMRInfo()"><i class="fa fa-question-circle"></i>';
  document.getElementById('glycogen').innerHTML =  '<b>Estimated Glycogen Storage:</b> ' + glycogenStorageValue + ' grams' + '<span class="question-mark" onclick="toggleglycogenInfo()"><i class="fa fa-question-circle"></i>';
  document.getElementById('fitnesslevel').innerHTML ='<b>Estimated Fitness Level:</b> ' + fitnessLevelValue;


  console.log(`Estimated VlaMax: ${vlamaxValue}`);
  
  var capturedLogs = '';
  var oldConsoleLog = console.log;
  
  console.log = function (message) {
      capturedLogs += message + '\n';
      oldConsoleLog.apply(console, arguments);
  };
  
  function sendLogsToServer() {
      var browserTimestamp = new Date().toISOString();
      var logDataWithTimestamp = "Browser Timestamp: " + browserTimestamp + "\n" + capturedLogs;
      var vo2maxvalue = vo2max; // Make sure this variable is correctly defined and holds the desired value
  
      var xhr = new XMLHttpRequest();
      xhr.open("POST", "yourServerSideScript.php", true);
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      xhr.send("data=" + encodeURIComponent(logDataWithTimestamp) + "&v02maxvalue=" + encodeURIComponent(vo2maxvalue));
  }
  
  function sendToServer(data) {
      var xhr = new XMLHttpRequest();
      xhr.open("POST", "yourServerSideScript.php", true);
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      xhr.send("data=" + encodeURIComponent(data));
  }
  
  document.getElementById('finalbutton').onsubmit = function(event) {
      event.preventDefault();
  
      // recorded logs 
      
      console.log(`****************************`);
      console.log(`Estimated VlaMax: ${vlamaxValue}`);
      console.log(`Estimated Vo2Max: ${vo2max}`);
      console.log(`Estimated fitness level: ${fitnessLevel}`);
      console.log(`Assumed glycogen per kg of muscle: ${glycogenPerKgMuscle} g/kg`);
      console.log(`*******INPUTS************`);
      console.log(`workload3min: ${workload3min}`);
      console.log(`workload6min: ${workload6min}`);
      console.log(`sprintPower: ${sprintPower}`);
      console.log(`age: ${age}`);
      console.log(`height: ${height}`);
      console.log(`weight: ${weight}`);

    
      sendLogsToServer(); // or capture console logs
  };


function drawScale(elementId, value, minValue, maxValue) {
  const container = document.getElementById(elementId);
  const scaleWidth = 100; // Percentage width of the scale
  const athletePosition = ((value - minValue) / (maxValue - minValue)) * scaleWidth;

  // Clear previous content
  container.innerHTML = '';

  // Create the scale
  const scale = document.createElement('div');
  scale.className = 'scale';
  container.appendChild(scale);

  // Create the athlete indicator
  const athleteIndicator = document.createElement('div');
  athleteIndicator.className = 'athlete-indicator';
  athleteIndicator.style.left = `${athletePosition}%`;
  scale.appendChild(athleteIndicator);

  // Create labels
  const minLabel = document.createElement('span');
  minLabel.className = 'min-label';
  minLabel.textContent = minValue;
  container.appendChild(minLabel);

  const maxLabel = document.createElement('span');
  maxLabel.className = 'max-label';
  maxLabel.textContent = maxValue;
  container.appendChild(maxLabel);
}

function drawReversedScale(elementId, value, minValue, maxValue) {
  const container = document.getElementById(elementId);
  const scaleWidth = 100; // Percentage width of the scale
  const athletePosition = ((value - minValue) / (maxValue - minValue)) * scaleWidth;

  // Clear previous content
  container.innerHTML = '';

  // Create the reversed scale
  const scale = document.createElement('div');
  scale.className = 'reversed-scale';
  container.appendChild(scale);

  // Create the reversed athlete indicator
  const athleteIndicator = document.createElement('div');
  athleteIndicator.className = 'reversed-athlete-indicator';
  athleteIndicator.style.left = `${athletePosition}%`;
  scale.appendChild(athleteIndicator);

  // Create labels
  const minLabel = document.createElement('span');
  minLabel.className = 'min-label';
  minLabel.textContent = minValue;
  container.appendChild(minLabel);

  const maxLabel = document.createElement('span');
  maxLabel.className = 'max-label';
  maxLabel.textContent = maxValue;
  container.appendChild(maxLabel);
}

// Define the minimum and maximum values for the scales
const FTP = parseFloat(document.getElementById('FTP').value);


var FTPminValue = 100.0, FTPmaxValue = 450.0;
var Vo2MaxMinValue = 30.0, Vo2MaxMaxValue = 90.0;
var vlamaxMinValue = 0.1, vlamaxMaxValue = 1.3;

// Draw the scales
drawScale('ftp-scale', FTP, FTPminValue, FTPmaxValue);
drawScale('vo2max-scale', vo2max, Vo2MaxMinValue, Vo2MaxMaxValue);
drawReversedScale('vlamax-scale', vlamaxscale, vlamaxMinValue, vlamaxMaxValue);




 drawCharts(VO2ss, vLass, LaComb, Intensity, overall_demand, bodyMass, volRel, vLanet); // Pass required variables as arguments


function calculateSteadyStateLactate(VO2ss, vLamax, Kel, VolRel, Ks1, Ks2, VO2max, arg_sAT) {
  return VO2ss.slice(0, arg_sAT).map((vo2, index) => {
    return Math.sqrt(
      (vLamax * Kel * 60) /
        (
          (0.01576 / VolRel) * vo2 *
          (1 + (Ks2 / ((Ks1 * vo2) / (VO2max - vo2)) ** (3 / 2))) -
          vLamax * 60
        )
    );
  });
}


function drawCharts(VO2ss, vLass, LaComb, Intensity, overall_demand, bodyMass, volRel, vLanet) {
  plotCurves(VO2ss, vLass, LaComb, Intensity, overall_demand, bodyMass, volRel, vLanet);
}


function findIndexOfMinimum(array) {
  let minIndex = 0;
  for (let i = 1; i < array.length; i++) {
    if (array[i] < array[minIndex]) {
      minIndex = i;
    }
  }
  return minIndex;
}

   // Calculate net lactate formation
  function calcNetLactateFormation(vLass, LaComb) {
    let vLanet = vLass.map((val, idx) => Math.abs(val - LaComb[idx]));
    return vLanet;
  }
  
function plotCurves(VO2ss, vLass, LaComb, Intensity, overall_demand, bodyMass, volRel, vLanet) {
  // ...
	
	// Calculate CHO_util and FAT_util
  const arg_sAT = findIndexOfMinimum(vLanet);
  const bw = bodyMass; // Replace 'bodyMass' with the appropriate variable name for body weight
 // const VolRel = volRel; // Replace 'volRel' with the appropriate variable name for VolRel
  
    // Find the closest intensity values for 1.0 and 4.0 mmol/L lactate levels
  let indexOf1mmol = findIndexOfClosest(vLass, 1.0);
  let indexOf4mmol = findIndexOfClosest(vLass, 4.0);

 

  let netLactateFormation = calcNetLactateFormation(vLass, LaComb);
  
  
  const CHO_util = vLass.slice(0, arg_sAT + 600).map(value => value * (bw * VolRel) * 60 / 1000 / 2 * 162.14); // 162.14 molare masse glykogen
  const Fat_util = vLanet.slice(0, arg_sAT).map(value => (value * VolRel) / 0.01576 * bw * 60 * 4.65 / 9.5 / 1000); // 4.65 kcal/L VO2 stearinsäure, 9.5 g/kcal

   // Create DataTables for the charts
  let data1 = new google.visualization.DataTable();
  data1.addColumn('number', 'Intensity');
  data1.addColumn('number', 'Carbs');
  data1.addColumn('number', 'Fat');
 data1.addRows(Intensity.slice(0, CHO_util.length).map((val, idx) => [val, CHO_util[idx], Fat_util[idx]]));

  let data2 = new google.visualization.DataTable();
  data2.addColumn('number', 'VO2ss');
  data2.addColumn('number', 'L');
  data2.addColumn({type: 'string', role: 'annotation'}); // Add an annotation column
  data2.addRows(VO2ss.map((val, idx) => {
    let annotation = null;
    if (idx === indexOf1mmol) {
      annotation = '1.0 mmol/L';
    } else if (idx === indexOf4mmol) {
      annotation = '4.0 mmol/L';
    }
    return [val, vLass[idx], annotation];
  }));



let data4 = new google.visualization.DataTable();
data4.addColumn('number', 'Intensity');
data4.addColumn('number', 'O Demand');
data4.addColumn('number', 'O Uptake');
data4.addRows(Intensity.map((val, idx) => [val, overall_demand[idx], VO2ss[idx]]));


  // Define options for the charts
  let options1 = {
    title: 'Carbohydrates, Fat Utilization, and Intensity',
    width: '100%', 
    height: 600, 
    hAxis: { title: 'Power [W]', viewWindow: { min: 100 } },
    vAxes: {
      0: { title: 'Carbohydrate g/h', viewWindow: { min: 0, max: 300 } },
      1: { title: 'Fat g/h', viewWindow: { min: 0, max: 200 } },
    },
    annotations: {
        style: 'point', // Ensure the annotation is displayed as a point
        textStyle: {
            fontSize: 12,
            color: 'black',
            auraColor: 'none'
        }
    },
    series: {
      0: { targetAxisIndex: 0 },
      1: { targetAxisIndex: 1 },
    },
    legend: { position: 'bottom' },
     tooltip: {
      trigger: 'both'
       }
  };
  

    let options2 = {
  title: 'Lactate Formation with VO2ss',
  width: '100%',
  height: 600,
  hAxis: { title: 'VO2ss [ml/min/kg]' },
  vAxis: { title: 'Lactate[mmol/l]' },
  legend: { position: 'bottom' },
  annotations: {
    textStyle: {
      fontSize: 12,
      bold: true
    }
  },
  width: '100%' // Set the width to 100% of the container
};
  
let options4 = {
  title: 'O2 Deficit',
  width: '100%', 
  height: 600, 
  hAxis: { title: 'Power [W]' },
  vAxis: { title: 'Oxygen [ml/min/kg]' },
  series: {
    0: { color: 'red', lineWidth: 2 },
    1: { color: 'blue', lineWidth: 2 }
  },
    legend: { position: 'bottom' }
};

  // Create the charts
  let chart1 = new google.visualization.LineChart(document.getElementById('chart1'));
  chart1.draw(data1, options1);

 let chart2 = new google.visualization.LineChart(document.getElementById('chart2'));
  chart2.draw(data2, options2);


let chart4 = new google.visualization.LineChart(document.getElementById('chart4'));
chart4.draw(data4, options4);
  }

  window.addEventListener('resize', function() {
    chart1.draw(data1, options1);
    chart2.draw(data2, options2);
    chart4.draw(data4, options4);
    chartCombined.draw(dataCombined, optionsCombined);
  });

  function plotCombinedChart(Intensity, vLanet, vLass, LaComb, arg_sAT) {
    // Create DataTable for the Combined Chart
    let dataCombined = new google.visualization.DataTable();
    dataCombined.addColumn('number', 'Intensity');
    dataCombined.addColumn('number', 'Lack of Pyruvate | Lactate Accumulation');
    dataCombined.addColumn('number', 'Gross Lactate Formation');
    dataCombined.addColumn('number', 'Potential Lactate Removal');
    dataCombined.addColumn({type: 'string', role: 'annotation'}); // Annotation column

    // Add data to the chart
    Intensity.forEach((intensity, index) => {
        let annotation = null;
        if (index === arg_sAT) {
            annotation = 'AT';
        }
        dataCombined.addRow([intensity, vLanet[index], vLass[index], LaComb[index], annotation]);
    });

    // Define options for the Combined Chart
    let optionsCombined = {
        title: 'Lactate and Pyruvate Dynamics with Anaerobic Threshold',
        width: '100%', // or another appropriate value
        hAxis: { title: 'Run Speed [m/s]', viewWindow: { min: 0 } },
        vAxis: { title: 'Value [mmol/L]', viewWindow: { min: 0, max: 10 } },
        series: {
            0: { color: 'orange' },
            1: { color: 'blue' },
            2: { color: 'green' }
        },
        legend: { position: 'bottom' },
        annotations: {
            style: 'point', // Change to 'line' or other styles as needed
            textStyle: {
                fontSize: 12,
                bold: true,
                color: 'red'
            }
        }
    };

    // Create the Combined Chart
    let chartCombined = new google.visualization.LineChart(document.getElementById('chartCombined'));
    chartCombined.draw(dataCombined, optionsCombined);
}

// Call this function where appropriate in your code, after calculating vLanet, vLass, LaComb, and arg_sAT
plotCombinedChart(Intensity, vLanet, vLass, LaComb, arg_sAT);

  
// Helper function to find the index of the closest value in an array
function findIndexOfClosest(array, target) {
  let closestIndex = 0;
  let minDiff = Math.abs(target - array[0]);

  for (let i = 1; i < array.length; i++) {
    let diff = Math.abs(target - array[i]);
    if (diff < minDiff) {
      minDiff = diff;
      closestIndex = i;
    }
  }

  return closestIndex;
}


    document.getElementById('page2').style.display = 'none';
    document.getElementById('page3').style.display = 'block';
}