Spaces:
Sleeping
Sleeping
| <html lang="id"> | |
| <head> | |
| <meta charset="UTF-8"/> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/> | |
| <meta name="color-scheme" content="light"/> | |
| <title>Tentang — PapuaTranslate</title> | |
| <style> | |
| :root{ | |
| --bg:#f6f7f9; --card:#fff; --ink:#111; --sub:#666; --line:#e9ecef; | |
| --shadow:0 8px 24px rgba(0,0,0,.08); --brand:#000; --brand-ink:#fff; | |
| --radius:14px; --gap:clamp(12px,2vw,20px); --pad:clamp(12px,2.5vw,20px); | |
| --maxw:1120px; --fx:clamp(14px,2.6vw,16px); | |
| } | |
| *{box-sizing:border-box} | |
| html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Noto Sans,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;font-size:var(--fx)} | |
| a{color:inherit;text-decoration:none} | |
| /* Header Responsif */ | |
| header{position:sticky;top:0;z-index:50;background:var(--card);box-shadow:0 4px 16px rgba(0,0,0,.06);backdrop-filter:blur(8px)} | |
| .nav{max-width:var(--maxw);margin:auto;display:flex;align-items:center;gap:10px;justify-content:space-between;padding:var(--pad)} | |
| .logo{font-weight:800;font-size:clamp(18px,4vw,24px);white-space:nowrap;cursor:pointer;transition:all 0.2s ease} | |
| .logo:hover{transform:translateY(-1px);opacity:0.8} | |
| /* Menu Responsif */ | |
| .menu{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end} | |
| .pill{display:inline-flex;align-items:center;justify-content:center;padding:8px 16px;border:1px solid var(--ink);border-radius:999px;min-height:42px;font-size:clamp(13px,3vw,15px);white-space:nowrap;transition:all 0.2s ease} | |
| .pill:hover{background:var(--ink);color:#fff;transform:translateY(-1px)} | |
| .badge{background:#000;color:#fff;border-radius:999px;padding:6px 10px;font-size:12px;min-width:24px;text-align:center;font-weight:600} | |
| /* Mobile Menu */ | |
| .menu-toggle{display:none;flex-direction:column;gap:3px;background:none;border:none;cursor:pointer;padding:8px;width:32px;height:32px;align-items:center;justify-content:center} | |
| .menu-toggle span{width:20px;height:2px;background:var(--ink);transition:0.3s;transform-origin:center} | |
| .menu-toggle.active span:nth-child(1){transform:rotate(45deg) translate(6px,6px)} | |
| .menu-toggle.active span:nth-child(2){opacity:0} | |
| .menu-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(6px,-6px)} | |
| /* Hero Responsif */ | |
| .hero{background:var(--card);border-bottom:1px solid var(--line)} | |
| .hero-inner{max-width:var(--maxw);margin:auto;text-align:center;padding:clamp(18px,6vw,30px) var(--pad)} | |
| .hero h2{margin:0 0 6px;font-size:clamp(20px,6vw,28px);line-height:1.3} | |
| .hero p{margin:0;color:var(--sub);font-size:clamp(13px,3.5vw,15px);max-width:600px;margin-inline:auto} | |
| /* Main Content */ | |
| .wrap{max-width:var(--maxw);margin:auto;padding:var(--pad)} | |
| .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--pad);margin-bottom:clamp(12px,2vw,16px)} | |
| .title{font-weight:800;margin:0 0 12px;font-size:clamp(16px,4.5vw,18px);line-height:1.3} | |
| /* Meta Info Responsif */ | |
| .meta{display:grid;grid-template-columns:minmax(140px,160px) 1fr;gap:12px;margin-top:12px} | |
| .label{color:var(--sub);font-weight:600;font-size:clamp(13px,3.5vw,15px)} | |
| .value{color:var(--ink);font-size:clamp(13px,3.5vw,15px);line-height:1.4} | |
| /* Team Grid Responsif */ | |
| .team{display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));gap:clamp(16px,3vw,24px)} | |
| .member{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:clamp(16px,3vw,24px);text-align:center;transition:transform 0.2s ease} | |
| .member:hover{transform:translateY(-2px)} | |
| .avatar{width:clamp(100px,20vw,140px);height:clamp(100px,20vw,140px);border-radius:50%;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;overflow:hidden;border:3px solid #f0f0f0;cursor:pointer;transition:all 0.3s ease} | |
| .avatar:hover{transform:scale(1.05);border-color:#ddd} | |
| .avatar img{width:100%;height:100%;object-fit:cover;object-position:center top} | |
| .m-name{font-weight:800;margin:0 0 4px;font-size:clamp(14px,3.8vw,16px);line-height:1.3} | |
| .m-role{color:var(--sub);font-size:clamp(12px,3.3vw,14px);line-height:1.4} | |
| /* Modal Responsif */ | |
| .modal{display:none;position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.9);padding:20px;align-items:center;justify-content:center} | |
| .modal-content{position:relative;max-width:90vw;max-height:90vh} | |
| .modal img{display:block;max-width:100%;max-height:70vh;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.5);margin:0 auto;object-fit:contain;object-position:center top} | |
| .modal .caption{color:#fff;text-align:center;padding:16px 0;font-size:clamp(14px,3.8vw,18px);font-weight:600} | |
| .close{position:absolute;top:-40px;right:0;color:#fff;font-size:32px;font-weight:700;cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center} | |
| /* Footer */ | |
| footer{margin-top:var(--gap);background:var(--card);border-top:1px solid var(--line)} | |
| .foot{max-width:var(--maxw);margin:auto;padding:var(--pad);text-align:center} | |
| .copy{font-size:clamp(11px,3vw,12px);color:var(--sub)} | |
| /* Mobile Styles */ | |
| @media (max-width: 768px) { | |
| .nav{flex-wrap:wrap;gap:12px} | |
| .menu-toggle{display:flex} | |
| .menu{display:none;width:100%;flex-direction:column;gap:8px;margin-top:12px} | |
| .menu.active{display:flex} | |
| .pill{justify-content:center;min-height:44px;font-size:15px;padding:10px 16px} | |
| .hero-inner{padding:clamp(16px,5vw,24px) var(--pad)} | |
| .hero h2{font-size:clamp(18px,5vw,24px)} | |
| .meta{grid-template-columns:1fr;gap:8px} | |
| .label{font-weight:700} | |
| .team{grid-template-columns:1fr;gap:16px} | |
| .member{padding:20px} | |
| .avatar{width:120px;height:120px} | |
| } | |
| @media (max-width: 480px) { | |
| .nav{padding:12px} | |
| .logo{font-size:16px} | |
| .pill{padding:12px 16px;font-size:14px} | |
| .hero h2{font-size:20px} | |
| .hero p{font-size:13px} | |
| .card{padding:16px;margin-bottom:12px} | |
| .title{font-size:16px} | |
| .m-name{font-size:15px} | |
| .m-role{font-size:13px} | |
| .modal{padding:10px} | |
| .modal img{max-width:95vw;max-height:60vh} | |
| .close{top:-35px;right:-10px;font-size:28px} | |
| } | |
| /* Safe area untuk iPhone */ | |
| body{padding-bottom:env(safe-area-inset-bottom)} | |
| header{padding-top:env(safe-area-inset-top)} | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="nav" role="navigation" aria-label="Menu utama"> | |
| <a href="/" class="logo" aria-label="PapuaTranslate - Kembali ke beranda">PapuaTranslate</a> | |
| <button class="menu-toggle" aria-label="Toggle menu" aria-expanded="false"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </button> | |
| <nav class="menu"> | |
| <a class="pill" href="/">Home</a> | |
| <a class="pill" href="/about">About</a> | |
| <a class="pill" href="/#history">History</a> | |
| {% if logged_in %} | |
| <span class="badge" aria-label="Status login aktif">Aktif</span> | |
| <a class="pill" href="/logout">Logout</a> | |
| {% else %} | |
| <a class="pill" href="/login">Login</a> | |
| <a class="pill" href="/register">Daftar</a> | |
| {% endif %} | |
| </nav> | |
| </div> | |
| </header> | |
| <section class="hero"> | |
| <div class="hero-inner"> | |
| <h2>Tentang Proyek</h2> | |
| <p>Informasi singkat mengenai skripsi & pembimbing.</p> | |
| </div> | |
| </section> | |
| <main class="wrap"> | |
| <section class="card"> | |
| <h3 class="title">Judul Skripsi</h3> | |
| <p><b>Penerapan Causal Encoder Decoder Natural Language Instructions in Indonesian (CENDOL) untuk Translasi Bahasa Papua ke Bahasa Indonesia Baku</b></p> | |
| <div class="meta" style="margin-top:16px"> | |
| <div class="label">Dosen Pembimbing</div> | |
| <div class="value">Viny Christanti Mawardi, S.Kom., M.Kom.</div> | |
| <div class="label">Dosen Pembimbing Pendamping</div> | |
| <div class="value">Manatap Dolok Lauro, S.Kom., M.M.S.I.</div> | |
| <div class="label">Program/Kampus</div> | |
| <div class="value">Teknik Informatika, Universitas Tarumanagara</div> | |
| <div class="label">Tahun</div> | |
| <div class="value">2025</div> | |
| </div> | |
| </section> | |
| <section class="card"> | |
| <h3 class="title">Tim Pengembang</h3> | |
| <div class="team"> | |
| <div class="member"> | |
| <div class="avatar" onclick="openModal('m1')"> | |
| <img src="{{ url_for('static', filename='image/pembuat.jpg') }}" alt="Amos Valentino Nababan" onerror="this.style.display='none'; this.parentNode.innerHTML='<div style="color:#999;padding:40px 0;font-size:14px">Foto Tidak Ditemukan</div>'"/> | |
| </div> | |
| <div class="m-name">Amos Valentino Nababan</div> | |
| <div class="m-role">Pembuat</div> | |
| </div> | |
| <div class="member"> | |
| <div class="avatar" onclick="openModal('m2')"> | |
| <img src="{{ url_for('static', filename='image/dosen1.jpg') }}" alt="Viny Christanti Mawardi" onerror="this.style.display='none'; this.parentNode.innerHTML='<div style="color:#999;padding:40px 0;font-size:14px">Foto Tidak Ditemukan</div>'"/> | |
| </div> | |
| <div class="m-name">Viny Christanti Mawardi, S.Kom., M.Kom.</div> | |
| <div class="m-role">Dosen Pembimbing</div> | |
| </div> | |
| <div class="member"> | |
| <div class="avatar" onclick="openModal('m3')"> | |
| <img src="{{ url_for('static', filename='image/dosen2.jpg') }}" alt="Manatap Dolok Lauro" onerror="this.style.display='none'; this.parentNode.innerHTML='<div style="color:#999;padding:40px 0;font-size:14px">Foto Tidak Ditemukan</div>'"/> | |
| </div> | |
| <div class="m-name">Manatap Dolok Lauro, S.Kom., M.M.S.I.</div> | |
| <div class="m-role">Dosen Pembimbing Pendamping</div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="card"> | |
| <h3 class="title">Deskripsi Singkat</h3> | |
| <p style="margin:0;font-size:clamp(14px,3.5vw,16px);line-height:1.6">Aplikasi ini menerapkan arsitektur <i>Causal Encoder-Decoder</i> (CENDOL) berbasis mT5 dengan LoRA Adapter untuk translasi dialek Papua ke Bahasa Indonesia baku. Sistem ini dirancang untuk memahami dan menerjemahkan berbagai variasi dialek Papua dengan akurasi tinggi.</p> | |
| </section> | |
| </main> | |
| <footer> | |
| <div class="foot"> | |
| <div class="copy">© 2025 PapuaTranslate • Halaman About</div> | |
| </div> | |
| </footer> | |
| <!-- Modals --> | |
| <div id="m1" class="modal" role="dialog" aria-modal="true" aria-label="Foto Amos"> | |
| <div class="modal-content"> | |
| <span class="close" onclick="closeModal('m1')" aria-label="Tutup">×</span> | |
| <img src="{{ url_for('static', filename='image/pembuat.jpg') }}" alt="Amos Valentino Nababan"> | |
| <div class="caption">Amos Valentino Nababan — Pembuat</div> | |
| </div> | |
| </div> | |
| <div id="m2" class="modal" role="dialog" aria-modal="true" aria-label="Foto Viny"> | |
| <div class="modal-content"> | |
| <span class="close" onclick="closeModal('m2')" aria-label="Tutup">×</span> | |
| <img src="{{ url_for('static', filename='image/dosen1.jpg') }}" alt="Viny Christanti Mawardi"> | |
| <div class="caption">Viny Christanti Mawardi, S.Kom., M.Kom.</div> | |
| </div> | |
| </div> | |
| <div id="m3" class="modal" role="dialog" aria-modal="true" aria-label="Foto Manatap"> | |
| <div class="modal-content"> | |
| <span class="close" onclick="closeModal('m3')" aria-label="Tutup">×</span> | |
| <img src="{{ url_for('static', filename='image/dosen2.jpg') }}" alt="Manatap Dolok Lauro"> | |
| <div class="caption">Manatap Dolok Lauro, S.Kom., M.M.S.I.</div> | |
| </div> | |
| </div> | |
| <script> | |
| // Mobile menu toggle | |
| const menuToggle = document.querySelector('.menu-toggle'); | |
| const menu = document.querySelector('.menu'); | |
| menuToggle.addEventListener('click', () => { | |
| menu.classList.toggle('active'); | |
| menuToggle.classList.toggle('active'); | |
| const expanded = menu.classList.contains('active'); | |
| menuToggle.setAttribute('aria-expanded', expanded); | |
| }); | |
| function openModal(id){ | |
| document.getElementById(id).style.display = 'flex'; | |
| document.body.style.overflow = 'hidden'; | |
| } | |
| function closeModal(id){ | |
| document.getElementById(id).style.display = 'none'; | |
| document.body.style.overflow = 'auto'; | |
| } | |
| window.addEventListener('keydown', e => { | |
| if (e.key === 'Escape') { | |
| ['m1','m2','m3'].forEach(closeModal); | |
| } | |
| }); | |
| window.addEventListener('click', e => { | |
| if (e.target.classList.contains('modal')) { | |
| e.target.style.display = 'none'; | |
| document.body.style.overflow = 'auto'; | |
| } | |
| }); | |
| // Close mobile menu when clicking outside | |
| document.addEventListener('click', (e) => { | |
| if (!menu.contains(e.target) && !menuToggle.contains(e.target)) { | |
| menu.classList.remove('active'); | |
| menuToggle.classList.remove('active'); | |
| menuToggle.setAttribute('aria-expanded', 'false'); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |