<html lang=“en”>

<head>
<meta charset=“utf-8”>
<title>Visitas Accenture - Bootdey.com</title>
<meta name=“viewport” content=“width=device-width, initial-scale=1”>
<link href=“https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css” rel=“stylesheet”>
<link href=“style.css” rel=“stylesheet”>
</head>

<body>
<link rel=“stylesheet”
href=“https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css”
integrity=“sha256-3sPp8BkKUE7QyPSl6VfBByBroQbKxKG7tsusY2mhbVY=” crossorigin=“anonymous” />
<div class=“container”>
<div class=“row”>
<div class=“col-lg-10 mx-auto mb-4”>
<div class=“section-title text-center”>
<h3 class=“top-c-sep”>Visitas Accenture</h3>
</div>
<div>
<button class=“btn d-inline-block btn-light mr-2”>Novo Evento</button>
<button class=“btn d-inline-block btn-danger”>Deslogar</button>
</div>
</div>
</div>

<div id=“visit-list” class=“filter-result”>
<!-- Visit items will be inserted here dynamically -->
</div>

<nav aria-label=“Page navigation”>
<ul id=“pagination” class=“pagination pagination-reset justify-content-center”>
<!-- Pagination items will be inserted here dynamically -->
</ul>
</nav>
</div>

<script src=“https://code.jquery.com/jquery-1.10.2.min.js”></script>
<script src=“https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.bundle.min.js”></script>
<script type=“text/javascript”>
// Sample visit data
const visits = [
{ date: “2024-06-01”, startTime: “10:00”, endTime: “12:00”, filledSlots: 5, maxSlots: 10 },
{ date: “2024-06-02”, startTime: “14:00”, endTime: “16:00”, filledSlots: 7, maxSlots: 10 },
{ date: “2024-06-03”, startTime: “09:00”, endTime: “11:00”, filledSlots: 9, maxSlots: 10 },
{ date: “2024-06-04”, startTime: “13:00”, endTime: “15:00”, filledSlots: 6, maxSlots: 10 },
{ date: “2024-06-05”, startTime: “11:00”, endTime: “13:00”, filledSlots: 10, maxSlots: 10 },
{ date: “2024-06-06”, startTime: “15:00”, endTime: “17:00”, filledSlots: 8, maxSlots: 10 },
{ date: “2024-06-07”, startTime: “10:00”, endTime: “12:00”, filledSlots: 4, maxSlots: 10 },
{ date: “2024-06-08”, startTime: “14:00”, endTime: “16:00”, filledSlots: 2, maxSlots: 10 }
];

const itemsPerPage = 4;

function createVisitItem(visit) {
return <br/> &lt;div class="job-box d-md-flex align-items-center justify-content-between mb-30"&gt;<br/> &lt;div class="job-left my-4 d-md-flex align-items-center flex-wrap"&gt;<br/> &lt;div class="job-content"&gt;<br/> &lt;span class="visit-name"&gt;Visita&lt;/span&gt;<br/> &lt;ul class="visit-details d-md-flex flex-wrap text-capitalize ff-open-sans"&gt;<br/> &lt;li&gt;&lt;i class="zmdi zmdi-calendar mr-2"&gt;&lt;/i&gt; Data: ${visit.date}&lt;/li&gt;<br/> &lt;li&gt;&lt;i class="zmdi zmdi-time mr-2"&gt;&lt;/i&gt; Horário: ${visit.startTime} - ${visit.endTime}&lt;/li&gt;<br/> &lt;li&gt;&lt;i class="zmdi zmdi-accounts mr-2"&gt;&lt;/i&gt; Vagas: ${visit.filledSlots}/${visit.maxSlots}&lt;/li&gt;<br/> &lt;/ul&gt;<br/> &lt;/div&gt;<br/> &lt;/div&gt;<br/> &lt;div class="job-right my-4 flex-shrink-0"&gt;<br/> &lt;a href="{{'/visitante/%s'%evento.id|urlencode}}" class="btn d-block w-100 d-sm-inline-block btn-light"&gt;Se Inscrever&lt;/a&gt;<br/> &lt;/div&gt;<br/> &lt;/div&gt;<br/> ;
}

function paginateVisits() {
const totalPages = Math.ceil(visits.length / itemsPerPage);
const visitListContainer = document.getElementById(‘visit-list’);
const paginationContainer = document.getElementById(‘pagination’);

// Clear existing content
visitListContainer.innerHTML = ‘’;
paginationContainer.innerHTML = ‘’;

for (let page = 1; page <= totalPages; page++) {
const pageContainer = document.createElement(‘div’);
pageContainer.id = page${page};
pageContainer.classList.add(‘page’);
if (page !== 1) pageContainer.style.display = ‘none’;

const start = (page - 1) * itemsPerPage;
const end = page * itemsPerPage;
const pageItems = visits.slice(start, end);

pageItems.forEach(visit => {
pageContainer.innerHTML += createVisitItem(visit);
});

visitListContainer.appendChild(pageContainer);

const pageItem = document.createElement(‘li’);
pageItem.classList.add(‘page-item’);
pageItem.innerHTML = &lt;a class="page-link" href="#" onclick="showPage(${page})"&gt;${page}&lt;/a&gt;;
paginationContainer.appendChild(pageItem);
}
}

