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,
<!DOCTYPEhtml><htmllang="fr"><head><metacharset="UTF-8"><metaname="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><divclass="container"><divclass="step active"id="step1"><imgsrc="https://l.icdbcdn.com/oh/614506c7-4cf4-4e4f-bf74-1f25445a2904.jpg?w=1040"alt="Step 1"><divclass="text-container"><divclass="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><divclass="step"id="step2"><imgsrc="https://l.icdbcdn.com/oh/614506c7-4cf4-4e4f-bf74-1f25445a2904.jpg?w=1040"alt="Step 2"><divclass="text-container"><divclass="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><divclass="step"id="step3"><iframewidth="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><divclass="text-container"><divclass="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><divclass="step"id="step4"><imgsrc="https://l.icdbcdn.com/oh/614506c7-4cf4-4e4f-bf74-1f25445a2904.jpg?w=1040"alt="Step 4"><divclass="text-container"><divclass="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><divclass="step"id="step5"><imgsrc="https://l.icdbcdn.com/oh/614506c7-4cf4-4e4f-bf74-1f25445a2904.jpg?w=1040"alt="Step 5"><divclass="text-container"><divclass="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><divclass="step"id="step6"><imgsrc="https://l.icdbcdn.com/oh/614506c7-4cf4-4e4f-bf74-1f25445a2904.jpg?w=1040"alt="Step 6"><divclass="text-container"><divclass="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><divclass="step"id="step7"><divclass="text-container"><divclass="text"><strong> Passez un agréable séjour chez nous ???? </strong></div></div></div><divclass="navigation"><buttonid="prevBtn"onclick="prevStep()"disabled>Précédent</button><divclass="dots"><spanclass="dot active"></span><spanclass="dot"></span><spanclass="dot"></span><spanclass="dot"></span><spanclass="dot"></span><spanclass="dot"></span><spanclass="dot"></span></div><buttonid="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>
