Model: ai-master
Folder: /opt/ai-gateway/projects/test-preview-app
Created: 2026-05-30T20:27:40.624Z
Preview URL: https://test-preview-app.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 ini.
---
### Rencana Coding
1. **Struktur Folder**: Buat folder proyek utama.
2. **File HTML**: Buat `index.html` sebagai landing page.
3. **File CSS**: Buat `style.css` untuk styling dasar.
4. **Konfigurasi Nginx**: Instruksi untuk men-serve aplikasi di VPS.
---
### Eksekusi
#### 1. Struktur Folder
Buat folder proyek:
```bash
mkdir -p /opt/ai-gateway/projects/test-preview-app
cd /opt/ai-gateway/projects/test-preview-app
```
#### 2. File HTML
Buat file `/opt/ai-gateway/projects/test-preview-app/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 App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Selamat Datang di Test Preview App</h1>
</header>
<main>
<section class="intro">
<p>Ini adalah halaman landing sederhana untuk proyek Anda. Siap untuk pratinjau!</p>
<p>Di sini Anda bisa menambahkan informasi, link, atau komponen UI lainnya.</p>
</section>
<section class="features">
<h2>Fitur Utama (Contoh)</h2>
<ul>
<li>Pratinjau cepat dan responsif.</li>
<li>Mudah diakses dari mana saja.</li>
<li>Integrasi tanpa batas (segera hadir).</li>
</ul>
</section>
<section class="call-to-action">
<a href="#" class="button">Mulai Pratinjau Sekarang</a>
</section>
</main>
<footer>
<p>© 2023 Test Preview App. All rights reserved.</p>
</footer>
</body>
</html>
```
#### 3. File CSS
Buat file `/opt/ai-gateway/projects/test-preview-app/style.css`:
```css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f7f6;
color: #333;
line-height: 1.6;
display: flex;
flex-direction: column;
min-height: 100vh;
}
header {
background-color: #2c3e50;
color: #ffffff;
padding: 20px 0;
text-align: center;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
header h1 {
margin: 0;
font-size: 2.5em;
}
main {
flex: 1;
max-width: 960px;
margin: 30px auto;
padding: 20px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}
section {
margin-bottom: 30px;
}
h2 {
color: #2c3e50;
border-bottom: 2px solid #ecf0f1;
padding-bottom: 10px;
margin-bottom: 20px;
}
ul {
list-style-type: disc;
margin-left: 20px;
}
.button {
display: inline-block;
background-color: #3498db;
color: #ffffff;
padding: 12px 25px;
border-radius: 5px;
text-decoration: none;
font-size: 1.1em;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #2980b9;
}
footer {
text-align: center;
padding: 20px;
background-color: #2c3e50;
color: #ecf0f1;
margin-top: auto;
box-shadow: 0 -2px 4px rgba(0,0,0,0.1);
}
```
#### 4. Konfigurasi Nginx (untuk VPS)
Untuk menayangkan landing page ini di VPS Anda melalui Nginx:
**a. Buat file konfigurasi Nginx:**
```bash
sudo nano /etc/nginx/sites-available/test-preview-app
```
Isi dengan konfigurasi berikut (ganti `your_domain.com` dengan domain atau IP VPS Anda):
```nginx
server {
listen 80;
server_name your_domain.com; # Ganti dengan domain atau IP VPS Anda
root /opt/ai-gateway/projects/test-preview-app;
index index.html index.htm;
location / {
try_files $uri $uri/ =404;
}
}
```
**b. Aktifkan konfigurasi dengan membuat symlink:**
```bash
sudo ln -s /etc/nginx/sites-available/test-preview-app /etc/nginx/sites-enabled/
```
**c. Uji konfigurasi Nginx dan restart:**
```bash
sudo nginx -t
sudo systemctl restart nginx
```
Sekarang, Anda bisa mengakses landing page sederhana ini melalui browser dengan membuka `http://your_domain.com` (atau IP VPS Anda).