File "main_001.php"

Full Path: /home/analogde/www/CURL/Dev tableau/Improve/main_001.php
File size: 3.14 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="#home" class="nav-link active">Home</a>
        </li>
        <li class="nav-item">
            <a href="#profile" class="nav-link">Profile</a>
        </li>
        <li class="nav-item">
            <a href="#messages" class="nav-link">Messages</a>
        </li>
    </ul>
</div>

<div class="tab-content">
    <div id="home" class="tab-pane fade show active">
        <?php include 'table_001.php'; ?>
    </div>
    <div id="profile" 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 'burndown_001.php'; ?>

    </div>
    <div id="messages" class="tab-pane fade mx-5">
        <h2>Messages</h2>
        <p>Here are your latest messages:</p>
        <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>
    </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

-->