function showPage(page) {
const totalPages = Math.ceil(visits.length / itemsPerPage);
for (let i = 1; i <= totalPages; i++) {
document.getElementById(page${i}).style.display = i === page ? ‘block’ : ‘none’;
}
}

// Initialize pagination on page load
document.addEventListener(‘DOMContentLoaded’, paginateVisits);
</script>
</body>

</html>

CSS

body {
background: #f5f5f5;
margin-top: 20px;
}

/* ===== Career ===== /
.career-form {
background-color: #4e63d7;
border-radius: 5px;
padding: 0 16px;
}

.career-form .form-control {
background-color: rgba(255, 255, 255, 0.2);
border: 0;
padding: 12px 15px;
color: #fff;
}

.career-form .form-control::-webkit-input-placeholder {
/ Chrome/Opera/Safari /
color: #fff;
}

.career-form .form-control::-moz-placeholder {
/ Firefox 19+ /
color: #fff;
}

.career-form .form-control:-ms-input-placeholder {
/ IE 10+ /
color: #fff;
}

.career-form .form-control:-moz-placeholder {
/ Firefox 18- /
color: #fff;
}

.career-form .custom-select {
background-color: rgba(255, 255, 255, 0.2);
border: 0;
padding: 12px 15px;
color: #fff;
width: 100%;
border-radius: 5px;
text-align: left;
height: auto;
background-image: none;
}

.career-form .custom-select:focus {
-webkit-box-shadow: none;
box-shadow: none;
}

.career-form .select-container {
position: relative;
}

.career-form .select-container:before {
position: absolute;
right: 15px;
top: calc(50% - 14px);
font-size: 18px;
color: #ffffff;
content: ‘\F2F9’;
font-family: “Material-Design-Iconic-Font”;
}

.filter-result .job-box {
background: #fff;
-webkit-box-shadow: 0 0 35px 0 rgba(130, 130, 130, 0.2);
box-shadow: 0 0 35px 0 rgba(130, 130, 130, 0.2);
border-radius: 10px;
padding: 10px 35px;
}

ul {
list-style: none;
}

.list-disk li {
list-style: none;
margin-bottom: 12px;
}

.list-disk li:last-child {
margin-bottom: 0;
}

.job-box .img-holder {
height: 65px;
width: 65px;
background-color: #4e63d7;
background-image: -webkit-gradient(linear, left top, right top, from(rgba(78, 99, 215, 0.9)), to(#5a85dd));
background-image: linear-gradient(to right, rgba(78, 99, 215, 0.9) 0%, #5a85dd 100%);
font-family: “Open Sans”, sans-serif;
color: #fff;
font-size: 22px;
font-weight: 700;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border-radius: 65px;
}

.career-title {
background-color: #4e63d7;
color: #fff;
padding: 15px;
text-align: center;
border-radius: 10px 10px 0 0;
background-image: -webkit-gradient(linear, left top, right top, from(rgba(78, 99, 215, 0.9)), to(#5a85dd));
background-image: linear-gradient(to right, rgba(78, 99, 215, 0.9) 0%, #5a85dd 100%);
}

.job-overview {
-webkit-box-shadow: 0 0 35px 0 rgba(130, 130, 130, 0.2);
box-shadow: 0 0 35px 0 rgba(130, 130, 130, 0.2);
border-radius: 10px;
}

@media (min-width: 992px) {
.job-overview {
position: -webkit-sticky;
position: sticky;
top: 70px;
}
}

.job-overview .job-detail ul {
margin-bottom: 28px;
}

.job-overview .job-detail ul li {
opacity: 0.75;
font-weight: 600;
margin-bottom: 15px;
}

.job-overview .job-detail ul li i {
font-size: 20px;
position: relative;
top: 1px;
}

.job-overview .overview-bottom,
.job-overview .overview-top {
padding: 35px;
}

.job-content ul li {
font-weight: 600;
opacity: 0.75;
border-bottom: 1px solid #ccc;
padding: 10px 5px;
}

@media (min-width: 768px) {
.job-content ul li {
border-bottom: 0;
padding: 0;
}
}

.job-content ul li i {
font-size: 20px;
position: relative;
top: 1px;
}

.mb-30 {
margin-bottom: 30px;
}

.visit-name {
font-size: 1.5rem;
font-weight: bold;
display: block;
margin-bottom: 5px;
}

.visit-details {
font-size: 1rem;
color: #666;
text-align: left;
display: block;
padding-left: 0; / Remove left padding */

}

.visit-details li {
margin-right: 15px;
}

.btn {
font-size: 1rem;
padding: 10px 20px;
border-radius: 5px;
}

.btn-light {
background-color: #f8f9fa;
border: 1px solid #e2e6ea;
}

.btn-light:hover {
background-color: #e2e6ea;
border-color: #dae0e5;
}


Ao lado do botão Se Inscrever no modelo de lista, adicione mais dois botões, um para Editar e outro Deleta. Mas use apenas icones para representar essa ação nos botões. Mostre apenas o código alterado