Model: ai-master
Folder: /opt/ai-gateway/projects/test2
Created: 2026-05-30T20:49:44.919Z
Preview URL: https://test2.preview.ai.brothercasuals.com
Buka Code Server Preview App Lihat Jobs Job BaruBuat landing page sederhana test preview
Oke, Ayik. Mari kita buat landing page sederhana untuk test preview.
### Rencana Coding
1. **Setup Folder Project**: Buat direktori project di lokasi yang ditentukan.
2. **Buat File HTML**: `index.html` sebagai struktur utama landing page.
3. **Buat File CSS**: `style.css` untuk styling sederhana.
4. **Instruksi Menjalankan**: Cara melihat preview di VPS.
---
### 1. Setup Folder Project
```bash
mkdir -p /opt/ai-gateway/projects/test2
cd /opt/ai-gateway/projects/test2
```
---
### 2. Buat File `index.html`
**File Path:** `/opt/ai-gateway/projects/test2/index.html`
```html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Preview - Landing Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Landing Page Preview</h1>
<p>Ini adalah halaman pratinjau sederhana untuk project `test2` Anda. Desain ini dibuat untuk memberikan gambaran cepat tentang tata letak dan fungsionalitas dasar.</p>
<p>Anda bisa menambahkan lebih banyak konten, gambar, atau elemen interaktif di sini.</p>
<div class="cta-button">
<a href="#" class="button">Lihat Demo Lengkap</a>
</div>
<p class="footer">Versi: 1.0.0 | Tanggal: 2023-10-27</p>
</div>
</body>
</html>
```
---
### 3. Buat File `style.css`
**File Path:** `/opt/ai-gateway/projects/test2/style.css`
```css
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
text-align: center;
}
.container {
background: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
max-width: 600px;
width: 90%;
}
h1 {
color: #0056b3;
margin-bottom: 20px;
}
p {
margin-bottom: 15px;
}
.cta-button {
margin-top: 30px;
margin-bottom: 30px;
}
.button {
display: inline-block;
background: #007bff;
color: #fff;
padding: 12px 25px;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #0056b3;
}
.footer {
margin-top: 40px;
font-size: 0.9em;
color: #777;
}
```
---
### 4. Instruksi Menjalankan (Preview di VPS)
Untuk melihat preview landing page ini di VPS Anda, Anda bisa menggunakan server HTTP sederhana dari Python.
1. **Masuk ke folder project**:
```bash
cd /opt/ai-gateway/projects/test2
```
2. **Jalankan server HTTP Python**:
```bash
python3 -m http.server 8000
```
(Jika Anda ingin berjalan di port 80 untuk akses langsung tanpa port, Anda mungkin perlu izin root dan pastikan port 80 tidak terpakai: `sudo python3 -m http.server 80`. Tapi port 8000 lebih aman untuk testing.)
3. **Akses dari Browser**:
Buka browser Anda dan navigasi ke:
`http://<IP_VPS_ANDA>:8000`
Anda akan melihat landing page sederhana yang telah Anda buat. Tekan `Ctrl+C` di terminal untuk menghentikan server Python.