console
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Un Amore Senza Tempo - 浪漫意式表白书</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Google Fonts for Italian Classic Typography -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Great+Vibes&family=Noto+Serif+SC:wght@300;400;600;700&display=swap" rel="stylesheet">
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
gold: {
light: '#f9e79f',
DEFAULT: '#d4af37',
dark: '#aa7c11',
},
terracotta: '#c05a46',
burgundy: '#5c1d24',
parchment: '#fcf8ee',
olive: '#556b2f'
},
fontFamily: {
cinzel: ['Cinzel', 'serif'],
cursive: ['Great Vibes', 'cursive'],
serifCN: ['Noto Serif SC', 'serif']
}
}
}
}
</script>
<style>
/* Custom Renaissance Styles & Parchment Textures */
body {
background-color: #2b1718;
color: #3c2415;
font-family: 'Noto Serif SC', serif;
overflow: hidden;
}
.parchment-bg {
background: #fcf8ee;
background-image:
radial-gradient(circle at 50% 50%, rgba(248, 239, 218, 0.95) 0%, rgba(230, 213, 178, 0.88) 100%),
url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");
}
.gold-border {
border: 3px solid #d4af37;
box-shadow: inset 0 0 15px rgba(212, 175, 55, 0.3), 0 0 25px rgba(0, 0, 0, 0.5);
}
.ornate-corner {
position: absolute;
width: 40px;
height: 40px;
border-color: #d4af37;
pointer-events: none;
}
.corner-tl { top: 12px; left: 12px; border-top: 3px solid; border-left: 3px solid; }
.corner-tr { top: 12px; right: 12px; border-top: 3px solid; border-right: 3px solid; }
.corner-bl { bottom: 12px; left: 12px; border-bottom: 3px solid; border-left: 3px solid; }
.corner-br { bottom: 12px; right: 12px; border-bottom: 3px solid; border-right: 3px solid; }
/* Smooth Slide Animations */
.slide-page {
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
transform: scale(0.95) translateY(20px);
overflow-y: auto;
}
.slide-page.active {
opacity: 1;
pointer-events: auto;
transform: scale(1) translateY(0);
}
/* Custom Scrollbar inside frame */
.slide-page::-webkit-scrollbar {
width: 4px;
}
.slide-page::-webkit-scrollbar-thumb {
background: #d4af37;
border-radius: 4px;
}
/* Envelope Styles */
.envelope-wrapper {
perspective: 1000px;
}
.envelope {
transform-style: preserve-3d;
transition: transform 0.6s ease-in-out;
}
.wax-seal {
background: radial-gradient(circle at 30% 30%, #a93226, #641e16);
box-shadow: 0 4px 10px rgba(0,0,0,0.5), inset 0 0 8px rgba(255,255,255,0.3);
}
/* Glowing photo frame */
.glow-frame {
box-shadow: 0 0 20px rgba(212, 175, 55, 0.4), inset 0 0 10px rgba(212, 175, 55, 0.2);
}
/* Particle Canvas */
#particles-canvas {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 5;
}
</style>
</head>
<body class="relative min-h-screen flex items-center justify-center p-2 sm:p-6 select-none">
<!-- Background Particle Canvas (Petals & Olive Leaves) -->
<canvas id="particles-canvas"></canvas>
<!-- NetEase Cloud Music Audio Element -->
<audio id="bgMusic" loop preload="auto">
<source src="https://music.163.com/song/media/outer/url?id=185924.mp3" type="audio/mpeg">
<source src="https://music.163.com/song/media/outer/url?id=28830384.mp3" type="audio/mpeg">
</audio>
<!-- Music Player Toggle Button with Disc Animation -->
<button id="musicToggle" class="fixed top-4 right-4 z-50 bg-burgundy/90 text-gold hover:bg-burgundy border border-gold/60 px-3 py-2 sm:px-4 sm:py-2 rounded-full shadow-lg transition transform hover:scale-105 flex items-center gap-2">
<div id="discIcon" class="w-5 h-5 rounded-full border-2 border-gold flex items-center justify-center text-xs">
<i class="fas fa-music text-[10px]"></i>
</div>
<span id="musicText" class="text-xs font-cinzel tracking-wider hidden sm:inline">Musica d'Amore</span>
</button>
<!-- Main Container Frame -->
<main class="relative w-full max-w-4xl h-[92vh] max-h-[820px] parchment-bg rounded-2xl gold-border shadow-2xl flex flex-col overflow-hidden z-10">
<!-- Renaissance Inner Flourish Border -->
<div class="absolute inset-2 border border-gold/40 rounded-xl pointer-events-none z-20"></div>
<div class="ornate-corner corner-tl z-20"></div>
<div class="ornate-corner corner-tr z-20"></div>
<div class="ornate-corner corner-bl z-20"></div>
<div class="ornate-corner corner-br z-20"></div>
<!-- Header Banner -->
<header class="pt-5 pb-2 text-center z-20 relative flex-shrink-0">
<p class="font-cursive text-2xl sm:text-3xl text-terracotta">Un Amore Senza Tempo</p>
<!-- Flirty & Intimate English Subtitle -->
<h1 class="font-cinzel text-xs sm:text-sm tracking-[0.25em] text-burgundy/90 uppercase font-semibold">Tu sei il mio respiro, la mia poesia</h1>
<div class="flex justify-center items-center gap-2 mt-1">
<span class="h-[1px] w-12 bg-gold/60"></span>
<span class="text-gold text-xs">❦</span>
<span class="h-[1px] w-12 bg-gold/60"></span>
</div>
</header>
<!-- Pages Content Area -->
<div class="relative flex-1 overflow-hidden p-3 sm:p-8 flex items-center justify-center">
<!-- ========================================== -->
<!-- PAGE 1: COVER & ENVELOPE (封面与火漆信封) -->
<!-- ========================================== -->
<section id="page-1" class="slide-page active flex flex-col items-center justify-center text-center w-full h-full">
<div class="envelope-wrapper my-auto cursor-pointer group" onclick="openEnvelope()">
<div id="envelopeCard" class="envelope relative w-64 h-44 sm:w-80 sm:h-52 bg-terracotta/90 rounded-lg border-2 border-gold/80 flex items-center justify-center shadow-2xl transition duration-500 group-hover:scale-105">
<!-- Decorative Frame on Envelope -->
<div class="absolute inset-3 border border-gold/50 rounded flex flex-col items-center justify-center p-2">
<span class="font-cursive text-gold-light text-2xl sm:text-3xl">Lettera Segreta</span>
<span class="text-[10px] text-gold/90 font-cinzel tracking-widest mt-1 uppercase">For your eyes & heart only</span>
</div>
<!-- Wax Seal -->
<div id="waxSeal" class="wax-seal absolute w-16 h-16 rounded-full border-2 border-gold/60 flex items-center justify-center shadow-xl transition-all duration-700">
<i class="fas fa-heart text-gold text-xl animate-pulse"></i>
</div>
</div>
</div>
<!-- EASY EDITABLE PLACEHOLDER: PAGE 1 SUBTITLE -->
<!-- 自定义文案修改位置:第一页 开启提示语(浪漫诗意风格) -->
<div class="mt-4 sm:mt-6 z-10">
<p class="font-serifCN text-sm sm:text-base text-burgundy font-semibold animate-bounce">
支一竹-轻触火漆印章 ·
</p>
<p class="font-cinzel text-xs text-gold-dark mt-1 italic tracking-wide">
" Touch the seal when you are ready to fall deeper into my realm... "
</p>
</div>
</section>
<!-- ========================================== -->
<!-- PAGE 2: CHAPTER 1 - PRIMO INCONTRO (惊鸿初见) -->
<!-- ========================================== -->
<section id="page-2" class="slide-page flex flex-col items-center justify-center text-center max-w-2xl mx-auto px-4 my-auto">
<div class="font-cursive text-3xl sm:text-4xl text-terracotta mb-1">Capitolo I</div>
<h2 class="font-cinzel text-xl sm:text-2xl font-bold text-burgundy tracking-wider mb-4">Primo Incontro · 惊鸿一瞥</h2>
<div class="w-16 h-16 rounded-full border-2 border-gold/60 flex items-center justify-center bg-burgundy/5 text-burgundy mb-4 shadow-inner">
<i class="fas fa-eye text-2xl text-terracotta"></i>
</div>
<!-- EASY EDITABLE PLACEHOLDER: PAGE 2 MEMORY COPY -->
<!-- 自定义文案修改位置:第二页 初见故事 -->
<div class="font-serifCN text-sm sm:text-base leading-relaxed text-slate-800 bg-white/50 p-5 sm:p-6 rounded-xl border border-gold/40 shadow-sm space-y-3">
<p class="italic text-terracotta font-serifCN font-semibold">
“世界上有千万种偶遇,而你是我生命里最惊心动魄的陷落。”
</p>
<p>
还记得我们第一次相遇的那天,风拂过空气,仿佛连时间都放慢了脚步。你眼里的星光与笑意,在一瞬间穿透了我所有的防御。
</p>
<p class="text-xs text-burgundy/80 font-cinzel tracking-wider pt-2 border-t border-gold/30">
Come la prima volta che ho visto la luce nei tuoi occhi.
</p>
</div>
</section>
<!-- ========================================== -->
<!-- PAGE 3: CHAPTER 2 - DOLCE FAR NIENTE (甜蜜岁月) -->
<!-- ========================================== -->
<section id="page-3" class="slide-page flex flex-col items-center justify-center text-center max-w-2xl mx-auto px-4 my-auto">
<div class="font-cursive text-3xl sm:text-4xl text-terracotta mb-1">Capitolo II</div>
<h2 class="font-cinzel text-xl sm:text-2xl font-bold text-burgundy tracking-wider mb-4">Dolce Far Niente · 无所事事的甜美</h2>
<div class="grid grid-cols-2 gap-3 sm:gap-4 w-full mb-4">
<div class="bg-white/60 border-2 border-gold/50 rounded-lg p-3 flex flex-col items-center justify-center shadow-sm hover:border-gold transition">
<i class="fas fa-coffee text-terracotta text-2xl mb-1"></i>
<span class="text-xs sm:text-sm font-serifCN text-burgundy font-semibold">午后的温热咖啡</span>
<span class="text-[10px] text-slate-500 mt-1">和你闲聊的每一句废话</span>
</div>
<div class="bg-white/60 border-2 border-gold/50 rounded-lg p-3 flex flex-col items-center justify-center shadow-sm hover:border-gold transition">
<i class="fas fa-moon text-terracotta text-2xl mb-1"></i>
<span class="text-xs sm:text-sm font-serifCN text-burgundy font-semibold">深夜的迷离星光</span>
<span class="text-[10px] text-slate-500 mt-1">和你对视时的无声默契</span>
</div>
</div>
<!-- EASY EDITABLE PLACEHOLDER: PAGE 3 MEMORIES COPY -->
<!-- 自定义文案修改位置:第三页 甜蜜回忆文案 -->
<div class="font-serifCN text-sm sm:text-base leading-relaxed text-slate-800 bg-white/50 p-5 rounded-xl border border-gold/40 shadow-sm">
<p>
意大利人说 “Il dolce far niente” 指的是无所事事时的极致欢愉。
</p>
<p class="mt-2">
只要有你在身旁,即使我们只是安静地听着同一首歌、漫无目的地并肩走着,整个世界都变得无比温柔与甜美。
</p>
</div>
</section>
<!-- ========================================== -->
<!-- PAGE 4: CHAPTER 3 - PROMESSA D'AMORE (誓言信件) -->
<!-- ========================================== -->
<section id="page-4" class="slide-page flex flex-col items-center justify-center text-center max-w-2xl mx-auto px-4 my-auto">
<div class="font-cursive text-3xl sm:text-4xl text-terracotta mb-1">Capitolo III</div>
<h2 class="font-cinzel text-xl sm:text-2xl font-bold text-burgundy tracking-wider mb-3">Promessa d'Amore · 爱之誓言</h2>
<!-- EASY EDITABLE PLACEHOLDER: PAGE 4 CONFESSION LETTER -->
<!-- 自定义文案修改位置:第四页 核心表白信件 -->
<div class="font-serifCN text-sm sm:text-base leading-relaxed text-slate-800 space-y-3 bg-white/60 p-5 sm:p-6 rounded-xl border-2 border-gold/60 shadow-md text-left max-h-[360px] overflow-y-auto">
<p class="font-bold text-burgundy text-center text-lg mb-2">致我最珍视的你:</p>
<p>
达芬奇勾勒过翡冷翠最浪漫的色彩,但再伟大的艺术,也描摹不出你侧脸的万分之一温柔。
</p>
<p>
你是我疲惫日常里的解药,是我灵魂深处念念不忘的归宿。我想把你写入我未来的每一场诗篇里,共享往后余生的清晨与黄昏。
</p>
<div class="pt-2 text-right">
<p class="font-cursive text-2xl text-terracotta">Tuo per sempre,</p>
<p class="font-serifCN text-xs text-burgundy/80 font-semibold">[你的名字/Your Name]</p>
</div>
</div>
</section>
<!-- ========================================== -->
<!-- PAGE 5: FINAL PAGE - IL FUTURO INSIEME (丰富艺术终页) -->
<!-- ========================================== -->
<section id="page-5" class="slide-page flex flex-col items-center justify-start text-center max-w-2xl mx-auto px-4 py-2 w-full my-auto">
<div class="font-cursive text-3xl sm:text-4xl text-terracotta">Per Sempre Insieme</div>
<h2 class="font-cinzel text-lg sm:text-xl font-bold text-burgundy tracking-wider mb-3">与你携手 · 余生浪漫</h2>
<!-- Rich Romantic Memory Frame / Photo Container -->
<div class="w-full max-w-sm mx-auto mb-4 p-2 bg-white/80 rounded-xl gold-border glow-frame flex flex-col items-center relative group">
<div class="relative w-full h-40 sm:h-48 rounded-lg overflow-hidden border border-gold/40 bg-burgundy/10 flex items-center justify-center">
<!-- EASY EDITABLE PLACEHOLDER: PHOTO URL -->
<!-- 自定义照片图片链接修改位置 (可替换为你的相片直链) -->
<img id="couplePhoto"
src="https://images.unsplash.com/photo-1518199266791-5375a83190b7?auto=format&fit=crop&w=800&q=80"
alt="Memory"
class="w-full h-full object-cover transition duration-700 group-hover:scale-105"
onerror="this.src='https://placehold.co/600x400/5c1d24/d4af37?text=Mio+Amore';">
<div class="absolute inset-0 bg-gradient-to-t from-burgundy/60 via-transparent to-transparent"></div>
<span class="absolute bottom-2 left-3 font-cursive text-gold-light text-xl drop-shadow-md">Amor Vincit Omnia</span>
</div>
<!-- EASY EDITABLE PLACEHOLDER: CAPTION -->
<!-- 照片下方浪漫诗意短句 -->
<p class="text-xs font-serifCN text-burgundy/90 italic mt-2 px-2">
“你是降落在冷冽世间的特洛伊晚霞,也是我唯一的救赎。”
</p>
</div>
<!-- Artistic Confession Prose -->
<p class="font-serifCN text-xs sm:text-sm text-slate-800 leading-relaxed mb-4 max-w-lg bg-white/40 p-3 rounded-lg border border-gold/30">
托斯卡纳的风会吹过四季,而我对你的心动永远停留在当夏。你愿意与我一起开启这段未完待续的诗篇吗?
</p>
<!-- Interactive Proposal Action Buttons -->
<div id="proposalButtons" class="flex flex-col sm:flex-row gap-3 w-full max-w-md justify-center items-center mb-2">
<button onclick="acceptLove()" class="w-full sm:w-auto px-6 py-2.5 bg-burgundy text-gold font-serifCN font-bold text-sm sm:text-base rounded-full border-2 border-gold shadow-lg hover:bg-terracotta transition transform hover:scale-105 active:scale-95 flex items-center justify-center gap-2">
<i class="fas fa-heart text-gold"></i> Sì, Con Tutto Il Mio Cuore (我愿意)
</button>
<button onclick="acceptLove()" class="w-full sm:w-auto px-6 py-2.5 bg-gold text-burgundy font-serifCN font-bold text-sm sm:text-base rounded-full border-2 border-burgundy shadow-lg hover:bg-gold-light transition transform hover:scale-105 active:scale-95 flex items-center justify-center gap-2">
<i class="fas fa-crown text-burgundy"></i> Per Sempre (余生皆是你)
</button>
</div>
<!-- Rich Success Celebration Card (Shown after clicking accept) -->
<div id="successMessage" class="hidden w-full max-w-md p-5 bg-white/90 rounded-2xl border-2 border-gold shadow-2xl animate-fade-in my-2">
<div class="text-terracotta font-cursive text-3xl sm:text-4xl mb-1">Ti Amo Per Sempre!</div>
<p class="font-serifCN text-sm sm:text-base text-burgundy font-bold mb-2">
故事在此刻开始,爱在永恒中延伸 ❦
</p>
<p class="text-xs font-cinzel text-gold-dark tracking-widest uppercase">
Florence · Venice · Tuscany · Our Universe
</p>
</div>
</section>
</div>
<!-- Navigation Footer -->
<footer class="pb-5 pt-2 px-6 flex items-center justify-between z-20 flex-shrink-0 border-t border-gold/20">
<!-- Prev Button -->
<button id="prevBtn" onclick="changePage(-1)" class="px-3 py-1.5 bg-burgundy/10 hover:bg-burgundy/20 text-burgundy font-cinzel text-xs font-bold rounded-lg border border-gold/40 transition flex items-center gap-1 disabled:opacity-30 disabled:cursor-not-allowed">
<i class="fas fa-chevron-left"></i> Indietro
</button>
<!-- Slide Dots Indicator -->
<div class="flex gap-2" id="dotContainer">
<button onclick="goToPage(1)" class="dot w-2.5 h-2.5 rounded-full bg-gold/40 transition-all duration-300"></button>
<button onclick="goToPage(2)" class="dot w-2.5 h-2.5 rounded-full bg-gold/40 transition-all duration-300"></button>
<button onclick="goToPage(3)" class="dot w-2.5 h-2.5 rounded-full bg-gold/40 transition-all duration-300"></button>
<button onclick="goToPage(4)" class="dot w-2.5 h-2.5 rounded-full bg-gold/40 transition-all duration-300"></button>
<button onclick="goToPage(5)" class="dot w-2.5 h-2.5 rounded-full bg-gold/40 transition-all duration-300"></button>
</div>
<!-- Next Button -->
<button id="nextBtn" onclick="changePage(1)" class="px-3 py-1.5 bg-burgundy/10 hover:bg-burgundy/20 text-burgundy font-cinzel text-xs font-bold rounded-lg border border-gold/40 transition flex items-center gap-1">
Avanti <i class="fas fa-chevron-right"></i>
</button>
</footer>
</main>
<!-- JavaScript Interactivity -->
<script>
let currentPage = 1;
const totalPages = 5;
// Update Page display & indicators
function updatePageDisplay() {
document.querySelectorAll('.slide-page').forEach((page, index) => {
if (index + 1 === currentPage) {
page.classList.add('active');
} else {
page.classList.remove('active');
}
});
// Update dots
document.querySelectorAll('.dot').forEach((dot, index) => {
if (index + 1 === currentPage) {
dot.classList.add('bg-burgundy', 'w-6');
dot.classList.remove('bg-gold/40');
} else {
dot.classList.remove('bg-burgundy', 'w-6');
dot.classList.add('bg-gold/40');
}
});
// Update Navigation Buttons
document.getElementById('prevBtn').disabled = (currentPage === 1);
if (currentPage === totalPages) {
document.getElementById('nextBtn').classList.add('opacity-0', 'pointer-events-none');
} else {
document.getElementById('nextBtn').classList.remove('opacity-0', 'pointer-events-none');
}
}
function changePage(direction) {
currentPage = Math.max(1, Math.min(totalPages, currentPage + direction));
updatePageDisplay();
}
function goToPage(pageNumber) {
currentPage = pageNumber;
updatePageDisplay();
}
// Proposal Acceptance Celebration Animation
function acceptLove() {
document.getElementById('proposalButtons').classList.add('hidden');
document.getElementById('successMessage').classList.remove('hidden');
createFireworks();
}
// NetEase Cloud Music Audio Player Logic
const bgMusic = document.getElementById('bgMusic');
const musicToggle = document.getElementById('musicToggle');
const discIcon = document.getElementById('discIcon');
const musicText = document.getElementById('musicText');
let isPlaying = false;
function toggleMusic() {
if (isPlaying) {
bgMusic.pause();
discIcon.classList.remove('animate-spin');
musicText.innerText = "Musica d'Amore";
isPlaying = false;
} else {
bgMusic.play().then(() => {
discIcon.classList.add('animate-spin');
musicText.innerText = "Suonando...";
isPlaying = true;
}).catch(err => {
console.log("Auto-play prevented by browser policy:", err);
});
}
}
musicToggle.addEventListener('click', toggleMusic);
// Envelope opening action
function openEnvelope() {
if (!isPlaying) {
toggleMusic();
}
const seal = document.getElementById('waxSeal');
const envelope = document.getElementById('envelopeCard');
seal.style.transform = 'scale(1.5) rotate(20deg)';
seal.style.opacity = '0';
setTimeout(() => {
envelope.style.transform = 'scale(1.05) translateY(-10px)';
setTimeout(() => {
goToPage(2);
}, 400);
}, 300);
}
// Floating Olive Leaf, Rose Petal & Shimmer Particles Canvas Simulation
const canvas = document.getElementById('particles-canvas');
const ctx = canvas.getContext('2d');
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
const particles = [];
const colors = ['#c05a46', '#d4af37', '#556b2f', '#e6b0aa', '#f9e79f'];
class Particle {
constructor() {
this.reset();
}
reset() {
this.x = Math.random() * canvas.width;
this.y = -20;
this.size = Math.random() * 7 + 3;
this.speedY = Math.random() * 1.5 + 0.5;
this.speedX = Math.sin(this.y) * 0.5;
this.color = colors[Math.floor(Math.random() * colors.length)];
this.rotation = Math.random() * 360;
this.rotationSpeed = (Math.random() - 0.5) * 2;
}
update() {
this.y += this.speedY;
this.x += Math.sin(this.y * 0.02);
this.rotation += this.rotationSpeed;
if (this.y > canvas.height + 20) {
this.reset();
}
}
draw() {
ctx.save();
ctx.translate(this.x, this.y);
ctx.rotate((this.rotation * Math.PI) / 180);
ctx.fillStyle = this.color;
ctx.beginPath();
ctx.ellipse(0, 0, this.size, this.size / 2, 0, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
}
}
for (let i = 0; i < 40; i++) {
particles.push(new Particle());
}
function createFireworks() {
for (let i = 0; i < 90; i++) {
const p = new Particle();
p.y = canvas.height / 2;
p.x = canvas.width / 2;
p.speedY = (Math.random() - 0.5) * 10;
p.speedX = (Math.random() - 0.5) * 10;
p.size = Math.random() * 10 + 4;
particles.push(p);
}
}
function animateParticles() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
particles.forEach((p) => {
p.update();
p.draw();
});
requestAnimationFrame(animateParticles);
}
window.onload = function() {
updatePageDisplay();
animateParticles();
};
</script>
</body>
</html>