Meeting Management Dashboard - Copy this Html, Tailwind Component to your project
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF 8"> <meta name="viewport" content="width=device width, initial scale=1.0"> <title>Meeting Management System</title> <style> body { font family: Arial, sans serif; line height: 1.6; margin: 0; padding: 0; min height: 100vh; display: flex; flex direction: column; } header { background color: #1a365d; color: white; padding: 1rem; } nav ul { list style type: none; padding: 0; } nav ul li { display: inline; margin right: 1rem; } nav ul li a { color: white; text decoration: none; } main { flex grow: 1; padding: 2rem; } .container { max width: 800px; margin: 0 auto; background color: white; padding: 2rem; box shadow: 0 0 10px rgba(0,0,0,0.1); } .logo container { display: flex; justify content: space between; margin bottom: 1rem; } .logo { width: 60px; height: 60px; background color: #f0f0f0; border radius: 50%; display: flex; align items: center; justify content: center; font weight: bold; } .form section { margin bottom: 1.5rem; padding: 1rem; border radius: 5px; } .yellow bg { background color: #fff9c4; } .blue bg { background color: #e3f2fd; } .green bg { background color: #e8f5e9; } input[type="text"], textarea, select { width: 100%; padding: 0.5rem; margin top: 0.5rem; border: 1px solid #ccc; border radius: 4px; } button { background color: #1a365d; color: white; border: none; padding: 0.5rem 1rem; cursor: pointer; border radius: 4px; } table { width: 100%; border collapse: collapse; } th, td { border: 1px solid #ccc; padding: 0.5rem; text align: left; } footer { background color: #f0f0f0; color: #333; text align: center; padding: 1rem; margin top: auto; } @media print { body * { visibility: hidden; } .container, .container * { visibility: visible; } .container { position: absolute; left: 0; top: 0; } @page { size: A4; margin: 1cm; } } @media (max width: 600px) { .logo container { flex direction: column; align items: center; } .logo { margin bottom: 1rem; } } .agenda item { background color: #f0f0f0; border radius: 5px; padding: 10px; margin bottom: 10px; } .agenda item input[type="text"], .agenda item textarea { width: calc(100% 10px); margin bottom: 5px; } .agenda item input[type="date"] { width: auto; } </style> </head> <body> <header> <h1>Meeting Management System</h1> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Meetings</a></li> <li><a href="#">Reports</a></li> <li><a href="#">Settings</a></li> </ul> </nav> </header> <main> <div class="container"> <div class="logo container"> <div class="logo">RAIS</div> <div class="logo">COGNIA</div> <div class="logo">VISION 2030</div> </div> <div class="form section yellow bg"> <h2>General Meeting #<input type="text" id="meetingNumber" value="10" style="width: 50px;"></h2> <input type="text" id="semester" value="First Semester 2024"> </div> <div class="form section blue bg"> <div> <label for="room">Room:</label> <textarea id="room" placeholder="Enter room details"></textarea> </div> <div> <label for="date">Date:</label> <input type="date" id="date"> </div> <div> <label for="startTime">Start Time:</label> <input type="time" id="startTime" value="14:10"> <label for="endTime">End Time:</label> <input type="time" id="endTime" value="15:00"> </div> </div> <div class="form section green bg"> <h3>Agenda Items:</h3> <div id="agendaItems"> <! Agenda items will be dynamically added here > </div> <button id="addAgendaItem">Add Agenda Item</button> </div> <div class="form section"> <h3>Attendees:</h3> <button id="addAttendee">Add Attendee</button> <button id="removeAttendee">Remove Attendee</button> <table id="attendeesTable"> <thead> <tr> <th>No.</th> <th>Name</th> <th>Position</th> <th>Signature</th> </tr> </thead> <tbody> <tr> <td>1</td> <td><input type="text" placeholder="Enter name"></td> <td><input type="text" value="Educational Supervisor"></td> <td></td> </tr> </tbody> </table> </div> <div class="form section"> <div style="display: flex; justify content: space between;"> <div> <label for="principal">School Principal:</label> <input type="text" id="principal"> <div>Signature:</div> <div style="width: 200px; height: 50px; border bottom: 1px solid black;"></div> </div> <div> <label for="supervisor">Educational Supervisor:</label> <input type="text" id="supervisor"> <div>Signature:</div> <div style="width: 200px; height: 50px; border bottom: 1px solid black;"></div> </div> </div> </div> <button onclick="window.print()">Print Form</button> </div> </main> <footer> <p>© 2024 Meeting Management System. All rights reserved.</p> </footer> <script> document.addEventListener('DOMContentLoaded', function() { const addAttendeeBtn = document.getElementById('addAttendee'); const removeAttendeeBtn = document.getElementById('removeAttendee'); const attendeesTable = document.getElementById('attendeesTable').getElementsByTagName('tbody')[0]; const addAgendaItemBtn = document.getElementById('addAgendaItem'); const agendaItemsContainer = document.getElementById('agendaItems'); addAttendeeBtn.addEventListener('click', function() { const newRow = attendeesTable.insertRow(); const cellCount = attendeesTable.rows.length; newRow.innerHTML = ` <td>${cellCount}</td> <td><input type="text" placeholder="Enter name"></td> <td><input type="text" value="Teacher"></td> <td></td> `; }); removeAttendeeBtn.addEventListener('click', function() { if (attendeesTable.rows.length > 1) { attendeesTable.deleteRow( 1); } }); // Add 14 more rows to start with 15 total for (let i = 0; i < 14; i++) { addAttendeeBtn.click(); } function addAgendaItem(topic = '', discussion = '', action = '', dueDate = '') { const agendaItem = document.createElement('div'); agendaItem.className = 'agenda item'; agendaItem.innerHTML = ` <input type="text" placeholder="Agenda Topic" value="${topic}"> <textarea placeholder="Discussion" rows="3">${discussion}</textarea> <textarea placeholder="Action Item" rows="2">${action}</textarea> <label>Due Date: <input type="date" value="${dueDate}"></label> <button class="removeAgendaItem">Remove</button> `; agendaItem.querySelector('.removeAgendaItem').addEventListener('click', function() { agendaItem.remove(); }); agendaItemsContainer.appendChild(agendaItem); } addAgendaItemBtn.addEventListener('click', function() { addAgendaItem(); }); // Add initial agenda items const initialAgendaItems = [ { topic: "Continue discussion on KPI (Performance Indicators)", discussion: "Review current KPIs and discuss their effectiveness.", action: "Update KPI dashboard with new metrics", dueDate: "2024 11 15" }, { topic: "Review preparation notebooks for performance measurement", discussion: "Evaluate the current notebook format and suggest improvements.", action: "Create a standardized template for performance measurement notebooks", dueDate: "2024 11 30" }, { topic: "Review lesson preparation samples for modern strategies", discussion: "Analyze sample lessons incorporating modern teaching strategies.", action: "Develop a workshop on implementing modern teaching strategies", dueDate: "2024 12 10" }, { topic: "Poetry and theater competition planning", discussion: "Discuss logistics, judging criteria, and timeline for the competition.", action: "Form a committee to oversee the competition planning", dueDate: "2024 12 05" }, { topic: "Active learning strategies implementation", discussion: "Share successful active learning techniques and challenges faced.", action: "Create a resource bank of active learning strategies for teachers", dueDate: "2024 12 20" }, { topic: "Library and learning resource center visit schedule", discussion: "Review current visit schedule and discuss any necessary changes.", action: "Update and distribute the new library visit schedule", dueDate: "2024 11 25" } ]; initialAgendaItems.forEach(item => { addAgendaItem(item.topic, item.discussion, item.action, item.dueDate); }); }); </script> </body> </html>
