Program Double Track: December 2025

https://sites.google.com/view/ruangdagang/

https://sites.google.com/d/1VIxuejjbF0afEfHFHebQVacwGghlhefV/p/1QurXmbHDGej-PL3DNCqv55l8Ackse0KP/edit

DoubleTrack

http://www.ruangdagang.net/

https://script.google.com/macros/s/AKfycbxbZw8VJq08FKjDwkLiLgRxHHkXoef-k5oeohk8OBK1Iqz3jx7MGw7IWaBjCA9JUoN7/exec

https://drive.google.com/drive/folders/1yM2RdfIZQkUu0Py39cvR_H1cxDh-7_Dp

https://docs.google.com/spreadsheets/d/1QQjN0kYTzgb_6Vq52JNOTZJ1JmR0Xz4O6dQcuyM7WyQ/edit?gid=574740097#gid=574740097

https://script.google.com/u/0/home/projects/1pnWQXND1HpedgK05s95QS55cSH6rcaEe8Ezb6TbOMwoF-_Q3WfAp-oTF/edit

https://sites.google.com/d/1VIxuejjbF0afEfHFHebQVacwGghlhefV/p/1D8EuiOczhez2ob59ciN6eGh-0PGo7_eH/edit

Update

https://script.google.com/macros/s/AKfycbwVPEzkgEB7o5dzgFPKSbmOSZPxI-kRZ3nfvDumns6fP__tkNX_D53--CllmMYzZ_vw5w/exec

https://docs.google.com/spreadsheets/d/1WvUcCbDD2LRGAjP3Re5ciPRDBZJgaMefwU9324KqLmU/edit?gid=574740097#gid=574740097

PROMPT

Buatkan desain Landing Page aplikasi marketplace benama "Ruang Dagang" untuk menjual produk Kelompok Usaha Siswa (KUS) tingkat SMA.

Tujuan aplikasi:

Menjadi wadah digital untuk memasarkan dan menjual produk karya siswa kepada masyarakat luas secara profesional, modern, dan terpercaya.

Gaya Desain:

Responsif, Modern, edukatif, profesional

Warna cerah dan ramah (biru–hijau–oranye sebagai aksen)

Cocok untuk institusi pendidikan & UMKM siswa

Clean UI, banyak white space, mobile-first

Menggunakan bootstrap atau CDN

Struktur Landing Page:

1. Hero Section

Headline kuat dan inspiratif

“Marketplace Produk Kreatif Siswa SMK”

Subheadline:

“Dukung karya siswa lokal di bidang kuliner, fashion, kecantikan, multimedia, dan otomotif.”

Tombol CTA utama:

[Mulai Belanja] dan [Daftarkan Usaha Siswa]

Ilustrasi atau mockup aplikasi marketplace

2. Kategori Produk Unggulan

Tampilkan dalam bentuk card grid dengan ikon/ilustrasi:

🍰 Tata Boga – Makanan & Minuman Karya Siswa

👗 Tata Busana – Fashion & Jahit Kreatif

💄 Rias Kecantikan – Make Up & Perawatan

🎬 Multimedia – Desain, Video, Foto, Digital Product

🛠️ Teknik Kendaraan Bermotor – Jasa & Produk Otomotif

3. Keunggulan Aplikasi

Produk asli karya siswa

Harga terjangkau

Mendukung kewirausahaan Siwa SMA

Sistem pemesanan mudah

Terintegrasi dengan sekolah yang bernama "SMA Double Track"

4. Cara Kerja (How It Works)

Pilih Produk

Pesan & Bayar

Produk/Jasa Diproses oleh Siswa

Dikirim / Dikerjakan

5. Showcase Produk

Grid produk (gambar, nama produk, kategori, harga)

Badge: Best Seller, Produk Unggulan, Karya Siswa

6. Testimoni

Testimoni pembeli

Testimoni siswa pelaku usaha

Testimoni guru pembimbing

7. Call To Action (CTA Akhir)

“Marketplace Produk KUS Double Track”

Tombol: Gabung Sekarang / Mulai Belanja. Tombol terhubung dengan link url "www.plusk.online"

8. Footer

Tentang Aplikasi

Kategori Produk

Kontak Sekolah / Admin

Media Sosial

Tambahan Teknis:

Responsive (mobile, tablet, desktop)

SEO friendly

Loading cepat

Kompatibel PWA (opsional)

Tone Bahasa:

Inspiratif, edukatif, profesional, mudah dipahami masyarakat umum.

PROMPT 1

