PeterSrv68
Messages postés1Date d'inscriptionmercredi 7 août 2024StatutMembreDernière intervention 7 août 2024
-
7 août 2024 à 11:01
Bonjour à tous,
Voici un extrait de code que j'aimerais optimiser pour les smartphones afin de donner des instructions d'enregistrement à mes locataires.
En tant que débutant, je rencontre des difficultés pour garantir une expérience utilisateur optimale, quel que soit l'écran utilisé. Un autre problème est que lorsque je zoome sur la page, le contenu du conteneur disparaît car la photo à l'intérieur s'agrandit également. Vous pouvez simuler ce problème pour mieux comprendre.
Comment puis-je faire pour que le contenu soit optimisé pour tous les supports, s'il vous plaît ?
Merci d'avance pour votre aide.
Cordialement,
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Check-in Procedure</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f7;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
header {
background: linear-gradient(to top, #f5f5f7, rgba(0, 0, 0, 0.1)), url('https://l.icdbcdn.com/oh/614506c7-4cf4-4e4f-bf74-1f25445a2904.jpg?w=1040') no-repeat center center;
background-size: auto;
color: #fff;
padding: 50px;
text-align: center;
font.size: 13px;
width: 100%;
}
.container {
max-width: 400px;
width: 100%;
height: 100%; /* Adjusted to take full height */
margin: 20px auto;
background-color: white;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
}
.step {
width: 100%;
flex: 1;
padding: 20px;
box-sizing: border-box;
opacity: 0;
transform: translateX(100%);
transition: opacity 0.5s, transform 0.5s;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
position: absolute;
}
.step.active {
opacity: 1;
transform: translateX(0);
}
.step.previous {
transform: translateX(-100%);
}
.step img, .step iframe {
width: 100%;
height: auto; /* Adjusted to auto height */
max-height: 400px; /* Maximum height for images */
object-fit: cover;
border-radius: 10px;
}
.text-container {
flex: 1;
width: 100%;
overflow-y: auto;
margin-top: 15px;
}
.text {
font-size: 16px;
color: #333;
text-align: center;
padding: 0 10px;
}
.navigation {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 20px;
border-top: 1px solid #eee;
box-sizing: border-box;
position: absolute;
bottom: 0;
left: 0;
}
.navigation button {
background-color: #007aff;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
.navigation button:disabled {
background-color: #d1d1d6;
cursor: not-allowed;
}
.dots {
display: flex;
gap: 5px;
}
.dots span {
width: 8px;
height: 8px;
background-color: #d1d1d6;
border-radius: 50%;
}
.dots .active {
background-color: #007aff;
}
</style>
</head>
<body>
<header>
<h1>Procédure d'enregistrement Chez Roger et Patricia</h1>
</header>
<div class="container">
<div class="step active" id="step1">
<img src="https://l.icdbcdn.com/oh/614506c7-4cf4-4e4f-bf74-1f25445a2904.jpg?w=1040" alt="Step 1">
<div class="text-container">
<div class="text">Rendez-vous au XXXXXXXXXXXXXX. Dans le coffret en bois au-dessus de la boîte aux lettres, repérez la boite à clé de <strong>la chambre que nous vous avons communiqué</strong></div>
</div>
</div>
<div class="step" id="step2">
<img src="https://l.icdbcdn.com/oh/614506c7-4cf4-4e4f-bf74-1f25445a2904.jpg?w=1040" alt="Step 2">
<div class="text-container">
<div class="text">???? Logement <strong> NON-FUMEUR </strong>(des frais de nettoyage de 150€ seront déduits de votre caution si la règle n'est pas respectée).<br>???? Les fêtes ou événements sont interdits.<br>???? Respectez le calme entre <strong>22h00 et 8h00</strong>.<br>???????? Aucun <strong> invité non enregistré</strong> n’est autorisé.<br>???? Les animaux de compagnie ne sont pas autorisés</div>
</div>
</div>
<div class="step" id="step3">
<iframe width="560" height="450" src="https://www.youtube.com/embed/U878rQZBhyA?si=y-moqoPYOaMF71aO&%3Bstart=2" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<div class="text-container">
<div class="text">Ouvrez la boite avec le code que vous avez reçu dans notre message<br><br>⚠ Après avoir récupéré la clé, veuillez <strong> refermer la boîte, mélanger les chiffres pour cacher le code et fermer le coffret </strong> , svp.</div>
</div>
</div>
<div class="step" id="step4">
<img src="https://l.icdbcdn.com/oh/614506c7-4cf4-4e4f-bf74-1f25445a2904.jpg?w=1040" alt="Step 4">
<div class="text-container">
<div class="text">⚠ Veuillez <strong> refermer à clé toutes les portes</strong> après vous. <br> ⚠ Après 22h, merci de rester discret par respect pour les autres locataires, svp. ????<br><br>Au portillon en bois, utilisez la clé rouge. (ℹ Dans la serrure, tournez la clé dans le <strong> sens anti-horaire </strong> pour ouvrir)</div>
</div>
</div>
<div class="step" id="step5">
<img src="https://l.icdbcdn.com/oh/614506c7-4cf4-4e4f-bf74-1f25445a2904.jpg?w=1040" alt="Step 5">
<div class="text-container">
<div class="text">A la porte d’entrée grise, utiliser la clé jaune.<br><br>ℹ Pour la fermer, <strong>soulevez la poignée </strong> avant de tourner la clé.</div>
</div>
</div>
<div class="step" id="step6">
<img src="https://l.icdbcdn.com/oh/614506c7-4cf4-4e4f-bf74-1f25445a2904.jpg?w=1040" alt="Step 6">
<div class="text-container">
<div class="text">Au fond du couloir à droite, montez les escaliers.<br>Repérez votre numéro de chambre sur les portes et utilisez la clé verte.</div>
</div>
</div>
<div class="step" id="step7">
<div class="text-container">
<div class="text"><strong> Passez un agréable séjour chez nous ???? </strong></div>
</div>
</div>
<div class="navigation">
<button id="prevBtn" onclick="prevStep()" disabled>Précédent</button>
<div class="dots">
<span class="dot active"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<button id="nextBtn" onclick="nextStep()">Suivant</button>
</div>
</div>
<script>
let currentStep = 1;
const totalSteps = 7;
let scrolledToBottom = false;
function showStep(step) {
const steps = document.querySelectorAll('.step');
steps.forEach((s, index) => {
s.classList.remove('active', 'previous', 'next');
if (index + 1 === step) {
s.style.display = 'flex';
setTimeout(() => {
s.classList.add('active');
}, 10);
} else {
s.style.display = 'none';
}
});
document.querySelectorAll('.dot').forEach((dot, index) => {
if (index + 1 === step) {
dot.classList.add('active');
} else {
dot.classList.remove('active');
}
});
document.getElementById('prevBtn').disabled = step === 1;
document.getElementById('nextBtn').textContent = step === totalSteps ? "Je suis entré" : "Suivant";
scrolledToBottom = false; // Reset scroll flag
}
function nextStep() {
const currentTextContainer = document.querySelector(`.step:nth-child(${currentStep}) .text-container`);
if (currentTextContainer.scrollTop + currentTextContainer.clientHeight < currentTextContainer.scrollHeight) {
currentTextContainer.scrollTop += currentTextContainer.clientHeight;
scrolledToBottom = true;
} else {
if (currentStep < totalSteps) {
const current = document.querySelector(`.step:nth-child(${currentStep})`);
current.classList.add('previous');
setTimeout(() => {
currentStep++;
showStep(currentStep);
}, 500);
} else {
window.location.href = "https://www.sejourparfait.com";
}
}
}
function prevStep() {
if (currentStep > 1) {
const current = document.querySelector(`.step:nth-child(${currentStep})`);
current.classList.add('next');
setTimeout(() => {
currentStep--;
showStep(currentStep);
}, 500);
}
}
// Initialize the first step to be visible on page load
document.addEventListener('DOMContentLoaded', () => {
showStep(1);
});
</script>
</body>
</html>
