| {% extends "base.html" %} |
|
|
| {% block content %} |
| |
| <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"> |
|
|
| |
| <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> |
|
|
| |
| <div class="main-area"> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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 %} |
