Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alpha Analytics - Prototipe Cetak Biru Aplikasi Saham</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body {
background-color: #0b1329;
}
.custom-scrollbar::-webkit-scrollbar {
width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: #111b36;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: #1f2d5a;
border-radius: 4px;
}
</style>
</head>
<body class="text-slate-200 font-sans min-h-screen">
<nav class="bg-[#111b36] border-b border-slate-800 px-6 py-4 flex flex-col md:flex-row justify-between items-center gap-4">
<div class="flex items-center gap-3">
<div class="bg-blue-600 p-2 rounded-lg text-white font-bold text-xl tracking-wider">
<i class="fa-solid fa-chart-line-up"></i> α
</div>
<div>
<h1 class="text-xl font-bold text-white tracking-wide">ALPHA ANALYTICS</h1>
<p class="text-xs text-slate-400">Platform Cetak Biru Analisa Saham v1.0</p>
</div>
</div>
<div class="flex items-center gap-4 text-sm">
<span class="bg-emerald-500/10 text-emerald-400 px-3 py-1 rounded-full border border-emerald-500/20 font-medium flex items-center gap-2">
<span class="h-2 w-2 rounded-full bg-emerald-400 animate-pulse"></span> BEI / IDX Connected
</span>
<div class="bg-slate-800 p-2 rounded-full px-4 border border-slate-700">
<i class="fa-solid fa-user text-slate-400 mr-2"></i> Prototipe Akun
</div>
</div>
</nav>
<main class="p-4 md:p-6 grid grid-cols-1 xl:grid-cols-4 gap-6">
<section class="xl:col-span-1 bg-[#111b36] rounded-xl p-5 border border-slate-800 shadow-xl flex flex-col justify-between">
<div>
<div class="flex justify-between items-center mb-4 pb-2 border-b border-slate-800">
<h2 class="text-base font-bold text-blue-400 uppercase tracking-wider"><i class="fa-solid fa-filter mr-2"></i> 1. Smart Screener</h2>
<span class="text-xs bg-blue-500/10 text-blue-400 px-2 py-0.5 rounded">Custom</span>
</div>
<div class="space-y-4">
<div>
<label class="block text-xs font-semibold text-slate-400 mb-2">SEKTOR INDUSTRI</label>
<select class="w-full bg-[#0b1329] border border-slate-700 rounded-lg p-2.5 text-sm focus:outline-none focus:border-blue-500 text-slate-200">
<option>Perbankan / Finansial</option>
<option>Teknologi</option>
<option>Infrastruktur & Energi</option>
<option>Consumer Goods</option>
</select>
</div>
<div>
<label class="block text-xs font-semibold text-slate-400 mb-2">KAPITALISASI PASAR (MARKET CAP)</label>
<select class="w-full bg-[#0b1329] border border-slate-700 rounded-lg p-2.5 text-sm focus:outline-none focus:border-blue-500 text-slate-200">
<option>Big Cap (> Rp 100 Triliun)</option>
<option>Medium Cap (Rp 10T - Rp 100T)</option>
<option>Small Cap (< Rp 10T)</option>
</select>
</div>
<div class="grid grid-cols-2 gap-3">
<div>
<label class="block text-xs font-semibold text-slate-400 mb-2">MAKSIMAL P/E RATIO</label>
<input type="number" value="15" class="w-full bg-[#0b1329] border border-slate-700 rounded-lg p-2 text-sm focus:outline-none focus:border-blue-500 text-white">
</div>
<div>
<label class="block text-xs font-semibold text-slate-400 mb-2">MINIMAL ROE (%)</label>
<input type="number" value="12" class="w-full bg-[#0b1329] border border-slate-700 rounded-lg p-2 text-sm focus:outline-none focus:border-blue-500 text-white">
</div>
</div>
<div>
<label class="block text-xs font-semibold text-slate-400 mb-2">MINIMAL DIVIDEND YIELD</label>
<div class="flex items-center gap-2">
<input type="range" min="0" max="10" value="4" class="w-full h-1.5 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-blue-500">
<span class="text-xs font-bold bg-[#0b1329] px-2 py-1 rounded border border-slate-700">> 4%</span>
</div>
</div>
<button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2.5 rounded-lg font-bold text-sm transition mt-2 shadow-lg shadow-blue-600/10">
<i class="fa-solid fa-magnifying-glass mr-2"></i> Jalankan Screener
</button>
</div>
</div>
<div class="mt-6">
<span class="block text-xs font-semibold text-slate-400 mb-3 uppercase tracking-wider">Hasil Saringan Teratas</span>
<div class="overflow-x-auto custom-scrollbar max-h-[180px] overflow-y-auto">
<table class="w-full text-left text-xs">
<thead class="bg-[#0b1329] text-slate-400 sticky top-0">
<tr>
<th class="p-2">Ticker</th>
<th class="p-2">Harga</th>
<th class="p-2 text-right">P/E</th>
<th class="p-2 text-center">Skor AI</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-800">
<tr class="hover:bg-[#18264b] transition cursor-pointer">
<td class="p-2 font-bold text-white">BBRI.JK</td>
<td class="p-2">4.320</td>
<td class="p-2 text-right">11.4x</td>
<td class="p-2 text-center"><span class="bg-emerald-500/20 text-emerald-400 px-1.5 py-0.5 rounded font-bold">94</span></td>
</tr>
<tr class="hover:bg-[#18264b] transition cursor-pointer bg-[#0e162c]">
<td class="p-2 font-bold text-white">BMRI.JK</td>
<td class="p-2">6.150</td>
<td class="p-2 text-right">10.8x</td>
<td class="p-2 text-center"><span class="bg-emerald-500/20 text-emerald-400 px-1.5 py-0.5 rounded font-bold">89</span></td>
</tr>
<tr class="hover:bg-[#18264b] transition cursor-pointer">
<td class="p-2 font-bold text-white">BBNI.JK</td>
<td class="p-2">4.950</td>
<td class="p-2 text-right">9.2x</td>
<td class="p-2 text-center"><span class="bg-emerald-500/20 text-emerald-400 px-1.5 py-0.5 rounded font-bold">85</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<section class="xl:col-span-2 space-y-6">
<div class="bg-[#111b36] rounded-xl p-5 border border-slate-800 shadow-xl">
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 mb-4 pb-2 border-b border-slate-800">
<div>
<div class="flex items-center gap-2">
<h2 class="text-lg font-bold text-white tracking-wide">Bank Rakyat Indonesia (Persero) Tbk</h2>
<span class="bg-slate-800 text-slate-400 text-xs px-2 py-0.5 rounded font-mono">BBRI.JK</span>
</div>
<p class="text-xs text-slate-400">Sektor: Perbankan • Sesi Berjalan Pasar Real-Time</p>
</div>
<div class="text-right">
<span class="text-2xl font-black text-emerald-400 font-mono">Rp 4.320</span>
<span class="text-xs text-emerald-400 font-bold block"><i class="fa-solid fa-caret-up"></i> +50 (+1.17%)</span>
</div>
</div>
<div class="h-64 w-full bg-[#0b1329] rounded-lg p-2 border border-slate-800 relative mb-4">
<canvas id="stockAnalysisChart"></canvas>
</div>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
<div class="bg-[#0b1329] border border-slate-800 rounded-lg p-3 text-center">
<span class="text-[10px] uppercase font-bold text-slate-400 tracking-wider">Sentimen Pasar AI</span>
<div class="text-sm font-black text-emerald-400 mt-1"><i class="fa-solid fa-gauge-high"></i> SANGAT BULLISH</div>
</div>
<div class="bg-[#0b1329] border border-slate-800 rounded-lg p-3 text-center">
<span class="text-[10px] uppercase font-bold text-slate-400 tracking-wider">RSI (14 Hari)</span>
<div class="text-sm font-black text-amber-400 mt-1">58.42 (Netral)</div>
</div>
<div class="bg-[#0b1329] border border-slate-800 rounded-lg p-3 text-center">
<span class="text-[10px] uppercase font-bold text-slate-400 tracking-wider">Garis MACD</span>
<div class="text-sm font-black text-emerald-400 mt-1"><i class="fa-solid fa-circle-arrow-up"></i> Golden Cross</div>
</div>
</div>
</div>
<div class="bg-[#111b36] rounded-xl p-5 border border-slate-800 shadow-xl">
<h3 class="text-sm font-bold text-blue-400 mb-4 uppercase tracking-wider"><i class="fa-solid fa-building-columns mr-2"></i> Data Finansial Fundamental & Valuasi</h3>
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
<div class="p-2 bg-[#0b1329] rounded-lg border border-slate-800/60">
<span class="text-[10px] text-slate-400 block font-medium">P/E RATIO (TTM)</span>
<span class="text-sm font-bold text-white font-mono">11.37 x</span>
<span class="text-[10px] text-emerald-400 block mt-0.5">Wajar (Rata-rata 14x)</span>
</div>
<div class="p-2 bg-[#0b1329] rounded-lg border border-slate-800/60">
<span class="text-[10px] text-slate-400 block font-medium">PRICE TO BOOK (PBV)</span>
<span class="text-sm font-bold text-white font-mono">2.11 x</span>
<span class="text-[10px] text-slate-400 block mt-0.5">Sektor Avg: 1.95x</span>
</div>
<div class="p-2 bg-[#0b1329] rounded-lg border border-slate-800/60">
<span class="text-[10px] text-slate-400 block font-medium">RETURN ON EQUITY (ROE)</span>
<span class="text-sm font-bold text-emerald-400 font-mono">18.54 %</span>
<span class="text-[10px] text-emerald-400 block mt-0.5">Sangat Sehat</span>
</div>
<div class="p-2 bg-[#0b1329] rounded-lg border border-slate-800/60">
<span class="text-[10px] text-slate-400 block font-medium">FAIR VALUE (HARGA WAJAR)</span>
<span class="text-sm font-bold text-blue-400 font-mono">Rp 4.950</span>
<span class="text-[10px] text-emerald-400 block mt-0.5">Undervalued (+14.5%)</span>
</div>
</div>
</div>
</section>
<section class="xl:col-span-1 space-y-6">
<div class="bg-[#111b36] rounded-xl p-5 border border-slate-800 shadow-xl">
<div class="flex justify-between items-center mb-4 pb-2 border-b border-slate-800">
<h2 class="text-base font-bold text-blue-400 uppercase tracking-wider"><i class="fa-solid fa-calculator mr-2"></i> 3. Hitung Risiko</h2>
<span class="text-xs bg-emerald-500/10 text-emerald-400 px-2 py-0.5 rounded">Aman</span>
</div>
<div class="space-y-3 text-xs">
<div>
<label class="block text-slate-400 font-semibold mb-1.5">HARGA BELI MASUK (ENTRY PRICE)</label>
<input type="number" id="entryPrice" value="4320" class="w-full bg-[#0b1329] border border-slate-700 rounded-lg p-2 font-bold font-mono text-white focus:outline-none focus:border-blue-500">
</div>
<div>
<label class="block text-slate-400 font-semibold mb-1.5">BATAS TOLERANSI STOP LOSS (%)</label>
<select id="stopLossPct" class="w-full bg-[#0b1329] border border-slate-700 rounded-lg p-2 font-mono text-white focus:outline-none focus:border-blue-500">
<option value="0.03">3% Risk (Ketat)</option>
<option value="0.05" selected>5% Risk (Standar)</option>
<option value="0.07">7% Risk (Lebar)</option>
</select>
</div>
<div>
<label class="block text-slate-400 font-semibold mb-1.5">TOTAL ALOKASI MODAL TRADING</label>
<input type="number" id="totalCapital" value="50000000" class="w-full bg-[#0b1329] border border-slate-700 rounded-lg p-2 font-bold font-mono text-white focus:outline-none focus:border-blue-500">
</div>
<div class="bg-[#0b1329] border border-slate-800 p-3 rounded-lg space-y-2 mt-4">
<div class="flex justify-between">
<span class="text-slate-400">Harga Keluar Stop Loss:</span>
<span id="slPriceDisplay" class="font-bold text-red-400 font-mono">Rp 4.100</span>
</div>
<div class="flex justify-between border-t border-slate-800/80 pt-2">
<span class="text-slate-400 font-bold">Rekomendasi Jumlah Lot:</span>
<span id="lotSizingDisplay" class="font-black text-blue-400 font-mono text-sm">115 Lot</span>
</div>
<p class="text-[10px] text-slate-500 italic text-center pt-1 border-t border-slate-800/50">Maksimal risiko modal kehilangan uang dibatasi ≤ 1% total portofolio.</p>
</div>
</div>
</div>
<div class="bg-[#111b36] rounded-xl p-5 border border-slate-800 shadow-xl">
<div class="flex justify-between items-center mb-3 pb-2 border-b border-slate-800">
<h2 class="text-base font-bold text-blue-400 uppercase tracking-wider"><i class="fa-solid fa-wallet mr-2"></i> 4. Pantau Portofolio</h2>
</div>
<div class="bg-amber-500/10 border border-amber-500/20 rounded-lg p-3 text-amber-400 text-xs mb-4 flex gap-2 items-start">
<i class="fa-solid fa-triangle-exclamation mt-0.5"></i>
<div>
<span class="font-bold block">Peringatan Diversifikasi Sektor</span>
Aset Anda terpusat sebesar 62% di sektor Perbankan. Disarankan tambah alokasi sektor Consumer Defensif.
</div>
</div>
<div class="space-y-3">
<span class="block text-[11px] font-semibold text-slate-400 uppercase tracking-wider">Aset Anda Saat Ini</span>
<div class="space-y-2">
<div class="bg-[#0b1329] p-2.5 rounded-lg border border-slate-800 flex justify-between items-center text-xs">
<div>
<span class="font-bold text-white block">BBRI.JK</span>
<span class="text-[10px] text-slate-400">100 Lot • Avg Rp 4.200</span>
</div>
<div class="text-right">
<span class="font-bold font-mono block">Rp 43.200.000</span>
<span class="text-[10px] font-bold text-emerald-400"><i class="fa-solid fa-caret-up"></i> +2.85%</span>
</div>
</div>
<div class="bg-[#0b1329] p-2.5 rounded-lg border border-slate-800 flex justify-between items-center text-xs">
<div>
<span class="font-bold text-white block">TLKM.JK</span>
<span class="text-[10px] text-slate-400">50 Lot • Avg Rp 3.920</span>
</div>
<div class="text-right">
<span class="font-bold font-mono block">Rp 19.250.000</span>
<span class="text-[10px] font-bold text-red-400"><i class="fa-solid fa-caret-down"></i> -1.78%</span>
</div>
</div>
</div>
<div class="pt-3 border-t border-slate-800 flex justify-between items-center text-xs">
<span class="text-slate-400 font-medium">TOTAL NILAI PORTOPOLIO</span>
<span class="text-base font-black text-white font-mono">Rp 62.450.000</span>
</div>
</div>
</div>
</section>
</main>
<footer class="mt-8 border-t border-slate-800 p-6 text-center text-xs text-slate-500">
Alpha Analytics App Blueprint Wireframe Prototype v1.0. Hak Cipta Dilindungi Undang-Undang © 2026.
</footer>
<script>
const ctx = document.getElementById('stockAnalysisChart').getContext('2d');
// Simulasi data historis harga saham BBRI selama 10 hari terakhir
new Chart(ctx, {
type: 'line',
data: {
labels: ['05/05', '06/05', '07/05', '10/05', '11/05', '12/05', '13/05', '14/05', '17/05', 'Hari Ini'],
datasets: [{
label: 'Harga Saham BBRI (IDR)',
data: [4120, 4150, 4080, 4190, 4210, 4180, 4250, 4290, 4270, 4320],
borderColor: '#10b981',
backgroundColor: 'rgba(16, 185, 129, 0.1)',
borderWidth: 2,
fill: true,
tension: 0.2,
pointBackgroundColor: '#10b981',
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false }
},
scales: {
y: {
grid: { color: '#16223f' },
ticks: { color: '#94a3b8', font: { size: 10, family: 'monospace' } }
},
x: {
grid: { display: false },
ticks: { color: '#94a3b8', font: { size: 10 } }
}
}
}
});
// Interaktivitas Kalkulator Risiko Sederhana
const entryInput = document.getElementById('entryPrice');
const stopLossSelect = document.getElementById('stopLossPct');
const capitalInput = document.getElementById('totalCapital');
const slPriceDisplay = document.getElementById('slPriceDisplay');
const lotSizingDisplay = document.getElementById('lotSizingDisplay');
function calculateRiskPosition() {
const entry = parseFloat(entryInput.value);
const slPct = parseFloat(stopLossSelect.value);
const totalCap = parseFloat(capitalInput.value);
// Hitung harga keluar stop loss
const slPrice = Math.floor(entry * (1 - slPct));
slPriceDisplay.innerText = `Rp ${slPrice.toLocaleString('id-ID')}`;
// Hitung ukuran posisi lot (maksimal risiko kehilangan 1% total modal jika kena stop loss)
const riskAmount = totalCap * 0.01; // Batasan risiko uang 1%
const lossPerShare = entry - slPrice;
if (lossPerShare > 0) {
const totalSharesToBuy = riskAmount / lossPerShare;
const totalLots = Math.floor(totalSharesToBuy / 100);
lotSizingDisplay.innerText = `${totalLots.toLocaleString('id-ID')} Lot`;
} else {
lotSizingDisplay.innerText = "0 Lot";
}
}
// Jalankan kalkulator setiap kali nilai input diubah pengguna
[entryInput, stopLossSelect, capitalInput].forEach(element => {
element.addEventListener('input', calculateRiskPosition);
});
calculateRiskPosition(); // Inisialisasi awal kalkulasi
</script>
</body>
</html>
Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
5
Requests
3
Domains
325KB
Transfer Size
739KB
Content Size
599.0ms
Dom Content Loaded
516.0ms
First Paint
601.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...