File size: 7,760 Bytes
28b723d 6a63931 28b723d | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 | {% extends "base.html" %}
{% block content %}
<!-- Page Header -->
<section class="section-full"
style="background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary)); color: white; padding: 4rem 5vw 6rem 5vw;">
<div class="container text-center">
<h1 style="color: white; margin-bottom: 1rem;">Generator Pantun</h1>
<p style="color: rgba(255,255,255,0.8); font-size: 1.125rem; max-width: 600px; margin: 0 auto;">Masukkan tema
dan gaya bahasa untuk membuat pantun secara otomatis.</p>
</div>
</section>
<div class="container mb-4" style="margin-top: -3rem; position: relative; z-index: 10;">
<div class="generator-layout">
<!-- Sidebar -->
<aside class="sidebar">
<h3 style="display: flex; align-items: center; gap: 0.5rem; color: var(--color-text-main);">
<i class="fa-solid fa-sliders" style="color: var(--color-primary);"></i> Parameters
</h3>
<hr
style="border: none; border-top: 1px solid var(--color-border); margin-bottom: 1.5rem; margin-top: 1rem;">
<form id="generate-form">
<div class="form-group">
<label for="tema-input">Tema Pantun</label>
<select id="tema-input" class="form-control" required>
<option value="" disabled selected>Pilih Tema Pantun...</option>
<option value="Pantun Cinta">Pantun Cinta</option>
<option value="Pantun Jenaka">Pantun Jenaka</option>
<option value="Pantun Agama">Pantun Agama</option>
<option value="Pantun Nasihat">Pantun Nasihat</option>
<option value="Pantun Teka-Teki">Pantun Teka-Teki</option>
<option value="Pantun Anak-anak">Pantun Anak-anak</option>
<option value="Pantun Budi">Pantun Budi</option>
<option value="Pantun Pendidikan">Pantun Pendidikan</option>
<option value="Pantun Adat">Pantun Adat</option>
<option value="Pantun Kemerdekaan">Pantun Kemerdekaan</option>
<option value="Pantun Ayah">Pantun Ayah</option>
<option value="Pantun Bijak">Pantun Bijak</option>
<option value="Pantun Ibu">Pantun Ibu</option>
<option value="Pantun Bahasa Jawa">Pantun Bahasa Jawa</option>
<option value="Pantun Guru">Pantun Guru</option>
<option value="Pantun Alam">Pantun Alam</option>
<option value="Pantun Berbalas">Pantun Berbalas</option>
<option value="Pantun Perpisahan">Pantun Perpisahan</option>
</select>
</div>
<div class="form-group">
<label for="gaya-input">Gaya Bahasa</label>
<select id="gaya-input" class="form-control">
<option value="Tradisional">Tradisional</option>
<option value="Modern">Modern</option>
<option value="Santai">Santai</option>
<option value="Puitis">Puitis</option>
<option value="Formal">Formal</option>
</select>
</div>
<button type="submit" id="generate-btn" class="btn btn-primary" style="width: 100%; margin-top: 1rem;">
<span id="btn-text">Generate Now</span>
<span id="btn-spinner" class="spinner hidden"></span>
</button>
</form>
</aside>
<!-- Main Area -->
<div class="main-area">
<!-- Result Placeholder / Card -->
<div id="result-container" class="card result-card hidden fade-in">
<div id="result-badge" class="badge">Tema: Nasihat</div>
<div id="result-text" class="pantun-text"></div>
</div>
<!-- Default Empty State -->
<div id="empty-state" class="card result-card"
style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 400px; background: rgba(255,255,255,0.8); border: 2px dashed rgba(203, 213, 225, 0.8); box-shadow: none;">
<div
style="width: 80px; height: 80px; background: rgba(79, 70, 229, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem;">
<i class="fa-solid fa-wand-magic-sparkles"
style="font-size: 2.5rem; color: var(--color-primary);"></i>
</div>
<h3 style="color: var(--color-text-main);">Siap Menghasilkan Pantun</h3>
<p class="text-muted mt-1">Atur parameter di samping lalu tekan Generate Now.</p>
</div>
<!-- Analytics Cards (Hidden initially) -->
<div id="analytics-container" class="metrics-grid hidden">
<div class="card metric-card fade-in" style="animation-delay: 0.1s; padding: 1.5rem;">
<div class="metric-value" style="font-size: 1.75rem;" id="stat-rima">a-b-a-b</div>
<div class="metric-label">Pola Rima</div>
</div>
<div class="card metric-card fade-in" style="animation-delay: 0.2s; padding: 1.5rem;">
<div class="metric-value" style="font-size: 1.5rem;" id="stat-suku">8, 9, 8, 9</div>
<div class="metric-label">Suku Kata</div>
</div>
<div class="card metric-card fade-in" style="animation-delay: 0.3s; padding: 1.5rem;">
<div class="metric-value" style="font-size: 1.75rem; color: var(--color-success);" id="stat-conf">
95%</div>
<div class="metric-label">Confidence Score</div>
</div>
<div class="card metric-card fade-in" style="animation-delay: 0.4s; padding: 1.5rem;">
<div class="metric-value" style="font-size: 1.5rem; color: var(--color-warning);" id="stat-sent">
Positif</div>
<div class="metric-label">Sentimen</div>
</div>
</div>
<!-- Rhyme Pattern Visualization (Simple) -->
<div id="visualization-container" class="card hidden fade-in" style="animation-delay: 0.5s;">
<h4 style="margin-bottom: 1rem;">Visualisasi Rima</h4>
<div class="flex flex-col gap-2 mt-2">
<div class="flex items-center gap-2">
<div
style="width: 24px; height: 24px; border-radius: 50%; background: var(--color-primary-light); box-shadow: 0 0 10px rgba(129, 140, 248, 0.4);">
</div>
<span style="font-weight: 500; color: var(--color-text-main);">Baris 1 & 3 (Rima A)</span>
</div>
<div class="flex items-center gap-2">
<div
style="width: 24px; height: 24px; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);">
</div>
<span style="font-weight: 500; color: var(--color-text-main);">Baris 2 & 4 (Rima B)</span>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block extra_js %}
<script src="/static/js/generator.js"></script>
{% endblock %} |