There's one big reason I'll choose the Pixel 11 Pro Fold over the Galaxy Z Fold 8

Learn to build a responsive foldable device interface that simulates the screen folding behavior of modern smartphones like the Pixel 11 Pro Fold and Galaxy Z Fold 8.

Introduction

In this tutorial, you'll learn how to create and work with foldable device interfaces using HTML, CSS, and JavaScript. Based on the recent discussion about foldable smartphones like the Pixel 11 Pro Fold and Galaxy Z Fold 8, we'll build a responsive web interface that mimics the foldable experience. This tutorial will teach you how to detect device orientation and create adaptive layouts that respond to screen folding states.

Prerequisites

Basic understanding of HTML, CSS, and JavaScript
Text editor (VS Code, Sublime Text, or similar)
Modern web browser (Chrome, Firefox, or Edge)
Basic knowledge of responsive design concepts

Step-by-Step Instructions

1. Create the Basic HTML Structure

First, we'll create the foundational HTML structure for our foldable interface. This will include the basic document structure and a container that will hold our content.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pixel Foldable Interface</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="foldable-container" class="foldable-container">
        <div id="main-content" class="main-content">
            <h1>Foldable Device Interface</h1>
            <p>This interface adapts based on screen orientation and fold state.</p>
            <div id="fold-indicator" class="fold-indicator">
                <p>Fold state: <span id="fold-status">Unknown</span></p>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

2. Set Up the CSS Styles

Next, we'll create the CSS to make our interface responsive and visually appealing. We'll define different styles for folded and unfolded states.

/* style.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.foldable-container {
    width: 100%;
    max-width: 800px;
    height: 600px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
}

.main-content {
    padding: 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

h1 {
    color: #333;
    margin-bottom: 20px;
    font-size: 2rem;
}

p {
    color: #666;
    margin-bottom: 30px;
    font-size: 1.1rem;
    line-height: 1.6;
}

.fold-indicator {
    background: #f0f0f0;
    padding: 15px;
    border-radius: 10px;
    margin-top: 20px;
    width: 100%;
}

.fold-indicator p {
    font-weight: bold;
    color: #333;
}

.fold-indicator span {
    color: #e74c3c;
    font-weight: bold;
}

/* Responsive styles for different screen sizes */
@media (max-width: 600px) {
    .foldable-container {
        height: 500px;
    }
    
    h1 {
        font-size: 1.5rem;
    }
}

@media (min-width: 1200px) {
    .foldable-container {
        width: 1000px;
        height: 700px;
    }
}

3. Implement JavaScript Detection Logic

Now we'll add JavaScript to detect screen orientation and simulate fold states. This is crucial for understanding how foldable devices work.

// script.js
function updateFoldStatus() {
    const foldIndicator = document.getElementById('fold-status');
    const foldContainer = document.getElementById('foldable-container');
    
    // Get screen dimensions
    const screenWidth = window.innerWidth;
    const screenHeight = window.innerHeight;
    
    // Simulate fold detection based on screen ratios
    const ratio = screenWidth / screenHeight;
    
    if (ratio > 1.2) {
        // Wide screen - likely unfolded
        foldIndicator.textContent = 'Unfolded';
        foldIndicator.style.color = '#27ae60';
        foldContainer.style.transform = 'scale(1)';
    } else {
        // Narrow screen - likely folded
        foldIndicator.textContent = 'Folded';
        foldIndicator.style.color = '#e74c3c';
        foldContainer.style.transform = 'scale(0.95)';
    }
    
    // Update container based on orientation
    if (window.matchMedia('(orientation: landscape)').matches) {
        foldContainer.style.borderRadius = '20px';
    } else {
        foldContainer.style.borderRadius = '10px';
    }
}

// Listen for screen resize events
window.addEventListener('resize', updateFoldStatus);

// Initial check
updateFoldStatus();

// Add orientation change listener
window.addEventListener('orientationchange', function() {
    setTimeout(updateFoldStatus, 100);
});

4. Add Advanced Fold Simulation

Let's enhance our interface with more realistic fold simulation using CSS transforms and JavaScript.

// Enhanced script.js
function simulateFold() {
    const container = document.getElementById('foldable-container');
    const foldStatus = document.getElementById('fold-status');
    
    // Get current screen state
    const isFolded = window.innerWidth < 500 || window.innerHeight < 500;
    
    if (isFolded) {
        // Simulate folded state
        container.style.cssText = `
            width: 100%;
            height: 400px;
            transform: perspective(1000px) rotateY(10deg);
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        `;
        foldStatus.textContent = 'Folded (Simulated)';
        foldStatus.style.color = '#e74c3c';
    } else {
        // Simulate unfolded state
        container.style.cssText = `
            width: 100%;
            height: 600px;
            transform: perspective(1000px) rotateY(0deg);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        `;
        foldStatus.textContent = 'Unfolded (Simulated)';
        foldStatus.style.color = '#27ae60';
    }
}

// Update fold simulation on resize
window.addEventListener('resize', simulateFold);
window.addEventListener('orientationchange', simulateFold);

// Initialize
simulateFold();

5. Add Interactive Elements

Let's make our interface more interactive by adding buttons that simulate different fold states and screen orientations.

// Add this to your HTML inside the main-content div
<div class="controls" style="margin-top: 20px;">
    <button id="simulate-fold" onclick="simulateFoldState('folded')">Simulate Folded</button>
    <button id="simulate-unfold" onclick="simulateFoldState('unfolded')">Simulate Unfolded</button>
    <button id="toggle-orientation" onclick="toggleOrientation()">Toggle Orientation</button>
</div>

// Add these functions to your JavaScript
function simulateFoldState(state) {
    const container = document.getElementById('foldable-container');
    const foldStatus = document.getElementById('fold-status');
    
    if (state === 'folded') {
        container.style.cssText = `
            width: 100%;
            height: 400px;
            transform: perspective(1000px) rotateY(10deg);
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        `;
        foldStatus.textContent = 'Folded (Simulated)';
        foldStatus.style.color = '#e74c3c';
    } else {
        container.style.cssText = `
            width: 100%;
            height: 600px;
            transform: perspective(1000px) rotateY(0deg);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        `;
        foldStatus.textContent = 'Unfolded (Simulated)';
        foldStatus.style.color = '#27ae60';
    }
}

function toggleOrientation() {
    const currentWidth = window.innerWidth;
    const currentHeight = window.innerHeight;
    
    // Toggle between landscape and portrait
    if (currentWidth > currentHeight) {
        // Switch to portrait
        window.resizeTo(currentHeight, currentWidth);
    } else {
        // Switch to landscape
        window.resizeTo(currentWidth, currentHeight);
    }
}

6. Test Your Foldable Interface

Finally, let's test our implementation by opening the HTML file in a browser and resizing the window to see how it responds to different screen states.

Save all your files (index.html, style.css, script.js)
Open index.html in a modern web browser
Resize your browser window to see the interface adapt
Click the "Simulate Folded" and "Simulate Unfolded" buttons
Try toggling your browser's device toolbar to simulate mobile devices

Summary

In this tutorial, you've learned how to create a responsive foldable device interface using HTML, CSS, and JavaScript. You've built a system that detects screen orientation and simulates fold states, which mirrors the core functionality of devices like the Pixel 11 Pro Fold and Galaxy Z Fold 8.

The key concepts covered include:

Responsive design principles for foldable screens
JavaScript detection of screen dimensions and orientation
CSS transforms to simulate physical folding effects
Event listeners for dynamic interface updates

This implementation demonstrates how foldable devices work by adapting their interface based on screen state. The Pixel 11 Pro Fold's advantage lies in its seamless integration of software and hardware, which this tutorial helps you understand through practical coding.