File "main_002.php"

Full Path: /home/analogde/www/Chart burndown/main_002.php
File size: 3.45 KB
MIME-type: text/html
Charset: utf-8

 
Open Edit   Advanced Editor   Back 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Creating Basic Tabs in Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <ul class="nav nav-tabs">
        <li class="nav-item">
            <a href="#saisie" class="nav-link active">Saisie planning</a>
        </li>
        <li class="nav-item">
            <a href="#pointage" class="nav-link">Temps passé &&&</a>
        </li>
        <li class="nav-item">
            <a href="#graphique1" class="nav-link">Courbes 1</a>
        </li>
        <li class="nav-item">
            <a href="#graphique2" class="nav-link">Courbes 2</a>
        </li>
    </ul>
</div>

<div class="tab-content">
    <div id="saisie" class="tab-pane fade show active">
        <?php include 'table_001.php'; ?>
    </div>
    <div id="pointage" class="tab-pane fade mx-5" >
<!--
        <h2>Profile</h2>
        <p>Welcome to your profile page. Here you can update your personal information and preferences.</p>
        <form>
            <div class="mb-3">
                <label for="name" class="form-label">Name</label>
                <input type="text" class="form-control" id="name" placeholder="Enter your name">
            </div>
            <div class="mb-3">
                <label for="email" class="form-label">Email address</label>
                <input type="email" class="form-control" id="email" placeholder="Enter your email">
            </div>
            <button type="submit" class="btn btn-primary">Save Changes</button>
        </form>
-->

        


        <?php include 'mysql_inserer_tache_planning004.php'; ?>


    </div>


    <div id="graphique1" class="tab-pane fade mx-5">
        <h2>Burndown en escalier</h2>
        <?php include 'burndown_type01.php'; ?>
       
    </div>

    <div id="graphique2" class="tab-pane fade mx-5">
        <h2>Burdown classique</h2>
       
       
        <!--
        <ul class="list-group">
            <li class="list-group-item">Message 1: Hello, how are you?</li>
            <li class="list-group-item">Message 2: Can we meet tomorrow?</li>
            <li class="list-group-item">Message 3: Don't forget the deadline!</li>
        </ul>
         -->
        <?php include 'traitement0019.php'; ?>
       
    </div>

</div>

<script>
    
document.addEventListener("DOMContentLoaded", function () {
    const tabs = document.querySelectorAll(".nav-link");
    const tabContents = document.querySelectorAll(".tab-pane");

    tabs.forEach(tab => {
        tab.addEventListener("click", function (event) {
            event.preventDefault();
            const target = document.querySelector(tab.getAttribute("href"));

            tabs.forEach(t => t.classList.remove("active"));
            tabContents.forEach(tc => tc.classList.remove("show", "active"));

            tab.classList.add("active");
            target.classList.add("show", "active");
        });
    });
});
</script>
</body>
</html>


<!--
codeastro
https://www.geeksforgeeks.org/create-a-to-do-list-using-bootstrap-5/
https://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=user-management-data-table

https://dcodemania.com/post/crud-app-php-oop-pdo-mysql-fetch-api-es6

https://github.com/wenzhixin/bootstrap-table-examples?tab=readme-ov-file

-->