OneCompiler

selenium login

276
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>GVS Pulse Reflex</title> <style> body { margin: 0; font-family: Arial, sans-serif; } 
.topbar {
  background: #2f4050;
  color: white;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  height: 50px;
}

.hamburger {
  font-size: 24px;
  background: none;
  border: none;
  color: white;
  margin-right: 15px;
  cursor: pointer;
}

.topbar-title {
  font-size: 20px;
}

.container {
  display: flex;
  height: calc(100vh - 50px);
}

.sidebar {
  width: 250px;
  background: #2f4050;
  color: white;
  padding: 20px;
  transition: margin-left 0.3s ease;
}

.sidebar.hidden {
  margin-left: -250px;
}

.sidebar h2 {
  font-size: 18px;
  margin-top: 0;
}

.sidebar ul {
  list-style: none;
  padding: 0;
}

.sidebar li {
  padding: 10px 0;
  cursor: pointer;
}

.sidebar li:hover {
  background-color: #1c2b36;
}

.content {
  flex-grow: 1;
  padding: 20px;
  overflow-y: auto;
  background-color: #f9f9f9;
}

/* Upload Form Area */
.filter-section {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.filter-label {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 10px;
  display: block;
}

.dropdowns {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 10px;
}

.upload-area {
  border: 2px dashed #999;
  padding: 20px;
  text-align: center;
  border-radius: 6px;
  background-color: #f0f0f0;
  cursor: pointer;
}

#fileName {
  margin-top: 10px;
  font-style: italic;
}

.submit-btn {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #2196f3;
  color: white;
  border: none;
  cursor: pointer;
}

.submit-btn:hover {
  background-color: #1976d2;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: white;
  margin: 15% auto;
  padding: 20px;
  width: 300px;
  text-align: center;
  border-radius: 8px;
}

#modalOkBtn {
  padding: 8px 16px;
  margin-top: 10px;
  background-color: #2196f3;
  color: white;
  border: none;
  cursor: pointer;
}

#modalOkBtn:hover {
  background-color: #1976d2;
}
</style> </head> <body> <div class="topbar"> <button class="hamburger" onclick="toggleSidebar()">☰</button> <span class="topbar-title">GVS Pulse Reflex</span> </div> <div class="container"> <div class="sidebar hidden" id="sidebar"> <h2 id="sidebar-title">Select Services</h2> <ul id="menu-list"> <li onclick="navigate('admin', 'Administration')">Administration</li> <li onclick="navigate('role', 'Role Management')">Role Management</li> <li onclick="navigate('change', 'Change Management')">Change Management</li> <li onclick="switchToBulkUpload()">Bulk Upload Document</li> <li onclick="navigate('rate', 'Rate Management')">Rate Management</li> <li onclick="navigate('amend', 'Amendments')">Amendments</li> <li onclick="navigate('scheduler', 'Scheduler')">Scheduler</li> </ul> </div> 
<div class="content" id="main-content">
  <h2>Welcome to Dashboard</h2>
</div>
</div> <script> function toggleSidebar() { document.getElementById('sidebar').classList.toggle('hidden'); } function navigate(page, title) { document.getElementById("main-content").innerHTML = `<h2>${title}</h2><p>Content not found.</p>`; } function switchToBulkUpload() { const title = document.getElementById("sidebar-title"); const menu = document.getElementById("menu-list"); title.textContent = "Bulk Upload"; menu.innerHTML = ` <li onclick="loadUploadForm()">Upload Files</li> <li onclick="navigate('search', 'File Search')">File Search</li> <li onclick="navigate('download', 'Download Generic')">Download Generic</li> `; } function loadUploadForm() { document.getElementById("main-content").innerHTML = ` <div class="filter-section"> <span class="filter-label">📁 Upload Files</span> <form id="uploadForm"> <div class="dropdowns"> <label> Pricing/Costing Identifier: <select id="identifierSelect" required> <option value="">Select</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </label> <label> Product Name: <select id="productSelect" required> <option value="">Select</option> </select> </label> </div> <label> Upload Type: <select id="uploadTypeSelect" required> <option value="">Select</option> </select> </label> <div class="upload-area" id="dropZone"> <input type="file" id="fileInput" accept=".csv,.xlsx" hidden /> <p>Drag and drop a file here or</p> <button type="button" id="browseBtn">Browse File</button> <p><strong>Allowed types: .csv, .xlsx</strong></p> <p id="fileName"></p> </div> <button type="submit" class="submit-btn">Submit</button> </form> </div> <div id="successModal" class="modal"> <div class="modal-content"> <p>File uploaded successfully!</p> <button id="modalOkBtn">Okay</button> </div> </div> `; setupUploadForm(); } function setupUploadForm() { const mapping = { "1": { "1a": ["1ax", "1ay"], "1b": ["1bx", "1by"] }, "2": { "2a": ["2ax", "2ay"], "2b": ["2bx", "2by"] }, "3": { "3a": ["3ax", "3ay"], "3b": ["3bx", "3by"] } }; const identifierSelect = document.getElementById("identifierSelect"); const productSelect = document.getElementById("productSelect"); const uploadTypeSelect = document.getElementById("uploadTypeSelect"); identifierSelect.addEventListener("change", () => { const val = identifierSelect.value; productSelect.innerHTML = `<option value="">Select</option>`; uploadTypeSelect.innerHTML = `<option value="">Select</option>`; if (mapping[val]) { Object.keys(mapping[val]).forEach(p => { productSelect.innerHTML += `<option value="${p}">${p}</option>`; }); } }); productSelect.addEventListener("change", () => { const id = identifierSelect.value; const p = productSelect.value; uploadTypeSelect.innerHTML = `<option value="">Select</option>`; if (mapping[id] && mapping[id][p]) { mapping[id][p].forEach(t => { uploadTypeSelect.innerHTML += `<option value="${t}">${t}</option>`; }); } }); document.getElementById("browseBtn").addEventListener("click", () => { document.getElementById("fileInput").click(); }); document.getElementById("fileInput").addEventListener("change", function () { const file = this.files[0]; if (file && /\.(csv|xlsx)$/i.test(file.name)) { document.getElementById("fileName").textContent = file.name; } else { alert("Only .csv or .xlsx files are allowed."); this.value = ""; } }); const dropZone = document.getElementById("dropZone"); dropZone.addEventListener("dragover", e => { e.preventDefault(); dropZone.style.backgroundColor = "#e3f2fd"; }); dropZone.addEventListener("dragleave", () => { dropZone.style.backgroundColor = "#f0f0f0"; }); dropZone.addEventListener("drop", e => { e.preventDefault(); dropZone.style.backgroundColor = "#f0f0f0"; const file = e.dataTransfer.files[0]; if (file && /\.(csv|xlsx)$/i.test(file.name)) { document.getElementById("fileInput").files = e.dataTransfer.files; document.getElementById("fileName").textContent = file.name; } else { alert("Only .csv or .xlsx files are allowed."); } }); document.getElementById("uploadForm").addEventListener("submit", (e) => { e.preventDefault(); if (!document.getElementById("fileInput").files.length) { alert("Please select a file."); return; } document.getElementById("successModal").style.display = "block"; }); document.getElementById("modalOkBtn").addEventListener("click", () => { document.getElementById("successModal").style.display = "none"; }); } </script> </body> </html>