diff --git a/app/controllers/detailfact.php b/app/controllers/detailfact.php
new file mode 100644
index 0000000000000000000000000000000000000000..e5aadee11680239667982052c095ac6991b594b5
--- /dev/null
+++ b/app/controllers/detailfact.php
@@ -0,0 +1,15 @@
+<?php
+
+class Detailfact extends Controller {
+ public function index() {
+ // Get the 'id' parameter from the URL
+ // if (isset($_GET['id'])) {
+ // $id = $_GET['id'];
+ $this->view('navbar/index');
+ $this->view('detailfact/index');
+ // } else {
+ // $this->view('navbar/index');
+ // $this->view('home/index');
+ // }
+ }
+}
diff --git a/app/views/detailfact/index.php b/app/views/detailfact/index.php
new file mode 100644
index 0000000000000000000000000000000000000000..5a2dbf52c8b6d6433bc98ce200886ec5b9b486db
--- /dev/null
+++ b/app/views/detailfact/index.php
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="../../../public/css/detailfact.css">
+ <title>Document</title>
+</head>
+<body>
+ <div>
+ <!-- <div class="header">
+ <h1>Fact</h1>
+ </div> -->
+ <div class="content">
+ <h1>judul</h1>
+ <div class = "authorcontainer">
+ <img src="../../../assets/thumbnail.png" alt="">
+ <div class="authortext">
+ <h2>Author</h2>
+ <h4>10 Subscribers</h4>
+ </div>
+ <button type="button" class="subscribe">Subscribe</button>
+ </div>
+ <div class="factcontainer">
+ <img src="../../../assets/thumbnail.png" alt="">
+ <div class="facttext">
+ <p>lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet </p>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/app/views/fact/index.php b/app/views/fact/index.php
index 630a8847c28659b34d3743eae60d3e98577a4549..9f09dd63a54b2dbd644f3f01bb8ee9d7df5f3d81 100644
--- a/app/views/fact/index.php
+++ b/app/views/fact/index.php
@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../../../public/css/fact.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
- <script defer src="../../../public/js/fact.js"></script>
+ <!-- <script defer src="../../../public/js/fact.js"></script> -->
<script>window.onload = function() {showAll();};</script>
<title>NutriCraft</title>
</head>
@@ -27,14 +27,49 @@
</select>
</div>
</div>
- <div id="isicontent" class="content"></div>
- <div id="pagination" class="pagination">
+ <div class="buttons">
+ <button type="button" class="all" id="selected" >All</button>
+ <button type="button" class="subscribed">Subscribed</button>
+ </div>
+ <div id="factContent" class="factcontent">
+ <a href="/?detailfact">
+ <div class="factcard">
+ <img src="../../../assets/thumbnail.png" alt="">
+ <div class="facttext">
+ <h2>judul</h2>
+ <p>lorem ipsum dolor sit amet lorem ipsum </p>
+ <h4>Author</h4>
+ </div>
+ </div>
+ </a>
+ <a href="/?detailfact">
+ <div class="factcard">
+ <img src="../../../assets/thumbnail.png" alt="">
+ <div class="facttext">
+ <h2>judul</h2>
+ <p>lorem ipsum dolor sit amet lorem ipsum </p>
+ <h4>Author</h4>
+ </div>
+ </div>
+ </a>
+ <a href="/?detailfact">
+ <div class="factcard">
+ <img src="../../../assets/thumbnail.png" alt="">
+ <div class="facttext">
+ <h2>judul</h2>
+ <p>lorem ipsum dolor sit amet lorem ipsum </p>
+ <h4>Author</h4>
+ </div>
+ </div>
+ </a>
+ </div>
+ <!-- <div id="pagination" class="pagination">
<button class="prev" onclick=prevPage()>«</button>
<div id="numberpage" class="buttons">
</div>
<button class="next" onclick=nextPage() >»</button>
- </div>
+ </div> -->
</div>
</body>
</html>
\ No newline at end of file
diff --git a/app/views/profile/index.php b/app/views/profile/index.php
index b5d97511f6fa35e35bb8e1c633502b7f082da370..4fb77fb6395550ae15feae0e8ef6494f82421eb7 100644
--- a/app/views/profile/index.php
+++ b/app/views/profile/index.php
@@ -17,6 +17,7 @@ echo "<script>console.log('$id, $fullName, $email, $phone')</script>";
<!DOCTYPE html>
<html lang="en">
+
<head>
<meta charset="UTF-8">
<meta name="NutriCraft" content="width=device-width, initial-scale=1.0">
@@ -29,6 +30,7 @@ echo "<script>console.log('$id, $fullName, $email, $phone')</script>";
<script>window.onload = function() {showExp();};</script>
<title>NutriCraft</title>
</head>
+
<body>
<form action="../../../server/controller/auth/Profile.php" method="POST" enctype="multipart/form-data">
<div class="overlay" id="confirmationBox">
@@ -40,7 +42,63 @@ echo "<script>console.log('$id, $fullName, $email, $phone')</script>";
</div>
</div>
</div>
- <div class="profileContainer">
+ <div class="content">
+ <div class="header">
+ <h1>Profile</h1>
+ </div>
+ <div class="profileContainer">
+ <div class="photoContainer">
+ <img src=<?php echo $photo?> alt="photoProfile" class="photoProfile" id="photoProfile">
+ <div class="editPhotoButton">
+ <label for="file" class="fileLabel">Choose a Photo</label>
+ <input type="file" name="file" id="file" class="file" accept="image/*" onchange="updatePhoto()">
+ </div>
+ <div class="levelcontainer">
+ <div class="level">
+ <p class="leveltext">Level</p>
+ <div class="levelcircle">
+ <p class="leveltext">2</p>
+ </div>
+ </div>
+ <ul class="skills skills1">
+ <li class="sk-cms"><span>CMS</span></li>
+ </ul>
+ </div>
+ </div>
+ <div class="labelcontainer">
+ <p class="labelProfile">Name</p>
+ <div>
+ <input type="text" placeholder=<?php echo $fullName ?> class="textField" id="editNama" name="fullName" disabled>
+ <i class="fas fa-edit editIcon" onclick=enableName() ></i>
+ </div>
+ <hr>
+ <p class="labelProfile">Email</p>
+ <div id="emailcontainer">
+ <input type="email" placeholder=<?php echo $email ?> class="textField" id="email" name="email" onchange=validateEmail() disabled>
+ <i class="fas fa-edit editIcon" onclick=enableEmail() ></i>
+ <p id="emailInvalid"></p>
+ </div>
+ <hr>
+ <p class="labelProfile">Phone Number</p>
+ <div id="phonenumbercontainer">
+ <input type="text" placeholder=<?php echo $phone ?> class="textField" id="phoneNumber" name="phone" onchange=validatePhoneNumber() disabled>
+ <i class="fas fa-edit editIcon" onclick=enablePhoneNumber()></i>
+ <p id="phoneNumberInvalid"></p>
+ </div>
+ <hr>
+ <p class="labelProfile">Password</p>
+ <div>
+ <input type="password" placeholder="" class="textField" id="editPassword" name="password" disabled>
+ <i class="fas fa-edit editIcon" onclick= enablePassword()></i>
+ </div>
+ <hr>
+ <button type="button" class="saveButton" name="save" id="submitButton" onclick="showConfirmation()">Save Change</button>
+ <button type="button" class="submitButton" name="delete" id="delete" onclick="showConfirmationdelete()">Delete</button>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- <div class="profileContainer">
<div class="boxKiri">
<div class="photoContainer">
<img src=<?php echo $photo?> alt="photoProfile" class="photoProfile" id="photoProfile">
@@ -50,6 +108,7 @@ echo "<script>console.log('$id, $fullName, $email, $phone')</script>";
<input type="file" name="file" id="file" class="file" accept="image/*" onchange="updatePhoto()">
</div>
</div>
+
</div>
<div class="boxKanan">
<p class="labelProfile">Name</p>
@@ -81,7 +140,8 @@ echo "<script>console.log('$id, $fullName, $email, $phone')</script>";
<button type="button" class="saveButton" name="save" id="submitButton" onclick="showConfirmation()">Save Change</button>
<button type="button" class="submitButton" name="delete" id="delete" onclick="showConfirmationdelete()">Delete</button>
</div>
- </div>
+ </div> -->
</form>
</body>
+
</html>
\ No newline at end of file
diff --git a/public/css/detailfact.css b/public/css/detailfact.css
new file mode 100644
index 0000000000000000000000000000000000000000..e4ca76b87c4a57098ca7d4708f9d06d0add229f0
--- /dev/null
+++ b/public/css/detailfact.css
@@ -0,0 +1,85 @@
+
+
+
+.header{
+ text-align: center ;
+ width: 100vw;
+}
+
+.content {
+ margin-top: 50px;
+ margin-left: 50px;
+ display: flex;
+ gap: 20px;
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: flex-start;
+}
+
+.content h1 {
+ font-size: 2rem;
+ font-weight: bold;
+ margin: 0;
+}
+
+.authorcontainer {
+ padding-left: 20px;
+ padding-right: 20px;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: flex-start;
+ gap: 20px;
+ border-radius: 20px;
+ border: 1px solid #EF4800;
+}
+
+.authorcontainer img {
+ width: 75px;
+ height: 75px;
+ border-radius: 50%;
+ margin-right: 20px;
+}
+
+.subscribe {
+ margin-left: 80px;
+ background-color: #EF4800;
+ color: white;
+ border: none;
+ width: 100px;
+ border-radius: 20px;
+ padding: 10px;
+ font-size: 1rem;
+ font-weight: bold;
+ cursor: pointer;
+}
+
+.subscribe:hover {
+ background-color: #FF6A00;
+}
+
+.factcontainer {
+ margin-top: 20px;
+}
+
+.factcontainer img {
+ width: 90%;
+ height: 90%;
+
+}
+
+
+@media screen and (max-width: 768px) {
+ .content {
+ align-items: center;
+ }
+ .authorcontainer img {
+ width: 50px;
+ height: 50px;
+ margin-right: 0px;
+ }
+ .subscribe {
+ margin-left: 0px;
+ }
+
+}
\ No newline at end of file
diff --git a/public/css/fact.css b/public/css/fact.css
index c5d3294388dac13fb46172c614e9bce079c4984c..10d3d72f3f5e5a3de3429da524813bc48adce4cf 100644
--- a/public/css/fact.css
+++ b/public/css/fact.css
@@ -36,7 +36,7 @@
border: 1px solid #000000;
border-radius: 20px;
padding: 5px;
- width: 40vw;
+ width: 30vw;
}
.searchcontainer input {
@@ -66,65 +66,87 @@
background-color: transparent;
}
+.buttons {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ width: 50%;
+ border-bottom: 1px solid #000000;
+}
-.video-card {
- border: 1px solid #EF4800;
- border-radius: 20px;
- margin: 10px;
- width: 60%;
- overflow: hidden;
+.buttons button {
+ border: none;
+ background-color: transparent;
+ color: #EF4800;
+ width: 50%;
+ height: 30px;
+ font-size: 16px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: background-color 0.3s ease, color 0.3s ease;
}
-.video-card:hover {
- border: 1px solid #288990;
- transform: scale(1.001); /* Slightly scale up on hover */
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+.factcontent {
+ margin-top: 30px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 20px;
}
-.cardcontent {
+.factcard {
display: flex;
flex-direction: row;
- background-color: #FFFFFF;
- cursor: pointer;
+ justify-content: flex-start;
+ align-items: center;
gap: 20px;
- /* border-bottom: 1px solid #EF4800; */
+ width: 50vw;
+ border-radius: 20px;
+ border: 1px solid #EF4800;
}
-.cardcontent img {
- width: 20%;
- height: 10%;
- border-bottom-left-radius: 0;
- /* border-top-right-radius: 20px; */
- border-bottom-right-radius: 20px;
+a {
+ text-decoration: none;
+ color: #000000;
}
-.cardcontent h3{
- margin-top: 28px;
- margin-bottom: 0;
- font-size: 24px
-}
-.cardcontent p {
- margin-top: 5px;
+.factcard img {
+ margin-left: 20px;
+ border-radius: 20px;
+ margin-right: 20px;
}
-.video-content {
+.facttext {
+ margin: 15px;
display: flex;
flex-direction: column;
- justify-content: center;
- align-items: center;
- max-height: 0;
- overflow: hidden;
- transition: max-height 0.3s ease-out;
-
+ justify-content: flex-start;
+ align-items: flex-start;
+ gap: 10px;
+ width: 100%;
+}
+
+.facttext h2 {
+ margin: 0;
+}
+
+.facttext p {
+ margin: 0;
}
-.video-content video {
- width: 95%;
- height: 30vw;
- /* margin: 23px; */
+.facttext h4 {
+ margin: 0;
+ margin-top: 10px;
+ color: #EF4800;
}
+
+
+
+
.pagination {
display: flex;
flex-direction: row;
@@ -183,4 +205,9 @@
background-color: #FF6B00;
color: #FFFFFF;
transition: background-color 0.3s ease, color 0.3s ease;
-}
\ No newline at end of file
+}
+
+
+
+
+
diff --git a/public/css/profile.css b/public/css/profile.css
index 93e1d20b29f882deddcc37b321fcf7c9c321f57d..d18105ee8aeca3e84fb54771412e5b56aeefe1ed 100644
--- a/public/css/profile.css
+++ b/public/css/profile.css
@@ -1,6 +1,105 @@
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');
+*{
+ font-family: 'Montserrat', sans-serif;
+}
+
+body{
+ margin: 0;
+ padding: 0;
+ background-color: #FFFFFF;
+}
+
+.overlay {
+ display: none;
+
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
+ z-index: 1000; /* Ensure it appears above other content */
+ justify-content: center;
+ align-items: center;
+ /* display: flex; */
+
+}
+
+/* Styles for the confirmation dialog */
+.confirmation-dialog {
+ background-color: #fff;
+ padding: 20px;
+ display: flex;
+ gap : 20px;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 10px;
+ height: 150px;
+ width: 350px;
+ box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
+}
+
+.confirmation-dialog p {
+ font-size: 16px;
+ font-weight: 500;
+ text-align: center;
+ margin-bottom: 20px;
+}
+
+.confirmbtn button {
+ border: 1px solid #EF4800;
+ border-radius: 10px;
+ background-color: transparent;
+ color: #EF4800;
+ width: 125px;
+ height: 30px;
+ font-size: 16px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+#cancelButton {
+ background-color: #EF4800;
+ color: #FFFFFF;
+ margin-left: 10px;
+
+}
+
+.content{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin-top: 50px;
+ padding-left: 100px;
+ padding-right: 100px;
+}
+
+.profileContainer{
+ display: flex ;
+ justify-content: center;
+ align-items: center;
+ border-radius: 10px;
+ border-width: 1px;
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+ padding: 40px;
+
+}
+
+.photoProfile{
+ height: 15vw;
+ border-radius: 10px;
+ margin-right: 20px;
+ width: 12vw;
+}
+
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');
+
+
*{
font-family: 'Montserrat', sans-serif;
}
@@ -74,6 +173,7 @@ body{
display: flex;
padding: 20px;
justify-content: center;
+ margin-bottom: 30px;
}
.photoContainer{
@@ -86,9 +186,6 @@ body{
}
-.photoProfile{
- height: 20vw;
-}
.editPhotoButton{
background-color: #EF4800;
@@ -237,7 +334,7 @@ body{
}
.photoProfile{
- height: 40vw;
+ height: 50vw;
}
.editPhotoButton{
@@ -265,4 +362,176 @@ body{
font-size: 15px;
margin-top: -10px;
margin-bottom: 0px;
-}
\ No newline at end of file
+}
+
+
+/*** IN PROGRESS ***/
+
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap");
+
+:root {
+ --c1: #2187e7;
+ --b2: #222;
+ --b3: #333;
+ --w1: #fff;
+ --w2: #eee;
+ --t1: all 0.5s ease 0s;
+}
+
+.levelcontainer {
+ width: 80%;
+}
+
+.level {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ margin-bottom: 10px;
+}
+
+.levelcircle{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ border: 1px solid #EF4800;
+ padding: 5px;
+ padding-bottom: 5px;
+}
+
+.levelcircle p{
+ margin: 0;
+}
+
+.leveltext{
+ margin: 0;
+ font-size: 21px;
+ font-weight: 600;
+}
+
+ul {
+ margin:0;
+ padding: 0;
+}
+
+ul.skills li {
+ --per: 50;
+ --dur: calc(calc(var(--per) / 100) * 1.5s);
+ margin: 0 0 5px 0;
+ list-style: none;
+ position: relative;
+ text-transform: uppercase;
+ font-size: 15px;
+ color: var(--w2);
+}
+
+ul.skills li:before {
+ content: "";
+ position: absolute;
+ background: #1c1c1c;
+ height: 16px;
+ width: 100%;
+ left: 0;
+ bottom: 0;
+ border-radius: 10px;
+ border: 1px solid #111;
+ border-color: #111 #323232 #323232 #111;
+ --track: #2292dd40;
+ background: linear-gradient(
+ 90deg,
+ var(--track) calc(calc(var(--per) * 1%) + 4px),
+ #1c1c1c calc(calc(var(--per) * 1%) + 4px)
+ );
+ }
+
+
+ ul.skills li:after {
+ content: "";
+ height: 11px;
+ margin: 0 0 2px 0;
+ background: #2187e7;
+ position: absolute;
+ box-shadow: 0px 0px 10px 1px #00c6ff66;
+ left: 3px;
+ width: 0%;
+ bottom: 0;
+ transition: all var(--dur) ease 0s;
+ animation: start 1s ease 0s 2 alternate;
+ }
+
+
+
+ ul.skills li:hover {
+ filter: brightness(1.5);
+ transition: var(--t1);
+ }
+
+ ul.skills:hover li:after,
+ label:hover + ul.skills li:after,
+ input:checked + label + ul.skills li:after {
+ width: calc(calc(var(--per) * 1%) - 2px);
+ }
+
+ @keyframes start {
+ 100% {
+ width: calc(calc(var(--per) * 1%) - 2px);
+ }
+ }
+
+
+ ul.skills li span {
+ font-weight: 500;
+ }
+
+ ul.skills li span:before {
+ position: absolute;
+ right: -25px;
+ top: 43px;
+ transition: var(--t1);
+ content: "";
+ opacity: 1;
+ border: 7px solid #fff0;
+ }
+
+ ul.skills li:hover span:before,
+ .profile-skills input:checked + label + ul.skills li span:before {
+ transition: var(--t1);
+ right: calc(calc(calc(100 - var(--per)) * 1%) - 12px);
+ opacity: 1;
+ border-right-color: #2187e7;
+ }
+
+
+ ul.skills li span:after {
+ position: absolute;
+ right: -40px;
+ top: 38px;
+ transition: var(--t1);
+ counter-reset: percent var(--per);
+ /*content: counter(percent) "%";*/
+ content: counter(percent);
+ color: var(--b2);
+ opacity: 1 !important;
+ padding: 4px 6px;
+ border-radius: 1px;
+ font-weight: bold;
+ pointer-events: none;
+ display: none;
+ }
+
+ul.skills li:hover span:after,
+.profile-skills input:checked + label + ul.skills li span:after {
+ transition: var(--t1);
+ right: calc(calc(85 - var(--per)) * 1%);
+ right: calc(calc(calc(100 - var(--per)) * 1%) - 40px);
+ opacity: 1;
+ background: var(--c1);
+ display:inline;
+}
+
+
+
+/* ini exp */
+ul.skills li.sk-cms { --per: 80; }