Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Document</title> | |
| <style> | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| font-family: Arial, sans-serif; | |
| background-color: #bfd8e9; /* Replace with your background color */ | |
| background-size: cover; | |
| background-repeat: no-repeat; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| } | |
| .container{ | |
| display: flex; | |
| } | |
| /*.navbar { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| background-color: rgb(6, 6, 65); /* Semi-transparent black background | |
| padding: 15px 20px; | |
| position: fixed; | |
| top: 0; | |
| width: 100%; | |
| height: 10%; | |
| z-index: 1000; /* Ensure the navbar is above other content | |
| }*/ | |
| .sidebar { | |
| background-color: rgb(6, 6, 65); | |
| width: 15%; | |
| height: 100%; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| padding: 20px 0; | |
| overflow: hidden; | |
| } | |
| .logo { | |
| color: #fff; | |
| font-size: 30px; | |
| font-weight: bold; | |
| text-decoration: none; | |
| padding-top: 50px; | |
| margin-left: 10px; | |
| margin-bottom: 50px; | |
| } | |
| .icons { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 5px; | |
| margin-left: 20px; | |
| } | |
| .icons a { | |
| display: flex; | |
| align-items: center; | |
| color: #fff; | |
| text-decoration: none; | |
| font-size: 15px; | |
| transition: color 0.3s ease-in-out; | |
| padding: 2px; | |
| } | |
| .icons a:hover { | |
| color: #3498db; | |
| background-color: rgba(155, 155, 155, 0.2); | |
| border-radius: 10px; | |
| border: 1px solid rgb(147, 146, 146); | |
| } | |
| .icon-img { | |
| width: 30px; | |
| height: 30px; | |
| margin-right: 20px; | |
| } | |
| .icons a span{ | |
| padding-left: 2px; | |
| } | |
| /* ... Previous CSS code ... */ | |
| .main-content { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| margin-left: 20%; | |
| margin-top: 10px; | |
| } | |
| .admin-heading { | |
| font-size: 46px; | |
| margin-top: 12px; | |
| text-align: center; | |
| } | |
| .form-group { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .form-group label { | |
| flex:1; | |
| text-align: center; | |
| padding-left: 25px; | |
| margin-right: 20px; | |
| justify-content: center; | |
| align-items: center; | |
| font-size: 20px; | |
| } | |
| .form-group input { | |
| width: 100px; | |
| padding: 10px; | |
| border: 1px solid #ccc; | |
| border-radius: 5px; | |
| padding-left: 50px; | |
| } | |
| .open-elective-heading { | |
| font-size: 26px; | |
| margin-top: 60px; | |
| margin-bottom: 20px; | |
| } | |
| .card { | |
| background-color: rgba(255, 255, 255, 0.4); | |
| border-radius: 10px; | |
| padding: 50px; | |
| width: 100%; | |
| max-width: 900px; | |
| margin-bottom: 10px; | |
| text-align: center; | |
| } | |
| .card2 { | |
| background-color: rgba(255, 255, 255, 0.2); | |
| border-radius: 10px; | |
| border: 1px solid rgb(143, 142, 142); | |
| padding: 40px; | |
| width: 100%; | |
| max-width: 800px; | |
| padding-left: 10px; | |
| text-align: center; | |
| justify-content: center; | |
| } | |
| .card-form-group { | |
| display: flex; | |
| padding: 20px; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin-bottom: 10px; | |
| margin-right:50px; | |
| } | |
| .card-form-group label { | |
| font-size: 15px; | |
| padding: 5px; | |
| justify-content: space-between; | |
| text-align: left; | |
| padding-left: 30px; | |
| white-space: nowrap; | |
| } | |
| .card-form-group input { | |
| width: 80px; | |
| height: 20px; | |
| padding: 5px; | |
| border: 1px solid #ccc; | |
| border-radius: 5px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="sidebar"> | |
| <div class="logo">EASA</div> | |
| <div class="icons"> | |
| <a href="#"> | |
| <img src="home.png" alt="Home" class="icon-img"><span>Home</span> | |
| </a> | |
| <a href="http://192.168.7.147:5978/login"> | |
| <img src="data-report.png" alt="Dashboard" class="icon-img">Dashboard | |
| </a> | |
| <a href="https://docs.google.com/spreadsheets/d/1eNJ6_itReRGp8-UcBirOKV7BNvHfxKe0L8T7XFBWlVQ/edit#gid=0"> | |
| <img src="comment.png" alt="Chats" class="icon-img">Check Entered Data | |
| </a> | |
| <a href="https://docs.google.com/spreadsheets/d/1eNJ6_itReRGp8-UcBirOKV7BNvHfxKe0L8T7XFBWlVQ/edit#gid=2039361118"> | |
| <img src="notification.png" alt="Doubts" class="icon-img">Subjects Allocated | |
| </a> | |
| </div> | |
| </div> | |
| <div class="main-content"> | |
| <div class="card"> | |
| <h1 class="admin-heading">Welcome to Admin Page</h1> | |
| <div class="form-group"> | |
| <form method="POST" action="" name="submit-to-google-sheet"> | |
| <label for="name">Name:</label> | |
| <input type="text" id="name" name="name"> | |
| <label for="branch">Branch:</label> | |
| <input type="text" id="branch" name="branch"> | |
| <label for="branch">Semester:</label> | |
| <input type="number" id="sem" name="sem"> </div> | |
| <h1 class="open-elective-heading">Open Elective Subjects</h1> | |
| <div class="card2"> | |
| <div class="card-form-group"> | |
| <label for="subject1">Subject 1:</label> | |
| <input type="text" id="subject1" name="subject1"> | |
| <label for="maxCapacity">Max Capacity:</label> | |
| <input type="number" id="maxCapacity1" name="maxCapacity1"> | |
| <label for="minCapacity">Min Capacity:</label> | |
| <input type="number" id="minCapacity1" name="minCapacity1"> | |
| </div> | |
| <div class="card-form-group"> | |
| <label for="subject1">Subject 2:</label> | |
| <input type="text" id="subject2" name="subject2"> | |
| <label for="maxCapacity">Max Capacity:</label> | |
| <input type="number" id="maxCapacity2" name="maxCapacity2"> | |
| <label for="minCapacity">Min Capacity:</label> | |
| <input type="number" id="minCapacity2" name="minCapacity2"> | |
| </div> | |
| <div class="card-form-group"> | |
| <label for="subject1">Subject 3:</label> | |
| <input type="text" id="subject3" name="subject3"> | |
| <label for="maxCapacity">Max Capacity:</label> | |
| <input type="number" id="maxCapacity3" name="maxCapacity3"> | |
| <label for="minCapacity">Min Capacity:</label> | |
| <input type="number" id="minCapacity3" name="minCapacity3"> | |
| </div> | |
| </div> | |
| <br><br> | |
| <button onclick="fun()" type="submit">Submit</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| const scriptURL = 'https://script.google.com/macros/s/AKfycbwKHkc5yWD3-esG0dIBFiBcHB5xUlprfG8QGjTmtlHfl98DOgdnTPntUqtf8L6T1yLBAA/exec' | |
| const form = document.forms['submit-to-google-sheet'] | |
| function confirmAndSubmit() { | |
| const confirmation = window.confirm("Confirm if you'd like to submit this information!"); | |
| if (confirmation) { | |
| fetch(scriptURL, { method: 'POST', body: new FormData(form) }) | |
| .then(response => { | |
| console.log('Success!', response); | |
| // Redirect to the home page after successful submission | |
| window.location.href = 'admin home.html'; // Replace 'home.html' with your actual home page URL | |
| }) | |
| .catch(error => console.error('Error!', error.message)); | |
| } | |
| } | |
| form.addEventListener('submit', e => { | |
| e.preventDefault(); | |
| confirmAndSubmit(); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |