Skip to content

Commit

Permalink
update clinicas.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@luisgabrieltech
luisgabrieltech committed Apr 19, 2024
1 parent 169ca61 commit 3bbbfb1
Show file tree
Hide file tree
Showing 3 changed files with 57 additions and 180 deletions.
221 changes: 43 additions & 178 deletions clinicas.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,185 +44,50 @@


<!-- doctors section starts -->

<section class="doctors min-block-size: 900px " id="doctors">

<h1 class="heading "> clinicas <span>parceiras</span> </h1>

<div class="box-container ">


<div class="box ">
<img src="image/doc-1.jpg" alt="">
<h3>win coder</h3>
<span>expert doctor</span>
<div class="share">
<a href="#" class="fab fa-facebook-f"></a>
<a href="#" class="fab fa-twitter"></a>
<a href="#" class="fab fa-instagram"></a>
<a href="#" class="fab fa-linkedin"></a>

</div>
</div>

<div class="box">
<img src="image/doc-2.jpg" alt="">
<h3>win coder</h3>
<span>expert doctor</span>
<div class="share">
<a href="#" class="fab fa-facebook-f"></a>
<a href="#" class="fab fa-twitter"></a>
<a href="#" class="fab fa-instagram"></a>
<a href="#" class="fab fa-linkedin"></a>
</div>
</div>

<div class="box">
<img src="image/doc-3.jpg" alt="">
<h3>win coder</h3>
<span>expert doctor</span>
<div class="share">
<a href="#" class="fab fa-facebook-f"></a>
<a href="#" class="fab fa-twitter"></a>
<a href="#" class="fab fa-instagram"></a>
<a href="#" class="fab fa-linkedin"></a>
</div>
</div>

<div class="box">
<img src="image/doc-4.jpg" alt="">
<h3>win coder</h3>
<span>expert doctor</span>
<div class="share">
<a href="#" class="fab fa-facebook-f"></a>
<a href="#" class="fab fa-twitter"></a>
<a href="#" class="fab fa-instagram"></a>
<a href="#" class="fab fa-linkedin"></a>
</div>
</div>

<div class="box">
<img src="image/doc-5.jpg" alt="">
<h3>win coder</h3>
<span>expert doctor</span>
<div class="share">
<a href="#" class="fab fa-facebook-f"></a>
<a href="#" class="fab fa-twitter"></a>
<a href="#" class="fab fa-instagram"></a>
<a href="#" class="fab fa-linkedin"></a>
</div>
</div>

<div class="box">
<img src="image/doc-6.jpg" alt="">
<h3>win coder</h3>
<span>expert doctor</span>
<div class="share">
<a href="#" class="fab fa-facebook-f"></a>
<a href="#" class="fab fa-twitter"></a>
<a href="#" class="fab fa-instagram"></a>
<a href="#" class="fab fa-linkedin"></a>

</div>
</div>
<div class="box">
<img src="image/doc-7.jpg" alt="">
<h3>win coder</h3>
<span>intern doctor</span>
<div class="share">

<a href="#" class="fab fa-twitter"></a>
<a href="#" class="fab fa-instagram"></a>
<a href="#" class="fab fa-linkedin"></a>
</div>
</div>
<div class="box">
<img src="image/doc-8.jpg" alt="">
<h3>win coder</h3>
<span>expert doctor</span>
<div class="share">
<a href="#" class="fab fa-facebook-f"></a>
<a href="#" class="fab fa-twitter"></a>
<a href="#" class="fab fa-instagram"></a>
<a href="#" class="fab fa-linkedin"></a>
</div>
</div>
<div class="box">
<img src="image/doc-9.jpg" alt="">
<h3>win coder</h3>
<span>expert doctor</span>
<div class="share">
<a href="#" class="fab fa-facebook-f"></a>
<a href="#" class="fab fa-twitter"></a>
<a href="#" class="fab fa-instagram"></a>
<a href="#" class="fab fa-linkedin"></a>
</div>
</div>

</div>

<section class="clinicas" id="clinicas">
<h2 class="heading">Clínicas</h2>
<div class="box-container grid-container"></div>
</section>

<!-- doctors section ends -->

<!-- clinicas api -->

<p>Clique no botão para comparar a distância até a sede:</p>

<button onclick="getLocation()">Obter Localização</button>
<p id="distance"></p>

<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
alert("Geolocalização não é suportada pelo seu navegador.");
}
}

function showPosition(position) {
// Coordenadas da localização atual
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;

// Coordenadas de um ponto de referência (por exemplo, outro local)
const referenceLatitude = -7.9106702; // Latitude
const referenceLongitude = -34.8337683; // Longitude


// Cálculo da distância entre os pontos (usando a fórmula de Haversine)
const distance = calculateDistance(latitude, longitude, referenceLatitude, referenceLongitude);

// Exibindo a distância
document.getElementById("distance").textContent = `Distância até o Studio Classe A: ${distance.toFixed(2)} km`;
}

function showError(error) {
alert(`Erro ao obter a localização: ${error.message}`);
}

function calculateDistance(lat1, lon1, lat2, lon2) {
const R = 6371; // Raio médio da Terra em quilômetros
const dLat = degToRad(lat2 - lat1);
const dLon = degToRad(lon2 - lon1);
const a =
Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.cos(degToRad(lat1)) * Math.cos(degToRad(lat2)) *
Math.sin(dLon / 2) * Math.sin(dLon / 2);
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
return R * c;
}

function degToRad(deg) {
return deg * (Math.PI / 180);
}
</script>
<p> Caso você decida nos visitar, saiba como está o tempo agora</p>
<iframe src="https://api.wo-cloud.com/content/widget/?geoObjectKey=11674267&language=pt&region=BR&timeFormat=HH:mm&windUnit=kmh&systemOfMeasurement=metric&temperatureUnit=celsius" name="CW2" scrolling="no" width="290" height="318" frameborder="0" style="border: 1px solid #10658E;border-radius: 8px"></iframe>
<a href="teste.html"></a>
</div>

<!-- clinicas api -->
<script>
async function loadClinics() {
try {
const response = await fetch('clinicas.json');
const data = await response.json();
renderClinics(data.clinicas);
} catch (error) {
console.error('Erro pra carregar as clínicas:', error);
}
}

function renderClinics(clinicas) {
const boxContainer = document.querySelector('.box-container');
clinicas.forEach(clinica => {
const box = createClinicBox(clinica);
boxContainer.appendChild(box);
});
}

function createClinicBox(clinica) {
const box = document.createElement('div');
box.classList.add('box');
box.innerHTML = `
<h3>${clinica.nome}</h3>
<p><strong>Endereço:</strong> ${clinica.endereco}, ${clinica.cidade}</p>
<p><strong>Especialidades:</strong> ${clinica.especialidades.join(', ')}</p>
<p><strong>Horário de Funcionamento:</strong></p>
<ul>
<li><strong>Segunda:</strong> ${clinica.horario_funcionamento.segunda}</li>
<li><strong>Terça:</strong> ${clinica.horario_funcionamento.terca}</li>
<li><strong>Quarta:</strong> ${clinica.horario_funcionamento.quarta}</li>
<li><strong>Quinta:</strong> ${clinica.horario_funcionamento.quinta}</li>
<li><strong>Sexta:</strong> ${clinica.horario_funcionamento.sexta}</li>
</ul>
`;
return box;
}
window.addEventListener('load', loadClinics);
</script>

<!-- doctors section ends -->

14 changes: 13 additions & 1 deletion css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -605,4 +605,16 @@ section:nth-child(even){



}
}

.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}

.box {
border: 1px solid #ddd;
padding: 20px;
}

2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@

<header class="header">

<a href="#" class="logo"> <i class="fas fa-heartbeat"></i> <strong>MindCalm</</a>
<a href="#" class="logo"> <i class="fas fa-heartbeat"></i> <strong>MindCalm</strong></a>

<nav class="navbar">

Expand Down

0 comments on commit 3bbbfb1

Please sign in to comment.