Buat halaman demo antarmuka utama dari sebuah aplikasi web bernama “SmartVest”, sebuah sistem rekomendasi saham berbasis AI. Fokuskan desain hanya pada halaman rekomendasi saham yang muncul setelah pengguna mengisi profil, tanpa perlu landing page atau form login. Halaman demo ini harus menampilkan rekomendasi saham hasil analisis AI berdasarkan data profil pengguna seperti: Jenis pekerjaan Penghasilan bulanan Tujuan investasi Tingkat risiko ✅ Desain Halaman Demo Harus Memuat: Header Halaman: Judul: “Rekomendasi Saham untuk Kamu” Subjudul kecil: “Disesuaikan berdasarkan profil keuangan dan tujuan investasimu” Panel Ringkasan Profil (di atas atau sidebar): Pekerjaan: Pegawai Swasta Penghasilan: Rp7 juta/bulan Tujuan Investasi: Dana Pensiun Risiko: Moderat (Nilai dummy, bisa diedit manual nanti) Daftar Rekomendasi Saham (Komponen Utama Halaman): Tampilkan 3–5 kartu saham dalam bentuk card/grid Setiap kartu menampilkan: Nama saham & logo (misalnya: BBCA, TLKM, UNVR) Prediksi return AI (%) Level risiko (Low/Medium/High) Lencana rekomendasi: “Cocok untuk investor moderat”, “Stabil & bertumbuh” Penjelasan AI: “Dipilih karena cocok dengan tujuan jangka panjang & profil risiko kamu” Tombol aksi: “Lihat Analisis” atau “Simpan ke Watchlist” Tombol Filter Cepat (opsional, di atas daftar saham): [Semua Saham], [Risiko Rendah], [Saham Syariah], [Sektor Teknologi], [Potensi Pertumbuhan] Warna & Gaya Desain: Gunakan tema profesional fintech: latar putih bersih, elemen biru & hijau Font modern (misal: Inter atau Roboto) Kartu dengan sudut membulat dan grafik mini (sparkline) Layout responsif, cocok untuk desktop & mobile 📌 Catatan Tambahan: Kamu boleh menampilkan grafik tren harga mini atau ikon AI prediction score di kartu saham. Tidak perlu login, form awal, atau halaman depan. Langsung tampilkan hasil rekomendasi seolah pengguna sudah input datanya. - Initial Deployment
e01dde0
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SmartVest - Rekomendasi Saham</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .sparkline { | |
| height: 40px; | |
| width: 100px; | |
| background: linear-gradient(to right, #3b82f6, #10b981); | |
| border-radius: 4px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .sparkline::before { | |
| content: ""; | |
| position: absolute; | |
| top: 50%; | |
| left: 0; | |
| right: 0; | |
| height: 2px; | |
| background-color: rgba(255, 255, 255, 0.3); | |
| } | |
| .sparkline::after { | |
| content: ""; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: repeating-linear-gradient( | |
| to bottom, | |
| transparent, | |
| transparent 19px, | |
| rgba(255, 255, 255, 0.2) 19px, | |
| rgba(255, 255, 255, 0.2) 20px | |
| ); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header Section --> | |
| <header class="mb-8"> | |
| <h1 class="text-3xl font-bold text-gray-800">Rekomendasi Saham untuk Kamu</h1> | |
| <p class="text-gray-600 mt-2">Disesuaikan berdasarkan profil keuangan dan tujuan investasimu</p> | |
| </header> | |
| <div class="flex flex-col lg:flex-row gap-8"> | |
| <!-- Profile Summary Sidebar --> | |
| <aside class="lg:w-1/4"> | |
| <div class="bg-white rounded-xl shadow-sm p-6 sticky top-8"> | |
| <h2 class="font-semibold text-lg text-gray-800 mb-4">Profil Investasimu</h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <p class="text-sm text-gray-500">Pekerjaan</p> | |
| <p class="font-medium">Pegawai Swasta</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Penghasilan</p> | |
| <p class="font-medium">Rp7 juta/bulan</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Tujuan Investasi</p> | |
| <p class="font-medium">Dana Pensiun</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Toleransi Risiko</p> | |
| <p class="font-medium">Moderat</p> | |
| </div> | |
| </div> | |
| <div class="mt-6 pt-6 border-t border-gray-100"> | |
| <h3 class="text-sm font-semibold text-gray-700 mb-2">AI Investment Profile</h3> | |
| <div class="flex items-center"> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-blue-600 h-2.5 rounded-full" style="width: 65%"></div> | |
| </div> | |
| <span class="ml-2 text-sm font-medium text-gray-700">65% Growth</span> | |
| </div> | |
| <div class="flex items-center mt-1"> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-green-500 h-2.5 rounded-full" style="width: 35%"></div> | |
| </div> | |
| <span class="ml-2 text-sm font-medium text-gray-700">35% Stability</span> | |
| </div> | |
| </div> | |
| <button class="mt-6 w-full py-2 px-4 border border-blue-600 text-blue-600 rounded-lg hover:bg-blue-50 transition-colors"> | |
| Edit Profil | |
| </button> | |
| </div> | |
| </aside> | |
| <!-- Main Content --> | |
| <main class="lg:w-3/4"> | |
| <!-- Quick Filters --> | |
| <div class="mb-6 flex flex-wrap gap-2"> | |
| <button class="px-4 py-2 bg-blue-600 text-white rounded-full text-sm font-medium hover:bg-blue-700 transition-colors"> | |
| Semua Saham | |
| </button> | |
| <button class="px-4 py-2 bg-white border border-gray-300 rounded-full text-sm font-medium hover:bg-gray-50 transition-colors"> | |
| Risiko Rendah | |
| </button> | |
| <button class="px-4 py-2 bg-white border border-gray-300 rounded-full text-sm font-medium hover:bg-gray-50 transition-colors"> | |
| Saham Syariah | |
| </button> | |
| <button class="px-4 py-2 bg-white border border-gray-300 rounded-full text-sm font-medium hover:bg-gray-50 transition-colors"> | |
| Sektor Teknologi | |
| </button> | |
| <button class="px-4 py-2 bg-white border border-gray-300 rounded-full text-sm font-medium hover:bg-gray-50 transition-colors"> | |
| Potensi Pertumbuhan | |
| </button> | |
| </div> | |
| <!-- Stock Recommendations --> | |
| <div class="space-y-4"> | |
| <!-- Stock Card 1 --> | |
| <div class="bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-shadow"> | |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4"> | |
| <div class="flex items-center gap-4"> | |
| <div class="w-12 h-12 rounded-lg bg-blue-100 flex items-center justify-center"> | |
| <span class="font-bold text-blue-600">BBCA</span> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-gray-800">Bank Central Asia</h3> | |
| <div class="flex items-center gap-2 mt-1"> | |
| <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full font-medium">Stabil & Bertumbuh</span> | |
| <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full font-medium">Cocok untuk investor moderat</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <div class="text-center"> | |
| <p class="text-sm text-gray-500">Prediksi Return</p> | |
| <p class="font-bold text-green-600">+12.5%</p> | |
| </div> | |
| <div class="text-center"> | |
| <p class="text-sm text-gray-500">Risiko</p> | |
| <p class="font-medium text-yellow-600">Medium</p> | |
| </div> | |
| <div class="sparkline"></div> | |
| </div> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-100"> | |
| <p class="text-gray-600 text-sm">"Dipilih karena cocok dengan tujuan jangka panjang & profil risiko kamu. BBCA memiliki fundamental kuat dengan pertumbuhan laba konsisten dan manajemen yang baik."</p> | |
| <div class="mt-4 flex gap-3"> | |
| <button class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors"> | |
| Lihat Analisis Lengkap | |
| </button> | |
| <button class="px-4 py-2 bg-white border border-gray-300 rounded-lg text-sm font-medium hover:bg-gray-50 transition-colors"> | |
| Simpan ke Watchlist | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Stock Card 2 --> | |
| <div class="bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-shadow"> | |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4"> | |
| <div class="flex items-center gap-4"> | |
| <div class="w-12 h-12 rounded-lg bg-green-100 flex items-center justify-center"> | |
| <span class="font-bold text-green-600">TLKM</span> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-gray-800">Telkom Indonesia</h3> | |
| <div class="flex items-center gap-2 mt-1"> | |
| <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full font-medium">Dividen Tinggi</span> | |
| <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full font-medium">Stabil</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <div class="text-center"> | |
| <p class="text-sm text-gray-500">Prediksi Return</p> | |
| <p class="font-bold text-green-600">+8.2%</p> | |
| </div> | |
| <div class="text-center"> | |
| <p class="text-sm text-gray-500">Risiko</p> | |
| <p class="font-medium text-green-600">Low</p> | |
| </div> | |
| <div class="sparkline" style="background: linear-gradient(to right, #10b981, #3b82f6);"></div> | |
| </div> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-100"> | |
| <p class="text-gray-600 text-sm">"Rekomendasi untuk portofolio defensif kamu. TLKM memberikan dividen konsisten dengan volatilitas rendah, cocok untuk tujuan dana pensiun dengan risiko minimal."</p> | |
| <div class="mt-4 flex gap-3"> | |
| <button class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors"> | |
| Lihat Analisis Lengkap | |
| </button> | |
| <button class="px-4 py-2 bg-white border border-gray-300 rounded-lg text-sm font-medium hover:bg-gray-50 transition-colors"> | |
| Simpan ke Watchlist | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Stock Card 3 --> | |
| <div class="bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-shadow"> | |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4"> | |
| <div class="flex items-center gap-4"> | |
| <div class="w-12 h-12 rounded-lg bg-purple-100 flex items-center justify-center"> | |
| <span class="font-bold text-purple-600">UNVR</span> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-gray-800">Unilever Indonesia</h3> | |
| <div class="flex items-center gap-2 mt-1"> | |
| <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full font-medium">Resilient</span> | |
| <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full font-medium">Konsumsi Primer</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <div class="text-center"> | |
| <p class="text-sm text-gray-500">Prediksi Return</p> | |
| <p class="font-bold text-green-600">+10.8%</p> | |
| </div> | |
| <div class="text-center"> | |
| <p class="text-sm text-gray-500">Risiko</p> | |
| <p class="font-medium text-yellow-600">Medium</p> | |
| </div> | |
| <div class="sparkline" style="background: linear-gradient(to right, #8b5cf6, #3b82f6);"></div> | |
| </div> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-100"> | |
| <p class="text-gray-600 text-sm">"UNVR memiliki ketahanan selama resesi ekonomi dengan produk kebutuhan sehari-hari. AI memprediksi pertumbuhan stabil dengan yield dividen menarik untuk portofolio moderat."</p> | |
| <div class="mt-4 flex gap-3"> | |
| <button class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors"> | |
| Lihat Analisis Lengkap | |
| </button> | |
| <button class="px-4 py-2 bg-white border border-gray-300 rounded-lg text-sm font-medium hover:bg-gray-50 transition-colors"> | |
| Simpan ke Watchlist | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Stock Card 4 --> | |
| <div class="bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-shadow"> | |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4"> | |
| <div class="flex items-center gap-4"> | |
| <div class="w-12 h-12 rounded-lg bg-yellow-100 flex items-center justify-center"> | |
| <span class="font-bold text-yellow-600">ASII</span> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-gray-800">Astra International</h3> | |
| <div class="flex items-center gap-2 mt-1"> | |
| <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full font-medium">Siklus Ekonomi</span> | |
| <span class="px-2 py-1 bg-purple-100 text-purple-800 text-xs rounded-full font-medium">High Growth Potential</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <div class="text-center"> | |
| <p class="text-sm text-gray-500">Prediksi Return</p> | |
| <p class="font-bold text-green-600">+15.3%</p> | |
| </div> | |
| <div class="text-center"> | |
| <p class="text-sm text-gray-500">Risiko</p> | |
| <p class="font-medium text-orange-500">Medium-High</p> | |
| </div> | |
| <div class="sparkline" style="background: linear-gradient(to right, #f59e0b, #8b5cf6);"></div> | |
| </div> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-100"> | |
| <p class="text-gray-600 text-sm">"ASII dipilih untuk alokasi pertumbuhan dalam portofolio moderat. Meskipun lebih volatil, memiliki potensi upside tinggi seiring pemulihan ekonomi dengan diversifikasi bisnis yang luas."</p> | |
| <div class="mt-4 flex gap-3"> | |
| <button class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors"> | |
| Lihat Analisis Lengkap | |
| </button> | |
| <button class="px-4 py-2 bg-white border border-gray-300 rounded-lg text-sm font-medium hover:bg-gray-50 transition-colors"> | |
| Simpan ke Watchlist | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Disclaimer --> | |
| <div class="mt-8 bg-blue-50 rounded-xl p-4"> | |
| <h3 class="font-medium text-blue-800 mb-2">Disclaimer</h3> | |
| <p class="text-sm text-blue-700">Rekomendasi ini dihasilkan oleh AI SmartVest berdasarkan data historis dan profil risiko Anda. Hasil investasi tidak dijamin dan dapat berfluktuasi. Lakukan riset mandiri sebelum memutuskan investasi.</p> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ee3w/smartvest" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |