Hugging Face's logo

Spaces:
ee3w
/
web-haki
Running

App Files Community
web-haki / index.html
ee3w's picture
ee3w
Add 1 files
5a56191 verified
raw
history blame contribute delete
53.2 kB
 <!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portal HAKI - Universitas</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* Custom Animation */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
animation: fadeIn 0.8s ease-out forwards;
}
/* Custom Card Hover */
.service-card {
transition: all 0.3s ease;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
/* Custom Dropdown */
.dropdown:hover .dropdown-menu {
display: block;
animation: fadeIn 0.3s ease forwards;
}
/* Dark Mode Toggle */
.dark-mode {
background-color: #1a202c;
color: #f7fafc;
}
.dark-mode .dark\:bg-gray-800 {
background-color: #2d3748;
}
.dark-mode .dark\:text-white {
color: #f7fafc;
}
.dark-mode .dark\:bg-gray-700 {
background-color: #4a5568;
}
/* Custom Tab */
.tab-content {
display: none;
}
.tab-content.active {
display: block;
animation: fadeIn 0.5s ease;
}
.tab-button.active {
border-bottom: 3px solid #3b82f6;
color: #3b82f6;
font-weight: 600;
}
</style>
</head>
<body class="font-sans bg-gray-50 text-gray-800 transition-colors duration-300">
<!-- Top Bar -->
<div class="bg-blue-800 text-white py-2 px-4">
<div class="container mx-auto flex justify-between items-center">
<div class="text-sm flex items-center space-x-4">
<span><i class="fas fa-phone-alt mr-1"></i> (021) 12345678</span>
<span><i class="fas fa-envelope mr-1"></i> haki@univ.edu</span>
<span><i class="fas fa-map-marker-alt mr-1"></i> Gedung Rektorat Lt.3</span>
</div>
<div class="flex items-center space-x-4">
<button id="dark-mode-toggle" class="p-1 rounded-full hover:bg-blue-700">
<i class="fas fa-moon" id="dark-icon"></i>
<i class="fas fa-sun hidden" id="light-icon"></i>
</button>
<a href="#" class="text-white hover:text-blue-200"><i class="fas fa-sign-in-alt mr-1"></i> Login</a>
</div>
</div>
</div>
<!-- Header -->
<header class="bg-white shadow-sm sticky top-0 z-50">
<div class="container mx-auto px-4 py-4 flex items-center justify-between">
<div class="flex items-center space-x-4">
<img src="https://via.placeholder.com/60" alt="Logo Universitas" class="h-12">
<div>
<h1 class="text-xl md:text-2xl font-bold text-blue-900">PORTAL HAKI</h1>
<p class="text-sm text-gray-600">Universitas Teknologi Indonesia</p>
</div>
</div>
<div class="hidden md:flex items-center space-x-6">
<a href="#" class="px-3 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center">
<i class="fas fa-search mr-2"></i> Cari HAKI
</a>
<a href="#" class="px-3 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 flex items-center">
<i class="fas fa-pen-fancy mr-2"></i> Daftar HAKI
</a>
</div>
</div>
</header>
<!-- Main Navigation -->
<nav class="bg-blue-700 text-white shadow-lg">
<div class="container mx-auto px-4">
<div class="flex justify-between items-center">
<div class="hidden md:flex space-x-1">
<!-- Main Menu Items -->
<a href="#" class="px-4 py-3 hover:bg-blue-600 flex items-center">
<i class="fas fa-home mr-2"></i> Beranda
</a>
<div class="dropdown relative">
<button class="px-4 py-3 hover:bg-blue-600 flex items-center">
<i class="fas fa-info-circle mr-2"></i> Profil
<i class="fas fa-chevron-down ml-1 text-xs"></i>
</button>
<div class="dropdown-menu absolute hidden bg-white text-blue-900 min-w-max shadow-xl rounded-b-md z-50">
<a href="#" class="block px-4 py-2 hover:bg-blue-50 border-b border-gray-100">Tentang HAKI Univ</a>
<a href="#" class="block px-4 py-2 hover:bg-blue-50 border-b border-gray-100">Visi & Misi</a>
<a href="#" class="block px-4 py-2 hover:bg-blue-50 border-b border-gray-100">Struktur Organisasi</a>
<a href="#" class="block px-4 py-2 hover:bg-blue-50">Regulasi Universitas</a>
</div>
</div>
<div class="dropdown relative">
<button class="px-4 py-3 hover:bg-blue-600 flex items-center">
<i class="fas fa-hand-holding-heart mr-2"></i> Layanan
<i class="fas fa-chevron-down ml-1 text-xs"></i>
</button>
<div class="dropdown-menu absolute hidden bg-white text-blue-900 min-w-max shadow-xl rounded-b-md z-50">
<div class="grid grid-cols-2 gap-4 p-4 w-96">
<div>
<h3 class="font-bold mb-2 text-blue-800 border-b pb-1"><i class="fas fa-copyright mr-1"></i> Hak Cipta</h3>
<a href="#" class="block px-2 py-1 hover:bg-blue-50 text-sm">Pendaftaran</a>
<a href="#" class="block px-2 py-1 hover:bg-blue-50 text-sm">Pencatatan</a>
<a href="#" class="block px-2 py-1 hover:bg-blue-50 text-sm">Lisensi</a>
</div>
<div>
<h3 class="font-bold mb-2 text-blue-800 border-b pb-1"><i class="fas fa-lightbulb mr-1"></i> Paten</h3>
<a href="#" class="block px-2 py-1 hover:bg-blue-50 text-sm">Pendaftaran</a>
<a href="#" class="block px-2 py-1 hover:bg-blue-50 text-sm">Paten Sederhana</a>
<a href="#" class="block px-2 py-1 hover:bg-blue-50 text-sm">Lisensi</a>
</div>
<div>
<h3 class="font-bold mb-2 text-blue-800 border-b pb-1"><i class="fas fa-trademark mr-1"></i> Merek</h3>
<a href="#" class="block px-2 py-1 hover:bg-blue-50 text-sm">Pendaftaran</a>
<a href="#" class="block px-2 py-1 hover:bg-blue-50 text-sm">Pencarian</a>
<a href="#" class="block px-2 py-1 hover:bg-blue-50 text-sm">Perpanjangan</a>
</div>
<div>
<h3 class="font-bold mb-2 text-blue-800 border-b pb-1"><i class="fas fa-industry mr-1"></i> Desain Industri</h3>
<a href="#" class="block px-2 py-1 hover:bg-blue-50 text-sm">Pendaftaran</a>
<a href="#" class="block px-2 py-1 hover:bg-blue-50 text-sm">Perlindungan</a>
<a href="#" class="block px-2 py-1 hover:bg-blue-50 text-sm">Lisensi</a>
</div>
</div>
</div>
</div>
<div class="dropdown relative">
<button class="px-4 py-3 hover:bg-blue-600 flex items-center">
<i class="fas fa-book mr-2"></i> Panduan
<i class="fas fa-chevron-down ml-1 text-xs"></i>
</button>
<div class="dropdown-menu absolute hidden bg-white text-blue-900 min-w-max shadow-xl rounded-b-md z-50">
<a href="#" class="block px-4 py-2 hover:bg-blue-50 border-b border-gray-100">Panduan Hak Cipta</a>
<a href="#" class="block px-4 py-2 hover:bg-blue-50 border-b border-gray-100">Panduan Paten</a>
<a href="#" class="block px-4 py-2 hover:bg-blue-50 border-b border-gray-100">Panduan Merek</a>
<a href="#" class="block px-4 py-2 hover:bg-blue-50">Panduan Desain Industri</a>
</div>
</div>
<a href="#" class="px-4 py-3 hover:bg-blue-600 flex items-center">
<i class="fas fa-chart-bar mr-2"></i> Statistik
</a>
<a href="#" class="px-4 py-3 hover:bg-blue-600 flex items-center">
<i class="fas fa-question-circle mr-2"></i> FAQ
</a>
<a href="#" class="px-4 py-3 hover:bg-blue-600 flex items-center">
<i class="fas fa-envelope mr-2"></i> Kontak
</a>
</div>
<div class="md:hidden">
<button id="mobile-menu-button" class="p-3 focus:outline-none">
<i class="fas fa-bars text-xl"></i>
</button>
</div>
</div>
</div>
</nav>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden bg-blue-800 text-white md:hidden">
<div class="container mx-auto px-4 py-2">
<a href="#" class="block py-3 px-4 hover:bg-blue-700 flex items-center">
<i class="fas fa-home mr-3"></i> Beranda
</a>
<div class="dropdown-mobile">
<button class="w-full flex justify-between items-center py-3 px-4 hover:bg-blue-700">
<div class="flex items-center">
<i class="fas fa-info-circle mr-3"></i> Profil
</div>
<i class="fas fa-chevron-down transition-transform duration-200"></i>
</button>
<div class="hidden bg-blue-900 ml-8">
<a href="#" class="block py-2 px-4 hover:bg-blue-800">Tentang HAKI Univ</a>
<a href="#" class="block py-2 px-4 hover:bg-blue-800">Visi & Misi</a>
<a href="#" class="block py-2 px-4 hover:bg-blue-800">Struktur Organisasi</a>
<a href="#" class="block py-2 px-4 hover:bg-blue-800">Regulasi Universitas</a>
</div>
</div>
<div class="dropdown-mobile">
<button class="w-full flex justify-between items-center py-3 px-4 hover:bg-blue-700">
<div class="flex items-center">
<i class="fas fa-hand-holding-heart mr-3"></i> Layanan
</div>
<i class="fas fa-chevron-down transition-transform duration-200"></i>
</button>
<div class="hidden bg-blue-900 ml-8">
<div class="py-1">
<h3 class="font-bold px-4 py-2 flex items-center">
<i class="fas fa-copyright mr-2"></i> Hak Cipta
</h3>
<a href="#" class="block py-1 px-6 hover:bg-blue-800">Pendaftaran</a>
<a href="#" class="block py-1 px-6 hover:bg-blue-800">Pencatatan</a>
<a href="#" class="block py-1 px-6 hover:bg-blue-800">Lisensi</a>
</div>
<div class="py-1">
<h3 class="font-bold px-4 py-2 flex items-center">
<i class="fas fa-lightbulb mr-2"></i> Paten
</h3>
<a href="#" class="block py-1 px-6 hover:bg-blue-800">Pendaftaran</a>
<a href="#" class="block py-1 px-6 hover:bg-blue-800">Paten Sederhana</a>
<a href="#" class="block py-1 px-6 hover:bg-blue-800">Lisensi</a>
</div>
<div class="py-1">
<h3 class="font-bold px-4 py-2 flex items-center">
<i class="fas fa-trademark mr-2"></i> Merek
</h3>
<a href="#" class="block py-1 px-6 hover:bg-blue-800">Pendaftaran</a>
<a href="#" class="block py-1 px-6 hover:bg-blue-800">Pencarian</a>
<a href="#" class="block py-1 px-6 hover:bg-blue-800">Perpanjangan</a>
</div>
<div class="py-1">
<h3 class="font-bold px-4 py-2 flex items-center">
<i class="fas fa-industry mr-2"></i> Desain Industri
</h3>
<a href="#" class="block py-1 px-6 hover:bg-blue-800">Pendaftaran</a>
<a href="#" class="block py-1 px-6 hover:bg-blue-800">Perlindungan</a>
<a href="#" class="block py-1 px-6 hover:bg-blue-800">Lisensi</a>
</div>
</div>
</div>
<a href="#" class="block py-3 px-4 hover:bg-blue-700 flex items-center">
<i class="fas fa-book mr-3"></i> Panduan
</a>
<a href="#" class="block py-3 px-4 hover:bg-blue-700 flex items-center">
<i class="fas fa-chart-bar mr-3"></i> Statistik
</a>
<a href="#" class="block py-3 px-4 hover:bg-blue-700 flex items-center">
<i class="fas fa-question-circle mr-3"></i> FAQ
</a>
<a href="#" class="block py-3 px-4 hover:bg-blue-700 flex items-center">
<i class="fas fa-envelope mr-3"></i> Kontak
</a>
<div class="py-3 px-4">
<a href="#" class="block w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 text-center mb-2">
<i class="fas fa-search mr-2"></i> Cari HAKI
</a>
<a href="#" class="block w-full bg-green-600 text-white py-2 px-4 rounded-lg hover:bg-green-700 text-center">
<i class="fas fa-pen-fancy mr-2"></i> Daftar HAKI
</a>
</div>
</div>
</div>
<!-- Hero Section -->
<section class="bg-gradient-to-r from-blue-800 to-blue-600 text-white py-16">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-8 md:mb-0 animate-fade-in">
<h1 class="text-4xl font-bold mb-4 leading-tight">Lindungi Karya dan Inovasi Akademik Anda</h1>
<p class="text-xl mb-6">Portal HAKI Universitas menyediakan layanan pendaftaran dan perlindungan hak kekayaan intelektual bagi seluruh sivitas akademika.</p>
<div class="flex flex-col sm:flex-row gap-4">
<a href="#" class="bg-white text-blue-800 font-bold py-3 px-6 rounded-lg hover:bg-blue-100 text-center">
<i class="fas fa-play-circle mr-2"></i> Panduan Video
</a>
<a href="#" class="border-2 border-white text-white font-bold py-3 px-6 rounded-lg hover:bg-white hover:text-blue-800 text-center">
<i class="fas fa-file-alt mr-2"></i> Unduh Formulir
</a>
</div>
</div>
<div class="md:w-1/2 animate-fade-in" style="animation-delay: 0.3s;">
<img src="https://via.placeholder.com/600x400" alt="Hero Image" class="rounded-lg shadow-xl w-full">
</div>
</div>
</div>
</section>
<!-- Quick Stats -->
<section class="py-12 bg-white">
<div class="container mx-auto px-4">
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
<div class="bg-blue-50 rounded-lg p-6 text-center">
<div class="text-4xl font-bold text-blue-800 mb-2">1,248</div>
<div class="text-lg font-medium text-gray-700">Hak Cipta</div>
<div class="text-sm text-gray-500 mt-2">Teregistrasi 2023</div>
</div>
<div class="bg-green-50 rounded-lg p-6 text-center">
<div class="text-4xl font-bold text-green-800 mb-2">756</div>
<div class="text-lg font-medium text-gray-700">Paten</div>
<div class="text-sm text-gray-500 mt-2">Teregistrasi 2023</div>
</div>
<div class="bg-purple-50 rounded-lg p-6 text-center">
<div class="text-4xl font-bold text-purple-800 mb-2">432</div>
<div class="text-lg font-medium text-gray-700">Merek</div>
<div class="text-sm text-gray-500 mt-2">Teregistrasi 2023</div>
</div>
<div class="bg-yellow-50 rounded-lg p-6 text-center">
<div class="text-4xl font-bold text-yellow-800 mb-2">189</div>
<div class="text-lg font-medium text-gray-700">Desain Industri</div>
<div class="text-sm text-gray-500 mt-2">Teregistrasi 2023</div>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section class="py-12 bg-gray-50">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-blue-900 mb-2">Layanan HAKI Universitas</h2>
<p class="text-lg text-gray-600 max-w-2xl mx-auto">Kami menyediakan berbagai layanan untuk melindungi karya intelektual Anda</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Service 1 -->
<div class="service-card bg-white rounded-xl overflow-hidden">
<div class="h-48 bg-blue-100 flex items-center justify-center">
<i class="fas fa-copyright text-6xl text-blue-600"></i>
</div>
<div class="p-6">
<h3 class="text-xl font-bold mb-3 text-blue-900">Hak Cipta</h3>
<p class="text-gray-600 mb-4">Lindungi karya seni, sastra, musik, perangkat lunak, dan karya intelektual lainnya.</p>
<div class="flex justify-between items-center">
<a href="#" class="text-blue-600 font-medium hover:text-blue-800">Pelajari →</a>
<span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">3-6 Bulan</span>
</div>
</div>
</div>
<!-- Service 2 -->
<div class="service-card bg-white rounded-xl overflow-hidden">
<div class="h-48 bg-green-100 flex items-center justify-center">
<i class="fas fa-lightbulb text-6xl text-green-600"></i>
</div>
<div class="p-6">
<h3 class="text-xl font-bold mb-3 text-green-900">Paten</h3>
<p class="text-gray-600 mb-4">Lindungi penemuan dan inovasi teknologi Anda dengan sistem paten.</p>
<div class="flex justify-between items-center">
<a href="#" class="text-green-600 font-medium hover:text-green-800">Pelajari →</a>
<span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">12-24 Bulan</span>
</div>
</div>
</div>
<!-- Service 3 -->
<div class="service-card bg-white rounded-xl overflow-hidden">
<div class="h-48 bg-purple-100 flex items-center justify-center">
<i class="fas fa-trademark text-6xl text-purple-600"></i>
</div>
<div class="p-6">
<h3 class="text-xl font-bold mb-3 text-purple-900">Merek</h3>
<p class="text-gray-600 mb-4">Lindungi identitas produk dan jasa Anda dengan pendaftaran merek.</p>
<div class="flex justify-between items-center">
<a href="#" class="text-purple-600 font-medium hover:text-purple-800">Pelajari →</a>
<span class="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded">6-12 Bulan</span>
</div>
</div>
</div>
</div>
<div class="text-center mt-10">
<a href="#" class="inline-block bg-blue-700 text-white font-bold py-3 px-8 rounded-lg hover:bg-blue-800 transition-all">
Lihat Semua Layanan <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
</section>
<!-- Process Section -->
<section class="py-12 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-blue-900 mb-2">Proses Pendaftaran HAKI</h2>
<p class="text-lg text-gray-600 max-w-2xl mx-auto">Langkah-langkah mudah untuk mendaftarkan karya intelektual Anda</p>
</div>
<div class="relative">
<!-- Timeline Bar -->
<div class="hidden md:block absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-blue-200 top-0"></div>
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<!-- Step 1 -->
<div class="relative text-center">
<div class="mx-auto w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center text-white text-xl font-bold mb-4 relative z-10">1</div>
<h3 class="text-xl font-bold mb-2 text-blue-900">Persiapan Dokumen</h3>
<p class="text-gray-600">Siapkan dokumen dan materi yang diperlukan sesuai jenis HAKI</p>
</div>
<!-- Step 2 -->
<div class="relative text-center">
<div class="mx-auto w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center text-white text-xl font-bold mb-4 relative z-10">2</div>
<h3 class="text-xl font-bold mb-2 text-blue-900">Pengajuan Online</h3>
<p class="text-gray-600">Isi formulir dan unggah dokumen melalui sistem kami</p>
</div>
<!-- Step 3 -->
<div class="relative text-center">
<div class="mx-auto w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center text-white text-xl font-bold mb-4 relative z-10">3</div>
<h3 class="text-xl font-bold mb-2 text-blue-900">Verifikasi</h3>
<p class="text-gray-600">Tim kami akan memverifikasi kelengkapan dokumen</p>
</div>
<!-- Step 4 -->
<div class="relative text-center">
<div class="mx-auto w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center text-white text-xl font-bold mb-4 relative z-10">4</div>
<h3 class="text-xl font-bold mb-2 text-blue-900">Sertifikat</h3>
<p class="text-gray-600">Terima sertifikat HAKI resmi dari pemerintah</p>
</div>
</div>
</div>
<div class="mt-12 bg-blue-50 rounded-xl p-8">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-6 md:mb-0">
<h3 class="text-2xl font-bold text-blue-900 mb-3">Butuh Bantuan?</h3>
<p class="text-gray-600 mb-4">Tim konsultan HAKI kami siap membantu Anda dalam proses pendaftaran dan perlindungan karya intelektual.</p>
<a href="#" class="inline-block bg-blue-700 text-white font-bold py-2 px-6 rounded-lg hover:bg-blue-800">
<i class="fas fa-headset mr-2"></i> Hubungi Konsultan
</a>
</div>
<div class="md:w-1/2">
<img src="https://via.placeholder.com/500x300" alt="Consultant" class="rounded-lg shadow-md w-full">
</div>
</div>
</div>
</div>
</section>
<!-- FAQ Section -->
<section class="py-12 bg-gray-50">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-blue-900 mb-2">Pertanyaan yang Sering Diajukan</h2>
<p class="text-lg text-gray-600 max-w-2xl mx-auto">Temukan jawaban untuk pertanyaan umum seputar HAKI</p>
</div>
<div class="max-w-3xl mx-auto">
<!-- FAQ Tabs -->
<div class="flex border-b mb-6">
<button class="tab-button active px-4 py-2" data-tab="hak-cipta">Hak Cipta</button>
<button class="tab-button px-4 py-2" data-tab="paten">Paten</button>
<button class="tab-button px-4 py-2" data-tab="merek">Merek</button>
<button class="tab-button px-4 py-2" data-tab="desain">Desain Industri</button>
</div>
<!-- Hak Cipta FAQ -->
<div id="hak-cipta" class="tab-content active">
<div class="faq-item mb-4 border rounded-lg overflow-hidden">
<button class="faq-question w-full text-left px-4 py-3 bg-white hover:bg-gray-50 flex justify-between items-center">
<span>Apa yang dimaksud dengan Hak Cipta?</span>
<i class="fas fa-plus text-blue-600"></i>
</button>
<div class="faq-answer hidden px-4 py-3 bg-gray-50">
<p class="text-gray-700">Hak Cipta adalah hak eksklusif bagi pencipta atau pemegang hak cipta untuk mengumumkan atau memperbanyak ciptaannya, yang timbul secara otomatis setelah suatu ciptaan diwujudkan dalam bentuk nyata tanpa mengurangi pembatasan menurut peraturan perundang-undangan yang berlaku.</p>
</div>
</div>
<div class="faq-item mb-4 border rounded-lg overflow-hidden">
<button class="faq-question w-full text-left px-4 py-3 bg-white hover:bg-gray-50 flex justify-between items-center">
<span>Berapa lama perlindungan Hak Cipta?</span>
<i class="fas fa-plus text-blue-600"></i>
</button>
<div class="faq-answer hidden px-4 py-3 bg-gray-50">
<p class="text-gray-700">Perlindungan Hak Cipta berlaku selama hidup pencipta dan terus berlangsung hingga 70 tahun setelah pencipta meninggal dunia. Untuk ciptaan yang dimiliki oleh badan hukum, perlindungan berlaku selama 50 tahun sejak pertama kali diumumkan.</p>
</div>
</div>
<div class="faq-item mb-4 border rounded-lg overflow-hidden">
<button class="faq-question w-full text-left px-4 py-3 bg-white hover:bg-gray-50 flex justify-between items-center">
<span>Dokumen apa saja yang diperlukan untuk pendaftaran Hak Cipta?</span>
<i class="fas fa-plus text-blue-600"></i>
</button>
<div class="faq-answer hidden px-4 py-3 bg-gray-50">
<p class="text-gray-700">Dokumen yang diperlukan antara lain: formulir pendaftaran, identitas pemohon, contoh ciptaan, surat pernyataan kepemilikan ciptaan, dan bukti pembayaran. Untuk ciptaan yang dibuat dalam hubungan kerja, diperlukan juga surat pernyataan dari pemberi kerja.</p>
</div>
</div>
</div>
<!-- Paten FAQ -->
<div id="paten" class="tab-content">
<div class="faq-item mb-4 border rounded-lg overflow-hidden">
<button class="faq-question w-full text-left px-4 py-3 bg-white hover:bg-gray-50 flex justify-between items-center">
<span>Apa perbedaan antara Paten dan Paten Sederhana?</span>
<i class="fas fa-plus text-blue-600"></i>
</button>
<div class="faq-answer hidden px-4 py-3 bg-gray-50">
<p class="text-gray-700">Paten diberikan untuk invensi yang baru, mengandung langkah inventif, dan dapat diterapkan dalam industri. Sedangkan Paten Sederhana diberikan untuk invensi berupa produk yang baru dan memiliki kegunaan praktis karena bentuk, konfigurasi, konstruksi, atau komponennya.</p>
</div>
</div>
<div class="faq-item mb-4 border rounded-lg overflow-hidden">
<button class="faq-question w-full text-left px-4 py-3 bg-white hover:bg-gray-50 flex justify-between items-center">
<span>Berapa lama proses pendaftaran Paten?</span>
<i class="fas fa-plus text-blue-600"></i>
</button>
<div class="faq-answer hidden px-4 py-3 bg-gray-50">
<p class="text-gray-700">Proses pendaftaran Paten memakan waktu sekitar 24-36 bulan, sedangkan Paten Sederhana sekitar 12-18 bulan. Waktu ini termasuk pemeriksaan substantif oleh Direktorat Jenderal Kekayaan Intelektual.</p>
</div>
</div>
<div class="faq-item mb-4 border rounded-lg overflow-hidden">
<button class="faq-question w-full text-left px-4 py-3 bg-white hover:bg-gray-50 flex justify-between items-center">
<span>Apakah universitas memiliki hak atas Paten yang dibuat oleh dosen?</span>
<i class="fas fa-plus text-blue-600"></i>
</button>
<div class="faq-answer hidden px-4 py-3 bg-gray-50">
<p class="text-gray-700">Berdasarkan peraturan universitas, hak atas Paten yang dibuat oleh dosen dalam melaksanakan tugasnya menjadi milik universitas. Namun, dosen sebagai penemu tetap memiliki hak moral dan berhak mendapatkan bagian dari manfaat ekonomi yang diperoleh universitas.</p>
</div>
</div>
</div>
<!-- Merek FAQ -->
<div id="merek" class="tab-content">
<div class="faq-item mb-4 border rounded-lg overflow-hidden">
<button class="faq-question w-full text-left px-4 py-3 bg-white hover:bg-gray-50 flex justify-between items-center">
<span>Apa syarat pendaftaran Merek?</span>
<i class="fas fa-plus text-blue-600"></i>
</button>
<div class="faq-answer hidden px-4 py-3 bg-gray-50">
<p class="text-gray-700">Syarat pendaftaran Merek antara lain: memiliki daya pembeda, tidak bertentangan dengan peraturan perundang-undangan, moralitas agama, kesusilaan, atau ketertiban umum, dan tidak merupakan nama umum atau lambang milik umum.</p>
</div>
</div>
<div class="faq-item mb-4 border rounded-lg overflow-hidden">
<button class="faq-question w-full text-left px-4 py-3 bg-white hover:bg-gray-50 flex justify-between items-center">
<span>Berapa lama masa perlindungan Merek terdaftar?</span>
<i class="fas fa-plus text-blue-600"></i>
</button>
<div class="faq-answer hidden px-4 py-3 bg-gray-50">
<p class="text-gray-700">Merek terdaftar mendapatkan perlindungan hukum selama 10 tahun sejak tanggal penerimaan permohonan dan dapat diperpanjang setiap 10 tahun dengan membayar biaya perpanjangan.</p>
</div>
</div>
</div>
<!-- Desain Industri FAQ -->
<div id="desain" class="tab-content">
<div class="faq-item mb-4 border rounded-lg overflow-hidden">
<button class="faq-question w-full text-left px-4 py-3 bg-white hover:bg-gray-50 flex justify-between items-center">
<span>Apa yang dimaksud dengan Desain Industri?</span>
<i class="fas fa-plus text-blue-600"></i>
</button>
<div class="faq-answer hidden px-4 py-3 bg-gray-50">
<p class="text-gray-700">Desain Industri adalah suatu kreasi tentang bentuk, konfigurasi, atau komposisi garis atau warna, atau garis dan warna, atau gabungan daripadanya yang berbentuk tiga dimensi atau dua dimensi yang memberikan kesan estetis dan dapat diwujudkan dalam pola tiga dimensi atau dua dimensi serta dapat dipakai untuk menghasilkan suatu produk, barang, komoditas industri, atau kerajinan tangan.</p>
</div>
</div>
<div class="faq-item mb-4 border rounded-lg overflow-hidden">
<button class="faq-question w-full text-left px-4 py-3 bg-white hover:bg-gray-50 flex justify-between items-center">
<span>Berapa lama perlindungan Desain Industri?</span>
<i class="fas fa-plus text-blue-600"></i>
</button>
<div class="faq-answer hidden px-4 py-3 bg-gray-50">
<p class="text-gray-700">Desain Industri terdaftar mendapatkan perlindungan hukum selama 10 tahun sejak tanggal penerimaan permohonan dan tidak dapat diperpanjang.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="py-12 bg-blue-800 text-white">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold mb-2">Apa Kata Mereka?</h2>
<p class="text-lg max-w-2xl mx-auto">Testimoni dari sivitas akademika yang telah menggunakan layanan HAKI universitas</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Testimonial 1 -->
<div class="bg-blue-700 rounded-xl p-6">
<div class="flex items-center mb-4">
<img src="https://via.placeholder.com/60" alt="Person" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold">Prof. Dr. Ahmad Santoso</h4>
<p class="text-sm text-blue-200">Dosen Fakultas Teknik</p>
</div>
</div>
<p class="text-blue-100">"Layanan HAKI universitas sangat membantu dalam mendaftarkan paten penelitian kami. Prosesnya cepat dan konsultannya sangat profesional."</p>
<div class="mt-4 text-yellow-300">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
<!-- Testimonial 2 -->
<div class="bg-blue-700 rounded-xl p-6">
<div class="flex items-center mb-4">
<img src="https://via.placeholder.com/60" alt="Person" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold">Dr. Maya Indah Sari</h4>
<p class="text-sm text-blue-200">Peneliti Pusat Studi</p>
</div>
</div>
<p class="text-blue-100">"Sangat puas dengan pendampingan tim HAKI universitas dalam mendaftarkan hak cipta buku ajar saya. Mereka sangat detail dan teliti."</p>
<div class="mt-4 text-yellow-300">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div>
<!-- Testimonial 3 -->
<div class="bg-blue-700 rounded-xl p-6">
<div class="flex items-center mb-4">
<img src="https://via.placeholder.com/60" alt="Person" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold">Budi Pratama, S.Kom</h4>
<p class="text-sm text-blue-200">Mahasiswa S2 Ilmu Komputer</p>
</div>
</div>
<p class="text-blue-100">"Berhasil mendaftarkan hak cipta aplikasi karya saya berkat bantuan tim HAKI universitas. Sekarang karya saya terlindungi dengan baik."</p>
<div class="mt-4 text-yellow-300">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
</div>
</div>
</section>
<!-- Partners -->
<section class="py-12 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-8">
<h2 class="text-3xl font-bold text-blue-900 mb-2">Mitra Kerja Sama</h2>
<p class="text-gray-600">Kami bekerja sama dengan berbagai institusi untuk perlindungan HAKI yang lebih baik</p>
</div>
<div class="grid grid-cols-2 md:grid-cols-5 gap-8 items-center">
<img src="https://via.placeholder.com/150x80" alt="Partner" class="h-16 object-contain opacity-70 hover:opacity-100 transition-opacity">
<img src="https://via.placeholder.com/150x80" alt="Partner" class="h-16 object-contain opacity-70 hover:opacity-100 transition-opacity">
<img src="https://via.placeholder.com/150x80" alt="Partner" class="h-16 object-contain opacity-70 hover:opacity-100 transition-opacity">
<img src="https://via.placeholder.com/150x80" alt="Partner" class="h-16 object-contain opacity-70 hover:opacity-100 transition-opacity">
<img src="https://via.placeholder.com/150x80" alt="Partner" class="h-16 object-contain opacity-70 hover:opacity-100 transition-opacity">
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-16 bg-gradient-to-r from-blue-700 to-blue-900 text-white">
<div class="container mx-auto px-4 text-center">
<h2 class="text-3xl font-bold mb-4">Siap Melindungi Karya Anda?</h2>
<p class="text-xl mb-8 max-w-2xl mx-auto">Daftarkan karya intelektual Anda sekarang dan dapatkan perlindungan hukum yang komprehensif.</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<a href="#" class="bg-white text-blue-800 font-bold py-3 px-8 rounded-lg hover:bg-blue-100 text-center">
<i class="fas fa-pen-fancy mr-2"></i> Daftar Sekarang
</a>
<a href="#" class="border-2 border-white text-white font-bold py-3 px-8 rounded-lg hover:bg-white hover:text-blue-800 text-center">
<i class="fas fa-question-circle mr-2"></i> Tanya Konsultan
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white pt-12 pb-6">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
<!-- Column 1 -->
<div>
<h3 class="text-xl font-bold mb-4 flex items-center">
<img src="https://via.placeholder.com/40" alt="Logo" class="h-8 mr-2">
PORTAL HAKI
</h3>
<p class="text-gray-400 mb-4">Layanan terpadu pendaftaran dan pengelolaan Hak Kekayaan Intelektual untuk sivitas akademika Universitas Teknologi Indonesia.</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-youtube"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
<!-- Column 2 -->
<div>
<h3 class="text-xl font-bold mb-4">Tautan Cepat</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">Beranda</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Profil</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Layanan</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Panduan</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Statistik</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Kontak</a></li>
</ul>
</div>
<!-- Column 3 -->
<div>
<h3 class="text-xl font-bold mb-4">Layanan HAKI</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">Hak Cipta</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Paten</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Merek</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Desain Industri</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Indikasi Geografis</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Rahasia Dagang</a></li>
</ul>
</div>
<!-- Column 4 -->
<div>
<h3 class="text-xl font-bold mb-4">Kontak Kami</h3>
<ul class="space-y-3">
<li class="flex items-start">
<i class="fas fa-map-marker-alt mt-1 mr-3 text-blue-400"></i>
<span class="text-gray-400">Gedung Rektorat Lt.3, Universitas Teknologi Indonesia, Jl. Pendidikan No.1, Jakarta</span>
</li>
<li class="flex items-center">
<i class="fas fa-phone-alt mr-3 text-blue-400"></i>
<span class="text-gray-400">(021) 12345678</span>
</li>
<li class="flex items-center">
<i class="fas fa-envelope mr-3 text-blue-400"></i>
<span class="text-gray-400">haki@univ.edu</span>
</li>
<li class="flex items-center">
<i class="fas fa-clock mr-3 text-blue-400"></i>
<span class="text-gray-400">Senin-Jumat: 08.00-16.00 WIB</span>
</li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 pt-6">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-4 md:mb-0 text-gray-400 text-sm">
&copy; 2023 Portal HAKI Universitas Teknologi Indonesia. Seluruh hak cipta dilindungi.
</div>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white text-sm">Kebijakan Privasi</a>
<a href="#" class="text-gray-400 hover:text-white text-sm">Syarat & Ketentuan</a>
<a href="#" class="text-gray-400 hover:text-white text-sm">Peta Situs</a>
</div>
</div>
</div>
</div>
</footer>
<!-- Back to Top Button -->
<button id="back-to-top" class="fixed bottom-8 right-8 bg-blue-700 text-white p-3 rounded-full shadow-lg hidden hover:bg-blue-800 transition-all">
<i class="fas fa-arrow-up"></i>
</button>
<script>
// Mobile Menu Toggle
document.getElementById('mobile-menu-button').addEventListener('click', function() {
const menu = document.getElementById('mobile-menu');
menu.classList.toggle('hidden');
});
// Mobile Dropdown Toggle
document.querySelectorAll('.dropdown-mobile button').forEach(button => {
button.addEventListener('click', function() {
const dropdown = this.nextElementSibling;
const icon = this.querySelector('i');
dropdown.classList.toggle('hidden');
if (dropdown.classList.contains('hidden')) {
icon.classList.remove('fa-chevron-up');
icon.classList.add('fa-chevron-down');
} else {
icon.classList.remove('fa-chevron-down');
icon.classList.add('fa-chevron-up');
}
});
});
// FAQ Toggle
document.querySelectorAll('.faq-question').forEach(question => {
question.addEventListener('click', function() {
const answer = this.nextElementSibling;
const icon = this.querySelector('i');
answer.classList.toggle('hidden');
if (answer.classList.contains('hidden')) {
icon.classList.remove('fa-minus');
icon.classList.add('fa-plus');
} else {
icon.classList.remove('fa-plus');
icon.classList.add('fa-minus');
}
});
});
// Tab System
document.querySelectorAll('.tab-button').forEach(button => {
button.addEventListener('click', function() {
const tabId = this.getAttribute('data-tab');
// Remove active class from all buttons and contents
document.querySelectorAll('.tab-button').forEach(btn => {
btn.classList.remove('active');
});
document.querySelectorAll('.tab-content').forEach(content => {
content.classList.remove('active');
});
// Add active class to clicked button and corresponding content
this.classList.add('active');
document.getElementById(tabId).classList.add('active');
});
});
// Back to Top Button
window.addEventListener('scroll', function() {
const backToTopButton = document.getElementById('back-to-top');
if (window.pageYOffset > 300) {
backToTopButton.classList.remove('hidden');
} else {
backToTopButton.classList.add('hidden');
}
});
document.getElementById('back-to-top').addEventListener('click', function() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
// Dark Mode Toggle
document.getElementById('dark-mode-toggle').addEventListener('click', function() {
document.body.classList.toggle('dark-mode');
const darkIcon = document.getElementById('dark-icon');
const lightIcon = document.getElementById('light-icon');
darkIcon.classList.toggle('hidden');
lightIcon.classList.toggle('hidden');
// Save preference to localStorage
if (document.body.classList.contains('dark-mode')) {
localStorage.setItem('darkMode', 'enabled');
} else {
localStorage.setItem('darkMode', 'disabled');
}
});
// Check for saved dark mode preference
if (localStorage.getItem('darkMode') === 'enabled') {
document.body.classList.add('dark-mode');
document.getElementById('dark-icon').classList.add('hidden');
document.getElementById('light-icon').classList.remove('hidden');
}
// Animate elements when they come into view
const animateOnScroll = function() {
const elements = document.querySelectorAll('.animate-fade-in');
elements.forEach(element => {
const elementPosition = element.getBoundingClientRect().top;
const screenPosition = window.innerHeight / 1.3;
if (elementPosition < screenPosition) {
element.style.opacity = '1';
element.style.transform = 'translateY(0)';
}
});
};
window.addEventListener('scroll', animateOnScroll);
window.addEventListener('load', animateOnScroll);
</script>
<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/web-haki" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>