Cloud computing has revolutionized the way businesses operate, offering scalable and flexible solutions for various needs. From data storage to software development, the cloud provides a myriad of services that enhance efficiency and innovation.
In this article, we will explore 10 cloud examples that demonstrate the diverse applications and benefits of cloud technology. These examples highlight how different industries leverage the cloud to drive growth and streamline operations.
CODE1
Here's the code:
CODETEXT1
CODE2
Here's the code:
CODETEXT2
CODE3
Here's the code:
CODETEXT3
CODE4
Here's the code:
CODETEXT4
CODE5
Here's the code:
CODETEXT5
Designers and developers, elevate your cloud projects with Subframe's drag-and-drop interface. Its intuitive, responsive canvas ensures pixel-perfect UI every time, making it a favorite among professionals.
Join the community of satisfied users and start for free today!
CODE6
Here's the code:
CODETEXT6
CODE7
Here's the code:
CODETEXT7
CODE8
Here's the code:
CODETEXT8
CODE9
Here's the code:
CODETEXT9
CODE10
Here's the code:
CODETEXT10
Ready to elevate your UI designs? With Subframe, you can create pixel-perfect interfaces, including cloud designs, in minutes. Our drag-and-drop editor and beautifully crafted components make the process efficient and enjoyable.
Don't wait to bring your ideas to life. Start for free and begin designing stunning UIs right away!
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Cloudy Weather Dashboard</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body { width: 100%; height: 100vh; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); overflow: hidden; display: flex; justify-content: center; align-items: center; } .container { width: 100%; max-width: 700px; height: 100%; max-height: 700px; padding: 25px; position: relative; display: flex; flex-direction: column; overflow: hidden; } .sky-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: linear-gradient(to bottom, #bae8e8 0%, #e3f6f5 100%); overflow: hidden; } .cloud { position: absolute; border-radius: 50%; background-color: rgba(255, 255, 255, 0.8); filter: blur(15px); animation: drift linear infinite; } @keyframes drift { 0% { transform: translateX(-100%); } 100% { transform: translateX(calc(100vw + 100%)); } } .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; z-index: 1; } .title { font-size: 1.8rem; font-weight: 600; color: #272343; } .search-container { position: relative; width: 50%; } .search-input { width: 100%; padding: 12px 40px 12px 15px; border: none; border-radius: 25px; background-color: rgba(255, 255, 255, 0.7); backdrop-filter: blur(5px); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); font-size: 0.9rem; transition: all 0.3s ease; } .search-input:focus { outline: none; background-color: rgba(255, 255, 255, 0.9); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); } .search-icon { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: #5f6c7b; cursor: pointer; } .main-weather { background-color: rgba(255, 255, 255, 0.25); backdrop-filter: blur(10px); border-radius: 25px; padding: 30px; margin-bottom: 20px; box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); transition: transform 0.3s ease, box-shadow 0.3s ease; z-index: 1; } .main-weather:hover { transform: translateY(-5px); box-shadow: 0 10px 40px rgba(31, 38, 135, 0.15); } .location { display: flex; align-items: center; margin-bottom: 15px; } .location-icon { margin-right: 8px; color: #272343; } .location-name { font-size: 1.5rem; font-weight: 600; color: #272343; } .weather-details { display: flex; justify-content: space-between; align-items: center; } .temperature { font-size: 3.5rem; font-weight: 700; color: #272343; margin-right: 20px; } .weather-info { text-align: right; } .weather-condition { font-size: 1.5rem; font-weight: 600; color: #272343; margin-bottom: 5px; } .weather-description { font-size: 0.9rem; color: #5f6c7b; } .forecast-container { display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px; z-index: 1; } .forecast-card { background-color: rgba(255, 255, 255, 0.3); backdrop-filter: blur(5px); border-radius: 20px; padding: 15px; text-align: center; box-shadow: 0 4px 12px rgba(31, 38, 135, 0.05); border: 1px solid rgba(255, 255, 255, 0.18); transition: transform 0.3s ease, background-color 0.3s ease; } .forecast-card:hover { transform: translateY(-5px); background-color: rgba(255, 255, 255, 0.5); } .forecast-day { font-size: 0.9rem; font-weight: 600; color: #272343; margin-bottom: 10px; } .forecast-icon { font-size: 1.8rem; margin-bottom: 10px; color: #272343; } .forecast-temp { font-size: 1.2rem; font-weight: 600; color: #272343; } .weather-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 20px; z-index: 1; } .stat-card { background-color: rgba(255, 255, 255, 0.2); backdrop-filter: blur(5px); border-radius: 20px; padding: 15px; text-align: center; display: flex; flex-direction: column; align-items: center; box-shadow: 0 4px 12px rgba(31, 38, 135, 0.05); border: 1px solid rgba(255, 255, 255, 0.18); transition: transform 0.3s ease; cursor: pointer; } .stat-card:hover { transform: translateY(-5px); background-color: rgba(255, 255, 255, 0.4); } .stat-icon { font-size: 1.5rem; color: #272343; margin-bottom: 8px; } .stat-value { font-size: 1.2rem; font-weight: 600; color: #272343; margin-bottom: 5px; } .stat-label { font-size: 0.8rem; color: #5f6c7b; } @media (max-width: 700px) { .container { padding: 15px; } .title { font-size: 1.5rem; } .forecast-container { grid-template-columns: repeat(auto-fit, minmax(65px, 1fr)); gap: 10px; } .weather-stats { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); } .temperature { font-size: 2.8rem; } .weather-condition { font-size: 1.2rem; } .location-name { font-size: 1.3rem; } } /* Special animation for time indicator */ .time-indicator { position: relative; overflow: hidden; height: 6px; width: 100%; background-color: rgba(255, 255, 255, 0.2); border-radius: 3px; margin-top: 20px; z-index: 1; } .time-bar { position: absolute; height: 100%; width: 30%; background: linear-gradient(90deg, #ffd8cb, #f8a4c2); border-radius: 3px; animation: timeflow 24s linear infinite; } @keyframes timeflow { 0% { left: -30%; } 100% { left: 100%; } } /* Tooltip for forecast cards */ .forecast-card { position: relative; } .forecast-card::after { content: attr(data-tooltip); position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%) scale(0); padding: 5px 10px; background-color: rgba(45, 52, 71, 0.85); color: white; border-radius: 5px; font-size: 0.75rem; transition: all 0.2s ease; opacity: 0; pointer-events: none; white-space: nowrap; z-index: 10; } .forecast-card:hover::after { transform: translateX(-50%) scale(1); opacity: 1; bottom: -30px; } /* Animated weather icon */ .weather-icon-animated { position: relative; width: 60px; height: 60px; margin-right: 15px; } .sun-moon { position: absolute; top: 15px; left: 15px; width: 30px; height: 30px; border-radius: 50%; background: #ffd166; box-shadow: 0 0 15px #ffd166; animation: pulse 3s infinite ease-in-out; } @keyframes pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 15px #ffd166; } 50% { transform: scale(1.1); box-shadow: 0 0 25px #ffd166; } } .mini-cloud { position: absolute; background-color: white; border-radius: 50%; opacity: 0.9; } .mini-cloud-1 { width: 20px; height: 20px; top: 25px; left: 20px; animation: float 4s infinite ease-in-out; } .mini-cloud-2 { width: 25px; height: 25px; top: 20px; left: 30px; animation: float 4s infinite ease-in-out 0.5s; } .mini-cloud-3 { width: 15px; height: 15px; top: 30px; left: 10px; animation: float 4s infinite ease-in-out 1s; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } /* Mode toggle switch */ .mode-toggle { position: relative; width: 60px; height: 30px; background-color: rgba(255, 255, 255, 0.3); border-radius: 15px; cursor: pointer; transition: background-color 0.3s ease; } .toggle-thumb { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; background-color: white; border-radius: 50%; transition: transform 0.3s ease; display: flex; justify-content: center; align-items: center; color: #ffd166; font-size: 12px; } .mode-toggle.dark .toggle-thumb { transform: translateX(30px); color: #272343; } .mode-toggle.dark { background-color: rgba(59, 59, 79, 0.3); } </style> </head> <body> <div class="container"> <div class="sky-background" id="sky"></div> <div class="header"> <h1 class="title">Cloudcast</h1> <div class="search-container"> <input type="text" class="search-input" placeholder="Search location..."> <span class="search-icon">🔍</span> </div> <div class="mode-toggle" id="modeToggle"> <div class="toggle-thumb">☀️</div> </div> </div> <div class="main-weather"> <div class="location"> <span class="location-icon">📍</span> <h2 class="location-name">San Francisco, CA</h2> </div> <div class="weather-details"> <div class="weather-icon-animated"> <div class="sun-moon"></div> <div class="mini-cloud mini-cloud-1"></div> <div class="mini-cloud mini-cloud-2"></div> <div class="mini-cloud mini-cloud-3"></div> </div> <div class="temperature">72°</div> <div class="weather-info"> <div class="weather-condition">Partly Cloudy</div> <div class="weather-description">Light breeze with scattered clouds</div> </div> </div> </div> <div class="forecast-container"> <div class="forecast-card" data-tooltip="Sunny with clear skies"> <div class="forecast-day">Mon</div> <div class="forecast-icon">☀️</div> <div class="forecast-temp">75°</div> </div> <div class="forecast-card" data-tooltip="Cloudy with light wind"> <div class="forecast-day">Tue</div> <div class="forecast-icon">🌤️</div> <div class="forecast-temp">72°</div> </div> <div class="forecast-card" data-tooltip="Chance of light rain"> <div class="forecast-day">Wed</div> <div class="forecast-icon">🌦️</div> <div class="forecast-temp">68°</div> </div> <div class="forecast-card" data-tooltip="Scattered thunderstorms"> <div class="forecast-day">Thu</div> <div class="forecast-icon">⛈️</div> <div class="forecast-temp">65°</div> </div> <div class="forecast-card" data-tooltip="Partly cloudy"> <div class="forecast-day">Fri</div> <div class="forecast-icon">🌥️</div> <div class="forecast-temp">70°</div> </div> </div> <div class="weather-stats"> <div class="stat-card"> <div class="stat-icon">💨</div> <div class="stat-value">8 mph</div> <div class="stat-label">Wind Speed</div> </div> <div class="stat-card"> <div class="stat-icon">💧</div> <div class="stat-value">65%</div> <div class="stat-label">Humidity</div> </div> <div class="stat-card"> <div class="stat-icon">🌡️</div> <div class="stat-value">15%</div> <div class="stat-label">Precipitation</div> </div> </div> <div class="time-indicator"> <div class="time-bar"></div> </div> </div> <script> document.addEventListener('DOMContentLoaded', () => { // Generate animated clouds createClouds(); // Toggle mode const modeToggle = document.getElementById('modeToggle'); modeToggle.addEventListener('click', toggleMode); // Search functionality const searchInput = document.querySelector('.search-input'); const searchIcon = document.querySelector('.search-icon'); searchIcon.addEventListener('click', () => { handleSearch(searchInput.value); }); searchInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') { handleSearch(searchInput.value); } }); // Make forecast cards interactive const forecastCards = document.querySelectorAll('.forecast-card'); forecastCards.forEach(card => { card.addEventListener('click', () => { updateMainWeather(card); }); }); // Add window resize event to adjust clouds window.addEventListener('resize', debounce(() => { resetClouds(); createClouds(); }, 250)); }); function createClouds() { const sky = document.getElementById('sky'); const cloudCount = Math.floor(window.innerWidth / 100); for (let i = 0; i < cloudCount; i++) { const cloud = document.createElement('div'); cloud.classList.add('cloud'); // Random cloud properties const size = Math.random() * 100 + 50; const opacity = Math.random() * 0.4 + 0.3; const top = Math.random() * 100; const duration = Math.random() * 60 + 60; const delay = Math.random() * 60; cloud.style.width = `${size}px`; cloud.style.height = `${size * 0.6}px`; cloud.style.opacity = opacity; cloud.style.top = `${top}%`; cloud.style.animationDuration = `${duration}s`; cloud.style.animationDelay = `${delay}s`; sky.appendChild(cloud); } } function resetClouds() { const sky = document.getElementById('sky'); while (sky.firstChild) { sky.removeChild(sky.firstChild); } } function toggleMode() { const toggle = document.getElementById('modeToggle'); toggle.classList.toggle('dark'); const thumb = toggle.querySelector('.toggle-thumb'); if (toggle.classList.contains('dark')) { thumb.innerHTML = '🌙'; document.querySelector('.sky-background').style.background = 'linear-gradient(to bottom, #2c3e50 0%, #4c5c68 100%)'; document.body.style.background = 'linear-gradient(135deg, #2c3e50 0%, #4c5c68 100%)'; // Change text colors for dark mode document.querySelectorAll('.title, .location-name, .temperature, .weather-condition, .forecast-day, .forecast-temp, .stat-value') .forEach(el => el.style.color = '#e3f6f5'); document.querySelectorAll('.weather-description, .stat-label') .forEach(el => el.style.color = '#bae8e8'); } else { thumb.innerHTML = '☀️'; document.querySelector('.sky-background').style.background = 'linear-gradient(to bottom, #bae8e8 0%, #e3f6f5 100%)'; document.body.style.background = 'linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)'; // Reset text colors document.querySelectorAll('.title, .location-name, .temperature, .weather-condition, .forecast-day, .forecast-temp, .stat-value') .forEach(el => el.style.color = '#272343'); document.querySelectorAll('.weather-description, .stat-label') .forEach(el => el.style.color = '#5f6c7b'); } } function handleSearch(value) { if (!value.trim()) return; // Simulated weather data change on search const cityName = value.trim(); document.querySelector('.location-name').textContent = capitalizeWords(cityName); // Randomize weather info for demo purposes const temperatures = [65, 68, 70, 72, 75, 78, 80, 82]; const randomTemp = temperatures[Math.floor(Math.random() * temperatures.length)]; document.querySelector('.temperature').textContent = `${randomTemp}°`; const conditions = [ {condition: 'Sunny', description: 'Clear skies with gentle breeze', icon: '☀️'}, {condition: 'Partly Cloudy', description: 'Scattered clouds with sunshine', icon: '🌤️'}, {condition: 'Cloudy', description: 'Overcast skies expected', icon: '☁️'}, {condition: 'Light Rain', description: 'Bring an umbrella just in case', icon: '🌦️'}, {condition: 'Thunderstorms', description: 'Occasional lightning and heavy rain', icon: '⛈️'} ]; const randomCondition = conditions[Math.floor(Math.random() * conditions.length)]; document.querySelector('.weather-condition').textContent = randomCondition.condition; document.querySelector('.weather-description').textContent = randomCondition.description; // Clear search input document.querySelector('.search-input').value = ''; // Add subtle animation to acknowledge the search const mainWeather = document.querySelector('.main-weather'); mainWeather.style.transform = 'scale(1.02)'; setTimeout(() => { mainWeather.style.transform = ''; }, 300); } function updateMainWeather(card) { const day = card.querySelector('.forecast-day').textContent; const temp = card.querySelector('.forecast-temp').textContent; const icon = card.querySelector('.forecast-icon').textContent; const tooltip = card.getAttribute('data-tooltip'); document.querySelector('.temperature').textContent = temp; document.querySelector('.weather-condition').textContent = `${day}: ${tooltip.split(' ')[0]}`; document.querySelector('.weather-description').textContent = tooltip; // Highlight selected card document.querySelectorAll('.forecast-card').forEach(c => { c.style.transform = ''; c.style.backgroundColor = 'rgba(255, 255, 255, 0.3)'; }); card.style.transform = 'translateY(-8px)'; card.style.backgroundColor = 'rgba(255, 255, 255, 0.6)'; } function capitalizeWords(text) { return text.split(' ') .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()) .join(' '); } // Utility function for debouncing function debounce(func, wait) { let timeout; return function executedFunction(...args) { const later = () => { clearTimeout(timeout); func(...args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; } </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Cloud Loading Animation</title> <style> :root { --sky-color: #e6f0fa; --cloud-color: rgba(255, 255, 255, 0.9); --cloud-shadow: rgba(186, 209, 240, 0.5); --text-color: #3a5978; } * { margin: 0; padding: 0; box-sizing: border-box; } body { width: 100%; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; background: var(--sky-color); font-family: 'Helvetica Neue', Arial, sans-serif; overflow: hidden; color: var(--text-color); } .container { width: 700px; height: 700px; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; } .sky { position: absolute; width: 100%; height: 100%; overflow: hidden; } .cloud { position: absolute; background: var(--cloud-color); border-radius: 50%; box-shadow: 0 8px 16px var(--cloud-shadow); filter: blur(3px); opacity: 0; transform: translateX(-100%); } .cloud::before, .cloud::after { content: ''; position: absolute; background: var(--cloud-color); border-radius: 50%; } .cloud-1 { width: 180px; height: 60px; top: 30%; animation: float-cloud 12s ease-in-out infinite; } .cloud-1::before { width: 90px; height: 90px; top: -50px; left: 45px; } .cloud-1::after { width: 60px; height: 60px; top: -30px; left: 100px; } .cloud-2 { width: 120px; height: 40px; top: 50%; animation: float-cloud 15s ease-in-out 2s infinite; } .cloud-2::before { width: 60px; height: 60px; top: -30px; left: 25px; } .cloud-2::after { width: 40px; height: 40px; top: -20px; left: 60px; } .cloud-3 { width: 150px; height: 50px; top: 20%; animation: float-cloud 18s ease-in-out 1s infinite; } .cloud-3::before { width: 70px; height: 70px; top: -40px; left: 35px; } .cloud-3::after { width: 50px; height: 50px; top: -25px; left: 80px; } .cloud-4 { width: 200px; height: 70px; top: 65%; animation: float-cloud 20s ease-in-out 3s infinite; } .cloud-4::before { width: 100px; height: 100px; top: -55px; left: 50px; } .cloud-4::after { width: 70px; height: 70px; top: -35px; left: 110px; } .cloud-5 { width: 160px; height: 55px; top: 40%; animation: float-cloud 17s ease-in-out 4s infinite; } .cloud-5::before { width: 80px; height: 80px; top: -45px; left: 40px; } .cloud-5::after { width: 55px; height: 55px; top: -30px; left: 90px; } @keyframes float-cloud { 0% { opacity: 0; transform: translateX(-100%); } 10%, 90% { opacity: 0.8; } 100% { opacity: 0; transform: translateX(700px); } } .content { position: relative; z-index: 2; text-align: center; padding: 20px; background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(10px); border-radius: 20px; max-width: 400px; box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); transform: translateY(0); transition: transform 0.5s ease-in-out; } .content:hover { transform: translateY(-10px); } h1 { font-size: 28px; margin-bottom: 15px; font-weight: 300; letter-spacing: 1px; } p { font-size: 16px; line-height: 1.6; margin-bottom: 25px; color: var(--text-color); opacity: 0.9; } .loading-bar { width: 100%; height: 4px; background: rgba(255, 255, 255, 0.5); border-radius: 2px; overflow: hidden; margin: 25px 0; position: relative; } .loading-progress { height: 100%; background: linear-gradient(90deg, #a2c6f0, #c4e0ff); width: 0%; transition: width 0.5s ease-out; position: relative; border-radius: 2px; } .loading-progress::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent); animation: shimmer 1.5s infinite; } @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .percentage { font-size: 36px; font-weight: 200; margin: 15px 0; transition: opacity 0.3s ease; } .message { font-size: 14px; color: var(--text-color); opacity: 0.7; font-style: italic; min-height: 20px; } .load-button { background: rgba(255, 255, 255, 0.6); border: none; padding: 12px 30px; border-radius: 25px; color: var(--text-color); font-size: 16px; cursor: pointer; transition: all 0.3s ease; margin-top: 20px; font-weight: 500; box-shadow: 0 4px 12px rgba(58, 89, 120, 0.1); } .load-button:hover { background: rgba(255, 255, 255, 0.9); transform: translateY(-2px); box-shadow: 0 8px 16px rgba(58, 89, 120, 0.15); } .load-button:active { transform: translateY(1px); box-shadow: 0 2px 8px rgba(58, 89, 120, 0.1); } .load-button:disabled { opacity: 0.5; cursor: not-allowed; } .cloud-cursor { width: 40px; height: 20px; background: rgba(255, 255, 255, 0.8); border-radius: 20px; position: fixed; transform: translate(-50%, -50%); z-index: 10; pointer-events: none; opacity: 0; transition: transform 0.1s ease-out, opacity 0.3s ease; } .cloud-cursor::before, .cloud-cursor::after { content: ''; position: absolute; background: rgba(255, 255, 255, 0.8); border-radius: 50%; } .cloud-cursor::before { width: 20px; height: 20px; top: -10px; left: 10px; } .cloud-cursor::after { width: 15px; height: 15px; top: -8px; left: 25px; } @media (max-width: 700px) { .container { width: 100%; height: 600px; } .content { max-width: 85%; padding: 15px; } h1 { font-size: 24px; } .percentage { font-size: 30px; } .cloud-1, .cloud-3, .cloud-5 { transform: scale(0.8); } .cloud-2, .cloud-4 { transform: scale(0.7); } } </style> </head> <body> <div class="container"> <div class="sky"> <div class="cloud cloud-1"></div> <div class="cloud cloud-2"></div> <div class="cloud cloud-3"></div> <div class="cloud cloud-4"></div> <div class="cloud cloud-5"></div> </div> <div class="content"> <h1>Drifting into Your Experience</h1> <p>As we prepare your content, watch our cloud system float by. Each cloud represents data flowing through our network to your device.</p> <div class="loading-bar"> <div class="loading-progress"></div> </div> <div class="percentage">0%</div> <div class="message">Gathering cloud formations...</div> <button class="load-button" id="loadButton">Initiate Cloud Loading</button> </div> </div> <div class="cloud-cursor"></div> <script> document.addEventListener('DOMContentLoaded', () => { const loadButton = document.getElementById('loadButton'); const loadingProgress = document.querySelector('.loading-progress'); const percentage = document.querySelector('.percentage'); const message = document.querySelector('.message'); const cloudCursor = document.querySelector('.cloud-cursor'); const loadingMessages = [ "Gathering cloud formations...", "Condensing vapor packets...", "Floating through the network...", "Accumulating data particles...", "Shaping the atmosphere...", "Drifting to your destination...", "Preparing for precipitation...", "Almost ready to rain content..." ]; let loading = false; let progress = 0; let loadingInterval; function startLoading() { if (loading) return; loading = true; loadButton.disabled = true; loadButton.textContent = "Loading in Progress"; progress = 0; updateProgress(); loadingInterval = setInterval(() => { progress += Math.random() * 3; if (progress >= 100) { progress = 100; clearInterval(loadingInterval); completeLoading(); } updateProgress(); // Update message occasionally if (progress % 12 < 1) { const randomIndex = Math.floor(Math.random() * loadingMessages.length); message.textContent = loadingMessages[randomIndex]; } }, 150); } function updateProgress() { const currentProgress = Math.min(Math.floor(progress), 100); loadingProgress.style.width = `${currentProgress}%`; percentage.textContent = `${currentProgress}%`; // Create pulse effect on percentage update percentage.style.opacity = '1'; setTimeout(() => { percentage.style.opacity = '0.7'; }, 200); } function completeLoading() { message.textContent = "Your cloudy experience is ready!"; loadButton.disabled = false; loadButton.textContent = "Restart Cloud Journey"; loading = false; // Celebration animation - extra clouds for (let i = 0; i < 3; i++) { setTimeout(() => { const tempCloud = document.createElement('div'); tempCloud.classList.add('cloud'); tempCloud.style.width = `${100 + Math.random() * 80}px`; tempCloud.style.height = `${30 + Math.random() * 30}px`; tempCloud.style.top = `${20 + Math.random() * 60}%`; tempCloud.style.left = '-100px'; tempCloud.style.opacity = '0.9'; tempCloud.style.animation = `float-cloud ${10 + Math.random() * 5}s ease-in-out`; document.querySelector('.sky').appendChild(tempCloud); setTimeout(() => { tempCloud.remove(); }, 10000); }, i * 400); } } loadButton.addEventListener('click', startLoading); // Custom cloud cursor document.addEventListener('mousemove', (e) => { const x = e.clientX; const y = e.clientY; cloudCursor.style.opacity = '0.6'; cloudCursor.style.transform = `translate(${x}px, ${y}px)`; // Disappear after 2 seconds of inactivity clearTimeout(window.cursorTimeout); window.cursorTimeout = setTimeout(() => { cloudCursor.style.opacity = '0'; }, 2000); }); // Make clouds interactive document.querySelectorAll('.cloud').forEach(cloud => { cloud.addEventListener('mouseenter', () => { cloud.style.filter = 'blur(1px)'; cloud.style.transform = 'scale(1.1)'; setTimeout(() => { cloud.style.filter = 'blur(3px)'; cloud.style.transform = ''; }, 300); }); }); // Responsive design adjustments function handleResize() { const container = document.querySelector('.container'); if (window.innerWidth < 700) { container.style.height = `${window.innerHeight}px`; } else { container.style.height = '700px'; } } window.addEventListener('resize', handleResize); handleResize(); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>NeonCloud Interface</title> <style> :root { --primary-neon: #0ff7; --secondary-neon: #f0f7; --tertiary-neon: #7f0f7; --dark-bg: #050510; --darker-bg: #030308; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Rajdhani', 'Segoe UI', sans-serif; } body { background-color: var(--dark-bg); color: white; height: 700px; width: 700px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; padding: 20px; position: relative; } .container { z-index: 1; position: relative; height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; } .logo { font-size: 24px; font-weight: 700; color: var(--primary-neon); letter-spacing: 1px; position: relative; } .logo::after { content: ""; position: absolute; width: 5px; height: 5px; border-radius: 50%; background-color: var(--primary-neon); bottom: 5px; right: -10px; box-shadow: 0 0 10px var(--primary-neon); animation: pulse 2s infinite; } .nav-items { display: flex; gap: 20px; } .nav-item { cursor: pointer; position: relative; transition: color 0.3s; } .nav-item:hover { color: var(--primary-neon); } .nav-item::after { content: ""; position: absolute; width: 0; height: 1px; bottom: -5px; left: 0; background-color: var(--primary-neon); transition: width 0.3s, box-shadow 0.3s; } .nav-item:hover::after { width: 100%; box-shadow: 0 0 5px var(--primary-neon), 0 0 10px var(--primary-neon); } .content { display: flex; flex-direction: column; gap: 30px; position: relative; z-index: 2; flex-grow: 1; } .title { font-size: 42px; font-weight: 700; line-height: 1.2; margin-bottom: 10px; background: linear-gradient(90deg, #fff, var(--primary-neon)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 5px rgba(0, 255, 255, 0.3); } .subtitle { font-size: 18px; opacity: 0.8; max-width: 500px; line-height: 1.5; margin-bottom: 20px; } .interactive-section { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 20px; } .cloud-control { background-color: rgba(10, 10, 25, 0.7); border-radius: 8px; padding: 15px; border: 1px solid rgba(0, 255, 255, 0.1); flex: 1; min-width: 180px; max-width: 280px; display: flex; flex-direction: column; backdrop-filter: blur(5px); transition: transform 0.3s, box-shadow 0.3s; position: relative; overflow: hidden; } .cloud-control:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0, 255, 255, 0.1); border-color: rgba(0, 255, 255, 0.4); } .cloud-control::before { content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--primary-neon); box-shadow: 0 0 10px var(--primary-neon); opacity: 0.7; transition: opacity 0.3s; } .cloud-control:hover::before { opacity: 1; } .cloud-control h3 { font-size: 18px; margin-bottom: 10px; color: white; } .cloud-control p { font-size: 14px; opacity: 0.7; margin-bottom: 15px; line-height: 1.4; } .btn { background: rgba(0, 255, 255, 0.1); border: 1px solid rgba(0, 255, 255, 0.3); color: white; padding: 8px 15px; border-radius: 4px; cursor: pointer; transition: all 0.3s; font-size: 14px; text-align: center; position: relative; overflow: hidden; margin-top: auto; } .btn:hover { background: rgba(0, 255, 255, 0.2); border-color: var(--primary-neon); box-shadow: 0 0 10px rgba(0, 255, 255, 0.4); } .btn::after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: -100%; background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.2), transparent); transition: left 0.5s; } .btn:hover::after { left: 100%; } .cloud-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; } .footer { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: 20px; border-top: 1px solid rgba(0, 255, 255, 0.1); font-size: 14px; opacity: 0.7; } .footer-links { display: flex; gap: 15px; } .footer-link { cursor: pointer; transition: color 0.3s; } .footer-link:hover { color: var(--primary-neon); } .control-panel { display: flex; gap: 10px; margin-top: 20px; } .ctrl-btn { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(0, 255, 255, 0.2); color: white; width: 40px; height: 40px; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: all 0.3s; font-size: 16px; } .ctrl-btn:hover { background: rgba(0, 255, 255, 0.15); border-color: var(--primary-neon); box-shadow: 0 0 10px rgba(0, 255, 255, 0.3); } .metrics { display: flex; align-items: center; gap: 10px; margin-top: 10px; } .metric { display: flex; align-items: center; gap: 5px; font-size: 14px; opacity: 0.8; } .metric-value { font-weight: 600; color: var(--primary-neon); } .circular-progress { width: 60px; height: 60px; border-radius: 50%; display: flex; justify-content: center; align-items: center; position: relative; overflow: hidden; margin-left: auto; } .progress-background { position: absolute; width: 100%; height: 100%; border-radius: 50%; background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(0, 255, 255, 0.2); } .progress-fill { position: absolute; width: 100%; height: 100%; border-radius: 50%; background: conic-gradient(var(--primary-neon) 65%, transparent 0); mask: radial-gradient(transparent 55%, white 56%); -webkit-mask: radial-gradient(transparent 55%, white 56%); } .progress-value { font-size: 16px; font-weight: 600; color: white; } .slider-container { margin-top: 15px; } .slider-label { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 5px; } .custom-slider { -webkit-appearance: none; width: 100%; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); outline: none; } .custom-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border-radius: 50%; background: var(--primary-neon); cursor: pointer; box-shadow: 0 0 10px var(--primary-neon); } .custom-slider::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: var(--primary-neon); cursor: pointer; box-shadow: 0 0 10px var(--primary-neon); } .toggle-container { display: flex; align-items: center; justify-content: space-between; margin-top: 15px; } .toggle-label { font-size: 14px; } .toggle-switch { position: relative; display: inline-block; width: 40px; height: 20px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.1); transition: .4s; border-radius: 34px; } .toggle-slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 2px; bottom: 2px; background-color: white; transition: .4s; border-radius: 50%; } input:checked + .toggle-slider { background-color: var(--primary-neon); } input:checked + .toggle-slider:before { transform: translateX(20px); } @keyframes pulse { 0% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.5); } 100% { opacity: 0.5; transform: scale(1); } } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .responsive-warning { display: none; text-align: center; color: var(--primary-neon); padding: 20px; background: rgba(0, 0, 0, 0.7); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 10px; z-index: 100; width: 80%; } @media (max-width: 600px) { .title { font-size: 32px; } .subtitle { font-size: 16px; } .interactive-section { flex-direction: column; } .cloud-control { max-width: 100%; } .nav-items { display: none; } .logo::after { display: none; } } </style> </head> <body> <canvas id="cloudCanvas" class="cloud-canvas"></canvas> <div class="container"> <header class="header"> <div class="logo">NEON_CLOUD</div> <div class="nav-items"> <div class="nav-item">Dashboard</div> <div class="nav-item">Clusters</div> <div class="nav-item">Data Flows</div> <div class="nav-item">Settings</div> </div> </header> <div class="content"> <div> <h1 class="title">Cybernetic Cloud Interface</h1> <p class="subtitle">Manage your distributed AI systems with gesture-responsive cloud environments. Visualize complex data structures through interactive neon topographies.</p> </div> <div class="interactive-section"> <div class="cloud-control"> <h3>Cloud Density</h3> <p>Control the neural pathways density in your virtual ecosystem. Higher values increase computational throughput.</p> <div class="slider-container"> <div class="slider-label"> <span>Low</span> <span>High</span> </div> <input type="range" min="10" max="50" value="25" class="custom-slider" id="densitySlider"> </div> <div class="toggle-container"> <span class="toggle-label">Auto-optimization</span> <label class="toggle-switch"> <input type="checkbox" checked> <span class="toggle-slider"></span> </label> </div> <div class="btn cloud-optimize-btn">Optimize</div> </div> <div class="cloud-control"> <h3>Energy Distribution</h3> <p>Allocate power across your ambient AI network. Balanced distribution ensures stable quantum computing.</p> <div class="circular-progress"> <div class="progress-background"></div> <div class="progress-fill"></div> <div class="progress-value">65%</div> </div> <div class="metrics"> <div class="metric"> <span>Load:</span> <span class="metric-value">3.8 TB/s</span> </div> </div> <div class="btn">Redistribute</div> </div> <div class="cloud-control"> <h3>Pulse Frequency</h3> <p>Adjust data synchronization pulses between clustered instances. Higher frequencies increase system reactivity.</p> <div class="slider-container"> <div class="slider-label"> <span>1.2 GHz</span> <span>8.7 GHz</span> </div> <input type="range" min="0" max="100" value="60" class="custom-slider" id="frequencySlider"> </div> <div class="toggle-container"> <span class="toggle-label">Adaptive Pulse</span> <label class="toggle-switch"> <input type="checkbox"> <span class="toggle-slider"></span> </label> </div> <div class="btn">Apply Changes</div> </div> </div> <div class="control-panel"> <div class="ctrl-btn" id="pauseBtn">⏸️</div> <div class="ctrl-btn" id="resetBtn">⟲</div> <div class="ctrl-btn" id="colorBtn">🎨</div> </div> </div> <footer class="footer"> <div>NeonCloud System v4.2.7</div> <div class="footer-links"> <div class="footer-link">Support</div> <div class="footer-link">Documentation</div> <div class="footer-link">License</div> </div> </footer> </div> <div class="responsive-warning"> For optimal experience, please view on a larger screen. </div> <script> document.addEventListener('DOMContentLoaded', function() { // Canvas setup const canvas = document.getElementById('cloudCanvas'); const ctx = canvas.getContext('2d'); // Set canvas size to match viewport function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } resizeCanvas(); window.addEventListener('resize', resizeCanvas); // Cloud parameters let cloudDensity = 25; let paused = false; let colorMode = 0; // 0: cyan, 1: purple, 2: multi const colorSchemes = [ { stroke: '#0ff', glow: 'rgba(0, 255, 255, 0.5)' }, { stroke: '#f0f', glow: 'rgba(255, 0, 255, 0.5)' }, { stroke: '#0ff', glow: 'rgba(0, 255, 255, 0.5)', alternate: true } ]; // Cloud particle class class CloudParticle { constructor() { this.reset(); // Start at random positions this.x = Math.random() * canvas.width; this.y = Math.random() * canvas.height; } reset() { this.x = 0; this.y = Math.random() * canvas.height; this.size = 2 + Math.random() * 8; this.speed = 0.5 + Math.random() * 1.5; this.opacity = 0.3 + Math.random() * 0.5; this.pulseSpeed = 0.01 + Math.random() * 0.02; this.pulseDirection = Math.random() > 0.5 ? 1 : -1; this.glowSize = 5 + Math.random() * 15; this.colorOffset = Math.random(); // For multi-color mode } update() { if (paused) return; this.x += this.speed; this.opacity += this.pulseSpeed * this.pulseDirection; if (this.opacity >= 0.8 || this.opacity <= 0.2) { this.pulseDirection *= -1; } if (this.x > canvas.width + 50) { this.x = -50; this.y = Math.random() * canvas.height; } } draw() { let colorScheme = colorSchemes[colorMode]; let strokeColor = colorScheme.stroke; let glowColor = colorScheme.glow; // For multi-color mode if (colorScheme.alternate) { const hue = (this.colorOffset * 360) % 360; strokeColor = `hsl(${hue}, 100%, 70%)`; glowColor = `hsla(${hue}, 100%, 70%, 0.5)`; } ctx.beginPath(); // Draw cloud shape - a series of connected curves ctx.moveTo(this.x, this.y); ctx.bezierCurveTo( this.x + this.size * 2, this.y - this.size, this.x + this.size * 4, this.y + this.size, this.x + this.size * 6, this.y ); ctx.bezierCurveTo( this.x + this.size * 8, this.y + this.size * 2, this.x + this.size * 6, this.y + this.size * 3, this.x + this.size * 3, this.y + this.size * 3 ); ctx.bezierCurveTo( this.x + this.size, this.y + this.size * 4, this.x - this.size, this.y + this.size * 2, this.x, this.y ); // Glow effect ctx.shadowBlur = this.glowSize * this.opacity * 2; ctx.shadowColor = glowColor; // Outline styling ctx.strokeStyle = strokeColor; ctx.lineWidth = 1; ctx.globalAlpha = this.opacity; ctx.stroke(); // Semi-gloss finish (subtle fill) ctx.fillStyle = glowColor.replace('0.5', '0.05'); ctx.fill(); // Reset ctx.globalAlpha = 1; ctx.shadowBlur = 0; } } // Create particles let particles = []; function initParticles() { particles = []; for (let i = 0; i < cloudDensity; i++) { particles.push(new CloudParticle()); } } initParticles(); // Animation loop function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); // Draw dark gradient background const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height); gradient.addColorStop(0, '#050510'); gradient.addColorStop(1, '#030308'); ctx.fillStyle = gradient; ctx.fillRect(0, 0, canvas.width, canvas.height); // Update and draw particles particles.forEach(particle => { particle.update(); particle.draw(); }); requestAnimationFrame(animate); } animate(); // UI Interactions const densitySlider = document.getElementById('densitySlider'); const frequencySlider = document.getElementById('frequencySlider'); const pauseBtn = document.getElementById('pauseBtn'); const resetBtn = document.getElementById('resetBtn'); const colorBtn = document.getElementById('colorBtn'); densitySlider.addEventListener('input', function() { cloudDensity = parseInt(this.value); initParticles(); }); frequencySlider.addEventListener('input', function() { // Adjust pulse speed based on frequency const frequency = parseInt(this.value) / 100; particles.forEach(particle => { particle.pulseSpeed = 0.005 + frequency * 0.03; }); }); pauseBtn.addEventListener('click', function() { paused = !paused; this.textContent = paused ? '▶️' : '⏸️'; }); resetBtn.addEventListener('click', function() { particles.forEach(particle => particle.reset()); }); colorBtn.addEventListener('click', function() { colorMode = (colorMode + 1) % colorSchemes.length; }); // Button animations const buttons = document.querySelectorAll('.btn'); buttons.forEach(button => { button.addEventListener('click', function() { this.style.transform = 'scale(0.95)'; setTimeout(() => { this.style.transform = 'scale(1)'; }, 100); }); }); // Cloud interaction canvas.addEventListener('mousemove', function(e) { if (paused) return; const mouseX = e.clientX; const mouseY = e.clientY; particles.forEach(particle => { // Calculate distance from mouse const dx = particle.x - mouseX; const dy = particle.y - mouseY; const distance = Math.sqrt(dx * dx + dy * dy); // Repel particles within range if (distance < 100) { const angle = Math.atan2(dy, dx); const force = (100 - distance) / 10; particle.x += Math.cos(angle) * force * 0.2; particle.y += Math.sin(angle) * force * 0.2; // Increase glow when near mouse particle.glowSize = Math.min(30, particle.glowSize + 1); } else { // Return to normal glow gradually particle.glowSize = Math.max(5, particle.glowSize - 0.5); } }); }); // Optional: Click to create ripple effect canvas.addEventListener('click', function(e) { const mouseX = e.clientX; const mouseY = e.clientY; particles.forEach(particle => { const dx = particle.x - mouseX; const dy = particle.y - mouseY; const distance = Math.sqrt(dx * dx + dy * dy); if (distance < 150) { const angle = Math.atan2(dy, dx); const force = (150 - distance) / 5; particle.x += Math.cos(angle) * force; particle.y += Math.sin(angle) * force; particle.opacity = 1; } }); }); // Responsive adjustment function checkResponsive() { const warning = document.querySelector('.responsive-warning'); if (window.innerWidth < 500 || window.innerHeight < 500) { warning.style.display = 'block'; } else { warning.style.display = 'none'; } } window.addEventListener('resize', checkResponsive); checkResponsive(); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Parallax Cloud Storytelling</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { overflow-x: hidden; background: linear-gradient(to bottom, #1a237e, #4a148c, #880e4f); color: white; height: 2500px; transition: background 1s ease; } .container { position: relative; width: 100%; max-width: 700px; margin: 0 auto; height: 700px; overflow: hidden; } .cloud-layer { position: fixed; top: 0; left: 0; width: 200%; height: 700px; background-repeat: repeat-x; pointer-events: none; } /* Cloud layers at different depths */ .cloud-layer-1 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' width='200' height='60'%3E%3Cpath fill='rgba(255, 255, 255, 0.9)' d='M30,25 Q40,10 50,25 Q60,10 70,25 Q80,15 90,25 Q100,10 110,25 Q120,15 130,25 Q140,10 150,25 L150,60 L30,60 Z'/%3E%3C/svg%3E"); background-size: 200px 60px; z-index: 4; opacity: 0.9; } .cloud-layer-2 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 80' width='300' height='80'%3E%3Cpath fill='rgba(255, 255, 255, 0.7)' d='M40,35 Q60,15 80,35 Q100,20 120,35 Q140,15 160,35 Q180,25 200,35 Q220,15 240,35 L240,80 L40,80 Z'/%3E%3C/svg%3E"); background-size: 300px 80px; z-index: 3; opacity: 0.7; top: 50px; } .cloud-layer-3 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' width='400' height='100'%3E%3Cpath fill='rgba(255, 255, 255, 0.5)' d='M50,45 Q80,20 110,45 Q140,25 170,45 Q200,15 230,45 Q260,30 290,45 Q320,20 350,45 L350,100 L50,100 Z'/%3E%3C/svg%3E"); background-size: 400px 100px; z-index: 2; opacity: 0.5; top: 100px; } .cloud-layer-4 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 120' width='500' height='120'%3E%3Cpath fill='rgba(255, 255, 255, 0.3)' d='M60,55 Q100,25 140,55 Q180,30 220,55 Q260,15 300,55 Q340,35 380,55 Q420,25 460,55 L460,120 L60,120 Z'/%3E%3C/svg%3E"); background-size: 500px 120px; z-index: 1; opacity: 0.3; top: 150px; } .content-section { position: fixed; width: 100%; max-width: 700px; padding: 40px; z-index: 5; opacity: 0; transition: opacity 0.8s ease, transform 0.8s ease; transform: translateY(50px); pointer-events: none; } .content-section.active { opacity: 1; transform: translateY(0); pointer-events: auto; } h1 { font-size: 2.5rem; margin-bottom: 20px; text-shadow: 0 0 15px rgba(0, 0, 0, 0.5); background: linear-gradient(to right, #ffffff, #e0e0e0); -webkit-background-clip: text; background-clip: text; color: transparent; } p { font-size: 1.1rem; line-height: 1.7; margin-bottom: 20px; text-shadow: 0 0 10px rgba(0, 0, 0, 0.8); } .story-progress { position: fixed; right: 20px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; z-index: 10; } .progress-dot { width: 12px; height: 12px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.4); margin: 10px 0; cursor: pointer; transition: all 0.3s ease; } .progress-dot.active { background-color: white; box-shadow: 0 0 10px rgba(255, 255, 255, 0.8); transform: scale(1.3); } .story-nav { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; gap: 20px; } .nav-button { background: rgba(255, 255, 255, 0.2); border: 2px solid rgba(255, 255, 255, 0.7); color: white; padding: 10px 20px; border-radius: 30px; cursor: pointer; transition: all 0.3s ease; backdrop-filter: blur(5px); font-weight: bold; } .nav-button:hover { background: rgba(255, 255, 255, 0.3); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); } .nav-button:active { transform: translateY(0); } .floating-element { position: absolute; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.1)); filter: blur(1px); pointer-events: none; z-index: 0; opacity: 0.6; animation: float 20s infinite ease-in-out; } @keyframes float { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(-20px, 15px) scale(1.05); } 50% { transform: translate(10px, -10px) scale(0.95); } 75% { transform: translate(15px, 20px) scale(1.02); } } @media (max-width: 600px) { h1 { font-size: 1.8rem; } p { font-size: 1rem; } .content-section { padding: 30px 20px; } .story-progress { right: 10px; } .nav-button { padding: 8px 15px; font-size: 0.9rem; } } </style> </head> <body> <div class="container"> <!-- Cloud Layers --> <div class="cloud-layer cloud-layer-1"></div> <div class="cloud-layer cloud-layer-2"></div> <div class="cloud-layer cloud-layer-3"></div> <div class="cloud-layer cloud-layer-4"></div> <!-- Floating Elements --> <div class="floating-element" style="width: 80px; height: 80px; top: 20%; left: 15%; animation-delay: -2s;"></div> <div class="floating-element" style="width: 120px; height: 120px; top: 60%; left: 70%; animation-delay: -5s;"></div> <div class="floating-element" style="width: 60px; height: 60px; top: 30%; left: 65%; animation-delay: -8s;"></div> <!-- Content Sections --> <section class="content-section" id="section1"> <h1>Between Two Skies</h1> <p>High above the world, where the atmosphere meets the void, stories drift among the clouds. These aren't ordinary tales—they're carried by water droplets and ice crystals, formed from the whispers of everyone below.</p> <p>As you journey through these stratospheric layers, each cloud formation reveals narratives that have been gathering for centuries.</p> </section> <section class="content-section" id="section2"> <h1>The Memory Cirrus</h1> <p>The highest, most delicate cloud formations hold our oldest memories. These wispy tendrils reach 40,000 feet upward, preserving stories from ancient civilizations.</p> <p>Indigenous cultures recognized these clouds as knowledge keepers—celestial libraries that could be accessed through careful observation of their movement patterns.</p> </section> <section class="content-section" id="section3"> <h1>Cumulus of Connection</h1> <p>The fluffy, billowing clouds that populate our middle atmosphere act as connectors between disparate stories. When two cumulus clouds merge, their narratives intertwine, creating unexpected plot twists.</p> <p>Meteorologists have documented strange phenomena when these clouds combine—radio signals briefly carrying voices from decades past, bird migrations following forgotten routes.</p> </section> <section class="content-section" id="section4"> <h1>Stratiform Secrets</h1> <p>The lowest, most expansive cloud layer blankets our world in a continuous sheet of untold secrets. These are the stories we've collectively chosen to forget, yet they persist in these misty formations.</p> <p>When fog rises from the ground to meet these clouds, momentary revelations occur—insights that feel both new and strangely familiar, as if we'd always known them.</p> </section> <section class="content-section" id="section5"> <h1>Your Story Aloft</h1> <p>Every exhaled breath contributes water vapor to the atmosphere, eventually joining the cloud narrative. The words you speak today may circulate the world numerous times, becoming part of this aerial ecosystem of stories.</p> <p>Look upward. The next time you see the clouds shifting and changing shape, remember that you're witnessing the oldest, most comprehensive storytelling medium our world has ever known.</p> </section> <!-- Navigation --> <div class="story-progress"> <div class="progress-dot" data-section="1"></div> <div class="progress-dot" data-section="2"></div> <div class="progress-dot" data-section="3"></div> <div class="progress-dot" data-section="4"></div> <div class="progress-dot" data-section="5"></div> </div> <div class="story-nav"> <button class="nav-button" id="prev-btn">Previous</button> <button class="nav-button" id="next-btn">Next</button> </div> </div> <script> document.addEventListener('DOMContentLoaded', () => { // Parallax scrolling effect const cloudLayers = document.querySelectorAll('.cloud-layer'); const sections = document.querySelectorAll('.content-section'); const progressDots = document.querySelectorAll('.progress-dot'); const prevBtn = document.getElementById('prev-btn'); const nextBtn = document.getElementById('next-btn'); let currentSection = 1; const totalSections = sections.length; const sectionHeight = 500; // Height to scroll for each section // Background colors for each section const backgrounds = [ 'linear-gradient(to bottom, #1a237e, #4a148c, #880e4f)', 'linear-gradient(to bottom, #4a148c, #880e4f, #bf360c)', 'linear-gradient(to bottom, #880e4f, #bf360c, #1b5e20)', 'linear-gradient(to bottom, #bf360c, #1b5e20, #006064)', 'linear-gradient(to bottom, #1b5e20, #006064, #1a237e)' ]; // Set initial active section updateActiveSection(); // Handle scroll event for parallax effect window.addEventListener('scroll', () => { const scrollY = window.scrollY; // Move cloud layers at different speeds cloudLayers[0].style.transform = `translateX(${-scrollY * 0.5}px)`; cloudLayers[1].style.transform = `translateX(${-scrollY * 0.3}px)`; cloudLayers[2].style.transform = `translateX(${-scrollY * 0.15}px)`; cloudLayers[3].style.transform = `translateX(${-scrollY * 0.05}px)`; // Calculate current section based on scroll position const newSection = Math.floor(scrollY / sectionHeight) + 1; if (newSection !== currentSection && newSection > 0 && newSection <= totalSections) { currentSection = newSection; updateActiveSection(); } }); // Handle progress dots click progressDots.forEach(dot => { dot.addEventListener('click', () => { const sectionNum = parseInt(dot.getAttribute('data-section')); goToSection(sectionNum); }); }); // Handle navigation buttons prevBtn.addEventListener('click', () => { if (currentSection > 1) { goToSection(currentSection - 1); } }); nextBtn.addEventListener('click', () => { if (currentSection < totalSections) { goToSection(currentSection + 1); } }); // Make content sections appear when they're visible function updateActiveSection() { // Update active section sections.forEach((section, index) => { if (index + 1 === currentSection) { section.classList.add('active'); } else { section.classList.remove('active'); } }); // Update active progress dot progressDots.forEach((dot, index) => { if (index + 1 === currentSection) { dot.classList.add('active'); } else { dot.classList.remove('active'); } }); // Update background color document.body.style.background = backgrounds[currentSection - 1]; // Update button states prevBtn.disabled = currentSection === 1; nextBtn.disabled = currentSection === totalSections; // Add subtle animation effect based on current section const animDelay = (currentSection - 1) * 0.2; cloudLayers.forEach((layer, i) => { layer.style.animationDelay = `${animDelay + (i * 0.1)}s`; }); } // Navigate to a specific section function goToSection(sectionNum) { window.scrollTo({ top: (sectionNum - 1) * sectionHeight, behavior: 'smooth' }); currentSection = sectionNum; updateActiveSection(); } // Add mouse parallax effect to clouds document.addEventListener('mousemove', (e) => { const mouseX = e.clientX / window.innerWidth; const mouseY = e.clientY / window.innerHeight; cloudLayers.forEach((layer, index) => { const depth = (index + 1) * 5; const moveX = (mouseX - 0.5) * depth; const moveY = (mouseY - 0.5) * depth * 0.5; layer.style.transform = `translateX(${-window.scrollY * (0.5 / (index + 1)) + moveX}px) translateY(${moveY}px)`; }); }); // Automatically show first section setTimeout(() => { document.getElementById('section1').classList.add('active'); progressDots[0].classList.add('active'); }, 500); // Create additional floating elements for atmosphere for (let i = 0; i < 5; i++) { const floatingEl = document.createElement('div'); floatingEl.className = 'floating-element'; floatingEl.style.width = `${30 + Math.random() * 50}px`; floatingEl.style.height = floatingEl.style.width; floatingEl.style.top = `${Math.random() * 100}%`; floatingEl.style.left = `${Math.random() * 100}%`; floatingEl.style.animationDelay = `${-Math.random() * 10}s`; floatingEl.style.opacity = `${0.3 + Math.random() * 0.3}`; document.querySelector('.container').appendChild(floatingEl); } }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Cloud Logo Reveal</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f5f7fa; font-family: 'Helvetica Neue', Arial, sans-serif; overflow: hidden; } .app-container { position: relative; width: 100%; max-width: 700px; height: 700px; background: linear-gradient(135deg, #f5f7fa 0%, #e4e7eb 100%); border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); overflow: hidden; } .loading-screen { position: absolute; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 10; } .loading-text { font-size: 18px; font-weight: 500; color: #4A4A4A; margin-top: 30px; opacity: 0; transform: translateY(20px); animation: fadeIn 1s ease-out 2s forwards; } @keyframes fadeIn { to { opacity: 1; transform: translateY(0); } } .app-content { position: absolute; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; transition: opacity 1s ease-in-out; padding: 30px; text-align: center; } .app-title { font-size: 32px; font-weight: 700; margin-bottom: 20px; color: #2C3E50; } .app-description { font-size: 18px; line-height: 1.6; color: #5D6D7E; max-width: 500px; margin-bottom: 40px; } .app-cta { padding: 15px 30px; background-color: #3498DB; color: white; border: none; border-radius: 30px; font-size: 18px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(52, 152, 219, 0.3); } .app-cta:hover { background-color: #2980B9; transform: translateY(-2px); box-shadow: 0 6px 8px rgba(52, 152, 219, 0.4); } .logo-container { position: relative; width: 200px; height: 200px; } .cloud { position: absolute; background-color: white; border-radius: 50%; opacity: 0.8; filter: blur(5px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); transition: all 0.5s ease-in-out; } .logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); width: 120px; height: 120px; display: flex; justify-content: center; align-items: center; border-radius: 20px; background: linear-gradient(135deg, #3498DB 0%, #2980B9 100%); box-shadow: 0 10px 20px rgba(41, 128, 185, 0.3); z-index: 5; opacity: 0; transition: opacity 0.5s ease, transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); } .logo svg { width: 70px; height: 70px; } .logo-text { position: absolute; bottom: -50px; left: 50%; transform: translateX(-50%); font-size: 24px; font-weight: 700; color: #2980B9; opacity: 0; transition: opacity 0.5s ease, transform 0.5s ease; } .footer { position: absolute; bottom: 20px; width: 100%; text-align: center; font-size: 14px; color: #95A5A6; } @media (max-width: 700px) { .app-container { border-radius: 0; height: 100vh; } .app-title { font-size: 28px; } .app-description { font-size: 16px; padding: 0 15px; } } </style> </head> <body> <div class="app-container"> <div class="loading-screen"> <div class="logo-container"> <!-- Cloud particles will be added via JS --> </div> <div class="loading-text">Initializing SkyForge...</div> </div> <div class="app-content"> <h1 class="app-title">Welcome to SkyForge</h1> <p class="app-description"> Transform your ideas into reality with SkyForge's intuitive cloud-based design tools. Create, collaborate, and deploy faster than ever before. </p> <button class="app-cta">Start Creating</button> <div class="footer"> SkyForge v1.0.2 • Fluid Design Systems </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', () => { const logoContainer = document.querySelector('.logo-container'); const loadingScreen = document.querySelector('.loading-screen'); const appContent = document.querySelector('.app-content'); // Create logo element const logo = document.createElement('div'); logo.className = 'logo'; logo.innerHTML = ` <svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M70 35H30C27.2386 35 25 37.2386 25 40V60C25 62.7614 27.2386 65 30 65H70C72.7614 65 75 62.7614 75 60V40C75 37.2386 72.7614 35 70 35Z" stroke="white" stroke-width="4"/> <path d="M40 50L45 55L60 40" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/> <path d="M35 75C35 75 35 85 50 85C65 85 65 75 65 75" stroke="white" stroke-width="4" stroke-linecap="round"/> <path d="M50 15V30" stroke="white" stroke-width="4" stroke-linecap="round"/> <path d="M37 21L43 27" stroke="white" stroke-width="4" stroke-linecap="round"/> <path d="M63 21L57 27" stroke="white" stroke-width="4" stroke-linecap="round"/> </svg> `; // Create logo text const logoText = document.createElement('div'); logoText.className = 'logo-text'; logoText.textContent = 'SkyForge'; // Add logo and text to container logoContainer.appendChild(logo); logoContainer.appendChild(logoText); // Generate random cloud particles const cloudCount = 20; const clouds = []; for (let i = 0; i < cloudCount; i++) { const cloud = document.createElement('div'); cloud.className = 'cloud'; // Random position, size and opacity const size = Math.random() * 100 + 50; const x = Math.random() * 300 - 150; const y = Math.random() * 300 - 150; cloud.style.width = `${size}px`; cloud.style.height = `${size}px`; cloud.style.left = `${x + 100}px`; // Center + random offset cloud.style.top = `${y + 100}px`; // Center + random offset cloud.style.opacity = '0'; logoContainer.appendChild(cloud); clouds.push(cloud); } // Animation timeline setTimeout(() => { // Fade in clouds clouds.forEach((cloud, index) => { setTimeout(() => { cloud.style.opacity = Math.random() * 0.4 + 0.4; }, index * 80); }); // Move clouds toward center setTimeout(() => { clouds.forEach(cloud => { const currentX = parseFloat(cloud.style.left); const currentY = parseFloat(cloud.style.top); // Move towards center cloud.style.left = `${currentX + (100 - currentX) * 0.4}px`; cloud.style.top = `${currentY + (100 - currentY) * 0.4}px`; }); // Reveal logo after clouds move setTimeout(() => { logo.style.opacity = '1'; logo.style.transform = 'translate(-50%, -50%) scale(1)'; // Disperse clouds setTimeout(() => { clouds.forEach(cloud => { const angle = Math.random() * Math.PI * 2; const distance = Math.random() * 150 + 150; cloud.style.left = `${100 + Math.cos(angle) * distance}px`; cloud.style.top = `${100 + Math.sin(angle) * distance}px`; cloud.style.opacity = '0'; }); // Show logo text setTimeout(() => { logoText.style.opacity = '1'; logoText.style.transform = 'translateX(-50%)'; // Complete animation and show app content setTimeout(() => { loadingScreen.style.opacity = '0'; setTimeout(() => { loadingScreen.style.display = 'none'; appContent.style.opacity = '1'; }, 500); }, 1000); }, 300); }, 1000); }, 800); }, 1000); }, 500); // Add interaction to the CTA button const ctaButton = document.querySelector('.app-cta'); ctaButton.addEventListener('click', function() { this.innerHTML = 'Launching Studio...'; this.style.width = '200px'; this.disabled = true; setTimeout(() => { this.innerHTML = '✓ Ready'; this.style.backgroundColor = '#27AE60'; }, 2000); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Emma Rivers • Creative Portfolio</title> <style> /* Base Styles */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap'); :root { --color-bg: #f9f6f2; --color-text: #2a2a2a; --color-accent: #a6c8e0; --color-accent-dark: #7daed0; --color-cloud-1: #e5edf5; --color-cloud-2: #d8e6f2; --color-cloud-3: #c2d8ec; --color-muted: #8c8c8c; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'DM Sans', sans-serif; background-color: var(--color-bg); color: var(--color-text); overflow-x: hidden; line-height: 1.6; transition: background-color 0.5s ease; } .container { max-width: 700px; height: 700px; margin: 0 auto; padding: 1.5rem; overflow-y: auto; scrollbar-width: thin; position: relative; } .container::-webkit-scrollbar { width: 5px; } .container::-webkit-scrollbar-thumb { background-color: var(--color-accent); border-radius: 10px; } header { position: relative; padding: 2rem 0 1rem; margin-bottom: 2rem; z-index: 10; } h1, h2, h3 { font-family: 'Playfair Display', serif; font-weight: 400; } h1 { font-size: 2.2rem; margin-bottom: 0.5rem; position: relative; display: inline-block; } h1::after { content: ''; position: absolute; width: 30%; height: 2px; background-color: var(--color-accent); bottom: -4px; left: 0; transition: width 0.3s ease; } h1:hover::after { width: 100%; } h2 { font-size: 1.5rem; margin-bottom: 1rem; color: var(--color-text); } h3 { font-size: 1.2rem; margin-bottom: 0.75rem; } p { margin-bottom: 1.2rem; line-height: 1.7; } .subtitle { font-style: italic; color: var(--color-muted); font-size: 1rem; } /* Navigation */ nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; } .logo { font-family: 'Playfair Display', serif; font-size: 1.2rem; font-weight: 700; letter-spacing: 0.5px; } .nav-links { display: flex; list-style: none; gap: 1.5rem; } .nav-links a { text-decoration: none; color: var(--color-text); position: relative; padding: 0.3rem 0; font-size: 0.9rem; font-weight: 500; transition: color 0.3s ease; } .nav-links a::after { content: ''; position: absolute; width: 0; height: 1px; background-color: var(--color-accent); bottom: 0; left: 0; transition: width 0.3s ease; } .nav-links a:hover { color: var(--color-accent-dark); } .nav-links a:hover::after { width: 100%; } /* Cloud Backgrounds */ .cloud { position: absolute; background-repeat: no-repeat; background-size: contain; opacity: 0.6; pointer-events: none; z-index: 0; filter: blur(0.5px); transition: transform 0.3s ease, opacity 0.3s ease; } .cloud-1 { width: 120px; height: 80px; top: 60px; right: 40px; transform: translateY(0); } .cloud-2 { width: 150px; height: 100px; bottom: 220px; left: -20px; transform: translateY(0) rotate(10deg); } .cloud-3 { width: 140px; height: 90px; bottom: 50px; right: 10px; transform: translateY(0) rotate(-5deg); } .cloud-4 { width: 110px; height: 75px; top: 250px; right: 60px; transform: translateY(0) rotate(8deg); } /* Portfolio Sections */ .section { margin-bottom: 3rem; position: relative; z-index: 2; } .portfolio-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 1.5rem; } .portfolio-item { background-color: rgba(255, 255, 255, 0.7); border-radius: 0.5rem; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; position: relative; cursor: pointer; } .portfolio-item:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); } .portfolio-img { width: 100%; height: 140px; background-position: center; background-size: cover; background-repeat: no-repeat; position: relative; overflow: hidden; } .portfolio-img::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0,0,0,0) 70%, rgba(0,0,0,0.2) 100%); } .portfolio-content { padding: 1rem; } .portfolio-title { font-size: 1rem; margin-bottom: 0.4rem; font-weight: 500; } .portfolio-desc { font-size: 0.85rem; color: var(--color-muted); margin-bottom: 0; } .portfolio-tag { display: inline-block; background-color: var(--color-cloud-2); padding: 0.2rem 0.5rem; font-size: 0.7rem; border-radius: 2rem; margin-top: 0.5rem; margin-right: 0.3rem; } /* About Section */ .about { display: flex; gap: 2rem; align-items: flex-start; margin-top: 1.5rem; } .about-image { width: 120px; height: 120px; border-radius: 50%; background-color: var(--color-cloud-2); flex-shrink: 0; position: relative; overflow: hidden; } .about-profile { background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><defs><style>.cls-1{fill:%23a6c8e0;}.cls-2{fill:%23f9f6f2;}</style></defs><circle class="cls-1" cx="100" cy="100" r="100"/><circle class="cls-2" cx="100" cy="80" r="35"/><path class="cls-2" d="M100,120c-27.62,0-50,22.38-50,50h100C150,142.38,127.62,120,100,120Z"/></svg>'); background-size: cover; background-position: center; width: 100%; height: 100%; } .bio p { margin-bottom: 0.7rem; } /* Footer */ footer { margin-top: 4rem; border-top: 1px solid var(--color-cloud-2); padding-top: 1.5rem; text-align: center; font-size: 0.85rem; color: var(--color-muted); } .social-links { display: flex; justify-content: center; gap: 1rem; margin-top: 1rem; } .social-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: var(--color-cloud-2); transition: background-color 0.3s ease, transform 0.3s ease; } .social-icon:hover { background-color: var(--color-accent); transform: translateY(-3px) scale(1.1); } /* Button Styles */ .btn { display: inline-block; padding: 0.6rem 1.2rem; background-color: var(--color-accent); color: white; border: none; border-radius: 2rem; font-size: 0.9rem; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease; text-decoration: none; font-weight: 500; margin-top: 1rem; } .btn:hover { background-color: var(--color-accent-dark); transform: translateY(-2px); } /* Project Modal */ .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; z-index: 100; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .modal.active { opacity: 1; visibility: visible; } .modal-content { background-color: var(--color-bg); border-radius: 0.5rem; width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; position: relative; animation: slideUp 0.4s ease forwards; padding: 2rem; } .close-modal { position: absolute; top: 15px; right: 20px; font-size: 1.5rem; cursor: pointer; background: none; border: none; color: var(--color-muted); transition: color 0.3s ease; } .close-modal:hover { color: var(--color-text); } .modal-img { width: 100%; height: 200px; background-size: cover; background-position: center; border-radius: 0.3rem; margin-bottom: 1.5rem; } .modal-title { margin-bottom: 0.5rem; } .modal-subtitle { color: var(--color-muted); font-style: italic; margin-bottom: 1.5rem; } /* Animations */ @keyframes float { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } } @keyframes slideUp { 0% { transform: translateY(50px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } /* Responsive Design */ @media (max-width: 600px) { header { padding: 1.5rem 0 1rem; } h1 { font-size: 1.8rem; } .portfolio-grid { grid-template-columns: 1fr; } .about { flex-direction: column; align-items: center; text-align: center; } .about-image { margin-bottom: 1rem; } .cloud-1 { width: 80px; height: 50px; top: 40px; right: 20px; } .cloud-2 { width: 100px; height: 70px; bottom: 180px; left: -10px; } .cloud-3 { width: 90px; height: 60px; bottom: 50px; right: 5px; } .cloud-4 { width: 80px; height: 55px; top: 220px; right: 30px; } } </style> </head> <body> <div class="container"> <nav> <div class="logo">Emma Rivers</div> <ul class="nav-links"> <li><a href="#" class="active">Work</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <header> <h1>Dreamy Illustrations</h1> <p class="subtitle">Whimsical designs floating between reality and imagination</p> </header> <div class="cloud cloud-1"> <svg viewBox="0 0 180 120" xmlns="http://www.w3.org/2000/svg"> <path d="M165.2,75.65c7.92-14.34,2.34-32.31-12-40.23a30,30,0,0,0-8.42-3.11A41.63,41.63,0,0,0,68.82,16.5a39.21,39.21,0,0,0-5.5.38,46.37,46.37,0,0,0-88.38,7.49,36.08,36.08,0,0,0,14.69,69A36.31,36.31,0,0,0,5.3,98,32.39,32.39,0,0,0,61.58,97.3a41.63,41.63,0,0,0,64.06-11.14,30,30,0,0,0,39.56-10.51Z" fill="#e5edf5" stroke="#c2d8ec" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="2,4" /> </svg> </div> <div class="cloud cloud-2"> <svg viewBox="0 0 180 120" xmlns="http://www.w3.org/2000/svg"> <path d="M26.69,48.91C18.77,34.57,24.35,16.61,38.66,8.69a29.94,29.94,0,0,1,8.42-3.11A41.63,41.63,0,0,1,123.06,19.78a39.21,39.21,0,0,1,5.5.38,46.37,46.37,0,0,1,88.38,7.49,36.08,36.08,0,0,1-14.69,69,36.31,36.31,0,0,1-15.67,4.62,32.39,32.39,0,0,1-56.28-.69,41.63,41.63,0,0,1-64.06-11.14,30,30,0,0,1-39.55-10.51Z" fill="#d8e6f2" stroke="#c2d8ec" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="2,4" /> </svg> </div> <div class="cloud cloud-3"> <svg viewBox="0 0 180 120" xmlns="http://www.w3.org/2000/svg"> <path d="M149.94,34.86c7.92-14.34,2.34-32.3-12-40.22a30,30,0,0,0-8.42-3.11A41.63,41.63,0,0,0,53.56,5.71a39.21,39.21,0,0,0-5.5.38A46.37,46.37,0,0,0-40.32,13.58a36.08,36.08,0,0,0,14.69,69A36.31,36.31,0,0,0-10,87.2a32.39,32.39,0,0,0,56.28-.69,41.63,41.63,0,0,0,64.06-11.14,30,30,0,0,0,39.56-10.51Z" fill="#e5edf5" stroke="#c2d8ec" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="2,4" /> </svg> </div> <div class="cloud cloud-4"> <svg viewBox="0 0 180 120" xmlns="http://www.w3.org/2000/svg"> <path d="M156.43,40.14C164.35,25.8,158.77,7.84,144.46,0a30,30,0,0,0-8.42-3.11A41.63,41.63,0,0,0,60.05,10.99a39.21,39.21,0,0,0-5.5.38A46.37,46.37,0,0,0-33.83,18.86a36.08,36.08,0,0,0,14.69,69,36.31,36.31,0,0,0-15.67,4.62A32.39,32.39,0,0,0,21.47,91.8a41.63,41.63,0,0,0,64.06-11.14,30,30,0,0,0,39.56-10.51Z" fill="#d8e6f2" stroke="#c2d8ec" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="2,4" /> </svg> </div> <section class="section"> <h2>Featured Projects</h2> <div class="portfolio-grid"> <div class="portfolio-item" data-project="skyward"> <div class="portfolio-img" style="background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 800 600\'><defs><linearGradient id=\'a\' x1=\'0%\' y1=\'0%\' x2=\'100%\' y2=\'100%\'><stop offset=\'0%\' stop-color=\'%23CDDDF0\'/><stop offset=\'100%\' stop-color=\'%239CB7D3\'/></linearGradient></defs><rect width=\'800\' height=\'600\' fill=\'url(%23a)\'/><circle cx=\'400\' cy=\'220\' r=\'80\' fill=\'%23FAD6A5\' opacity=\'0.8\'/><path d=\'M350,400 Q400,300 450,400 T550,400\' stroke=\'%23FFFFFF\' stroke-width=\'5\' fill=\'none\'/><path d=\'M250,420 Q300,350 350,420 T450,420\' stroke=\'%23FFFFFF\' stroke-width=\'4\' fill=\'none\'/></svg>')"></div> <div class="portfolio-content"> <h3 class="portfolio-title">Skyward Dreams</h3> <p class="portfolio-desc">A children's book illustration series exploring adventure through cloud kingdoms.</p> <span class="portfolio-tag">Editorial</span> <span class="portfolio-tag">Illustration</span> </div> </div> <div class="portfolio-item" data-project="misty"> <div class="portfolio-img" style="background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 800 600\'><defs><linearGradient id=\'b\' x1=\'0%\' y1=\'0%\' x2=\'100%\' y2=\'100%\'><stop offset=\'0%\' stop-color=\'%23DDCFC8\'/><stop offset=\'100%\' stop-color=\'%23B4A7A2\'/></linearGradient></defs><rect width=\'800\' height=\'600\' fill=\'url(%23b)\'/><circle cx=\'580\' cy=\'180\' r=\'60\' fill=\'%23E3D4C0\' opacity=\'0.6\'/><path d=\'M100,300 C200,240 300,360 400,300 S600,240 700,300\' stroke=\'%23FFFFFF\' stroke-width=\'3\' fill=\'none\'/><path d=\'M100,350 C200,290 300,410 400,350 S600,290 700,350\' stroke=\'%23FFFFFF\' stroke-width=\'2\' fill=\'none\' opacity=\'0.7\'/></svg>')"></div> <div class="portfolio-content"> <h3 class="portfolio-title">Misty Morning</h3> <p class="portfolio-desc">Weather app interface design with hand-drawn cloud animations and forecast visuals.</p> <span class="portfolio-tag">UI/UX</span> <span class="portfolio-tag">Animation</span> </div> </div> <div class="portfolio-item" data-project="beyond"> <div class="portfolio-img" style="background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 800 600\'><defs><linearGradient id=\'c\' x1=\'0%\' y1=\'0%\' x2=\'100%\' y2=\'100%\'><stop offset=\'0%\' stop-color=\'%23B1C5D3\'/><stop offset=\'100%\' stop-color=\'%236992A9\'/></linearGradient></defs><rect width=\'800\' height=\'600\' fill=\'url(%23c)\'/><ellipse cx=\'170\' cy=\'250\' rx=\'100\' ry=\'60\' fill=\'%23FFFFFF\' opacity=\'0.5\'/><ellipse cx=\'260\' cy=\'280\' rx=\'120\' ry=\'70\' fill=\'%23FFFFFF\' opacity=\'0.6\'/><ellipse cx=\'350\' cy=\'240\' rx=\'80\' ry=\'50\' fill=\'%23FFFFFF\' opacity=\'0.4\'/><path d=\'M400,400 L600,400\' stroke=\'%23FFFFFF\' stroke-width=\'2\' stroke-dasharray=\'10,5\'/></svg>')"></div> <div class="portfolio-content"> <h3 class="portfolio-title">Beyond Blue</h3> <p class="portfolio-desc">Environmental awareness campaign with soft cloud motifs symbolizing clean air initiatives.</p> <span class="portfolio-tag">Branding</span> <span class="portfolio-tag">Campaign</span> </div> </div> <div class="portfolio-item" data-project="ethereal"> <div class="portfolio-img" style="background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 800 600\'><defs><linearGradient id=\'d\' x1=\'0%\' y1=\'0%\' x2=\'100%\' y2=\'100%\'><stop offset=\'0%\' stop-color=\'%23E0D9E6\'/><stop offset=\'100%\' stop-color=\'%23B5A6C9\'/></linearGradient></defs><rect width=\'800\' height=\'600\' fill=\'url(%23d)\'/><circle cx=\'650\' cy=\'150\' r=\'60\' fill=\'%23F5F0F7\' opacity=\'0.7\'/><path d=\'M200,250 C250,200 300,300 350,250 S400,200 450,250 S500,300 550,250\' stroke=\'%23FFFFFF\' stroke-width=\'3\' fill=\'none\'/><ellipse cx=\'400\' cy=\'400\' rx=\'150\' ry=\'40\' fill=\'%23FFFFFF\' opacity=\'0.3\'/></svg>')"></div> <div class="portfolio-content"> <h3 class="portfolio-title">Ethereal Landscapes</h3> <p class="portfolio-desc">A series of dreamy wallpapers with cloud textures and subtle gradient transitions.</p> <span class="portfolio-tag">Digital Art</span> <span class="portfolio-tag">Personal</span> </div> </div> </div> <a href="#" class="btn">View All Projects</a> </section> <section class="section"> <h2>About Me</h2> <div class="about"> <div class="about-image"> <div class="about-profile"></div> </div> <div class="bio"> <p>I'm Emma, an illustrator and UI designer specializing in creating dreamy cloud illustrations and atmospheric digital experiences.</p> <p>My work exists in the space between whimsy and functionality – combining organic, hand-drawn elements with strategic design thinking.</p> <p>When I'm not sketching clouds, you'll find me cloud-watching (naturally!), exploring botanical gardens, or experimenting with watercolor techniques.</p> </div> </div> </section> <footer> <p>© 2023 Emma Rivers • Cloud Illustrator & Designer</p> <div class="social-links"> <a href="#" class="social-icon"> <svg width="15" height="15" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M16 8C17.5913 8 19.1174 8.63214 20.2426 9.75736C21.3679 10.8826 22 12.4087 22 14V21H18V14C18 13.4696 17.7893 12.9609 17.4142 12.5858C17.0391 12.2107 16.5304 12 16 12C15.4696 12 14.9609 12.2107 14.5858 12.5858C14.2107 12.9609 14 13.4696 14 14V21H10V14C10 12.4087 10.6321 10.8826 11.7574 9.75736C12.8826 8.63214 14.4087 8 16 8Z" stroke="#2a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M6 9H2V21H6V9Z" stroke="#2a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M4 6C5.10457 6 6 5.10457 6 4C6 2.89543 5.10457 2 4 2C2.89543 2 2 2.89543 2 4C2 5.10457 2.89543 6 4 6Z" stroke="#2a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </a> <a href="#" class="social-icon"> <svg width="15" height="15" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z" stroke="#2a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M16 3H8C5.23858 3 3 5.23858 3 8V16C3 18.7614 5.23858 21 8 21H16C18.7614 21 21 18.7614 21 16V8C21 5.23858 18.7614 3 16 3Z" stroke="#2a2a2a" stroke-width="2"/> <path d="M17.5 6.5H17.51" stroke="#2a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </a> <a href="#" class="social-icon"> <svg width="15" height="15" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3Z" stroke="#2a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M9 11.5C10.1046 11.5 11 10.6046 11 9.5C11 8.39543 10.1046 7.5 9 7.5C7.89543 7.5 7 8.39543 7 9.5C7 10.6046 7.89543 11.5 9 11.5Z" stroke="#2a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M14.5 8.5H19" stroke="#2a2a2a" stroke-width="2" stroke-linecap="round"/> <path d="M14.5 12.5H19" stroke="#2a2a2a" stroke-width="2" stroke-linecap="round"/> <path d="M7 16.5H19" stroke="#2a2a2a" stroke-width="2" stroke-linecap="round"/> </svg> </a> </div> </footer> <!-- Project Modal --> <div class="modal" id="projectModal"> <div class="modal-content"> <button class="close-modal">×</button> <div class="modal-img" id="modalImg"></div> <h2 class="modal-title" id="modalTitle"></h2> <p class="modal-subtitle" id="modalSubtitle"></p> <div class="modal-description" id="modalDescription"></div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Cloud Animation const clouds = document.querySelectorAll('.cloud'); clouds.forEach((cloud, index) => { cloud.style.animation = `float ${5 + index * 0.5}s ease-in-out infinite`; cloud.style.animationDelay = `${index * 0.7}s`; }); // Parallax Effect document.addEventListener('mousemove', function(e) { const moveX = (e.clientX - window.innerWidth / 2) / 50; const moveY = (e.clientY - window.innerHeight / 2) / 50; clouds.forEach((cloud, index) => { const factor = 0.5 + (index * 0.2); cloud.style.transform = `translate(${moveX * factor}px, ${moveY * factor}px)`; }); }); // Project Modal const modal = document.getElementById('projectModal'); const modalImg = document.getElementById('modalImg'); const modalTitle = document.getElementById('modalTitle'); const modalSubtitle = document.getElementById('modalSubtitle'); const modalDescription = document.getElementById('modalDescription'); const closeModal = document.querySelector('.close-modal'); const portfolioItems = document.querySelectorAll('.portfolio-item'); const projectData = { 'skyward': { title: 'Skyward Dreams', subtitle: 'Children's Book Illustration Series', img: 'data:image/svg+xml;charset=UTF-8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 800 600\'><defs><linearGradient id=\'a\' x1=\'0%\' y1=\'0%\' x2=\'100%\' y2=\'100%\'><stop offset=\'0%\' stop-color=\'%23CDDDF0\'/><stop offset=\'100%\' stop-color=\'%239CB7D3\'/></linearGradient></defs><rect width=\'800\' height=\'600\' fill=\'url(%23a)\'/><circle cx=\'400\' cy=\'220\' r=\'80\' fill=\'%23FAD6A5\' opacity=\'0.8\'/><path d=\'M350,400 Q400,300 450,400 T550,400\' stroke=\'%23FFFFFF\' stroke-width=\'5\' fill=\'none\'/><path d=\'M250,420 Q300,350 350,420 T450,420\' stroke=\'%23FFFFFF\' stroke-width=\'4\' fill=\'none\'/></svg>', description: '<p>This ongoing project includes 15 illustrations for an upcoming children\'s book about a young girl who discovers a world beyond the clouds.</p><p>Each cloud was sketched by hand, then digitized with subtle textures to maintain the organic, dreamy quality. The illustrations feature a limited color palette of soft blues and warm accents.</p><p>I worked closely with the author to capture the whimsical yet grounded tone of the narrative, keeping the clouds as central characters in the visual storytelling.</p>' }, 'misty': { title: 'Misty Morning', subtitle: 'Weather App UI Design', img: 'data:image/svg+xml;charset=UTF-8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 800 600\'><defs><linearGradient id=\'b\' x1=\'0%\' y1=\'0%\' x2=\'100%\' y2=\'100%\'><stop offset=\'0%\' stop-color=\'%23DDCFC
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Interactive Cloud Computing Status</title> <style> :root { --primary-color: #0066ff; --light-blue: #e0f0ff; --dark-blue: #003b8e; --success: #00c48c; --warning: #ffb347; --danger: #ff5c5c; --neutral: #8da4c4; --background: #f7fbff; --text-color: #2b3d52; --card-shadow: 0 10px 30px rgba(0, 102, 255, 0.1); --transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } body { background-color: var(--background); color: var(--text-color); width: 100%; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; padding: 1rem; } .dashboard { width: 100%; max-width: 700px; height: 700px; display: flex; flex-direction: column; gap: 1.5rem; padding: 2rem; overflow: auto; } .header { text-align: center; margin-bottom: 1rem; } .header h1 { font-size: 2rem; font-weight: 700; margin-bottom: 0.5rem; background: linear-gradient(90deg, var(--primary-color), var(--dark-blue)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .header p { color: var(--neutral); font-size: 0.9rem; max-width: 450px; margin: 0 auto; } .cloud-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; } .cloud-card { background: white; border-radius: 16px; padding: 1.5rem; box-shadow: var(--card-shadow); display: flex; flex-direction: column; position: relative; overflow: hidden; cursor: pointer; transition: var(--transition); } .cloud-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0, 102, 255, 0.15); } .cloud-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .cloud-title h3 { font-size: 1.1rem; font-weight: 600; } .status-badge { font-size: 0.7rem; padding: 0.25rem 0.5rem; border-radius: 12px; font-weight: 600; } .status-optimal { background-color: rgba(0, 196, 140, 0.15); color: var(--success); } .status-moderate { background-color: rgba(255, 179, 71, 0.15); color: var(--warning); } .status-heavy { background-color: rgba(255, 92, 92, 0.15); color: var(--danger); } .cloud-visual { position: relative; height: 120px; margin-bottom: 1rem; display: flex; justify-content: center; align-items: center; } .cloud { position: relative; width: 100%; height: 100%; } .cloud svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; filter: drop-shadow(0 5px 15px rgba(0, 102, 255, 0.2)); transition: var(--transition); } .cloud-fill { position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(180deg, rgba(0, 102, 255, 0.7) 0%, rgba(0, 102, 255, 0.3) 100%); border-radius: 0 0 50% 50%; transition: var(--transition); } .metrics { display: flex; justify-content: space-between; margin-top: 0.5rem; } .metric { display: flex; flex-direction: column; align-items: center; } .metric .value { font-size: 1.2rem; font-weight: 700; margin-bottom: 0.2rem; } .metric .label { font-size: 0.7rem; color: var(--neutral); text-transform: uppercase; letter-spacing: 0.5px; } .controls { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; } .control-panel { background: white; border-radius: 16px; padding: 1.5rem; box-shadow: var(--card-shadow); flex: 1; } .control-panel h3 { font-size: 1.1rem; margin-bottom: 1rem; font-weight: 600; } .control-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .slider-container { width: 100%; } .slider-label { display: flex; justify-content: space-between; margin-bottom: 0.5rem; } .slider-label span { font-size: 0.8rem; color: var(--neutral); } .slider { -webkit-appearance: none; width: 100%; height: 6px; border-radius: 3px; background: var(--light-blue); outline: none; } .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--primary-color); cursor: pointer; transition: all 0.2s ease; } .slider::-webkit-slider-thumb:hover { transform: scale(1.2); } .slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--primary-color); cursor: pointer; transition: all 0.2s ease; border: none; } .slider::-moz-range-thumb:hover { transform: scale(1.2); } .button { background: var(--primary-color); color: white; border: none; border-radius: 8px; padding: 0.75rem 1.5rem; font-weight: 600; cursor: pointer; transition: var(--transition); display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; } .button:hover { background: var(--dark-blue); transform: translateY(-2px); } .button-outline { background: transparent; color: var(--primary-color); border: 2px solid var(--primary-color); } .button-outline:hover { background: rgba(0, 102, 255, 0.1); } .particles-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; } .particle { position: absolute; background: rgba(0, 102, 255, 0.2); border-radius: 50%; pointer-events: none; } @media (max-width: 600px) { .cloud-row { grid-template-columns: 1fr; } .controls { flex-direction: column; } .dashboard { padding: 1rem; } } /* Animations & Micro-interactions */ @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes pulse { 0%, 100% { opacity: 0.8; } 50% { opacity: 0.5; } } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .cloud-card { animation: fadeIn 0.6s ease-out forwards; } .cloud-card:nth-child(2) { animation-delay: 0.2s; } .cloud-card:nth-child(3) { animation-delay: 0.4s; } .cloud svg { animation: float 6s ease-in-out infinite; } .optimal .cloud-fill { background: linear-gradient(180deg, rgba(0, 196, 140, 0.7) 0%, rgba(0, 196, 140, 0.3) 100%); animation: pulse 4s ease-in-out infinite; } .moderate .cloud-fill { background: linear-gradient(180deg, rgba(255, 179, 71, 0.7) 0%, rgba(255, 179, 71, 0.3) 100%); animation: pulse 3s ease-in-out infinite; } .heavy .cloud-fill { background: linear-gradient(180deg, rgba(255, 92, 92, 0.7) 0%, rgba(255, 92, 92, 0.3) 100%); animation: pulse 2s ease-in-out infinite; } /* Tooltip styles */ .tooltip { position: absolute; background: rgba(0, 0, 0, 0.8); color: white; padding: 0.5rem 1rem; border-radius: 8px; font-size: 0.8rem; pointer-events: none; opacity: 0; transition: opacity 0.2s ease-in-out; z-index: 10; max-width: 200px; text-align: center; transform: translateY(10px); } .cloud-card:hover .tooltip { opacity: 1; transform: translateY(0); } </style> </head> <body> <div class="particles-container" id="particles"></div> <div class="dashboard"> <div class="header"> <h1>CloudPulse Monitor</h1> <p>Real-time visual indicators of your cloud infrastructure's health and performance status.</p> </div> <div class="cloud-row"> <div class="cloud-card" id="compute-cloud" data-load="30"> <div class="cloud-title"> <h3>Compute Engine</h3> <div class="status-badge status-optimal">Optimal</div> </div> <div class="cloud-visual"> <div class="cloud optimal"> <svg viewBox="0 0 240 120" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M207.9,64.8c0.7-2.5,1.1-5.1,1.1-7.8c0-15.5-12.5-28-28-28c-5.1,0-9.8,1.3-13.9,3.7c-7.4-12.2-20.8-20.4-36.1-20.4 c-20.4,0-37.3,14.4-41.3,33.6c-1.9-0.5-3.9-0.8-6-0.8c-12.3,0-22.4,9.7-23,21.9C52.4,69.8,46,78.1,46,88c0,13.8,11.2,25,25,25h125 c13.8,0,25-11.2,25-25C221,78.5,215.8,70,207.9,64.8z" fill="#ffffff" stroke="#0066FF" stroke-width="3"/> </svg> <div class="cloud-fill" style="height: 30%;"></div> </div> <div class="tooltip">Low CPU load at 30%, all systems operating efficiently</div> </div> <div class="metrics"> <div class="metric"> <div class="value">30%</div> <div class="label">CPU</div> </div> <div class="metric"> <div class="value">24%</div> <div class="label">Memory</div> </div> <div class="metric"> <div class="value">187</div> <div class="label">Instances</div> </div> </div> </div> <div class="cloud-card" id="storage-cloud" data-load="65"> <div class="cloud-title"> <h3>Storage Cluster</h3> <div class="status-badge status-moderate">Moderate</div> </div> <div class="cloud-visual"> <div class="cloud moderate"> <svg viewBox="0 0 240 120" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M207.9,64.8c0.7-2.5,1.1-5.1,1.1-7.8c0-15.5-12.5-28-28-28c-5.1,0-9.8,1.3-13.9,3.7c-7.4-12.2-20.8-20.4-36.1-20.4 c-20.4,0-37.3,14.4-41.3,33.6c-1.9-0.5-3.9-0.8-6-0.8c-12.3,0-22.4,9.7-23,21.9C52.4,69.8,46,78.1,46,88c0,13.8,11.2,25,25,25h125 c13.8,0,25-11.2,25-25C221,78.5,215.8,70,207.9,64.8z" fill="#ffffff" stroke="#ffb347" stroke-width="3"/> </svg> <div class="cloud-fill" style="height: 65%;"></div> </div> <div class="tooltip">Storage approaching 65% capacity, consider optimization</div> </div> <div class="metrics"> <div class="metric"> <div class="value">65%</div> <div class="label">Capacity</div> </div> <div class="metric"> <div class="value">342</div> <div class="label">IOPS (K)</div> </div> <div class="metric"> <div class="value">12.7</div> <div class="label">TB Used</div> </div> </div> </div> <div class="cloud-card" id="network-cloud" data-load="85"> <div class="cloud-title"> <h3>Network Gateway</h3> <div class="status-badge status-heavy">Heavy Load</div> </div> <div class="cloud-visual"> <div class="cloud heavy"> <svg viewBox="0 0 240 120" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M207.9,64.8c0.7-2.5,1.1-5.1,1.1-7.8c0-15.5-12.5-28-28-28c-5.1,0-9.8,1.3-13.9,3.7c-7.4-12.2-20.8-20.4-36.1-20.4 c-20.4,0-37.3,14.4-41.3,33.6c-1.9-0.5-3.9-0.8-6-0.8c-12.3,0-22.4,9.7-23,21.9C52.4,69.8,46,78.1,46,88c0,13.8,11.2,25,25,25h125 c13.8,0,25-11.2,25-25C221,78.5,215.8,70,207.9,64.8z" fill="#ffffff" stroke="#ff5c5c" stroke-width="3"/> </svg> <div class="cloud-fill" style="height: 85%;"></div> </div> <div class="tooltip">High traffic volume at 85%, potential bottleneck detected</div> </div> <div class="metrics"> <div class="metric"> <div class="value">85%</div> <div class="label">Bandwidth</div> </div> <div class="metric"> <div class="value">14.2</div> <div class="label">Gbps</div> </div> <div class="metric"> <div class="value">29.7</div> <div class="label">Latency (ms)</div> </div> </div> </div> </div> <div class="controls"> <div class="control-panel"> <h3>Resource Allocation</h3> <div class="slider-container"> <div class="slider-label"> <span>Compute Load</span> <span id="compute-value">30%</span> </div> <input type="range" min="0" max="100" value="30" class="slider" id="compute-slider"> </div> <div class="slider-container"> <div class="slider-label"> <span>Storage Capacity</span> <span id="storage-value">65%</span> </div> <input type="range" min="0" max="100" value="65" class="slider" id="storage-slider"> </div> <div class="slider-container"> <div class="slider-label"> <span>Network Traffic</span> <span id="network-value">85%</span> </div> <input type="range" min="0" max="100" value="85" class="slider" id="network-slider"> </div> </div> <div class="control-panel"> <h3>Quick Actions</h3> <button class="button" id="optimize-btn"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 16L7 11M12 16L17 11M12 16V4M21 20H3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> Auto-Optimize </button> <button class="button button-outline" id="reset-btn"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M4 4V9H9M4 20L12 12M20 4L12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> Reset Simulation </button> </div> </div> </div> <script> // Cloud Cards const computeCloud = document.getElementById('compute-cloud'); const storageCloud = document.getElementById('storage-cloud'); const networkCloud = document.getElementById('network-cloud'); // Sliders const computeSlider = document.getElementById('compute-slider'); const storageSlider = document.getElementById('storage-slider'); const networkSlider = document.getElementById('network-slider'); // Value displays const computeValue = document.getElementById('compute-value'); const storageValue = document.getElementById('storage-value'); const networkValue = document.getElementById('network-value'); // Buttons const optimizeBtn = document.getElementById('optimize-btn'); const resetBtn = document.getElementById('reset-btn'); // Update cloud fill based on load percentage function updateCloudFill(cloudElement, loadValue) { const cloudVisual = cloudElement.querySelector('.cloud'); const cloudFill = cloudElement.querySelector('.cloud-fill'); const statusBadge = cloudElement.querySelector('.status-badge'); // Update cloud fill height cloudFill.style.height = `${loadValue}%`; // Update status badges and cloud styles if (loadValue <= 40) { statusBadge.textContent = 'Optimal'; statusBadge.className = 'status-badge status-optimal'; cloudVisual.className = 'cloud optimal'; } else if (loadValue <= 70) { statusBadge.textContent = 'Moderate'; statusBadge.className = 'status-badge status-moderate'; cloudVisual.className = 'cloud moderate'; } else { statusBadge.textContent = 'Heavy Load'; statusBadge.className = 'status-badge status-heavy'; cloudVisual.className = 'cloud heavy'; } // Update metric value const metricValue = cloudElement.querySelector('.metric .value'); metricValue.textContent = `${loadValue}%`; // Update data attribute for reference cloudElement.dataset.load = loadValue; } // Initialize sliders with their corresponding cloud elements function initSlider(slider, valueEl, cloudElement) { slider.addEventListener('input', function() { const value = this.value; valueEl.textContent = `${value}%`; updateCloudFill(cloudElement, value); createParticles(value > 70 ? 3 : value > 40 ? 2 : 1); }); } // Initialize all sliders initSlider(computeSlider, computeValue, computeCloud); initSlider(storageSlider, storageValue, storageCloud); initSlider(networkSlider, networkValue, networkCloud); // Auto-optimize function optimizeBtn.addEventListener('click', function() { // Animate the optimization process let currentCompute = parseInt(computeSlider.value); let currentStorage = parseInt(storageSlider.value); let currentNetwork = parseInt(networkSlider.value); const targetCompute = Math.max(currentCompute - 40, 20); const targetStorage = Math.max(currentStorage - 30, 35); const targetNetwork = Math.max(currentNetwork - 35, 30); const interval = setInterval(() => { let isComplete = true; if (currentCompute > targetCompute) { currentCompute -= 1; computeSlider.value = currentCompute; computeValue.textContent = `${currentCompute}%`; updateCloudFill(computeCloud, currentCompute); isComplete = false; } if (currentStorage > targetStorage) { currentStorage -= 1; storageSlider.value = currentStorage; storageValue.textContent = `${currentStorage}%`; updateCloudFill(storageCloud, currentStorage); isComplete = false; } if (currentNetwork > targetNetwork) { currentNetwork -= 1; networkSlider.value = currentNetwork; networkValue.textContent = `${currentNetwork}%`; updateCloudFill(networkCloud, currentNetwork); isComplete = false; } if (isComplete) { clearInterval(interval); // Show optimization completed message const tooltip = document.createElement('div'); tooltip.className = 'tooltip'; tooltip.style.position = 'fixed'; tooltip.style.top = '50%'; tooltip.style.left = '50%'; tooltip.style.transform = 'translate(-50%, -50%)'; tooltip.style.opacity = '1'; tooltip.style.zIndex = '100'; tooltip.style.background = 'rgba(0, 196, 140, 0.9)'; tooltip.style.padding = '1rem 2rem'; tooltip.textContent = 'Cloud resources optimized successfully!'; document.body.appendChild(tooltip); setTimeout(() => { tooltip.style.opacity = '0'; setTimeout(() => { document.body.removeChild(tooltip); }, 500); }, 2000); } }, 30); }); // Reset simulation resetBtn.addEventListener('click', function() { // Reset to initial values computeSlider.value = 30; storageSlider.value = 65; networkSlider.value = 85; computeValue.textContent = '30%'; storageValue.textContent = '65%'; networkValue.textContent = '85%'; updateCloudFill(computeCloud, 30); updateCloudFill(storageCloud, 65); updateCloudFill(networkCloud, 85); createParticles(5); // Burst of particles on reset }); // Create floating particles function createParticle() { const particlesContainer = document.getElementById('particles'); const particle = document.createElement('div'); particle.className = 'particle'; // Random position const x = Math.random() * window.innerWidth; const y = Math.random() * window.innerHeight; // Random size const size = Math.random() * 5 + 2; // Set particle properties particle.style.width = `${size}px`; particle.style.height = `${size}px`; particle.style.left = `${x}px`; particle.style.top = `${y}px`; particle.style.opacity = Math.random() * 0.6 + 0.2; // Add to container particlesContainer.appendChild(particle); // Animate upward const speed = Math.random() * 3 + 1; const angle = Math.random() * Math.PI * 2; let posX = x; let posY = y; const animate = () => { posY -= speed; posX += Math.sin(angle) * 0.5; if (posY < -size) { particlesContainer.removeChild(particle); return; } particle.style.top = `${posY}px`; particle.style.left = `${posX}px`; requestAnimationFrame(animate); }; animate(); } function createParticles(count = 1) { for (let i = 0; i < count; i++) { setTimeout(createParticle, i * 200); } } // Start background particles setInterval(() => { createParticles(1); }, 2000); // Initial particle burst createParticles(5); // Make cards interactive document.querySelectorAll('.cloud-card').forEach(card => { card.addEventListener('click', function() { // Pulse effect on click this.style.transform = 'scale(1.05)'; setTimeout(() => { this.style.transform = ''; }, 200); // Show detailed metrics const load = parseInt(this.dataset.load); createParticles(Math.ceil(load / 20)); // More particles for higher loads }); }); // Initialize with default values updateCloudFill(computeCloud, 30); updateCloudFill(storageCloud, 65); updateCloudFill(networkCloud, 85); </script> </body> </html>
<html> <head> <title>CloudFluidSaaS - Scale with Confidence</title> <style> :root { --primary: #2d5bff; --primary-light: #4f75ff; --secondary: #00b8d4; --dark: #2c3e50; --light: #f8fafc; --accent: #ff6b6b; --gradient-start: rgba(45, 91, 255, 0.8); --gradient-end: rgba(0, 184, 212, 0.7); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; } body { background-color: var(--light); color: var(--dark); overflow-x: hidden; height: 100%; width: 100%; } .container { max-width: 700px; height: 700px; margin: 0 auto; padding: 0; position: relative; overflow: hidden; } .cloud-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; } .cloud { position: absolute; background: rgba(255, 255, 255, 0.7); border-radius: 50%; filter: blur(20px); opacity: 0.6; transition: all 0.5s ease; } .header { padding: 2rem 2rem 0; display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 2; } .logo { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.5rem; color: var(--primary); } .logo-icon { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); border-radius: 12px; color: white; } .nav { display: flex; gap: 1.5rem; } .nav-item { cursor: pointer; position: relative; font-weight: 500; transition: color 0.3s ease; } .nav-item:hover { color: var(--primary); } .nav-item::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background-color: var(--primary); transition: width 0.3s ease; } .nav-item:hover::after { width: 100%; } .hero { padding: 2rem; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; z-index: 2; margin-top: 2rem; } .hero h1 { font-size: 2.75rem; font-weight: 800; margin-bottom: 1.5rem; background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.2; } .hero p { font-size: 1.15rem; color: var(--dark); max-width: 600px; margin-bottom: 2rem; line-height: 1.6; } .cta-buttons { display: flex; gap: 1rem; margin-bottom: 3rem; } .btn { padding: 0.85rem 1.75rem; border-radius: 30px; font-weight: 600; font-size: 1rem; cursor: pointer; transition: all 0.3s ease; border: none; outline: none; position: relative; overflow: hidden; } .btn-primary { background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%); color: white; box-shadow: 0 4px 15px rgba(45, 91, 255, 0.3); } .btn-primary:hover { box-shadow: 0 6px 20px rgba(45, 91, 255, 0.4); transform: translateY(-2px); } .btn-primary::after { content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; background: rgba(255, 255, 255, 0.5); opacity: 0; border-radius: 100%; transform: scale(1, 1) translate(-50%); transform-origin: 50% 50%; } .btn-primary:hover::after { animation: ripple 1s ease-out; } @keyframes ripple { 0% { transform: scale(0, 0); opacity: 0.5; } 100% { transform: scale(20, 20); opacity: 0; } } .btn-secondary { background: transparent; color: var(--primary); border: 2px solid var(--primary); } .btn-secondary:hover { background: rgba(45, 91, 255, 0.1); transform: translateY(-2px); } .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; padding: 0 2rem; position: relative; z-index: 2; } .feature-card { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); border-radius: 16px; padding: 1.5rem; transition: all 0.3s ease; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); cursor: pointer; } .feature-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); border: 1px solid rgba(45, 91, 255, 0.2); } .feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: linear-gradient(135deg, var(--primary-light) 0%, var(--secondary) 100%); border-radius: 12px; margin-bottom: 1rem; color: white; font-size: 1.25rem; } .feature-card h3 { font-size: 1.1rem; margin-bottom: 0.75rem; font-weight: 600; } .feature-card p { font-size: 0.9rem; color: var(--dark); opacity: 0.85; line-height: 1.5; } .data-indicator { position: absolute; width: 8px; height: 8px; background-color: var(--accent); border-radius: 50%; filter: blur(1px); box-shadow: 0 0 10px var(--accent); z-index: 1; opacity: 0; } .floating-ui-element { position: absolute; bottom: 2rem; right: 2rem; background: rgba(255, 255, 255, 0.95); border-radius: 16px; padding: 1rem; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); z-index: 10; display: flex; align-items: center; gap: 1rem; cursor: pointer; transition: all 0.3s ease; } .floating-ui-element:hover { transform: translateY(-5px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15); } .status-dot { width: 10px; height: 10px; background-color: #24d05a; border-radius: 50%; box-shadow: 0 0 10px #24d05a; animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(36, 208, 90, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(36, 208, 90, 0); } 100% { box-shadow: 0 0 0 0 rgba(36, 208, 90, 0); } } .status-text { font-size: 0.9rem; font-weight: 500; } @media (max-width: 700px) { .features { grid-template-columns: 1fr; } .nav { display: none; } .hero h1 { font-size: 2.25rem; } .hero p { font-size: 1rem; } .cta-buttons { flex-direction: column; } } @media (max-width: 400px) { .header { padding: 1.5rem 1.5rem 0; } .hero { padding: 1.5rem; } .features { padding: 0 1.5rem; } .logo { font-size: 1.25rem; } .hero h1 { font-size: 2rem; } } </style> </head> <body> <div class="container"> <div class="cloud-background" id="cloudBackground"></div> <header class="header"> <div class="logo"> <div class="logo-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"></path> </svg> </div> <span>CloudFluidity</span> </div> <nav class="nav"> <div class="nav-item">Solutions</div> <div class="nav-item">Pricing</div> <div class="nav-item">Resources</div> <div class="nav-item">Login</div> </nav> </header> <section class="hero"> <h1>Your Data Flows<br>Where Business Grows</h1> <p>Scale instantly with our intelligent cloud infrastructure that adapts to your business needs while you focus on innovation.</p> <div class="cta-buttons"> <button class="btn btn-primary">Start Free Trial</button> <button class="btn btn-secondary">Watch Demo</button> </div> </section> <section class="features"> <div class="feature-card"> <div class="feature-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M8 3v3a2 2 0 0 1-2 2H3"></path> <path d="M21 8h-3a2 2 0 0 1-2-2V3"></path> <path d="M3 16h3a2 2 0 0 1 2 2v3"></path> <path d="M16 21v-3a2 2 0 0 1 2-2h3"></path> </svg> </div> <h3>Auto-Scaling</h3> <p>Dynamically adjusts resources to match real-time demands, saving 43% on infrastructure costs.</p> </div> <div class="feature-card"> <div class="feature-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <polyline points="12 6 12 12 16 14"></polyline> </svg> </div> <h3>99.99% Uptime</h3> <p>Enterprise-grade reliability with multi-zone redundancy and automated failover systems.</p> </div> <div class="feature-card"> <div class="feature-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect> <path d="M7 11V7a5 5 0 0 1 10 0v4"></path> </svg> </div> <h3>Data Fluidity</h3> <p>Seamless migrations across environments with zero downtime and full encryption.</p> </div> </section> <div class="floating-ui-element"> <div class="status-dot"></div> <div class="status-text">All systems operational</div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const cloudBackground = document.getElementById('cloudBackground'); // Create clouds for (let i = 0; i < 15; i++) { createCloud(); } function createCloud() { const cloud = document.createElement('div'); cloud.classList.add('cloud'); // Randomize size, position, and opacity const size = Math.random() * 150 + 100; const posX = Math.random() * 120 - 10; // percentage const posY = Math.random() * 120 - 10; // percentage const opacity = Math.random() * 0.4 + 0.2; cloud.style.width = `${size}px`; cloud.style.height = `${size}px`; cloud.style.left = `${posX}%`; cloud.style.top = `${posY}%`; cloud.style.opacity = opacity; // Add random movement animation const duration = Math.random() * 60 + 60; // between 60-120 seconds const direction = Math.random() > 0.5 ? 1 : -1; cloud.style.animation = `moveCloud ${duration}s linear infinite`; // Create the keyframe animation dynamically const moveDistance = Math.random() * 15 + 5; const animationName = `moveCloud${i}`; const styleSheet = document.styleSheets[0]; const animationRule = ` @keyframes ${animationName} { 0% { transform: translate(0, 0); } 50% { transform: translate(${direction * moveDistance}px, ${moveDistance}px); } 100% { transform: translate(0, 0); } } `; styleSheet.insertRule(animationRule, styleSheet.cssRules.length); cloud.style.animation = `${animationName} ${duration}s ease-in-out infinite`; cloudBackground.appendChild(cloud); } // Create data flow indicators setInterval(createDataIndicator, 2000); function createDataIndicator() { const indicator = document.createElement('div'); indicator.classList.add('data-indicator'); // Set random starting position const startX = Math.random() * 100; const startY = Math.random() * 100; // Set random end position const endX = Math.random() * 100; const endY = Math.random() * 100; indicator.style.left = `${startX}%`; indicator.style.top = `${startY}%`; document.querySelector('.container').appendChild(indicator); // Animate the indicator setTimeout(() => { indicator.style.opacity = '1'; indicator.style.transition = 'all 3s ease-in-out'; indicator.style.left = `${endX}%`; indicator.style.top = `${endY}%`; }, 100); // Remove indicator after animation setTimeout(() => { indicator.style.opacity = '0'; setTimeout(() => { indicator.remove(); }, 1000); }, 3000); } // Interactive Feature Cards const featureCards = document.querySelectorAll('.feature-card'); featureCards.forEach(card => { card.addEventListener('mouseenter', () => { // Create a subtle ripple effect const ripple = document.createElement('div'); ripple.style.position = 'absolute'; ripple.style.width = '5px'; ripple.style.height = '5px'; ripple.style.borderRadius = '50%'; ripple.style.backgroundColor = 'rgba(45, 91, 255, 0.3)'; ripple.style.transform = 'scale(1)'; ripple.style.transition = 'all 0.6s ease-out'; const rect = card.getBoundingClientRect(); ripple.style.left = `${rect.width / 2}px`; ripple.style.top = `${rect.height / 2}px`; card.style.overflow = 'hidden'; card.style.position = 'relative'; card.appendChild(ripple); setTimeout(() => { ripple.style.transform = 'scale(50)'; ripple.style.opacity = '0'; }, 10); setTimeout(() => { ripple.remove(); }, 600); }); }); // Button interaction const buttons = document.querySelectorAll('.btn'); buttons.forEach(button => { button.addEventListener('mousedown', function() { this.style.transform = 'scale(0.98)'; }); button.addEventListener('mouseup', function() { this.style.transform = ''; }); button.addEventListener('mouseleave', function() { this.style.transform = ''; }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Wanderlift | Elevate Your Travel</title> <style> :root { --primary: #3a86ff; --secondary: #ff006e; --light: #f8f9fa; --dark: #212529; --accent: #8338ec; --cloud-light: #f0f4ff; --cloud-dark: #d8e2ff; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; } @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@400;700&display=swap'); body { background: linear-gradient(135deg, #f5f7fa, #e4e8f0); color: var(--dark); height: 100vh; overflow-x: hidden; position: relative; } .container { max-width: 700px; height: 700px; margin: 0 auto; padding: 0; overflow-y: auto; overflow-x: hidden; position: relative; scroll-behavior: smooth; } header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 1rem; background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); display: flex; justify-content: space-between; align-items: center; max-width: 700px; margin: 0 auto; } .logo { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.8rem; color: var(--primary); text-decoration: none; position: relative; display: flex; align-items: center; } .logo::before { content: ''; position: absolute; width: 0; height: 2px; bottom: 0; left: 0; background-color: var(--secondary); transition: width 0.3s ease; } .logo:hover::before { width: 100%; } .logo .icon { margin-right: 8px; font-size: 1.5rem; } nav ul { display: flex; list-style: none; gap: 1.5rem; } nav a { text-decoration: none; color: var(--dark); font-weight: 500; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; position: relative; padding: 0.3rem 0; transition: color 0.3s ease; } nav a::after { content: ''; position: absolute; width: 0; height: 2px; bottom: 0; left: 0; background-color: var(--accent); transition: width 0.3s ease; } nav a:hover { color: var(--accent); } nav a:hover::after { width: 100%; } .hero { height: 70vh; display: flex; align-items: center; position: relative; margin-top: 4rem; overflow: hidden; } .hero-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; opacity: 0.9; transition: transform 8s ease; } .hero:hover .hero-image { transform: scale(1.1); } .hero-content { padding: 2rem; max-width: 600px; color: white; position: relative; z-index: 1; backdrop-filter: blur(3px); background: rgba(0, 0, 0, 0.2); border-radius: 20px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); text-align: center; margin: 0 auto; } .hero-content h1 { font-family: 'Playfair Display', serif; font-size: 3rem; margin-bottom: 1rem; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); } .hero-content p { font-size: 1.1rem; margin-bottom: 2rem; line-height: 1.6; } .search-bar { position: relative; margin: 0 auto; max-width: 90%; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .search-input { flex: 1; min-width: 200px; padding: 1rem; border: none; border-radius: 50px; font-size: 1rem; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(5px); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } .search-input:focus { outline: none; box-shadow: 0 0 0 2px var(--primary); background: white; } .search-btn { padding: 1rem 2rem; border: none; border-radius: 50px; background: linear-gradient(45deg, var(--primary), var(--accent)); color: white; font-weight: 600; cursor: pointer; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); transition: all 0.3s ease; display: flex; align-items: center; gap: 8px; } .search-btn:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); } .search-btn:active { transform: translateY(1px); } .clouds-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: 0; } .cloud { position: absolute; background: rgba(255, 255, 255, 0.8); border-radius: 50%; filter: blur(20px); opacity: 0.6; animation: float linear infinite; } @keyframes float { 0% { transform: translateX(-100%); } 100% { transform: translateX(calc(100vw + 100%)); } } .destinations { padding: 3rem 1.5rem; position: relative; z-index: 1; } .section-title { text-align: center; margin-bottom: 2.5rem; font-family: 'Playfair Display', serif; position: relative; display: inline-block; padding-bottom: 15px; color: var(--dark); font-size: 2.2rem; } .section-title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 80px; height: 3px; background: linear-gradient(to right, var(--primary), var(--accent)); border-radius: 2px; } .destination-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.5rem; margin-top: 2rem; } .destination-card { background: white; border-radius: 15px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; position: relative; cursor: pointer; } .destination-card:hover { transform: translateY(-10px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2); } .destination-card img { width: 100%; height: 180px; object-fit: cover; transition: transform 0.5s ease; } .destination-card:hover img { transform: scale(1.1); } .card-content { padding: 1.2rem; position: relative; } .card-title { font-size: 1.3rem; margin-bottom: 0.5rem; font-weight: 600; color: var(--dark); } .card-description { font-size: 0.9rem; color: #6c757d; margin-bottom: 1rem; line-height: 1.5; } .card-meta { display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; color: var(--dark); } .card-price { font-weight: 700; color: var(--primary); } .card-rating { display: flex; align-items: center; gap: 5px; } .star { color: gold; } .explore-btn { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%) translateY(50%); opacity: 0; padding: 0.7rem 1.5rem; background: linear-gradient(45deg, var(--secondary), var(--accent)); border: none; border-radius: 25px; color: white; font-weight: 600; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); cursor: pointer; } .destination-card:hover .explore-btn { opacity: 1; bottom: 10px; } .explore-btn:hover { transform: translateX(-50%) translateY(50%) scale(1.05); } .category-tabs { display: flex; justify-content: center; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; } .category-tab { padding: 0.7rem 1.5rem; background: white; border: 2px solid transparent; border-radius: 30px; font-weight: 600; color: var(--dark); cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); } .category-tab.active { background: linear-gradient(45deg, var(--primary), var(--accent)); color: white; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); } .category-tab:hover:not(.active) { border-color: var(--primary); transform: translateY(-3px); } .inspiration { padding: 4rem 1.5rem; background: linear-gradient(135deg, var(--cloud-light), var(--cloud-dark)); position: relative; overflow: hidden; } .inspiration-cloud { position: absolute; background: white; border-radius: 50%; filter: blur(50px); opacity: 0.5; z-index: 0; } .testimonials { margin-top: 3rem; position: relative; z-index: 1; } .testimonial-slider { position: relative; max-width: 600px; margin: 0 auto; } .testimonial { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); border-radius: 15px; padding: 2rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); text-align: center; margin: 0 auto; max-width: 500px; opacity: 0; position: absolute; top: 0; left: 0; right: 0; transform: translateY(20px); transition: all 0.5s ease; } .testimonial.active { opacity: 1; position: relative; transform: translateY(0); } .testimonial-image { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin: 0 auto 1rem; border: 4px solid white; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .testimonial-text { font-size: 1rem; line-height: 1.7; color: var(--dark); margin-bottom: 1.5rem; font-style: italic; } .testimonial-author { font-weight: 700; color: var(--primary); margin-bottom: 0.3rem; } .testimonial-location { font-size: 0.9rem; color: #6c757d; } .slider-nav { display: flex; justify-content: center; gap: 1rem; margin-top: 2rem; } .slider-dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); cursor: pointer; transition: all 0.3s ease; } .slider-dot.active { background: var(--primary); transform: scale(1.3); } .cta-section { padding: 4rem 1.5rem; text-align: center; position: relative; overflow: hidden; background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1494783367193-149034c05e8f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80'); background-size: cover; background-position: center; background-attachment: fixed; color: white; } .cta-content { position: relative; z-index: 1; max-width: 600px; margin: 0 auto; } .cta-title { font-family: 'Playfair Display', serif; font-size: 2.5rem; margin-bottom: 1.5rem; } .cta-text { font-size: 1.1rem; margin-bottom: 2rem; line-height: 1.7; } .cta-btn { padding: 1rem 2.5rem; background: linear-gradient(45deg, var(--secondary), var(--accent)); border: none; border-radius: 50px; color: white; font-weight: 700; font-size: 1.1rem; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); display: inline-block; } .cta-btn:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4); } footer { background: var(--dark); color: white; padding: 3rem 1.5rem; text-align: center; } .footer-logo { font-family: 'Playfair Display', serif; font-size: 2rem; margin-bottom: 1.5rem; color: white; } .footer-text { max-width: 500px; margin: 0 auto 2rem; line-height: 1.6; color: rgba(255, 255, 255, 0.7); font-size: 0.9rem; } .social-links { display: flex; justify-content: center; gap: 1.5rem; margin-bottom: 2rem; } .social-link { color: white; font-size: 1.5rem; transition: all 0.3s ease; } .social-link:hover { color: var(--primary); transform: translateY(-5px); } .newsletter { max-width: 400px; margin: 0 auto; position: relative; } .newsletter-input { width: 100%; padding: 1rem 1.5rem; border: none; border-radius: 50px; background: rgba(255, 255, 255, 0.1); color: white; font-size: 1rem; transition: all 0.3s ease; } .newsletter-input::placeholder { color: rgba(255, 255, 255, 0.5); } .newsletter-input:focus { outline: none; background: rgba(255, 255, 255, 0.2); } .newsletter-btn { position: absolute; right: 5px; top: 5px; bottom: 5px; padding: 0 1.5rem; background: linear-gradient(45deg, var(--primary), var(--accent)); border: none; border-radius: 50px; color: white; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .newsletter-btn:hover { filter: brightness(1.1); } .copyright { margin-top: 2rem; font-size: 0.8rem; color: rgba(255, 255, 255, 0.5); } /* Floating dream indicators */ .dream-indicator { position: absolute; width: 100px; height: 100px; background: url('https://images.unsplash.com/photo-1488646953014-85cb44e25828?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80'); background-size: cover; border-radius: 50%; opacity: 0.7; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); cursor: pointer; transition: all 0.3s ease; animation: dreamFloat 10s infinite alternate ease-in-out; z-index: 0; } .dream-indicator:hover { transform: scale(1.1); opacity: 1; } @keyframes dreamFloat { 0% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(30px, -20px) rotate(10deg); } 100% { transform: translate(-20px, 30px) rotate(-10deg); } } /* Responsive Styles */ @media (max-width: 768px) { .hero-content h1 { font-size: 2.2rem; } .hero-content p { font-size: 1rem; } .section-title { font-size: 1.8rem; } .cta-title { font-size: 2rem; } .destination-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } nav ul { gap: 1rem; } } @media (max-width: 576px) { .hero-content h1 { font-size: 1.8rem; } .section-title { font-size: 1.5rem; } .category-tabs { gap: 0.5rem; } .category-tab { padding: 0.5rem 1rem; font-size: 0.9rem; } .destination-grid { grid-template-columns: 1fr; } nav ul { gap: 0.7rem; } nav a { font-size: 0.8rem; } .logo { font-size: 1.5rem; } } </style> </head> <body> <div class="container"> <header> <a href="#" class="logo"> <span class="icon">✈️</span>Wanderlift </a> <nav> <ul> <li><a href="#destinations">Destinations</a></li> <li><a href="#inspiration">Inspiration</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> </header> <section class="hero"> <img src="https://images.unsplash.com/photo-1513635269975-59663e0ac1ad?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Beautiful sky view with clouds" class="hero-image"> <div class="clouds-container" id="clouds"></div> <div class="hero-content"> <h1>Journey Beyond the Clouds</h1> <p>Discover destinations that transform your perception and elevate your travel experience beyond the everyday.</p> <div class="search-bar"> <input type="text" class="search-input" placeholder="Where would you like to escape to?"> <button class="search-btn"> <span>Explore</span> <span>🔍</span> </button> </div> </div> </section> <section class="destinations" id="destinations"> <h2 class="section-title">Dreamy Destinations</h2> <div class="category-tabs"> <div class="category-tab active">All</div> <div class="category-tab">Mountains</div> <div class="category-tab">Beaches</div> <div class="category-tab">Cities</div> <div class="category-tab">Countryside</div> </div> <div class="destination-grid"> <div class="destination-card"> <img src="https://images.unsplash.com/photo-1520483601560-389dff434fdf?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Santorini, Greece"> <div class="card-content"> <h3 class="card-title">Santorini, Greece</h3> <p class="card-description">White-washed buildings against azure skies and deep blue waters create a dreamscape unlike any other.</p> <div class="card-meta"> <div class="card-price">From $899</div> <div class="card-rating"> <span class="star">★</span> <span>4.9</span> </div> </div> <button class="explore-btn">View Journey</button> </div> </div> <div class="destination-card"> <img src="https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Kyoto, Japan"> <div class="card-content"> <h3 class="card-title">Kyoto, Japan</h3> <p class="card-description">Discover ancient temples nestled among misty mountains and vibrant autumn foliage.</p> <div class="card-meta"> <div class="card-price">From $1,199</div> <div class="card-rating"> <span class="star">★</span> <span>4.8</span> </div> </div> <button class="explore-btn">View Journey</button> </div> </div> <div class="destination-card"> <img src="https://images.unsplash.com/photo-1505761671935-60b3a7427bad?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Bali, Indonesia"> <div class="card-content"> <h3 class="card-title">Bali, Indonesia</h3> <p class="card-description">Lush terraced rice fields, spiritual temples, and warm ocean waters create a paradise escape.</p> <div class="card-meta"> <div class="card-price">From $749</div> <div class="card-rating"> <span class="star">★</span> <span>4.7</span> </div> </div> <button class="explore-btn">View Journey</button> </div> </div> <div class="destination-card"> <img src="https://images.unsplash.com/photo-1568797629192-970fd63000fa?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Swiss Alps"> <div class="card-content"> <h3 class="card-title">Swiss Alps</h3> <p class="card-description">Soar above cloud-capped mountains and experience pure serenity in this alpine wonderland.</p> <div class="card-meta"> <div class="card-price">From $1,049</div> <div class="card-rating"> <span class="star">★</span> <span>4.9</span> </div> </div> <button class="explore-btn">View Journey</button> </div> </div> </div> </section> <section class="inspiration" id="inspiration"> <div class="inspiration-cloud" style="width: 400px; height: 400px; top: -100px; left: -150px;"></div> <div class="inspiration-cloud" style="width: 300px; height: 300px; bottom: -50px; right: -100px;"></div> <h2 class="section-title">Travel Inspirations</h2> <div class="testimonials"> <div class="testimonial-slider"> <div class="testimonial active" data-index="0"> <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="Sarah J." class="testimonial-image"> <p class="testimonial-text">"There's something magical about floating above the clouds in a hot air balloon over Cappadocia. Time slows down, and you realize how vast and beautiful our world truly is. That moment changed my perspective forever."</p> <h4 class="testimonial-author">Sarah J.</h4> <p class="testimonial-location">Cappadocia, Turkey</p> </div> <div class="testimonial" data-index="1"> <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="Michael T." class="testimonial-image"> <p class="testimonial-text">"Watching the Northern Lights dance across the Icelandic sky was like witnessing nature's most spectacular light show. It reminds you that there are experiences in this world worth traveling thousands of miles for."</p> <h4 class="testimonial-author">Michael T.</h4> <p class="testimonial-location">Reykjavik, Iceland</p> </div> <div class="testimonial" data-index="2"> <img src="https://images.unsplash.com/photo-1554151228-14d9def656e4?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="Elena R." class="testimonial-image"> <p class="testimonial-text">"Hiking through the misty mountains of Machu Picchu at sunrise, I felt like I was walking through clouds. The ancient stones beneath my feet and the vast sky above connected me to something greater than myself."</p> <h4 class="testimonial-author">Elena R.</h4> <p class="testimonial-location">Machu Picchu, Peru</p> </div> </div> <div class="slider-nav"> <div class="slider-dot active" data-index="0"></div> <div class="slider-dot" data-index="1"></div> <div class="slider-dot" data-index="2"></div> </div> </div> </section> <section class="cta-section" id="contact"> <div class="cta-content"> <h2 class="cta-title">Your Journey Awaits Above the Clouds</h2> <p class="cta-text">Let us help you discover destinations that will elevate your travel experience. Subscribe to receive personalized journey recommendations tailored to your dream escape.</p> <button class="cta-btn">Start Your Journey</button> </div> </section> <footer> <div class="footer-logo">Wanderlift</div> <p class="footer-text">We curate extraordinary travel experiences that transport you beyond the mundane into realms of wonder, serenity, and discovery.</p> <div class="social-links"> <a href="#" class="social-link">📱</a> <a href="#" class="social-link">💬</a> <a href="#" class="social-link">📸</a> <a href="#" class="social-link">🐦</a> </div> <div class="newsletter"> <input type="email" class="newsletter-input" placeholder="Your email for cloud-high inspiration"> <button class="newsletter-btn">Subscribe</button> </div> <p class="copyright">© 2023 Wanderlift. Elevating travel experiences worldwide.</p> </footer> <!-- Floating dream indicators --> <div class="dream-indicator" style="top: 20%; left: 10%;"></div> <div class="dream-indicator" style="top: 70%; right: 15%;"></div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Cloud generation const cloudsContainer = document.getElementById('clouds'); const cloudCount = 10; for (let i = 0; i < cloudCount; i++) { createCloud(); } function createCloud() { const cloud = document.createElement('div'); cloud.classList.add('cloud'); // Random size const size = Math.random() * 200 + 100; cloud.style.width = `${size}px`; cloud.style.height = `${size / 2}px`; // Random position cloud.style.top = `${Math.random() * 100}%`; // Random speed (animation duration) const duration = Math.random() * 60 + 30; cloud.style.animationDuration = `${duration}s`; // Random delay const delay = Math.random() * 20; cloud.style.animationDelay = `${delay}s`; cloudsContainer.appendChild(cloud); } // Testimonial slider const testimonials = document.querySelectorAll('.testimonial'); const dots = document.querySelectorAll('.slider-dot'); let currentTestimonial = 0; let interval; function showTestimonial(index) { testimonials.forEach(testimonial => { testimonial.classList.remove('active'); }); dots.forEach(dot => { dot.classList.remove('active'); }); testimonials[index].classList.add('active'); dots[index].classList.add('active'); currentTestimonial = index; } function nextTestimonial() { let next = currentTestimonial + 1; if (next >= testimonials.length) { next = 0; } showTestimonial(next); } // Auto-advance testimonials function startSliderInterval() { interval = setInterval(nextTestimonial, 5000); } startSliderInterval(); // Click on dots to change testimonial dots.forEach(dot => { dot.addEventListener('click', function() { const index = parseInt(this.getAttribute('data-index')); showTestimonial(index); clearInterval(interval); startSliderInterval(); }); }); // Category tabs const categoryTabs = document.querySelectorAll('.category-tab'); categoryTabs.forEach(tab => { tab.addEventListener('click', function() { categoryTabs.forEach(t => t.classList.remove('active')); this.classList.add('active'); }); }); // Smooth scroll for navigation document.querySelectorAll('nav a').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { target.scrollIntoView({ behavior: 'smooth' }); } }); }); // Form submission prevention document.querySelectorAll('button').forEach(button => { button.addEventListener('click', function(e) { e.preventDefault(); }); }); document.querySelectorAll('input').forEach(input => { input.addEventListener('keypress', function(e) { if (e.key === 'Enter') { e.preventDefault(); } }); }); // Interactive dream indicators const dreamIndicators = document.querySelectorAll('.dream-indicator'); dreamIndicators.forEach(indicator => { indicator.addEventListener('click', function() { this.style.transform = 'scale(1.2)'; setTimeout(() => { this.style.transform = 'scale(1)'; }, 300); }); }); // Parallax effect for hero window.addEventListener('scroll', function() { const scrollY = window.scrollY; const hero = document.querySelector('.hero-image'); if (hero) { hero.style.transform = `translateY(${scrollY * 0.3}px)`; } }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Cloud Friends Adventure</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Comic Sans MS', cursive, sans-serif; } body { width: 100%; height: 100vh; background: linear-gradient(180deg, #75c9f0 0%, #b5e6ff 100%); overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 20px; } .game-container { position: relative; width: 100%; max-width: 650px; height: 550px; border-radius: 20px; background: linear-gradient(180deg, #94d6f8 0%, #ceeaff 100%); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); overflow: hidden; } .sky { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .cloud { position: absolute; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); cursor: pointer; filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.1)); will-change: transform; } .cloud-body { width: 120px; height: 60px; background-color: white; border-radius: 30px; position: relative; } .cloud-face { position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2; } .cloud-eyes { display: flex; gap: 20px; margin-bottom: 5px; } .cloud-eye { width: 12px; height: 12px; background-color: #333; border-radius: 50%; position: relative; overflow: hidden; } .cloud-eye::after { content: ''; position: absolute; width: 4px; height: 4px; background-color: white; border-radius: 50%; top: 2px; left: 2px; } .cloud-mouth { width: 20px; height: 10px; border-bottom: 3px solid #333; border-radius: 0 0 10px 10px; transition: all 0.3s; } .cloud-puff { position: absolute; background-color: white; border-radius: 50%; } .cloud-puff-1 { width: 50px; height: 50px; top: -20px; left: 15px; } .cloud-puff-2 { width: 60px; height: 60px; top: -25px; left: 55px; } .cloud-puff-3 { width: 40px; height: 40px; top: -15px; left: 90px; } .cloud-puff-4 { width: 45px; height: 45px; top: 5px; left: -15px; } .cloud-puff-5 { width: 55px; height: 55px; top: 5px; left: 100px; } .happy .cloud-mouth { height: 15px; width: 25px; border-radius: 0 0 15px 15px; } .rain { position: absolute; width: 100%; height: 40px; bottom: -50px; display: flex; justify-content: space-around; opacity: 0; transition: opacity 0.3s; } .rain.active { opacity: 1; } .raindrop { width: 3px; height: 20px; background: linear-gradient(to bottom, #75c9f0, #4a90e2); border-radius: 3px; animation: falling 1s infinite linear; } @keyframes falling { 0% { transform: translateY(-20px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(60px); opacity: 0; } } .sun { position: absolute; top: 40px; right: 40px; width: 80px; height: 80px; background: radial-gradient(circle, #ffef5e 30%, #ffd700 70%); border-radius: 50%; box-shadow: 0 0 40px #ffef5e; display: flex; align-items: center; justify-content: center; z-index: 1; animation: pulse 4s infinite alternate; cursor: pointer; } .sun-face { width: 60%; height: 60%; display: flex; flex-direction: column; align-items: center; justify-content: center; } .sun-eyes { display: flex; gap: 10px; } .sun-eye { width: 8px; height: 8px; background-color: #333; border-radius: 50%; } .sun-mouth { margin-top: 5px; width: 15px; height: 8px; border-bottom: 2px solid #333; border-radius: 0 0 8px 8px; } @keyframes pulse { 0% { transform: scale(1); } 100% { transform: scale(1.1); } } .ray { position: absolute; width: 3px; height: 30px; background-color: #ffef5e; transform-origin: center bottom; animation: rayShine 3s infinite alternate; } @keyframes rayShine { 0% { opacity: 0.5; height: 20px; } 100% { opacity: 1; height: 30px; } } .ground { position: absolute; bottom: 0; width: 100%; height: 100px; background: linear-gradient(to bottom, #8acb88, #57a957); z-index: 1; border-top-left-radius: 50% 30px; border-top-right-radius: 50% 30px; } .flower { position: absolute; bottom: 90px; width: 20px; height: 60px; z-index: 2; } .flower-stem { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 4px; height: 40px; background-color: #57a957; } .flower-head { position: absolute; top: 0; left: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; } .flower-petal { position: absolute; width: 12px; height: 12px; background-color: #ff80ab; border-radius: 50%; transform-origin: center; transition: transform 0.5s; } .flower-center { width: 10px; height: 10px; background-color: #ffeb3b; border-radius: 50%; z-index: 3; } #score-display { margin-top: 20px; font-size: 24px; color: #fff; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.2); padding: 10px 20px; border-radius: 20px; } .help-button { position: absolute; top: 20px; left: 20px; width: 40px; height: 40px; background-color: #75c9f0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: bold; color: white; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); cursor: pointer; z-index: 10; border: 2px solid white; } .tutorial { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; padding: 20px; background-color: white; border-radius: 20px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2); z-index: 11; display: none; text-align: center; } .tutorial h2 { color: #4a90e2; margin-bottom: 15px; } .tutorial p { margin-bottom: 10px; color: #666; } .tutorial button { background-color: #75c9f0; border: none; color: white; padding: 10px 20px; border-radius: 20px; margin-top: 15px; cursor: pointer; font-weight: bold; } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 10; display: none; } .rainbow { position: absolute; width: 300px; height: 150px; bottom: 90px; left: 50%; transform: translateX(-50%); border-radius: 150px 150px 0 0; overflow: hidden; opacity: 0; z-index: 2; transition: opacity 1s; } .rainbow-layer { position: absolute; bottom: 0; left: 0; width: 100%; border-radius: 150px 150px 0 0; } .bounce { animation: bounce 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); } @keyframes bounce { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } .title { color: white; font-size: 28px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); margin-bottom: 10px; text-align: center; } </style> </head> <body> <h1 class="title">Cloud Friends Adventure</h1> <div class="game-container"> <div class="sky" id="sky"></div> <div class="sun" id="sun"> <div class="sun-face"> <div class="sun-eyes"> <div class="sun-eye"></div> <div class="sun-eye"></div> </div> <div class="sun-mouth"></div> </div> </div> <div class="rainbow" id="rainbow"></div> <div class="ground"></div> <div class="help-button" id="help-button">?</div> <div class="overlay" id="overlay"></div> <div class="tutorial" id="tutorial"> <h2>Cloud Friends Adventure</h2> <p>Click on the clouds to make them happy and sprinkle rain!</p> <p>Make the flowers grow by raining on them.</p> <p>Click the sun to create a beautiful rainbow!</p> <p>Can you grow all the flowers and find all the hidden surprises?</p> <button id="tutorial-close">Let's Play!</button> </div> </div> <div id="score-display">Happy Clouds: 0</div> <script> document.addEventListener('DOMContentLoaded', function() { const sky = document.getElementById('sky'); const rainbowEl = document.getElementById('rainbow'); const sunEl = document.getElementById('sun'); const helpButton = document.getElementById('help-button'); const tutorial = document.getElementById('tutorial'); const tutorialClose = document.getElementById('tutorial-close'); const overlay = document.getElementById('overlay'); const scoreDisplay = document.getElementById('score-display'); let score = 0; let rainbowVisible = false; const cloudCount = 5; const flowerCount = 5; // Show tutorial initially showTutorial(); // Initialize rainbow initRainbow(); // Create clouds for (let i = 0; i < cloudCount; i++) { createCloud(i); } // Create flowers for (let i = 0; i < flowerCount; i++) { createFlower(i); } // Create sun rays for (let i = 0; i < 12; i++) { const ray = document.createElement('div'); ray.className = 'ray'; ray.style.transform = `rotate(${i * 30}deg)`; ray.style.left = '50%'; ray.style.top = '50%'; ray.style.animationDelay = `${i * 0.25}s`; sunEl.appendChild(ray); } // Add sun click event sunEl.addEventListener('click', function() { sunEl.classList.add('bounce'); setTimeout(() => sunEl.classList.remove('bounce'), 500); toggleRainbow(); }); // Help button helpButton.addEventListener('click', showTutorial); tutorialClose.addEventListener('click', hideTutorial); function showTutorial() { tutorial.style.display = 'block'; overlay.style.display = 'block'; } function hideTutorial() { tutorial.style.display = 'none'; overlay.style.display = 'none'; } function initRainbow() { const colors = [ '#FF0000', // Red '#FF7F00', // Orange '#FFFF00', // Yellow '#00FF00', // Green '#0000FF', // Blue '#4B0082', // Indigo '#9400D3' // Violet ]; colors.forEach((color, index) => { const layer = document.createElement('div'); layer.className = 'rainbow-layer'; layer.style.height = `${(index + 1) * (150 / colors.length)}px`; layer.style.backgroundColor = color; rainbowEl.appendChild(layer); }); } function toggleRainbow() { rainbowVisible = !rainbowVisible; rainbowEl.style.opacity = rainbowVisible ? '0.7' : '0'; } function createCloud(index) { const cloud = document.createElement('div'); cloud.className = 'cloud'; cloud.id = `cloud-${index}`; // Position cloud randomly const top = 50 + Math.random() * 200; const left = 50 + Math.random() * (sky.offsetWidth - 200); cloud.style.top = `${top}px`; cloud.style.left = `${left}px`; // Create cloud structure const cloudBody = document.createElement('div'); cloudBody.className = 'cloud-body'; const cloudFace = document.createElement('div'); cloudFace.className = 'cloud-face'; const cloudEyes = document.createElement('div'); cloudEyes.className = 'cloud-eyes'; const cloudEye1 = document.createElement('div'); cloudEye1.className = 'cloud-eye'; const cloudEye2 = document.createElement('div'); cloudEye2.className = 'cloud-eye'; const cloudMouth = document.createElement('div'); cloudMouth.className = 'cloud-mouth'; // Create puffs for (let i = 1; i <= 5; i++) { const puff = document.createElement('div'); puff.className = `cloud-puff cloud-puff-${i}`; cloudBody.appendChild(puff); } // Add rain const rain = document.createElement('div'); rain.className = 'rain'; for (let i = 0; i < 6; i++) { const raindrop = document.createElement('div'); raindrop.className = 'raindrop'; raindrop.style.animationDelay = `${Math.random() * 0.5}s`; rain.appendChild(raindrop); } // Assemble cloud face cloudEyes.appendChild(cloudEye1); cloudEyes.appendChild(cloudEye2); cloudFace.appendChild(cloudEyes); cloudFace.appendChild(cloudMouth); // Assemble cloud cloudBody.appendChild(cloudFace); cloud.appendChild(cloudBody); cloud.appendChild(rain); // Add click behavior cloud.addEventListener('click', function() { if (!cloud.classList.contains('happy')) { cloud.classList.add('happy'); cloud.style.transform = 'scale(1.1)'; // Activate rain const rainEl = cloud.querySelector('.rain'); rainEl.classList.add('active'); score++; updateScore(); // Check for flowers under this cloud for watering const cloudRect = cloud.getBoundingClientRect(); const flowers = document.querySelectorAll('.flower'); flowers.forEach(flower => { const flowerRect = flower.getBoundingClientRect(); if (Math.abs((cloudRect.left + cloudRect.width/2) - (flowerRect.left + flowerRect.width/2)) < 60) { growFlower(flower); } }); // Reset after a while setTimeout(() => { cloud.classList.remove('happy'); cloud.style.transform = 'scale(1)'; rainEl.classList.remove('active'); }, 3000); } }); // Add cloud movement setInterval(() => { const newLeft = parseInt(cloud.style.left) + (Math.random() * 2 - 1); if (newLeft > 0 && newLeft < (sky.offsetWidth - 120)) { cloud.style.left = `${newLeft}px`; } }, 500); sky.appendChild(cloud); } function createFlower(index) { const flower = document.createElement('div'); flower.className = 'flower'; flower.id = `flower-${index}`; flower.dataset.growth = '0'; // Position flower const left = 50 + (index * 110); // Distribute evenly flower.style.left = `${left}px`; // Create flower structure const stem = document.createElement('div'); stem.className = 'flower-stem'; const head = document.createElement('div'); head.className = 'flower-head'; // Create petals for (let i = 0; i < 8; i++) { const petal = document.createElement('div'); petal.className = 'flower-petal'; petal.style.transform = `rotate(${i * 45}deg) translate(8px, 0)`; head.appendChild(petal); } const center = document.createElement('div'); center.className = 'flower-center'; head.appendChild(center); flower.appendChild(stem); flower.appendChild(head); // Start with small flowers head.style.transform = 'scale(0.2)'; stem.style.height = '10px'; document.querySelector('.ground').appendChild(flower); } function growFlower(flower) { let growth = parseInt(flower.dataset.growth) || 0; if (growth < 3) { growth++; flower.dataset.growth = growth; const head = flower.querySelector('.flower-head'); const stem = flower.querySelector('.flower-stem'); // Update flower visuals based on growth head.style.transform = `scale(${0.2 + (growth * 0.3)})`; stem.style.height = `${10 + (growth * 10)}px`; // Change color for variety if (growth === 3) { const petals = flower.querySelectorAll('.flower-petal'); const randomColor = getRandomFlowerColor(); petals.forEach(petal => { petal.style.backgroundColor = randomColor; }); // Add a little bounce animation head.style.animation = 'bounce 0.5s'; setTimeout(() => head.style.animation = '', 500); } } } function getRandomFlowerColor() { const colors = [ '#ff80ab', // Pink '#ff8a65', // Orange '#ffeb3b', // Yellow '#aed581', // Light green '#81d4fa', // Light blue '#b39ddb' // Purple ]; return colors[Math.floor(Math.random() * colors.length)]; } function updateScore() { scoreDisplay.textContent = `Happy Clouds: ${score}`; } }); </script> </body> </html>