Buatkan google spreedsheet untuk menampung data dan foto produk. Kemudian buatkan aplikasi CRUD nya dengan model SPA, menggunakan backend google apps script. UI/UX Requirements Responsive (mobile-first) Clean layout, banyak whitespace Warna: gradient modern (biru/ putih) + background putih Font: sans modern Komponen: button besar, cards, icon, section divider Aksesibilitas: contrast bagus, ukuran font nyaman

CODE

<!doctype html>

<head>

<title>Ruang Dagang — Marketplace Produk KUS SMA Double Track</title>

<style>

:root{

--rd-blue:#0d6efd;

--rd-green:#12b981;

--rd-orange:#ff8a00;

--rd-ink:#0b1220;

--rd-muted:#6c757d;

--rd-soft:#f6f8fc;

--rd-border: rgba(14, 22, 46, 0.08);

}

body{ color: var(--rd-ink); }

.bg-soft{ background: var(--rd-soft); }

.text-muted-2{ color: var(--rd-muted); }

.rd-pill{

display:inline-flex; align-items:center; gap:.5rem;

padding:.45rem .8rem; border-radius:999px;

background:#fff; border:1px solid var(--rd-border);

box-shadow: 0 8px 30px rgba(13,110,253,.06);

font-size:.95rem;

}

