Introduction
In this tutorial, you'll learn how to create a basic foldable phone interface simulation using HTML, CSS, and JavaScript. This hands-on project will teach you fundamental concepts of responsive design and user interface interactions that are essential for understanding modern mobile development. Since Apple's iPhone Duo represents a new category of foldable devices, we'll build a simplified version that demonstrates how the screen might behave when folded and unfolded.
Prerequisites
To follow along with this tutorial, you'll need:
- A computer with internet access
- A code editor (like VS Code, Sublime Text, or even Notepad)
- Basic understanding of HTML, CSS, and JavaScript
- Modern web browser (Chrome, Firefox, or Safari)
Step-by-Step Instructions
Step 1: Create the Basic HTML Structure
We'll start by creating the basic HTML structure for our foldable phone interface. This will include a container that simulates the phone's screen and two panels that will represent the folded and unfolded states.
Code Snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iPhone Duo Simulation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="phone-container" id="phoneContainer">
<div class="phone-screen" id="phoneScreen">
<div class="fold-line" id="foldLine"></div>
<div class="screen-panel" id="panel1">
<h2>Panel 1</h2>
<p>This is the first screen panel</p>
</div>
<div class="screen-panel" id="panel2">
<h2>Panel 2</h2>
<p>This is the second screen panel</p>
</div>
</div>
<div class="fold-button" id="foldButton">Toggle Fold</div>
</div>
<script src="script.js"></script>
</body>
</html>Step 2: Create the CSS Styling
Now we'll create the CSS to style our foldable phone. This will include setting up the phone container, screen panels, and the fold animation effect. The key here is to create a realistic phone simulation that shows how the interface would change when folded.
Code Snippet:
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
margin: 0;
padding: 20px;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.phone-container {
position: relative;
width: 320px;
height: 640px;
background: #000;
border-radius: 40px;
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
overflow: hidden;
transform: scale(1);
transition: transform 0.3s ease;
}
.phone-screen {
width: 100%;
height: 100%;
position: relative;
background: #fff;
overflow: hidden;
}
.fold-line {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 4px;
background: #ccc;
transform: translateY(-50%);
z-index: 10;
}
.screen-panel {
position: absolute;
width: 50%;
height: 100%;
padding: 20px;
box-sizing: border-box;
transition: all 0.5s ease;
}
#panel1 {
left: 0;
background: #f0f8ff;
border-right: 1px solid #eee;
}
#panel2 {
right: 0;
background: #fff8f0;
border-left: 1px solid #eee;
}
.fold-button {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background: #007AFF;
color: white;
padding: 10px 20px;
border-radius: 20px;
cursor: pointer;
font-weight: bold;
transition: background 0.3s ease;
}
.fold-button:hover {
background: #0056b3;
}Step 3: Add JavaScript Functionality
We'll now add JavaScript to make our foldable phone interactive. This will include the functionality to toggle between folded and unfolded states, and animate the transition between these states.
Code Snippet:
document.addEventListener('DOMContentLoaded', function() {
const phoneContainer = document.getElementById('phoneContainer');
const foldButton = document.getElementById('foldButton');
const panel1 = document.getElementById('panel1');
const panel2 = document.getElementById('panel2');
const foldLine = document.getElementById('foldLine');
let isFolded = false;
foldButton.addEventListener('click', function() {
isFolded = !isFolded;
if (isFolded) {
// Fold the phone
phoneContainer.style.transform = 'scale(0.95)';
panel1.style.width = '100%';
panel2.style.width = '100%';
panel1.style.left = '0';
panel2.style.right = '0';
panel1.style.opacity = '1';
panel2.style.opacity = '1';
foldLine.style.display = 'block';
foldButton.textContent = 'Unfold Phone';
} else {
// Unfold the phone
phoneContainer.style.transform = 'scale(1)';
panel1.style.width = '50%';
panel2.style.width = '50%';
panel1.style.left = '0';
panel2.style.right = '0';
panel1.style.opacity = '1';
panel2.style.opacity = '1';
foldLine.style.display = 'none';
foldButton.textContent = 'Fold Phone';
}
});
});Step 4: Enhance the User Experience
Let's improve our simulation by adding more realistic interactions. We'll add a subtle animation when the phone is folded and some visual feedback to make the interface more engaging.
Enhanced JavaScript Code:
document.addEventListener('DOMContentLoaded', function() {
const phoneContainer = document.getElementById('phoneContainer');
const foldButton = document.getElementById('foldButton');
const panel1 = document.getElementById('panel1');
const panel2 = document.getElementById('panel2');
const foldLine = document.getElementById('foldLine');
let isFolded = false;
// Add a subtle shadow effect
function updateShadow() {
if (isFolded) {
phoneContainer.style.boxShadow = '0 10px 30px rgba(0,0,0,0.3)';
} else {
phoneContainer.style.boxShadow = '0 20px 60px rgba(0,0,0,0.5)';
}
}
foldButton.addEventListener('click', function() {
isFolded = !isFolded;
// Add animation effect
phoneContainer.style.transition = 'transform 0.3s ease, box-shadow 0.3s ease';
if (isFolded) {
// Fold the phone
phoneContainer.style.transform = 'scale(0.95)';
panel1.style.width = '100%';
panel2.style.width = '100%';
panel1.style.left = '0';
panel2.style.right = '0';
panel1.style.opacity = '0.8';
panel2.style.opacity = '0.8';
foldLine.style.display = 'block';
foldButton.textContent = 'Unfold Phone';
updateShadow();
} else {
// Unfold the phone
phoneContainer.style.transform = 'scale(1)';
panel1.style.width = '50%';
panel2.style.width = '50%';
panel1.style.left = '0';
panel2.style.right = '0';
panel1.style.opacity = '1';
panel2.style.opacity = '1';
foldLine.style.display = 'none';
foldButton.textContent = 'Fold Phone';
updateShadow();
}
// Reset transition after animation
setTimeout(() => {
phoneContainer.style.transition = 'transform 0.3s ease, box-shadow 0.3s ease';
}, 300);
});
});Step 5: Test Your Foldable Phone Simulation
Save all your files (index.html, style.css, and script.js) in the same folder. Open the index.html file in your web browser to see your foldable phone in action. Click the 'Fold Phone' button to see the interface fold, and click 'Unfold Phone' to see it unfold again.
Step 6: Customize Your Design
Feel free to customize your foldable phone simulation by:
- Changing the colors and gradients
- Adding more content to the panels
- Creating different fold animations
- Adding more interactive elements
This tutorial gives you a foundational understanding of how foldable interfaces work. While Apple's iPhone Duo will have more sophisticated features, this simulation demonstrates the core concept of how content adapts to different screen configurations.
Summary
In this beginner-friendly tutorial, you've created a working simulation of a foldable phone interface using HTML, CSS, and JavaScript. You learned how to structure a responsive interface, create CSS animations for folding effects, and implement JavaScript interactions to toggle between folded and unfolded states. This project demonstrates fundamental concepts that are essential for understanding modern mobile development and the emerging foldable device market.
