+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/public/modify/modify.js b/public/modify/modify.js
new file mode 100644
index 00000000..1a12418d
--- /dev/null
+++ b/public/modify/modify.js
@@ -0,0 +1,130 @@
+window.onload = function() {
+ let fizzyText = new FizzyText('Modify Profile')
+}
+
+document.getElementById('cancel-btn').onclick = function(e) {
+ location.href = '../table/table.html'
+ e.preventDefault()
+ return false
+}
+
+document.getElementById('delete-btn').onclick = function(e) {
+ swal({
+ title: "Are you sure?",
+ text: "Once deleted, you will not be able to recover your account!",
+ icon: "warning",
+ buttons: true,
+ dangerMode: true,
+ }).then((willDelete) => {
+ if (willDelete) {
+ swal("Goodbye!", {
+ icon: "success",
+ }).then(() => {
+ fetch('/delete', {
+ method: 'POST'
+ }).then(function(response) {
+ console.log("Post sent to server: " + response)
+ location.href = '../index.html'
+ })
+ })
+ } else swal("Great!")
+ })
+ e.preventDefault()
+ return false
+}
+
+fetch('/getYou', {
+ method: 'GET',
+ headers: { 'Content-Type': 'application/json' }
+}).then(function(response) {
+ return response.json()
+}).then(function(you) {
+ const name = document.querySelector('#input-nickname')
+ const age = document.querySelector('#input-age')
+ const whatsUp = document.querySelector('#input-whatsup')
+ const genderS = document.getElementsByName('customRadio')
+ const hobbyS = document.getElementById('select-hobby')
+ const salary = document.querySelector('#input-salary')
+ const loc = document.querySelector('#input-location')
+ const selfIntro = document.querySelector('#input-selfintro')
+ const img = document.querySelector('img')
+
+ name.defaultValue = you.name
+ age.defaultValue = you.age
+ if (you.whatsUp) whatsUp.defaultValue = you.whatsUp
+ for (let i = 0; i < genderS.length; i++) {
+ if (genderS[i].value === you.gender) {
+ genderS[i].checked = true
+ break
+ }
+ }
+ for (let j = 0; j < hobbyS.options.length; j++) {
+ if (hobbyS.options[j].value === you.hobby) {
+ hobbyS.selectedIndex = j
+ break
+ }
+ }
+ if (you.salary) salary.defaultValue = you.salary
+ if (you.location) loc.defaultValue = you.location
+ if (you.selfIntro) selfIntro.defaultValue = you.selfIntro
+
+ let imgSrc
+ const previewContainer = document.getElementById('imagePreview')
+ const previewImage = previewContainer.querySelector('.image-preview__image')
+ const previewDefaultText = previewContainer.querySelector('.image-preview__default-text')
+ if (you.pic) {
+ previewDefaultText.style.display = 'none'
+ previewImage.style.display = 'block'
+ imgSrc = you.pic
+ previewImage.setAttribute('src', you.pic)
+ }
+ document.getElementById('inpFile').addEventListener('change', function(e) {
+ const file = this.files[0]
+ if (file) {
+ const reader = new FileReader()
+ previewDefaultText.style.display = 'none'
+ previewImage.style.display = 'block'
+ reader.addEventListener('load', function() {
+ imgSrc = this.result
+ previewImage.setAttribute('src', this.result)
+ })
+ reader.readAsDataURL(file)
+ } else {
+ previewDefaultText.style.display = null
+ previewImage.style.display = null
+ previewImage.setAttribute('src', '')
+ }
+ e.preventDefault()
+ return false
+ })
+
+ document.getElementById('update-btn').onclick = function(e) {
+ let gender
+ for (let i = 0; i < genderS.length; i++) {
+ if (genderS[i].checked) gender = genderS[i].value
+ }
+ let hobby = hobbyS.options[hobbyS.selectedIndex].value
+ const json = {
+ name: name.value,
+ age: parseInt(age.value),
+ whatsUp: whatsUp.value,
+ gender: gender,
+ hobby: hobby,
+ pic: imgSrc,
+ salary: salary.value,
+ location: loc.value,
+ selfIntro: selfIntro.value
+ }
+ fetch(`/updateInfo`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(json)
+ }).then(function(response) {
+ swal(`Hello ${name.value}!`, `You have successfully updated your profile!`, "success")
+ .then(() => location.href = '../profile/profile.html')
+ console.log("Post sent to server: " + response);
+ })
+ e.preventDefault()
+ return false
+ }
+})
\ No newline at end of file
diff --git a/public/profile/profile.css b/public/profile/profile.css
new file mode 100644
index 00000000..b8245d44
--- /dev/null
+++ b/public/profile/profile.css
@@ -0,0 +1,196 @@
+#background {
+ /* BOX MODEL */
+ width: 100%;
+ height: 450px;
+ /* ENHANCEMENT */
+ background-image: url('/img/bg.jpg');
+ background-position: center center;
+ background-size: cover;
+ background-repeat: no-repeat;
+ mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
+ -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
+ z-index: -1;
+ position: relative;
+}
+
+#namebox {
+ width: 400px;
+ height: 50px;
+ background: black;
+ color: white;
+ margin: 0 auto;
+ text-align: center;
+ font-size: 24pt;
+ margin-bottom: 20px;
+}
+
+#handwritten {
+ margin: 0 auto;
+ width: 500px;
+ text-align: center;
+ font-style: bold;
+ font-size: 18pt;
+ font-family: 'Great Vibes', cursive;
+ margin-bottom: 100px;
+}
+
+body {
+ font-family: 'Montserrat', sans-serif;
+ background: #eeeeee;
+}
+
+.content {
+ margin: -220px 5% 100px;
+}
+
+.to-top {
+ position: fixed;
+ bottom: 90px;
+ right: 20px;
+}
+
+.center-block {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+#footer {
+ display: flex;
+ justify-content: space-around;
+ background-color: #3c3d41;
+ color: #fff;
+ padding-top: 20px;
+ padding-bottom: 10px;
+}
+
+#footer a {
+ color: #d2d1d1c0;
+ text-decoration: none;
+}
+
+#footer a:hover {
+ color: #fff;
+}
+
+nav .btn {
+ margin-left: 10px;
+}
+
+#profile-box {
+ margin: 0 auto;
+ /* margin-top: 5%; */
+ width: 90%;
+ border-radius: 25px;
+ background: rgba(255, 255, 255, 0.9);
+ padding: 40px;
+ box-shadow: 0px 0px 20px #aaaaaa;
+}
+
+#avatar {
+ position: absolute;
+ width: 200px;
+ height: 200px;
+ /* background-image: url('/img/avatar.png'); */
+ background-position: center center;
+ background-size: 200px;
+ border-radius: 20px;
+ box-shadow: 0px 0px 15px black;
+ background-color: white;
+ margin-left: 100px;
+ margin-top: -120px;
+}
+
+#personal-msg {
+ font-style: bold;
+ font-size: 20pt;
+ font-family: 'Nothing You Could Do', cursive;
+ margin-left: 380px;
+}
+
+#name {
+ position: absolute;
+ font-family: 'Lato', sans-serif;
+ font-size: 24pt;
+ margin-left: 380px;
+ margin-top: -100px;
+}
+
+#profile {
+ font-size: 20px;
+ padding: 40px;
+}
+
+#profile>div {
+ margin-top: 20px;
+}
+
+#profile h2 {
+ margin-top: 20px;
+ border-bottom: solid 1px #3c3d41;
+ display: flex;
+ justify-content: space-between;
+}
+
+#stats {
+ padding: 0px 100px;
+ display: flex;
+ justify-content: space-around;
+}
+
+#basic-info {
+ padding: 0px 100px;
+}
+
+.toast {
+ margin: 0 auto;
+ max-width: 500px;
+}
+
+.toast img {
+ width: 40px;
+ height: 40px;
+}
+
+
+/* Font Awesome Icon */
+
+#edit-info {
+ color: #5b5b5e;
+}
+
+/* #edit-info:hover {
+ color: black;
+} */
+
+#comment-ico {
+ color: #5b5b5e;
+}
+
+/* #comment-ico:hover {
+ color: black;
+} */
+
+#like-ico {
+ color: rgb(255, 67, 67);
+}
+
+#like-ico:hover {
+ color: rgb(255, 0, 0);
+}
+
+#up-ico {
+ color: rgb(83, 143, 255)
+}
+
+#up-ico:hover {
+ color: rgb(0, 102, 255);
+}
+
+#down-ico {
+ color: rgb(255, 175, 83)
+}
+
+#down-ico:hover {
+ color: rgb(255, 145, 0);
+}
\ No newline at end of file
diff --git a/public/profile/profile.html b/public/profile/profile.html
new file mode 100644
index 00000000..cd7e0a13
--- /dev/null
+++ b/public/profile/profile.html
@@ -0,0 +1,163 @@
+
+
+
+
+ 
+ 
+ Happy Pengu
+ Leave a comment now
+ 
+ Dab pengu
+ 11 mins ago
+