Blackbox AI
Di era modern sekarang ini, banyak tool AI yang bisa digunakan untuk memudahkan kita untuk pekerjaan dan tugas tugas tertentu. Disini kita akan mencoba menggunakan Blackbox AI untuk membuat halaman under constrution.
Akses halaman URL Blackbox AI. Di https://www.blackbox.ai/
Hasil dari AI
Source Code hasil AI
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Under Construction</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
/* Reset and base */
*, *::before, *::after {
box-sizing: border-box;
}
body, html {
margin: 0; padding: 0; height: 100%;
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #6a11cb, #2575fc);
color: #f0f0f5;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 16px;
}
main {
max-width: 480px;
background: rgba(255 255 255 / 0.1);
border-radius: 16px;
box-shadow: 0 0 30px rgba(0,0,0,0.3);
padding: 48px 32px 64px;
display: flex;
flex-direction: column;
gap: 32px;
}
h1 {
font-size: 2.8rem;
font-weight: 700;
margin: 0;
letter-spacing: 2px;
}
p.description {
font-size: 1.2rem;
color: #d0d0e0;
margin: 0;
line-height: 1.5;
}
.construction-icon {
font-size: 6rem;
line-height: 1;
color: #ffffffcc;
user-select: none;
animation: pulseGlow 2.5s infinite ease-in-out;
}
@keyframes pulseGlow {
0%, 100% { text-shadow: 0 0 10px #ffffff88; }
50% { text-shadow: 0 0 25px #a3aaffcc; }
}
/* Countdown container */
.countdown {
display: flex;
justify-content: center;
gap: 24px;
font-weight: 700;
color: #bbe1ff;
}
.countdown div {
flex: 1 1 50px;
background: rgba(255 255 255 / 0.15);
padding: 16px 12px;
border-radius: 12px;
display: flex;
flex-direction: column;
align-items: center;
user-select: none;
box-shadow: 0 0 8px rgba(255 255 255 / 0.3);
}
.countdown div span.number {
font-size: 2.2rem;
line-height: 1;
}
.countdown div span.label {
font-size: 0.85rem;
color: #c0c8f0cc;
margin-top: 4px;
text-transform: uppercase;
letter-spacing: 1.4px;
}
/* Email subscription */
form.notify-form {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
form.notify-form input[type="email"] {
flex: 1 1 250px;
min-width: 180px;
padding: 14px 20px;
border: none;
border-radius: 12px;
font-size: 1rem;
outline-offset: 2px;
transition: box-shadow 0.3s ease;
}
form.notify-form input[type="email"]:focus {
box-shadow: 0 0 0 3px #88b0ff99;
}
form.notify-form button {
background: linear-gradient(135deg, #6a11cb, #2575fc);
color: white;
border: none;
border-radius: 12px;
padding: 14px 28px;
font-weight: 700;
font-size: 1rem;
cursor: pointer;
min-width: 120px;
transition: background-color 0.3s ease;
box-shadow: 0 5px 15px rgba(101, 53, 255, 0.7);
}
form.notify-form button:hover,
form.notify-form button:focus {
background: linear-gradient(135deg, #8257e5, #2e66ff);
}
/* Success message */
.success-message {
color: #a0ffbc;
font-weight: 600;
font-size: 1rem;
margin-top: 12px;
}
/* Responsive */
@media (max-width: 480px) {
main {
padding: 36px 24px 48px;
gap: 24px;
}
h1 {
font-size: 2.2rem;
}
.construction-icon {
font-size: 5rem;
}
.countdown {
gap: 16px;
}
.countdown div {
padding: 12px 8px;
}
form.notify-form {
flex-direction: column;
}
form.notify-form input[type="email"],
form.notify-form button {
width: 100%;
min-width: auto;
box-sizing: border-box;
}
}
</style>
</head>
<body>
<main role="main" aria-labelledby="main-title">
<div class="construction-icon" aria-hidden="true">🚧</div>
<h1 id="main-title">Website Under Construction</h1>
<p class="description">We’re working hard to launch our new website. Stay tuned!</p>
<section aria-label="Countdown to launch">
<div class="countdown" role="list" aria-live="polite" aria-atomic="true" aria-relevant="all">
<div role="listitem" aria-label="Days">
<span class="number" id="days">00</span>
<span class="label">Days</span>
</div>
<div role="listitem" aria-label="Hours">
<span class="number" id="hours">00</span>
<span class="label">Hours</span>
</div>
<div role="listitem" aria-label="Minutes">
<span class="number" id="minutes">00</span>
<span class="label">Minutes</span>
</div>
<div role="listitem" aria-label="Seconds">
<span class="number" id="seconds">00</span>
<span class="label">Seconds</span>
</div>
</div>
</section>
<form class="notify-form" aria-label="Notify me form">
<label for="email" class="sr-only">Email address</label>
<input
type="email"
id="email"
name="email"
placeholder="Enter your email to get notified"
required
autocomplete="email"
aria-required="true"
/>
<button type="submit" aria-label="Subscribe for notification">Notify Me</button>
</form>
<div id="success-message" class="success-message" role="alert" aria-live="polite" style="display:none;">
Thank you! We'll notify you when we launch.
</div>
</main>
<script>
// Countdown target date - 15 days from now
const targetDate = new Date();
targetDate.setDate(targetDate.getDate() + 15);
const daysEl = document.getElementById('days');
const hoursEl = document.getElementById('hours');
const minutesEl = document.getElementById('minutes');
const secondsEl = document.getElementById('seconds');
function updateCountdown() {
const now = new Date();
const diff = targetDate - now;
if (diff <= 0) {
daysEl.textContent = '00';
hoursEl.textContent = '00';
minutesEl.textContent = '00';
secondsEl.textContent = '00';
clearInterval(countdownInterval);
return;
}
const d = Math.floor(diff / (1000 * 60 * 60 * 24));
const h = Math.floor((diff / (1000 * 60 * 60)) % 24);
const m = Math.floor((diff / (1000 * 60)) % 60);
const s = Math.floor((diff / 1000) % 60);
daysEl.textContent = d.toString().padStart(2, '0');
hoursEl.textContent = h.toString().padStart(2, '0');
minutesEl.textContent = m.toString().padStart(2, '0');
secondsEl.textContent = s.toString().padStart(2, '0');
}
const countdownInterval = setInterval(updateCountdown, 1000);
updateCountdown();
// Notify me form submission (fake, no backend)
const form = document.querySelector('.notify-form');
const emailInput = document.getElementById('email');
const successMessage = document.getElementById('success-message');
form.addEventListener('submit', (e) => {
e.preventDefault();
if (emailInput.validity.valid) {
successMessage.style.display = 'block';
emailInput.value = '';
} else {
emailInput.reportValidity();
}
});
</script>
</body>
</html>