Initial commit: modular single-file 3x-ui installer
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Ivan Razin
@@ -0,0 +1,56 @@
|
||||
# x-ui-pro-refactor
|
||||
|
||||
Refactored single-file installer for 3x-ui VPN panel (based on x-ui-pro).
|
||||
|
||||
## Repository structure
|
||||
|
||||
```
|
||||
x-ui-latest.sh — main installer script (single file, run remotely)
|
||||
assets/
|
||||
fake-sites/
|
||||
site-01/ … site-50/ — static HTML cover pages (index.html per site)
|
||||
x-ui-installer/ — reference project (do not modify)
|
||||
x-ui-pro/ — original project (do not modify)
|
||||
```
|
||||
|
||||
## What the script does
|
||||
|
||||
1. Stops / cleans any previous install
|
||||
2. Parses CLI arguments (`-install y`, `-subdomain`, `-reality_domain`, `-auto_domain y`, `-uninstall y`)
|
||||
3. Installs packages (`install_packages`) — nginx-full, certbot, sqlite3, curl, wget, jq, ufw
|
||||
4. Obtains Let's Encrypt certs via certbot standalone (`get_ssl_certs`) — two domains: panel + reality
|
||||
5. Installs 3x-ui panel from MHSanaei/3x-ui latest release (`install_panel`)
|
||||
6. Configures nginx (`configure_nginx`) — SNI stream, per-domain vhosts, shared includes snippet
|
||||
7. Pushes all settings and inbounds into x-ui.db (`configure_xui_db`) — untouched from original
|
||||
8. Downloads a random fake cover site from this repo (`install_fake_site`) → `/var/www/html/`
|
||||
9. Tunes kernel/BBR (`tune_system`)
|
||||
10. Sets up cron (`setup_cron`) — daily x-ui restart + nginx reload, monthly certbot renew
|
||||
11. Configures UFW (`setup_firewall`) — 22/80/443 tcp, 443 udp
|
||||
12. Prints panel URL + credentials (`show_results`)
|
||||
|
||||
## What was intentionally removed vs original
|
||||
|
||||
- `sub2singbox` binary install and `@reboot` cron entry
|
||||
- Custom web subscription page (`/var/www/subpage`, clash.yaml, sub-3x-ui.html)
|
||||
- `web_path` and `sub2singbox_path` nginx locations
|
||||
- Call to external `randomfakehtml.sh` → replaced with `install_fake_site()` using local assets
|
||||
|
||||
## Inbounds created
|
||||
|
||||
| Protocol | Port | Transport |
|
||||
|--------------|---------------|-----------|
|
||||
| vless | 8443 | REALITY / TCP |
|
||||
| vless | `$ws_port` | WebSocket |
|
||||
| vless | UDS socket | XHTTP (gRPC) |
|
||||
| trojan | `$trojan_port`| gRPC |
|
||||
|
||||
## GitHub raw URL for fake sites
|
||||
|
||||
`https://raw.githubusercontent.com/mozaroc/3x-ui-pro/main/assets/fake-sites/site-NN/index.html`
|
||||
|
||||
## Running
|
||||
|
||||
```bash
|
||||
bash <(curl -fsSL https://raw.githubusercontent.com/mozaroc/3x-ui-pro/main/x-ui-latest.sh) \
|
||||
-install y -subdomain panel.example.com -reality_domain r.example.com
|
||||
```
|
||||
@@ -0,0 +1,63 @@
|
||||
## x-ui-pro (x-ui + nginx) modification of https://github.com/GFW4Fun/x-ui-pro for REALITY
|
||||
- Auto Installation (lightweight)
|
||||
- Auto SSL renewal / Daily reload Nginx X-ui
|
||||
- Handle **REALITY** and **WebSocket** via **nginx**.
|
||||
- Multi-user and config via port **443**
|
||||
- Auto enabled subscriptions via port **443**
|
||||
- Auto configured VLESS+Reality and VLESSoverWebSocket
|
||||
- **Custom Web Sub Page**
|
||||
- Feature that allows the use of **custom client configurations for SING-BOX & CLASH META**
|
||||
- **Local instance sub2sing-box**
|
||||
- Auto configured Firewall
|
||||
- More security and low detection with nginx
|
||||
- Compatible with Cloudflare (only for WebSocket/GRPC)
|
||||
- Random 150+ fake template!
|
||||
- Linux Debian12/Ubuntu24!
|
||||
>
|
||||
**You need TWO domains or subdomains**
|
||||
1. For panel and WebSocket/GRPC/HttpUgrade/SplitHttp
|
||||
2. For REALITY destination
|
||||
>
|
||||
Get Free subdomains - https://scarce-hole-1e2.notion.site/14d1666462e48069818cf42553bfae1f?pvs=74
|
||||
>
|
||||
RU instruction - https://scarce-hole-1e2.notion.site/3X-UI-pro-with-REALITY-panel-and-inbaunds-on-port-443-10d1666462e48085be0fee4c136ce417
|
||||
|
||||
➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖
|
||||
|
||||
### Install X-UI-PRO
|
||||
|
||||
```
|
||||
bash <(wget -qO- https://github.com/mozaroc/x-ui-pro/raw/master/x-ui-pro.sh) -install yes -panel 1 -ONLY_CF_IP_ALLOW no
|
||||
```
|
||||
>
|
||||
> Do not change SubDomain for renew SSL❗
|
||||
|
||||
|
||||
**Uninstall X-UI-PRO**:x:
|
||||
```
|
||||
sudo su -c "bash <(wget -qO- https://raw.githubusercontent.com/mozaroc/x-ui-pro/master/x-ui-pro.sh) -Uninstall yes"
|
||||
```
|
||||
|
||||
**backup panel and nginx configs**:x:
|
||||
```
|
||||
sudo su -c "bash <(wget -qO- https://raw.githubusercontent.com/mozaroc/x-ui-pro/master/backup.sh)"
|
||||
```
|
||||
|
||||
➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖
|
||||
### Screenshots :wrench:🐧⚙️
|
||||
>
|
||||
**How to open custom web sub page?**
|
||||
>
|
||||
|
||||
>
|
||||
**Main Page custom web sub**
|
||||
>
|
||||
|
||||
>
|
||||
**sub2sing-box section on custom web sub page**
|
||||
>
|
||||
|
||||
>
|
||||
**local instance sub2sing-box fork by legiz**
|
||||
>
|
||||
|
||||
@@ -0,0 +1,114 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Nexus Systems — Coming Soon</title>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
background-color: #0a0f2c;
|
||||
color: #e8eaf6;
|
||||
font-family: 'Segoe UI', Arial, sans-serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
}
|
||||
.logo-mark {
|
||||
width: 64px; height: 64px;
|
||||
border: 3px solid #5c7cfa;
|
||||
border-radius: 12px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
margin: 0 auto 2rem;
|
||||
font-size: 1.8rem; font-weight: 900; color: #5c7cfa;
|
||||
letter-spacing: -2px;
|
||||
}
|
||||
h1 {
|
||||
font-size: clamp(2rem, 6vw, 4rem);
|
||||
font-weight: 800;
|
||||
letter-spacing: -1px;
|
||||
color: #ffffff;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.tagline {
|
||||
font-size: 1.1rem;
|
||||
color: #8892b0;
|
||||
margin-bottom: 3rem;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.countdown {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.unit {
|
||||
background: rgba(92, 124, 250, 0.1);
|
||||
border: 1px solid rgba(92, 124, 250, 0.3);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem 2rem;
|
||||
min-width: 90px;
|
||||
}
|
||||
.unit .number {
|
||||
display: block;
|
||||
font-size: 2.8rem;
|
||||
font-weight: 700;
|
||||
color: #5c7cfa;
|
||||
line-height: 1;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.unit .label {
|
||||
display: block;
|
||||
font-size: 0.7rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.15em;
|
||||
color: #8892b0;
|
||||
margin-top: 0.4rem;
|
||||
}
|
||||
.divider {
|
||||
width: 60px; height: 2px;
|
||||
background: linear-gradient(90deg, transparent, #5c7cfa, transparent);
|
||||
margin: 0 auto 2rem;
|
||||
}
|
||||
.company {
|
||||
font-size: 0.85rem;
|
||||
color: #8892b0;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.company span { color: #5c7cfa; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="logo-mark">NX</div>
|
||||
<p class="tagline">Something big is on its way</p>
|
||||
<h1>Coming Soon</h1>
|
||||
<div class="divider"></div>
|
||||
<div class="countdown">
|
||||
<div class="unit"><span class="number" id="days">00</span><span class="label">Days</span></div>
|
||||
<div class="unit"><span class="number" id="hours">00</span><span class="label">Hours</span></div>
|
||||
<div class="unit"><span class="number" id="mins">00</span><span class="label">Minutes</span></div>
|
||||
<div class="unit"><span class="number" id="secs">00</span><span class="label">Seconds</span></div>
|
||||
</div>
|
||||
<p class="company"><span>Nexus Systems</span> — Redefining Infrastructure</p>
|
||||
<script>
|
||||
var target = new Date();
|
||||
target.setDate(target.getDate() + 47);
|
||||
function tick() {
|
||||
var diff = target - new Date();
|
||||
if (diff < 0) return;
|
||||
document.getElementById('days').textContent = String(Math.floor(diff / 86400000)).padStart(2,'0');
|
||||
document.getElementById('hours').textContent = String(Math.floor(diff % 86400000 / 3600000)).padStart(2,'0');
|
||||
document.getElementById('mins').textContent = String(Math.floor(diff % 3600000 / 60000)).padStart(2,'0');
|
||||
document.getElementById('secs').textContent = String(Math.floor(diff % 60000 / 1000)).padStart(2,'0');
|
||||
}
|
||||
tick(); setInterval(tick, 1000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,102 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>BuildRight Co. — Under Construction</title>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
background: #f4f5f7;
|
||||
font-family: Georgia, 'Times New Roman', serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
}
|
||||
.card {
|
||||
background: #ffffff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 24px rgba(0,0,0,0.08);
|
||||
padding: 3.5rem 3rem;
|
||||
max-width: 540px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
border-top: 5px solid #f4a100;
|
||||
}
|
||||
.icon {
|
||||
font-size: 4rem;
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
color: #1a1a2e;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.75rem;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
.subtitle {
|
||||
font-size: 1rem;
|
||||
color: #555;
|
||||
line-height: 1.7;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.tape {
|
||||
background: #f4a100;
|
||||
color: #1a1a2e;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-weight: 700;
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
padding: 0.5rem 1.5rem;
|
||||
display: inline-block;
|
||||
transform: rotate(-1deg);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.progress-bar {
|
||||
background: #e9ecef;
|
||||
border-radius: 999px;
|
||||
height: 8px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.progress-fill {
|
||||
background: linear-gradient(90deg, #f4a100, #ffca28);
|
||||
height: 100%;
|
||||
width: 68%;
|
||||
border-radius: 999px;
|
||||
}
|
||||
.progress-label {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.75rem;
|
||||
color: #999;
|
||||
text-align: right;
|
||||
}
|
||||
.brand {
|
||||
margin-top: 2rem;
|
||||
font-size: 0.8rem;
|
||||
color: #aaa;
|
||||
letter-spacing: 0.1em;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="card">
|
||||
<div class="icon">🚧</div>
|
||||
<h1>Under Construction</h1>
|
||||
<p class="subtitle">
|
||||
We're working hard to build something great for you.
|
||||
Our team is putting the finishing touches on our new website.
|
||||
</p>
|
||||
<div class="tape">Work in progress</div>
|
||||
<div class="progress-bar"><div class="progress-fill"></div></div>
|
||||
<p class="progress-label">68% complete</p>
|
||||
<p class="brand">BuildRight Co. — Building Better Together</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,88 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>GreenLeaf Tech — Launching Soon</title>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
background: linear-gradient(135deg, #0f3d1e 0%, #1a5c2a 40%, #0d4d1f 100%);
|
||||
color: #d4edda;
|
||||
font-family: 'Trebuchet MS', Arial, sans-serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
.leaf {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
filter: drop-shadow(0 0 12px rgba(72,199,100,0.5));
|
||||
}
|
||||
.brand {
|
||||
font-size: 0.85rem;
|
||||
letter-spacing: 0.3em;
|
||||
text-transform: uppercase;
|
||||
color: #6fcf7c;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
h1 {
|
||||
font-size: clamp(2.2rem, 7vw, 5rem);
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 1.5rem;
|
||||
text-shadow: 0 2px 20px rgba(0,0,0,0.4);
|
||||
}
|
||||
h1 span { color: #48c764; }
|
||||
.body-text {
|
||||
font-size: 1.1rem;
|
||||
color: #a8d5b0;
|
||||
max-width: 480px;
|
||||
line-height: 1.8;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.badge-row {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.badge {
|
||||
background: rgba(72, 199, 100, 0.15);
|
||||
border: 1px solid rgba(72, 199, 100, 0.4);
|
||||
color: #6fcf7c;
|
||||
padding: 0.4rem 1.1rem;
|
||||
border-radius: 999px;
|
||||
font-size: 0.8rem;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
.footer-line {
|
||||
font-size: 0.75rem;
|
||||
color: #5a8c65;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="leaf">🌿</div>
|
||||
<p class="brand">GreenLeaf Tech</p>
|
||||
<h1>We're Launching<br><span>Soon</span></h1>
|
||||
<p class="body-text">
|
||||
We're building a greener future through sustainable technology.
|
||||
Our platform is almost ready — join us as we grow something remarkable.
|
||||
</p>
|
||||
<div class="badge-row">
|
||||
<span class="badge">Sustainable Cloud</span>
|
||||
<span class="badge">Carbon Neutral</span>
|
||||
<span class="badge">Open Source</span>
|
||||
</div>
|
||||
<p class="footer-line">GreenLeaf Tech © 2025 — Growing Tomorrow, Today</p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,135 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Alex Chen — Portfolio Coming Soon</title>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
background: linear-gradient(160deg, #1a0533 0%, #2d1055 50%, #1e0840 100%);
|
||||
font-family: 'Palatino Linotype', Palatino, Georgia, serif;
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
align-items: center;
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
body { grid-template-columns: 1fr; padding: 3rem 2rem; }
|
||||
.right { display: none; }
|
||||
}
|
||||
.left {
|
||||
padding: 4rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.eyebrow {
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.3em;
|
||||
text-transform: uppercase;
|
||||
color: #b07eff;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
h1 {
|
||||
font-size: clamp(2rem, 4vw, 3.5rem);
|
||||
color: #ffffff;
|
||||
line-height: 1.15;
|
||||
font-weight: 400;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
h1 em {
|
||||
font-style: italic;
|
||||
color: #c89fff;
|
||||
}
|
||||
.role {
|
||||
font-size: 0.9rem;
|
||||
color: #9b6fcc;
|
||||
letter-spacing: 0.1em;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
p {
|
||||
font-size: 1rem;
|
||||
color: #c4a8e8;
|
||||
line-height: 1.9;
|
||||
max-width: 380px;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
.divider {
|
||||
width: 40px;
|
||||
height: 1px;
|
||||
background: #7c3aed;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
.status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
background: rgba(124, 58, 237, 0.2);
|
||||
border: 1px solid rgba(124, 58, 237, 0.5);
|
||||
padding: 0.5rem 1.2rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.8rem;
|
||||
color: #b07eff;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
.dot {
|
||||
width: 7px; height: 7px;
|
||||
background: #7c3aed;
|
||||
border-radius: 50%;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.3; }
|
||||
}
|
||||
.right {
|
||||
padding: 4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.art {
|
||||
width: 260px; height: 320px;
|
||||
border: 1px solid rgba(124,58,237,0.4);
|
||||
border-radius: 8px;
|
||||
background: rgba(124,58,237,0.08);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.art::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -40%; left: -40%;
|
||||
width: 180%; height: 180%;
|
||||
background: radial-gradient(circle, rgba(124,58,237,0.3) 0%, transparent 65%);
|
||||
}
|
||||
.art-label {
|
||||
position: absolute;
|
||||
bottom: 1.2rem; left: 1.2rem;
|
||||
font-size: 0.7rem;
|
||||
color: rgba(176,126,255,0.5);
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="left">
|
||||
<p class="eyebrow">Portfolio</p>
|
||||
<h1>Alex Chen —<br><em>Designer</em></h1>
|
||||
<p class="role">UI / UX • Brand Identity • Motion</p>
|
||||
<div class="divider"></div>
|
||||
<p>
|
||||
Something carefully crafted is on the way. A new portfolio showcasing
|
||||
the intersection of form, function, and feeling. Coming soon.
|
||||
</p>
|
||||
<span class="status"><span class="dot"></span>Currently in development</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="art">
|
||||
<div class="art-label">Work preview</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,76 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>ShopNow Store — Maintenance Mode</title>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
background: linear-gradient(135deg, #ff6b2b 0%, #ff9a44 50%, #ffb347 100%);
|
||||
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, Arial, sans-serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
.wrench-icon {
|
||||
font-size: 3.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.store-name {
|
||||
font-size: 0.8rem;
|
||||
letter-spacing: 0.4em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255,255,255,0.8);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
h1 {
|
||||
font-size: clamp(2.2rem, 6vw, 3.8rem);
|
||||
color: #ffffff;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.75rem;
|
||||
text-shadow: 0 2px 10px rgba(0,0,0,0.15);
|
||||
}
|
||||
.back-soon {
|
||||
font-size: 1.25rem;
|
||||
color: rgba(255,255,255,0.9);
|
||||
margin-bottom: 2.5rem;
|
||||
font-style: italic;
|
||||
}
|
||||
.info-box {
|
||||
background: rgba(255,255,255,0.2);
|
||||
backdrop-filter: blur(4px);
|
||||
border: 1px solid rgba(255,255,255,0.35);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem 2.5rem;
|
||||
max-width: 420px;
|
||||
color: #fff;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.7;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
.info-box strong { display: block; font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 0.5rem; opacity: 0.7; }
|
||||
.eta {
|
||||
font-size: 0.78rem;
|
||||
color: rgba(255,255,255,0.65);
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrench-icon">🔧</div>
|
||||
<p class="store-name">ShopNow Store</p>
|
||||
<h1>Maintenance Mode</h1>
|
||||
<p class="back-soon">We'll be back soon!</p>
|
||||
<div class="info-box">
|
||||
<strong>What's happening?</strong>
|
||||
We're performing scheduled maintenance to improve your shopping experience.
|
||||
All existing orders are safe and processing normally.
|
||||
</div>
|
||||
<p class="eta">Estimated downtime: a few hours • Thank you for your patience</p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,67 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Studio Minimal — New Website In Progress</title>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
background: #ffffff;
|
||||
color: #111111;
|
||||
font-family: 'Optima', 'Candara', 'Gill Sans MT', Arial, sans-serif;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
.top-bar {
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0;
|
||||
height: 3px;
|
||||
background: #111111;
|
||||
}
|
||||
.mark {
|
||||
width: 32px; height: 32px;
|
||||
background: #111;
|
||||
margin: 0 auto 4rem;
|
||||
}
|
||||
h1 {
|
||||
font-size: clamp(1.1rem, 3vw, 1.5rem);
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: #111;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.thin-line {
|
||||
width: 1px;
|
||||
height: 60px;
|
||||
background: #111;
|
||||
margin: 0 auto 2rem;
|
||||
}
|
||||
.byline {
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.35em;
|
||||
text-transform: uppercase;
|
||||
color: #999;
|
||||
}
|
||||
.byline strong {
|
||||
color: #111;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-bar"></div>
|
||||
<div class="mark"></div>
|
||||
<h1>New website in progress</h1>
|
||||
<div class="thin-line"></div>
|
||||
<p class="byline"><strong>Studio Minimal</strong> — Design & Direction</p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,108 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>The Luxe Hotel — Grand Opening Soon</title>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
background: #1a1a1a;
|
||||
color: #e8d5a3;
|
||||
font-family: 'Book Antiqua', Palatino, Georgia, serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 3rem 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
.ornament {
|
||||
color: #c9a84c;
|
||||
font-size: 1.4rem;
|
||||
letter-spacing: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.hotel-name {
|
||||
font-size: clamp(2rem, 5vw, 3.5rem);
|
||||
font-weight: 400;
|
||||
color: #c9a84c;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
.tagline-small {
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.4em;
|
||||
text-transform: uppercase;
|
||||
color: #7a6640;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.gold-rule {
|
||||
width: 200px;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, #c9a84c, transparent);
|
||||
margin: 0 auto 3rem;
|
||||
}
|
||||
h1 {
|
||||
font-size: clamp(1.4rem, 3.5vw, 2.2rem);
|
||||
font-weight: 400;
|
||||
color: #f5ecd4;
|
||||
letter-spacing: 0.25em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
p {
|
||||
font-size: 1rem;
|
||||
color: #a89060;
|
||||
max-width: 420px;
|
||||
line-height: 2;
|
||||
margin-bottom: 3rem;
|
||||
font-style: italic;
|
||||
}
|
||||
.features {
|
||||
display: flex;
|
||||
gap: 3rem;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.feature {
|
||||
text-align: center;
|
||||
}
|
||||
.feature .icon { font-size: 1.5rem; color: #c9a84c; display: block; margin-bottom: 0.4rem; }
|
||||
.feature .text { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: #7a6640; }
|
||||
.bottom-rule {
|
||||
width: 80px;
|
||||
height: 1px;
|
||||
background: #3a3020;
|
||||
margin: 0 auto 1.5rem;
|
||||
}
|
||||
.address {
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.15em;
|
||||
color: #4a3e2a;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="ornament">— ♦ —</div>
|
||||
<div class="hotel-name">The Luxe Hotel</div>
|
||||
<p class="tagline-small">Est. 2025 • Timeless Elegance</p>
|
||||
<div class="gold-rule"></div>
|
||||
<h1>Grand Opening Soon</h1>
|
||||
<p>
|
||||
We are putting the final touches on an experience of rare distinction.
|
||||
Where luxury meets artistry — a sanctuary unlike any other.
|
||||
</p>
|
||||
<div class="features">
|
||||
<div class="feature"><span class="icon">🍸</span><span class="text">Fine Dining</span></div>
|
||||
<div class="feature"><span class="icon">💧</span><span class="text">Spa & Wellness</span></div>
|
||||
<div class="feature"><span class="icon">🏠</span><span class="text">Elite Suites</span></div>
|
||||
</div>
|
||||
<div class="bottom-rule"></div>
|
||||
<p class="address">Reservations opening soon • info@theluxehotel.com</p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,97 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Bloom Wellness — Something Exciting Is Coming</title>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
background: #fff0f3;
|
||||
font-family: 'Palatino Linotype', Palatino, Georgia, serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: -120px; right: -120px;
|
||||
width: 400px; height: 400px;
|
||||
background: radial-gradient(circle, #ffb3c1 0%, transparent 65%);
|
||||
pointer-events: none;
|
||||
}
|
||||
body::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
bottom: -80px; left: -80px;
|
||||
width: 300px; height: 300px;
|
||||
background: radial-gradient(circle, #ffc8d4 0%, transparent 65%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.flower { font-size: 2.8rem; margin-bottom: 0.5rem; }
|
||||
.brand {
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.4em;
|
||||
text-transform: uppercase;
|
||||
color: #d4788f;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
h1 {
|
||||
font-size: clamp(1.9rem, 5vw, 3.2rem);
|
||||
color: #5c1a2e;
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
line-height: 1.25;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.sub {
|
||||
font-size: 1rem;
|
||||
color: #b05a70;
|
||||
max-width: 380px;
|
||||
line-height: 1.9;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
.petal-row {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
justify-content: center;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
.petal {
|
||||
width: 10px; height: 10px;
|
||||
border-radius: 50%;
|
||||
background: #f4a0b5;
|
||||
}
|
||||
.petal:nth-child(2) { background: #f9c0cd; }
|
||||
.petal:nth-child(3) { background: #e8768f; }
|
||||
.petal:nth-child(4) { background: #f9c0cd; }
|
||||
.petal:nth-child(5) { background: #f4a0b5; }
|
||||
.footer-text {
|
||||
font-size: 0.75rem;
|
||||
color: #c4909f;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flower">🍦</div>
|
||||
<p class="brand">Bloom Wellness</p>
|
||||
<h1>Something Exciting<br>Is Coming</h1>
|
||||
<p class="sub">
|
||||
We're preparing a holistic wellness experience designed to help you
|
||||
flourish — mind, body, and spirit. Stay tuned for something beautiful.
|
||||
</p>
|
||||
<div class="petal-row">
|
||||
<div class="petal"></div><div class="petal"></div><div class="petal"></div>
|
||||
<div class="petal"></div><div class="petal"></div>
|
||||
</div>
|
||||
<p class="footer-text">Bloom Wellness — Nourish. Restore. Thrive.</p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,136 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>TechFix Support — Under Maintenance</title>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
background: #f0f4ff;
|
||||
font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
header {
|
||||
background: #1565c0;
|
||||
padding: 1rem 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
header .logo-text {
|
||||
color: #fff;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
header .logo-text span { color: #90caf9; }
|
||||
.main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 3rem 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
.icon-wrap {
|
||||
width: 80px; height: 80px;
|
||||
background: #1565c0;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2.2rem;
|
||||
margin: 0 auto 2rem;
|
||||
}
|
||||
h1 {
|
||||
font-size: 1.9rem;
|
||||
color: #0d3c6e;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.status-badge {
|
||||
display: inline-block;
|
||||
background: #fff3cd;
|
||||
border: 1px solid #ffc107;
|
||||
color: #856404;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
padding: 0.3rem 0.9rem;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
p {
|
||||
font-size: 1rem;
|
||||
color: #4a6080;
|
||||
max-width: 460px;
|
||||
line-height: 1.7;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
max-width: 420px;
|
||||
width: 100%;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
@media (max-width: 500px) { .info-grid { grid-template-columns: 1fr; } }
|
||||
.info-card {
|
||||
background: #fff;
|
||||
border: 1px solid #dce6f5;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
text-align: left;
|
||||
}
|
||||
.info-card .ic-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: #90a8c8; margin-bottom: 0.3rem; }
|
||||
.info-card .ic-val { font-size: 0.95rem; color: #1565c0; font-weight: 600; }
|
||||
footer {
|
||||
background: #1565c0;
|
||||
padding: 0.8rem 2rem;
|
||||
text-align: center;
|
||||
font-size: 0.75rem;
|
||||
color: #90caf9;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="logo-text">TechFix <span>Support</span></div>
|
||||
</header>
|
||||
<div class="main">
|
||||
<div class="icon-wrap">🔧</div>
|
||||
<div class="status-badge">⚠ Scheduled Maintenance</div>
|
||||
<h1>Under Maintenance</h1>
|
||||
<p>
|
||||
Our support portal is currently undergoing scheduled system maintenance.
|
||||
We apologize for the inconvenience and appreciate your patience.
|
||||
For urgent issues, please contact your account manager directly.
|
||||
</p>
|
||||
<div class="info-grid">
|
||||
<div class="info-card">
|
||||
<div class="ic-label">Status</div>
|
||||
<div class="ic-val">In Progress</div>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<div class="ic-label">Estimated Time</div>
|
||||
<div class="ic-val">2–4 Hours</div>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<div class="ic-label">Affected Systems</div>
|
||||
<div class="ic-val">Customer Portal</div>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<div class="ic-label">Emergency Line</div>
|
||||
<div class="ic-val">1-800-TECHFIX</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer>TechFix Support © 2025 • All rights reserved</footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,108 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Initializing... Please Wait</title>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
background: #0a0a0a;
|
||||
color: #00ff41;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding: 2rem 3rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.scanline {
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 4px);
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
}
|
||||
.terminal {
|
||||
max-width: 680px;
|
||||
width: 100%;
|
||||
}
|
||||
.line {
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.9;
|
||||
color: #00c030;
|
||||
}
|
||||
.line.dim { color: #006010; }
|
||||
.line.bright { color: #00ff41; }
|
||||
.line.warn { color: #ffaa00; }
|
||||
.prompt::before { content: '$ '; color: #00ff41; }
|
||||
.header-ascii {
|
||||
color: #00ff41;
|
||||
font-size: 0.65rem;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 1.5rem;
|
||||
white-space: pre;
|
||||
}
|
||||
.cursor {
|
||||
display: inline-block;
|
||||
width: 9px; height: 1.1em;
|
||||
background: #00ff41;
|
||||
vertical-align: bottom;
|
||||
animation: blink 1s step-end infinite;
|
||||
}
|
||||
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
|
||||
.progress-line {
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.85rem;
|
||||
color: #00c030;
|
||||
}
|
||||
.bar {
|
||||
display: inline-block;
|
||||
width: 200px;
|
||||
background: #001a00;
|
||||
border: 1px solid #00c030;
|
||||
height: 12px;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.bar-fill {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
height: 100%;
|
||||
background: #00ff41;
|
||||
animation: fill 8s linear infinite;
|
||||
}
|
||||
@keyframes fill { 0%{width:0%} 85%{width:85%} 100%{width:85%} }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="scanline"></div>
|
||||
<div class="terminal">
|
||||
<div class="header-ascii">
|
||||
____ ____ ____ ____
|
||||
/ ___|| _ \| _ \/ ___|
|
||||
\___ \| |_) | | | \___ \
|
||||
___) | _ <| |_| |___) |
|
||||
|____/|_| \_\____/|____/
|
||||
</div>
|
||||
<div class="line dim">[BOOT] BIOS v2.4.1 loaded</div>
|
||||
<div class="line dim">[BOOT] Mounting root filesystem... OK</div>
|
||||
<div class="line">[INIT] Loading kernel modules... OK</div>
|
||||
<div class="line">[INIT] Starting network services... OK</div>
|
||||
<div class="line">[INIT] Checking integrity... OK</div>
|
||||
<div class="line warn">[WARN] Web interface offline — maintenance in progress</div>
|
||||
<div class="line dim">[SYS ] Rebuilding index...</div>
|
||||
<div class="line dim">[SYS ] Migrating database...</div>
|
||||
<div class="line bright">[SYS ] Deploying new build...</div>
|
||||
<div class="progress-line">
|
||||
Progress: <span class="bar"><span class="bar-fill"></span></span> 85%
|
||||
</div>
|
||||
<div class="line" style="margin-top:1.2rem">
|
||||
<span class="prompt"></span>Initializing... Please Wait<span class="cursor"></span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,97 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Petal Boutique — We're Getting Ready</title>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
background: #f0ecff;
|
||||
font-family: 'Palatino Linotype', Palatino, Georgia, serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
.circle-logo {
|
||||
width: 80px; height: 80px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #c4b5fd, #a78bfa);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
margin: 0 auto 1.5rem;
|
||||
box-shadow: 0 8px 32px rgba(167,139,250,0.35);
|
||||
}
|
||||
.brand-name {
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.4em;
|
||||
text-transform: uppercase;
|
||||
color: #9b7fe8;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
h1 {
|
||||
font-size: clamp(1.8rem, 5vw, 3rem);
|
||||
color: #3b1e8e;
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.sub {
|
||||
font-size: 0.95rem;
|
||||
color: #7c6aad;
|
||||
max-width: 360px;
|
||||
line-height: 1.9;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
.steps {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
.step {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
font-size: 0.85rem;
|
||||
color: #7c6aad;
|
||||
}
|
||||
.step-dot {
|
||||
width: 8px; height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #c4b5fd;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.step.done .step-dot { background: #7c3aed; }
|
||||
.step.done { color: #3b1e8e; }
|
||||
.footer {
|
||||
font-size: 0.72rem;
|
||||
color: #b5a8d8;
|
||||
letter-spacing: 0.12em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="circle-logo">🍒</div>
|
||||
<p class="brand-name">Petal Boutique</p>
|
||||
<h1>We're Getting Ready</h1>
|
||||
<p class="sub">
|
||||
Our new collection and boutique experience are being carefully prepared.
|
||||
Something lovely is on its way to you soon.
|
||||
</p>
|
||||
<div class="steps">
|
||||
<div class="step done"><div class="step-dot"></div>Curation & sourcing complete</div>
|
||||
<div class="step done"><div class="step-dot"></div>Photography complete</div>
|
||||
<div class="step"><div class="step-dot"></div>Website build in progress</div>
|
||||
<div class="step"><div class="step-dot"></div>Online store going live soon</div>
|
||||
</div>
|
||||
<p class="footer">Petal Boutique — Curated with love, 2025</p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,108 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>RedLine Media — Website Redesign In Progress</title>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
background: #111111;
|
||||
color: #ffffff;
|
||||
font-family: Impact, 'Arial Narrow', Arial, sans-serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.top-stripe {
|
||||
height: 6px;
|
||||
background: #e81c1c;
|
||||
}
|
||||
.main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 3rem 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
.logo {
|
||||
font-size: 1.8rem;
|
||||
letter-spacing: 0.15em;
|
||||
color: #e81c1c;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
.logo-sub {
|
||||
font-size: 0.6rem;
|
||||
letter-spacing: 0.5em;
|
||||
text-transform: uppercase;
|
||||
color: #555;
|
||||
font-family: Arial, sans-serif;
|
||||
font-weight: 400;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
h1 {
|
||||
font-size: clamp(2.5rem, 8vw, 6rem);
|
||||
line-height: 0.95;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: -2px;
|
||||
color: #ffffff;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
h1 .red { color: #e81c1c; }
|
||||
.subtitle {
|
||||
font-size: 1.1rem;
|
||||
letter-spacing: 0.3em;
|
||||
text-transform: uppercase;
|
||||
color: #777;
|
||||
font-family: Arial, sans-serif;
|
||||
font-weight: 400;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.counter-row {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
border: 2px solid #e81c1c;
|
||||
overflow: hidden;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.counter-item {
|
||||
padding: 1rem 1.5rem;
|
||||
border-right: 2px solid #e81c1c;
|
||||
text-align: center;
|
||||
}
|
||||
.counter-item:last-child { border-right: none; }
|
||||
.counter-item .n { display: block; font-size: 1.8rem; color: #e81c1c; line-height: 1; }
|
||||
.counter-item .l { display: block; font-size: 0.55rem; letter-spacing: 0.2em; color: #555; font-family: Arial, sans-serif; margin-top: 0.3rem; text-transform: uppercase; }
|
||||
.bottom {
|
||||
font-size: 0.65rem;
|
||||
letter-spacing: 0.3em;
|
||||
text-transform: uppercase;
|
||||
color: #333;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
.bottom-stripe {
|
||||
height: 6px;
|
||||
background: #e81c1c;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-stripe"></div>
|
||||
<div class="main">
|
||||
<div class="logo">RedLine Media</div>
|
||||
<div class="logo-sub">Creative Agency • Since 2018</div>
|
||||
<h1>Website<br><span class="red">Redesign</span><br>In Progress</h1>
|
||||
<p class="subtitle">We're rebuilding from the ground up</p>
|
||||
<div class="counter-row">
|
||||
<div class="counter-item"><span class="n">12</span><span class="l">Years</span></div>
|
||||
<div class="counter-item"><span class="n">340+</span><span class="l">Projects</span></div>
|
||||
<div class="counter-item"><span class="n">98%</span><span class="l">Satisfaction</span></div>
|
||||
</div>
|
||||
<p class="bottom">RedLine Media © 2025 — New site dropping soon</p>
|
||||
</div>
|
||||
<div class="bottom-stripe"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,119 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CloudPath Consulting — Soaring to New Heights</title>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
background: #e8f4fd;
|
||||
font-family: 'Century Gothic', 'Trebuchet MS', Arial, sans-serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* CSS cloud shapes */
|
||||
.cloud {
|
||||
position: absolute;
|
||||
background: rgba(255,255,255,0.85);
|
||||
border-radius: 50px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.cloud::before, .cloud::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background: rgba(255,255,255,0.85);
|
||||
border-radius: 50%;
|
||||
}
|
||||
.c1 { width:180px; height:50px; top:8%; left:5%; opacity:0.9; }
|
||||
.c1::before { width:80px; height:80px; top:-40px; left:20px; }
|
||||
.c1::after { width:60px; height:60px; top:-30px; left:80px; }
|
||||
.c2 { width:140px; height:40px; top:18%; right:10%; opacity:0.7; }
|
||||
.c2::before { width:60px; height:60px; top:-30px; left:15px; }
|
||||
.c2::after { width:50px; height:50px; top:-25px; left:65px; }
|
||||
.c3 { width:100px; height:30px; bottom:25%; left:12%; opacity:0.6; }
|
||||
.c3::before { width:45px; height:45px; top:-22px; left:10px; }
|
||||
.c3::after { width:35px; height:35px; top:-18px; left:45px; }
|
||||
.c4 { width:160px; height:45px; bottom:15%; right:8%; opacity:0.75; }
|
||||
.c4::before { width:70px; height:70px; top:-35px; left:18px; }
|
||||
.c4::after { width:55px; height:55px; top:-28px; left:75px; }
|
||||
|
||||
.content { position: relative; z-index: 1; }
|
||||
.sky-icon { font-size: 3rem; margin-bottom: 1rem; }
|
||||
.brand {
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.35em;
|
||||
text-transform: uppercase;
|
||||
color: #4a90d9;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.brand-full {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 700;
|
||||
color: #1a5fa8;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
h1 {
|
||||
font-size: clamp(1.8rem, 5vw, 3rem);
|
||||
color: #0d3a6e;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
p {
|
||||
font-size: 1rem;
|
||||
color: #5580a8;
|
||||
max-width: 400px;
|
||||
line-height: 1.8;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
.chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.6rem;
|
||||
justify-content: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.chip {
|
||||
background: rgba(74, 144, 217, 0.15);
|
||||
border: 1px solid rgba(74,144,217,0.4);
|
||||
color: #2471b8;
|
||||
font-size: 0.78rem;
|
||||
padding: 0.35rem 0.9rem;
|
||||
border-radius: 999px;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
.footer { font-size: 0.72rem; color: #9ab8d8; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="cloud c1"></div>
|
||||
<div class="cloud c2"></div>
|
||||
<div class="cloud c3"></div>
|
||||
<div class="cloud c4"></div>
|
||||
<div class="content">
|
||||
<div class="sky-icon">✈️</div>
|
||||
<p class="brand">CloudPath Consulting</p>
|
||||
<div class="brand-full">CloudPath</div>
|
||||
<h1>Soaring to<br>New Heights</h1>
|
||||
<p>
|
||||
Our new platform is taking flight. We're redesigning the way
|
||||
businesses navigate cloud infrastructure — clearer skies ahead.
|
||||
</p>
|
||||
<div class="chips">
|
||||
<span class="chip">Cloud Strategy</span>
|
||||
<span class="chip">Migration</span>
|
||||
<span class="chip">Architecture</span>
|
||||
<span class="chip">Security</span>
|
||||
</div>
|
||||
<p class="footer">CloudPath Consulting © 2025 — New site launching soon</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,113 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Pine Ridge Resort — Temporarily Closed for Updates</title>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
background: #0d2218;
|
||||
color: #c8dfc8;
|
||||
font-family: 'Palatino Linotype', Palatino, Georgia, serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
background-image:
|
||||
radial-gradient(ellipse at 20% 0%, rgba(30,80,40,0.6) 0%, transparent 50%),
|
||||
radial-gradient(ellipse at 80% 100%, rgba(10,40,20,0.8) 0%, transparent 50%);
|
||||
}
|
||||
.tree-row {
|
||||
font-size: 1.5rem;
|
||||
letter-spacing: 0.4rem;
|
||||
margin-bottom: 0.5rem;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.resort-name {
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.45em;
|
||||
text-transform: uppercase;
|
||||
color: #4a8a5a;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 400;
|
||||
color: #8fbc8f;
|
||||
margin-bottom: 3rem;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
.divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
margin: 0 auto 3rem;
|
||||
}
|
||||
.divider::before, .divider::after {
|
||||
content: '';
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: rgba(143, 188, 143, 0.3);
|
||||
}
|
||||
.divider-icon { color: #4a8a5a; font-size: 0.9rem; }
|
||||
h1 {
|
||||
font-size: clamp(1.5rem, 4vw, 2.3rem);
|
||||
font-weight: 400;
|
||||
color: #d8f0d8;
|
||||
letter-spacing: 0.04em;
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
p {
|
||||
font-size: 0.97rem;
|
||||
color: #7aaa7a;
|
||||
max-width: 420px;
|
||||
line-height: 1.9;
|
||||
margin-bottom: 2.5rem;
|
||||
font-style: italic;
|
||||
}
|
||||
.info-box {
|
||||
background: rgba(26,60,36,0.7);
|
||||
border: 1px solid rgba(74,138,90,0.4);
|
||||
border-radius: 8px;
|
||||
padding: 1.2rem 2rem;
|
||||
font-size: 0.82rem;
|
||||
color: #5a8a5a;
|
||||
letter-spacing: 0.05em;
|
||||
max-width: 380px;
|
||||
line-height: 1.8;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.footer-text {
|
||||
font-size: 0.68rem;
|
||||
color: #2a5a3a;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="tree-row">🌳 🌳 🌳</div>
|
||||
<p class="resort-name">Pine Ridge Resort</p>
|
||||
<h2>Est. 1994 — Pacific Northwest</h2>
|
||||
<div class="divider"><span class="divider-icon">♦</span></div>
|
||||
<h1>Temporarily Closed<br>for Updates</h1>
|
||||
<p>
|
||||
We are refreshing our resort website to better reflect the
|
||||
natural beauty and warmth of Pine Ridge. We'll welcome you
|
||||
back to our digital home shortly.
|
||||
</p>
|
||||
<div class="info-box">
|
||||
For reservations & inquiries during this period,<br>
|
||||
please call us at <strong style="color:#8fbc8f">(503) 555-0194</strong><br>
|
||||
or email <strong style="color:#8fbc8f">hello@pineridgeresort.com</strong>
|
||||
</div>
|
||||
<p class="footer-text">Pine Ridge Resort © 2025 — Nature, rest, renewal</p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,99 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Loading Something Great...</title>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
background: #1e3a3f;
|
||||
font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
background-image: linear-gradient(160deg, #162b30 0%, #1e4040 50%, #163035 100%);
|
||||
}
|
||||
.brand {
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.5em;
|
||||
text-transform: uppercase;
|
||||
color: #4ab8c4;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
h1 {
|
||||
font-size: clamp(1.8rem, 5vw, 3rem);
|
||||
color: #d6f0f2;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.6rem;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
.dots {
|
||||
display: inline-flex;
|
||||
gap: 0.5rem;
|
||||
margin-left: 0.3rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.dot {
|
||||
width: 8px; height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #4ab8c4;
|
||||
animation: bounce 1.4s ease-in-out infinite both;
|
||||
}
|
||||
.dot:nth-child(1) { animation-delay: 0s; }
|
||||
.dot:nth-child(2) { animation-delay: 0.2s; }
|
||||
.dot:nth-child(3) { animation-delay: 0.4s; }
|
||||
@keyframes bounce {
|
||||
0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
|
||||
40% { transform: scale(1); opacity: 1; }
|
||||
}
|
||||
.sub {
|
||||
font-size: 1rem;
|
||||
color: #6a9fa5;
|
||||
max-width: 380px;
|
||||
line-height: 1.8;
|
||||
margin-bottom: 3rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.bar-wrap {
|
||||
width: 280px;
|
||||
height: 4px;
|
||||
background: rgba(74,184,196,0.15);
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
margin: 0 auto 3rem;
|
||||
}
|
||||
.bar-inner {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #4ab8c4, #80d8e0);
|
||||
border-radius: 999px;
|
||||
animation: slide 2.8s ease-in-out infinite;
|
||||
}
|
||||
@keyframes slide {
|
||||
0% { width: 0; margin-left: 0; }
|
||||
50% { width: 70%; margin-left: 10%; }
|
||||
100% { width: 0; margin-left: 100%; }
|
||||
}
|
||||
.meta {
|
||||
font-size: 0.72rem;
|
||||
color: #3a6870;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p class="brand">Slate & Teal Studio</p>
|
||||
<h1>Loading Something Great<span class="dots"><span class="dot"></span><span class="dot"></span><span class="dot"></span></span></h1>
|
||||
<p class="sub">
|
||||
We're putting the final pieces together. Something worth waiting for
|
||||
is almost ready to launch. Check back very soon.
|
||||
</p>
|
||||
<div class="bar-wrap"><div class="bar-inner"></div></div>
|
||||
<p class="meta">Please stand by — we're nearly there</p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,114 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Morning Roast Coffee — We're Brewing Something New</title>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
background: #f5ede0;
|
||||
font-family: Georgia, 'Times New Roman', serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
background-image: radial-gradient(ellipse at top, #f5ede0, #e8d5b5);
|
||||
}
|
||||
.cup-icon { font-size: 3.5rem; margin-bottom: 0.5rem; }
|
||||
.steam {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 0.6rem;
|
||||
margin-bottom: 1.5rem;
|
||||
height: 20px;
|
||||
}
|
||||
.steam-line {
|
||||
width: 2px;
|
||||
height: 20px;
|
||||
background: linear-gradient(to top, #c8a06a, transparent);
|
||||
border-radius: 999px;
|
||||
animation: rise 2s ease-in-out infinite;
|
||||
}
|
||||
.steam-line:nth-child(2) { animation-delay: 0.4s; height: 14px; }
|
||||
.steam-line:nth-child(3) { animation-delay: 0.8s; height: 17px; }
|
||||
@keyframes rise {
|
||||
0% { transform: translateY(0) scaleX(1); opacity: 0.8; }
|
||||
100% { transform: translateY(-12px) scaleX(1.5); opacity: 0; }
|
||||
}
|
||||
.brand {
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.45em;
|
||||
text-transform: uppercase;
|
||||
color: #8b5e3c;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
h1 {
|
||||
font-size: clamp(1.9rem, 5vw, 3.2rem);
|
||||
color: #3d1f0a;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
h1 em { font-style: italic; color: #7a4520; }
|
||||
.divider {
|
||||
width: 50px;
|
||||
height: 2px;
|
||||
background: #c8a06a;
|
||||
margin: 0 auto 1.5rem;
|
||||
}
|
||||
p {
|
||||
font-size: 1rem;
|
||||
color: #7a5a3a;
|
||||
max-width: 400px;
|
||||
line-height: 1.9;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
.badge-list {
|
||||
display: flex;
|
||||
gap: 1.2rem;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
.badge {
|
||||
background: #fff8f0;
|
||||
border: 1px solid #d4a878;
|
||||
color: #7a4520;
|
||||
font-size: 0.75rem;
|
||||
padding: 0.35rem 0.9rem;
|
||||
border-radius: 4px;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
.footer {
|
||||
font-size: 0.72rem;
|
||||
color: #b8926a;
|
||||
letter-spacing: 0.12em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="cup-icon">☕</div>
|
||||
<div class="steam">
|
||||
<div class="steam-line"></div>
|
||||
<div class="steam-line"></div>
|
||||
<div class="steam-line"></div>
|
||||
</div>
|
||||
<p class="brand">Morning Roast Coffee</p>
|
||||
<h1>We're Brewing<br><em>Something New</em></h1>
|
||||
<div class="divider"></div>
|
||||
<p>
|
||||
Our new website is steeping nicely. We'll be ready to share our
|
||||
story, our beans, and our passion for the perfect cup — very soon.
|
||||
</p>
|
||||
<div class="badge-list">
|
||||
<span class="badge">Single Origin</span>
|
||||
<span class="badge">Small Batch</span>
|
||||
<span class="badge">Ethically Sourced</span>
|
||||
</div>
|
||||
<p class="footer">Morning Roast Coffee © 2025 — Every cup, a ritual</p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,141 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Pulse Analytics — Next Generation Platform</title>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
background: #03050f;
|
||||
color: #c0e8ff;
|
||||
font-family: 'Segoe UI', Arial, sans-serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* Grid background */
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-image:
|
||||
linear-gradient(rgba(0,180,255,0.06) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(0,180,255,0.06) 1px, transparent 1px);
|
||||
background-size: 40px 40px;
|
||||
pointer-events: none;
|
||||
}
|
||||
/* Glowing orb */
|
||||
body::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 50%; left: 50%;
|
||||
transform: translate(-50%, -55%);
|
||||
width: 600px; height: 600px;
|
||||
background: radial-gradient(circle, rgba(0,180,255,0.08) 0%, transparent 65%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.content { position: relative; z-index: 1; }
|
||||
.brand {
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.5em;
|
||||
text-transform: uppercase;
|
||||
color: #0090c8;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.logo-text {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: #00c8ff;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.logo-text .dot { color: #ffffff; }
|
||||
h1 {
|
||||
font-size: clamp(2rem, 6vw, 4.5rem);
|
||||
font-weight: 800;
|
||||
color: #ffffff;
|
||||
line-height: 1.05;
|
||||
margin-bottom: 0.5rem;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
h1 .accent { color: #00c8ff; }
|
||||
.sub {
|
||||
font-size: 1rem;
|
||||
color: #5090b0;
|
||||
max-width: 420px;
|
||||
line-height: 1.8;
|
||||
margin: 1.5rem auto 3rem;
|
||||
}
|
||||
.metric-row {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.metric {
|
||||
text-align: center;
|
||||
}
|
||||
.metric .val {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: #00c8ff;
|
||||
display: block;
|
||||
line-height: 1;
|
||||
}
|
||||
.metric .lbl {
|
||||
font-size: 0.62rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.2em;
|
||||
color: #305868;
|
||||
display: block;
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
.cyber-btn {
|
||||
display: inline-block;
|
||||
border: 1px solid #00c8ff;
|
||||
color: #00c8ff;
|
||||
padding: 0.65rem 2rem;
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.cyber-btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: rgba(0,200,255,0.05);
|
||||
}
|
||||
.footer { font-size: 0.65rem; color: #1a3848; letter-spacing: 0.2em; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<p class="brand">Pulse Analytics</p>
|
||||
<div class="logo-text">PULSE<span class="dot">.</span>IO</div>
|
||||
<h1>Next <span class="accent">Generation</span><br>Platform</h1>
|
||||
<p class="sub">
|
||||
We're engineering the future of real-time data analytics.
|
||||
Faster insights. Smarter decisions. Launching very soon.
|
||||
</p>
|
||||
<div class="metric-row">
|
||||
<div class="metric"><span class="val">10x</span><span class="lbl">Faster Processing</span></div>
|
||||
<div class="metric"><span class="val">99.9%</span><span class="lbl">Uptime SLA</span></div>
|
||||
<div class="metric"><span class="val"><1ms</span><span class="lbl">Latency</span></div>
|
||||
</div>
|
||||
<span class="cyber-btn">Notify Me at Launch</span>
|
||||
<br>
|
||||
<p class="footer">Pulse Analytics © 2025 — Private beta starting soon</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,118 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Mira Fashion — New Collection Dropping Soon</title>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
background: #f8f0f2;
|
||||
font-family: 'Palatino Linotype', Palatino, Georgia, serif;
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
@media (max-width: 650px) {
|
||||
body { grid-template-columns: 1fr; }
|
||||
.panel-right { display: none; }
|
||||
}
|
||||
.panel-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 4rem 3.5rem;
|
||||
background: #f8f0f2;
|
||||
}
|
||||
.eyebrow {
|
||||
font-size: 0.65rem;
|
||||
letter-spacing: 0.45em;
|
||||
text-transform: uppercase;
|
||||
color: #b0758a;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.brand-name {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 400;
|
||||
color: #2c0a14;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
h1 {
|
||||
font-size: clamp(1.6rem, 3vw, 2.4rem);
|
||||
color: #2c0a14;
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
line-height: 1.35;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
p {
|
||||
font-size: 0.95rem;
|
||||
color: #8a6070;
|
||||
line-height: 1.9;
|
||||
max-width: 340px;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
.season-tag {
|
||||
display: inline-block;
|
||||
border: 1px solid #c8a0b0;
|
||||
color: #9a6878;
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.3em;
|
||||
text-transform: uppercase;
|
||||
padding: 0.45rem 1.2rem;
|
||||
}
|
||||
.panel-right {
|
||||
background: linear-gradient(160deg, #c47090 0%, #a04060 60%, #7a2840 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.panel-right::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 10%; right: -20%;
|
||||
width: 200px; height: 200px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255,255,255,0.06);
|
||||
}
|
||||
.panel-right::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 15%; left: -10%;
|
||||
width: 150px; height: 150px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255,255,255,0.04);
|
||||
}
|
||||
.panel-inner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
color: rgba(255,255,255,0.85);
|
||||
}
|
||||
.panel-inner .big { font-size: 5rem; line-height: 1; margin-bottom: 0.5rem; }
|
||||
.panel-inner .small { font-size: 0.65rem; letter-spacing: 0.35em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="panel-left">
|
||||
<p class="eyebrow">Mira Fashion</p>
|
||||
<div class="brand-name">Mira</div>
|
||||
<h1>New Collection<br>Dropping Soon</h1>
|
||||
<p>
|
||||
Something extraordinary is being crafted for the new season.
|
||||
Our upcoming collection redefines elegance with a modern touch.
|
||||
</p>
|
||||
<span class="season-tag">Autumn / Winter 2025</span>
|
||||
</div>
|
||||
<div class="panel-right">
|
||||
<div class="panel-inner">
|
||||
<div class="big">✨</div>
|
||||
<div class="small">Collection reveal<br>coming soon</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,123 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Orbit Space Academy — Exploring New Frontiers</title>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
background: #05080f;
|
||||
color: #c8d8f8;
|
||||
font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* Stars */
|
||||
.stars {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.star {
|
||||
position: absolute;
|
||||
background: #ffffff;
|
||||
border-radius: 50%;
|
||||
animation: twinkle var(--d, 3s) ease-in-out infinite;
|
||||
}
|
||||
@keyframes twinkle { 0%,100%{opacity:0.2} 50%{opacity:1} }
|
||||
|
||||
.content { position: relative; z-index: 1; }
|
||||
.orbit-icon { font-size: 3.5rem; margin-bottom: 0.5rem; }
|
||||
.brand {
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.45em;
|
||||
text-transform: uppercase;
|
||||
color: #5070c0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.brand-large {
|
||||
font-size: 1.2rem;
|
||||
letter-spacing: 0.25em;
|
||||
text-transform: uppercase;
|
||||
color: #8098e0;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
h1 {
|
||||
font-size: clamp(2rem, 6vw, 4rem);
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 1rem;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
h1 .glow {
|
||||
color: #7090ff;
|
||||
text-shadow: 0 0 30px rgba(100,140,255,0.6);
|
||||
}
|
||||
.sub {
|
||||
font-size: 1rem;
|
||||
color: #5878a8;
|
||||
max-width: 400px;
|
||||
line-height: 1.8;
|
||||
margin: 1rem auto 3rem;
|
||||
}
|
||||
.ring {
|
||||
width: 100px; height: 100px;
|
||||
border: 2px solid rgba(100,140,255,0.3);
|
||||
border-radius: 50%;
|
||||
margin: 0 auto 2rem;
|
||||
position: relative;
|
||||
animation: spin 12s linear infinite;
|
||||
}
|
||||
.ring::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -4px; left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 8px; height: 8px;
|
||||
background: #7090ff;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 12px #7090ff;
|
||||
}
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
.footer {
|
||||
font-size: 0.68rem;
|
||||
color: #202840;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="stars" id="stars"></div>
|
||||
<div class="content">
|
||||
<div class="orbit-icon">🌐</div>
|
||||
<p class="brand">Orbit Space Academy</p>
|
||||
<div class="brand-large">Orbit Academy</div>
|
||||
<h1>Exploring<br><span class="glow">New Frontiers</span></h1>
|
||||
<p class="sub">
|
||||
We're launching a new era of space education. Our platform is being
|
||||
assembled in orbit — mission launch is imminent.
|
||||
</p>
|
||||
<div class="ring"></div>
|
||||
<p class="footer">Orbit Space Academy © 2025 — T-minus: soon</p>
|
||||
</div>
|
||||
<script>
|
||||
var s = document.getElementById('stars');
|
||||
for (var i = 0; i < 120; i++) {
|
||||
var el = document.createElement('div');
|
||||
el.className = 'star';
|
||||
var sz = Math.random() * 2 + 0.5;
|
||||
el.style.cssText = 'width:'+sz+'px;height:'+sz+'px;top:'+Math.random()*100+'%;left:'+Math.random()*100+'%;--d:'+(2+Math.random()*4)+'s;animation-delay:'+(Math.random()*4)+'s';
|
||||
s.appendChild(el);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,118 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Fieldwork Agency — Site Being Upgraded</title>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
background: #2a2e1e;
|
||||
color: #c8c8a8;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.header {
|
||||
border-bottom: 1px solid #3a4028;
|
||||
padding: 1.2rem 2.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.header .name {
|
||||
font-size: 0.85rem;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
color: #7a8a5a;
|
||||
}
|
||||
.header .year { color: #4a5a3a; font-size: 0.75rem; }
|
||||
.main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding: 4rem 2.5rem;
|
||||
max-width: 640px;
|
||||
}
|
||||
.label {
|
||||
font-size: 0.65rem;
|
||||
letter-spacing: 0.35em;
|
||||
text-transform: uppercase;
|
||||
color: #5a6a4a;
|
||||
margin-bottom: 1rem;
|
||||
border-left: 2px solid #7a8a5a;
|
||||
padding-left: 0.75rem;
|
||||
}
|
||||
h1 {
|
||||
font-size: clamp(1.8rem, 4vw, 3rem);
|
||||
color: #e8e8c8;
|
||||
font-weight: 400;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 2rem;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
.body-text {
|
||||
font-size: 0.87rem;
|
||||
color: #8a9a6a;
|
||||
line-height: 2;
|
||||
max-width: 460px;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.list {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.list li {
|
||||
font-size: 0.78rem;
|
||||
color: #6a7a5a;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
.list li::before {
|
||||
content: '//';
|
||||
color: #4a5a3a;
|
||||
font-size: 0.7rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.list li.done { color: #9aaa7a; }
|
||||
.list li.done::before { content: 'OK'; color: #7a8a5a; }
|
||||
.footer-bar {
|
||||
border-top: 1px solid #3a4028;
|
||||
padding: 1rem 2.5rem;
|
||||
font-size: 0.65rem;
|
||||
color: #3a4a2a;
|
||||
letter-spacing: 0.15em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<span class="name">Fieldwork Agency</span>
|
||||
<span class="year">Est. 2019</span>
|
||||
</div>
|
||||
<div class="main">
|
||||
<div class="label">System Notice</div>
|
||||
<h1>Site is being<br>upgraded.</h1>
|
||||
<p class="body-text">
|
||||
We are currently upgrading our digital infrastructure.
|
||||
All existing client work and deliverables remain unaffected.
|
||||
We'll be back online shortly.
|
||||
</p>
|
||||
<ul class="list">
|
||||
<li class="done">Back-end migration complete</li>
|
||||
<li class="done">Content audit complete</li>
|
||||
<li>Front-end rebuild — in progress</li>
|
||||
<li>QA and testing — pending</li>
|
||||
<li>Go live — soon</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-bar">Fieldwork Agency — fieldworkagency.com — 2025</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,97 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Voltage Creative — Big Things Are Coming</title>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
background: #ffe800;
|
||||
color: #111111;
|
||||
font-family: Impact, 'Arial Narrow', 'Franklin Gothic Medium', Arial, sans-serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
.bolt {
|
||||
font-size: 4rem;
|
||||
line-height: 1;
|
||||
margin-bottom: 0.5rem;
|
||||
filter: drop-shadow(4px 4px 0 rgba(0,0,0,0.25));
|
||||
}
|
||||
.brand {
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.4em;
|
||||
text-transform: uppercase;
|
||||
color: #333;
|
||||
margin-bottom: 1rem;
|
||||
font-family: Arial, sans-serif;
|
||||
font-weight: 700;
|
||||
}
|
||||
h1 {
|
||||
font-size: clamp(3rem, 12vw, 9rem);
|
||||
color: #111;
|
||||
text-transform: uppercase;
|
||||
line-height: 0.9;
|
||||
letter-spacing: -3px;
|
||||
margin-bottom: 1rem;
|
||||
text-shadow: 5px 5px 0 rgba(0,0,0,0.15);
|
||||
}
|
||||
.sub {
|
||||
font-size: 1.1rem;
|
||||
letter-spacing: 0.25em;
|
||||
text-transform: uppercase;
|
||||
color: #333;
|
||||
font-family: Arial, sans-serif;
|
||||
font-weight: 700;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.black-box {
|
||||
background: #111;
|
||||
color: #ffe800;
|
||||
padding: 1.2rem 3rem;
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.3em;
|
||||
text-transform: uppercase;
|
||||
font-family: Arial, sans-serif;
|
||||
font-weight: 700;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
.row {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.stat { text-align: center; }
|
||||
.stat .n { font-size: 2.5rem; color: #111; line-height: 1; display: block; }
|
||||
.stat .l { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: #555; font-family: Arial, sans-serif; font-weight: 700; }
|
||||
.footer {
|
||||
font-size: 0.68rem;
|
||||
color: #555;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="bolt">⚡</div>
|
||||
<p class="brand">Voltage Creative</p>
|
||||
<h1>Big<br>Things</h1>
|
||||
<p class="sub">Are Coming — Stay Charged</p>
|
||||
<div class="black-box">New website launching very soon</div>
|
||||
<div class="row">
|
||||
<div class="stat"><span class="n">08</span><span class="l">Years Active</span></div>
|
||||
<div class="stat"><span class="n">200+</span><span class="l">Campaigns</span></div>
|
||||
<div class="stat"><span class="n">40+</span><span class="l">Awards</span></div>
|
||||
</div>
|
||||
<p class="footer">Voltage Creative © 2025 — Power up your brand</p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,111 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Almost Ready...</title>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
background: #f0f2f5;
|
||||
font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
.card {
|
||||
background: #ffffff;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 40px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
|
||||
padding: 3rem 2.5rem;
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
}
|
||||
.icon-area {
|
||||
width: 64px; height: 64px;
|
||||
background: #eef1f8;
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 1.5rem;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
.company {
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.3em;
|
||||
text-transform: uppercase;
|
||||
color: #6b7c9e;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
h1 {
|
||||
font-size: 1.9rem;
|
||||
font-weight: 700;
|
||||
color: #1a2440;
|
||||
margin-bottom: 0.75rem;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
p {
|
||||
font-size: 0.93rem;
|
||||
color: #7080a0;
|
||||
line-height: 1.8;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.progress-section { margin-bottom: 1.5rem; }
|
||||
.progress-label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 0.73rem;
|
||||
color: #8898b8;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.progress-track {
|
||||
height: 6px;
|
||||
background: #e8edf8;
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
border-radius: 999px;
|
||||
animation: grow var(--dur) ease-out forwards;
|
||||
}
|
||||
.fill-1 { background: linear-gradient(90deg, #4a6ef5, #7090ff); --dur: 1.5s; }
|
||||
.fill-2 { background: linear-gradient(90deg, #4a6ef5, #7090ff); --dur: 2s; }
|
||||
.fill-3 { background: linear-gradient(90deg, #4a6ef5, #7090ff); --dur: 2.8s; }
|
||||
@keyframes grow { from { width: 0; } }
|
||||
.fill-1 { width: 100%; }
|
||||
.fill-2 { width: 78%; }
|
||||
.fill-3 { width: 45%; }
|
||||
.divider { height: 1px; background: #eef0f8; margin-bottom: 1.5rem; }
|
||||
.footer-card {
|
||||
font-size: 0.7rem;
|
||||
color: #b0b8d0;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="card">
|
||||
<div class="icon-area">🚀</div>
|
||||
<p class="company">Apex Digital</p>
|
||||
<h1>Almost Ready...</h1>
|
||||
<p>We're putting the final pieces in place before our big launch. Things are looking great — just a little longer.</p>
|
||||
<div class="progress-section">
|
||||
<div class="progress-label"><span>Design</span><span>100%</span></div>
|
||||
<div class="progress-track"><div class="progress-fill fill-1"></div></div>
|
||||
<div class="progress-label"><span>Development</span><span>78%</span></div>
|
||||
<div class="progress-track"><div class="progress-fill fill-2"></div></div>
|
||||
<div class="progress-label"><span>Content & Testing</span><span>45%</span></div>
|
||||
<div class="progress-track"><div class="progress-fill fill-3"></div></div>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<p class="footer-card">Apex Digital © 2025 — Expected launch: Q3 2025</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,129 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Terra Design Studio — Under Construction</title>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
background: #c8622a;
|
||||
color: #f5e8d8;
|
||||
font-family: 'Trebuchet MS', 'Gill Sans', Arial, sans-serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-image:
|
||||
linear-gradient(135deg, #c8622a 0%, #a8441a 60%, #8a3210 100%);
|
||||
}
|
||||
.top-band {
|
||||
height: 4px;
|
||||
background: repeating-linear-gradient(90deg, #f5c88a 0px, #f5c88a 20px, transparent 20px, transparent 40px);
|
||||
}
|
||||
.main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 4rem 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
.texture-block {
|
||||
width: 72px; height: 72px;
|
||||
background: #f5c88a;
|
||||
margin: 0 auto 2rem;
|
||||
position: relative;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.texture-block::after {
|
||||
content: 'T';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
font-weight: 900;
|
||||
color: #8a3210;
|
||||
}
|
||||
.brand {
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.45em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(245,200,138,0.7);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.brand-large {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 700;
|
||||
color: #f5c88a;
|
||||
letter-spacing: 0.05em;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
h1 {
|
||||
font-size: clamp(1.8rem, 5vw, 3rem);
|
||||
font-weight: 700;
|
||||
color: #fff5e8;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.check-back {
|
||||
font-size: 1.1rem;
|
||||
color: #f5c88a;
|
||||
font-style: italic;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
.clay-block {
|
||||
background: rgba(0,0,0,0.2);
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem 2rem;
|
||||
max-width: 420px;
|
||||
font-size: 0.9rem;
|
||||
color: rgba(245,232,216,0.75);
|
||||
line-height: 1.8;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
.services {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.svc {
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(245,200,138,0.65);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
.svc::before { content: '■'; font-size: 0.4rem; color: #f5c88a; }
|
||||
.footer { font-size: 0.68rem; color: rgba(245,200,138,0.4); letter-spacing: 0.1em; }
|
||||
.bottom-band { height: 4px; background: repeating-linear-gradient(90deg, #f5c88a 0px, #f5c88a 20px, transparent 20px, transparent 40px); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-band"></div>
|
||||
<div class="main">
|
||||
<div class="texture-block"></div>
|
||||
<p class="brand">Est. 2017</p>
|
||||
<div class="brand-large">Terra Design Studio</div>
|
||||
<h1>Under Construction</h1>
|
||||
<p class="check-back">Check back soon —</p>
|
||||
<div class="clay-block">
|
||||
We're reshaping our digital presence with the same care and craft
|
||||
we bring to every project. Warm tones, honest work, and bold ideas — coming soon.
|
||||
</div>
|
||||
<div class="services">
|
||||
<span class="svc">Brand Identity</span>
|
||||
<span class="svc">Print Design</span>
|
||||
<span class="svc">Environmental</span>
|
||||
</div>
|
||||
<p class="footer">Terra Design Studio © 2025 — terrastudio.design</p>
|
||||
</div>
|
||||
<div class="bottom-band"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,131 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Arctic Digital — New Website Launching Soon</title>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
background: #edf6ff;
|
||||
font-family: 'Segoe UI', 'Century Gothic', Arial, sans-serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
background-image:
|
||||
linear-gradient(160deg, #ffffff 0%, #e0f2ff 50%, #cce8ff 100%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* Ice crystal shapes */
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: -100px; right: -100px;
|
||||
width: 400px; height: 400px;
|
||||
background: radial-gradient(circle, rgba(200,235,255,0.8) 0%, transparent 65%);
|
||||
pointer-events: none;
|
||||
}
|
||||
body::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
bottom: -60px; left: -60px;
|
||||
width: 280px; height: 280px;
|
||||
background: radial-gradient(circle, rgba(180,225,255,0.7) 0%, transparent 65%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.crystal { font-size: 3rem; margin-bottom: 0.5rem; }
|
||||
.brand {
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.45em;
|
||||
text-transform: uppercase;
|
||||
color: #4a8ab0;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
.brand-lg {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 700;
|
||||
color: #1a5080;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
h1 {
|
||||
font-size: clamp(1.9rem, 5vw, 3.2rem);
|
||||
color: #0d3a5c;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.5px;
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.tagline {
|
||||
font-size: 0.85rem;
|
||||
color: #5090b8;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
p {
|
||||
font-size: 0.97rem;
|
||||
color: #5080a0;
|
||||
max-width: 400px;
|
||||
line-height: 1.85;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
.ice-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.75rem;
|
||||
max-width: 380px;
|
||||
width: 100%;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
.ice-cell {
|
||||
background: rgba(255,255,255,0.7);
|
||||
border: 1px solid rgba(130,190,230,0.4);
|
||||
border-radius: 10px;
|
||||
padding: 1rem;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
.ice-cell .label {
|
||||
font-size: 0.65rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.15em;
|
||||
color: #6898b8;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
.ice-cell .value {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: #1a5080;
|
||||
}
|
||||
.footer {
|
||||
font-size: 0.7rem;
|
||||
color: #90bcd8;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="crystal">❄</div>
|
||||
<p class="brand">Arctic Digital</p>
|
||||
<div class="brand-lg">Arctic Digital</div>
|
||||
<h1>New Website<br>Launching Soon</h1>
|
||||
<p class="tagline">Clear, Fast & Precise</p>
|
||||
<p>
|
||||
We're crafting a crisp new digital experience that reflects our
|
||||
commitment to clarity and precision in everything we do.
|
||||
</p>
|
||||
<div class="ice-grid">
|
||||
<div class="ice-cell"><div class="label">Status</div><div class="value">Building</div></div>
|
||||
<div class="ice-cell"><div class="label">ETA</div><div class="value">Q3 2025</div></div>
|
||||
<div class="ice-cell"><div class="label">Design</div><div class="value">Complete</div></div>
|
||||
<div class="ice-cell"><div class="label">Dev</div><div class="value">In Progress</div></div>
|
||||
</div>
|
||||
<p class="footer">Arctic Digital © 2025 — Precision-crafted digital solutions</p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,189 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Indigo Labs — The Wait Is Almost Over</title>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
background: #0c0820;
|
||||
color: #c8c0f0;
|
||||
font-family: 'Segoe UI', Arial, sans-serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
background-image:
|
||||
radial-gradient(ellipse at 30% 20%, rgba(80,40,180,0.35) 0%, transparent 55%),
|
||||
radial-gradient(ellipse at 70% 80%, rgba(60,20,140,0.4) 0%, transparent 50%);
|
||||
overflow: hidden;
|
||||
}
|
||||
/* Animated ring */
|
||||
.ring-wrap {
|
||||
position: relative;
|
||||
width: 120px; height: 120px;
|
||||
margin: 0 auto 2rem;
|
||||
}
|
||||
.ring-outer {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(120,80,240,0.3);
|
||||
animation: spin-slow 15s linear infinite;
|
||||
}
|
||||
.ring-outer::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -2px; left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 6px; height: 6px;
|
||||
background: #9060f0;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 10px #9060f0;
|
||||
}
|
||||
.ring-middle {
|
||||
position: absolute;
|
||||
inset: 15px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(100,60,220,0.4);
|
||||
animation: spin-slow 10s linear infinite reverse;
|
||||
}
|
||||
.ring-center {
|
||||
position: absolute;
|
||||
inset: 35px;
|
||||
border-radius: 50%;
|
||||
background: rgba(90,50,200,0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
@keyframes spin-slow { to { transform: rotate(360deg); } }
|
||||
.brand {
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.5em;
|
||||
text-transform: uppercase;
|
||||
color: #6040c0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.brand-lg {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 700;
|
||||
color: #9070e0;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
h1 {
|
||||
font-size: clamp(2rem, 5.5vw, 3.8rem);
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 1rem;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
h1 .accent {
|
||||
color: #9060f0;
|
||||
text-shadow: 0 0 30px rgba(144,96,240,0.5);
|
||||
}
|
||||
.sub {
|
||||
font-size: 1rem;
|
||||
color: #7060b0;
|
||||
max-width: 420px;
|
||||
line-height: 1.85;
|
||||
margin: 1rem auto 3rem;
|
||||
}
|
||||
.pill-row {
|
||||
display: flex;
|
||||
gap: 0.6rem;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.pill {
|
||||
background: rgba(90,50,200,0.2);
|
||||
border: 1px solid rgba(120,80,240,0.4);
|
||||
color: #9070e0;
|
||||
font-size: 0.75rem;
|
||||
padding: 0.4rem 1rem;
|
||||
border-radius: 999px;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
.countdown-strip {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
.cd-unit {
|
||||
text-align: center;
|
||||
}
|
||||
.cd-num {
|
||||
display: block;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: #9060f0;
|
||||
font-variant-numeric: tabular-nums;
|
||||
line-height: 1;
|
||||
background: rgba(90,50,200,0.15);
|
||||
border: 1px solid rgba(120,80,240,0.3);
|
||||
border-radius: 8px;
|
||||
padding: 0.6rem 1rem;
|
||||
min-width: 70px;
|
||||
}
|
||||
.cd-lbl {
|
||||
display: block;
|
||||
font-size: 0.6rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.2em;
|
||||
color: #4030a0;
|
||||
margin-top: 0.4rem;
|
||||
}
|
||||
.footer { font-size: 0.68rem; color: #2a1a60; letter-spacing: 0.15em; text-transform: uppercase; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="ring-wrap">
|
||||
<div class="ring-outer"></div>
|
||||
<div class="ring-middle"></div>
|
||||
<div class="ring-center">✦</div>
|
||||
</div>
|
||||
<p class="brand">Indigo Labs</p>
|
||||
<div class="brand-lg">Indigo Labs</div>
|
||||
<h1>The Wait Is<br><span class="accent">Almost Over</span></h1>
|
||||
<p class="sub">
|
||||
We've been heads-down building something that will change how teams
|
||||
collaborate, create, and ship. The countdown has begun.
|
||||
</p>
|
||||
<div class="countdown-strip">
|
||||
<div class="cd-unit"><span class="cd-num" id="d25">00</span><span class="cd-lbl">Days</span></div>
|
||||
<div class="cd-unit"><span class="cd-num" id="h25">00</span><span class="cd-lbl">Hours</span></div>
|
||||
<div class="cd-unit"><span class="cd-num" id="m25">00</span><span class="cd-lbl">Minutes</span></div>
|
||||
<div class="cd-unit"><span class="cd-num" id="s25">00</span><span class="cd-lbl">Seconds</span></div>
|
||||
</div>
|
||||
<div class="pill-row">
|
||||
<span class="pill">AI-Powered</span>
|
||||
<span class="pill">Real-Time</span>
|
||||
<span class="pill">Team Collaboration</span>
|
||||
<span class="pill">Enterprise Ready</span>
|
||||
</div>
|
||||
<p class="footer">Indigo Labs © 2025 — Private beta coming soon</p>
|
||||
<script>
|
||||
var t = new Date(); t.setDate(t.getDate() + 23);
|
||||
function tick() {
|
||||
var diff = t - new Date();
|
||||
if (diff < 0) return;
|
||||
document.getElementById('d25').textContent = String(Math.floor(diff/86400000)).padStart(2,'0');
|
||||
document.getElementById('h25').textContent = String(Math.floor(diff%86400000/3600000)).padStart(2,'0');
|
||||
document.getElementById('m25').textContent = String(Math.floor(diff%3600000/60000)).padStart(2,'0');
|
||||
document.getElementById('s25').textContent = String(Math.floor(diff%60000/1000)).padStart(2,'0');
|
||||
}
|
||||
tick(); setInterval(tick, 1000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,162 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>System Upgrade in Progress</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: #000;
|
||||
color: #00ff41;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: repeating-linear-gradient(
|
||||
0deg,
|
||||
transparent,
|
||||
transparent 2px,
|
||||
rgba(0,255,65,0.03) 2px,
|
||||
rgba(0,255,65,0.03) 4px
|
||||
);
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
}
|
||||
.scanline {
|
||||
position: fixed;
|
||||
top: -100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 30%;
|
||||
background: linear-gradient(transparent, rgba(0,255,65,0.04), transparent);
|
||||
animation: scan 8s linear infinite;
|
||||
pointer-events: none;
|
||||
z-index: 11;
|
||||
}
|
||||
@keyframes scan {
|
||||
0% { top: -30%; }
|
||||
100% { top: 110%; }
|
||||
}
|
||||
.container {
|
||||
text-align: center;
|
||||
z-index: 5;
|
||||
padding: 2rem;
|
||||
max-width: 700px;
|
||||
}
|
||||
.glitch-title {
|
||||
font-size: clamp(2rem, 6vw, 4rem);
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
text-shadow:
|
||||
0 0 10px #00ff41,
|
||||
0 0 30px #00ff41,
|
||||
0 0 60px #00ff41;
|
||||
animation: flicker 4s infinite;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
@keyframes flicker {
|
||||
0%, 95%, 100% { opacity: 1; }
|
||||
96% { opacity: 0.4; }
|
||||
97% { opacity: 1; }
|
||||
98% { opacity: 0.2; }
|
||||
99% { opacity: 0.9; }
|
||||
}
|
||||
.subtitle {
|
||||
font-size: 1.1rem;
|
||||
color: #00cc33;
|
||||
letter-spacing: 0.3em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.terminal-box {
|
||||
border: 1px solid #00ff41;
|
||||
padding: 1.5rem 2rem;
|
||||
text-align: left;
|
||||
margin-bottom: 2rem;
|
||||
box-shadow: 0 0 20px rgba(0,255,65,0.2), inset 0 0 20px rgba(0,255,65,0.05);
|
||||
}
|
||||
.terminal-line {
|
||||
font-size: 0.85rem;
|
||||
line-height: 2;
|
||||
color: #00dd38;
|
||||
}
|
||||
.terminal-line .prompt { color: #00ff41; }
|
||||
.terminal-line .ok { color: #00ff41; }
|
||||
.terminal-line .warn { color: #ffdd00; }
|
||||
.blink {
|
||||
animation: blink 1s step-end infinite;
|
||||
}
|
||||
@keyframes blink {
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
.progress-wrap {
|
||||
border: 1px solid #00ff41;
|
||||
height: 20px;
|
||||
width: 100%;
|
||||
margin-top: 2rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.progress-bar {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #003300, #00ff41);
|
||||
width: 73%;
|
||||
box-shadow: 0 0 15px #00ff41;
|
||||
animation: pulse 2s ease-in-out infinite alternate;
|
||||
}
|
||||
@keyframes pulse {
|
||||
from { box-shadow: 0 0 10px #00ff41; }
|
||||
to { box-shadow: 0 0 30px #00ff41, 0 0 60px #00aa28; }
|
||||
}
|
||||
.progress-label {
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
letter-spacing: 0.2em;
|
||||
color: #009922;
|
||||
}
|
||||
.corner {
|
||||
position: fixed;
|
||||
font-size: 0.65rem;
|
||||
color: #004411;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
.corner.tl { top: 1rem; left: 1rem; }
|
||||
.corner.tr { top: 1rem; right: 1rem; }
|
||||
.corner.bl { bottom: 1rem; left: 1rem; }
|
||||
.corner.br { bottom: 1rem; right: 1rem; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="scanline"></div>
|
||||
<span class="corner tl">SYS.VER 4.2.0</span>
|
||||
<span class="corner tr">NODE: ALPHA-7</span>
|
||||
<span class="corner bl">UPLINK: SECURE</span>
|
||||
<span class="corner br">● ONLINE</span>
|
||||
<div class="container">
|
||||
<div class="glitch-title">SYSTEM UPGRADE</div>
|
||||
<div class="subtitle">// in progress //</div>
|
||||
<div class="terminal-box">
|
||||
<div class="terminal-line"><span class="prompt">> </span>Initializing core modules... <span class="ok">[OK]</span></div>
|
||||
<div class="terminal-line"><span class="prompt">> </span>Flushing legacy cache... <span class="ok">[OK]</span></div>
|
||||
<div class="terminal-line"><span class="prompt">> </span>Migrating database clusters... <span class="warn">[73%]</span></div>
|
||||
<div class="terminal-line"><span class="prompt">> </span>Deploying new architecture... <span class="warn">[PENDING]</span></div>
|
||||
<div class="terminal-line"><span class="prompt">> </span><span class="blink">█</span></div>
|
||||
</div>
|
||||
<div class="progress-wrap">
|
||||
<div class="progress-bar"></div>
|
||||
</div>
|
||||
<div class="progress-label">UPGRADE SEQUENCE :: 73% COMPLETE :: EST. 6 HOURS REMAINING</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,122 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Fresh Market Online — Opening Soon</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: #f0faf4;
|
||||
color: #2d6a4f;
|
||||
font-family: Georgia, 'Times New Roman', serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.top-strip {
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0;
|
||||
height: 6px;
|
||||
background: linear-gradient(90deg, #74c69d, #40916c, #52b788, #74c69d);
|
||||
}
|
||||
.container {
|
||||
max-width: 600px;
|
||||
text-align: center;
|
||||
padding: 3rem 2rem;
|
||||
}
|
||||
.leaf-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1.5rem;
|
||||
display: block;
|
||||
filter: drop-shadow(0 2px 6px rgba(64,145,108,0.3));
|
||||
}
|
||||
.brand {
|
||||
font-size: 0.85rem;
|
||||
letter-spacing: 0.35em;
|
||||
text-transform: uppercase;
|
||||
color: #40916c;
|
||||
margin-bottom: 0.75rem;
|
||||
font-family: 'Trebuchet MS', Arial, sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: clamp(2rem, 5vw, 3rem);
|
||||
font-weight: normal;
|
||||
color: #1b4332;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
h1 em {
|
||||
font-style: italic;
|
||||
color: #40916c;
|
||||
}
|
||||
.divider {
|
||||
width: 60px;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, #74c69d, transparent);
|
||||
margin: 1.5rem auto;
|
||||
}
|
||||
p {
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.8;
|
||||
color: #52796f;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.features {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
justify-content: center;
|
||||
margin: 2rem 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.feature {
|
||||
background: #fff;
|
||||
border: 1px solid #d8f3dc;
|
||||
border-radius: 8px;
|
||||
padding: 1rem 1.25rem;
|
||||
font-size: 0.85rem;
|
||||
color: #40916c;
|
||||
font-family: 'Trebuchet MS', Arial, sans-serif;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
.feature span {
|
||||
display: block;
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
.note {
|
||||
font-size: 0.85rem;
|
||||
color: #95d5b2;
|
||||
letter-spacing: 0.1em;
|
||||
font-family: 'Trebuchet MS', Arial, sans-serif;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.bottom-strip {
|
||||
position: fixed;
|
||||
bottom: 0; left: 0; right: 0;
|
||||
height: 6px;
|
||||
background: linear-gradient(90deg, #74c69d, #40916c, #52b788, #74c69d);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-strip"></div>
|
||||
<div class="container">
|
||||
<span class="leaf-icon">🌿</span>
|
||||
<div class="brand">Fresh Market Online</div>
|
||||
<h1>Freshly Redesigned —<br><em>Opening Soon</em></h1>
|
||||
<div class="divider"></div>
|
||||
<p>We're giving our online shop a fresh makeover. New products, better navigation, and a smoother experience are on the way.</p>
|
||||
<p>Our farmers and artisan suppliers are ready. We just need a little more time to get everything looking as good as it tastes.</p>
|
||||
<div class="features">
|
||||
<div class="feature"><span>🥬</span>Seasonal Produce</div>
|
||||
<div class="feature"><span>🧀</span>Artisan Goods</div>
|
||||
<div class="feature"><span>🚚</span>Local Delivery</div>
|
||||
</div>
|
||||
<div class="note">Check back very soon</div>
|
||||
</div>
|
||||
<div class="bottom-strip"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,155 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Hold Tight — We're Working On It</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: #0a3d47;
|
||||
color: #e0f7fa;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 3rem 2rem;
|
||||
max-width: 620px;
|
||||
}
|
||||
.spinner-wrap {
|
||||
margin-bottom: 3rem;
|
||||
position: relative;
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
}
|
||||
.ring {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 50%;
|
||||
border: 4px solid transparent;
|
||||
}
|
||||
.ring-1 {
|
||||
border-top-color: #00bcd4;
|
||||
border-right-color: #00bcd4;
|
||||
animation: spin1 1.4s linear infinite;
|
||||
}
|
||||
.ring-2 {
|
||||
inset: 12px;
|
||||
border-bottom-color: #4dd0e1;
|
||||
border-left-color: #4dd0e1;
|
||||
animation: spin2 1.0s linear infinite reverse;
|
||||
}
|
||||
.ring-3 {
|
||||
inset: 26px;
|
||||
border-top-color: #80deea;
|
||||
animation: spin1 1.8s linear infinite;
|
||||
}
|
||||
.dot {
|
||||
position: absolute;
|
||||
inset: 44px;
|
||||
border-radius: 50%;
|
||||
background: #00bcd4;
|
||||
box-shadow: 0 0 20px #00bcd4;
|
||||
animation: dotpulse 1.4s ease-in-out infinite alternate;
|
||||
}
|
||||
@keyframes spin1 { to { transform: rotate(360deg); } }
|
||||
@keyframes spin2 { to { transform: rotate(360deg); } }
|
||||
@keyframes dotpulse {
|
||||
from { transform: scale(0.7); opacity: 0.6; }
|
||||
to { transform: scale(1); opacity: 1; }
|
||||
}
|
||||
.eyebrow {
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.4em;
|
||||
text-transform: uppercase;
|
||||
color: #4dd0e1;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
h1 {
|
||||
font-size: clamp(1.8rem, 5vw, 2.8rem);
|
||||
font-weight: 300;
|
||||
color: #e0f7fa;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
h1 strong { font-weight: 700; color: #00e5ff; }
|
||||
.divider {
|
||||
width: 40px;
|
||||
height: 3px;
|
||||
background: #00bcd4;
|
||||
border-radius: 2px;
|
||||
margin: 1.5rem auto;
|
||||
}
|
||||
p {
|
||||
font-size: 1rem;
|
||||
line-height: 1.8;
|
||||
color: #80deea;
|
||||
max-width: 420px;
|
||||
}
|
||||
.status-row {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
margin-top: 2.5rem;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
.status-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
.status-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: #00bcd4;
|
||||
box-shadow: 0 0 8px #00bcd4;
|
||||
animation: dotpulse 2s ease-in-out infinite alternate;
|
||||
}
|
||||
.status-dot.delayed { background: #ffca28; box-shadow: 0 0 8px #ffca28; animation-delay: 0.6s; }
|
||||
.status-dot.offline { background: #546e7a; box-shadow: none; animation: none; }
|
||||
.status-label {
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.1em;
|
||||
color: #80deea;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<div class="spinner-wrap">
|
||||
<div class="ring ring-1"></div>
|
||||
<div class="ring ring-2"></div>
|
||||
<div class="ring ring-3"></div>
|
||||
<div class="dot"></div>
|
||||
</div>
|
||||
<div class="eyebrow">Scheduled Maintenance</div>
|
||||
<h1>Hold tight,<br><strong>we're working on it.</strong></h1>
|
||||
<div class="divider"></div>
|
||||
<p>Our team is currently performing essential maintenance. Everything will be back online shortly — we appreciate your patience.</p>
|
||||
<div class="status-row">
|
||||
<div class="status-item">
|
||||
<div class="status-dot"></div>
|
||||
<div class="status-label">API Live</div>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<div class="status-dot delayed"></div>
|
||||
<div class="status-label">Web UI</div>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<div class="status-dot offline"></div>
|
||||
<div class="status-label">Portal</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,126 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>The Cellar Restaurant — Temporarily Unavailable</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: #3b0a1f;
|
||||
color: #f5e6d3;
|
||||
font-family: 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.bg-texture {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background:
|
||||
radial-gradient(ellipse at 20% 50%, rgba(90,20,40,0.5) 0%, transparent 60%),
|
||||
radial-gradient(ellipse at 80% 50%, rgba(60,5,20,0.6) 0%, transparent 60%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.container {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
max-width: 560px;
|
||||
text-align: center;
|
||||
padding: 4rem 2.5rem;
|
||||
}
|
||||
.ornament {
|
||||
color: #8b2545;
|
||||
font-size: 1.8rem;
|
||||
letter-spacing: 0.5em;
|
||||
margin-bottom: 1rem;
|
||||
display: block;
|
||||
}
|
||||
.brand {
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.45em;
|
||||
text-transform: uppercase;
|
||||
color: #c9a87c;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
h1 {
|
||||
font-size: clamp(1.6rem, 4vw, 2.4rem);
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
color: #f5e6d3;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.rule {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin: 1.5rem auto;
|
||||
max-width: 300px;
|
||||
}
|
||||
.rule-line { flex: 1; height: 1px; background: #8b2545; }
|
||||
.rule-diamond { color: #c9a87c; font-size: 0.6rem; }
|
||||
p {
|
||||
font-size: 1rem;
|
||||
line-height: 1.9;
|
||||
color: #d4b896;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.hours-box {
|
||||
border: 1px solid #5a1428;
|
||||
padding: 1.5rem;
|
||||
margin: 2rem 0;
|
||||
background: rgba(0,0,0,0.2);
|
||||
}
|
||||
.hours-title {
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.4em;
|
||||
text-transform: uppercase;
|
||||
color: #8b2545;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.hours-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 0.9rem;
|
||||
color: #c9a87c;
|
||||
padding: 0.3rem 0;
|
||||
border-bottom: 1px solid rgba(139,37,69,0.2);
|
||||
}
|
||||
.hours-row:last-child { border-bottom: none; }
|
||||
.hours-row .day { color: #d4b896; }
|
||||
.footer-note {
|
||||
font-size: 0.8rem;
|
||||
color: #8b2545;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="bg-texture"></div>
|
||||
<div class="container">
|
||||
<span class="ornament">❧</span>
|
||||
<div class="brand">The Cellar Restaurant</div>
|
||||
<h1>Temporarily Unavailable</h1>
|
||||
<div class="rule">
|
||||
<span class="rule-line"></span>
|
||||
<span class="rule-diamond">◆</span>
|
||||
<span class="rule-line"></span>
|
||||
</div>
|
||||
<p>We have taken our online reservation system offline for a brief period while we transition to a new service. We apologise for any inconvenience this may cause.</p>
|
||||
<p>The Cellar remains open for dining. Please contact us directly to make a reservation during this time.</p>
|
||||
<div class="hours-box">
|
||||
<div class="hours-title">Dining Hours</div>
|
||||
<div class="hours-row"><span class="day">Tuesday – Thursday</span><span>6:00 pm – 10:00 pm</span></div>
|
||||
<div class="hours-row"><span class="day">Friday – Saturday</span><span>5:30 pm – 11:00 pm</span></div>
|
||||
<div class="hours-row"><span class="day">Sunday</span><span>5:30 pm – 9:00 pm</span></div>
|
||||
<div class="hours-row"><span class="day">Monday</span><span>Closed</span></div>
|
||||
</div>
|
||||
<div class="footer-note">Online reservations returning shortly</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,176 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Website in Press</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: #f8f6f1;
|
||||
color: #111;
|
||||
font-family: 'Times New Roman', Times, serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.masthead {
|
||||
border-bottom: 6px double #111;
|
||||
padding: 1.5rem 3rem;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.edition {
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.1em;
|
||||
color: #444;
|
||||
font-family: 'Arial Narrow', Arial, sans-serif;
|
||||
}
|
||||
.pub-name {
|
||||
font-size: clamp(2rem, 6vw, 3.5rem);
|
||||
font-weight: 900;
|
||||
letter-spacing: -0.02em;
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
font-family: 'Times New Roman', serif;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.date-col {
|
||||
font-size: 0.7rem;
|
||||
color: #444;
|
||||
text-align: right;
|
||||
font-family: 'Arial Narrow', Arial, sans-serif;
|
||||
}
|
||||
.rule-thick { border: none; border-top: 3px solid #111; margin: 0; }
|
||||
.rule-thin { border: none; border-top: 1px solid #111; margin: 0.2rem 0 0; }
|
||||
.main {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr 1fr;
|
||||
gap: 0;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem 2rem;
|
||||
width: 100%;
|
||||
}
|
||||
.col {
|
||||
padding: 0 1.25rem;
|
||||
}
|
||||
.col + .col { border-left: 1px solid #aaa; }
|
||||
.headline {
|
||||
font-size: clamp(1.5rem, 3vw, 2.2rem);
|
||||
font-weight: 900;
|
||||
line-height: 1.15;
|
||||
margin-bottom: 0.75rem;
|
||||
text-align: center;
|
||||
font-family: 'Times New Roman', serif;
|
||||
}
|
||||
.deck {
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.5;
|
||||
color: #333;
|
||||
margin-bottom: 1rem;
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #ccc;
|
||||
padding-bottom: 0.75rem;
|
||||
}
|
||||
.body-copy {
|
||||
font-size: 0.88rem;
|
||||
line-height: 1.7;
|
||||
column-count: 1;
|
||||
text-align: justify;
|
||||
hyphens: auto;
|
||||
color: #111;
|
||||
}
|
||||
.body-copy p { margin-bottom: 0.75rem; }
|
||||
.section-head {
|
||||
font-size: 0.65rem;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
border-top: 2px solid #111;
|
||||
border-bottom: 1px solid #111;
|
||||
padding: 0.3rem 0;
|
||||
margin-bottom: 0.75rem;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
.pull-quote {
|
||||
border-top: 2px solid #111;
|
||||
border-bottom: 2px solid #111;
|
||||
padding: 0.75rem 0;
|
||||
margin: 1rem 0;
|
||||
font-size: 1.2rem;
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.footer-bar {
|
||||
border-top: 4px double #111;
|
||||
padding: 0.75rem 3rem;
|
||||
font-size: 0.65rem;
|
||||
color: #666;
|
||||
font-family: Arial, sans-serif;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.main { grid-template-columns: 1fr; }
|
||||
.col + .col { border-left: none; border-top: 1px solid #aaa; padding-top: 1.5rem; margin-top: 1rem; }
|
||||
.masthead { padding: 1rem; }
|
||||
.footer-bar { padding: 0.75rem 1rem; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="masthead">
|
||||
<div class="edition">VOL. XXIV • NO. 318</div>
|
||||
<div class="pub-name">The Daily Construct</div>
|
||||
<div class="date-col">Est. 2001<br>Digital Edition</div>
|
||||
</div>
|
||||
<hr class="rule-thick">
|
||||
<hr class="rule-thin">
|
||||
<main class="main">
|
||||
<div class="col">
|
||||
<div class="section-head">Site Status</div>
|
||||
<div class="body-copy">
|
||||
<p>After extensive deliberation with our editorial and technical teams, it has been determined that the current state of our online presence requires a comprehensive review and overhaul.</p>
|
||||
<p>The press room is active. Typesetters and developers alike are burning the midnight oil to ensure a seamless transition.</p>
|
||||
</div>
|
||||
<div class="pull-quote">"The presses never stop."</div>
|
||||
<div class="body-copy"><p>Expect a fresh layout, improved archives, and restored search functionality upon our return to print.</p></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="headline">WEBSITE<br>IN PRESS</div>
|
||||
<div class="deck">Our digital edition is currently being typeset and readied for publication. We expect to resume full online service imminently.</div>
|
||||
<div class="body-copy">
|
||||
<p>The management of The Daily Construct wishes to inform all readers and subscribers that this publication's website is temporarily offline as we undertake a significant redesign of our digital infrastructure.</p>
|
||||
<p>This downtime, while regrettable, is necessary in order to bring our readers a significantly improved reading experience. Our archives will be fully preserved and searchable upon relaunch.</p>
|
||||
<p>Subscribers with active accounts need not take any action — all credentials and preferences will be migrated automatically to the new platform.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="section-head">From the Editor</div>
|
||||
<div class="body-copy">
|
||||
<p>Change is never easy, but it is often necessary. This redesign represents years of reader feedback distilled into a single coherent vision.</p>
|
||||
<p>We remain committed to the standards of journalism that have guided this publication for over two decades.</p>
|
||||
<p>— <em>The Editor-in-Chief</em></p>
|
||||
</div>
|
||||
<div class="section-head" style="margin-top:1.5rem;">Notice</div>
|
||||
<div class="body-copy">
|
||||
<p>Print edition continues on schedule. Digital access will resume shortly. No subscriptions have been affected.</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<div class="footer-bar">
|
||||
<span>© The Daily Construct. All rights reserved.</span>
|
||||
<span>Website temporarily offline — returning to press shortly</span>
|
||||
<span>Est. 2001</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,147 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Sunrise Media Group — A New Day Is Coming</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: linear-gradient(160deg, #1a0533 0%, #6b2d6b 25%, #c0544a 55%, #f4a261 78%, #fce7a0 100%);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
color: #fff;
|
||||
}
|
||||
.horizon-layer {
|
||||
position: fixed;
|
||||
bottom: 0; left: 0; right: 0;
|
||||
height: 30vh;
|
||||
background: linear-gradient(to top, rgba(0,0,0,0.4), transparent);
|
||||
pointer-events: none;
|
||||
}
|
||||
.sun {
|
||||
position: fixed;
|
||||
bottom: 22vh;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 120px;
|
||||
height: 60px;
|
||||
border-radius: 60px 60px 0 0;
|
||||
background: radial-gradient(circle at 50% 100%, #ffe082, #ff9800 40%, #ff5722 70%, transparent);
|
||||
box-shadow: 0 0 60px 20px rgba(255,152,0,0.4);
|
||||
}
|
||||
.rays {
|
||||
position: fixed;
|
||||
bottom: 22vh;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
.ray {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
width: 2px;
|
||||
height: 80px;
|
||||
background: linear-gradient(to top, rgba(255,224,130,0.6), transparent);
|
||||
transform-origin: bottom center;
|
||||
margin-left: -1px;
|
||||
}
|
||||
.container {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
text-align: center;
|
||||
padding: 3rem 2rem;
|
||||
max-width: 640px;
|
||||
}
|
||||
.eyebrow {
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.5em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255,255,255,0.7);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
h1 {
|
||||
font-size: clamp(2.2rem, 6vw, 3.8rem);
|
||||
font-weight: 300;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 0.5rem;
|
||||
text-shadow: 0 2px 20px rgba(0,0,0,0.4);
|
||||
}
|
||||
h1 strong {
|
||||
font-weight: 700;
|
||||
display: block;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
.brand-name {
|
||||
font-size: 0.8rem;
|
||||
letter-spacing: 0.3em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255,255,255,0.6);
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.divider {
|
||||
width: 80px;
|
||||
height: 1px;
|
||||
background: rgba(255,255,255,0.4);
|
||||
margin: 2rem auto;
|
||||
}
|
||||
p {
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.8;
|
||||
color: rgba(255,255,255,0.85);
|
||||
margin-bottom: 1rem;
|
||||
text-shadow: 0 1px 8px rgba(0,0,0,0.3);
|
||||
}
|
||||
.pills {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.pill {
|
||||
background: rgba(255,255,255,0.15);
|
||||
border: 1px solid rgba(255,255,255,0.3);
|
||||
backdrop-filter: blur(4px);
|
||||
padding: 0.5rem 1.25rem;
|
||||
border-radius: 999px;
|
||||
font-size: 0.8rem;
|
||||
letter-spacing: 0.1em;
|
||||
color: rgba(255,255,255,0.9);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="horizon-layer"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="rays">
|
||||
<div class="ray" style="transform:rotate(-60deg)"></div>
|
||||
<div class="ray" style="transform:rotate(-40deg)"></div>
|
||||
<div class="ray" style="transform:rotate(-20deg)"></div>
|
||||
<div class="ray" style="transform:rotate(0deg)"></div>
|
||||
<div class="ray" style="transform:rotate(20deg)"></div>
|
||||
<div class="ray" style="transform:rotate(40deg)"></div>
|
||||
<div class="ray" style="transform:rotate(60deg)"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="eyebrow">Sunrise Media Group</div>
|
||||
<h1>A New Day<br><strong>Is Coming</strong></h1>
|
||||
<div class="brand-name">Illuminating Stories Since 2009</div>
|
||||
<div class="divider"></div>
|
||||
<p>We're rebuilding our digital home from the ground up to bring you a brighter, clearer, and more inspiring media experience.</p>
|
||||
<p>Our journalists and creators are hard at work. The sun is almost up.</p>
|
||||
<div class="pills">
|
||||
<div class="pill">Breaking News</div>
|
||||
<div class="pill">Long-form Journalism</div>
|
||||
<div class="pill">Documentaries</div>
|
||||
<div class="pill">Podcasts</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,123 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Our New Site Is On Its Way</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: #f7f0e6;
|
||||
color: #4a3728;
|
||||
font-family: Georgia, 'Times New Roman', serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
}
|
||||
.card {
|
||||
background: #fffdf8;
|
||||
border: 1px solid #e8d8c4;
|
||||
max-width: 520px;
|
||||
width: 100%;
|
||||
padding: 3.5rem 3rem;
|
||||
text-align: center;
|
||||
box-shadow: 0 4px 30px rgba(74,55,40,0.08);
|
||||
position: relative;
|
||||
}
|
||||
.card::before, .card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 8px; left: 8px; right: 8px; bottom: 8px;
|
||||
border: 1px solid #e8d8c4;
|
||||
pointer-events: none;
|
||||
}
|
||||
.card::after {
|
||||
top: 12px; left: 12px; right: 12px; bottom: 12px;
|
||||
border-color: rgba(232,216,196,0.5);
|
||||
}
|
||||
.icon-row {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1;
|
||||
}
|
||||
.brand {
|
||||
font-size: 1.5rem;
|
||||
font-style: italic;
|
||||
color: #7a5c4a;
|
||||
margin-bottom: 0.3rem;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.brand-sub {
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.35em;
|
||||
text-transform: uppercase;
|
||||
color: #b8906e;
|
||||
margin-bottom: 2rem;
|
||||
font-family: 'Trebuchet MS', Arial, sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: clamp(1.5rem, 4vw, 2.1rem);
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
color: #3a2718;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.swash {
|
||||
color: #b8906e;
|
||||
font-size: 1.5rem;
|
||||
margin: 1rem 0;
|
||||
letter-spacing: 0.3em;
|
||||
}
|
||||
p {
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.9;
|
||||
color: #6a5040;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.sig {
|
||||
margin-top: 2rem;
|
||||
font-style: italic;
|
||||
font-size: 1.3rem;
|
||||
color: #7a5c4a;
|
||||
}
|
||||
.sig-role {
|
||||
font-style: normal;
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.3em;
|
||||
text-transform: uppercase;
|
||||
color: #b8906e;
|
||||
font-family: 'Trebuchet MS', Arial, sans-serif;
|
||||
margin-top: 0.25rem;
|
||||
display: block;
|
||||
}
|
||||
.footer {
|
||||
margin-top: 3rem;
|
||||
font-size: 0.75rem;
|
||||
color: #c8b8a8;
|
||||
letter-spacing: 0.15em;
|
||||
font-family: 'Trebuchet MS', Arial, sans-serif;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="card">
|
||||
<div class="icon-row">🍰 🍵 🌼</div>
|
||||
<div class="brand">Isabelle & Co.</div>
|
||||
<div class="brand-sub">Personal Chef & Artisan Bakery</div>
|
||||
<h1>"Our New Site Is<br>On Its Way"</h1>
|
||||
<div class="swash">❧ ❧ ❧</div>
|
||||
<p>Something delightful is baking behind the scenes. We are crafting a beautiful new home online where you will be able to browse seasonal menus, order custom cakes, and book private dining experiences.</p>
|
||||
<p>All the things you love about us — the warmth, the flavour, the care — are being poured into every pixel.</p>
|
||||
<div class="sig">
|
||||
— Isabelle
|
||||
<span class="sig-role">Chef & Founder</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">Back very soon • Thank you for your patience</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,171 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Platform Migration in Progress</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: #1c2b45;
|
||||
color: #cdd9ed;
|
||||
font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.page {
|
||||
max-width: 680px;
|
||||
width: 100%;
|
||||
padding: 3rem 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
.logo-area {
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
.logo-shape {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
background: #243552;
|
||||
border: 1px solid #2e4568;
|
||||
padding: 0.6rem 1.25rem;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.logo-dot {
|
||||
width: 10px; height: 10px;
|
||||
border-radius: 50%;
|
||||
background: #4a90d9;
|
||||
box-shadow: 0 0 8px #4a90d9;
|
||||
}
|
||||
.logo-text {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
color: #93b8e0;
|
||||
}
|
||||
h1 {
|
||||
font-size: clamp(1.6rem, 4vw, 2.4rem);
|
||||
font-weight: 600;
|
||||
color: #e8f0fb;
|
||||
margin-bottom: 0.75rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.subtitle {
|
||||
font-size: 1rem;
|
||||
color: #7a9ec4;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.progress-section {
|
||||
background: #1e3050;
|
||||
border: 1px solid #2a4060;
|
||||
border-radius: 10px;
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
text-align: left;
|
||||
}
|
||||
.progress-label-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.6rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.progress-label-row .name { color: #93b8e0; }
|
||||
.progress-label-row .pct { color: #4a90d9; font-weight: 700; }
|
||||
.bar-track {
|
||||
height: 8px;
|
||||
background: #142035;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
.bar-fill {
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
}
|
||||
.bar-fill::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; right: 0;
|
||||
width: 12px; height: 100%;
|
||||
background: rgba(255,255,255,0.4);
|
||||
filter: blur(4px);
|
||||
}
|
||||
.b1 { width: 100%; background: linear-gradient(90deg, #2563a8, #4a90d9); }
|
||||
.b2 { width: 87%; background: linear-gradient(90deg, #2563a8, #4a90d9); }
|
||||
.b3 { width: 62%; background: linear-gradient(90deg, #2563a8, #4da6ff); }
|
||||
.b4 { width: 41%; background: linear-gradient(90deg, #1c4a80, #3a7ab8); }
|
||||
.b5 { width: 15%; background: linear-gradient(90deg, #1c3a60, #2a5888); }
|
||||
.info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.info-card {
|
||||
background: #1e3050;
|
||||
border: 1px solid #2a4060;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
}
|
||||
.info-card .label {
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
color: #4a7a9b;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
.info-card .value {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: #4a90d9;
|
||||
}
|
||||
.footer-note {
|
||||
font-size: 0.8rem;
|
||||
color: #4a6a8a;
|
||||
line-height: 1.6;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<div class="logo-area">
|
||||
<div class="logo-shape">
|
||||
<div class="logo-dot"></div>
|
||||
<span class="logo-text">Bridgepoint Systems</span>
|
||||
</div>
|
||||
</div>
|
||||
<h1>Migrating to a Better Platform</h1>
|
||||
<div class="subtitle">Our team is working to move everything to a faster, more reliable infrastructure.</div>
|
||||
|
||||
<div class="progress-section">
|
||||
<div class="progress-label-row"><span class="name">Database Transfer</span><span class="pct">100%</span></div>
|
||||
<div class="bar-track"><div class="bar-fill b1"></div></div>
|
||||
<div class="progress-label-row"><span class="name">File Storage Migration</span><span class="pct">87%</span></div>
|
||||
<div class="bar-track"><div class="bar-fill b2"></div></div>
|
||||
<div class="progress-label-row"><span class="name">DNS Propagation</span><span class="pct">62%</span></div>
|
||||
<div class="bar-track"><div class="bar-fill b3"></div></div>
|
||||
<div class="progress-label-row"><span class="name">SSL Certificate Renewal</span><span class="pct">41%</span></div>
|
||||
<div class="bar-track"><div class="bar-fill b4"></div></div>
|
||||
<div class="progress-label-row"><span class="name">Final Testing</span><span class="pct">15%</span></div>
|
||||
<div class="bar-track" style="margin-bottom:0"><div class="bar-fill b5"></div></div>
|
||||
</div>
|
||||
|
||||
<div class="info-grid">
|
||||
<div class="info-card">
|
||||
<div class="label">Overall Progress</div>
|
||||
<div class="value">61%</div>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<div class="label">Est. Completion</div>
|
||||
<div class="value">~4 hrs</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-note">All data is being migrated securely. No account information will be lost. We apologise for any inconvenience during this transition.</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,166 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>New Collection Preview Coming</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: #1a1a1a;
|
||||
color: #e0e0e0;
|
||||
font-family: 'Arial Narrow', 'Arial', sans-serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.noise {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
.accent-bar {
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, #ff2d6b, #ff0055, #ff2d6b);
|
||||
box-shadow: 0 0 20px #ff0055;
|
||||
}
|
||||
.container {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 700px;
|
||||
padding: 3rem 2rem;
|
||||
width: 100%;
|
||||
}
|
||||
.top-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
.studio-name {
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.35em;
|
||||
text-transform: uppercase;
|
||||
color: #555;
|
||||
}
|
||||
.pink-dot {
|
||||
width: 8px; height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #ff0055;
|
||||
box-shadow: 0 0 12px #ff0055;
|
||||
animation: pdot 2s ease-in-out infinite alternate;
|
||||
}
|
||||
@keyframes pdot {
|
||||
from { box-shadow: 0 0 8px #ff0055; }
|
||||
to { box-shadow: 0 0 25px #ff0055, 0 0 50px rgba(255,0,85,0.3); }
|
||||
}
|
||||
.tag {
|
||||
font-size: 0.65rem;
|
||||
letter-spacing: 0.3em;
|
||||
text-transform: uppercase;
|
||||
color: #ff2d6b;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
h1 {
|
||||
font-size: clamp(2.5rem, 7vw, 5rem);
|
||||
font-weight: 900;
|
||||
line-height: 0.9;
|
||||
text-transform: uppercase;
|
||||
color: #f0f0f0;
|
||||
letter-spacing: -0.02em;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
h1 .pink { color: #ff0055; text-shadow: 0 0 30px rgba(255,0,85,0.5); }
|
||||
.body-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 3rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.body-text {
|
||||
flex: 1;
|
||||
min-width: 220px;
|
||||
}
|
||||
p {
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.7;
|
||||
color: #888;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.side-counter {
|
||||
min-width: 120px;
|
||||
text-align: right;
|
||||
}
|
||||
.big-num {
|
||||
font-size: 5rem;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
color: transparent;
|
||||
-webkit-text-stroke: 1px #333;
|
||||
letter-spacing: -0.05em;
|
||||
}
|
||||
.num-label {
|
||||
font-size: 0.65rem;
|
||||
letter-spacing: 0.25em;
|
||||
text-transform: uppercase;
|
||||
color: #ff2d6b;
|
||||
text-align: right;
|
||||
}
|
||||
.bottom-strip {
|
||||
position: fixed;
|
||||
bottom: 0; left: 0; right: 0;
|
||||
height: 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 2rem;
|
||||
background: #111;
|
||||
border-top: 1px solid #222;
|
||||
}
|
||||
.marquee-text {
|
||||
font-size: 0.6rem;
|
||||
letter-spacing: 0.3em;
|
||||
text-transform: uppercase;
|
||||
color: #333;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
animation: marquee 20s linear infinite;
|
||||
}
|
||||
@keyframes marquee {
|
||||
from { transform: translateX(100vw); }
|
||||
to { transform: translateX(-100%); }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="noise"></div>
|
||||
<div class="accent-bar"></div>
|
||||
<div class="container">
|
||||
<div class="top-row">
|
||||
<div class="studio-name">Voss & Crane Photography</div>
|
||||
<div class="pink-dot"></div>
|
||||
</div>
|
||||
<div class="tag">// Portfolio Update</div>
|
||||
<h1>New<br><span class="pink">Collection</span><br>Preview<br>Coming</h1>
|
||||
<div class="body-row">
|
||||
<div class="body-text">
|
||||
<p>We are preparing an entirely new body of work for your eyes. Portraits, landscapes, editorial — all reimagined through a different lens.</p>
|
||||
<p>Our new portfolio site is being built with care. Every image handpicked. Every layout deliberate.</p>
|
||||
</div>
|
||||
<div class="side-counter">
|
||||
<div class="big-num">024</div>
|
||||
<div class="num-label">Images Ready</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-strip">
|
||||
<div class="marquee-text">Voss & Crane Photography • New Collection Preview Coming • Stay Tuned • Fine Art & Editorial • Portraits • Commercial Work • </div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,139 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Sage Wellness Spa — Temporarily Closed for Maintenance</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: #e8f0e9;
|
||||
color: #3a5440;
|
||||
font-family: 'Trebuchet MS', 'Segoe UI', Arial, sans-serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
}
|
||||
.page {
|
||||
max-width: 540px;
|
||||
text-align: center;
|
||||
}
|
||||
.circle-logo {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #7aad88, #4a8c5c);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 2rem;
|
||||
box-shadow: 0 4px 20px rgba(74,140,92,0.25);
|
||||
}
|
||||
.circle-logo span { font-size: 2rem; }
|
||||
.brand {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: #2d4a35;
|
||||
letter-spacing: 0.05em;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
.brand-tag {
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.4em;
|
||||
text-transform: uppercase;
|
||||
color: #7aad88;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
.badge {
|
||||
display: inline-block;
|
||||
background: #f9f3e8;
|
||||
border: 1px solid #d4c4a0;
|
||||
padding: 0.5rem 1.25rem;
|
||||
border-radius: 999px;
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
color: #8a7055;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
h1 {
|
||||
font-size: clamp(1.5rem, 4vw, 2.2rem);
|
||||
font-weight: 300;
|
||||
color: #2d4a35;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
h1 strong { font-weight: 700; }
|
||||
.leaf-row {
|
||||
color: #7aad88;
|
||||
font-size: 1.2rem;
|
||||
margin: 1.25rem 0;
|
||||
letter-spacing: 0.5em;
|
||||
}
|
||||
p {
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.8;
|
||||
color: #5a7060;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.info-box {
|
||||
background: #fff;
|
||||
border: 1px solid #c8dcc8;
|
||||
border-radius: 10px;
|
||||
padding: 1.5rem;
|
||||
margin: 2rem 0;
|
||||
text-align: left;
|
||||
}
|
||||
.info-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.75rem;
|
||||
padding: 0.5rem 0;
|
||||
font-size: 0.88rem;
|
||||
color: #4a6455;
|
||||
border-bottom: 1px solid #e0eae0;
|
||||
}
|
||||
.info-row:last-child { border-bottom: none; }
|
||||
.info-icon { color: #7aad88; flex-shrink: 0; margin-top: 0.1rem; }
|
||||
.footer-text {
|
||||
font-size: 0.78rem;
|
||||
color: #9ab8a0;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<div class="circle-logo"><span>🌿</span></div>
|
||||
<div class="brand">Sage Wellness Spa</div>
|
||||
<div class="brand-tag">Body & Mind</div>
|
||||
<div class="badge">⚠ Maintenance Notice</div>
|
||||
<h1>Temporarily Closed<br>for <strong>Maintenance</strong></h1>
|
||||
<div class="leaf-row">✧ ✧ ✧</div>
|
||||
<p>We are performing essential maintenance on our online booking system to give you a smoother, more tranquil experience when scheduling your next visit.</p>
|
||||
<p>We expect to be back online within 24 hours. Our spa remains open during this time — please call us directly to book.</p>
|
||||
<div class="info-box">
|
||||
<div class="info-row">
|
||||
<span class="info-icon">🕐</span>
|
||||
<span><strong>Maintenance Window:</strong> Approx. 24 hours</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-icon">💬</span>
|
||||
<span><strong>Appointments:</strong> Please call to book during maintenance</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-icon">🏢</span>
|
||||
<span><strong>Spa Hours:</strong> Mon–Sat 9am–7pm, Sun 10am–5pm</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-icon">✔</span>
|
||||
<span><strong>Gift Cards:</strong> Remain valid — no action required</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-text">Thank you for your patience | We'll be back soon</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,171 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>We're Refreshing Our Look</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: #f5f5f5;
|
||||
color: #111;
|
||||
font-family: 'Arial Black', 'Arial', sans-serif;
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
/* Geometric background shapes */
|
||||
.geo-tl {
|
||||
position: fixed; top: -60px; left: -60px;
|
||||
width: 220px; height: 220px;
|
||||
background: #e63329;
|
||||
border-radius: 0;
|
||||
transform: rotate(15deg);
|
||||
}
|
||||
.geo-tr {
|
||||
position: fixed; top: -40px; right: -40px;
|
||||
width: 180px; height: 180px;
|
||||
background: #1c5ba6;
|
||||
border-radius: 0;
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
.geo-bl {
|
||||
position: fixed; bottom: -50px; left: -50px;
|
||||
width: 200px; height: 200px;
|
||||
background: #f5c800;
|
||||
border-radius: 0;
|
||||
transform: rotate(25deg);
|
||||
}
|
||||
.geo-br {
|
||||
position: fixed; bottom: -30px; right: -30px;
|
||||
width: 250px; height: 250px;
|
||||
background: #1c5ba6;
|
||||
border-radius: 0;
|
||||
transform: rotate(-20deg);
|
||||
}
|
||||
.geo-mid-circle {
|
||||
position: fixed; top: 50%; right: 8%;
|
||||
transform: translateY(-50%);
|
||||
width: 90px; height: 90px;
|
||||
border-radius: 50%;
|
||||
background: #f5c800;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.geo-mid-bar {
|
||||
position: fixed; bottom: 30%; left: 5%;
|
||||
width: 40px; height: 200px;
|
||||
background: #e63329;
|
||||
opacity: 0.3;
|
||||
transform: rotate(8deg);
|
||||
}
|
||||
/* Main content */
|
||||
.center {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
}
|
||||
.flag {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.flag-block {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
.flag-block.r { background: #e63329; }
|
||||
.flag-block.y { background: #f5c800; }
|
||||
.flag-block.b { background: #1c5ba6; }
|
||||
h1 {
|
||||
font-size: clamp(2.5rem, 7vw, 5rem);
|
||||
font-weight: 900;
|
||||
text-transform: uppercase;
|
||||
line-height: 0.95;
|
||||
letter-spacing: -0.02em;
|
||||
color: #111;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
h1 .red { color: #e63329; }
|
||||
h1 .blue { color: #1c5ba6; }
|
||||
h1 .yellow { color: #f5c800; -webkit-text-stroke: 2px #111; }
|
||||
.sub {
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.4em;
|
||||
text-transform: uppercase;
|
||||
color: #555;
|
||||
margin-bottom: 2.5rem;
|
||||
font-family: Arial, sans-serif;
|
||||
font-weight: normal;
|
||||
}
|
||||
.card {
|
||||
background: #fff;
|
||||
border: 4px solid #111;
|
||||
padding: 1.5rem 2.5rem;
|
||||
max-width: 420px;
|
||||
position: relative;
|
||||
}
|
||||
.card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 6px; left: 6px;
|
||||
right: -6px; bottom: -6px;
|
||||
background: #111;
|
||||
z-index: -1;
|
||||
}
|
||||
.card p {
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.7;
|
||||
color: #333;
|
||||
font-family: Arial, sans-serif;
|
||||
font-weight: normal;
|
||||
}
|
||||
.dot-row {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
justify-content: center;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.dot {
|
||||
width: 14px; height: 14px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.dot.r { background: #e63329; }
|
||||
.dot.y { background: #f5c800; border: 2px solid #999; }
|
||||
.dot.b { background: #1c5ba6; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="geo-tl"></div>
|
||||
<div class="geo-tr"></div>
|
||||
<div class="geo-bl"></div>
|
||||
<div class="geo-br"></div>
|
||||
<div class="geo-mid-circle"></div>
|
||||
<div class="geo-mid-bar"></div>
|
||||
<div class="center">
|
||||
<div class="flag">
|
||||
<div class="flag-block r"></div>
|
||||
<div class="flag-block y"></div>
|
||||
<div class="flag-block b"></div>
|
||||
<div class="flag-block r"></div>
|
||||
<div class="flag-block y"></div>
|
||||
<div class="flag-block b"></div>
|
||||
</div>
|
||||
<h1><span class="red">We're</span><br><span class="blue">Refreshing</span><br><span class="yellow">Our Look</span></h1>
|
||||
<div class="sub">Big changes. Bold ideas. Coming soon.</div>
|
||||
<div class="card">
|
||||
<p>Our studio is currently in the process of a full visual identity overhaul. New brand, new site, same great creative energy. We'll be back with something worth the wait.</p>
|
||||
</div>
|
||||
<div class="dot-row">
|
||||
<div class="dot r"></div>
|
||||
<div class="dot y"></div>
|
||||
<div class="dot b"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,188 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Scheduled Maintenance Window — Nexbridge IT</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: #f0f4fa;
|
||||
color: #1a2b4a;
|
||||
font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.topbar {
|
||||
background: #1655a2;
|
||||
padding: 0.75rem 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
.topbar-logo {
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
.topbar-logo span { color: #7fb3f5; }
|
||||
.topbar-tag {
|
||||
margin-left: auto;
|
||||
font-size: 0.7rem;
|
||||
color: rgba(255,255,255,0.6);
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 3rem 2rem;
|
||||
}
|
||||
.alert-banner {
|
||||
background: #1655a2;
|
||||
color: #fff;
|
||||
padding: 0.75rem 2rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.8rem;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 2.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
.alert-dot {
|
||||
width: 8px; height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #ffd166;
|
||||
animation: blink 1.5s step-end infinite;
|
||||
}
|
||||
@keyframes blink { 50% { opacity: 0; } }
|
||||
h1 {
|
||||
font-size: clamp(1.6rem, 4vw, 2.4rem);
|
||||
font-weight: 700;
|
||||
color: #0d1f3c;
|
||||
margin-bottom: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
.sub {
|
||||
font-size: 0.95rem;
|
||||
color: #5878a4;
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
max-width: 500px;
|
||||
}
|
||||
.card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: 1.25rem;
|
||||
width: 100%;
|
||||
max-width: 780px;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
.card {
|
||||
background: #fff;
|
||||
border: 1px solid #c8d8ee;
|
||||
border-radius: 6px;
|
||||
padding: 1.25rem 1.5rem;
|
||||
border-top: 3px solid #1655a2;
|
||||
}
|
||||
.card-icon { font-size: 1.5rem; margin-bottom: 0.5rem; }
|
||||
.card-title {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: #1655a2;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
.card-body {
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.6;
|
||||
color: #4a6080;
|
||||
}
|
||||
.timeline {
|
||||
background: #fff;
|
||||
border: 1px solid #c8d8ee;
|
||||
border-radius: 6px;
|
||||
padding: 1.5rem 2rem;
|
||||
width: 100%;
|
||||
max-width: 780px;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.tl-title {
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
color: #1655a2;
|
||||
margin-bottom: 1rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.tl-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 0.5rem 0;
|
||||
border-bottom: 1px solid #e8f0f8;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.tl-row:last-child { border-bottom: none; }
|
||||
.tl-time { color: #1655a2; font-weight: 600; min-width: 60px; }
|
||||
.tl-event { color: #3a5070; }
|
||||
.tl-status { margin-left: auto; font-size: 0.7rem; padding: 0.2rem 0.6rem; border-radius: 3px; }
|
||||
.done { background: #e0f2e9; color: #2d7a4f; }
|
||||
.active { background: #fff3cd; color: #7a5c00; }
|
||||
.pending { background: #f0f4fa; color: #8a9bba; }
|
||||
.footer-note {
|
||||
font-size: 0.78rem;
|
||||
color: #8a9bba;
|
||||
text-align: center;
|
||||
max-width: 500px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="topbar">
|
||||
<div class="topbar-logo">Nexbridge<span>IT</span></div>
|
||||
<div class="topbar-tag">Enterprise Technology Solutions</div>
|
||||
</div>
|
||||
<div class="main">
|
||||
<div class="alert-banner">
|
||||
<div class="alert-dot"></div>
|
||||
<span>Scheduled Maintenance Window — Services Temporarily Unavailable</span>
|
||||
</div>
|
||||
<h1>Scheduled Maintenance Window</h1>
|
||||
<div class="sub">We are performing planned infrastructure upgrades. All customer portals and web services will be restored upon completion.</div>
|
||||
<div class="card-grid">
|
||||
<div class="card">
|
||||
<div class="card-icon">🛡</div>
|
||||
<div class="card-title">Security Patches</div>
|
||||
<div class="card-body">Critical OS and firmware updates being applied across all production nodes.</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-icon">🔄</div>
|
||||
<div class="card-title">Load Balancer</div>
|
||||
<div class="card-body">Reconfiguring routing rules and upgrading balancer firmware to latest stable release.</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-icon">💾</div>
|
||||
<div class="card-title">Backup Verification</div>
|
||||
<div class="card-body">Full off-site backup integrity checks being conducted prior to upgrade completion.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline">
|
||||
<div class="tl-title">Maintenance Schedule</div>
|
||||
<div class="tl-row"><span class="tl-time">00:00</span><span class="tl-event">Maintenance window begins — services redirected</span><span class="tl-status done">Done</span></div>
|
||||
<div class="tl-row"><span class="tl-time">01:30</span><span class="tl-event">Security patches applied to all nodes</span><span class="tl-status active">In Progress</span></div>
|
||||
<div class="tl-row"><span class="tl-time">03:00</span><span class="tl-event">Load balancer reconfiguration and testing</span><span class="tl-status pending">Pending</span></div>
|
||||
<div class="tl-row"><span class="tl-time">05:00</span><span class="tl-event">Final verification and service restoration</span><span class="tl-status pending">Pending</span></div>
|
||||
</div>
|
||||
<div class="footer-note">Ticket ID: NX-MW-2024-0891 | If you have a critical incident, contact your account manager directly.</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,171 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>The Countdown Has Begun</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: linear-gradient(135deg, #1a0e00 0%, #3d1e00 50%, #1a0e00 100%);
|
||||
color: #fff;
|
||||
font-family: 'Trebuchet MS', 'Segoe UI', Arial, sans-serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.glow-orb {
|
||||
position: fixed;
|
||||
top: 50%; left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 600px; height: 300px;
|
||||
background: radial-gradient(ellipse, rgba(255,170,0,0.12) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.container {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
max-width: 700px;
|
||||
width: 100%;
|
||||
}
|
||||
.crown {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
filter: drop-shadow(0 0 20px rgba(255,170,0,0.6));
|
||||
}
|
||||
.eyebrow {
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.5em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255,180,40,0.7);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
h1 {
|
||||
font-size: clamp(2rem, 5vw, 3.5rem);
|
||||
font-weight: 300;
|
||||
color: #ffd166;
|
||||
margin-bottom: 0.3rem;
|
||||
text-shadow: 0 0 30px rgba(255,190,50,0.4);
|
||||
}
|
||||
h1 strong { font-weight: 900; }
|
||||
.tagline {
|
||||
font-size: 0.9rem;
|
||||
color: rgba(255,200,100,0.6);
|
||||
margin-bottom: 3rem;
|
||||
letter-spacing: 0.15em;
|
||||
}
|
||||
.countdown-wrap {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.unit {
|
||||
background: rgba(255,255,255,0.05);
|
||||
border: 1px solid rgba(255,170,0,0.3);
|
||||
border-radius: 8px;
|
||||
padding: 1.25rem 1.5rem;
|
||||
min-width: 100px;
|
||||
box-shadow: 0 0 20px rgba(255,150,0,0.1), inset 0 0 20px rgba(0,0,0,0.3);
|
||||
}
|
||||
.unit-num {
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
color: #ffd166;
|
||||
line-height: 1;
|
||||
text-shadow: 0 0 20px rgba(255,180,0,0.5);
|
||||
}
|
||||
.unit-label {
|
||||
font-size: 0.6rem;
|
||||
letter-spacing: 0.3em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255,170,0,0.5);
|
||||
margin-top: 0.4rem;
|
||||
}
|
||||
.separator {
|
||||
font-size: 2.5rem;
|
||||
color: rgba(255,170,0,0.4);
|
||||
align-self: center;
|
||||
margin-bottom: 1.5rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
.message {
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.8;
|
||||
color: rgba(255,220,150,0.7);
|
||||
max-width: 460px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.ornament {
|
||||
margin-top: 2rem;
|
||||
font-size: 1rem;
|
||||
color: rgba(255,170,0,0.3);
|
||||
letter-spacing: 0.5em;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
function updateCountdown() {
|
||||
const stored = localStorage.getItem('cd-target-38');
|
||||
let target;
|
||||
if (stored) {
|
||||
target = new Date(parseInt(stored));
|
||||
} else {
|
||||
target = new Date(Date.now() + 30 * 24 * 60 * 60 * 1000);
|
||||
localStorage.setItem('cd-target-38', target.getTime().toString());
|
||||
}
|
||||
const now = new Date();
|
||||
const diff = Math.max(0, target - now);
|
||||
const d = Math.floor(diff / 86400000);
|
||||
const h = Math.floor((diff % 86400000) / 3600000);
|
||||
const m = Math.floor((diff % 3600000) / 60000);
|
||||
const s = Math.floor((diff % 60000) / 1000);
|
||||
document.getElementById('cd-d').textContent = String(d).padStart(2,'0');
|
||||
document.getElementById('cd-h').textContent = String(h).padStart(2,'0');
|
||||
document.getElementById('cd-m').textContent = String(m).padStart(2,'0');
|
||||
document.getElementById('cd-s').textContent = String(s).padStart(2,'0');
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
updateCountdown();
|
||||
setInterval(updateCountdown, 1000);
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="glow-orb"></div>
|
||||
<div class="container">
|
||||
<div class="crown">👑</div>
|
||||
<div class="eyebrow">Aurelius & Co. • Premium Goods</div>
|
||||
<h1>The Countdown<br><strong>Has Begun</strong></h1>
|
||||
<div class="tagline">Something extraordinary is on its way.</div>
|
||||
<div class="countdown-wrap">
|
||||
<div class="unit">
|
||||
<div class="unit-num" id="cd-d">30</div>
|
||||
<div class="unit-label">Days</div>
|
||||
</div>
|
||||
<div class="separator">:</div>
|
||||
<div class="unit">
|
||||
<div class="unit-num" id="cd-h">00</div>
|
||||
<div class="unit-label">Hours</div>
|
||||
</div>
|
||||
<div class="separator">:</div>
|
||||
<div class="unit">
|
||||
<div class="unit-num" id="cd-m">00</div>
|
||||
<div class="unit-label">Minutes</div>
|
||||
</div>
|
||||
<div class="separator">:</div>
|
||||
<div class="unit">
|
||||
<div class="unit-num" id="cd-s">00</div>
|
||||
<div class="unit-label">Seconds</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message">We have been working quietly and carefully on something we are genuinely proud of. When this countdown reaches zero, you will see what we mean.</div>
|
||||
<div class="ornament">✳ ✳ ✳</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,195 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Something Beautiful Is Being Built — Mauve Studio</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: #2a1040;
|
||||
color: #e8d5f0;
|
||||
font-family: 'Garamond', 'Georgia', serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.bg-gradient {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background:
|
||||
radial-gradient(ellipse at 30% 40%, rgba(100,40,150,0.4) 0%, transparent 55%),
|
||||
radial-gradient(ellipse at 75% 60%, rgba(60,10,90,0.5) 0%, transparent 55%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.layout {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
max-width: 900px;
|
||||
width: 100%;
|
||||
padding: 4rem 2rem;
|
||||
gap: 4rem;
|
||||
align-items: center;
|
||||
}
|
||||
.left-col { }
|
||||
.eyebrow {
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.45em;
|
||||
text-transform: uppercase;
|
||||
color: #9b59b6;
|
||||
margin-bottom: 1.5rem;
|
||||
font-family: 'Trebuchet MS', Arial, sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: clamp(2rem, 3.5vw, 3rem);
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
color: #f0deff;
|
||||
line-height: 1.25;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
h1 em { font-style: normal; font-weight: 700; color: #c084fc; }
|
||||
.rule {
|
||||
width: 48px;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, #9b59b6, transparent);
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
p {
|
||||
font-size: 0.98rem;
|
||||
line-height: 1.9;
|
||||
color: #c4a8d8;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.services {
|
||||
margin-top: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.service-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
font-size: 0.82rem;
|
||||
color: #a87dc0;
|
||||
font-family: 'Trebuchet MS', Arial, sans-serif;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
.service-item::before {
|
||||
content: '';
|
||||
width: 4px; height: 4px;
|
||||
border-radius: 50%;
|
||||
background: #9b59b6;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.right-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
.square-accent {
|
||||
border: 1px solid rgba(155,89,182,0.3);
|
||||
padding: 2rem;
|
||||
position: relative;
|
||||
}
|
||||
.square-accent::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -1px; left: 20px; right: 20px;
|
||||
height: 1px;
|
||||
background: rgba(155,89,182,0.6);
|
||||
}
|
||||
.accent-label {
|
||||
font-size: 0.65rem;
|
||||
letter-spacing: 0.4em;
|
||||
text-transform: uppercase;
|
||||
color: #7a3d9e;
|
||||
margin-bottom: 0.75rem;
|
||||
font-family: 'Trebuchet MS', Arial, sans-serif;
|
||||
}
|
||||
.accent-quote {
|
||||
font-size: 1.05rem;
|
||||
font-style: italic;
|
||||
color: #d4a8f0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.status-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
.status-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 0.8rem;
|
||||
font-family: 'Trebuchet MS', Arial, sans-serif;
|
||||
}
|
||||
.status-name { color: #b8a0cc; }
|
||||
.status-bar-wrap {
|
||||
flex: 1;
|
||||
margin: 0 1rem;
|
||||
height: 2px;
|
||||
background: rgba(155,89,182,0.15);
|
||||
border-radius: 1px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.status-bar-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #7b2d9e, #c084fc);
|
||||
border-radius: 1px;
|
||||
}
|
||||
.status-pct { color: #9b59b6; font-size: 0.7rem; }
|
||||
@media (max-width: 640px) {
|
||||
.layout { grid-template-columns: 1fr; gap: 2rem; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="bg-gradient"></div>
|
||||
<div class="layout">
|
||||
<div class="left-col">
|
||||
<div class="eyebrow">Mauve Interior Design Studio</div>
|
||||
<h1>Something <em>Beautiful</em><br>Is Being<br>Built</h1>
|
||||
<div class="rule"></div>
|
||||
<p>We are transforming our digital presence to reflect the spaces we create — thoughtful, layered, and alive with intention.</p>
|
||||
<p>Every room we design tells a story. Our new site will tell ours.</p>
|
||||
<div class="services">
|
||||
<div class="service-item">Residential Interior Design</div>
|
||||
<div class="service-item">Commercial Spaces</div>
|
||||
<div class="service-item">Concept & Styling</div>
|
||||
<div class="service-item">Bespoke Furniture Curation</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-col">
|
||||
<div class="square-accent">
|
||||
<div class="accent-label">From the Studio</div>
|
||||
<div class="accent-quote">"Design is not just what it looks like and feels like. Design is how it works."</div>
|
||||
</div>
|
||||
<div class="status-items">
|
||||
<div class="status-row">
|
||||
<span class="status-name">Design System</span>
|
||||
<div class="status-bar-wrap"><div class="status-bar-fill" style="width:90%"></div></div>
|
||||
<span class="status-pct">90%</span>
|
||||
</div>
|
||||
<div class="status-row">
|
||||
<span class="status-name">Portfolio</span>
|
||||
<div class="status-bar-wrap"><div class="status-bar-fill" style="width:75%"></div></div>
|
||||
<span class="status-pct">75%</span>
|
||||
</div>
|
||||
<div class="status-row">
|
||||
<span class="status-name">Development</span>
|
||||
<div class="status-bar-wrap"><div class="status-bar-fill" style="width:55%"></div></div>
|
||||
<span class="status-pct">55%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,190 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Temporarily Suspended — Hargrove & Associates</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: #fafcfd;
|
||||
color: #1a2530;
|
||||
font-family: 'Georgia', serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.header-bar {
|
||||
background: #1a2530;
|
||||
height: 4px;
|
||||
}
|
||||
.sub-bar {
|
||||
background: #b0c4d4;
|
||||
height: 1px;
|
||||
}
|
||||
.nav-strip {
|
||||
padding: 1.25rem 3rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #d8e4ec;
|
||||
}
|
||||
.firm-name {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: #1a2530;
|
||||
font-family: 'Georgia', serif;
|
||||
}
|
||||
.firm-sub {
|
||||
font-size: 0.65rem;
|
||||
letter-spacing: 0.25em;
|
||||
text-transform: uppercase;
|
||||
color: #8090a0;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
.stamp {
|
||||
border: 2px solid #b8c8d4;
|
||||
padding: 0.3rem 0.75rem;
|
||||
font-size: 0.65rem;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
color: #8090a0;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
.main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 4rem 2rem;
|
||||
}
|
||||
.icon-area {
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
.gavel-wrap {
|
||||
width: 64px; height: 64px;
|
||||
border: 2px solid #c8d8e8;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
color: #5878a0;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
.badge-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 2.5rem;
|
||||
justify-content: center;
|
||||
}
|
||||
.badge-line { height: 1px; width: 60px; background: #c8d8e8; }
|
||||
.badge-text {
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.35em;
|
||||
text-transform: uppercase;
|
||||
color: #8090a0;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: clamp(1.6rem, 4vw, 2.5rem);
|
||||
font-weight: normal;
|
||||
color: #1a2530;
|
||||
text-align: center;
|
||||
margin-bottom: 0.5rem;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.ref {
|
||||
font-size: 0.72rem;
|
||||
color: #a0b0c0;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
font-family: Arial, sans-serif;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
.content-box {
|
||||
max-width: 560px;
|
||||
border: 1px solid #d8e4ec;
|
||||
padding: 2.5rem;
|
||||
background: #fff;
|
||||
}
|
||||
.content-box p {
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.9;
|
||||
color: #3a4a5a;
|
||||
margin-bottom: 0.75rem;
|
||||
text-align: justify;
|
||||
}
|
||||
.content-box .last { margin-bottom: 0; }
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: #d8e4ec;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
.meta-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 0.72rem;
|
||||
color: #8090a0;
|
||||
font-family: Arial, sans-serif;
|
||||
letter-spacing: 0.05em;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.footer-strip {
|
||||
border-top: 1px solid #d8e4ec;
|
||||
padding: 1rem 3rem;
|
||||
font-size: 0.68rem;
|
||||
color: #a0b0c0;
|
||||
font-family: Arial, sans-serif;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header-bar"></div>
|
||||
<div class="sub-bar"></div>
|
||||
<div class="nav-strip">
|
||||
<div>
|
||||
<div class="firm-name">Hargrove & Associates</div>
|
||||
<div class="firm-sub">Solicitors & Barristers</div>
|
||||
</div>
|
||||
<div class="stamp">Est. 1987</div>
|
||||
</div>
|
||||
<div class="main">
|
||||
<div class="icon-area">
|
||||
<div class="gavel-wrap">⚖</div>
|
||||
</div>
|
||||
<div class="badge-row">
|
||||
<div class="badge-line"></div>
|
||||
<div class="badge-text">Official Notice</div>
|
||||
<div class="badge-line"></div>
|
||||
</div>
|
||||
<h1>Temporarily Suspended</h1>
|
||||
<div class="ref">REF: HGA-SITE-2024-11 • Web Services</div>
|
||||
<div class="content-box">
|
||||
<p>The online portal for Hargrove & Associates is currently suspended pending a comprehensive review and migration to a new case management platform.</p>
|
||||
<p>During this period, all client matters will be handled through direct correspondence with your assigned solicitor. All existing case files, documentation, and correspondence remain fully accessible to the firm's staff.</p>
|
||||
<p class="last">We anticipate the portal to be restored within five to seven business days. We thank you for your understanding and patience during this transition.</p>
|
||||
<div class="divider"></div>
|
||||
<div class="meta-row">
|
||||
<span>Hargrove & Associates LLP</span>
|
||||
<span>Regulated by the SRA</span>
|
||||
<span>Authorised & Regulated</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-strip">
|
||||
<span>© Hargrove & Associates LLP. All rights reserved.</span>
|
||||
<span>This website is temporarily suspended.</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,200 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Back in a Moment — Verdant Earth</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: #0d1f0f;
|
||||
color: #d4e8c8;
|
||||
font-family: 'Trebuchet MS', 'Segoe UI', Arial, sans-serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* Animated forest background */
|
||||
.trees {
|
||||
position: fixed;
|
||||
bottom: 0; left: 0; right: 0;
|
||||
height: 40vh;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-around;
|
||||
padding: 0 2rem;
|
||||
opacity: 0.15;
|
||||
pointer-events: none;
|
||||
}
|
||||
.tree {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.tree-top {
|
||||
width: 0; height: 0;
|
||||
border-style: solid;
|
||||
border-color: transparent transparent #2d5a2d transparent;
|
||||
margin-bottom: -2px;
|
||||
}
|
||||
.tree-top-2 {
|
||||
width: 0; height: 0;
|
||||
border-style: solid;
|
||||
border-color: transparent transparent #3a6e3a transparent;
|
||||
margin-bottom: -2px;
|
||||
}
|
||||
.tree-trunk {
|
||||
background: #2a1a0a;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.mist {
|
||||
position: fixed;
|
||||
bottom: 0; left: 0; right: 0;
|
||||
height: 20vh;
|
||||
background: linear-gradient(to top, rgba(13,31,15,0.9), transparent);
|
||||
pointer-events: none;
|
||||
}
|
||||
.container {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
text-align: center;
|
||||
padding: 3rem 2rem;
|
||||
max-width: 580px;
|
||||
}
|
||||
.brand-mark {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.leaf-circle {
|
||||
width: 48px; height: 48px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle at 40% 40%, #4a8c3a, #1e4a18);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.4rem;
|
||||
box-shadow: 0 0 20px rgba(60,120,40,0.3);
|
||||
}
|
||||
.brand-text {
|
||||
text-align: left;
|
||||
}
|
||||
.brand-name {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: #a8d498;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
.brand-sub {
|
||||
font-size: 0.65rem;
|
||||
letter-spacing: 0.3em;
|
||||
text-transform: uppercase;
|
||||
color: #5a8050;
|
||||
}
|
||||
h1 {
|
||||
font-size: clamp(2.5rem, 6vw, 4rem);
|
||||
font-weight: 300;
|
||||
color: #c8e8b8;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 0.5rem;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
h1 strong {
|
||||
font-weight: 700;
|
||||
color: #7ac860;
|
||||
display: block;
|
||||
}
|
||||
.leaf-divider {
|
||||
margin: 1.5rem auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
justify-content: center;
|
||||
color: #3a6030;
|
||||
font-size: 1.1rem;
|
||||
letter-spacing: 0.2em;
|
||||
}
|
||||
p {
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.9;
|
||||
color: #8ab878;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.eco-badges {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
.eco-badge {
|
||||
border: 1px solid #2a5020;
|
||||
padding: 0.4rem 0.9rem;
|
||||
border-radius: 999px;
|
||||
font-size: 0.72rem;
|
||||
color: #6a9858;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.ground-bar {
|
||||
position: fixed;
|
||||
bottom: 0; left: 0; right: 0;
|
||||
height: 8px;
|
||||
background: linear-gradient(90deg, #1a3a10, #2d5a1e, #1a3a10);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="trees">
|
||||
<div class="tree">
|
||||
<div class="tree-top" style="border-width: 0 30px 80px 30px;"></div>
|
||||
<div class="tree-top-2" style="border-width: 0 40px 100px 40px;"></div>
|
||||
<div class="tree-trunk" style="width:12px;height:40px;"></div>
|
||||
</div>
|
||||
<div class="tree">
|
||||
<div class="tree-top" style="border-width: 0 20px 60px 20px;"></div>
|
||||
<div class="tree-top-2" style="border-width: 0 30px 80px 30px;"></div>
|
||||
<div class="tree-trunk" style="width:10px;height:30px;"></div>
|
||||
</div>
|
||||
<div class="tree">
|
||||
<div class="tree-top" style="border-width: 0 35px 100px 35px;"></div>
|
||||
<div class="tree-top-2" style="border-width: 0 50px 130px 50px;"></div>
|
||||
<div class="tree-trunk" style="width:14px;height:50px;"></div>
|
||||
</div>
|
||||
<div class="tree">
|
||||
<div class="tree-top" style="border-width: 0 25px 70px 25px;"></div>
|
||||
<div class="tree-top-2" style="border-width: 0 35px 90px 35px;"></div>
|
||||
<div class="tree-trunk" style="width:11px;height:35px;"></div>
|
||||
</div>
|
||||
<div class="tree">
|
||||
<div class="tree-top" style="border-width: 0 28px 75px 28px;"></div>
|
||||
<div class="tree-top-2" style="border-width: 0 42px 110px 42px;"></div>
|
||||
<div class="tree-trunk" style="width:12px;height:42px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mist"></div>
|
||||
<div class="container">
|
||||
<div class="brand-mark">
|
||||
<div class="leaf-circle">🌿</div>
|
||||
<div class="brand-text">
|
||||
<div class="brand-name">Verdant Earth</div>
|
||||
<div class="brand-sub">Sustainable Living</div>
|
||||
</div>
|
||||
</div>
|
||||
<h1>Back in<br><strong>a Moment</strong></h1>
|
||||
<div class="leaf-divider">❀ ❀ ❀</div>
|
||||
<p>We're tending to our digital garden — weeding out the old and planting something new and better for the future.</p>
|
||||
<p>Nature takes time. So does getting things right. We'll be back soon, greener than ever.</p>
|
||||
<div class="eco-badges">
|
||||
<div class="eco-badge">★ Carbon Neutral</div>
|
||||
<div class="eco-badge">♥ Plastic Free</div>
|
||||
<div class="eco-badge">✦ Ethical Source</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ground-bar"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,127 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>SYSTEM INITIALIZING</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: #0c0c0c;
|
||||
color: #b0b0b0;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.terminal {
|
||||
max-width: 680px;
|
||||
width: 100%;
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
.tbar {
|
||||
background: #2a2a2a;
|
||||
border-radius: 8px 8px 0 0;
|
||||
padding: 0.6rem 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
border: 1px solid #333;
|
||||
border-bottom: none;
|
||||
}
|
||||
.dot { width: 12px; height: 12px; border-radius: 50%; }
|
||||
.dot.red { background: #ff5f56; }
|
||||
.dot.yellow { background: #ffbd2e; }
|
||||
.dot.green { background: #27c93f; }
|
||||
.tbar-title { margin-left: auto; color: #555; font-size: 0.75rem; margin-right: auto; }
|
||||
.twindow {
|
||||
background: #111;
|
||||
border: 1px solid #333;
|
||||
border-top: none;
|
||||
border-radius: 0 0 6px 6px;
|
||||
padding: 1.5rem;
|
||||
min-height: 380px;
|
||||
}
|
||||
.line {
|
||||
margin-bottom: 0.2rem;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.dim { color: #444; }
|
||||
.normal { color: #888; }
|
||||
.bright { color: #b0b0b0; }
|
||||
.white { color: #d8d8d8; }
|
||||
.green-t { color: #27c93f; }
|
||||
.yellow-t { color: #ffbd2e; }
|
||||
.red-t { color: #ff5f56; }
|
||||
.cyan-t { color: #5fccd4; }
|
||||
.heading {
|
||||
color: #d8d8d8;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.3em;
|
||||
margin: 1rem 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.blink-cursor {
|
||||
display: inline-block;
|
||||
width: 0.6em;
|
||||
height: 1.1em;
|
||||
background: #b0b0b0;
|
||||
vertical-align: text-bottom;
|
||||
animation: blink-cur 1s step-end infinite;
|
||||
}
|
||||
@keyframes blink-cur {
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
.progress-line {
|
||||
color: #27c93f;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.boot-art {
|
||||
color: #2a2a2a;
|
||||
font-size: 0.6rem;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.separator { color: #333; margin: 0.5rem 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="terminal">
|
||||
<div class="tbar">
|
||||
<div class="dot red"></div>
|
||||
<div class="dot yellow"></div>
|
||||
<div class="dot green"></div>
|
||||
<div class="tbar-title">init.sh — bash — 80x24</div>
|
||||
</div>
|
||||
<div class="twindow">
|
||||
<div class="line dim">BIOS v2.8.1 Copyright (C) 2024</div>
|
||||
<div class="line dim">CPU: 8x 3.6GHz RAM: 32768MB OK</div>
|
||||
<div class="line separator">────────────────────────────────────────────</div>
|
||||
<div class="line bright">Loading kernel module... <span class="green-t">[OK]</span></div>
|
||||
<div class="line bright">Mounting filesystems... <span class="green-t">[OK]</span></div>
|
||||
<div class="line bright">Starting network services... <span class="green-t">[OK]</span></div>
|
||||
<div class="line bright">Checking disk integrity... <span class="green-t">[OK]</span></div>
|
||||
<div class="line bright">Loading web application... <span class="yellow-t">[WAIT]</span></div>
|
||||
<div class="line dim"> > Unpacking assets...</div>
|
||||
<div class="line dim"> > Compiling templates...</div>
|
||||
<div class="line dim"> > Connecting to database...</div>
|
||||
<div class="line separator">────────────────────────────────────────────</div>
|
||||
<div class="heading">SYSTEM INITIALIZING</div>
|
||||
<div class="line separator">────────────────────────────────────────────</div>
|
||||
<div class="line normal">The system is currently initializing.</div>
|
||||
<div class="line normal">Please wait while all services come online.</div>
|
||||
<div class="line"> </div>
|
||||
<div class="line progress-line">[############################..........] 72%</div>
|
||||
<div class="line"> </div>
|
||||
<div class="line cyan-t">Estimated time to completion: ~8 minutes</div>
|
||||
<div class="line"> </div>
|
||||
<div class="line normal">root@server:~# <span class="blink-cursor"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,169 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Printing New Pages — The Inkwell Studio</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: #d4c4a0;
|
||||
color: #2a1a0a;
|
||||
font-family: 'Times New Roman', Georgia, serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-image:
|
||||
radial-gradient(ellipse at 0% 0%, rgba(90,60,20,0.15) 0%, transparent 50%),
|
||||
radial-gradient(ellipse at 100% 100%, rgba(60,40,10,0.2) 0%, transparent 50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
/* Paper texture effect with CSS */
|
||||
.paper {
|
||||
background: #f2e8d0;
|
||||
max-width: 640px;
|
||||
width: 100%;
|
||||
padding: 3.5rem 3.5rem;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
box-shadow:
|
||||
0 2px 4px rgba(0,0,0,0.1),
|
||||
0 8px 20px rgba(0,0,0,0.15),
|
||||
inset 0 1px 0 rgba(255,255,255,0.6);
|
||||
}
|
||||
.paper::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 50px;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background: rgba(200,100,80,0.3);
|
||||
}
|
||||
.ink-header {
|
||||
border-bottom: 3px double #2a1a0a;
|
||||
padding-bottom: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.studio-name {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
color: #1a0a00;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.issue-info {
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.1em;
|
||||
color: #6a4a2a;
|
||||
text-align: right;
|
||||
font-family: Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.big-headline {
|
||||
font-size: clamp(2rem, 5vw, 3rem);
|
||||
font-weight: 900;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
text-align: center;
|
||||
color: #1a0a00;
|
||||
border-bottom: 2px solid #2a1a0a;
|
||||
padding-bottom: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.sub-headline {
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
color: #4a2a0a;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.columns {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1.5rem;
|
||||
border-top: 1px solid #8a6a3a;
|
||||
padding-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.col-text {
|
||||
font-size: 0.88rem;
|
||||
line-height: 1.75;
|
||||
color: #2a1a0a;
|
||||
text-align: justify;
|
||||
hyphens: auto;
|
||||
}
|
||||
.col-text p { margin-bottom: 0.6rem; }
|
||||
.drop-cap::first-letter {
|
||||
float: left;
|
||||
font-size: 3.5em;
|
||||
line-height: 0.75;
|
||||
margin-right: 0.1em;
|
||||
font-weight: 900;
|
||||
color: #1a0a00;
|
||||
padding-top: 0.05em;
|
||||
}
|
||||
.pull-box {
|
||||
border: 1px solid #8a6a3a;
|
||||
border-left: 4px solid #2a1a0a;
|
||||
padding: 0.75rem 1rem;
|
||||
font-style: italic;
|
||||
font-size: 0.95rem;
|
||||
color: #3a1a00;
|
||||
margin-top: 0.75rem;
|
||||
background: rgba(42,26,10,0.04);
|
||||
}
|
||||
.footer-rule {
|
||||
border-top: 1px solid #8a6a3a;
|
||||
border-bottom: 1px solid #8a6a3a;
|
||||
padding: 0.4rem 0;
|
||||
text-align: center;
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
color: #6a4a2a;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
@media (max-width: 520px) {
|
||||
.paper { padding: 2rem 1.5rem; }
|
||||
.columns { grid-template-columns: 1fr; }
|
||||
.paper::before { display: none; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="paper">
|
||||
<div class="ink-header">
|
||||
<div class="studio-name">The Inkwell Studio</div>
|
||||
<div class="issue-info">Creative Agency<br>Est. 2011</div>
|
||||
</div>
|
||||
<div class="big-headline">Printing New Pages</div>
|
||||
<div class="sub-headline">We are composing something entirely new. Stand by for the next edition.</div>
|
||||
<div class="columns">
|
||||
<div class="col-text drop-cap">
|
||||
<p>The presses are running. Every element of our new website is being set by hand — metaphorically speaking — with the same care and craft we bring to every client project.</p>
|
||||
<p>We believe in taking the time to do things properly. Our old site served us well, but the story has moved on, and so must the page.</p>
|
||||
</div>
|
||||
<div class="col-text">
|
||||
<p>Good design, like good writing, rewards patience. We are not rushing this. Every layout, every typographic choice, every piece of copy is being considered and reconsidered.</p>
|
||||
<div class="pull-box">"A blank page is not an absence of ideas — it's an invitation."</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-rule">New site coming soon • Thank you for reading • The Inkwell Studio</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,160 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Up in the Clouds — CloudNine Solutions</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: linear-gradient(180deg, #a8d8f0 0%, #c8eafb 40%, #e8f6ff 70%, #ffffff 100%);
|
||||
color: #1a3a5c;
|
||||
font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* Cloud shapes using CSS */
|
||||
.clouds-layer {
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
.cloud {
|
||||
position: absolute;
|
||||
background: rgba(255,255,255,0.7);
|
||||
border-radius: 999px;
|
||||
animation: drift linear infinite;
|
||||
}
|
||||
.cloud::before, .cloud::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background: inherit;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.c1 { width: 160px; height: 50px; top: 10%; left: -200px; animation-duration: 35s; animation-delay: 0s; }
|
||||
.c1::before { width: 80px; height: 80px; top: -40px; left: 20px; }
|
||||
.c1::after { width: 60px; height: 60px; top: -30px; left: 70px; }
|
||||
.c2 { width: 120px; height: 38px; top: 22%; left: -160px; animation-duration: 45s; animation-delay: 8s; opacity: 0.5; }
|
||||
.c2::before { width: 60px; height: 60px; top: -30px; left: 15px; }
|
||||
.c2::after { width: 50px; height: 50px; top: -25px; left: 55px; }
|
||||
.c3 { width: 200px; height: 60px; top: 8%; left: -250px; animation-duration: 55s; animation-delay: 15s; opacity: 0.4; }
|
||||
.c3::before { width: 100px; height: 100px; top: -55px; left: 25px; }
|
||||
.c3::after { width: 80px; height: 80px; top: -45px; left: 90px; }
|
||||
.c4 { width: 100px; height: 32px; top: 35%; left: -150px; animation-duration: 40s; animation-delay: 5s; opacity: 0.6; }
|
||||
.c4::before { width: 50px; height: 50px; top: -25px; left: 12px; }
|
||||
.c4::after { width: 40px; height: 40px; top: -20px; left: 45px; }
|
||||
@keyframes drift {
|
||||
from { transform: translateX(0); }
|
||||
to { transform: translateX(calc(100vw + 300px)); }
|
||||
}
|
||||
.container {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
text-align: center;
|
||||
padding: 3rem 2rem;
|
||||
max-width: 620px;
|
||||
}
|
||||
.logo-area {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.logo-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
background: rgba(255,255,255,0.8);
|
||||
border: 1px solid rgba(100,180,240,0.4);
|
||||
padding: 0.5rem 1.25rem;
|
||||
border-radius: 999px;
|
||||
box-shadow: 0 2px 15px rgba(80,160,230,0.15);
|
||||
}
|
||||
.logo-icon { font-size: 1.3rem; }
|
||||
.logo-name {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
color: #1a5a9a;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
h1 {
|
||||
font-size: clamp(2rem, 6vw, 4rem);
|
||||
font-weight: 700;
|
||||
color: #0d2d4a;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 0.5rem;
|
||||
text-shadow: 0 2px 10px rgba(255,255,255,0.8);
|
||||
}
|
||||
.h1-sub { color: #2a7abf; }
|
||||
.tagline {
|
||||
font-size: 1rem;
|
||||
color: #4a7a9a;
|
||||
margin-bottom: 2.5rem;
|
||||
font-style: italic;
|
||||
}
|
||||
.glass-card {
|
||||
background: rgba(255,255,255,0.65);
|
||||
border: 1px solid rgba(160,210,240,0.5);
|
||||
border-radius: 16px;
|
||||
padding: 2rem 2.5rem;
|
||||
backdrop-filter: blur(8px);
|
||||
box-shadow: 0 8px 32px rgba(100,160,220,0.12);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.glass-card p {
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.8;
|
||||
color: #2a4a6a;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.glass-card p:last-child { margin-bottom: 0; }
|
||||
.feature-row {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.feat {
|
||||
background: rgba(255,255,255,0.7);
|
||||
border: 1px solid rgba(100,180,240,0.3);
|
||||
border-radius: 10px;
|
||||
padding: 0.75rem 1.1rem;
|
||||
font-size: 0.78rem;
|
||||
color: #1a5a9a;
|
||||
letter-spacing: 0.05em;
|
||||
font-weight: 600;
|
||||
}
|
||||
.feat span { display: block; font-size: 1.2rem; margin-bottom: 0.25rem; text-align: center; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="clouds-layer">
|
||||
<div class="cloud c1"></div>
|
||||
<div class="cloud c2"></div>
|
||||
<div class="cloud c3"></div>
|
||||
<div class="cloud c4"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="logo-area">
|
||||
<div class="logo-pill">
|
||||
<span class="logo-icon">☁</span>
|
||||
<span class="logo-name">CloudNine Solutions</span>
|
||||
</div>
|
||||
</div>
|
||||
<h1>Up in the<br><span class="h1-sub">Clouds</span></h1>
|
||||
<div class="tagline">We're migrating to something that lives higher.</div>
|
||||
<div class="glass-card">
|
||||
<p>Our platform is currently undergoing a major cloud infrastructure upgrade. We're moving everything to a distributed, globally-replicated system designed for the next decade.</p>
|
||||
<p>Your data is safe, your services will resume shortly, and the experience on the other side will be noticeably better.</p>
|
||||
</div>
|
||||
<div class="feature-row">
|
||||
<div class="feat"><span>⚡</span>3x Faster</div>
|
||||
<div class="feat"><span>🛡</span>99.9% Uptime</div>
|
||||
<div class="feat"><span>🌍</span>Global CDN</div>
|
||||
<div class="feat"><span>🔒</span>Zero-Trust</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,195 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>The Thornfield — Under Renovation</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: #1a0818;
|
||||
color: #f0e0d8;
|
||||
font-family: 'Palatino Linotype', Palatino, Georgia, serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.bg-texture {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background:
|
||||
radial-gradient(ellipse at 50% 0%, rgba(120,20,50,0.5) 0%, transparent 60%),
|
||||
radial-gradient(ellipse at 80% 80%, rgba(80,10,30,0.4) 0%, transparent 50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.banner-top {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
background: #8b1a35;
|
||||
text-align: center;
|
||||
padding: 0.6rem 1rem;
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.3em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255,220,210,0.9);
|
||||
font-family: 'Trebuchet MS', Arial, sans-serif;
|
||||
border-bottom: 1px solid rgba(200,80,100,0.4);
|
||||
}
|
||||
.main {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 3rem 2rem;
|
||||
}
|
||||
.crest {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
text-shadow: 0 0 20px rgba(180,60,80,0.4);
|
||||
}
|
||||
.brand-primary {
|
||||
font-size: 1.8rem;
|
||||
font-weight: normal;
|
||||
letter-spacing: 0.1em;
|
||||
color: #f0ddd5;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
.brand-secondary {
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.55em;
|
||||
text-transform: uppercase;
|
||||
color: #9b4060;
|
||||
margin-bottom: 2.5rem;
|
||||
font-family: 'Trebuchet MS', Arial, sans-serif;
|
||||
}
|
||||
.title-block {
|
||||
text-align: center;
|
||||
max-width: 560px;
|
||||
}
|
||||
.overline {
|
||||
font-size: 0.65rem;
|
||||
letter-spacing: 0.5em;
|
||||
text-transform: uppercase;
|
||||
color: #8b1a35;
|
||||
font-family: 'Trebuchet MS', Arial, sans-serif;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
h1 {
|
||||
font-size: clamp(1.8rem, 4.5vw, 3rem);
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
line-height: 1.2;
|
||||
color: #f8e8e0;
|
||||
margin-bottom: 0.5rem;
|
||||
text-shadow: 0 2px 15px rgba(0,0,0,0.5);
|
||||
}
|
||||
.rule-dec {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
justify-content: center;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
.rule-dec-line { flex: 1; max-width: 80px; height: 1px; background: linear-gradient(90deg, transparent, #6b1a35); }
|
||||
.rule-dec-line.r { background: linear-gradient(90deg, #6b1a35, transparent); }
|
||||
.rule-dec-sym { color: #8b1a35; font-size: 0.8rem; }
|
||||
p {
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.9;
|
||||
color: #c0a898;
|
||||
margin-bottom: 0.75rem;
|
||||
text-align: center;
|
||||
}
|
||||
.info-strip {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1px;
|
||||
background: rgba(139,26,53,0.3);
|
||||
border: 1px solid rgba(139,26,53,0.3);
|
||||
margin: 2rem 0;
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
}
|
||||
.info-cell {
|
||||
background: rgba(26,8,24,0.8);
|
||||
padding: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
.info-cell-label {
|
||||
font-size: 0.65rem;
|
||||
letter-spacing: 0.3em;
|
||||
text-transform: uppercase;
|
||||
color: #7a3050;
|
||||
font-family: 'Trebuchet MS', Arial, sans-serif;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
.info-cell-value {
|
||||
font-size: 0.9rem;
|
||||
color: #e0c0c0;
|
||||
font-style: italic;
|
||||
}
|
||||
.apology {
|
||||
font-size: 0.8rem;
|
||||
color: #7a5060;
|
||||
font-style: italic;
|
||||
margin-top: 0.5rem;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
.footer-line {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
border-top: 1px solid rgba(139,26,53,0.3);
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
font-size: 0.68rem;
|
||||
color: #6a3040;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
font-family: 'Trebuchet MS', Arial, sans-serif;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="bg-texture"></div>
|
||||
<div class="banner-top">⚠ Site Under Renovation — We Apologise for the Disruption</div>
|
||||
<div class="main">
|
||||
<div class="crest">🏰</div>
|
||||
<div class="brand-primary">The Thornfield</div>
|
||||
<div class="brand-secondary">Hotel & Event Venue • Est. 1892</div>
|
||||
<div class="title-block">
|
||||
<div class="overline">Notice to Our Guests</div>
|
||||
<h1>Our Website Is Currently<br>Under Renovation</h1>
|
||||
<div class="rule-dec">
|
||||
<span class="rule-dec-line"></span>
|
||||
<span class="rule-dec-sym">♦</span>
|
||||
<span class="rule-dec-line r"></span>
|
||||
</div>
|
||||
<p>The Thornfield is undergoing a full renovation of our online presence. Our new website will reflect the updated look and feel of our recently restored interiors.</p>
|
||||
<p>We sincerely apologise for any disruption to your booking experience. Our reservations team remains fully operational and available to assist you directly.</p>
|
||||
<div class="info-strip">
|
||||
<div class="info-cell">
|
||||
<div class="info-cell-label">Reservations</div>
|
||||
<div class="info-cell-value">By telephone</div>
|
||||
</div>
|
||||
<div class="info-cell">
|
||||
<div class="info-cell-label">Site Return</div>
|
||||
<div class="info-cell-value">Within 2 weeks</div>
|
||||
</div>
|
||||
<div class="info-cell">
|
||||
<div class="info-cell-label">Hotel Status</div>
|
||||
<div class="info-cell-value">Open as usual</div>
|
||||
</div>
|
||||
<div class="info-cell">
|
||||
<div class="info-cell-label">Events</div>
|
||||
<div class="info-cell-value">Fully bookable</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="apology">— The Management of The Thornfield</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-line">© The Thornfield Hotel & Venue • All rights reserved</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,166 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>ENTERING NEW DIMENSION — VORTEX</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: #08000f;
|
||||
color: #e0d0ff;
|
||||
font-family: 'Arial Black', 'Arial', sans-serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* Grid background */
|
||||
.grid-bg {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-image:
|
||||
linear-gradient(rgba(120,0,255,0.08) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(120,0,255,0.08) 1px, transparent 1px);
|
||||
background-size: 40px 40px;
|
||||
perspective: 300px;
|
||||
transform: rotateX(60deg) scaleY(2);
|
||||
transform-origin: bottom center;
|
||||
bottom: -50%;
|
||||
pointer-events: none;
|
||||
}
|
||||
.grid-bg::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(to bottom, #08000f 0%, transparent 40%, transparent 60%, #08000f 100%);
|
||||
}
|
||||
/* Glow orbs */
|
||||
.orb {
|
||||
position: fixed;
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
filter: blur(60px);
|
||||
}
|
||||
.orb1 { width: 400px; height: 400px; background: rgba(120,0,255,0.3); top: -100px; left: -100px; }
|
||||
.orb2 { width: 300px; height: 300px; background: rgba(200,0,255,0.2); bottom: -50px; right: -50px; }
|
||||
.orb3 { width: 200px; height: 200px; background: rgba(80,0,200,0.4); top: 50%; left: 50%; transform: translate(-50%,-50%); }
|
||||
.container {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
max-width: 700px;
|
||||
}
|
||||
.v-logo {
|
||||
font-size: 0.65rem;
|
||||
letter-spacing: 0.6em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(160,80,255,0.6);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.title-wrap {
|
||||
position: relative;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
h1 {
|
||||
font-size: clamp(2.5rem, 8vw, 6rem);
|
||||
font-weight: 900;
|
||||
text-transform: uppercase;
|
||||
line-height: 0.9;
|
||||
letter-spacing: 0.05em;
|
||||
color: transparent;
|
||||
-webkit-text-stroke: 2px rgba(160,80,255,0.8);
|
||||
position: relative;
|
||||
}
|
||||
h1 .fill {
|
||||
color: #c060ff;
|
||||
-webkit-text-stroke: 0;
|
||||
text-shadow:
|
||||
0 0 20px rgba(160,80,255,0.8),
|
||||
0 0 60px rgba(120,0,255,0.5),
|
||||
0 0 120px rgba(120,0,255,0.3);
|
||||
}
|
||||
.h1-sub {
|
||||
font-size: clamp(1.5rem, 4vw, 3rem);
|
||||
color: rgba(200,120,255,0.9);
|
||||
text-shadow: 0 0 30px rgba(160,80,255,0.6);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.scan-line {
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, #c060ff, transparent);
|
||||
margin: 2rem auto;
|
||||
max-width: 400px;
|
||||
box-shadow: 0 0 15px rgba(192,96,255,0.6);
|
||||
}
|
||||
p {
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.8;
|
||||
color: rgba(180,140,255,0.7);
|
||||
max-width: 460px;
|
||||
margin: 0 auto 1rem;
|
||||
letter-spacing: 0.05em;
|
||||
font-family: 'Trebuchet MS', Arial, sans-serif;
|
||||
}
|
||||
.hex-grid {
|
||||
display: flex;
|
||||
gap: 0.6rem;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.hex {
|
||||
border: 1px solid rgba(160,80,255,0.4);
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.65rem;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(160,80,255,0.8);
|
||||
clip-path: polygon(8% 0%, 92% 0%, 100% 50%, 92% 100%, 8% 100%, 0% 50%);
|
||||
background: rgba(120,0,255,0.08);
|
||||
}
|
||||
.pulse-ring {
|
||||
position: fixed;
|
||||
width: 600px; height: 600px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(120,0,255,0.15);
|
||||
top: 50%; left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
animation: ringpulse 4s ease-out infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
.pulse-ring:nth-child(2) { animation-delay: 1.3s; }
|
||||
.pulse-ring:nth-child(3) { animation-delay: 2.6s; }
|
||||
@keyframes ringpulse {
|
||||
0% { transform: translate(-50%,-50%) scale(0.2); opacity: 0.8; }
|
||||
100% { transform: translate(-50%,-50%) scale(1.5); opacity: 0; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="grid-bg"></div>
|
||||
<div class="orb orb1"></div>
|
||||
<div class="orb orb2"></div>
|
||||
<div class="orb orb3"></div>
|
||||
<div class="pulse-ring"></div>
|
||||
<div class="pulse-ring"></div>
|
||||
<div class="pulse-ring"></div>
|
||||
<div class="container">
|
||||
<div class="v-logo">✦ VORTEX GAMING & TECH ✦</div>
|
||||
<div class="h1-sub">ENTERING</div>
|
||||
<h1><span class="fill">NEW</span><br>DIMENSION</h1>
|
||||
<div class="scan-line"></div>
|
||||
<p>Our universe is being rebuilt from the ground up. New mechanics, new visuals, new everything. What comes next will redefine the game.</p>
|
||||
<p>Stand by for transmission.</p>
|
||||
<div class="hex-grid">
|
||||
<div class="hex">Engine v5</div>
|
||||
<div class="hex">New Worlds</div>
|
||||
<div class="hex">Full Rebuild</div>
|
||||
<div class="hex">Q1 2025</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,172 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Crafting Something Special — Birch & Thread</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: #f8f2e8;
|
||||
color: #3a2a1a;
|
||||
font-family: Georgia, 'Times New Roman', serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
}
|
||||
/* Hand-drawn border using dashed CSS */
|
||||
.frame-outer {
|
||||
max-width: 580px;
|
||||
width: 100%;
|
||||
border: 3px dashed #c4a878;
|
||||
padding: 8px;
|
||||
background: #fdf8f0;
|
||||
}
|
||||
.frame-inner {
|
||||
border: 1px solid #d4b888;
|
||||
padding: 3rem 2.5rem;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
background: #fefcf8;
|
||||
}
|
||||
/* Corner doodles with CSS */
|
||||
.corner-mark {
|
||||
position: absolute;
|
||||
width: 20px; height: 20px;
|
||||
border: 2px solid #c4a878;
|
||||
}
|
||||
.corner-mark.tl { top: 8px; left: 8px; border-right: none; border-bottom: none; }
|
||||
.corner-mark.tr { top: 8px; right: 8px; border-left: none; border-bottom: none; }
|
||||
.corner-mark.bl { bottom: 8px; left: 8px; border-right: none; border-top: none; }
|
||||
.corner-mark.br { bottom: 8px; right: 8px; border-left: none; border-top: none; }
|
||||
.stitch-top {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.stitch-dot {
|
||||
width: 5px; height: 5px;
|
||||
border-radius: 50%;
|
||||
background: #c4a878;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.brand {
|
||||
font-size: 1.4rem;
|
||||
font-style: italic;
|
||||
color: #5a3a2a;
|
||||
margin-bottom: 0.25rem;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
.brand-tag {
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.4em;
|
||||
text-transform: uppercase;
|
||||
color: #a08060;
|
||||
margin-bottom: 2rem;
|
||||
font-family: 'Trebuchet MS', Arial, sans-serif;
|
||||
}
|
||||
/* Wobbly hand-drawn style underline with CSS */
|
||||
.wobbly {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background:
|
||||
radial-gradient(ellipse 8px 4px at 50% 50%, transparent 3px, #c4a878 3px, #c4a878 4px, transparent 4px) repeat-x;
|
||||
background-size: 16px 8px;
|
||||
opacity: 0.5;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
h1 {
|
||||
font-size: clamp(1.6rem, 4vw, 2.4rem);
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
color: #2a1a0a;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.asterisk-row {
|
||||
color: #c4a878;
|
||||
letter-spacing: 0.5em;
|
||||
font-size: 1rem;
|
||||
margin: 0.75rem 0;
|
||||
}
|
||||
p {
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.9;
|
||||
color: #6a5040;
|
||||
margin-bottom: 0.75rem;
|
||||
max-width: 400px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.tag-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
justify-content: center;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
.tag-item {
|
||||
border: 1px dashed #c4a878;
|
||||
padding: 0.35rem 0.85rem;
|
||||
font-size: 0.72rem;
|
||||
color: #8a6848;
|
||||
font-family: 'Trebuchet MS', Arial, sans-serif;
|
||||
letter-spacing: 0.1em;
|
||||
background: rgba(196,168,120,0.06);
|
||||
}
|
||||
.stitch-bottom {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
.note-below {
|
||||
margin-top: 1rem;
|
||||
font-size: 0.75rem;
|
||||
color: #b09878;
|
||||
letter-spacing: 0.15em;
|
||||
font-family: 'Trebuchet MS', Arial, sans-serif;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="frame-outer">
|
||||
<div class="frame-inner">
|
||||
<div class="corner-mark tl"></div>
|
||||
<div class="corner-mark tr"></div>
|
||||
<div class="corner-mark bl"></div>
|
||||
<div class="corner-mark br"></div>
|
||||
<div class="stitch-top">
|
||||
<div class="stitch-dot"></div><div class="stitch-dot"></div><div class="stitch-dot"></div>
|
||||
<div class="stitch-dot"></div><div class="stitch-dot"></div><div class="stitch-dot"></div>
|
||||
<div class="stitch-dot"></div><div class="stitch-dot"></div><div class="stitch-dot"></div>
|
||||
</div>
|
||||
<div class="brand">Birch & Thread</div>
|
||||
<div class="brand-tag">Handmade Goods & Craft Supplies</div>
|
||||
<div class="wobbly"></div>
|
||||
<h1>Crafting Something<br>Special</h1>
|
||||
<div class="asterisk-row">✲ ✲ ✲</div>
|
||||
<p>We're putting the same love and attention into our new website that we put into everything we make. Hand-selected, carefully composed, and made to last.</p>
|
||||
<p>Our shop will be back up soon with new products, new stories, and a much nicer place to browse.</p>
|
||||
<div class="tag-list">
|
||||
<div class="tag-item">Handmade</div>
|
||||
<div class="tag-item">Natural Materials</div>
|
||||
<div class="tag-item">Small Batch</div>
|
||||
<div class="tag-item">Made with Care</div>
|
||||
</div>
|
||||
<div class="stitch-bottom">
|
||||
<div class="stitch-dot"></div><div class="stitch-dot"></div><div class="stitch-dot"></div>
|
||||
<div class="stitch-dot"></div><div class="stitch-dot"></div><div class="stitch-dot"></div>
|
||||
<div class="stitch-dot"></div><div class="stitch-dot"></div><div class="stitch-dot"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="note-below">Back soon • Worth the wait</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,207 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Riding New Waves — Tidebreak Surf</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: #0a2a3a;
|
||||
color: #e0f4f8;
|
||||
font-family: 'Trebuchet MS', 'Segoe UI', Arial, sans-serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* Ocean gradient */
|
||||
.ocean-bg {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
#061822 0%,
|
||||
#0a3050 30%,
|
||||
#0d4868 60%,
|
||||
#0f5a7a 100%
|
||||
);
|
||||
}
|
||||
/* Wave animation */
|
||||
.waves-wrap {
|
||||
position: fixed;
|
||||
bottom: 0; left: 0; right: 0;
|
||||
height: 200px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.wave {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: -100%;
|
||||
width: 300%;
|
||||
height: 100px;
|
||||
border-radius: 50% 50% 0 0;
|
||||
}
|
||||
.wave1 {
|
||||
background: rgba(15,90,120,0.6);
|
||||
animation: wave-move 8s ease-in-out infinite;
|
||||
bottom: 0;
|
||||
}
|
||||
.wave2 {
|
||||
background: rgba(20,110,145,0.5);
|
||||
animation: wave-move 11s ease-in-out infinite reverse;
|
||||
bottom: 20px;
|
||||
height: 80px;
|
||||
}
|
||||
.wave3 {
|
||||
background: rgba(30,140,175,0.4);
|
||||
animation: wave-move 14s ease-in-out infinite;
|
||||
bottom: 35px;
|
||||
height: 60px;
|
||||
}
|
||||
.seafoam {
|
||||
position: absolute;
|
||||
bottom: 95px; left: 0; right: 0;
|
||||
height: 20px;
|
||||
background: linear-gradient(to top, rgba(200,240,255,0.15), transparent);
|
||||
animation: foam 8s ease-in-out infinite;
|
||||
}
|
||||
@keyframes wave-move {
|
||||
0%, 100% { transform: translateX(0) scaleY(1); }
|
||||
50% { transform: translateX(8%) scaleY(1.1); }
|
||||
}
|
||||
@keyframes foam {
|
||||
0%, 100% { opacity: 0.5; transform: translateX(0); }
|
||||
50% { opacity: 1; transform: translateX(4%); }
|
||||
}
|
||||
/* Light shimmer on water */
|
||||
.shimmer {
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0;
|
||||
height: 50%;
|
||||
background: radial-gradient(ellipse at 50% 0%, rgba(20,140,200,0.15) 0%, transparent 60%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.container {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
text-align: center;
|
||||
padding: 3rem 2rem;
|
||||
max-width: 620px;
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
.brand-area {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.brand-name {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.25em;
|
||||
text-transform: uppercase;
|
||||
color: #6dd4f0;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
.brand-sub {
|
||||
font-size: 0.65rem;
|
||||
letter-spacing: 0.4em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(109,212,240,0.5);
|
||||
}
|
||||
h1 {
|
||||
font-size: clamp(2.5rem, 7vw, 5rem);
|
||||
font-weight: 900;
|
||||
text-transform: uppercase;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.01em;
|
||||
color: #e0f8ff;
|
||||
text-shadow: 0 4px 20px rgba(0,150,200,0.4);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
h1 .wave-word {
|
||||
color: #4ac8e8;
|
||||
text-shadow: 0 0 30px rgba(74,200,232,0.5), 0 4px 20px rgba(0,150,200,0.4);
|
||||
}
|
||||
.wave-dash {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
justify-content: center;
|
||||
margin: 1.25rem 0;
|
||||
}
|
||||
.wd-line { flex: 1; max-width: 80px; height: 1px; background: rgba(74,200,232,0.4); }
|
||||
.wd-sym { color: rgba(74,200,232,0.6); font-size: 1.2rem; }
|
||||
p {
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.8;
|
||||
color: rgba(200,240,255,0.75);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.condition-bar {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
justify-content: center;
|
||||
margin-top: 2rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.cond {
|
||||
text-align: center;
|
||||
}
|
||||
.cond-icon { font-size: 1.5rem; margin-bottom: 0.3rem; }
|
||||
.cond-label {
|
||||
font-size: 0.65rem;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(109,212,240,0.6);
|
||||
}
|
||||
.cond-val {
|
||||
font-size: 0.85rem;
|
||||
color: #9ae8ff;
|
||||
font-weight: 700;
|
||||
margin-top: 0.1rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="ocean-bg"></div>
|
||||
<div class="shimmer"></div>
|
||||
<div class="waves-wrap">
|
||||
<div class="wave wave1"></div>
|
||||
<div class="wave wave2"></div>
|
||||
<div class="wave wave3"></div>
|
||||
<div class="seafoam"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="brand-area">
|
||||
<div class="brand-name">🌊 Tidebreak Surf</div>
|
||||
<div class="brand-sub">Boards • Gear • Culture</div>
|
||||
</div>
|
||||
<h1>Riding<br><span class="wave-word">New Waves</span></h1>
|
||||
<div class="wave-dash">
|
||||
<span class="wd-line"></span>
|
||||
<span class="wd-sym">∼</span>
|
||||
<span class="wd-line"></span>
|
||||
</div>
|
||||
<p>We're paddling out to a whole new site. New boards, new gear, new vibes — and a much better online shop for everything you need in the water and out of it.</p>
|
||||
<p>The swell is building. We'll see you out there soon.</p>
|
||||
<div class="condition-bar">
|
||||
<div class="cond">
|
||||
<div class="cond-icon">📏</div>
|
||||
<div class="cond-val">4-6 ft</div>
|
||||
<div class="cond-label">New Features</div>
|
||||
</div>
|
||||
<div class="cond">
|
||||
<div class="cond-icon">🌬</div>
|
||||
<div class="cond-val">Offshore</div>
|
||||
<div class="cond-label">Design Direction</div>
|
||||
</div>
|
||||
<div class="cond">
|
||||
<div class="cond-icon">📅</div>
|
||||
<div class="cond-val">Soon</div>
|
||||
<div class="cond-label">Launch Window</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,210 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>The Future Is Loading — Aphelion</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: #020408;
|
||||
color: #c8d8f0;
|
||||
font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* Star field using CSS pseudo-elements and box-shadow */
|
||||
.star-layer {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.star-layer::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 2px; height: 2px;
|
||||
background: transparent;
|
||||
box-shadow:
|
||||
120px 80px rgba(255,255,255,0.8),
|
||||
340px 150px rgba(255,255,255,0.6),
|
||||
560px 60px rgba(200,220,255,0.9),
|
||||
780px 200px rgba(255,255,255,0.7),
|
||||
1000px 90px rgba(255,255,255,0.5),
|
||||
1200px 170px rgba(200,220,255,0.8),
|
||||
1400px 40px rgba(255,255,255,0.6),
|
||||
200px 300px rgba(255,255,255,0.7),
|
||||
450px 380px rgba(180,200,255,0.9),
|
||||
700px 280px rgba(255,255,255,0.5),
|
||||
950px 350px rgba(255,255,255,0.8),
|
||||
1150px 320px rgba(200,220,255,0.6),
|
||||
1350px 260px rgba(255,255,255,0.7),
|
||||
80px 480px rgba(255,255,255,0.5),
|
||||
300px 520px rgba(180,200,255,0.8),
|
||||
600px 450px rgba(255,255,255,0.9),
|
||||
850px 500px rgba(255,255,255,0.6),
|
||||
1100px 470px rgba(200,220,255,0.7),
|
||||
1300px 410px rgba(255,255,255,0.5),
|
||||
50px 650px rgba(255,255,255,0.8),
|
||||
280px 700px rgba(180,200,255,0.6),
|
||||
530px 620px rgba(255,255,255,0.7),
|
||||
760px 680px rgba(255,255,255,0.5),
|
||||
1020px 640px rgba(200,220,255,0.9),
|
||||
1250px 590px rgba(255,255,255,0.6),
|
||||
160px 820px rgba(255,255,255,0.7),
|
||||
420px 780px rgba(180,200,255,0.8),
|
||||
670px 850px rgba(255,255,255,0.5),
|
||||
910px 800px rgba(255,255,255,0.6),
|
||||
1180px 760px rgba(200,220,255,0.9),
|
||||
370px 920px rgba(255,255,255,0.7),
|
||||
640px 960px rgba(255,255,255,0.5),
|
||||
890px 940px rgba(180,200,255,0.8);
|
||||
}
|
||||
.star-layer::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 1px; height: 1px;
|
||||
background: transparent;
|
||||
box-shadow:
|
||||
190px 120px rgba(255,255,255,0.9),
|
||||
410px 220px rgba(180,200,255,0.7),
|
||||
630px 140px rgba(255,255,255,0.6),
|
||||
860px 260px rgba(255,255,255,0.8),
|
||||
1070px 130px rgba(200,220,255,0.5),
|
||||
1280px 290px rgba(255,255,255,0.9),
|
||||
240px 420px rgba(255,255,255,0.6),
|
||||
500px 480px rgba(180,200,255,0.8),
|
||||
750px 400px rgba(255,255,255,0.7),
|
||||
980px 440px rgba(255,255,255,0.5),
|
||||
1230px 380px rgba(200,220,255,0.9),
|
||||
140px 580px rgba(255,255,255,0.8),
|
||||
390px 560px rgba(180,200,255,0.6),
|
||||
640px 610px rgba(255,255,255,0.7),
|
||||
880px 570px rgba(255,255,255,0.5),
|
||||
1120px 540px rgba(200,220,255,0.8),
|
||||
70px 740px rgba(255,255,255,0.6),
|
||||
320px 760px rgba(180,200,255,0.9),
|
||||
570px 720px rgba(255,255,255,0.7),
|
||||
820px 780px rgba(255,255,255,0.5),
|
||||
1060px 720px rgba(200,220,255,0.6),
|
||||
215px 880px rgba(255,255,255,0.8),
|
||||
465px 840px rgba(180,200,255,0.7),
|
||||
715px 900px rgba(255,255,255,0.5),
|
||||
960px 860px rgba(255,255,255,0.9);
|
||||
}
|
||||
/* Nebula glow */
|
||||
.nebula {
|
||||
position: fixed;
|
||||
border-radius: 50%;
|
||||
filter: blur(80px);
|
||||
pointer-events: none;
|
||||
}
|
||||
.neb1 { width: 500px; height: 300px; background: rgba(40,20,100,0.35); top: 10%; left: 15%; }
|
||||
.neb2 { width: 400px; height: 250px; background: rgba(10,50,120,0.25); bottom: 15%; right: 10%; }
|
||||
.container {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
text-align: center;
|
||||
padding: 3rem 2rem;
|
||||
max-width: 660px;
|
||||
}
|
||||
.eyebrow {
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.55em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(100,150,255,0.6);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.planet {
|
||||
width: 80px; height: 80px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle at 35% 35%, #3a6aaa, #0a1a3a 60%, #020810);
|
||||
box-shadow:
|
||||
0 0 30px rgba(50,100,200,0.3),
|
||||
0 0 60px rgba(30,70,150,0.15),
|
||||
inset -15px -15px 30px rgba(0,0,30,0.8);
|
||||
margin: 0 auto 2rem;
|
||||
}
|
||||
h1 {
|
||||
font-size: clamp(1.8rem, 5vw, 3.5rem);
|
||||
font-weight: 300;
|
||||
color: #d8e8ff;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 0.5rem;
|
||||
text-shadow: 0 0 40px rgba(80,140,255,0.3);
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
h1 strong {
|
||||
font-weight: 800;
|
||||
color: #7aafff;
|
||||
text-shadow: 0 0 40px rgba(100,160,255,0.5);
|
||||
}
|
||||
.coord {
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.25em;
|
||||
color: rgba(80,140,255,0.4);
|
||||
margin-bottom: 2rem;
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
p {
|
||||
font-size: 0.92rem;
|
||||
line-height: 1.8;
|
||||
color: rgba(180,210,255,0.7);
|
||||
max-width: 460px;
|
||||
margin: 0 auto 0.75rem;
|
||||
}
|
||||
.data-row {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
justify-content: center;
|
||||
margin-top: 2.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.data-item { text-align: center; }
|
||||
.data-val {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 700;
|
||||
color: #7aafff;
|
||||
font-family: 'Courier New', monospace;
|
||||
text-shadow: 0 0 15px rgba(100,160,255,0.4);
|
||||
}
|
||||
.data-label {
|
||||
font-size: 0.6rem;
|
||||
letter-spacing: 0.3em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(80,140,255,0.4);
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="star-layer"></div>
|
||||
<div class="nebula neb1"></div>
|
||||
<div class="nebula neb2"></div>
|
||||
<div class="container">
|
||||
<div class="eyebrow">Aphelion • Space & Technology Platform</div>
|
||||
<div class="planet"></div>
|
||||
<h1>The Future<br>Is <strong>Loading</strong></h1>
|
||||
<div class="coord">▲ 48.3°N • SECTOR 7 • T-MINUS: SOON</div>
|
||||
<p>We're in the final stages of launching our new platform. The infrastructure has been built for what comes next — faster, smarter, further reaching than anything we've shipped before.</p>
|
||||
<p>The universe doesn't wait. Neither will we.</p>
|
||||
<div class="data-row">
|
||||
<div class="data-item">
|
||||
<div class="data-val">98.6%</div>
|
||||
<div class="data-label">Systems Ready</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div class="data-val">< 48h</div>
|
||||
<div class="data-label">To Launch</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div class="data-val">∞</div>
|
||||
<div class="data-label">Potential</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,94 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>New Chapter, Coming Soon — Aurore</title>
|
||||
<style>
|
||||
*{margin:0;padding:0;box-sizing:border-box}
|
||||
body{
|
||||
min-height:100vh;
|
||||
background:linear-gradient(135deg,#fce4ec 0%,#f8bbd9 30%,#ffd6c8 70%,#ffe4d6 100%);
|
||||
font-family:'Garamond','Georgia',serif;
|
||||
display:flex;flex-direction:column;
|
||||
}
|
||||
.header{
|
||||
padding:28px 40px;display:flex;justify-content:space-between;align-items:center;
|
||||
}
|
||||
.brand{font-size:1.1rem;font-weight:normal;letter-spacing:0.25em;color:#8b4060}
|
||||
.nav-hint{font-size:0.75rem;letter-spacing:0.15em;color:#c08090}
|
||||
.main{
|
||||
flex:1;display:flex;align-items:center;justify-content:center;
|
||||
padding:40px 24px;
|
||||
}
|
||||
.content{
|
||||
max-width:580px;text-align:center;
|
||||
}
|
||||
.overline{
|
||||
font-size:0.7rem;letter-spacing:0.4em;text-transform:uppercase;
|
||||
color:#c08090;margin-bottom:24px;font-family:'Trebuchet MS',Arial,sans-serif;
|
||||
}
|
||||
h1{
|
||||
font-size:clamp(2.2rem,5vw,3.6rem);font-weight:normal;
|
||||
color:#5a1a30;line-height:1.25;margin-bottom:24px;
|
||||
font-style:italic;
|
||||
}
|
||||
.flourish{
|
||||
display:flex;align-items:center;gap:16px;justify-content:center;
|
||||
margin-bottom:24px;
|
||||
}
|
||||
.fl-line{flex:1;max-width:80px;height:1px;background:linear-gradient(90deg,transparent,#d4899a)}
|
||||
.fl-line.r{background:linear-gradient(90deg,#d4899a,transparent)}
|
||||
.fl-diamond{width:6px;height:6px;background:#d4899a;transform:rotate(45deg)}
|
||||
.tagline{
|
||||
font-size:1rem;line-height:1.9;color:#8b4060;
|
||||
margin-bottom:36px;
|
||||
}
|
||||
.pill{
|
||||
display:inline-block;
|
||||
background:rgba(255,255,255,0.6);backdrop-filter:blur(4px);
|
||||
border:1px solid rgba(212,137,154,0.4);
|
||||
padding:10px 28px;border-radius:50px;
|
||||
font-size:0.85rem;letter-spacing:0.1em;color:#8b4060;
|
||||
font-family:'Trebuchet MS',Arial,sans-serif;
|
||||
}
|
||||
.circles{
|
||||
position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0;
|
||||
}
|
||||
.circle{
|
||||
position:absolute;border-radius:50%;
|
||||
background:rgba(255,255,255,0.25);
|
||||
}
|
||||
.c1{width:500px;height:500px;top:-200px;right:-150px}
|
||||
.c2{width:300px;height:300px;bottom:-100px;left:-80px;background:rgba(255,200,220,0.3)}
|
||||
.c3{width:180px;height:180px;top:40%;left:5%;background:rgba(255,230,240,0.4)}
|
||||
.footer{padding:20px 40px;text-align:center;font-size:0.75rem;color:#c08090;letter-spacing:0.1em;position:relative;z-index:1}
|
||||
.content{position:relative;z-index:1}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="circles">
|
||||
<div class="circle c1"></div>
|
||||
<div class="circle c2"></div>
|
||||
<div class="circle c3"></div>
|
||||
</div>
|
||||
<div class="header">
|
||||
<div class="brand">Rosé & Co.</div>
|
||||
<div class="nav-hint">A New Chapter</div>
|
||||
</div>
|
||||
<div class="main">
|
||||
<div class="content">
|
||||
<div class="overline">Coming Soon</div>
|
||||
<h1>A New Chapter,<br>Coming Soon</h1>
|
||||
<div class="flourish">
|
||||
<span class="fl-line"></span>
|
||||
<span class="fl-diamond"></span>
|
||||
<span class="fl-line r"></span>
|
||||
</div>
|
||||
<p class="tagline">We're reimagining our corner of the world.<br>A fresh space, a new story — curated with love and intention.</p>
|
||||
<div class="pill">Back Soon — Thank You for Waiting</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">© 2026 Rosé & Co. • All rights reserved</div>
|
||||
</body>
|
||||
</html>
|
||||
+872
@@ -0,0 +1,872 @@
|
||||
#!/bin/bash
|
||||
#################### x-ui-pro-refactor @ github.com/mozaroc #############################
|
||||
[[ $EUID -ne 0 ]] && echo "not root!" && sudo su -
|
||||
|
||||
# ─── Output helpers ──────────────────────────────────────────────────────────
|
||||
msg_ok() { echo -e "\e[1;42m $1 \e[0m"; }
|
||||
msg_err() { echo -e "\e[1;41m $1 \e[0m"; }
|
||||
msg_inf() { echo -e "\e[1;34m$1\e[0m"; }
|
||||
|
||||
echo; msg_inf ' ___ _ _ _ '
|
||||
msg_inf ' \/ __ | | | __ |_) |_) / \ '
|
||||
msg_inf ' /\ |_| _|_ | | \ \_/ '; echo
|
||||
|
||||
# ─── Constants ───────────────────────────────────────────────────────────────
|
||||
XUIDB="/etc/x-ui/x-ui.db"
|
||||
GITHUB_RAW="https://raw.githubusercontent.com/mozaroc/3x-ui-pro/main"
|
||||
FAKE_SITE_COUNT=50
|
||||
|
||||
# ─── Default argument values ─────────────────────────────────────────────────
|
||||
domain=""
|
||||
reality_domain=""
|
||||
UNINSTALL="x"
|
||||
INSTALL="n"
|
||||
AUTODOMAIN="n"
|
||||
CFALLOW="n"
|
||||
|
||||
# ─── Stop & clean previous install ───────────────────────────────────────────
|
||||
systemctl stop x-ui 2>/dev/null || true
|
||||
rm -rf /etc/systemd/system/x-ui.service
|
||||
rm -rf /usr/local/x-ui
|
||||
rm -rf /etc/x-ui
|
||||
rm -rf /etc/nginx/sites-enabled/*
|
||||
rm -rf /etc/nginx/sites-available/*
|
||||
rm -rf /etc/nginx/stream-enabled/*
|
||||
|
||||
# ─── Port / path generators ──────────────────────────────────────────────────
|
||||
get_port() {
|
||||
echo $(( ((RANDOM<<15)|RANDOM) % 49152 + 10000 ))
|
||||
}
|
||||
|
||||
gen_random_string() {
|
||||
local length="$1"
|
||||
head -c 4096 /dev/urandom | tr -dc 'a-zA-Z0-9' | head -c "$length"
|
||||
echo
|
||||
}
|
||||
|
||||
check_free() {
|
||||
nc -z 127.0.0.1 "$1" &>/dev/null
|
||||
return $?
|
||||
}
|
||||
|
||||
make_port() {
|
||||
while true; do
|
||||
local PORT
|
||||
PORT=$(get_port)
|
||||
if ! check_free "$PORT"; then
|
||||
echo "$PORT"
|
||||
break
|
||||
fi
|
||||
done
|
||||
}
|
||||
|
||||
# ─── Generate ports & paths (done once at startup) ───────────────────────────
|
||||
sub_port=$(make_port)
|
||||
panel_port=$(make_port)
|
||||
ws_port=$(make_port)
|
||||
trojan_port=$(make_port)
|
||||
|
||||
sub_path=$(gen_random_string 10)
|
||||
json_path=$(gen_random_string 10)
|
||||
panel_path=$(gen_random_string 10)
|
||||
ws_path=$(gen_random_string 10)
|
||||
trojan_path=$(gen_random_string 10)
|
||||
xhttp_path=$(gen_random_string 10)
|
||||
config_username=$(gen_random_string 10)
|
||||
config_password=$(gen_random_string 10)
|
||||
|
||||
# ─── Argument parsing ────────────────────────────────────────────────────────
|
||||
while [ "$#" -gt 0 ]; do
|
||||
case "$1" in
|
||||
-auto_domain) AUTODOMAIN="$2"; shift 2 ;;
|
||||
-install) INSTALL="$2"; shift 2 ;;
|
||||
-subdomain) domain="$2"; shift 2 ;;
|
||||
-reality_domain) reality_domain="$2"; shift 2 ;;
|
||||
-ONLY_CF_IP_ALLOW) CFALLOW="$2"; shift 2 ;;
|
||||
-uninstall) UNINSTALL="$2"; shift 2 ;;
|
||||
*) shift 1 ;;
|
||||
esac
|
||||
done
|
||||
|
||||
# ─── Detect package manager ───────────────────────────────────────────────────
|
||||
Pak=$(type apt &>/dev/null && echo "apt" || echo "yum")
|
||||
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
# UNINSTALL
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
uninstall_xui() {
|
||||
printf 'y\n' | x-ui uninstall 2>/dev/null || true
|
||||
rm -rf /etc/x-ui/ /usr/local/x-ui/ /usr/bin/x-ui/
|
||||
$Pak -y remove nginx nginx-common nginx-core nginx-full python3-certbot-nginx
|
||||
$Pak -y purge nginx nginx-common nginx-core nginx-full python3-certbot-nginx
|
||||
$Pak -y autoremove
|
||||
$Pak -y autoclean
|
||||
rm -rf /var/www/html/ /etc/nginx/ /usr/share/nginx/
|
||||
}
|
||||
|
||||
if [[ ${UNINSTALL} == *"y"* ]]; then
|
||||
uninstall_xui
|
||||
clear && msg_ok "Completely Uninstalled!" && exit 0
|
||||
fi
|
||||
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
# GET SERVER IP
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
IP4_REGEX="^[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}$"
|
||||
IP6_REGEX="([a-f0-9:]+:+)+[a-f0-9]+"
|
||||
|
||||
get_server_ip() {
|
||||
IP4=$(ip route get 8.8.8.8 2>&1 | grep -Po -- 'src \K\S*')
|
||||
IP6=$(ip route get 2620:fe::fe 2>&1 | grep -Po -- 'src \K\S*')
|
||||
[[ $IP4 =~ $IP4_REGEX ]] || IP4=$(curl -s ipv4.icanhazip.com | tr -d '[:space:]')
|
||||
[[ $IP6 =~ $IP6_REGEX ]] || IP6=$(curl -s ipv6.icanhazip.com | tr -d '[:space:]')
|
||||
}
|
||||
|
||||
# Early IP fetch for auto-domain
|
||||
IP4=$(ip route get 8.8.8.8 2>&1 | grep -Po -- 'src \K\S*')
|
||||
[[ $IP4 =~ $IP4_REGEX ]] || IP4=$(curl -s ipv4.icanhazip.com | tr -d '[:space:]')
|
||||
|
||||
if [[ ${AUTODOMAIN} == *"y"* ]]; then
|
||||
domain="${IP4}.cdn-one.org"
|
||||
reality_domain="${IP4//./-}.cdn-one.org"
|
||||
fi
|
||||
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
# DOMAIN VALIDATION
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
validate_domains() {
|
||||
while true; do
|
||||
[[ -n "$domain" ]] && break
|
||||
echo -en "Enter available subdomain (sub.domain.tld): " && read -r domain
|
||||
done
|
||||
domain=$(echo "$domain" | tr -d '[:space:]')
|
||||
SubDomain=$(echo "$domain" | sed 's/^[^ ]* \|\..*//g')
|
||||
MainDomain=$(echo "$domain" | sed 's/.*\.\([^.]*\..*\)$/\1/')
|
||||
[[ "${SubDomain}.${MainDomain}" != "${domain}" ]] && MainDomain=${domain}
|
||||
|
||||
while true; do
|
||||
[[ -n "$reality_domain" ]] && break
|
||||
echo -en "Enter available subdomain for REALITY (sub.domain.tld): " && read -r reality_domain
|
||||
done
|
||||
reality_domain=$(echo "$reality_domain" | tr -d '[:space:]')
|
||||
RealitySubDomain=$(echo "$reality_domain" | sed 's/^[^ ]* \|\..*//g')
|
||||
RealityMainDomain=$(echo "$reality_domain" | sed 's/.*\.\([^.]*\..*\)$/\1/')
|
||||
[[ "${RealitySubDomain}.${RealityMainDomain}" != "${reality_domain}" ]] && RealityMainDomain=${reality_domain}
|
||||
}
|
||||
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
# INSTALL PACKAGES
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
install_packages() {
|
||||
ufw disable 2>/dev/null || true
|
||||
|
||||
if [[ ${INSTALL} == *"y"* ]]; then
|
||||
local version
|
||||
version=$(grep -oP '(?<=VERSION_ID=")[0-9]+' /etc/os-release)
|
||||
[[ "$version" == "20" || "$version" == "22" ]] && echo "System: Ubuntu $version"
|
||||
|
||||
$Pak -y update
|
||||
$Pak -y install curl wget jq bash sudo nginx-full certbot python3-certbot-nginx sqlite3 ufw netcat-openbsd
|
||||
systemctl daemon-reload && systemctl enable --now nginx
|
||||
fi
|
||||
|
||||
apt-get install -yqq --no-install-recommends ca-certificates
|
||||
}
|
||||
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
# SSL CERTIFICATES
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
get_ssl_certs() {
|
||||
systemctl stop nginx 2>/dev/null || true
|
||||
fuser -k 80/tcp 80/udp 443/tcp 443/udp 2>/dev/null || true
|
||||
|
||||
if [[ ${AUTODOMAIN} == *"y"* ]]; then
|
||||
local resolve_ok=true
|
||||
for d in "$domain" "$reality_domain"; do
|
||||
local a
|
||||
a=$(getent ahostsv4 "$d" 2>/dev/null | awk 'NR==1{print $1}')
|
||||
if [[ "$a" != "$IP4" ]]; then
|
||||
msg_err "Auto-domain $d does not resolve to $IP4. Fix DNS and retry."
|
||||
resolve_ok=false
|
||||
fi
|
||||
done
|
||||
[[ $resolve_ok == false ]] && exit 1
|
||||
fi
|
||||
|
||||
certbot certonly --standalone --non-interactive --agree-tos \
|
||||
--register-unsafely-without-email -d "$domain"
|
||||
if [[ ! -d "/etc/letsencrypt/live/${domain}/" ]]; then
|
||||
systemctl start nginx >/dev/null 2>&1
|
||||
msg_err "$domain SSL could not be generated! Check Domain/IP." && exit 1
|
||||
fi
|
||||
|
||||
certbot certonly --standalone --non-interactive --agree-tos \
|
||||
--register-unsafely-without-email -d "$reality_domain"
|
||||
if [[ ! -d "/etc/letsencrypt/live/${reality_domain}/" ]]; then
|
||||
systemctl start nginx >/dev/null 2>&1
|
||||
msg_err "$reality_domain SSL could not be generated! Check Domain/IP." && exit 1
|
||||
fi
|
||||
|
||||
mkdir -p /root/cert/${domain}
|
||||
chmod 755 /root/cert/*
|
||||
ln -sf /etc/letsencrypt/live/${domain}/fullchain.pem /root/cert/${domain}/fullchain.pem
|
||||
ln -sf /etc/letsencrypt/live/${domain}/privkey.pem /root/cert/${domain}/privkey.pem
|
||||
}
|
||||
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
# CONFIGURE NGINX
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
configure_nginx() {
|
||||
mkdir -p /etc/nginx/stream-enabled /etc/nginx/snippets
|
||||
|
||||
# SNI-based stream: reality → 8443, domain → 7443
|
||||
cat > /etc/nginx/stream-enabled/stream.conf <<EOF
|
||||
map \$ssl_preread_server_name \$sni_name {
|
||||
hostnames;
|
||||
${reality_domain} xray;
|
||||
${domain} www;
|
||||
default xray;
|
||||
}
|
||||
|
||||
upstream xray { server 127.0.0.1:8443; }
|
||||
upstream www { server 127.0.0.1:7443; }
|
||||
|
||||
server {
|
||||
proxy_protocol on;
|
||||
set_real_ip_from unix:;
|
||||
listen 443;
|
||||
listen [::]:443;
|
||||
proxy_pass \$sni_name;
|
||||
ssl_preread on;
|
||||
}
|
||||
EOF
|
||||
|
||||
grep -xqFR "stream { include /etc/nginx/stream-enabled/*.conf; }" /etc/nginx/* \
|
||||
|| echo "stream { include /etc/nginx/stream-enabled/*.conf; }" >> /etc/nginx/nginx.conf
|
||||
grep -xqFR "load_module modules/ngx_stream_module.so;" /etc/nginx/* \
|
||||
|| sed -i '1s/^/load_module \/usr\/lib\/nginx\/modules\/ngx_stream_module.so; /' /etc/nginx/nginx.conf
|
||||
grep -xqFR "load_module modules/ngx_stream_geoip2_module.so;" /etc/nginx* \
|
||||
|| sed -i '2s/^/load_module \/usr\/lib\/nginx\/modules\/ngx_stream_geoip2_module.so; /' /etc/nginx/nginx.conf
|
||||
grep -xqFR "worker_rlimit_nofile 16384;" /etc/nginx/* \
|
||||
|| echo "worker_rlimit_nofile 16384;" >> /etc/nginx/nginx.conf
|
||||
sed -i "/worker_connections/c\worker_connections 4096;" /etc/nginx/nginx.conf
|
||||
|
||||
# HTTP → HTTPS redirect
|
||||
cat > /etc/nginx/sites-available/80.conf <<EOF
|
||||
server {
|
||||
listen 80;
|
||||
server_name ${domain} ${reality_domain};
|
||||
return 301 https://\$host\$request_uri;
|
||||
}
|
||||
EOF
|
||||
|
||||
# Shared proxy locations for xray inbounds (included by both vhosts)
|
||||
cat > /etc/nginx/snippets/includes.conf <<EOF
|
||||
#Subscription (plain/encode)
|
||||
location /${sub_path} {
|
||||
if (\$hack = 1) { return 404; }
|
||||
proxy_redirect off;
|
||||
proxy_set_header Host \$host;
|
||||
proxy_set_header X-Real-IP \$remote_addr;
|
||||
proxy_set_header X-Forwarded-For \$proxy_add_x_forwarded_for;
|
||||
proxy_pass https://127.0.0.1:${sub_port};
|
||||
}
|
||||
location /${sub_path}/ {
|
||||
if (\$hack = 1) { return 404; }
|
||||
proxy_redirect off;
|
||||
proxy_set_header Host \$host;
|
||||
proxy_set_header X-Real-IP \$remote_addr;
|
||||
proxy_set_header X-Forwarded-For \$proxy_add_x_forwarded_for;
|
||||
proxy_pass https://127.0.0.1:${sub_port};
|
||||
}
|
||||
location /assets { proxy_pass https://127.0.0.1:${sub_port}; }
|
||||
location /assets/ { proxy_pass https://127.0.0.1:${sub_port}; }
|
||||
|
||||
#Subscription (json)
|
||||
location /${json_path} {
|
||||
if (\$hack = 1) { return 404; }
|
||||
proxy_redirect off;
|
||||
proxy_set_header Host \$host;
|
||||
proxy_set_header X-Real-IP \$remote_addr;
|
||||
proxy_set_header X-Forwarded-For \$proxy_add_x_forwarded_for;
|
||||
proxy_pass https://127.0.0.1:${sub_port};
|
||||
}
|
||||
location /${json_path}/ {
|
||||
if (\$hack = 1) { return 404; }
|
||||
proxy_redirect off;
|
||||
proxy_set_header Host \$host;
|
||||
proxy_set_header X-Real-IP \$remote_addr;
|
||||
proxy_set_header X-Forwarded-For \$proxy_add_x_forwarded_for;
|
||||
proxy_pass https://127.0.0.1:${sub_port};
|
||||
}
|
||||
|
||||
#XHTTP
|
||||
location /${xhttp_path} {
|
||||
grpc_pass grpc://unix:/dev/shm/uds2023.sock;
|
||||
grpc_buffer_size 16k;
|
||||
grpc_socket_keepalive on;
|
||||
grpc_read_timeout 1h;
|
||||
grpc_send_timeout 1h;
|
||||
grpc_set_header Connection "";
|
||||
grpc_set_header X-Forwarded-For \$proxy_add_x_forwarded_for;
|
||||
grpc_set_header X-Forwarded-Proto \$scheme;
|
||||
grpc_set_header X-Forwarded-Port \$server_port;
|
||||
grpc_set_header Host \$host;
|
||||
grpc_set_header X-Forwarded-Host \$host;
|
||||
}
|
||||
|
||||
#Xray generic proxy (WS / gRPC by port+path)
|
||||
location ~ ^/(?<fwdport>\d+)/(?<fwdpath>.*)\$ {
|
||||
if (\$hack = 1) { return 404; }
|
||||
client_max_body_size 0;
|
||||
client_body_timeout 1d;
|
||||
grpc_read_timeout 1d;
|
||||
grpc_socket_keepalive on;
|
||||
proxy_read_timeout 1d;
|
||||
proxy_http_version 1.1;
|
||||
proxy_buffering off;
|
||||
proxy_request_buffering off;
|
||||
proxy_socket_keepalive on;
|
||||
proxy_set_header Upgrade \$http_upgrade;
|
||||
proxy_set_header Connection "upgrade";
|
||||
proxy_set_header Host \$host;
|
||||
proxy_set_header X-Real-IP \$remote_addr;
|
||||
proxy_set_header X-Forwarded-For \$proxy_add_x_forwarded_for;
|
||||
if (\$content_type ~* "GRPC") {
|
||||
grpc_pass grpc://127.0.0.1:\$fwdport\$is_args\$args;
|
||||
break;
|
||||
}
|
||||
if (\$http_upgrade ~* "(WEBSOCKET|WS)") {
|
||||
proxy_pass http://127.0.0.1:\$fwdport\$is_args\$args;
|
||||
break;
|
||||
}
|
||||
if (\$request_method ~* ^(PUT|POST|GET)\$) {
|
||||
proxy_pass http://127.0.0.1:\$fwdport\$is_args\$args;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
location / { try_files \$uri \$uri/ =404; }
|
||||
EOF
|
||||
|
||||
# Main domain vhost (TLS termination at 7443, proxy_protocol)
|
||||
cat > "/etc/nginx/sites-available/${domain}" <<EOF
|
||||
server {
|
||||
server_tokens off;
|
||||
server_name ${domain};
|
||||
listen 7443 ssl http2 proxy_protocol;
|
||||
listen [::]:7443 ssl http2 proxy_protocol;
|
||||
index index.html index.htm index.php;
|
||||
root /var/www/html/;
|
||||
ssl_protocols TLSv1.2 TLSv1.3;
|
||||
ssl_ciphers HIGH:!aNULL:!eNULL:!MD5:!DES:!RC4:!ADH:!SSLv3:!EXP:!PSK:!DSS;
|
||||
ssl_certificate /etc/letsencrypt/live/${domain}/fullchain.pem;
|
||||
ssl_certificate_key /etc/letsencrypt/live/${domain}/privkey.pem;
|
||||
if (\$host !~* ^(.+\.)?${domain}\$) { return 444; }
|
||||
if (\$scheme ~* https) { set \$safe 1; }
|
||||
if (\$ssl_server_name !~* ^(.+\.)?${domain}\$) { set \$safe "\${safe}0"; }
|
||||
if (\$safe = 10) { return 444; }
|
||||
if (\$request_uri ~ "(\"|'|\`|~|,|:|;|%|\\$|&&|\?\?|0x00|0X00|\||\\|\{|\}|\[|\]|<|>|\.\.\.|\.\.\/|\/\/\/)") { set \$hack 1; }
|
||||
error_page 400 401 402 403 500 501 502 503 504 =404 /404;
|
||||
proxy_intercept_errors on;
|
||||
|
||||
location /${panel_path}/ {
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Upgrade \$http_upgrade;
|
||||
proxy_set_header Connection "upgrade";
|
||||
proxy_set_header Host \$host;
|
||||
proxy_set_header X-Real-IP \$remote_addr;
|
||||
proxy_set_header X-Forwarded-For \$proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto https;
|
||||
proxy_read_timeout 3600s;
|
||||
proxy_send_timeout 3600s;
|
||||
proxy_pass https://127.0.0.1:${panel_port};
|
||||
}
|
||||
location /${panel_path} {
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Upgrade \$http_upgrade;
|
||||
proxy_set_header Connection "upgrade";
|
||||
proxy_set_header Host \$host;
|
||||
proxy_set_header X-Real-IP \$remote_addr;
|
||||
proxy_set_header X-Forwarded-For \$proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto https;
|
||||
proxy_read_timeout 3600s;
|
||||
proxy_send_timeout 3600s;
|
||||
proxy_pass https://127.0.0.1:${panel_port};
|
||||
}
|
||||
|
||||
include /etc/nginx/snippets/includes.conf;
|
||||
}
|
||||
EOF
|
||||
|
||||
# Reality domain vhost (plain TLS at 9443, no proxy_protocol)
|
||||
cat > "/etc/nginx/sites-available/${reality_domain}" <<EOF
|
||||
server {
|
||||
server_tokens off;
|
||||
server_name ${reality_domain};
|
||||
listen 9443 ssl http2;
|
||||
listen [::]:9443 ssl http2;
|
||||
index index.html index.htm index.php;
|
||||
root /var/www/html/;
|
||||
ssl_protocols TLSv1.2 TLSv1.3;
|
||||
ssl_ciphers HIGH:!aNULL:!eNULL:!MD5:!DES:!RC4:!ADH:!SSLv3:!EXP:!PSK:!DSS;
|
||||
ssl_certificate /etc/letsencrypt/live/${reality_domain}/fullchain.pem;
|
||||
ssl_certificate_key /etc/letsencrypt/live/${reality_domain}/privkey.pem;
|
||||
if (\$host !~* ^(.+\.)?${reality_domain}\$) { return 444; }
|
||||
if (\$scheme ~* https) { set \$safe 1; }
|
||||
if (\$ssl_server_name !~* ^(.+\.)?${reality_domain}\$) { set \$safe "\${safe}0"; }
|
||||
if (\$safe = 10) { return 444; }
|
||||
if (\$request_uri ~ "(\"|'|\`|~|,|:|;|%|\\$|&&|\?\?|0x00|0X00|\||\\|\{|\}|\[|\]|<|>|\.\.\.|\.\.\/|\/\/\/)") { set \$hack 1; }
|
||||
error_page 400 401 402 403 500 501 502 503 504 =404 /404;
|
||||
proxy_intercept_errors on;
|
||||
|
||||
location /${panel_path}/ {
|
||||
proxy_redirect off;
|
||||
proxy_set_header Host \$host;
|
||||
proxy_set_header X-Real-IP \$remote_addr;
|
||||
proxy_set_header X-Forwarded-For \$proxy_add_x_forwarded_for;
|
||||
proxy_pass http://127.0.0.1:${panel_port};
|
||||
}
|
||||
location /${panel_path} {
|
||||
proxy_redirect off;
|
||||
proxy_set_header Host \$host;
|
||||
proxy_set_header X-Real-IP \$remote_addr;
|
||||
proxy_set_header X-Forwarded-For \$proxy_add_x_forwarded_for;
|
||||
proxy_pass http://127.0.0.1:${panel_port};
|
||||
}
|
||||
|
||||
include /etc/nginx/snippets/includes.conf;
|
||||
}
|
||||
EOF
|
||||
|
||||
# Activate configs
|
||||
if [[ -f "/etc/nginx/sites-available/${domain}" ]]; then
|
||||
rm -f /etc/nginx/sites-enabled/default /etc/nginx/sites-available/default
|
||||
ln -sf "/etc/nginx/sites-available/${domain}" /etc/nginx/sites-enabled/
|
||||
ln -sf "/etc/nginx/sites-available/${reality_domain}" /etc/nginx/sites-enabled/
|
||||
ln -sf "/etc/nginx/sites-available/80.conf" /etc/nginx/sites-enabled/
|
||||
else
|
||||
msg_err "${domain} nginx config not found!" && exit 1
|
||||
fi
|
||||
|
||||
if [[ $(nginx -t 2>&1 | grep -o 'successful') != "successful" ]]; then
|
||||
msg_err "nginx config check failed!" && exit 1
|
||||
fi
|
||||
|
||||
systemctl start nginx
|
||||
}
|
||||
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
# INSTALL PANEL (3x-ui)
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
_arch() {
|
||||
case "$(uname -m)" in
|
||||
x86_64|x64|amd64) echo 'amd64' ;;
|
||||
i*86|x86) echo '386' ;;
|
||||
armv8*|armv8|arm64|aarch64) echo 'arm64' ;;
|
||||
armv7*|armv7|arm) echo 'armv7' ;;
|
||||
armv6*|armv6) echo 'armv6' ;;
|
||||
armv5*|armv5) echo 'armv5' ;;
|
||||
s390x) echo 's390x' ;;
|
||||
*) echo "Unsupported CPU architecture!" && exit 1 ;;
|
||||
esac
|
||||
}
|
||||
|
||||
_panel_initial_config() {
|
||||
/usr/local/x-ui/x-ui setting -username "asdfasdf" -password "asdfasdf" -port "2096" -webBasePath "asdfasdf"
|
||||
/usr/local/x-ui/x-ui migrate
|
||||
}
|
||||
|
||||
install_panel() {
|
||||
local tag_version
|
||||
apt-get update && apt-get install -y -q wget curl tar tzdata
|
||||
|
||||
cd /usr/local/
|
||||
|
||||
tag_version=$(curl -Ls "https://api.github.com/repos/MHSanaei/3x-ui/releases/latest" \
|
||||
| grep '"tag_name":' | sed -E 's/.*"([^"]+)".*/\1/')
|
||||
if [[ -z "$tag_version" ]]; then
|
||||
tag_version=$(curl -4 -Ls "https://api.github.com/repos/MHSanaei/3x-ui/releases/latest" \
|
||||
| grep '"tag_name":' | sed -E 's/.*"([^"]+)".*/\1/')
|
||||
fi
|
||||
if [[ -z "$tag_version" ]]; then
|
||||
echo "Failed to fetch 3x-ui version." && exit 1
|
||||
fi
|
||||
|
||||
echo "Installing 3x-ui ${tag_version} ..."
|
||||
wget -N -O /usr/local/x-ui-linux-$(_arch).tar.gz \
|
||||
"https://github.com/MHSanaei/3x-ui/releases/download/${tag_version}/x-ui-linux-$(_arch).tar.gz"
|
||||
[[ $? -ne 0 ]] && echo "Download failed." && exit 1
|
||||
|
||||
wget -O /usr/bin/x-ui-temp https://raw.githubusercontent.com/MHSanaei/3x-ui/main/x-ui.sh
|
||||
[[ $? -ne 0 ]] && echo "Failed to download x-ui.sh" && exit 1
|
||||
|
||||
[[ -d /usr/local/x-ui/ ]] && systemctl stop x-ui 2>/dev/null; rm -rf /usr/local/x-ui/
|
||||
|
||||
tar zxvf x-ui-linux-$(_arch).tar.gz
|
||||
rm -f x-ui-linux-$(_arch).tar.gz
|
||||
|
||||
cd x-ui
|
||||
chmod +x x-ui x-ui.sh
|
||||
|
||||
if [[ $(_arch) == "armv5" || $(_arch) == "armv6" || $(_arch) == "armv7" ]]; then
|
||||
mv bin/xray-linux-$(_arch) bin/xray-linux-arm
|
||||
chmod +x bin/xray-linux-arm
|
||||
fi
|
||||
chmod +x bin/xray-linux-$(_arch)
|
||||
|
||||
mv -f /usr/bin/x-ui-temp /usr/bin/x-ui
|
||||
chmod +x /usr/bin/x-ui
|
||||
|
||||
_panel_initial_config
|
||||
|
||||
cp -f x-ui.service.debian /etc/systemd/system/x-ui.service
|
||||
systemctl daemon-reload
|
||||
systemctl enable x-ui
|
||||
systemctl start x-ui
|
||||
|
||||
msg_ok "3x-ui ${tag_version} installed."
|
||||
}
|
||||
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
# CONFIGURE X-UI DATABASE
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
configure_xui_db() {
|
||||
if [[ ! -f $XUIDB ]]; then
|
||||
msg_err "x-ui.db not found — panel may not be installed." && exit 1
|
||||
fi
|
||||
|
||||
x-ui stop 2>/dev/null || true
|
||||
|
||||
local output private_key public_key trojan_pass emoji_flag
|
||||
output=$(/usr/local/x-ui/bin/xray-linux-amd64 x25519)
|
||||
private_key=$(echo "$output" | grep "^PrivateKey:" | awk '{print $2}')
|
||||
public_key=$(echo "$output" | grep "^Password" | awk '{print $3}')
|
||||
trojan_pass=$(gen_random_string 10)
|
||||
emoji_flag=$(LC_ALL=en_US.UTF-8 curl -s https://ipwho.is/ | jq -r '.flag.emoji')
|
||||
|
||||
local sub_uri="https://${domain}/${sub_path}/"
|
||||
local json_uri="https://${domain}/${json_path}?name="
|
||||
|
||||
# Prepare short IDs for REALITY
|
||||
local shor
|
||||
shor=($(openssl rand -hex 8) $(openssl rand -hex 8) $(openssl rand -hex 8) $(openssl rand -hex 8) \
|
||||
$(openssl rand -hex 8) $(openssl rand -hex 8) $(openssl rand -hex 8) $(openssl rand -hex 8))
|
||||
|
||||
sqlite3 $XUIDB <<EOF
|
||||
DELETE FROM "settings" WHERE "key" IN ("webCertFile","webKeyFile");
|
||||
|
||||
INSERT INTO "settings" ("key","value") VALUES ("subPort", '${sub_port}');
|
||||
INSERT INTO "settings" ("key","value") VALUES ("subPath", '/${sub_path}/');
|
||||
INSERT INTO "settings" ("key","value") VALUES ("subURI", '${sub_uri}');
|
||||
INSERT INTO "settings" ("key","value") VALUES ("subJsonPath", '/${json_path}');
|
||||
INSERT INTO "settings" ("key","value") VALUES ("subJsonURI", '${json_uri}');
|
||||
INSERT INTO "settings" ("key","value") VALUES ("subClashEnable", 'false');
|
||||
INSERT INTO "settings" ("key","value") VALUES ("subEnableRouting", 'false');
|
||||
INSERT INTO "settings" ("key","value") VALUES ("subEnable", 'true');
|
||||
INSERT INTO "settings" ("key","value") VALUES ("webListen", '');
|
||||
INSERT INTO "settings" ("key","value") VALUES ("webDomain", '');
|
||||
INSERT INTO "settings" ("key","value") VALUES ("webCertFile", '');
|
||||
INSERT INTO "settings" ("key","value") VALUES ("webKeyFile", '');
|
||||
INSERT INTO "settings" ("key","value") VALUES ("sessionMaxAge", '60');
|
||||
INSERT INTO "settings" ("key","value") VALUES ("pageSize", '50');
|
||||
INSERT INTO "settings" ("key","value") VALUES ("expireDiff", '0');
|
||||
INSERT INTO "settings" ("key","value") VALUES ("trafficDiff", '0');
|
||||
INSERT INTO "settings" ("key","value") VALUES ("remarkModel", '-ieo');
|
||||
INSERT INTO "settings" ("key","value") VALUES ("tgBotEnable", 'false');
|
||||
INSERT INTO "settings" ("key","value") VALUES ("tgBotToken", '');
|
||||
INSERT INTO "settings" ("key","value") VALUES ("tgBotProxy", '');
|
||||
INSERT INTO "settings" ("key","value") VALUES ("tgBotAPIServer", '');
|
||||
INSERT INTO "settings" ("key","value") VALUES ("tgBotChatId", '');
|
||||
INSERT INTO "settings" ("key","value") VALUES ("tgRunTime", '@daily');
|
||||
INSERT INTO "settings" ("key","value") VALUES ("tgBotBackup", 'false');
|
||||
INSERT INTO "settings" ("key","value") VALUES ("tgBotLoginNotify", 'true');
|
||||
INSERT INTO "settings" ("key","value") VALUES ("tgCpu", '80');
|
||||
INSERT INTO "settings" ("key","value") VALUES ("tgLang", 'en-US');
|
||||
INSERT INTO "settings" ("key","value") VALUES ("timeLocation", 'Europe/Moscow');
|
||||
INSERT INTO "settings" ("key","value") VALUES ("secretEnable", 'false');
|
||||
INSERT INTO "settings" ("key","value") VALUES ("subDomain", '');
|
||||
INSERT INTO "settings" ("key","value") VALUES ("subCertFile", '');
|
||||
INSERT INTO "settings" ("key","value") VALUES ("subKeyFile", '');
|
||||
INSERT INTO "settings" ("key","value") VALUES ("subUpdates", '12');
|
||||
INSERT INTO "settings" ("key","value") VALUES ("subEncrypt", 'true');
|
||||
INSERT INTO "settings" ("key","value") VALUES ("subShowInfo", 'true');
|
||||
INSERT INTO "settings" ("key","value") VALUES ("subJsonFragment", '');
|
||||
INSERT INTO "settings" ("key","value") VALUES ("subJsonNoises", '');
|
||||
INSERT INTO "settings" ("key","value") VALUES ("subJsonMux", '');
|
||||
INSERT INTO "settings" ("key","value") VALUES ("subJsonRules", '');
|
||||
INSERT INTO "settings" ("key","value") VALUES ("datepicker", 'gregorian');
|
||||
|
||||
INSERT INTO "inbounds"
|
||||
("user_id","up","down","total","remark","enable","expiry_time","listen","port","protocol","settings","stream_settings","tag","sniffing")
|
||||
VALUES (
|
||||
'1','0','0','0','${emoji_flag} reality','1','0','','8443','vless',
|
||||
'{
|
||||
"clients": [],
|
||||
"decryption": "none",
|
||||
"fallbacks": []
|
||||
}',
|
||||
'{
|
||||
"network": "tcp",
|
||||
"security": "reality",
|
||||
"externalProxy": [
|
||||
{"forceTls":"same","dest":"${domain}","port":443,"remark":""}
|
||||
],
|
||||
"realitySettings": {
|
||||
"show": false,
|
||||
"xver": 0,
|
||||
"target": "127.0.0.1:9443",
|
||||
"serverNames": ["${reality_domain}"],
|
||||
"privateKey": "${private_key}",
|
||||
"minClient": "",
|
||||
"maxClient": "",
|
||||
"maxTimediff": 0,
|
||||
"shortIds": [
|
||||
"${shor[0]}","${shor[1]}","${shor[2]}","${shor[3]}",
|
||||
"${shor[4]}","${shor[5]}","${shor[6]}","${shor[7]}"
|
||||
],
|
||||
"settings": {
|
||||
"publicKey": "${public_key}",
|
||||
"fingerprint": "chrome",
|
||||
"serverName": "",
|
||||
"spiderX": "/"
|
||||
}
|
||||
},
|
||||
"tcpSettings": {
|
||||
"acceptProxyProtocol": true,
|
||||
"header": {"type":"none"}
|
||||
}
|
||||
}',
|
||||
'inbound-8443',
|
||||
'{"enabled":false,"destOverride":["http","tls","quic","fakedns"],"metadataOnly":false,"routeOnly":false}'
|
||||
);
|
||||
|
||||
INSERT INTO "inbounds"
|
||||
("user_id","up","down","total","remark","enable","expiry_time","listen","port","protocol","settings","stream_settings","tag","sniffing")
|
||||
VALUES (
|
||||
'1','0','0','0','${emoji_flag} ws','1','0','','${ws_port}','vless',
|
||||
'{
|
||||
"clients": [],
|
||||
"decryption": "none",
|
||||
"fallbacks": []
|
||||
}',
|
||||
'{
|
||||
"network": "ws",
|
||||
"security": "none",
|
||||
"externalProxy": [
|
||||
{"forceTls":"tls","dest":"${domain}","port":443,"remark":""}
|
||||
],
|
||||
"wsSettings": {
|
||||
"acceptProxyProtocol": false,
|
||||
"path": "/${ws_port}/${ws_path}",
|
||||
"host": "${domain}",
|
||||
"headers": {}
|
||||
}
|
||||
}',
|
||||
'inbound-${ws_port}',
|
||||
'{"enabled":false,"destOverride":["http","tls","quic","fakedns"],"metadataOnly":false,"routeOnly":false}'
|
||||
);
|
||||
|
||||
INSERT INTO "inbounds"
|
||||
("user_id","up","down","total","remark","enable","expiry_time","listen","port","protocol","settings","stream_settings","tag","sniffing")
|
||||
VALUES (
|
||||
'1','0','0','0','${emoji_flag} xhttp','0','0','/dev/shm/uds2023.sock,0666','0','vless',
|
||||
'{
|
||||
"clients": [],
|
||||
"decryption": "none",
|
||||
"fallbacks": []
|
||||
}',
|
||||
'{
|
||||
"network": "xhttp",
|
||||
"security": "none",
|
||||
"externalProxy": [
|
||||
{"forceTls":"tls","dest":"${domain}","port":443,"remark":""}
|
||||
],
|
||||
"xhttpSettings": {
|
||||
"path": "/${xhttp_path}",
|
||||
"host": "${domain}",
|
||||
"headers": {},
|
||||
"scMaxBufferedPosts": 30,
|
||||
"scMaxEachPostBytes": "1000000",
|
||||
"noSSEHeader": false,
|
||||
"xPaddingBytes": "100-1000",
|
||||
"mode": "packet-up"
|
||||
},
|
||||
"sockopt": {
|
||||
"acceptProxyProtocol": false,
|
||||
"tcpFastOpen": true,
|
||||
"mark": 0,
|
||||
"tproxy": "off",
|
||||
"tcpMptcp": true,
|
||||
"tcpNoDelay": true,
|
||||
"domainStrategy": "UseIP",
|
||||
"tcpMaxSeg": 1440,
|
||||
"dialerProxy": "",
|
||||
"tcpKeepAliveInterval": 0,
|
||||
"tcpKeepAliveIdle": 300,
|
||||
"tcpUserTimeout": 10000,
|
||||
"tcpcongestion": "bbr",
|
||||
"V6Only": false,
|
||||
"tcpWindowClamp": 600,
|
||||
"interface": ""
|
||||
}
|
||||
}',
|
||||
'inbound-/dev/shm/uds2023.sock,0666:0|',
|
||||
'{"enabled":true,"destOverride":["http","tls","quic","fakedns"],"metadataOnly":false,"routeOnly":false}'
|
||||
);
|
||||
|
||||
INSERT INTO "inbounds"
|
||||
("user_id","up","down","total","remark","enable","expiry_time","listen","port","protocol","settings","stream_settings","tag","sniffing")
|
||||
VALUES (
|
||||
'1','0','0','0','${emoji_flag} trojan-grpc','1','0','','${trojan_port}','trojan',
|
||||
'{
|
||||
"clients": [],
|
||||
"fallbacks": []
|
||||
}',
|
||||
'{
|
||||
"network": "grpc",
|
||||
"security": "none",
|
||||
"externalProxy": [
|
||||
{"forceTls":"tls","dest":"${domain}","port":443,"remark":""}
|
||||
],
|
||||
"grpcSettings": {
|
||||
"serviceName": "/${trojan_port}/${trojan_path}",
|
||||
"authority": "${domain}",
|
||||
"multiMode": false
|
||||
}
|
||||
}',
|
||||
'inbound-${trojan_port}',
|
||||
'{"enabled":false,"destOverride":["http","tls","quic","fakedns"],"metadataOnly":false,"routeOnly":false}'
|
||||
);
|
||||
EOF
|
||||
|
||||
/usr/local/x-ui/x-ui setting \
|
||||
-username "${config_username}" \
|
||||
-password "${config_password}" \
|
||||
-port "${panel_port}" \
|
||||
-webBasePath "${panel_path}"
|
||||
|
||||
/usr/local/x-ui/x-ui cert \
|
||||
-webCert "/root/cert/${domain}/fullchain.pem" \
|
||||
-webCertKey "/root/cert/${domain}/privkey.pem"
|
||||
|
||||
x-ui start
|
||||
}
|
||||
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
# INSTALL FAKE SITE
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
install_fake_site() {
|
||||
local idx=$(( (RANDOM % FAKE_SITE_COUNT) + 1 ))
|
||||
local site_id
|
||||
site_id=$(printf "site-%02d" "$idx")
|
||||
local url="${GITHUB_RAW}/assets/fake-sites/${site_id}/index.html"
|
||||
|
||||
mkdir -p /var/www/html
|
||||
if curl -fsSL "$url" -o /var/www/html/index.html; then
|
||||
chown -R www-data:www-data /var/www/html 2>/dev/null || true
|
||||
chmod 644 /var/www/html/index.html
|
||||
msg_ok "Fake cover site '${site_id}' installed."
|
||||
else
|
||||
msg_err "Failed to download fake site ${site_id} from GitHub."
|
||||
fi
|
||||
}
|
||||
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
# SYSTEM TUNING (BBR + kernel params)
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
tune_system() {
|
||||
local params=(
|
||||
"net.core.default_qdisc=fq"
|
||||
"net.ipv4.tcp_congestion_control=bbr"
|
||||
"fs.file-max=2097152"
|
||||
"net.ipv4.tcp_timestamps=1"
|
||||
"net.ipv4.tcp_sack=1"
|
||||
"net.ipv4.tcp_window_scaling=1"
|
||||
"net.core.rmem_max=16777216"
|
||||
"net.core.wmem_max=16777216"
|
||||
"net.ipv4.tcp_rmem=4096 87380 16777216"
|
||||
"net.ipv4.tcp_wmem=4096 65536 16777216"
|
||||
)
|
||||
for p in "${params[@]}"; do
|
||||
grep -qxF "$p" /etc/sysctl.conf || echo "$p" >> /etc/sysctl.conf
|
||||
done
|
||||
sysctl -p
|
||||
}
|
||||
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
# CRON JOBS
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
setup_cron() {
|
||||
crontab -l 2>/dev/null | grep -v "certbot\|x-ui\|cloudflareips" | crontab -
|
||||
(crontab -l 2>/dev/null; echo '@daily x-ui restart > /dev/null 2>&1 && nginx -s reload') | crontab -
|
||||
(crontab -l 2>/dev/null; echo '@monthly certbot renew --nginx --non-interactive --post-hook "nginx -s reload" > /dev/null 2>&1') | crontab -
|
||||
}
|
||||
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
# FIREWALL
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
setup_firewall() {
|
||||
ufw disable
|
||||
ufw allow 22/tcp
|
||||
ufw allow 80/tcp
|
||||
ufw allow 443/tcp
|
||||
ufw allow 443/udp
|
||||
ufw --force enable
|
||||
}
|
||||
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
# SHOW RESULTS
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
show_results() {
|
||||
clear
|
||||
if systemctl is-active --quiet x-ui; then
|
||||
printf '0\n' | x-ui | grep --color=never -i ':'
|
||||
msg_inf "────────────────────────────────────────────────────────────────────────────────"
|
||||
nginx -T | grep -i 'ssl_certificate\|ssl_certificate_key'
|
||||
msg_inf "────────────────────────────────────────────────────────────────────────────────"
|
||||
certbot certificates | grep -i 'Path:\|Domains:\|Expiry Date:'
|
||||
msg_inf "────────────────────────────────────────────────────────────────────────────────"
|
||||
msg_inf "X-UI Secure Panel: https://${domain}/${panel_path}/\n"
|
||||
echo -e "Username: ${config_username}\n"
|
||||
echo -e "Password: ${config_password}\n"
|
||||
msg_inf "────────────────────────────────────────────────────────────────────────────────"
|
||||
msg_inf "Please save this screen!"
|
||||
else
|
||||
nginx -t
|
||||
printf '0\n' | x-ui | grep --color=never -i ':'
|
||||
msg_err "x-ui or nginx check failed. Try on a clean Linux install."
|
||||
fi
|
||||
}
|
||||
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
# MAIN
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
main() {
|
||||
validate_domains
|
||||
install_packages
|
||||
get_server_ip
|
||||
get_ssl_certs
|
||||
|
||||
if systemctl is-active --quiet x-ui; then
|
||||
x-ui restart
|
||||
else
|
||||
install_panel
|
||||
fi
|
||||
|
||||
configure_nginx
|
||||
configure_xui_db
|
||||
install_fake_site
|
||||
tune_system
|
||||
setup_cron
|
||||
setup_firewall
|
||||
|
||||
if ! systemctl is-enabled --quiet x-ui; then
|
||||
systemctl daemon-reload && systemctl enable x-ui.service
|
||||
fi
|
||||
x-ui restart
|
||||
|
||||
show_results
|
||||
}
|
||||
|
||||
main
|
||||
Reference in New Issue
Block a user