270 lines
8.1 KiB
PHP
270 lines
8.1 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<style>
|
|
/* Additional styles */
|
|
.sidebar {
|
|
background-color: #FFFFFF;
|
|
width: 245px;
|
|
}
|
|
|
|
.content {
|
|
min-height: 400px;
|
|
background-color: #FFFFFF;
|
|
padding: 20px;
|
|
}
|
|
|
|
.footer {
|
|
background-color: #FAFAFA;
|
|
padding: 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* NAV LINK */
|
|
.nav-link {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.nav-link:hover {
|
|
color: blue !important;
|
|
}
|
|
|
|
.nav-link .icon {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.custom-button {
|
|
color: #A0A0A0;
|
|
/* Warna teks saat tombol normal */
|
|
transition: background-color 0.3s, color 0.3s;
|
|
/* Efek transisi ketika hover */
|
|
/* outline: none; */
|
|
}
|
|
|
|
.custom-button:hover {
|
|
background-color: #007BFF;
|
|
/* Warna latar belakang saat tombol dihover */
|
|
color: white;
|
|
/* Warna teks saat tombol dihover menjadi putih */
|
|
}
|
|
|
|
.custom-card {
|
|
padding: 30px;
|
|
width: 395px;
|
|
height: 280px;
|
|
background-color: #FFFFFF;
|
|
border-radius: 20px;
|
|
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.circle-image {
|
|
width: 79px;
|
|
height: 79px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.custom-title {
|
|
font-weight: 600;
|
|
font-size: 25px;
|
|
color: #252525;
|
|
font-family: 'Poppins', sans-serif;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.custom-subtitle {
|
|
font-weight: 400;
|
|
font-size: 20px;
|
|
color: #898989;
|
|
font-family: 'Poppins', sans-serif;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.custom-button {
|
|
width: 335px;
|
|
height: 43px;
|
|
border-radius: 10px;
|
|
background-color: #EAEAEA;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-top: 15px;
|
|
outline: none;
|
|
}
|
|
|
|
.custom-button-detail {
|
|
width: 180px;
|
|
height: 45px;
|
|
border-radius: 10px;
|
|
background-color: #EAEAEA;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-top: 15px;
|
|
margin-left: auto;
|
|
color: #A0A0A0;
|
|
/* Warna teks saat tombol normal */
|
|
transition: background-color 0.3s, color 0.3s;
|
|
/* Efek transisi ketika hover */
|
|
}
|
|
|
|
.custom-button-detail:hover {
|
|
background-color: #007BFF;
|
|
/* Warna latar belakang saat tombol dihover */
|
|
color: white;
|
|
/* Warna teks saat tombol dihover menjadi putih */
|
|
}
|
|
|
|
.button-text {
|
|
font-weight: 500;
|
|
font-size: 15px;
|
|
font-family: 'Poppins', sans-serif;
|
|
margin: 0;
|
|
margin-left: 10px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.text {
|
|
font-size: 15px;
|
|
font-family: 'Poppins', sans-serif;
|
|
}
|
|
|
|
.sidebar-right-shadow {
|
|
box-shadow: 1px 0px 8px rgba(0, 0, 0, 0.1);
|
|
/* Menambahkan bayangan ke sisi kanan */
|
|
}
|
|
|
|
.footer {
|
|
background-color: #EAEAEA;
|
|
color: #636363;
|
|
text-align: center;
|
|
padding: 10px 0;
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
|
|
<title>Tab Example</title>
|
|
|
|
<!-- CSS Bootstrap -->
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
|
|
<link href="style.css" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
|
|
|
|
<!-- JavaScript Bootstrap -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
@include('android.layouts.header')
|
|
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
|
|
@include('android.layouts.sidebar')
|
|
|
|
@yield('main-content')
|
|
</div>
|
|
</div>
|
|
|
|
<!-- JavaScript untuk mengubah konten tab -->
|
|
<script>
|
|
function materialDetailPage() {
|
|
window.location.href = "{{ route('material_detail') }}";
|
|
}
|
|
|
|
// Fungsi untuk mengubah warna ikon, teks, dan link menjadi biru
|
|
function changeColor(id) {
|
|
var icon = document.getElementById(id + 'Icon');
|
|
var link = document.getElementById(id + 'Link');
|
|
var text = document.getElementById(id + 'Text');
|
|
|
|
// Mengembalikan warna ikon, teks, dan link ke warna awal
|
|
var icons = document.getElementsByClassName('fas');
|
|
var links = document.getElementsByClassName('nav-link');
|
|
var texts = document.getElementsByClassName('nav-link-text');
|
|
for (var i = 0; i < icons.length; i++) {
|
|
icons[i].style.color = '#676767';
|
|
}
|
|
for (var j = 0; j < links.length; j++) {
|
|
links[j].style.color = '#34364A';
|
|
}
|
|
for (var k = 0; k < texts.length; k++) {
|
|
texts[k].style.color = '#34364A';
|
|
}
|
|
|
|
// Mengubah warna ikon, teks, dan link menjadi biru
|
|
icon.style.color = '#1A79E3';
|
|
link.style.color = '#1A79E3';
|
|
text.style.color = '#1A79E3';
|
|
}
|
|
|
|
// Menambahkan event listener pada setiap link
|
|
var startLearningLink = document.getElementById('learningLink');
|
|
startLearningLink.addEventListener('click', function() {
|
|
changeColor('learning');
|
|
});
|
|
|
|
var validationLink = document.getElementById('validationLink');
|
|
validationLink.addEventListener('click', function() {
|
|
changeColor('validation');
|
|
});
|
|
|
|
var rankLink = document.getElementById('rankLink');
|
|
rankLink.addEventListener('click', function() {
|
|
changeColor('rank');
|
|
});
|
|
|
|
var settingsLink = document.getElementById('settingsLink');
|
|
settingsLink.addEventListener('click', function() {
|
|
changeColor('settings');
|
|
});
|
|
|
|
|
|
// Function to show the selected content based on sidebar link click
|
|
function showContent(contentId) {
|
|
// Hide all content divs
|
|
var contentDivs = document.getElementsByClassName('content');
|
|
for (var i = 0; i < contentDivs.length; i++) {
|
|
contentDivs[i].style.display = 'none';
|
|
}
|
|
|
|
// Show the selected content div
|
|
var selectedContent = document.getElementById(contentId);
|
|
if (selectedContent) {
|
|
selectedContent.style.display = 'block';
|
|
}
|
|
}
|
|
|
|
// Change TAB
|
|
$(document).ready(function() {
|
|
$('#learning-tab').on('click', function(e) {
|
|
e.preventDefault();
|
|
$('#finished-tab').removeClass('active');
|
|
$(this).tab('show');
|
|
});
|
|
|
|
$('#finished-tab').on('click', function(e) {
|
|
e.preventDefault();
|
|
$('#learning-tab').removeClass('active');
|
|
$(this).tab('show');
|
|
});
|
|
});
|
|
</script>
|
|
<footer class="footer">
|
|
© 2023 Your Website. All rights reserved.
|
|
</footer>
|
|
</body>
|
|
|
|
|
|
</html> |