[text] dark light

Viewer

copydownloadembedprintName: dark light
  1.  
  2. <!DOCTYPE html>
  3. <html lang="en" xmlns:sec="http://www.w3.org/1999/xhtml">
  4. <script>
  5.     function myFunction() {
  6.         document.body.classList.toggle("dark-mode");
  7.     }
  8.  
  9.     document.addEventListener('DOMContentLoaded', function() {
  10.         document.querySelector('button').addEventListener('click', myFunction);
  11.     });
  12. </script>
  13. <head>
  14.     <!--Start LIGHT/DARK switch-->
  15.  
  16.     <!-- End LIGHT/DARK switch-->
  17.     <meta charset="UTF-8">
  18.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  19.  
  20.     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  21.  
  22.     <title>School Cafe Manager</title>
  23.  
  24.     <style>
  25.         body {
  26.             padding: 25px;
  27.             background-color: white;
  28.             color: black;
  29.             font-size: 25px;
  30.         }
  31.  
  32.         .dark-mode {
  33.             background-color: black;
  34.             color: white;
  35.         }
  36.  
  37.         .nav-bar {
  38.             width: 100%;
  39.             height: 70px;
  40.             background-color: #337AB7;
  41.         }
  42.  
  43.         .text {
  44.             color: white;
  45.             font-size: 25px;
  46.             font-weight: bold;
  47.         }
  48.  
  49.         .table {
  50.             margin-left: 20px;
  51.             margin-top: 30px;
  52.         }
  53.     </style>
  54. </head>
  55. <body class="vh-100">
  56.  
  57. <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  58.     <a class="navbar-brand">School Cafe Manager</a>
  59.     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  60.         <span class="navbar-toggler-icon"></span>
  61.     </button>
  62.  
  63.     <div class="collapse navbar-collapse" id="navbarSupportedContent">
  64.         <ul class="navbar-nav me-auto mb-2 mb-lg-0">
  65.             <li class="nav-item">
  66.                 <a class="nav-link active" aria-current="page" href="#">Home</a>
  67.             </li>
  68.         </ul>
  69.  
  70.         <form class="d-grid gap-2 d-md-flex justify-content-md-end">
  71.             <!--Start LIGHT/DARK switch-->
  72.             <button class="btn btn-light me-md-2" onclick="myFunction()">Light/Dark</button>
  73.             <!-- End LIGHT/DARK switch-->
  74.  
  75.             <a class="btn btn-light me-md-2" href="/logout" type="submit">Logout</a>
  76.         </form>
  77.     </div>
  78. </nav>
  79.  
  80. <div>
  81.     <div class="row">
  82.         <table class="table">
  83.             <thead class="table-dark">
  84.             <tr>
  85.                 <th>#</th>
  86.                 <th>Student Name</th>
  87.                 <th>Cafeteria Balance</th>
  88.                 <th>Options</th>
  89.             </tr>
  90.             </thead>
  91.             <tbody>
  92.             <tr>
  93.                 <td>1</td>
  94.                 <td>Mike Vike</td>
  95.                 <td>1211.0</td>
  96.                 <td>
  97.                     <a href="/payment/addfunds?studentId=10"
  98.                        class="btn btn-warning">Payment
  99.                     </a>
  100.                     <a href="/addNote?studentId=10"
  101.                        class="btn btn-success">Add Notes/FeedBack
  102.                     </a>
  103.                     <a href="/deleteStudent?studentId=10"
  104.                        class="btn btn-danger">Delete
  105.                     </a>
  106.                 </td>
  107.             </tr>
  108.             <tr>
  109.                 <td>2</td>
  110.                 <td>Charles Lassetter</td>
  111.                 <td>444.0</td>
  112.                 <td>
  113.                     <a href="/payment/addfunds?studentId=11"
  114.                        class="btn btn-warning">Payment
  115.                     </a>
  116.                     <a href="/addNote?studentId=11"
  117.                        class="btn btn-success">Add Notes/FeedBack
  118.                     </a>
  119.                     <a href="/deleteStudent?studentId=11"
  120.                        class="btn btn-danger">Delete
  121.                     </a>
  122.                 </td>
  123.             </tr>
  124.             <tr>
  125.                 <td>3</td>
  126.                 <td>Joshua Jonez</td>
  127.                 <td>333.0</td>
  128.                 <td>
  129.                     <a href="/payment/addfunds?studentId=12"
  130.                        class="btn btn-warning">Payment
  131.                     </a>
  132.                     <a href="/addNote?studentId=12"
  133.                        class="btn btn-success">Add Notes/FeedBack
  134.                     </a>
  135.                     <a href="/deleteStudent?studentId=12"
  136.                        class="btn btn-danger">Delete
  137.                     </a>
  138.                 </td>
  139.             </tr>
  140.             <tr>
  141.                 <td>4</td>
  142.                 <td>Joshua Dudash</td>
  143.                 <td>0.0</td>
  144.                 <td>
  145.                     <a href="/payment/addfunds?studentId=13"
  146.                        class="btn btn-warning">Payment
  147.                     </a>
  148.                     <a href="/addNote?studentId=13"
  149.                        class="btn btn-success">Add Notes/FeedBack
  150.                     </a>
  151.                     <a href="/deleteStudent?studentId=13"
  152.                        class="btn btn-danger">Delete
  153.                     </a>
  154.                 </td>
  155.             </tr>
  156.             </tbody>
  157.         </table>
  158.     </div>
  159. </div>
  160. <br>
  161. <br>
  162. <div>
  163.     <a href="/addStudent"
  164.        class="btn btn-primary">Add New Student</a>
  165. </div>
  166.  
  167. </body>
  168. </html>

Editor

You can edit this paste and save as new:


File Description
  • dark light
  • Paste Code
  • 28 Apr-2024
  • 5.33 Kb
You can Share it: