diff --git a/frontend b/frontend deleted file mode 160000 index 9ca4c4e..0000000 --- a/frontend +++ /dev/null @@ -1 +0,0 @@ -Subproject commit 9ca4c4e3b563c08c3b85ec9739547502ffe39128 diff --git a/frontend/README.md b/frontend/README.md new file mode 100644 index 0000000..e8e1a48 --- /dev/null +++ b/frontend/README.md @@ -0,0 +1,5 @@ +# Ngekost-Aja WEB Frontend + +👉🏻 [Check this out to see the full project with both frontend and backend linked](https://github.com/ngekost-aja/Ngekost-Aja) + +A simple frontend for the "Ngekost Aja!" project. It uses basic web technologies including HTML, CSS, JavaScript, and Bootstrap. This frontend is fully integrated with the backend to provide a seamless user experience. \ No newline at end of file diff --git a/frontend/assets/css/index.css b/frontend/assets/css/index.css new file mode 100644 index 0000000..4547673 --- /dev/null +++ b/frontend/assets/css/index.css @@ -0,0 +1,24 @@ +body { + background-color: white; + height: 1000px; + font-family: 'Poppins', sans-serif; +} + +main { + margin-top: 5rem; +} + +#product-catalog { + margin: 3rem 0rem 3rem; +} + +.container-row { + margin: 1rem; +} + +footer { + background-color: #3081D0 !important; + padding: 100px; + text-align: center; + color: white; +} \ No newline at end of file diff --git a/frontend/assets/css/login.css b/frontend/assets/css/login.css new file mode 100644 index 0000000..0f15e05 --- /dev/null +++ b/frontend/assets/css/login.css @@ -0,0 +1,16 @@ +body { + font-family: 'Poppins', sans-serif; + height: 100vh; + margin: 0; + height: 100vh; + margin: 0; + +} + +#form-login { + background-color: #EDCD44; +} + +#logo-ngekost-aja { + width: 80px; +} \ No newline at end of file diff --git a/frontend/assets/css/owner/dashboard.css b/frontend/assets/css/owner/dashboard.css new file mode 100644 index 0000000..3d8c1fb --- /dev/null +++ b/frontend/assets/css/owner/dashboard.css @@ -0,0 +1,37 @@ +body { + background-color: white; + height: 1000px; + font-family: 'Poppins', sans-serif; +} + + +/* MAIN */ + +main { + margin: 2rem 3rem 0 20rem; + width: 100%; +} + +#btn-plus-icon { + width: 2rem; +} + +#tambah-aset { + background-color: #EDCD44; +} + +#btn-tambah-aset { + background-color: rgb(49, 49, 49); + color: white; +} + +#aset-table { + overflow-y: scroll; + height: 70vh; +} + +.aset-data:hover { + background-color: lightgray; + color: white; + cursor: pointer; +} \ No newline at end of file diff --git a/frontend/assets/css/owner/detail-aset-kost.css b/frontend/assets/css/owner/detail-aset-kost.css new file mode 100644 index 0000000..2db321c --- /dev/null +++ b/frontend/assets/css/owner/detail-aset-kost.css @@ -0,0 +1,57 @@ +body { + background-color: white; + height: 1000px; + font-family: 'Poppins', sans-serif; +} + +#btn-plus-icon { + width: 2rem; +} + +/* MAIN */ + +main { + margin: 2rem 3rem 0 20rem; + width: 100%; +} + +#tambah-ruang-container { + background-color: #EDCD44; +} + +#btn-tambah-ruang { + background-color: rgb(49, 49, 49); + color: white; +} + +#ubah-pengelola-btn { + background-color: black; + color: white; +} + +.status-digunakan { + background-color: green; + border-radius: 2rem; + color: white; +} + +.status-tdk-digunakan { + background-color: gray; + border-radius: 2rem; + color: white; +} + +.status-tdk-disewakan { + background-color: red; + border-radius: 2rem; + color: white; +} + +.lihat-field:hover { + cursor: pointer; + text-decoration: underline; +} + +.lihat-icon { + width: 1.5rem; +} \ No newline at end of file diff --git a/frontend/assets/css/owner/pengelola.css b/frontend/assets/css/owner/pengelola.css new file mode 100644 index 0000000..45c0ef3 --- /dev/null +++ b/frontend/assets/css/owner/pengelola.css @@ -0,0 +1,35 @@ +body { + background-color: white; + height: 1000px; + font-family: 'Poppins', sans-serif; +} + + +/* MAIN */ + +main { + margin: 2rem 3rem 0 20rem; + width: 100%; +} + +#btn-plus-icon { + width: 2rem; +} + +#tambah-pengelola { + background-color: #EDCD44; +} + +#btn-tambah-pengelola { + background-color: rgb(49, 49, 49); + color: white; +} + +.btn-phone:hover { + background-color: green; + color: white; +} + +.phone-icon { + width: 1.5rem; +} \ No newline at end of file diff --git a/frontend/assets/css/owner/statistics-room-kost.css b/frontend/assets/css/owner/statistics-room-kost.css new file mode 100644 index 0000000..8e5a537 --- /dev/null +++ b/frontend/assets/css/owner/statistics-room-kost.css @@ -0,0 +1,17 @@ +body { + background-color: white; + height: 1000px; + font-family: 'Poppins', sans-serif; +} + + +/* MAIN */ + +main { + margin: 2rem 3rem 0 20rem; + width: 100%; +} + +#btn-plus-icon { + width: 2rem; +} \ No newline at end of file diff --git a/frontend/assets/css/owner/tambah-aset.css b/frontend/assets/css/owner/tambah-aset.css new file mode 100644 index 0000000..40deff6 --- /dev/null +++ b/frontend/assets/css/owner/tambah-aset.css @@ -0,0 +1,25 @@ +body { + background-color: white; + height: 1000px; + font-family: 'Poppins', sans-serif; +} + + +/* MAIN */ + +main { + margin: 2rem 3rem 0 20rem; + width: 100%; +} + +.room-data { + cursor: pointer; +} + +.data-filled { + border: 7px solid greenyellow; +} + +.data-empty { + border: 7px solid red; +} \ No newline at end of file diff --git a/frontend/assets/css/owner/tambah-pengelola.css b/frontend/assets/css/owner/tambah-pengelola.css new file mode 100644 index 0000000..9c7aa94 --- /dev/null +++ b/frontend/assets/css/owner/tambah-pengelola.css @@ -0,0 +1,13 @@ +body { + background-color: white; + height: 1000px; + font-family: 'Poppins', sans-serif; +} + + +/* MAIN */ + +main { + margin: 2rem 3rem 0 20rem; + width: 100%; +} \ No newline at end of file diff --git a/frontend/assets/css/owner/tambah-ruang.css b/frontend/assets/css/owner/tambah-ruang.css new file mode 100644 index 0000000..9c7aa94 --- /dev/null +++ b/frontend/assets/css/owner/tambah-ruang.css @@ -0,0 +1,13 @@ +body { + background-color: white; + height: 1000px; + font-family: 'Poppins', sans-serif; +} + + +/* MAIN */ + +main { + margin: 2rem 3rem 0 20rem; + width: 100%; +} \ No newline at end of file diff --git a/frontend/assets/css/renter/detail-kos.css b/frontend/assets/css/renter/detail-kos.css new file mode 100644 index 0000000..dbb8ce3 --- /dev/null +++ b/frontend/assets/css/renter/detail-kos.css @@ -0,0 +1,95 @@ +body { + background-color: white; + height: 1000px; + font-family: 'Poppins', sans-serif; +} + +main { + margin-top: 5rem; +} + +#gallery-photo-kost { + height: 20rem; +} + +.kost-images { + height: 100%; +} + +#main-photo { + margin-right: .5rem; +} + +#detail-info-kos { + margin-right: 2rem; +} + +#detail-info-kos, #pemesanan-sewa-kost { + margin-top: 2rem; +} + +#judul-kost { + font-weight: 500; +} + +#btn-simpan-dulu, #btn-sewa-sekarang { + font-weight: bolder; +} + +#btn-simpan-dulu { + background-color: white; + color: black; + border-color: #33BCEA; + margin-bottom: .5rem; +} + +#btn-sewa-sekarang { + background-color: #EDCD44; + color: black; + border-color: #EDCD44; +} + +#product-catalog { + margin: 3rem 0rem 3rem; +} + +.link-to-detail-kost { + text-decoration: none; +} + +.kost-content { + height: 100%; +} + +.judul-kost { + font-weight: 500; +} + +.alamat-kost { + font-size: small; +} + +.harga-kost { + font-weight: bolder; +} + +.rating-kost { + display: flex; +} + +.rating-text { + margin-left: .5rem; +} + +.star-icon { + width: 1rem; + align-items: center; + color: #FFC400; +} + +footer { + background-color: #33BCEA !important; + padding: 100px; + text-align: center; + color: white; +} \ No newline at end of file diff --git a/frontend/assets/css/renter/login-style.css b/frontend/assets/css/renter/login-style.css new file mode 100644 index 0000000..b71a5c1 --- /dev/null +++ b/frontend/assets/css/renter/login-style.css @@ -0,0 +1,50 @@ +* { + margin: 0px; + padding: 0px; + box-sizing: border-box; +} + +body { + font-family: 'Poppins', sans-serif; + min-height: 100vh; + background-color: yellow; +} + +.login-form { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 90%; + max-width: 450px; + background: #222; + padding: 20px 30px; + box-shadow: 0px 5px 10px rgba(0, 0, 0, 1); +} + +.login-form .form-title { + font-family: 'Montserrat', sans-serif; + text-align: center; + font-size: 30px; + font-weight: 600; + margin: 20px 0px 30px; + color: #fff; +} + +.login-form .form-input { + margin: 10px 0px; +} + +.login-form .form-input label { + display: block; + font-size: 15px; + color: #fff; + margin-bottom: 5px; +} + +.login-form .form-input input { + width: 100%; + padding: 10px; + border: 1px solid #888; + font-size: 15px; +} diff --git a/frontend/assets/css/renter/pengajuan.css b/frontend/assets/css/renter/pengajuan.css new file mode 100644 index 0000000..c1695a2 --- /dev/null +++ b/frontend/assets/css/renter/pengajuan.css @@ -0,0 +1,118 @@ +body { + background-color: white; + font-family: 'Poppins', sans-serif; +} + +main { + margin-top: 5rem; +} + +.progress-bar-node { + width: 2rem; + height: 2rem; +} + +#progress-node-2 { + left: 33%; +} + +#progress-node-3 { + left: 66%; +} + +#progress-bar-payment { + width: 0%; +} + +.form-stage { + margin-top: 3rem; + min-height: 25rem; +} + +.form-content { + margin: 1rem; +} + +#form-step-1 { + display: flex; +} + +#left-content { + margin-right: 1rem; +} + + +#change-user-data-btn { + margin: 1rem 0 0 0; + background-color: white; + color: black; +} + +#change-user-data-btn:hover { + background-color: gray; + color: white; +} + +#text-helper { + font-size: 10px; +} + +#right-content { + margin-left: 1rem; +} + +.kost-container { + max-width: 35%; +} + +.card-img { + width: 30%; +} + +.btn-nav-form { + margin-top: 1rem; + right: 0; +} + +#btn-back { + margin-right: 1rem; +} + +#btn-continue { + margin-left: 1rem; +} + +#form-step-2 { + display: none; +} + +#form-step-3 { + display: none; +} + +#status-icon { + height: 1rem; + width: 1rem; + border-radius: 1rem; + background-color: red; +} + +.payment-method { + border: 2px solid black; + height: 2rem; + margin: .5rem 0; +} + +.payment-method:hover { + background-color: gray; + color: white; +} + +.logo-bank { + height: 90%; + margin: 0 1rem; +} + +#form-step-4 { + display: none; +} \ No newline at end of file diff --git a/frontend/assets/css/renter/profil.css b/frontend/assets/css/renter/profil.css new file mode 100644 index 0000000..446e3da --- /dev/null +++ b/frontend/assets/css/renter/profil.css @@ -0,0 +1,46 @@ +body { + background-color: white; + height: 1000px; + font-family: 'Poppins', sans-serif; +} + +main { + margin-top: 5rem; +} + +#sidebar, +#sidebar > .card { + height: 70vh; + width: 20%; +} + +#profile-photo-container { + height: 100px; +} + +#profile-photo { + width: 6rem; + border-radius: 50%; +} + +#pengaturan-option:hover, +#tagihan-option:hover { + cursor: pointer; +} + +#main-content { + margin-left: 22rem; +} + +.sidebar-option-icon { + width: 1.5rem; + margin: 0 1rem; +} + +#pengaturan-section { + display: block; +} + +#tagihan-section { + display: none; +} \ No newline at end of file diff --git a/frontend/assets/css/renter/search.css b/frontend/assets/css/renter/search.css new file mode 100644 index 0000000..b9233e5 --- /dev/null +++ b/frontend/assets/css/renter/search.css @@ -0,0 +1,77 @@ +body { + background-color: white; + height: 1000px; + font-family: 'Poppins', sans-serif; +} + +main { + margin-top: 5rem; +} + +#filter-search-container { + height: 700px; +} + +#filter-search-container { + position: sticky; + top: 5rem; +} + +#product-catalog { + margin: 3rem 0rem 3rem; +} + +.container-row { + margin: 1rem; +} + +.link-to-detail-kost { + text-decoration: none; +} + +.kost-img-thumbnail-container { + height: 10rem; + display: flex; + justify-content: center; +} + +.kost-img-thumbnail { + width: 25%; +} + +.kost-content { + height: 100%; +} + +.nama-kost { + font-weight: 500; +} + +.alamat-kost { + font-size: small; +} + +.harga-kost { + font-weight: bolder; +} + +.rating-kost { + display: flex; +} + +.rating-text { + margin-left: .5rem; +} + +.star-icon { + width: 1rem; + align-items: center; + color: #FFC400; +} + +footer { + background-color: #3081D0 !important; + padding: 100px; + text-align: center; + color: white; +} \ No newline at end of file diff --git a/frontend/assets/css/signup.css b/frontend/assets/css/signup.css new file mode 100644 index 0000000..c4bfb4a --- /dev/null +++ b/frontend/assets/css/signup.css @@ -0,0 +1,16 @@ +body { + font-family: 'Poppins', sans-serif; + height: 100vh; + margin: 0; + height: 100vh; + margin: 0; + +} + +#form-signup { + background-color: #EDCD44; +} + +#logo-ngekost-aja { + width: 80px; +} \ No newline at end of file diff --git a/frontend/assets/img/foto-kamar-kost-1.jpg b/frontend/assets/img/foto-kamar-kost-1.jpg new file mode 100644 index 0000000..5e84375 Binary files /dev/null and b/frontend/assets/img/foto-kamar-kost-1.jpg differ diff --git a/frontend/assets/img/foto-kamar-kost-2.jpg b/frontend/assets/img/foto-kamar-kost-2.jpg new file mode 100644 index 0000000..2486584 Binary files /dev/null and b/frontend/assets/img/foto-kamar-kost-2.jpg differ diff --git a/frontend/assets/img/foto-lorong-kost-1.jpeg b/frontend/assets/img/foto-lorong-kost-1.jpeg new file mode 100644 index 0000000..8351bc1 Binary files /dev/null and b/frontend/assets/img/foto-lorong-kost-1.jpeg differ diff --git a/frontend/assets/img/ngekost-aja-logo-2.png b/frontend/assets/img/ngekost-aja-logo-2.png new file mode 100644 index 0000000..2a6b033 Binary files /dev/null and b/frontend/assets/img/ngekost-aja-logo-2.png differ diff --git a/frontend/assets/img/ngekost-aja-logo-long.png b/frontend/assets/img/ngekost-aja-logo-long.png new file mode 100644 index 0000000..03db804 Binary files /dev/null and b/frontend/assets/img/ngekost-aja-logo-long.png differ diff --git a/frontend/assets/img/ngekost-aja-logo.png b/frontend/assets/img/ngekost-aja-logo.png new file mode 100644 index 0000000..7414122 Binary files /dev/null and b/frontend/assets/img/ngekost-aja-logo.png differ diff --git a/frontend/assets/img/ngekost-aja-long-low.png b/frontend/assets/img/ngekost-aja-long-low.png new file mode 100644 index 0000000..cdd15b0 Binary files /dev/null and b/frontend/assets/img/ngekost-aja-long-low.png differ diff --git a/frontend/assets/img/rumah-kost-tampak-depan-1.jpg b/frontend/assets/img/rumah-kost-tampak-depan-1.jpg new file mode 100644 index 0000000..33f4b86 Binary files /dev/null and b/frontend/assets/img/rumah-kost-tampak-depan-1.jpg differ diff --git a/frontend/assets/img/special-sale-banner.jpeg b/frontend/assets/img/special-sale-banner.jpeg new file mode 100644 index 0000000..2e531c1 Binary files /dev/null and b/frontend/assets/img/special-sale-banner.jpeg differ diff --git a/frontend/assets/img/super-discount-banner.jpeg b/frontend/assets/img/super-discount-banner.jpeg new file mode 100644 index 0000000..cf9b22e Binary files /dev/null and b/frontend/assets/img/super-discount-banner.jpeg differ diff --git a/frontend/assets/img/super-sale-banner.jpg b/frontend/assets/img/super-sale-banner.jpg new file mode 100644 index 0000000..508a9dd Binary files /dev/null and b/frontend/assets/img/super-sale-banner.jpg differ diff --git a/frontend/assets/js/index.js b/frontend/assets/js/index.js new file mode 100644 index 0000000..a813c37 --- /dev/null +++ b/frontend/assets/js/index.js @@ -0,0 +1,52 @@ +import KostItem from "../../components/KostItem.js"; + +// let kostData = []; +const fetchKostData = async () => { + try { + const response = await fetch('http://ngekost-aja-backend.test/api/kost', { + method: 'GET' + }); + + if (!response.ok) { + throw new Error('Network response was not ok'); + } + + const data = await response.json(); + console.log('Data received:', data.data); + return data.data; + } catch (error) { + console.error('There was a problem with the fetch operation:', error); + } +}; + +const productCatalog = document.getElementById('product-catalog'); + +const createNewRowContainer = () => { + currentRow = document.createElement('div'); + currentRow.classList.add('row', 'row-cols-auto', 'g-2', 'g-lg-3'); + productCatalog.appendChild(currentRow); +} + +let currentRow; +createNewRowContainer(); + +fetchKostData().then(data => { + data.forEach(data => { + if (currentRow.children.length >= 5) { + createNewRowContainer(); + } + + const kostItem = document.createElement('kost-item'); + kostItem.setAttribute('nama-kost', data.nama); + kostItem.setAttribute('harga-kost', data.harga); + kostItem.setAttribute('kost-img-thumbnail', ''); + kostItem.setAttribute('alamat-kost', data.alamat); + kostItem.setAttribute('avg-rating', data.rating); + kostItem.setAttribute('total-rating', 23); + kostItem.setAttribute('detail-link', ''); + + currentRow.appendChild(kostItem); + }); +}).catch(error => { + console.error('Error: ' + error) +}) diff --git a/frontend/assets/js/owner/dashboard.js b/frontend/assets/js/owner/dashboard.js new file mode 100644 index 0000000..e69de29 diff --git a/frontend/assets/js/owner/detail-aset-kost.js b/frontend/assets/js/owner/detail-aset-kost.js new file mode 100644 index 0000000..e69de29 diff --git a/frontend/assets/js/owner/statistics-room-kost.js b/frontend/assets/js/owner/statistics-room-kost.js new file mode 100644 index 0000000..e69de29 diff --git a/frontend/assets/js/owner/tambah-aset.js b/frontend/assets/js/owner/tambah-aset.js new file mode 100644 index 0000000..e69de29 diff --git a/frontend/assets/js/owner/tambah-pengelola.js b/frontend/assets/js/owner/tambah-pengelola.js new file mode 100644 index 0000000..e69de29 diff --git a/frontend/assets/js/owner/tambah-ruang.js b/frontend/assets/js/owner/tambah-ruang.js new file mode 100644 index 0000000..e69de29 diff --git a/frontend/assets/js/renter/detail-kos.js b/frontend/assets/js/renter/detail-kos.js new file mode 100644 index 0000000..e69de29 diff --git a/frontend/assets/js/renter/pengajuan.js b/frontend/assets/js/renter/pengajuan.js new file mode 100644 index 0000000..79eb6aa --- /dev/null +++ b/frontend/assets/js/renter/pengajuan.js @@ -0,0 +1,77 @@ +const btnBack = document.getElementById('btn-back') +const btnContinue = document.getElementById('btn-continue') +const formStep1 = document.getElementById('form-step-1') +const formStep2 = document.getElementById('form-step-2') +const formStep3 = document.getElementById('form-step-3') +const formStep4 = document.getElementById('form-step-4') +const progressBar = document.getElementById('progress-bar') +const progressBarContainer = document.getElementById('progress-bar-container') +const userFullData = document.getElementById('user-full-data') +const btnProcessData = document.getElementById('btn-process-data') +const processStatus = document.getElementById('process-status') +const processStatusText = document.getElementById('process-status-text') +const statusIcon = document.getElementById('status-icon') + + + +let currentStage = 1 + +btnContinue.addEventListener('click', () => { + console.log(currentStage) + if (currentStage == 1) { + formStep1.style.display = 'none' + formStep2.style.display = 'block' + } else if (currentStage == 2) { + formStep2.style.display = 'none' + formStep3.style.display = 'block' + } else if (currentStage == 3) { + formStep3.style.display = 'none' + formStep4.style.display = 'block' + } + progressBar.style.width = adjustWidth('up') + currentStage++ +}); + +btnBack.addEventListener('click', () => { + if (currentStage == 2) { + formStep2.style.display = 'none'; + formStep1.style.display = 'flex'; + } else if (currentStage == 3) { + formStep3.style.display = 'none' + formStep2.style.display = 'block' + } else if (currentStage == 4) { + formStep4.style.display = 'none' + formStep3.style.display = 'block' + } + progressBar.style.width = adjustWidth('down'); + currentStage-- +}); + +function adjustWidth(instruction) { + if (instruction == 'up') { + if (currentStage == 1) { + return '33%'; + } else if (currentStage == 2) { + return '66%' + } else if (currentStage == 3) { + return '100%'; + } + } else { + if (currentStage == 4) { + return '66%'; + } else if (currentStage == 3) { + return '33%' + } else if (currentStage == 2) { + return '0%' + } + } +} + +function changeUserData() { + userFullData.disabled = userFullData.disabled == true ? false : true +} + +btnProcessData.addEventListener('click', ()=> { + processStatusText.textContent = 'Sedang diproses' + statusIcon.style.backgroundColor = 'orange' +}) \ No newline at end of file diff --git a/frontend/assets/js/renter/pengelola.js b/frontend/assets/js/renter/pengelola.js new file mode 100644 index 0000000..e69de29 diff --git a/frontend/assets/js/renter/profil.js b/frontend/assets/js/renter/profil.js new file mode 100644 index 0000000..de8272c --- /dev/null +++ b/frontend/assets/js/renter/profil.js @@ -0,0 +1,11 @@ +const profileOption = document.querySelectorAll('.profile-option') +const profileSection = document.querySelectorAll('.profile-section') + +let currentSection = profileSection[0] +for (let i = 0; i < profileOption.length; i++) { + profileOption[i].onclick = ()=> { + currentSection.style.display = 'none' + currentSection = profileSection[i] + currentSection.style.display = 'block' + } +} \ No newline at end of file diff --git a/frontend/assets/js/renter/search.js b/frontend/assets/js/renter/search.js new file mode 100644 index 0000000..92170bd --- /dev/null +++ b/frontend/assets/js/renter/search.js @@ -0,0 +1,148 @@ +document.addEventListener('DOMContentLoaded', () => { + function fetchTemplate(url) { + return fetch(url) + .then(response => response.text()) + .then(templateHTML => { + const temp = document.createElement('div'); + temp.innerHTML = templateHTML.trim(); + return temp.querySelector('template').content + }) + .catch(error => console.error(`Error fetching template from ${url}:`, error)); + } + + Promise.all([ + fetchTemplate('../../template/KostItem.html') + ]).then(([KostItem]) => { + // Attach kostItem to the main HTML + const dataKost = [ + { + namaKost: 'Kost Graha Indah', + kostThumbnail: '../assets/img/rumah-kost-tampak-depan-1.jpg', + hargaKost: 'Rp 850.000/bulan', + alamatKost: 'Kecamatan Lowokwaru, Kota Malang', + rating: '4.7 | 23 sewa' + }, + { + namaKost: 'Kost Mawar Indah', + kostThumbnail: '../assets/img/ngekost-aja-logo.png', + hargaKost: 'Rp 967.000/bulan', + alamatKost: 'Kecamatan Ubud, Kab. Gianyar', + rating: '4.6 | 65 sewa' + }, + { + namaKost: 'Kost Langit Cerah', + kostThumbnail: '../assets/img/ngekost-aja-logo.png', + hargaKost: 'Rp 765.000/bulan', + alamatKost: 'Kecamatan Ubud, Kab. Gianyar', + rating: '4.4 | 120 sewa' + }, + { + namaKost: 'Kost Mutiara Biru', + hargaKost: 'Rp 1.400.000/bulan', + kostThumbnail: '../assets/img/ngekost-aja-logo.png', + alamatKost: 'Kecamatan Blimbing, Kota Malang', + rating: '4.6 | 17 sewa' + }, + { + namaKost: 'Kost Kenanga', + hargaKost: 'Rp 666.000/bulan', + kostThumbnail: '../assets/img/ngekost-aja-logo.png', + alamatKost: 'Kecamatan Lowokwaru, Kota Malang', + rating: '4.2 | 90 sewa' + }, + { + namaKost: 'Kost Harmoni', + kostThumbnail: '../assets/img/ngekost-aja-logo.png', + hargaKost: 'Rp 930.000/bulan', + alamatKost: 'Kecamatan Sukun, Kota Malang', + rating: '4.4 | 30 sewa' + }, + { + namaKost: 'Kost Dahlia', + kostThumbnail: '../assets/img/ngekost-aja-logo.png', + hargaKost: 'Rp 700.000/bulan', + alamatKost: 'Kecamatan Rungkut, Kota Surabaya', + rating: '3.8 | 23 sewa' + }, + { + namaKost: 'Kost Puri Asri', + kostThumbnail: '../assets/img/ngekost-aja-logo.png', + hargaKost: 'Rp 1.000.000/bulan', + alamatKost: 'Kecamatan Sukun, Kota Malang', + rating: '4.9 | 5 sewa' + }, + { + namaKost: 'Kost Flamboyan', + kostThumbnail: '../assets/img/ngekost-aja-logo.png', + hargaKost: 'Rp 2.120.000', + alamatKost: 'Kecamatan Sukolilo, Kota Surabaya', + rating: '4.6 | 18 sewa' + }, + { + namaKost: 'Kost Andalas', + kostThumbnail: '../assets/img/ngekost-aja-logo.png', + hargaKost: 'Rp 810.000/bulan', + alamatKost: 'Kecamatan Ubud, Kab. Gianyar', + rating: '4.3 | 67 sewa' + }, + { + namaKost: 'Kost Melati Indah', + kostThumbnail: '../assets/img/ngekost-aja-logo.png', + hargaKost: 'Rp 765.000/bulan', + alamatKost: 'Kecamatan Blimbing, Kota Malang', + rating: '4.6 | 34 sewa' + }, + { + namaKost: 'Kost Bintang Timur', + kostThumbnail: '../assets/img/ngekost-aja-logo.png', + hargaKost: 'Rp 1.100.000/bulan', + alamatKost: 'Kecamatan Sukun, Kota Malang', + rating: '4.1 | 25 sewa' + }, + { + namaKost: 'Kost Cenderawasih', + kostThumbnail: '../assets/img/ngekost-aja-logo.png', + hargaKost: 'Rp 570.000/bulan', + alamatKost: 'Kecamatan Sukolilo, Kota Surabaya', + rating: '4.5 | 27 sewa' + }, + { + namaKost: 'Kost Nusa Indah', + kostThumbnail: '../assets/img/ngekost-aja-logo.png', + hargaKost: 'Rp 1.220.000/bulan', + alamatKost: 'Kecamatan Ubud, Kab. Gianyar', + rating: '4.4 | 54 sewa' + }, + { + namaKost: 'Kost Agung Jalan Jakarta', + kostThumbnail: '../assets/img/ngekost-aja-logo.png', + hargaKost: 'Rp 620.000/bulan', + alamatKost: 'Kecamatan Sukun, Kota Malang', + rating: '4.3 | 7 sewa' + } + ] + + function createElement(data) { + const clone = document.importNode(KostItem, true) + clone.querySelector('.nama-kost').textContent = data.namaKost + clone.querySelector('.kost-img-thumbnail').src = data.kostThumbnail + clone.querySelector('.harga-kost').textContent = data.hargaKost + clone.querySelector('.alamat-kost').textContent = data.alamatKost + clone.querySelector('.rating-text').textContent = data.rating + return clone + } + + const container = document.querySelectorAll('.container-row') + + // Add new kost item to HTML + let currentData = 0 + const totalItemPerRow = 2 + for (let i = 0; i < container.length; i++) { + for (let j = 0; j < totalItemPerRow && currentData != dataKost.length; j++) { + const item = createElement(dataKost[currentData]) + container[i].appendChild(item) + currentData++ + } + } + }) +}) \ No newline at end of file diff --git a/frontend/components/KostItem.js b/frontend/components/KostItem.js new file mode 100644 index 0000000..d2c63fa --- /dev/null +++ b/frontend/components/KostItem.js @@ -0,0 +1,102 @@ +export default class KostItem extends HTMLElement { + constructor() { + super(); + + const shadow = this.attachShadow({ mode: 'open' }); + + // Create a template for the component + shadow.innerHTML = ` +
+ +
+
+ Kost thumbnail +
+
+

+

+

+
+ + + +
+ | + sewa +
+
+
+
+ +
+ `; + + // Bootstrap style for this component + const bootstrapLink = document.createElement('link') + bootstrapLink.setAttribute('rel', 'stylesheet') + bootstrapLink.setAttribute('integrity', 'sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH') + bootstrapLink.setAttribute('crossorigin', 'anonymous') + bootstrapLink.setAttribute('href', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css') + + // Custom style CSS for this component + const style = document.createElement('style') + style.textContent = ` + .kost-img-thumbnail-container { + height: 14rem; + } + + .kost-img-thumbnail { + min-width: 100%; + min-height: 100%; + } + + .rating-text { + margin-left: .5rem; + } + + .star-icon { + width: 1rem; + align-items: center; + color: #FFC400; + } + `; + + shadow.append(bootstrapLink); + shadow.append(style) + } + + static get observedAttributes() { + return ['nama-kost', 'harga-kost', 'kost-img-thumbnail', 'alamat-kost', 'avg-rating', 'total-rating', 'detail-link']; + } + + attributeChangedCallback(name, oldValue, newValue) { + const element = this.shadowRoot.querySelector(`.${name}`); + switch (name) { + case 'harga-kost': + this.shadowRoot.querySelector('.harga-kost').textContent = new Intl.NumberFormat('id-ID', { + style: 'currency', + currency: 'IDR', + minimumFractionDigits: 0 + }).format(newValue) + break; + case 'kost-img-thumbnail': + this.shadowRoot.querySelector('.kost-img-thumbnail').src = newValue; + break; + case 'detail-link': + this.shadowRoot.querySelector('.link-to-detail-kost').href = newValue; + break; + case 'avg-rating': + const avgRating = newValue === null || newValue === 'null' ? 0 : newValue; + this.shadowRoot.querySelector('.avg-rating').textContent = avgRating; + break; + default: + element.textContent = newValue; + break; + } + } +} + +// Register component to valid HTML element +customElements.define('kost-item', KostItem); diff --git a/frontend/components/NavbarTop.js b/frontend/components/NavbarTop.js new file mode 100644 index 0000000..59476f9 --- /dev/null +++ b/frontend/components/NavbarTop.js @@ -0,0 +1,108 @@ +class NavbarTop extends HTMLElement { + constructor() { + super() + + const shadow = this.attachShadow({ mode: 'open' }) + + // Some HTML element for the component + shadow.innerHTML = ` + + ` + // Bootstrap style for this component + const bootstrapLink = document.createElement('link') + bootstrapLink.setAttribute('rel', 'stylesheet') + bootstrapLink.setAttribute('integrity', 'sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH') + bootstrapLink.setAttribute('crossorigin', 'anonymous') + bootstrapLink.setAttribute('href', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css') + + // Custom style CSS for this component + const style = document.createElement('style') + style.textContent = ` + nav { + background-color: #EDCD44! important; + font-weight: bolder; + } + + .side-nav-option { + padding: 0; + width: 3rem; + height: 3rem; + } + + #brand-logo { + width: 10rem; + } + ` + + // Attach Bootstrap and custom CSS to the component + shadow.append(bootstrapLink) + shadow.append(style) + } + + // Custom attributes + static get observedAttributes() { + return ['data-homepage-link', 'data-brand-logo', 'data-search-action', 'data-profil-href'] + } + + attributeChangedCallback(name, oldValue, newValue) { + if (name == 'data-homepage-link' && this.shadowRoot) { + const homepageLink = this.shadowRoot.querySelector('#homepage-link') + if (homepageLink) { + homepageLink.setAttribute('href', newValue) + } + } else if (name == 'data-brand-logo' && this.shadowRoot) { + const brandLogo = this.shadowRoot.querySelector('#brand-logo') + if (brandLogo) { + brandLogo.setAttribute('src', newValue) + } + } else if (name == 'data-search-action' && this.shadowRoot) { + const search = this.shadowRoot.querySelector('#search-form') + if (search) { + search.setAttribute('action', newValue) + } + } else if (name == 'data-profil-href' && this.shadowRoot) { + const linkPlace = this.shadowRoot.querySelector('#profil-option') + if (linkPlace) { + linkPlace.setAttribute('href', newValue) + } + } + } +} + +// Register component to valid HTML element +customElements.define('navbar-top', NavbarTop) \ No newline at end of file diff --git a/frontend/components/OwnerSidebar.js b/frontend/components/OwnerSidebar.js new file mode 100644 index 0000000..bf289c8 --- /dev/null +++ b/frontend/components/OwnerSidebar.js @@ -0,0 +1,76 @@ +class OwnerSidebar extends HTMLElement { + constructor() { + super() + + const shadow = this.attachShadow({ mode: 'open' }) + + // Some HTML element for the component + shadow.innerHTML = ` + + ` + // Bootstrap style for this component + const bootstrapLink = document.createElement('link') + bootstrapLink.setAttribute('rel', 'stylesheet') + bootstrapLink.setAttribute('integrity', 'sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH') + bootstrapLink.setAttribute('crossorigin', 'anonymous') + bootstrapLink.setAttribute('href', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css') + + // Custom style CSS for this component + const style = document.createElement('style') + style.textContent = ` + nav { + background-color: rgb(49, 49, 49); + color: white; + width: 250px; + height: 100%; + } + + #user-photo-profile { + border-radius: 50%; + width: 3rem; + margin-bottom: 1rem; + } + + + .nav-option-icon { + width: 2rem; + } + ` + + // Attach Bootstrap and custom CSS to the component + shadow.append(bootstrapLink) + shadow.append(style) + } +} + +// Register component to valid HTML element +customElements.define('owner-sidebar', OwnerSidebar) \ No newline at end of file diff --git a/frontend/index.html b/frontend/index.html new file mode 100644 index 0000000..44a9534 --- /dev/null +++ b/frontend/index.html @@ -0,0 +1,74 @@ + + + + + + + Ngekost Aja! + + + + + + + + + + + +
+
+ +
+ +
+
+ + + + + + + + + \ No newline at end of file diff --git a/frontend/pages/login.html b/frontend/pages/login.html new file mode 100644 index 0000000..d871f25 --- /dev/null +++ b/frontend/pages/login.html @@ -0,0 +1,48 @@ + + + + + + + Ngekost Aja + + + + + + + + +
+
+
+ Logo Ngekost Aja! +
+

Login

+
+ + +
+
+ + +
+
+ Lupa password ? +
+ +
+
+ + + + + + \ No newline at end of file diff --git a/frontend/pages/owner/dashboard.html b/frontend/pages/owner/dashboard.html new file mode 100644 index 0000000..5d7901d --- /dev/null +++ b/frontend/pages/owner/dashboard.html @@ -0,0 +1,128 @@ + + + + + + + Ngekost Aja! + + + + + + + + + + + +
+
+ + + + + Tambah Aset Kost + +
+ +
+ +
+

Aset kost yang anda miliki saat ini

+
+ +
+
+ +
Kos Warna Warni
+
12 sewa
+
32 tersisa
+
+ Foto kos +
+ +
+
+
Kos Gunawan
+
57 sewa
+
12 tersisa
+
+ Foto kos +
+
+
+
Kos Putihan
+
16 sewa
+
8 tersisa
+
+ Foto kos +
+
+
+
Kos Mewah Handayani
+
45 sewa
+
34 tersisa
+
+ Foto kos +
+
+
+
Kos Rangga
+
34 sewa
+
12 tersisa
+
+ Foto kos +
+
+
+
Kos Melati
+
23 sewa
+
12 tersisa
+
+ Foto kos +
+
+
+
Kos Kenangan
+
34 sewa
+
12 tersisa
+
+ Foto kos +
+
+
+
Kos Cempaka
+
34 sewa
+
10 tersisa
+
+ Foto kos +
+
+
+
Kos Mawar
+
34 sewa
+
9 tersisa
+
+ Foto kos +
+
+
+
+ + + + + + + + \ No newline at end of file diff --git a/frontend/pages/owner/detail-aset-kost.html b/frontend/pages/owner/detail-aset-kost.html new file mode 100644 index 0000000..cc32f3f --- /dev/null +++ b/frontend/pages/owner/detail-aset-kost.html @@ -0,0 +1,141 @@ + + + + + + + Ngekost Aja! + + + + + + + + + + + +
+
+ + + + + Tambah Ruang + +
+ +
+ +
+

Kos Warna Warni

+
+ Pengelola: Budi Artanto + +
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
No.NamaStatusRiwayat Penggunaan
1Dahlia 1 +
Digunakan
+ 		+ + Lihat + + + + + +
2Dahlia 2 +
Tidak Disewakan
+ 		+ Lihat + + + + +
3Dahlia 3 +
Tidak Digunakan
+ 		+ Lihat + + + + +
4Dahlia 4 +
Tidak Digunakan
+ 		+ Lihat + + + + +
5Dahlia 5 +
Digunakan
+ 		+ Lihat + + + + +
+
+
+ + + + + + + \ No newline at end of file diff --git a/frontend/pages/owner/pengelola.html b/frontend/pages/owner/pengelola.html new file mode 100644 index 0000000..86a2553 --- /dev/null +++ b/frontend/pages/owner/pengelola.html @@ -0,0 +1,107 @@ + + + + + + + Ngekost Aja! + + + + + + + + + + + + +
+
+ + + + + Tambah Pengelola + +
+ +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
No.NamaNomor HPAset
1Budi Setiawan + 011222333444 + + + + + + Kost Warna Warni
2Budi Herlangga + 0123412341234 + + + + + + Kost Gunawan, Kost Putihan, Kost Rnagga
3Aji Budi Bagaskara + 01212121212 + + + + + + Kost Melati, Kost Kenanga, Kost Cempaka
+
+
+ + + + + + + \ No newline at end of file diff --git a/frontend/pages/owner/statistics-room-kost.html b/frontend/pages/owner/statistics-room-kost.html new file mode 100644 index 0000000..02988d5 --- /dev/null +++ b/frontend/pages/owner/statistics-room-kost.html @@ -0,0 +1,67 @@ + + + + + + + Ngekost Aja! + + + + + + + + + + + +
+
+

Riwayat penggunaan ruang pada Dahlia 1

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
No.Tanggal MulaiTanggal BerakhirKeterangan
112-05-202412-12-2024Disewakan selama satu semester
208-01-202310-05-2024Disewakan selama satu tahun dengan tambahan kontrak 1 semester
324-11-202231-12-2022Disewakan singkat dalam waktu satu bulan.
+
+ + + + + + + \ No newline at end of file diff --git a/frontend/pages/owner/tambah-aset.html b/frontend/pages/owner/tambah-aset.html new file mode 100644 index 0000000..7f2b668 --- /dev/null +++ b/frontend/pages/owner/tambah-aset.html @@ -0,0 +1,186 @@ + + + + + + + Ngekost Aja! + + + + + + + + + + + +
+
+ + + + + + + + + +
+ +
+
+
+
+ Foto kamar kost +
+
+

Dahlia 1

+
+
+
+
+ Foto kamar kost +
+
+

Dahlia 2

+
+
+
+
+ Foto kamar kost +
+
+

Dahlia 3

+
+
+
+
+ Foto kamar kost +
+
+

Dahlia 4

+
+
+
+
+ Foto kamar kost +
+
+

Dahlia 5

+
+
+
+
+
+
+ Foto kamar kost +
+
+

Dahlia 1

+
+
+
+
+ Foto kamar kost +
+
+

Dahlia 2

+
+
+
+
+ Foto kamar kost +
+
+

Dahlia 3

+
+
+
+
+ Foto kamar kost +
+
+

Dahlia 4

+
+
+
+
+ Foto kamar kost +
+
+

Dahlia 5

+
+
+
+
+
+
+ Foto kamar kost +
+
+

Dahlia 1

+
+
+
+
+ Foto kamar kost +
+
+

Dahlia 2

+
+
+
+
+ Foto kamar kost +
+
+

Dahlia 3

+
+
+
+
+ Foto kamar kost +
+
+

Dahlia 4

+
+
+
+
+ Foto kamar kost +
+
+

Dahlia 5

+
+
+
+
+ +
+
+ 7/15 terisi + +
+
+
+
+ + + + + + + \ No newline at end of file diff --git a/frontend/pages/owner/tambah-pengelola.html b/frontend/pages/owner/tambah-pengelola.html new file mode 100644 index 0000000..2f71698 --- /dev/null +++ b/frontend/pages/owner/tambah-pengelola.html @@ -0,0 +1,46 @@ + + + + + + + Ngekost Aja! + + + + + + + + + + + +
+

Tambah pengelola baru

+
+ + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/frontend/pages/owner/tambah-ruang.html b/frontend/pages/owner/tambah-ruang.html new file mode 100644 index 0000000..702313e --- /dev/null +++ b/frontend/pages/owner/tambah-ruang.html @@ -0,0 +1,46 @@ + + + + + + + Ngekost Aja! + + + + + + + + + + + +
+
+ + + + + + +
+ +
+
+
+ + + + + + + + \ No newline at end of file diff --git a/frontend/pages/renter/detail-kos.html b/frontend/pages/renter/detail-kos.html new file mode 100644 index 0000000..541039a --- /dev/null +++ b/frontend/pages/renter/detail-kos.html @@ -0,0 +1,190 @@ + + + + + + + Ngekost Aja! + + + + + + + + + + + +
+
+
+ Foto rumah kost tampak depan +
+
+
+ Foto kos lainnya +
+
+ Foto kos lainnya +
+
+
+ +
+
+
+
Kost Graha Indah Jalan Bandung
+
Kecamatan Lowokwaru, Kota Malang
+
+

Spesifikasi Kamar

+
    +
  • 4 x 5 meter
    • +
  • Rumah bertingkat
    • +
+
+
+

Fasilitas

+
    +
  • Wi-Fi
    • +
  • Listrik
    • +
  • Kamar mandi dalam
    • +
  • AC
    • +
  • Parkir motor
    • +
+
+
+
+ +
+
+
Rp 850.000/bulan
+ + +
+
+
+ +
+

Rekomendasi Kost Lainnya

+
+
+
+ photo1 +
+

Kost Melati Indah

+

Rp 765.000/bulan

+

Kecamatan Blimbing, Kota Malang

+
+ + + +
4.6 | 34 sewa
+
+
+
+
+
+
+ ... +
+

Kost Andalas

+

Rp 810.000/bulan

+

Kecamatan Blimbing, Kota Malang

+
+ + + +
4.3 | 67 sewa
+
+
+
+
+
+
+ ... +
+

Kost Flamboyan

+

Rp 2.120.000/bulan

+

Kecamatan Blimbing, Kota Malang

+
+ + + +
4.6 | 18 sewa
+
+
+
+
+
+
+ ... +
+

Kost Puri Asri

+

Rp 1.100.000/bulan

+

Kecamatan Blimbing, Kota Malang

+
+ + + +
4.9 | 5 sewa
+
+
+
+
+
+
+ ... +
+

Kost Dahlia

+

Rp 780.000/bulan

+

Kecamatan Blimbing, Kota Malang

+
+ + + +
3.8 | 23 sewa
+
+
+
+
+
+
+
+ + + + + + + + + \ No newline at end of file diff --git a/frontend/pages/renter/pengajuan.html b/frontend/pages/renter/pengajuan.html new file mode 100644 index 0000000..fc103b0 --- /dev/null +++ b/frontend/pages/renter/pengajuan.html @@ -0,0 +1,195 @@ + + + + + + + Ngekost Aja! + + + + + + + + + + + +
+
+
+
+
+ + + + +
+
+
+
+
+ Data diri anda + + + + + + + + + + + + + +
+ + +

*Pastikan data diri anda sesuai sebelum konfirmasi + pengajuan ngekost

+
+ +
+ Rincian Ngekost + + + +
+ + +
+ + + + +
+
+
+
+
+
+ Kost thumbnail +
+
+

Kost Graha Indah Jalan Bandung

+

Biaya sewa: Rp 850.000/bulan

+
+
+
+
+ +
+

Aturan Ngekost!

+

Sebelum melangkah lebih lanjut, perhatikan beberapa peraturan ngekost berikut sesuai dari arahan + pemilik kost. Jadilah penghuni yang taat aturan kost agar hidup tenteram!

+
Apa saja yang boleh:
+
    +
  • Boleh membawa kendaraan pribadi (motor dan mobil).
    • +
  • Sesama penghuni kost boleh menggunakan fasilitas bersama. Misal: dapur, kamar mandi, dan + mushola.
    • +
+ +
Apa saja yang tidak boleh:
+
    +
  • Tidak boleh membawa barang elektronik tambahan! Jika ketahuan akan dikenakan denda.
    • +
  • Tidak boleh membawa hewan peliharaan apapun!
    • +
  • Tidak diperkenankan membawa orang lain untuk menginap!
    • +
  • Tidak boleh menganggu keamanan dan kenyamanan sesama penghuni kost!
    • +
+
+ +
+

Proses pengajuan ke pemilik kos

+

Status: + +

+
Belum diproses
+ +

+

Klik tombol berikut untuk memroses pengajuan huni kost

+ +

+
Perhatian!
+

Jika dalam 2x24 jam tidak ada respon dari pemilik kost, maka pengajuan akan otomatis dibatalkan +

+
+ +
+

Pembayaran DP kost

+

Pilih metode pembayaran

+
+ + + + + +
+
+
+
+ + +
+
+
+ + + + + + + \ No newline at end of file diff --git a/frontend/pages/renter/profil.html b/frontend/pages/renter/profil.html new file mode 100644 index 0000000..f328da1 --- /dev/null +++ b/frontend/pages/renter/profil.html @@ -0,0 +1,142 @@ + + + + + + + Ngekost Aja! + + + + + + + + + + + +
+ + +
+
+
+ +
+ +
+

Tagihan yang harus anda bayar

+
+ + + + + + + + + + + + + + + + + +
NominalTenggat waktuKeteranganAksi
Rp 780.000,-25 hari lagiCicilan + + +
+ + Perpanjang kontrak + +
+ +

+ +

Riwayat tagihan

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NominalTanggalKeterangan
Rp 780.000,-2 Feb 2024Cicilan
Rp 780.000,-5 Jan 2024Cicilan
Rp 780.000,-1 Des 2024Cicilan
Rp 780.000,-6 Nov 2024Cicilan
+
+
+
+
+
+ + + + + + + \ No newline at end of file diff --git a/frontend/pages/renter/search.html b/frontend/pages/renter/search.html new file mode 100644 index 0000000..c9d6f43 --- /dev/null +++ b/frontend/pages/renter/search.html @@ -0,0 +1,141 @@ + + + + + + + Ngekost Aja! + + + + + + + + + + + +
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + + + + + \ No newline at end of file diff --git a/frontend/pages/signup.html b/frontend/pages/signup.html new file mode 100644 index 0000000..56d448f --- /dev/null +++ b/frontend/pages/signup.html @@ -0,0 +1,55 @@ + + + + + + + Ngekost Aja! + + + + + + + + +
+
+
+ Logo Ngekost Aja! +
+

Sign Up

+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+

Sudah punya akun ?Log in

+
+
+ + + + + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..44a9534 --- /dev/null +++ b/index.html @@ -0,0 +1,74 @@ + + + + + + + Ngekost Aja! + + + + + + + + + + + +
+
+ +
+ +
+
+ + + + + + + + + \ No newline at end of file