.rd-hero{

position:relative;

background:

radial-gradient(1200px 500px at 10% 10%, rgba(13,110,253,.18), transparent 60%),

radial-gradient(900px 450px at 90% 20%, rgba(18,185,129,.16), transparent 60%),

radial-gradient(900px 450px at 60% 90%, rgba(255,138,0,.14), transparent 60%),

linear-gradient(180deg, #ffffff, #ffffff);

overflow:hidden;

}

.rd-card{

border:1px solid var(--rd-border);

border-radius: 18px;

box-shadow: 0 10px 30px rgba(11,18,32,.05);

}

.rd-card:hover{

transform: translateY(-2px);

transition: .2s ease;

box-shadow: 0 16px 40px rgba(11,18,32,.08);

}

.rd-icon{

width: 44px; height: 44px; border-radius: 14px;

display:grid; place-items:center;

border:1px solid var(--rd-border);

background: #fff;

}

.rd-badge{

border-radius:999px;

padding:.35rem .6rem;

border:1px solid var(--rd-border);

background:#fff;

font-size:.8rem;

display:inline-flex;

align-items:center;

gap:.35rem;

white-space:nowrap;

}

.badge-best{ border-color: rgba(255,138,0,.35); }

.badge-featured{ border-color: rgba(13,110,253,.35); }

.badge-student{ border-color: rgba(18,185,129,.35); }

.rd-mock{

border-radius: 26px;

border:1px solid var(--rd-border);

background: linear-gradient(180deg, #ffffff, #fbfcff);

box-shadow: 0 18px 60px rgba(11,18,32,.12);

overflow:hidden;

}

.rd-mock-top{

padding: 14px 16px;

border-bottom: 1px solid var(--rd-border);

display:flex; align-items:center; justify-content:space-between;

background: rgba(255,255,255,.9);

backdrop-filter: blur(8px);

}

.dot{ width:10px; height:10px; border-radius:999px; display:inline-block; margin-right:6px; }

.dot.red{ background:#ff5f56; } .dot.yellow{ background:#ffbd2e; } .dot.green{ background:#27c93f; }

.rd-product-img{

height: 170px;

border-radius: 16px;

background:

radial-gradient(120px 120px at 30% 30%, rgba(13,110,253,.25), transparent 60%),

radial-gradient(140px 140px at 70% 40%, rgba(18,185,129,.22), transparent 60%),

radial-gradient(160px 160px at 50% 80%, rgba(255,138,0,.18), transparent 60%),

linear-gradient(135deg, #f7f9ff, #ffffff);

border: 1px dashed rgba(11,18,32,.12);

display:grid; place-items:center;

color: rgba(11,18,32,.55);

font-weight:600;

}

.section-pad{ padding: 72px 0; }

.rd-footer a{ color: rgba(255,255,255,.82); text-decoration:none; }

.rd-footer a:hover{ color:#fff; text-decoration:underline; }

.navbar{

backdrop-filter: blur(10px);

background: rgba(255,255,255,.9) !important;

border-bottom: 1px solid var(--rd-border);

}

.btn-rd{

border-radius: 14px;

padding: .65rem 1rem;

}

.btn-outline-rd{

border-radius: 14px;

padding: .65rem 1rem;

border-color: rgba(13,110,253,.35);

}

</style>

{

"@context": "https://schema.org",

"@type": "Organization",

"name": "Ruang Dagang",

"description": "Marketplace Produk Kelompok Usaha Siswa (KUS) SMA Double Track.",

"url": "https://www.plusk.online"

}

</script>

</head>

<body>

</span>

<span>Ruang Dagang</span>

</a>

</button>

<li class="nav-item"><a class="nav-link" href="#kategori">Kategori</a></li>

<li class="nav-item"><a class="nav-link" href="#keunggulan">Keunggulan</a></li>

<li class="nav-item"><a class="nav-link" href="#cara-kerja">Cara Kerja</a></li>

<li class="nav-item"><a class="nav-link" href="#produk">Produk</a></li>

<li class="nav-item"><a class="nav-link" href="#testimoni">Testimoni</a></li>

<i class="bi bi-lightning-charge"></i> Mulai

</a>

</li>

</ul>

</div>

</nav>

<span><strong>KUS</strong> • SMA Double Track • Marketplace Edukasi</span>

</div>

Marketplace Produk Kreatif Siswa SMK

</h1>

Dukung karya siswa lokal di bidang <strong>kuliner</strong>, <strong>fashion</strong>, <strong>kecantikan</strong>,

<strong>multimedia</strong>, dan <strong>otomotif</strong> — dengan pengalaman belanja yang modern, rapi, dan terpercaya.

</p>

<i class="bi bi-bag-check"></i> Mulai Belanja

</a>

<i class="bi bi-person-plus"></i> Daftarkan Usaha Siswa

</a>

</div>

<span class="rd-badge badge-featured"><i class="bi bi-shield-check"></i> Kurasi Produk</span>

<span class="rd-badge badge-student"><i class="bi bi-mortarboard"></i> Karya Siswa</span>

<span class="rd-badge badge-best"><i class="bi bi-stars"></i> Mudah & Cepat</span>

</div>

<i class="bi bi-geo-alt"></i> Terintegrasi dengan sekolah <strong>SMA Double Track</strong> • <i class="bi bi-phone"></i> Mobile-first

</div>

<span class="ms-2 small text-muted-2">Ruang Dagang — Preview</span>

</div>

</div>

<div>

<div class="fw-semibold">Temukan Produk KUS</div>

<div class="small text-muted-2">Kategori lengkap • harga ramah • karya siswa</div>

</div>

</div>

</div>

<div class="small text-muted-2">Snack box, kue, catering</div>

</div>

<div class="fw-semibold">Tata Busana</div>

</div>

<div class="small text-muted-2">Jahit, custom, fashion</div>

</div>

<div class="fw-semibold">Kecantikan</div>

</div>

<div class="small text-muted-2">Make-up & perawatan</div>

</div>

<div class="fw-semibold">Otomotif</div>

</div>

<div class="small text-muted-2">Jasa & produk bengkel</div>

</div>

<div>

<div class="fw-semibold">Badge “Karya Siswa”</div>

<div class="small text-muted-2">Setiap produk terverifikasi dan dibina oleh sekolah.</div>

</div>

</div>

</header>

<h2 class="fw-bold mb-2">Kategori Produk Unggulan</h2>

<p class="text-muted-2 mb-0">Temukan beragam produk dan jasa dari Kelompok Usaha Siswa (KUS) dengan tampilan rapi dan mudah dijelajahi.</p>

</div>

<div>

<div class="small text-muted-2">Makanan & Minuman Karya Siswa</div>

</div>

<div class="small text-muted-2">Snack box, kue kering, minuman segar, catering kegiatan sekolah & umum.</div>

</div>

<div>

<div class="fw-semibold">Tata Busana</div>

<div class="small text-muted-2">Fashion & Jahit Kreatif</div>

</div>

<div class="small text-muted-2">Custom seragam, perbaikan jahit, karya fashion siswa, produk handmade.</div>

</div>

<div>

<div class="fw-semibold">Rias Kecantikan</div>

<div class="small text-muted-2">Make Up & Perawatan</div>

</div>

<div class="small text-muted-2">Rias wisuda, rias acara, perawatan ringan, paket grooming sederhana.</div>

</div>

<div>

<div class="fw-semibold">Multimedia</div>

<div class="small text-muted-2">Desain, Video, Foto, Digital Product</div>

</div>

<div class="small text-muted-2">Poster, konten sosial media, foto produk, video promosi, template desain.</div>

</div>

<div>

<div class="fw-semibold">Teknik Kendaraan Bermotor</div>

<div class="small text-muted-2">Jasa & Produk Otomotif</div>

</div>

<div class="small text-muted-2">Servis ringan, pengecekan, cuci kendaraan, aksesoris dan produk bengkel.</div>

</div>

<div>

<div class="fw-semibold">Semua Kategori</div>

<div class="small text-muted-2">Jelajahi katalog lengkap</div>

</div>

<div class="small text-muted-2">Cari berdasarkan kategori, harga, badge, dan rekomendasi produk unggulan.</div>

</div>

</section>

<h2 class="fw-bold mb-3">Kenapa Ruang Dagang?</h2>

Ruang Dagang membantu siswa SMA mengembangkan kewirausahaan dengan wadah digital yang modern,

sekaligus memberi masyarakat tempat belanja yang jelas, aman, dan terpercaya.

</p>

<div>

<div class="fw-semibold">Produk Asli Karya Siswa</div>

<div class="small text-muted-2">Setiap produk dibuat dan dikelola langsung oleh Kelompok Usaha Siswa (KUS).</div>

</div>

<div>

<div class="fw-semibold">Harga Terjangkau</div>

<div class="small text-muted-2">Pilihan produk ramah kantong dengan kualitas yang terus ditingkatkan melalui pembinaan.</div>

</div>

<div>

<div class="fw-semibold">Mendukung Kewirausahaan Siswa SMA</div>

<div class="small text-muted-2">Mendorong siswa belajar branding, produksi, layanan pelanggan, dan manajemen usaha.</div>

</div>

<div>

<div class="fw-semibold">Sistem Pemesanan Mudah</div>

<div class="small text-muted-2">Pilih produk, pesan, bayar, dan pantau proses secara sederhana dan transparan.</div>

</div>

<div>

<div class="fw-semibold">Terintegrasi dengan SMA Double Track</div>

<div class="small text-muted-2">Pembinaan dan validasi dilakukan bersama sekolah agar kualitas dan proses tetap terjaga.</div>

</div>

<div>

<div class="fw-semibold">Statistik Singkat (Dummy)</div>

<div class="small text-muted-2">Contoh tampilan ringkas di landing</div>

</div>

<span class="rd-badge badge-featured"><i class="bi bi-graph-up"></i> Insight</span>

</div>

<div class="small text-muted-2">Usaha Siswa</div>

</div>

<div class="small text-muted-2">Produk Aktif</div>

</div>

<div class="small text-muted-2">Pembeli</div>

</div>

<div class="small text-muted-2">Rating</div>

</div>

Bagian ini bisa diganti dengan <strong>video profil sekolah</strong>, <strong>poster program Double Track</strong>,

atau highlight “kisah sukses siswa”.

</div>

</section>

<h2 class="fw-bold mb-2">Cara Kerja</h2>

<p class="text-muted-2 mb-0">Alur sederhana agar pembeli nyaman dan siswa tetap terarah dalam proses usaha.</p>

</div>

<div class="fw-semibold">1) Pilih Produk</div>

<div class="small text-muted-2">Jelajahi katalog dan kategori sesuai kebutuhan.</div>

</div>

<div class="fw-semibold">2) Pesan & Bayar</div>

<div class="small text-muted-2">Checkout cepat, informasi pesanan jelas.</div>

</div>

<div class="fw-semibold">3) Diproses Siswa</div>

<div class="small text-muted-2">Produk/jasa dikerjakan oleh tim KUS dengan bimbingan.</div>

</div>

<div class="fw-semibold">4) Dikirim / Dikerjakan</div>

<div class="small text-muted-2">Pesanan dikirim atau layanan dilakukan sesuai jadwal.</div>

</div>

</section>

<h2 class="fw-bold mb-2">Showcase Produk</h2>

<p class="text-muted-2 mb-0">Contoh tampilan grid produk. Nanti tinggal ganti gambar dan data sesuai produk asli.</p>

</div>

<span class="rd-badge badge-best"><i class="bi bi-stars"></i> Best Seller</span>

<span class="rd-badge badge-featured"><i class="bi bi-gem"></i> Produk Unggulan</span>

<span class="rd-badge badge-student"><i class="bi bi-mortarboard"></i> Karya Siswa</span>

</div>

<div class="rd-product-img mb-3">Foto Produk</div>

<span class="rd-badge badge-best"><i class="bi bi-stars"></i> Best Seller</span>

<span class="rd-badge badge-student"><i class="bi bi-mortarboard"></i> Karya Siswa</span>

</div>

<div class="fw-semibold">Snack Box “Kreasi Pagi”</div>

<div class="small text-muted-2">Kategori: Tata Boga</div>

<i class="bi bi-cart-plus"></i> Pesan

</button>

</div>

<div class="rd-product-img mb-3">Foto Produk</div>

<span class="rd-badge badge-featured"><i class="bi bi-gem"></i> Produk Unggulan</span>

<span class="rd-badge badge-student"><i class="bi bi-mortarboard"></i> Karya Siswa</span>

</div>

<div class="fw-semibold">Custom Tote Bag “Double Track”</div>

<div class="small text-muted-2">Kategori: Tata Busana</div>

<i class="bi bi-cart-plus"></i> Pesan

</button>

</div>

<div class="rd-product-img mb-3">Foto Produk</div>

<span class="rd-badge badge-featured"><i class="bi bi-gem"></i> Produk Unggulan</span>

<span class="rd-badge badge-best"><i class="bi bi-stars"></i> Best Seller</span>

</div>

<div class="fw-semibold">Paket Rias Wisuda Basic</div>

<div class="small text-muted-2">Kategori: Rias Kecantikan</div>

<i class="bi bi-cart-plus"></i> Pesan

</button>

</div>

<div class="rd-product-img mb-3">Foto Produk</div>

<span class="rd-badge badge-student"><i class="bi bi-mortarboard"></i> Karya Siswa</span>

</div>

<div class="fw-semibold">Desain Poster Promosi (1 set)</div>

<div class="small text-muted-2">Kategori: Multimedia</div>

<i class="bi bi-cart-plus"></i> Pesan

</button>

</div>

<div class="rd-product-img mb-3">Foto Produk</div>

<span class="rd-badge badge-best"><i class="bi bi-stars"></i> Best Seller</span>

</div>

<div class="fw-semibold">Servis Ringan Motor (Cek Umum)</div>

<div class="small text-muted-2">Kategori: Teknik Kendaraan Bermotor</div>

<i class="bi bi-cart-plus"></i> Pesan

</button>

</div>

<div class="rd-product-img mb-3">Foto Produk</div>

<span class="rd-badge badge-featured"><i class="bi bi-gem"></i> Produk Unggulan</span>

<span class="rd-badge badge-student"><i class="bi bi-mortarboard"></i> Karya Siswa</span>

</div>

<div class="fw-semibold">Minuman Fresh “Citrus Boost”</div>

<div class="small text-muted-2">Kategori: Tata Boga</div>

<i class="bi bi-cart-plus"></i> Pesan

</button>

</div>

Lihat Selengkapnya <i class="bi bi-arrow-right"></i>

</a>

</div>

</section>

<h2 class="fw-bold mb-2">Testimoni</h2>

<p class="text-muted-2 mb-0">Membangun kepercayaan lewat cerita pembeli, siswa, dan guru pembimbing.</p>

</div>

<div>

<div class="fw-semibold">Pembeli</div>

<div class="small text-muted-2">Warga sekitar</div>

</div>

“Produknya rapi dan jelas. Saya bisa pilih snack box untuk acara keluarga, dan prosesnya cepat.

Keren karena ini karya siswa!”

</p>

</div>

<div>

<div class="fw-semibold">Siswa Pelaku Usaha</div>

<div class="small text-muted-2">Anggota KUS</div>

</div>

“Lewat Ruang Dagang, kami belajar promosi, mengatur pesanan, dan meningkatkan kualitas produk.

Rasanya seperti punya toko online sendiri.”

</p>

<span class="rd-badge badge-student"><i class="bi bi-check2-circle"></i> Terbina</span>

</div>

<div>

<div class="fw-semibold">Guru Pembimbing</div>

<div class="small text-muted-2">SMA Double Track</div>

</div>

“Platform ini membantu kami memantau perkembangan usaha siswa sekaligus memastikan proses bisnisnya terarah.

Sangat relevan untuk program kewirausahaan.”

</p>

<span class="rd-badge badge-featured"><i class="bi bi-shield-check"></i> Terpercaya</span>

</div>

</section>

<span><strong>Ruang Dagang</strong> • Marketplace Produk KUS Double Track</span>

</div>

<h2 class="fw-bold mb-2">Marketplace Produk KUS Double Track</h2>

Saatnya karya siswa dikenal lebih luas. Gabung sebagai pembeli atau dukung usaha siswa SMA Double Track lewat marketplace yang modern dan mudah digunakan.

</p>

</div>

<i class="bi bi-box-arrow-up-right"></i> Gabung Sekarang

</a>

<i class="bi bi-bag-check"></i> Mulai Belanja

</a>

Link terhubung ke: <strong>www.plusk.online</strong>

</div>

</section>

</span>

<div class="fw-bold text-white">Ruang Dagang</div>