Ctrl+K
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>iPhone Image Showcase</title> <script src="https://cdn.tailwindcss.com"></script> <script> tailwind.config = { theme: { extend: { colors: { 'iphone-bg': '#000', 'iphone-border': '#212121', 'status-dark': '#1c1c1e', 'status-light': '#f2f2f7' } } } } </script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap'); body { font-family: 'Inter', sans-serif; background: radial-gradient(circle, #0aad5a 0%, #0b7740 100%); min-height: 100vh; display: flex; justify-content: center; align-items: center; perspective: 1000px; } /* iPhone Frame */ .iphone-wrapper { position: relative; width: 350px; margin: 2rem; transition: transform 0.5s ease; } .iphone-frame { position: relative; height: 760px; width: 100%; border-radius: 50px; border: 10px solid #212121; background-color: #000; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6); } /* Display Area */ .display-container { position: relative; height: 100%; width: 100%; overflow: hidden; background-color: black; } .status-bar { position: absolute; top: 0; left: 0; width: 100%; padding: 8px 20px; background-color: rgba(0, 0, 0, 0.8); backdrop-filter: blur(10px); z-index: 10; } .dynamic-island { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 100px; height: 32px; background-color: #1c1c1e; border-radius: 16px; display: flex; justify-content: center; align-items: center; } /* Power and Volume Buttons */ .power-btn { position: absolute; right: -6px; top: 140px; width: 6px; height: 80px; background: #212121; border-radius: 4px; } .volumne-btn-container { position: absolute; left: -6px; top: 150px; width: 6px; height: 100px; display: flex; flex-direction: column; gap: 10px; } .volume-btn { flex: 1; background: #212121; border-radius: 4px; } /* Image Display */ .custom-image { position: absolute; top: 10; left: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.5s ease; border-radius: 4px; } .iphone-bottom { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); width: 130px; height: 4px; background-color: #f2f2f7; border-radius: 2px; opacity: 0.8; } /* Animation controls */ .animate-checkbox { position: fixed; top: 30px; right: 30px; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); border-radius: 12px; padding: 15px 20px; font-weight: 600; color: white; } /* Animation Keyframes */ @keyframes rotate3D { 0% { transform: rotateX(-10deg) rotateY(-10deg); } 25% { transform: rotateX(10deg) rotateY(-10deg); } 50% { transform: rotateX(10deg) rotateY(10deg); } 75% { transform: rotateX(-10deg) rotateY(10deg); } 100% { transform: rotateX(-10deg) rotateY(-10deg); } } .animate-on { animation: rotate3D 30s infinite alternate ease-in-out; } </style> </head> <body> <div class="animate-checkbox"> <label for="animate">3D Animation: </label> <input id="animate" name="animate" type="checkbox" checked /> </div> <div id="iPhone" class="iphone-wrapper animate-on"> <span class="power-btn"></span> <div class="volumne-btn-container"> <span class="volume-btn"></span> <span class="volume-btn"></span> </div> <div class="iphone-frame"> <div class="display-container"> <div class="status-bar flex justify-between items-center"> <div class="time-text text-white font-medium">12:32</div> <div class="dynamic-island"> <span class="camera w-4 h-4 bg-black rounded-full opacity-30"></span> </div> <div class="flex items-center space-x-2"> <img class="w-5" src="https://cdn-icons-png.flaticon.com/512/1065/1065172.png" alt="network"> <img class="w-5" src="https://cdn-icons-png.flaticon.com/512/2338/2338849.png" alt="wifi"> <img class="w-5" src="https://cdn-icons-png.flaticon.com/512/3412/3412062.png" alt="battery"> </div> </div> <!-- Custom Image Display --> <div class="w-full h-full flex items-center justify-center"> <img src="https://i.ytimg.com/vi/Q5LM985yUmQ/hq720.jpg?sqp=-oaymwEhCK4FEIIDSFryq4qpAxMIARUAAAAAGAElAADIQj0AgKJD&rs=AOn4CLB1oDEjqLiCtcrwH6ZYb5kVVORfOw" alt="Nature landscape" class="custom-image"> </div> </div> </div> </div> <script> const iPhone = document.getElementById("iPhone"); const animateCheckbox = document.getElementById("animate"); animateCheckbox.addEventListener("change", function() { if (this.checked) { iPhone.classList.add("animate-on"); } else { iPhone.classList.remove("animate-on"); } }); // Image rotation functionality let currentImageIndex = 0; const images = [ "https://images.unsplash.com/photo-1682685794690-43f0ae7d9a21?ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80", "https://images.unsplash.com/photo-1683009427692-8a28374b8d0d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80", "https://images.unsplash.com/photo-1693689544595-1a7dd07b0c5f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" ]; // Touch event listeners for changing image const displayArea = document.querySelector('.display-container'); let touchStartX = 0; let touchEndX = 0; displayArea.addEventListener('touchstart', e => { touchStartX = e.changedTouches[0].screenX; }); displayArea.addEventListener('touchend', e => { touchEndX = e.changedTouches[0].screenX; handleSwipe(); }); // Mouse event listeners for desktop displayArea.addEventListener('mousedown', e => { touchStartX = e.screenX; }); displayArea.addEventListener('mouseup', e => { touchEndX = e.screenX; handleSwipe(); }); function handleSwipe() { if (touchEndX < touchStartX - 50) { // Swipe left currentImageIndex = (currentImageIndex + 1) % images.length; changeImage(); } else if (touchEndX > touchStartX + 50) { // Swipe right currentImageIndex = (currentImageIndex - 1 + images.length) % images.length; changeImage(); } } function changeImage() { const imgElement = document.querySelector('.custom-image'); imgElement.style.opacity = '0'; setTimeout(() => { imgElement.src = images[currentImageIndex]; imgElement.style.opacity = '1'; }, 300); } </script> </body> </html> --- fix the custom image on the display to have round corners. the phone has round corners and the image doesnt so the corners of the image on the top page has the corners going out of iphone. make it like the bottom part that looks good. also adjust the phone to addapt on screen size, especially on mobile displays - Initial Deployment
b885133 verified