Candidate Profile Table - Copy this Html, Bootstrap Component to your project
can-you-make-this-code-more-butiful?-<!DOCTYPE-html>-<html-lang="en">-<head>-<meta-charset="UTF-8">-<meta-name="viewport"-content="width=device-width,-initial-scale=1.0">-<title>Candidate-Table-with-Profile-Popup</title>-<link-href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"-rel="stylesheet">-<style>-body-{-font-family:-Arial,-sans-serif;-margin:-20px;-background-color:-#fff;-color:-#333;-}-.search-container-{-margin-bottom:-20px;-text-align:-center;-}-.search-container-input-{-width:-50%;-padding:-10px;-font-size:-16px;-border:-1px-solid-#ccc;-border-radius:-5px;-outline:-none;-box-shadow:-0-2px-6px-rgba(0,-0,-0,-0.1);-transition:-all-0.3s-ease;-}-.search-container-input:focus-{-border-color:-#4a7398;-box-shadow:-0-2px-12px-rgba(0,-0,-0,-0.2);-}-table-{-width:-100%;-border-collapse:-collapse;-margin-top:-20px;-background-color:-#fff;-box-shadow:-0-4px-10px-rgba(0,-0,-0,-0.1);-border-radius:-12px;-overflow:-hidden;-}-th,-td-{-padding:-15px;-text-align:-left;-/*-Align-columns-to-the-left-*/-}-th-{-background-color:-#4a7398;-color:-white;-font-weight:-bold;-}-tr:nth-child(even)-{-background-color:-#f3f5fa;-}-tr:hover-{-background-color:-#eaf1fc;-transition:-background-color-0.3s-ease;-}-.btn-view-profile-{-background:-linear-gradient(45deg,-#4a7398,-#89a3c1);-color:-white;-border:-none;-padding:-5px-10px;-border-radius:-5px;-font-size:-14px;-cursor:-pointer;-transition:-all-0.3s-ease;-}-.btn-view-profile:hover-{-background:-linear-gradient(45deg,-#374c61,-#6c88a5);-}-/*-Enhanced-Modal-Styling-*/-.modal-header-{-text-align:-center;-background-color:-#4a7398;-color:-white;-border-top-left-radius:-10px;-border-top-right-radius:-10px;-}-.modal-header-.modal-title-{-margin:-0-auto;-font-size:-1.5rem;-}-.modal-content-{-border-radius:-10px;-box-shadow:-0px-5px-15px-rgba(0,-0,-0,-0.2);-}-.modal-body-{-padding:-20px;-background-color:-#f9f9f9;-}-.modal-body-table-{-width:-100%;-font-size:-14px;-}-.modal-body-th-{-text-align:-left;-font-weight:-bold;-color:-#4a7398;-width:-40%;-}-.modal-body-td-{-padding:-5px-0;-color:-#555;-}-.modal-body-a-{-color:-#0066cc;-text-decoration:-underline;-}-</style>-</head>-<body>-<div-class="search-container">-<input-type="text"-id="global-search"-placeholder="Search-for-candidates...">-</div>-<table-id="data-table">-<thead>-<!---Table-Header--->-</thead>-<tbody>-<!---Table-Body--->-</tbody>-</table>-<!---Bootstrap-Modal--->-<div-class="modal-fade"-id="candidateProfileModal"-tabindex="-1"-aria-labelledby="candidateProfileModalLabel"-aria-hidden="true">-<div-class="modal-dialog-modal-lg">-<div-class="modal-content">-<div-class="modal-header">-<h5-class="modal-title"-id="candidateProfileModalLabel">Candidate-Profile</h5>-<button-type="button"-class="btn-close"-data-bs-dismiss="modal"-aria-label="Close"></button>-</div>-<div-class="modal-body">-<div-id="candidateProfileContent">-<!---Dynamic-Content-Goes-Here--->-</div>-</div>-</div>-</div>-</div>-<script-src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>-<script-type="text/javascript">-const-spreadsheetId-=-'1-Kq08jekCOILTyuGqmzaKS5wZoBeacQP15mBl-xWCjA';-const-apiKey-=-'AIzaSyBqgs3Nah0g_avO4Ux1lPLyQ1i9cgphGdo';-const-url-=-`https://sheets.googleapis.com/v4/spreadsheets/${spreadsheetId}/values/Draft_updated?key=${apiKey}`;-async-function-fetchGoogleSheetData()-{-try-{-const-response-=-await-fetch(url);-if-(!response.ok)-{-throw-new-Error(`HTTP-error!-Status:-${response.status}`);-}-const-data-=-await-response.json();-const-rows-=-data.values;-if-(!rows-||-rows.length-===-0)-{-throw-new-Error("No-data-found-in-the-spreadsheet.");-}-const-tableHeader-=-document.querySelector('#data-table-thead');-const-tableBody-=-document.querySelector('#data-table-tbody');-const-headerRow-=-document.createElement('tr');-const-columnsToDisplay-=-[-"Company",-"Candidate-Profile-ID",-"Candidate-Status-",-"Candidate-Name",-"Seniority-Level",-"Tech-Stack",-"Candidate's-CV-(link)"-];-let-columnIndexesToDisplay-=-[];-rows[0].forEach((header,-index)-=>-{-if-(columnsToDisplay.includes(header))-{-columnIndexesToDisplay.push(index);-const-th-=-document.createElement('th');-th.textContent-=-header;-headerRow.appendChild(th);-}-});-const-profileTh-=-document.createElement('th');-profileTh.textContent-=-"Profile";-headerRow.appendChild(profileTh);-tableHeader.appendChild(headerRow);-let-filterCompany-=-'Deloitte';-const-filteredRows-=-rows.slice(1).filter(row-=>-row.includes(filterCompany));-filteredRows.forEach(row-=>-{-const-tableRow-=-document.createElement('tr');-row.forEach((cell,-index)-=>-{-if-(columnIndexesToDisplay.includes(index))-{-const-cellElement-=-document.createElement('td');-if-(rows[0][index]-===-"Candidate's-CV-(link)"-&&-cell)-{-const-link-=-document.createElement('a');-link.href-=-cell;-link.textContent-=-"View-CV";-link.target-=-"_blank";-link.style.color-=-"#0066cc";-cellElement.appendChild(link);-}-else-{-cellElement.textContent-=-cell;-}-tableRow.appendChild(cellElement);-}-});-const-profileCell-=-document.createElement('td');-const-profileButton-=-document.createElement('button');-profileButton.textContent-=-"View-Profile";-profileButton.className-=-"btn-view-profile";-profileButton.setAttribute('data-bs-toggle',-'modal');-profileButton.setAttribute('data-bs-target',-'#candidateProfileModal');-profileButton.addEventListener('click',-()-=>-loadCandidateProfile(row));-profileCell.appendChild(profileButton);-tableRow.appendChild(profileCell);-tableBody.appendChild(tableRow);-});-}-catch-(error)-{-console.error('Error-fetching-Google-Sheets-data:',-error);-alert(`Error:-${error.message}`);-}-}-function-loadCandidateProfile(row)-{-const-profileContent-=-`-<table-class="table">-<tbody>-<tr><th>Profile-ID:</th><td>${row[1]}</td></tr>-<tr><th>Candidate-Name:</th><td>${row[5]}</td></tr>-<tr><th>Candidate-Status:</th><td>${row[2]}</td></tr>-<tr><th>Seniority-Level:</th><td>${row[6]}</td></tr>-<tr><th>Working-Experience:</th><td>${row[8]}</td></tr>-<tr><th>Salary-Expectations:</th><td>${row[9]}</td></tr>-<tr><th>Notice-Period:</th><td>${row[11]}</td></tr>-<tr><th>CV-Link:</th><td><a-href="${row[12]}"-target="_blank">View-CV</a></td></tr>-<tr><th>Candidate-Evaluation:</th><td>${row[10]}</td></tr>-<tr><th>Interview-Interest:</th><td>${row[7]}</td></tr>-</tbody>-</table>-`;-document.getElementById('candidateProfileContent').innerHTML-=-profileContent;-}-document.addEventListener('DOMContentLoaded',-fetchGoogleSheetData);-</script>-</body>-</html>
