<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Healthcare Training Platform - Skin Tear Prevention</title>
<link rel="stylesheet" href="style.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
</head>
<body>
<!-- Header -->
<header class="header">
<nav class="nav container">
<div class="nav__brand">
<i class="fas fa-heartbeat"></i>
<span>HealthCare Pro Training</span>
</div>
<div class="nav__menu">
<a href="#home" class="nav__link">Home</a>
<a href="#modules" class="nav__link">Training</a>
<a href="#quiz" class="nav__link">Assessment</a>
<a href="#resources" class="nav__link">Resources</a>
</div>
</nav>
</header>
<!-- Main Content -->
<main>
<!-- Hero Section -->
<section id="home" class="hero">
<div class="container">
<div class="hero__content">
<div class="hero__animation">
<i class="fas fa-shield-alt hero__icon"></i>
</div>
<h1 class="hero__title">Healthcare Professional Training Platform</h1>
<p class="hero__subtitle">Comprehensive skin tear prevention training for healthcare professionals to improve patient outcomes and safety</p>
<button class="btn btn--primary btn--lg hero__cta" onclick="showRoleSelection()">
Start Your Training Journey
<i class="fas fa-arrow-right"></i>
</button>
</div>
<div class="hero__stats">
<div class="stat">
<span class="stat__number">85%</span>
<span class="stat__label">Preventable Cases</span>
</div>
<div class="stat">
<span class="stat__number">5</span>
<span class="stat__label">Training Modules</span>
</div>
<div class="stat">
<span class="stat__number">70%</span>
<span class="stat__label">Reduction Possible</span>
</div>
</div>
</div>
</section>
<!-- Role Selection Modal -->
<div id="role-modal" class="modal">
<div class="modal__content">
<div class="modal__header">
<h2>Select Your Experience Level</h2>
<button class="modal__close" onclick="closeRoleSelection()">×</button>
</div>
<div class="role-cards">
<div class="role-card" onclick="selectRole('new')">
<div class="role-card__icon">
<i class="fas fa-user-plus"></i>
</div>
<h3>New Healthcare Professional</h3>
<p>Just starting or less than 6 months experience in healthcare</p>
<div class="role-card__features">
<span><i class="fas fa-check"></i> Basic fundamentals</span>
<span><i class="fas fa-check"></i> Step-by-step guidance</span>
<span><i class="fas fa-check"></i> Interactive learning</span>
</div>
</div>
<div class="role-card" onclick="selectRole('experienced')">
<div class="role-card__icon">
<i class="fas fa-user-md"></i>
</div>
<h3>Experienced Professional</h3>
<p>6 months to 3 years of healthcare experience</p>
<div class="role-card__features">
<span><i class="fas fa-check"></i> Advanced techniques</span>
<span><i class="fas fa-check"></i> Best practices</span>
<span><i class="fas fa-check"></i> Evidence-based care</span>
</div>
</div>
<div class="role-card" onclick="selectRole('supervisor')">
<div class="role-card__icon">
<i class="fas fa-user-tie"></i>
</div>
<h3>Supervisor/Team Lead</h3>
<p>Team lead or supervisory role in healthcare</p>
<div class="role-card__features">
<span><i class="fas fa-check"></i> Team training</span>
<span><i class="fas fa-check"></i> Quality improvement</span>
<span><i class="fas fa-check"></i> Policy development</span>
</div>
</div>
</div>
</div>
</div>
<!-- Training Modules Section -->
<section id="modules" class="modules">
<div class="container">
<div class="section-header">
<h2>Training Modules</h2>
<p>Complete all 5 modules to master skin tear prevention</p>
</div>
<div class="modules-grid">
<!-- ... module cards ... (same as before, omitted for brevity) ... -->
</div>
</div>
</section>
<!-- Module Content Modal -->
<div id="module-modal" class="modal modal--large">
<div class="modal__content">
<div class="modal__header">
<h2 id="module-title">Module Title</h2>
<div class="module-navigation">
<button class="btn btn--text" onclick="previousModule()">
<i class="fas fa-chevron-left"></i> Previous
</button>
<span id="module-progress-text">Module 1 of 5</span>
<button class="btn btn--text" onclick="nextModule()">
Next <i class="fas fa-chevron-right"></i>
</button>
</div>
<button class="modal__close" onclick="closeModule()">×</button>
</div>
<div class="modal__body" id="module-content">
<!-- Module content will be inserted here -->
</div>
<div class="modal__footer">
<button class="btn btn--primary" onclick="completeModule()">Complete Module</button>
</div>
</div>
</div>
<!-- Quiz Section -->
<section id="quiz" class="quiz">
<div class="container">
<div class="section-header">
<h2>Knowledge Assessment</h2>
<p>Test your understanding of skin tear prevention. You need 80% to pass.</p>
</div>
<div class="quiz-container" id="quiz-container">
<div class="quiz-header">
<div class="quiz-progress">
<span>Question <span id="current-question">1</span> of <span id="total-questions">5</span></span>
<div class="progress-bar">
<div class="progress-fill" id="quiz-progress-fill"></div>
</div>
</div>
</div>
<div class="quiz-content" id="quiz-content">
<!-- Quiz questions will be inserted here -->
</div>
</div>
<div class="quiz-results hidden" id="quiz-results">
<div class="results-card">
<h3>Assessment Complete!</h3>
<div class="score-display">
<span class="score-number" id="final-score">0</span>
<span class="score-total">/ 5</span>
</div>
<p id="score-message"></p>
<div class="results-actions">
<button class="btn btn--primary" onclick="retakeQuiz()">Retake Quiz</button>
<button class="btn btn--secondary" onclick="window.print()">Print This Page</button>
</div>
</div>
</div>
</div>
</section>
<!-- Resources Section -->
<section id="resources" class="resources">
<div class="container">
<div class="section-header">
<h2>Quick Reference Resources</h2>
<p>Downloadable guides and reference materials</p>
</div>
<div class="resources-grid">
<!-- ... resource cards (same as before) ... -->
</div>
<div class="key-stats">
<h3>Key Prevention Statistics</h3>
<div class="stats-grid">
<!-- ... stats as before ... -->
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer__content">
<div class="footer__brand">
<i class="fas fa-heartbeat"></i>
<span>HealthCare Pro Training</span>
</div>
<div class="footer__info">
<p>© 2025 Healthcare Training Platform. Improving patient care through education.</p>
</div>
</div>
</div>
</footer>
<script src="app.js"></script>
</body>
</html>