Fix route usage and add link to new pages in footer; fix app.py line endings

.gitattributes

@@ -0,0 +1,26 @@
+# Normalize all text files to LF on checkout and commit.
+# This prevents CRLF line-ending noise from files uploaded via the GitHub web UI.
+* text=auto eol=lf
+
+# Explicitly enforce LF for the most sensitive file types in this project
+*.py   text eol=lf
+*.html text eol=lf
+*.css  text eol=lf
+*.js   text eol=lf
+*.json text eol=lf
+*.md   text eol=lf
+*.txt  text eol=lf
+*.sh   text eol=lf
+
+# Treat compiled/binary assets as binary (no line-ending conversion)
+*.png  binary
+*.jpg  binary
+*.jpeg binary
+*.gif  binary
+*.ico  binary
+*.svg  binary
+*.woff binary
+*.woff2 binary
+*.ttf  binary
+*.eot  binary
+*.z    binary

app.py

@@ -859,6 +859,24 @@ def tool_page(toolname):
     )
 
 
+################################################################################
+### Pages under 'Implementation'
+
+# General Explore our work
+@app.route("/explore_our_work")
+def explore_our_work():
+    return render_template("RL3/explore_our_work.html")
+
+# General Training
+@app.route("/training")
+def training():
+    return render_template("RL3/training.html")
+
+# General Impact
+@app.route("/impact")
+def impact():
+    return render_template("RL3/impact.html")
+
 ################################################################################
 ### Pages under 'Process Flow'
 

static/images/implementation/Readme.txt

@@ -0,0 +1 @@
+This folder contains the images contains images for implmentation pages.

templates/RL3/training.html

@@ -0,0 +1,146 @@
+{% extends "base.html" %} {% block content %}
+
+<!-- Page-specific CSS for home page -->
+<link
+  rel="stylesheet"
+  href="{{ url_for('static', filename='css/home.css') }}"
+/>
+
+<!-- Font Awesome Icons for social/contact icons -->
+<link
+  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
+  rel="stylesheet"
+/>
+
+<!-- Section A with internal navigation buttons to the implementation pages -->
+<section class="container pb-md-0 py-3 border-top border-bottom border-secondary rounded"> <!-- Section A start-->
+	<div id="implementation menu">
+		<div class="row py-3">
+        	<div class="col-md pb-2 d-flex align-items-stretch">
+          		<button class="btn w-100 text-white btn text-white btn-secondary" onclick="location.href='/explore_our_work'"><b>Explore our work</b></button>
+          	</div>
+        	<div class="col-md pb-2 d-flex align-items-stretch">
+          		<button class="btn w-100 text-white btn text-white btn-secondary" onclick="location.href='/training'"><b>Training</b></button>
+          	</div> 
+        	<div class="col-md pb-2 d-flex align-items-stretch">
+          		<button class="btn w-100 text-white btn text-white btn-secondary" onclick="location.href='/impact'"><b>Impact</b></button>
+          	</div>
+		</div></div>
+</section> <!-- Section A finish-->
+
+<!-- Here starts the section B with the main heading of the page and the introductory sentence -->
+<section class="container pt-md-3 pb-md-3 py-5"> <!-- Section B start-->
+  	<div class="row align-items-center">
+    	<div class="col-md-12">
+			<h1><span>Training</span></h1>
+			<p>Training and education to master the Virtual Human Platform and the principles of NAMs in human-based safety assessment</p>
+    	</div>
+  	</div>
+</section> <!-- Section B finish-->
+
+<!-- Here starts the section C containing the tabs and cards with information -->
+
+<section class="container pt-md-3 pb-md-3 py-5"> <!--Section C start -->
+	<div class="card"> <!--Start of divisions for tabs-->
+  		<div class="card-header"> <!-- Start of headers of tabs, listed from 0 to n -->
+    		<ul class="nav nav-tabs card-header-tabs" role="tablist">
+      			<li class="nav-item" role="presentation">
+        			<a class="nav-link text-start active" id="simple-tab-0" data-bs-toggle="tab" href="#simple-tabpanel-0" role="tab" aria-controls="simple-tabpanel-0" aria-selected="true">How to use the platform</a>
+      			</li>
+      			<li class="nav-item" role="presentation">
+        			<a class="nav-link text-start" id="simple-tab-1" data-bs-toggle="tab" href="#simple-tabpanel-1" role="tab" aria-controls="simple-tabpanel-1" aria-selected="false">Educational resources</a>
+      			</li>
+	 			<li class="nav-item" role="presentation">
+    	    		<a class="nav-link text-start" id="simple-tab-2" data-bs-toggle="tab" href="#simple-tabpanel-2" role="tab" aria-controls="simple-tabpanel-2" aria-selected="false">Publications</a>
+      			</li>
+    		</ul>
+ 		</div> <!-- Finish of headers of tabs, listed from 0 to n -->
+<!--###################################################################################################-->
+<!--How to use the platform--->				
+<!--###################################################################################################-->
+				<!-- For the accordion items in the following tab change the simple-tab number and change contents1 to th following (e.g., 2)-->
+		<div class="card-body"> <!-- Start of divisions for tab content-->
+    		<div class="tab-content" id="tab-content"> <!-- Start of main division of the tabs (vertical division)-->
+      			<div class="tab-pane active" id="simple-tabpanel-0" role="tabpanel" aria-labelledby="simple-tab-0"> <!-- Start of container for tab 0 (first one) -->
+					<p>Teaser text to be included later</p> <!--Teaser text of tab before cards-->
+					<div class="accordion accordion-flush" id="aboutAccordion"><!-- Start of cards accordion (horizontal information)-->
+
+						<!--################################-->
+						<!-- in a new accordion item chage: headingOne, collpaseOne to the following one, e.g., headingTwo and collpaseTwo-->
+						<div class="accordion-item"> <!--Start of card item (accordion item)-->
+		     				<h2 class="accordion-header" id="contents1-headingOne">
+        					<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#contents1-collapseOne" aria-expanded="false" aria-controls="contents1-collapseOne">First card</button>
+      						</h2>
+      						<div id="contents1-collapseOne" class="accordion-collapse collapse collapse" aria-labelledby="contents1-headingOne"><!--Start for card collapsible information-->
+        					<div class="accordion-body" style="text-align: justify;"> <!--Start for content container-->
+			 					<p>Content to be added</p>	
+							</div> <!--Finish for content container-->
+							</div><!--Finish for card collapsible information-->
+						</div><!--Finish of car item (accordion item)-->
+						<!--################################-->
+
+					</div><!-- End of cards accordion (horizontal information)-->
+				</div>  <!-- End for container for tab 0 (first one)-->
+			</div> <!-- End of main division for the tabs (vertical dividison)-->
+<!--###################################################################################################-->
+<!--Educational resources--->	
+<!--###################################################################################################-->
+				<!-- For the accordion items in the following tab change the simple-tab number and change contents1 to th following (e.g., 2)-->
+    		<div class="tab-content" id="tab-content"> <!-- Start of main division of the tabs (vertical division)-->
+      			<div class="tab-pane" id="simple-tabpanel-1" role="tabpanel" aria-labelledby="simple-tab-1"> <!-- Start of container for tab 0 (first one) -->
+					<p>Teaser text to be included later</p> <!--Teaser text of tab before cards-->
+					<div class="accordion accordion-flush" id="aboutAccordion"><!-- Start of cards accordion (horizontal information)-->
+
+						<!--################################-->
+						<!-- in a new accordion item chage: headingOne, collpaseOne to the following one, e.g., headingTwo and collpaseTwo-->
+						<div class="accordion-item"> <!--Start of card item (accordion item)-->
+		     				<h2 class="accordion-header" id="contents2-headingOne">
+        					<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#contents2-collapseOne" aria-expanded="false" aria-controls="contents2-collapseOne">First card</button>
+      						</h2>
+      						<div id="contents2-collapseOne" class="accordion-collapse collapse collapse" aria-labelledby="contents2-headingOne"><!--Start for card collapsible information-->
+        					<div class="accordion-body" style="text-align: justify;"> <!--Start for content container-->
+			 					<p>To be added later.</p>
+							</div> <!--Finish for content container-->
+							</div><!--Finish for card collapsible information-->
+						</div><!--Finish of car item (accordion item)-->
+						<!--################################-->
+
+
+					</div><!-- End of cards accordion (horizontal information)-->
+				</div>  <!-- End for container for tab 0 (first one)-->
+			</div> <!-- End of main division for the tabs (vertical dividison)-->
+<!--###################################################################################################-->
+<!--Publications--->
+<!--###################################################################################################-->
+				<!-- For the accordion items in the following tab change the simple-tab number and if desired change contents1 to the following (e.g., 2)-->
+    		<div class="tab-content" id="tab-content"> <!-- Start of main division of the tabs (vertical division)-->
+      			<div class="tab-pane" id="simple-tabpanel-2" role="tabpanel" aria-labelledby="simple-tab-2"> <!-- Start of container for tab 0 (first one) -->
+					<p>Teaser text to be included later</p> <!--Teaser text of tab before cards-->
+					<div class="accordion accordion-flush" id="aboutAccordion"><!-- Start of cards accordion (horizontal information)-->
+
+						<!--################################-->
+						<!-- in a new accordion item chage: headingOne, collpaseOne to the following one, e.g., headingTwo and collpaseTwo-->
+						<div class="accordion-item"> <!--Start of card item (accordion item)-->
+		     				<h2 class="accordion-header" id="contents3-headingOne">
+        					<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#contents3-collapseOne" aria-expanded="false" aria-controls="contents3-collapseOne">To add later</button>
+      						</h2>
+      						<div id="contents3-collapseOne" class="accordion-collapse collapse collapse" aria-labelledby="contents3-headingOne"><!--Start for card collapsible information-->
+        					<div class="accordion-body" style="text-align: justify;"> <!--Start for content container-->
+			 					<p>To add later</p>     
+							</div> <!--Finish for content container-->
+							</div><!--Finish for card collapsible information-->
+						</div><!--Finish of car item (accordion item)-->
+						<!--################################-->
+
+					</div><!-- End of cards accordion (horizontal information)-->
+				</div>  <!-- End for container for tab 0 (first one)-->
+			</div> <!-- End of main division for the tabs (vertical dividison)-->
+<!--###################################################################################################-->
+		</div> <!--End of dividisions for tab content -->
+
+	</div> <!--Finish of divisions for tabs-->
+</section> <!--Section C finish -->
+
+<!-- Scroll down arrow for navigation -->
+<div class="scroll-down-arrow" style="border-top: 20px solid var(--bs-vhppink);" onclick="scrollToNextSection()"></div>
+{% endblock %}

templates/base.html

@@ -81,6 +81,19 @@
   <!-- Desktop buttons (hidden on mobile) -->
   <div class="d-none d-lg-flex align-items-center gap-3">
 
+  <!-- Collapsible implementation menu -->
+	 <div class="btn-group" role="group" >
+      <button class="toggler bg-white border-secondary rounded" type="button" style="min-width:30px"  data-bs-toggle="dropdown" aria-expanded="false">
+		<span class="navbar-toggler-icon"></span>
+		<span class="visually-hidden">Toggle Dropdown</span>
+      </button>
+      <ul class="dropdown-menu dropdown-menu-end">
+        <li><a class="dropdown-item" href="/explore_our_work">Explore our work</a></li>
+        <li><a class="dropdown-item" href="/training">Training</a></li>
+        <li><a class="dropdown-item" href="/impact">Impact</a></li>
+      </ul>
+    </div>
+
     <!-- Glossary Toggle Switch -->
     <div class="form-check form-switch mb-0 text-nowrap" data-vhp-glossary-skip>
       <input class="form-check-input" type="checkbox" role="switch" id="glossary-toggle">
@@ -266,6 +279,19 @@ <h5 class="offcanvas-title" id="offcanvasMenuLabel">Menu</h5>
                          this.closest('.offcanvas') && bootstrap.Offcanvas.getInstance(this.closest('.offcanvas'))?.hide();">
         <label class="form-check-label" for="glossary-toggle-mobile">Glossary</label>
       </div>
+      <!-- Implementation links (mobile) -->
+	    <div class="btn-group">
+        <button class="btn bg-secondary text-light" data-bs-dismiss="offcanvas">Towards a virtual human</button>
+        <button class="btn bg-secondary text-light dropdown-toggle dropdown-toggle-split" type="button" data-bs-toggle="collapse" data-bs-target="#collapseImplementation" aria-expanded="false" aria-controls="collapseImplementation" style="max-width: 30vw;"></button>
+      </div>
+      <div class="collapse" id="collapseImplementation">
+        <div class="d-flex flex-column ps-3 gap-2">
+          <button class="btn btn-light text-start" onclick="location.href='/explore_our_work'" data-bs-dismiss="offcanvas">Explore our work</button>
+          <button class="btn btn-light text-start" onclick="location.href='/training'" data-bs-dismiss="offcanvas">Training</button>
+          <button class="btn btn-light text-start" onclick="location.href='/impact'" data-bs-dismiss="offcanvas">Impact</button>
+        </div>
+      </div>
+    <!-- end of implementation links (mobile) -->
     </div>
   </div>
 </div>
@@ -283,6 +309,9 @@ <h6 class="text-uppercase fw-bold mb-3">EXPLORE</h6>
               <li><a href="/tools" class="text-decoration-none link-vhppink fs-7 small">Tools</a></li>
               <li><a href="/casestudies" class="text-decoration-none link-vhppink fs-7 small">Case Studies</a></li>
               <li><a href="/data" class="text-decoration-none link-vhppink fs-7 small">Data</a></li>
+              <li><a href="/explore_our_work" class="text-decoration-none link-vhppink fs-7 small">Explore our work</a></li>
+              <li><a href="/training" class="text-decoration-none link-vhppink fs-7 small">Training</a></li>
+              <li><a href="/impact" class="text-decoration-none link-vhppink fs-7 small">Impact</a></li>
             </ul>
           </div>
           <div class="col-md-3">
@@ -340,4 +369,4 @@ <h6 class="text-uppercase fw-bold mb-3">CONNECT</h6>
       window.DATA_MENU = Array.isArray(window.DATA_MENU) ? window.DATA_MENU : [];
     </script>
   </body>
-</html>
+</html>

templates/home.html

@@ -150,6 +150,23 @@ <h5 class="card-title text-white m-0">Data</h5>
 </section>
 <!-- About section: project description and mission -->
 <section class="container py-5" id="about-section">
+  <h2 class="mb-4"><strong>About the Virtual Human Platform</strong></h2>
+	<div>
+	<!---<h4>What is the Virtual Human Platform?</h4>-->
+	<p>The Virtual Human Platform (VHP) is a digital infrastructure that supports human-relevant risk assessment of chemicals and pharmaceuticals. By integrating  human-derived data, advanced in vitro models, and  computational tools, the VHP enables transparent, reproducible and mechanistically informed safety assessment moving beyond traditional animal testing. </p>
+	<p>Through structured, interactive workflows and a user-friendly interface, the platform connects data, models, and analytical tools to address real-word regulatory questions. Every step, data source, and underlying assumption remains visible, supporting expert reasoning and building trust in next generation risk assessment.</p>
+	<p>On the platform, three human relevant case studies are used as demonstrators:
+	<ul>
+	<li>Medication induced kidney toxicity, addressing disease state.</li>
+	<li>Neurodegeneration following lifelong pesticide exposure, addressing life course exposure.</li>
+	<li>Disruption of thyroid hormone mediated brain development due to chemical exposure, addressing sex and age specific differences.</li>
+	</ul></p>
+	<p>These case studies show how multiple New Approach Methodologies (NAMs) can be combined to address regulatory challenges and illustrate practices concerning data, model assumptions, and interpretation. </p>
+	<p>Developed in co-creation with academic, industrial, regulatory, and societal partners, the VHP supports the transition to animal-free, human-relevant safety assessment. We invite all stakeholders to explore, contribute, and help shape the future of risk assessment with us.</p>
+	<p>Learn more about VHP4Safety, the project behind the VHP, in <a href="/explore_our_work">“Explore our work”</a>. </p>
+	</div>
+</section>
+<!--<section class="container py-5" id="about-section">
   <h2 class="mb-4"><strong>About VHP4Safety</strong></h2>
   <div class="accordion accordion-flush" id="aboutAccordion">
     <div class="accordion-item">
@@ -223,7 +240,7 @@ <h2 class="accordion-header" id="about-headingFour">
       </div>
     </div>
   </div>
-</section>
+</section>-->
 <section class="bg-vhplight-blue img-fluid" id="partners-section">
   <div class="container py-5">
     <h2 class="mb-4">