Buckets:

lvwerra
/

agentui-storage

lvwerra/agentui-storage / users /quentin /apple-clone.html

23 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Apple</title>
	<style>
	/* CSS Variables */
	:root {
	--color-black: #1d1d1f;
	--color-dark-gray: #86868b;
	--color-light-gray: #f5f5f7;
	--color-white: #ffffff;
	--color-blue: #0071e3;
	--color-blue-hover: #0077ed;
	--shadow-soft: 0 4px 24px rgba(0, 0, 0, 0.08);
	--shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.04);
	--font-stack: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--transition: all 0.3s ease;
	--nav-height: 44px;
	}

	/* Reset & Base Styles */
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	font-family: var(--font-stack);
	background-color: var(--color-white);
	color: var(--color-black);
	line-height: 1.4;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	}

	a {
	text-decoration: none;
	color: inherit;
	}

	ul {
	list-style: none;
	}

	/* Navigation */
	.nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: var(--nav-height);
	background: rgba(0, 0, 0, 0.8);
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	z-index: 9999;
	}

	.nav-container {
	max-width: 1000px;
	margin: 0 auto;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20px;
	}

	.nav-logo {
	color: var(--color-white);
	font-size: 18px;
	font-weight: 400;
	}

	.nav-logo svg {
	width: 14px;
	height: 18px;
	fill: var(--color-white);
	}

	.nav-menu {
	display: flex;
	gap: 32px;
	}

	.nav-item a {
	color: #d6d6d6;
	font-size: 12px;
	transition: var(--transition);
	}

	.nav-item a:hover {
	color: var(--color-white);
	}

	.mobile-menu-btn {
	display: none;
	color: var(--color-white);
	font-size: 20px;
	cursor: pointer;
	}

	/* Hero Section */
	.hero {
	margin-top: var(--nav-height);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 80px 20px;
	background: var(--color-black);
	color: var(--color-white);
	position: relative;
	overflow: hidden;
	}

	.hero-content {
	z-index: 1;
	}

	.hero h1 {
	font-size: 56px;
	font-weight: 600;
	margin-bottom: 8px;
	letter-spacing: -0.015em;
	}

	.hero h2 {
	font-size: 28px;
	font-weight: 400;
	margin-bottom: 16px;
	color: #86868b;
	}

	.hero-tagline {
	font-size: 19px;
	margin-bottom: 24px;
	color: var(--color-white);
	}

	.hero-links {
	display: flex;
	gap: 24px;
	align-items: center;
	justify-content: center;
	margin-bottom: 48px;
	}

	.hero-links a {
	font-size: 17px;
	color: var(--color-blue);
	transition: var(--transition);
	}

	.hero-links a:hover {
	text-decoration: underline;
	}

	.hero-links a.link-arrow::after {
	content: " ›";
	font-size: 18px;
	}

	.hero-image {
	width: 100%;
	max-width: 800px;
	margin-top: 20px;
	}

	.hero-image-container {
	position: relative;
	width: 100%;
	max-width: 600px;
	height: 400px;
	background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%);
	border-radius: 20px;
	overflow: hidden;
	}

	.device-mockup {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	position: relative;
	}

	.device-screen {
	width: 280px;
	height: 360px;
	background: linear-gradient(180deg, #1a1a1a 0%, #000 100%);
	border-radius: 40px;
	box-shadow:
	0 0 0 3px #333,
	0 20px 60px rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	}

	.device-notch {
	position: absolute;
	top: 12px;
	width: 100px;
	height: 24px;
	background: #000;
	border-radius: 12px;
	}

	.device-content {
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg,
	rgba(255,255,255,0.1) 0%,
	rgba(255,255,255,0.05) 50%,
	rgba(0,0,0,0.2) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	}

	.device-time {
	font-size: 64px;
	font-weight: 300;
	color: var(--color-white);
	}

	/* Product Grid Section */
	.products {
	padding: 0;
	background: var(--color-white);
	}

	.product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	gap: 12px;
	}

	.product-card {
	position: relative;
	min-height: 580px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	text-align: center;
	padding: 48px 20px;
	cursor: pointer;
	transition: var(--transition);
	overflow: hidden;
	}

	.product-card:hover {
	transform: translateY(-2px);
	}

	.product-card.light {
	background: var(--color-light-gray);
	}

	.product-card.dark {
	background: var(--color-black);
	color: var(--color-white);
	}

	.product-card.accent {
	background: linear-gradient(180deg, #fafafa 0%, #f5f5f7 100%);
	}

	.product-logo {
	font-size: 32px;
	font-weight: 600;
	margin-bottom: 8px;
	}

	.product-card.dark .product-logo {
	color: var(--color-white);
	}

	.product-tagline {
	font-size: 19px;
	margin-bottom: 12px;
	max-width: 320px;
	}

	.product-card.dark .product-tagline {
	color: #86868b;
	}

	.product-description {
	font-size: 17px;
	color: var(--color-dark-gray);
	margin-bottom: 20px;
	}

	.product-card.dark .product-description {
	color: #86868b;
	}

	.product-links {
	display: flex;
	gap: 16px;
	align-items: center;
	margin-bottom: 32px;
	}

	.product-links a {
	font-size: 17px;
	color: var(--color-blue);
	}

	.product-links a.link-arrow::after {
	content: " ›";
	}

	.product-image {
	width: 100%;
	max-width: 300px;
	height: 280px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: auto;
	}

	/* Product Mockups */
	.macbook-mockup {
	width: 260px;
	height: 160px;
	background: linear-gradient(180deg, #c0c0c0 0%, #a0a0a0 100%);
	border-radius: 8px 8px 0 0;
	position: relative;
	}

	.macbook-screen {
	position: absolute;
	top: 8px;
	left: 8px;
	right: 8px;
	bottom: 0;
	background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
	border-radius: 4px 4px 0 0;
	}

	.macbook-base {
	width: 300px;
	height: 12px;
	background: linear-gradient(180deg, #d0d0d0 0%, #b0b0b0 100%);
	border-radius: 0 0 4px 4px;
	margin-top: -2px;
	}

	.ipad-mockup {
	width: 200px;
	height: 260px;
	background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%);
	border-radius: 16px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	}

	.ipad-screen {
	width: 180px;
	height: 240px;
	background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
	border-radius: 8px;
	}

	.watch-mockup {
	width: 120px;
	height: 150px;
	background: linear-gradient(180deg, #e0e0e0 0%, #c0c0c0 100%);
	border-radius: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
	position: relative;
	}

	.watch-crown {
	position: absolute;
	right: -8px;
	top: 50%;
	transform: translateY(-50%);
	width: 8px;
	height: 20px;
	background: #b0b0b0;
	border-radius: 2px;
	}

	.watch-screen {
	width: 90px;
	height: 110px;
	background: linear-gradient(180deg, #ff6b6b 0%, #ee5a24 100%);
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	}

	.watch-screen span {
	font-size: 14px;
	color: var(--color-white);
	font-weight: 600;
	}

	/* Footer */
	.footer {
	background: var(--color-light-gray);
	padding: 40px 20px;
	font-size: 12px;
	color: var(--color-dark-gray);
	}

	.footer-container {
	max-width: 1000px;
	margin: 0 auto;
	}

	.footer-note {
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid #d2d2d7;
	}

	.footer-links {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 20px;
	margin-bottom: 30px;
	}

	.footer-column h4 {
	color: var(--color-black);
	font-weight: 600;
	margin-bottom: 10px;
	font-size: 12px;
	}

	.footer-column ul li {
	margin-bottom: 8px;
	}

	.footer-column a {
	color: var(--color-dark-gray);
	transition: var(--transition);
	}

	.footer-column a:hover {
	text-decoration: underline;
	}

	.footer-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	}

	/* Responsive Design */
	@media (max-width: 768px) {
	.nav-menu {
	display: none;
	}

	.mobile-menu-btn {
	display: block;
	}

	.hero h1 {
	font-size: 36px;
	}

	.hero h2 {
	font-size: 20px;
	}

	.hero-tagline {
	font-size: 16px;
	}

	.hero-image-container {
	height: 300px;
	}

	.device-screen {
	width: 200px;
	height: 280px;
	}

	.product-grid {
	grid-template-columns: 1fr;
	}

	.product-card {
	min-height: 500px;
	}
	}

	@media (max-width: 480px) {
	.hero h1 {
	font-size: 28px;
	}

	.hero h2 {
	font-size: 16px;
	}

	.hero-links {
	flex-direction: column;
	gap: 12px;
	}

	.device-screen {
	width: 160px;
	height: 240px;
	}

	.device-time {
	font-size: 48px;
	}
	}

	/* Animations */
	@keyframes fadeInUp {
	from {
	opacity: 0;
	transform: translateY(30px);
	}
	to {
	opacity: 1;
	transform: translateY(0);
	}
	}

	.hero-content {
	animation: fadeInUp 0.8s ease-out;
	}

	.device-mockup {
	animation: fadeInUp 1s ease-out 0.2s both;
	}

	/* Smooth scrolling */
	html {
	scroll-behavior: smooth;
	}
	</style>
	</head>
	<body>
	<!-- Navigation -->
	<nav class="nav">
	<div class="nav-container">
	<a href="#" class="nav-logo">
	<svg viewBox="0 0 14 18" xmlns="http://www.w3.org/2000/svg">
	<path d="M13.5 12.3c-.1.7-.4 1.4-.8 2-.7 1-1.5 1.5-2.4 1.5-.3 0-.7-.1-1.2-.3-.5-.2-.9-.3-1.3-.3-.4 0-.8.1-1.3.3-.5.2-1 .3-1.3.3-.9-.1-1.8-.6-2.5-1.6-.8-1.1-1.2-2.4-1.2-3.8 0-1.1.3-2.1.8-2.9.5-.8 1.2-1.2 2.1-1.2.4 0 .8.1 1.3.3.5.2.9.3 1.2.3.3 0 .6-.1 1.1-.3.5-.2.9-.3 1.3-.3 1.1 0 2 .5 2.6 1.4-.9.6-1.4 1.4-1.4 2.5 0 .9.3 1.6.9 2.2.4.4.8.6 1.3.7 0 .1 0 .2-.1.3zM9.4 3c0 .6-.2 1.2-.7 1.7-.5.6-1.2.9-2 .9-.1-.6.1-1.2.6-1.8.5-.5 1.1-.8 2.1-.8z"/>
	</svg>
	</a>
	<ul class="nav-menu">
	<li class="nav-item"><a href="#">Store</a></li>
	<li class="nav-item"><a href="#">Mac</a></li>
	<li class="nav-item"><a href="#">iPad</a></li>
	<li class="nav-item"><a href="#">iPhone</a></li>
	<li class="nav-item"><a href="#">Watch</a></li>
	<li class="nav-item"><a href="#">AirPods</a></li>
	<li class="nav-item"><a href="#">TV & Home</a></li>
	<li class="nav-item"><a href="#">Entertainment</a></li>
	<li class="nav-item"><a href="#">Accessories</a></li>
	<li class="nav-item"><a href="#">Support</a></li>
	</ul>
	<div class="mobile-menu-btn">☰</div>
	</div>
	</nav>

	<!-- Hero Section -->
	<section class="hero">
	<div class="hero-content">
	<h1>iPhone 15 Pro</h1>
	<h2>Titanium. So strong. So light. So Pro.</h2>
	<p class="hero-tagline">The ultimate iPhone.</p>
	<div class="hero-links">
	<a href="#" class="link-arrow">Learn more</a>
	<a href="#" class="link-arrow">Buy</a>
	</div>
	</div>
	<div class="hero-image">
	<div class="hero-image-container">
	<div class="device-mockup">
	<div class="device-screen">
	<div class="device-notch"></div>
	<div class="device-content">
	<span class="device-time">9:41</span>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Product Grid -->
	<section class="products">
	<div class="product-grid">
	<!-- MacBook Pro -->
	<div class="product-card light">
	<h3 class="product-logo">MacBook Pro</h3>
	<p class="product-tagline">Mind-blowing. Head-turning.</p>
	<p class="product-description">M3, M3 Pro, and M3 Max</p>
	<div class="product-links">
	<a href="#" class="link-arrow">Learn more</a>
	<a href="#" class="link-arrow">Buy</a>
	</div>
	<div class="product-image">
	<div>
	<div class="macbook-mockup">
	<div class="macbook-screen"></div>
	</div>
	<div class="macbook-base"></div>
	</div>
	</div>
	</div>

	<!-- iPad Pro -->
	<div class="product-card dark">
	<h3 class="product-logo">iPad Pro</h3>
	<p class="product-tagline">Supercharged by M2</p>
	<p class="product-description">The ultimate iPad experience.</p>
	<div class="product-links">
	<a href="#" class="link-arrow">Learn more</a>
	<a href="#" class="link-arrow">Buy</a>
	</div>
	<div class="product-image">
	<div class="ipad-mockup">
	<div class="ipad-screen"></div>
	</div>
	</div>
	</div>

	<!-- Apple Watch -->
	<div class="product-card accent">
	<h3 class="product-logo">Apple Watch</h3>
	<p class="product-tagline">Adventure awaits.</p>
	<p class="product-description">Series 9 and Ultra 2</p>
	<div class="product-links">
	<a href="#" class="link-arrow">Learn more</a>
	<a href="#" class="link-arrow">Buy</a>
	</div>
	<div class="product-image">
	<div class="watch-mockup">
	<div class="watch-crown"></div>
	<div class="watch-screen">
	<span>10:09</span>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Footer -->
	<footer class="footer">
	<div class="footer-container">
	<div class="footer-note">
	<p>1. Trade-in values will vary based on the condition, year, and configuration of your eligible trade-in device.</p>
	</div>
	<div class="footer-links">
	<div class="footer-column">
	<h4>Shop and Learn</h4>
	<ul>
	<li><a href="#">Store</a></li>
	<li><a href="#">Mac</a></li>
	<li><a href="#">iPad</a></li>
	<li><a href="#">iPhone</a></li>
	<li><a href="#">Watch</a></li>
	<li><a href="#">AirPods</a></li>
	</ul>
	</div>
	<div class="footer-column">
	<h4>Services</h4>
	<ul>
	<li><a href="#">Apple Music</a></li>
	<li><a href="#">Apple TV+</a></li>
	<li><a href="#">Apple Fitness+</a></li>
	<li><a href="#">Apple News+</a></li>
	<li><a href="#">Apple Arcade</a></li>
	<li><a href="#">iCloud</a></li>
	</ul>
	</div>
	<div class="footer-column">
	<h4>Account</h4>
	<ul>
	<li><a href="#">Manage Your Apple ID</a></li>
	<li><a href="#">Apple Store Account</a></li>
	<li><a href="#">iCloud.com</a></li>
	</ul>
	</div>
	<div class="footer-column">
	<h4>Apple Store</h4>
	<ul>
	<li><a href="#">Find a Store</a></li>
	<li><a href="#">Genius Bar</a></li>
	<li><a href="#">Today at Apple</a></li>
	<li><a href="#">Apple Camp</a></li>
	<li><a href="#">Financing</a></li>
	</ul>
	</div>
	<div class="footer-column">
	<h4>Apple Values</h4>
	<ul>
	<li><a href="#">Accessibility</a></li>
	<li><a href="#">Environment</a></li>
	<li><a href="#">Privacy</a></li>
	<li><a href="#">Supplier Responsibility</a></li>
	</ul>
	</div>
	</div>
	<div class="footer-bottom">
	<p>Copyright © 2026 Apple Inc. All rights reserved.</p>
	<div>
	<a href="#">Privacy Policy</a>
	<span> \| </span>
	<a href="#">Terms of Use</a>
	<span> \| </span>
	<a href="#">Sales and Refunds</a>
	</div>
	</div>
	</div>
	</footer>

	<script>
	// Mobile menu toggle (simple implementation)
	document.querySelector('.mobile-menu-btn').addEventListener('click', function() {
	const navMenu = document.querySelector('.nav-menu');
	if (navMenu.style.display === 'flex') {
	navMenu.style.display = 'none';
	} else {
	navMenu.style.display = 'flex';
	navMenu.style.flexDirection = 'column';
	navMenu.style.position = 'absolute';
	navMenu.style.top = '44px';
	navMenu.style.left = '0';
	navMenu.style.right = '0';
	navMenu.style.background = 'rgba(0, 0, 0, 0.95)';
	navMenu.style.padding = '20px';
	navMenu.style.gap = '16px';
	}
	});

	// Add scroll effect to navbar
	window.addEventListener('scroll', function() {
	const nav = document.querySelector('.nav');
	if (window.scrollY > 50) {
	nav.style.background = 'rgba(0, 0, 0, 0.95)';
	} else {
	nav.style.background = 'rgba(0, 0, 0, 0.8)';
	}
	});
	</script>
	</body>
	</html>

Xet Storage Details

Size:: 23 kB
Xet hash:: a8c29d6d2dcf0b510259866b71a1afe77affa9e62e06400293fd325058435a9b

Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.