MIF_E31220095/templates/header.html

162 lines
4.9 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="{{ url_for('static', filename='img/Logo Polije.png') }}" type="image/x-icon">
<title>Analisa Sentimen</title>
<!-- Custom fonts for this template-->
<link href="{{ url_for('static', filename='vendor/fontawesome-free/css/all.min.css') }}" rel="stylesheet"
type="text/css">
<link
href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
rel="stylesheet">
<!-- Custom styles for this template-->
<link href="{{ url_for('static', filename='css/sb-admin-2.min.css') }}" rel="stylesheet">
<!-- Custom styles for this page -->
<link href="{{ url_for('static', filename='vendor/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet">
<style>
.sidebar {
background: linear-gradient(to bottom, #2b5876, #4e4376);
width: 250px;
min-height: 100vh;
color: white;
transition: width 0.3s ease-in-out;
overflow-x: hidden;
}
.sidebar.collapsed {
width: 80px;
}
.sidebar a {
color: white;
display: flex;
align-items: center;
padding: 15px 20px;
text-decoration: none;
transition: background-color 0.2s ease;
}
.sidebar a:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.sidebar i {
margin-right: 10px;
transition: transform 0.3s ease;
}
.sidebar.collapsed i {
margin-right: 0;
text-align: center;
width: 100%;
}
.sidebar.collapsed .sidebar-text {
display: none;
}
.sidebar-brand {
font-weight: bold;
font-size: 18px;
padding: 20px;
text-align: center;
}
hr {
border-top: 1px solid rgba(255, 255, 255, 0.3);
margin: 10px 0;
}
.toggle-btn {
background: none;
border: none;
color: white;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body id="page-top">
<!-- Page Wrapper -->
<div id="wrapper">
<!-- Sidebar -->
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="/">
<div class="sidebar-brand-text mx-3">Analisis Sentimen</div>
</a>
<!-- Divider -->
<hr class="sidebar-divider my-0">
<!-- Navbar -->
<li class="nav-item">
<a class="nav-link" href="/">
<i class="fas fa-fw fa-tachometer-alt"></i>
<span>Dashboard</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/preprocessing">
<i class="fas fa-fw fa-cog"></i>
<span>Preprocessing</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/labeling">
<i class="fas fa-fw fa-calculator"></i>
<span>labeling</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/klasifikasi">
<i class="fas fa-fw fa-code"></i>
<span>Klasifikasi</span></a>
</li>
<hr class="sidebar-divider d-none d-md-block">
<!-- Sidebar Toggler (Sidebar) -->
<div class="text-center d-none d-md-inline">
<button class="rounded-circle border-0" id="sidebarToggle"></button>
</div>
</ul>
<!-- End of Sidebar -->
<!-- Content Wrapper -->
<div id="content-wrapper" class="d-flex flex-column">
<!-- Main Content -->
<div id="content">
<!-- Topbar -->
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
<!-- Sidebar Toggle (Topbar) -->
<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
<i class="fa fa-bars"></i>
</button>
<!-- Topbar Navbar -->
<ul class="navbar-nav ml-auto">
<div class="topbar-divider d-none d-sm-block"></div>
</ul>
</nav>
<!-- End of Topbar -->