Skip to content

Instantly share code, notes, and snippets.

@samuelbezerrab

samuelbezerrab/index.html

Created July 24, 2024 14:36
Show Gist options
  • Save samuelbezerrab/10a5d48a1344d9d37afe424ebaac03be to your computer and use it in GitHub Desktop.
Save samuelbezerrab/10a5d48a1344d9d37afe424ebaac03be to your computer and use it in GitHub Desktop.
Download ZIP
iPhone Screens Cover Image Previwer
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iPhone Resolution Test</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
font-family: Arial, sans-serif;
}
.container {
margin: 20px;
border: 1px solid #000;
display: flex;
justify-content: center;
align-items: center;
background-color: #f0f0f0;
overflow: hidden;
}
.container img {
width: 100%;
height: 100%;
object-fit: cover;
}
.description {
margin-top: 10px;
font-weight: bold;
}
</style>
</head>
<body>
<input type="file" id="fileInput" accept="image/*">
<div id="iphone-resolutions">
<div class="description">iPhone 4, 4S (320 x 480)</div>
<div class="container" style="width: 320px; height: 480px;">
<img id="img-320x480" alt="Test Image">
</div>
<div class="description">iPhone 5, 5S, SE (320 x 568)</div>
<div class="container" style="width: 320px; height: 568px;">
<img id="img-320x568" alt="Test Image">
</div>
<div class="description">iPhone 6, 6S, 7, 8 (375 x 667)</div>
<div class="container" style="width: 375px; height: 667px;">
<img id="img-375x667" alt="Test Image">
</div>
<div class="description">iPhone 6+, 6S+, 7+, 8+ (414 x 736)</div>
<div class="container" style="width: 414px; height: 736px;">
<img id="img-414x736" alt="Test Image">
</div>
<div class="description">iPhone X, XS (375 x 812)</div>
<div class="container" style="width: 375px; height: 812px;">
<img id="img-375x812" alt="Test Image">
</div>
<div class="description">iPhone XR (414 x 896)</div>
<div class="container" style="width: 414px; height: 896px;">
<img id="img-414x896" alt="Test Image">
</div>
<div class="description">iPhone XS Max (414 x 896)</div>
<div class="container" style="width: 414px; height: 896px;">
<img id="img-414x896" alt="Test Image">
</div>
<div class="description">iPhone 11 Pro (375 x 812)</div>
<div class="container" style="width: 375px; height: 812px;">
<img id="img-375x812" alt="Test Image">
</div>
<div class="description">iPhone 11 Pro Max (414 x 896)</div>
<div class="container" style="width: 414px; height: 896px;">
<img id="img-414x896-11pm" alt="Test Image">
</div>
<div class="description">iPhone 12 Mini (360 x 780)</div>
<div class="container" style="width: 360px; height: 780px;">
<img id="img-360x780" alt="Test Image">
</div>
<div class="description">iPhone 12, 12 Pro (390 x 844)</div>
<div class="container" style="width: 390px; height: 844px;">
<img id="img-390x844" alt="Test Image">
</div>
<div class="description">iPhone 12 Pro Max (428 x 926)</div>
<div class="container" style="width: 428px; height: 926px;">
<img id="img-428x926" alt="Test Image">
</div>
<div class="description">iPhone 13 Mini (375 x 812)</div>
<div class="container" style="width: 375px; height: 812px;">
<img id="img-375x812-13m" alt="Test Image">
</div>
<div class="description">iPhone 13, 13 Pro (390 x 844)</div>
<div class="container" style="width: 390px; height: 844px;">
<img id="img-390x844-13p" alt="Test Image">
</div>
<div class="description">iPhone 13 Pro Max (430 x 932)</div>
<div class="container" style="width: 430px; height: 932px;">
<img id="img-430x932" alt="Test Image">
</div>
</div>
<script>
const fileInput = document.getElementById('fileInput');
const imageElements = document.querySelectorAll('.container img');
fileInput.addEventListener('change', (event) => {
const file = event.target.files[0];
if (file) {
const imageURL = URL.createObjectURL(file);
imageElements.forEach(img => {
img.src = imageURL;
});
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment