diff --git a/README.md b/README.md
index 58d55a2c4553b40638336010627b9fbb370f465c..68d26779f36ad228ea083b2f4b7ca2103011974e 100644
--- a/README.md
+++ b/README.md
@@ -77,6 +77,27 @@ lapor(user_id) → user(user_id) <br>
timeline(user_id) → user(user_id)
## Tampilan Aplikasi
+### Sign Up
+
+### Log In
+
+### Home
+
+
+
+### Artikel
+
+
+### Ruang Diskusi
+
+
+### Lapor
+
+
+### Profile
+
+### Log Out
+
## Pembagian Tugas
### Server Side
diff --git a/src/app/components/artikel/index.php b/src/app/components/artikel/index.php
index ba3bee3fb1e863d41f6da32c0f2353c647ad906b..df3cfa876942662ac3c2019909e437d396e35ef9 100644
--- a/src/app/components/artikel/index.php
+++ b/src/app/components/artikel/index.php
@@ -54,11 +54,51 @@ $page = "Artikel";
</div>
</div>
</footer>
+ <?php if (isset($_SESSION["user_id"])): ?>
+ <?php
+ $roles = mysqli_query($conn, "SELECT roles FROM user WHERE user_id = '" . $_SESSION["user_id"] . "'");
+ $roles = mysqli_fetch_assoc($roles);
+ if ($roles['roles'] === "admin"):
+ ?>
+ <button class="add-article-button" onclick="openAddArticleOverlay()">Add Article</button>
+ <div id="addArticleOverlay" class="overlay">
+ <div class="overlay-content">
+ <!-- Add Article Form -->
+ <form action="/src/backend/addArticle.php" method="post" enctype="multipart/form-data">
+ <input type="hidden" name="add" value="1">
+ <input type="text" name="article_judul" placeholder="Judul Artikel" required>
+ <input type="text" name="article_category" placeholder="Kategori Artikel" required>
+ <input type="file" name="article_image">
+ <textarea name="article_content" id="article_content" cols="30" rows="10" placeholder="Isi Artikel"
+ required></textarea>
+ <!-- Add your form fields for adding articles here -->
+ <button class="btn" type="submit">Submit</button>
+ </form>
+ <button class="close-overlay-button" onclick="closeAddArticleOverlay()">×</button>
+ </div>
+ </div>
+ <?php endif; ?>
+ <?php endif; ?>
<script src="/src/public/js/artikel.js"></script>
+
+ <script>
+ // JavaScript to open the Add Article overlay
+ function openAddArticleOverlay() {
+ var overlay = document.getElementById("addArticleOverlay");
+ overlay.style.display = "block";
+ }
+
+ // JavaScript to close the Add Article overlay
+ function closeAddArticleOverlay() {
+ var overlay = document.getElementById("addArticleOverlay");
+ overlay.style.display = "none";
+ }
+ </script>
+
</body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/app/components/home/index.php b/src/app/components/home/index.php
index a5d0841d94afb3b761668630dac800dbac094db2..d593e3c21e6afca2f9c512e7ec18030001028dc6 100644
--- a/src/app/components/home/index.php
+++ b/src/app/components/home/index.php
@@ -39,11 +39,11 @@
<div class="slider-inner">
<div class="slider-item">
<?php if ($currentSlide == 1): ?>
- <img id="slide-1" src="src\public\img\profile.jpg" alt="SayIt">
+ <img id="slide-1" src="src\public\img\ilustration.jpg" alt="SayIt">
<?php elseif ($currentSlide == 2): ?>
- <img id="slide-2" src="src\public\img\profile.jpg" alt="SayIt">
+ <img id="slide-2" src="src\public\img\pendidikan.jpg" alt="SayIt">
<?php elseif ($currentSlide == 3): ?>
- <img id="slide-3" src="src\public\img\profile.jpg" alt="SayIt">
+ <img id="slide-3" src="src\public\img\seksual.jpg" alt="SayIt">
<?php endif; ?>
</div>
</div>
@@ -63,19 +63,20 @@
<hr class="hot-line" size="1px" width="300px" align="center" color="black">
<div class="hot-news">
<div class="hot-news-item">
- <img src="src\public\img\profile.jpg" alt="Hot News 1">
- <h4>Judul Berita 1</h4>
- <p>Isi berita singkat untuk Hot News 1.</p>
+ <img src="src\public\img\1.jpg" alt="Hot News 1">
+ <h4>Panduan Pendidikan Seks pada Anak dan Remaja</h4>
+ <p>Tak sedikit orangtua yang masih ragu untuk mengajarkan pendidikan seks pada Si Kecil. Selain merasa tabu, orangtua terkadang merasa bingung untuk memilih cara yang tepat. Padahal, pendidikan seks seharusnya dikenalkan sedini mungkin pada anak.
+ Pendidikan seks perlu diberikan pada anak, agar mereka tidak mendapatkan informasi yang keliru mengenai pendidikan seks. Ingat, sudah seharusnya orangtua yang mengajarkan pendidikan seks pada anak, bukannya orang lain. Sebab, masalah ini sangat krusial dan sensitif.</p>
</div>
<div class="hot-news-item">
- <img src="src\public\img\profile.jpg" alt="Hot News 2">
- <h4>Judul Berita 2</h4>
- <p>Isi berita singkat untuk Hot News 2.</p>
+ <img src="src\public\img\2.jpg" alt="Hot News 2">
+ <h4>Pendidikan Seksual pada Anak: Tabu tapi Penting!</h4>
+ <p>Kementerian Pemberdayaan Perempuan dan Perlindungan Anak (KemenPPPA) menyatakan bahwa jumlah kasus kekerasan terhadap anak mengalami penambahan. Sebanyak 14.517 kasus tercatat pada tahun 2021, sedangkan pada tahun 2022 mengalami kenaikan signifikan mencapai 16.106 kasus. Kasus kekerasan seksual pada anak merajai hingga mencapai 9.588 kasus. Hal ini cukup menyita perhatian masyarakat dan membuat resah para orang tua. Selain itu, anak yang mengalami kekerasan telah kehilangan haknya untuk mendapatkan perlindungan. Lantas apa yang bisa kita lakukan untuk mencegah kekerasan seksual pada anak?</p>
</div>
<div class="hot-news-item">
- <img src="src\public\img\profile.jpg" alt="Hot News 3">
- <h4>Judul Berita 3</h4>
- <p>Isi berita singkat untuk Hot News 3.</p>
+ <img src="src\public\img\3.jpg" alt="Hot News 3">
+ <h4>Pendidikan Seks Sejak Dini Sebagai Pola Asuh Generasi Alpha, Why Not?</h4>
+ <p>Sex education atau pendidikan seks, sebagaimana hal yang hingga saat ini masih terdengar cukup tabu di Indonesia. Sebagian orang tua percaya bahwa pendidikan seks yang terlalu dini sebetulnya belum benar-benar dibutuhkan oleh sang anak. Sebagaimana usia pubertas anak yang biasanya baru dimulai sejak usia 9-14 tahun. Lantas, sebelum menginjak usia tersebut, apakah pendidikan seks ini benar belum dibutuhkan?</p>
</div>
</div>
<button onclick="window.location.href='/?artikel'" class="more-articles-button">More Articles</button>
diff --git a/src/public/img/1.jpg b/src/public/img/1.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..2a6654e6f4ba70c81270f333e59dc47b98f15692
Binary files /dev/null and b/src/public/img/1.jpg differ
diff --git a/src/public/img/2.jpg b/src/public/img/2.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..e73e9af27af8784cfe40ffff5636a3ff8b71b689
Binary files /dev/null and b/src/public/img/2.jpg differ
diff --git a/src/public/img/3.jpg b/src/public/img/3.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..7a0f28b89d7a16a9996210819795d51d67800211
Binary files /dev/null and b/src/public/img/3.jpg differ
diff --git a/src/public/img/artikel1.jpg b/src/public/img/artikel1.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..805bf2cf95dc7ebd7a2b963871531f9ddd1fa35d
Binary files /dev/null and b/src/public/img/artikel1.jpg differ
diff --git a/src/public/img/artikel2.jpg b/src/public/img/artikel2.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..83f088d3c33c179730d56d7c99832ba49788e17f
Binary files /dev/null and b/src/public/img/artikel2.jpg differ
diff --git a/src/public/img/home1.jpg b/src/public/img/home1.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..1d3b530ab3da6a7abcb655b925ef021311950db0
Binary files /dev/null and b/src/public/img/home1.jpg differ
diff --git a/src/public/img/home2.jpg b/src/public/img/home2.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..638f4e48ed7173afb3eb7c01b200aec7d2fc4699
Binary files /dev/null and b/src/public/img/home2.jpg differ
diff --git a/src/public/img/home3.jpg b/src/public/img/home3.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..e916502fd05c9373e5b8f69aec6af6bcadd259cd
Binary files /dev/null and b/src/public/img/home3.jpg differ
diff --git a/src/public/img/ilustration.jpg b/src/public/img/ilustration.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..b33e01dc88d47d543b066af9403b702c9e4c6454
Binary files /dev/null and b/src/public/img/ilustration.jpg differ
diff --git a/src/public/img/lapor1.jpg b/src/public/img/lapor1.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..42a93f44c3a8a9c135a09554aa87a8bfb5de89cf
Binary files /dev/null and b/src/public/img/lapor1.jpg differ
diff --git a/src/public/img/lapor2.jpg b/src/public/img/lapor2.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..b11de04573da2f33d30d58ab53001ea1c7792765
Binary files /dev/null and b/src/public/img/lapor2.jpg differ
diff --git a/src/public/img/login.jpg b/src/public/img/login.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..4ffa161c0af1603df611a30bb2a26b224f71eb4f
Binary files /dev/null and b/src/public/img/login.jpg differ
diff --git a/src/public/img/logout.jpg b/src/public/img/logout.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..cca8ff0854de0f4bfe96c977bc169813ddf783e9
Binary files /dev/null and b/src/public/img/logout.jpg differ
diff --git a/src/public/img/pendidikan.jpg b/src/public/img/pendidikan.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..762a1e7d7e5ca9c043ed936e3bd092c641decd34
Binary files /dev/null and b/src/public/img/pendidikan.jpg differ
diff --git a/src/public/img/profile1.jpg b/src/public/img/profile1.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..00f59cb2e908fe8d62a3482e28b916bedee131c8
Binary files /dev/null and b/src/public/img/profile1.jpg differ
diff --git a/src/public/img/seksual.jpg b/src/public/img/seksual.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..17cc2974634587588c5d5bd987d8aafc174c7068
Binary files /dev/null and b/src/public/img/seksual.jpg differ
diff --git a/src/public/img/signup.jpg b/src/public/img/signup.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..a6a5300465cde44a7a3dd162a36d48625269cab4
Binary files /dev/null and b/src/public/img/signup.jpg differ
diff --git a/src/public/img/timeline1.jpg b/src/public/img/timeline1.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..6b48dc1e168bf1fbec0c42e6a0d90a3116ea2911
Binary files /dev/null and b/src/public/img/timeline1.jpg differ
diff --git a/src/public/img/timeline2.jpg b/src/public/img/timeline2.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..ad0073bd6311f290444c4a520443f44e7559a9cf
Binary files /dev/null and b/src/public/img/timeline2.jpg differ
diff --git a/src/public/img/timeline3.jpg b/src/public/img/timeline3.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..57600ab36dbed1def5bdc28ec27fab8ef2ef3f40
Binary files /dev/null and b/src/public/img/timeline3.jpg differ
diff --git a/src/public/img/timeline4.jpg b/src/public/img/timeline4.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..3f1ca3bf295faa6d4aab496a5880d80ee0d60e49
Binary files /dev/null and b/src/public/img/timeline4.jpg differ