flxloraexp / index.html
fantos's picture
Update index.html
2e134fc verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Paul Cézanne Studio - Relocated</title>
<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=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
<style>
:root {
--color-primary: #0F4C81;
--color-secondary: #FF9E6C;
--color-background: #f6f9fc;
--color-text: #2D3748;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, var(--color-background), #edf2f7);
color: var(--color-text);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem;
text-align: center;
}
.container {
max-width: 800px;
background-color: rgba(255, 255, 255, 0.9);
border-radius: 16px;
padding: 3rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border-left: 8px solid var(--color-primary);
position: relative;
overflow: hidden;
}
.container::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 150px;
height: 150px;
background: linear-gradient(135deg, var(--color-secondary) 0%, transparent 70%);
opacity: 0.2;
border-radius: 0 0 0 100%;
}
h1 {
font-family: 'Playfair Display', serif;
font-size: 2.5rem;
color: var(--color-primary);
margin-bottom: 1.5rem;
position: relative;
}
p {
margin-bottom: 1.5rem;
line-height: 1.7;
font-size: 1.1rem;
}
.redirect-btn {
display: inline-block;
background-color: var(--color-primary);
color: white;
font-weight: 600;
padding: 1rem 2rem;
border-radius: 50px;
text-decoration: none;
margin-top: 1.5rem;
transition: all 0.3s ease;
box-shadow: 0 4px 10px rgba(15, 76, 129, 0.3);
font-size: 1.1rem;
}
.redirect-btn:hover {
background-color: #0d3d69;
transform: translateY(-3px);
box-shadow: 0 7px 14px rgba(15, 76, 129, 0.4);
}
.redirect-btn:active {
transform: translateY(-1px);
}
.palette {
display: flex;
margin: 2rem 0;
justify-content: center;
}
.color-swatch {
width: 30px;
height: 30px;
border-radius: 50%;
margin: 0 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.countdown {
font-size: 1rem;
color: #718096;
margin-top: 1.5rem;
}
.countdown span {
font-weight: 700;
color: var(--color-primary);
}
.artwork {
margin-top: 2rem;
position: relative;
display: flex;
justify-content: center;
}
.frame {
width: 250px;
height: 180px;
background: #FFF8E1;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
padding: 10px;
transform: rotate(-3deg);
position: relative;
}
.frame::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 1px solid #D4A76A;
z-index: 1;
}
@media (max-width: 768px) {
.container {
padding: 2rem;
}
h1 {
font-size: 2rem;
}
.redirect-btn {
padding: 0.8rem 1.5rem;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Paul Cézanne Studio Has Moved</h1>
<p>We are pleased to announce that our Paul Cézanne AI Art Studio has relocated to a new space with improved features and capabilities.</p>
<div class="palette">
<div class="color-swatch" style="background-color: #0F4C81;"></div>
<div class="color-swatch" style="background-color: #FF9E6C;"></div>
<div class="color-swatch" style="background-color: #5B8C5A;"></div>
<div class="color-swatch" style="background-color: #F2C94C;"></div>
<div class="color-swatch" style="background-color: #9B5DE5;"></div>
</div>
<p>Visit our new platform to continue creating beautiful artwork in the distinctive style of Paul Cézanne, featuring 1880s fashions and scenes with improved generation capabilities.</p>
<div class="artwork">
<div class="frame"></div>
</div>
<a href="https://fantos-flux-lora-cezanne.hf.space" class="redirect-btn">Visit the New Studio</a>
<div class="countdown">
You will be automatically redirected in <span id="timer">10</span> seconds
</div>
</div>
<script>
// Automatic redirect countdown
let seconds = 10;
const timerElement = document.getElementById('timer');
const countdown = setInterval(() => {
seconds--;
timerElement.textContent = seconds;
if (seconds <= 0) {
clearInterval(countdown);
window.location.href = 'https://fantos-flux-lora-cezanne.hf.space';
}
}, 1000);
// Simulated painting in the frame
const frameEl = document.querySelector('.frame');
frameEl.innerHTML = `
<svg width="100%" height="100%" viewBox="0 0 230 160" xmlns="http://www.w3.org/2000/svg">
<!-- Sky -->
<rect x="0" y="0" width="230" height="80" fill="#BFD7ED" />
<!-- Mountains -->
<path d="M0,80 L60,40 L100,65 L150,30 L200,50 L230,35 L230,80 Z" fill="#5E8B7E" />
<!-- Field -->
<rect x="0" y="80" width="230" height="80" fill="#D8B174" />
<!-- Trees -->
<circle cx="50" cy="75" r="15" fill="#2D6A4F" />
<circle cx="180" cy="65" r="20" fill="#2D6A4F" />
<!-- House -->
<rect x="130" y="90" width="40" height="30" fill="#E76F51" />
<polygon points="130,90 170,90 150,70" fill="#774936" />
<!-- Path -->
<path d="M80,160 C100,140 120,130 150,120" stroke="#C19A6B" stroke-width="8" fill="none" />
<!-- Person -->
<circle cx="100" cy="130" r="8" fill="#355070" />
<rect x="98" y="138" width="4" height="15" fill="#355070" />
</svg>
`;
</script>
</body>
</html>