Upload 27 files

.gitattributes

@@ -1,28 +1,3 @@
-*.7z filter=lfs diff=lfs merge=lfs -text
-*.arrow filter=lfs diff=lfs merge=lfs -text
-*.bin filter=lfs diff=lfs merge=lfs -text
-*.bin.* filter=lfs diff=lfs merge=lfs -text
-*.bz2 filter=lfs diff=lfs merge=lfs -text
-*.ftz filter=lfs diff=lfs merge=lfs -text
-*.gz filter=lfs diff=lfs merge=lfs -text
-*.h5 filter=lfs diff=lfs merge=lfs -text
-*.joblib filter=lfs diff=lfs merge=lfs -text
-*.lfs.* filter=lfs diff=lfs merge=lfs -text
-*.model filter=lfs diff=lfs merge=lfs -text
-*.msgpack filter=lfs diff=lfs merge=lfs -text
-*.onnx filter=lfs diff=lfs merge=lfs -text
-*.ot filter=lfs diff=lfs merge=lfs -text
-*.parquet filter=lfs diff=lfs merge=lfs -text
-*.pb filter=lfs diff=lfs merge=lfs -text
-*.pt filter=lfs diff=lfs merge=lfs -text
-*.pth filter=lfs diff=lfs merge=lfs -text
-*.rar filter=lfs diff=lfs merge=lfs -text
-saved_model/**/* filter=lfs diff=lfs merge=lfs -text
-*.tar.* filter=lfs diff=lfs merge=lfs -text
-*.tflite filter=lfs diff=lfs merge=lfs -text
-*.tgz filter=lfs diff=lfs merge=lfs -text
-*.wasm filter=lfs diff=lfs merge=lfs -text
-*.xz filter=lfs diff=lfs merge=lfs -text
-*.zip filter=lfs diff=lfs merge=lfs -text
-*.zstandard filter=lfs diff=lfs merge=lfs -text
-*tfevents* filter=lfs diff=lfs merge=lfs -text
+# Auto detect text files and perform LF normalization
+* text=auto
+static/users/uploaded_images/410068c0-edce-4542-8f97-9d0d1cbb1d1cIMG_20240116_124952corpdp.jpg filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,2 @@
+instance
+later

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 ItzSimplyJoe
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

readme.md

@@ -0,0 +1,70 @@
+# Flask Social Media App
+
+[![Repo Size](https://img.shields.io/github/repo-size/ItzSimplyJoe/Social-Media-App)]()
+[![Code Size](https://img.shields.io/github/languages/code-size/ItzSimplyJoe/Social-Media-App)]()
+[![GitHub Last Commit](https://img.shields.io/github/last-commit/ItzSimplyJoe/Social-Media-App)]()
+[![GitHub Issues](https://img.shields.io/github/issues/ItzSimplyJoe/Social-Media-App)]()
+
+
+## Information
+A simple social media app called Simplz made with Flask, HTML, CSS and JS.
+
+## Installation
+If you want to run the program and change it for yourself then
+- `git clone https://github.com/ItzSimplyJoe/Social-Media-App.git`
+- `cd social_network`
+- `pip install -r requirements.txt`
+- `python app.py`
+<div align="center">
+
+## What it can do
+### Register Page
+<p>Create an Account with the easy-to-follow and easy-to-understand Register Page</p>
+<img src="Images_for_Github/register.png" width=640 height=360>
+
+### Login Page
+<p>Log into your account with the Login Page</p>
+<img src="Images_for_Github/login.png" width=640 height=360>
+
+### Home Page
+<p>See all the posts from the people you follow on the Home Page</p>
+<p>Here you can also create your own posts by clicking the + button in the bottom right corner</p>
+<img src="Images_for_Github/index.png" width=640 height=360>
+
+### Account Settings Page
+<p>Change your account settings on the Account Settings Page</p>
+<img src="Images_for_Github/account.png" width=640 height=360>
+
+### Messages Page
+<p>Send messages to other users on the Messages Page</p>
+<img src="Images_for_Github/Conversations.png" width=640 height=360>
+<img src="Images_for_Github/conversation.png" width=640 height=360>
+<img src="Images_for_Github/new_conversation.png" width=640 height=360>
+
+### Search For other Users Page
+<p>Search for other users on the Search Page</p>
+<img src="Images_for_Github/User_search.png" width=640 height=360>
+<img src="Images_for_Github/profile.png" width=640 height=360>
+</div>
+
+## License
+[MIT](https://choosealicense.com/licenses/mit/)
+
+## Contact
+If you want to contact me you can reach me at [my email](mailto:joebostock30@gmail.com) or [my website](https://www.itzsimplyjoe.me).
+
+## Contributing
+If you want to contribute to this project you can by making a Pull Request.
+
+## Acknowledgements
+- [Python](https://www.python.org/)
+- [Flask](https://flask.palletsprojects.com/en/2.0.x/)
+- [SQLAlchemy](https://www.sqlalchemy.org/)
+- [Flask Login](https://flask-login.readthedocs.io/en/latest/)
+- [Flask WTF](https://flask-wtf.readthedocs.io/en/0.15.x/)
+- [Flask Migrate](https://flask-migrate.readthedocs.io/en/latest/)
+- [Bootstrap](https://getbootstrap.com/)
+- [Font Awesome](https://fontawesome.com/)
+- [JQuery](https://jquery.com/)
+- [Popper.js](https://popper.js.org/)
+- [werkzeug](https://werkzeug.palletsprojects.com/en/2.0.x/)

static/css/style.css

@@ -0,0 +1,1319 @@
+*{
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-family: 'Poppins', sans-serif;
+}
+html{
+  scroll-behavior: smooth;
+  background-color: #131313;
+  overflow-x: hidden;
+}
+.contents {
+  background-color: #131313;
+  height: 100%;
+}
+.stick{
+  position: sticky;
+  top: 0;
+  z-index: 999;
+}
+.page{
+  background-color: #131313;
+}
+
+
+
+.post-interactions {
+    font-size: 22px;
+    margin-left: 10px;
+}
+/* ---------------------------------------- nav bar ----------------------------------------*/
+.navbar{
+  background: #131313;
+  height: 80px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 1.2rem;
+  position: sticky;
+  top:0;
+  z-index: 999;
+}
+
+.navbar__container {
+  display: flex;
+  justify-content: space-between;
+  height: 80px;
+  z-index: 1;
+  width: 100%;
+  max-width: 1800px;
+  margin: 0 auto;
+  padding: 0 50px;
+}
+
+#navbar__logo {
+  background-image: linear-gradient(to right, #7700ff 30%, #001eff 100%);
+  background-size: 100%;
+  -webkit-background-clip: text;
+  -moz-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  -moz-text-fill-color: transparent;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  text-decoration: none;
+  font-size: 2rem;
+  font-weight: 800;
+}
+
+.logo {
+  margin-right: 2rem;
+}
+
+.navbar__menu{
+  display: flex;
+  align-items: center;
+  list-style: none;
+  text-align: center;
+}
+
+.navbar__item{
+  height: 80px;
+}
+
+.navbar__links{
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  padding: 0 1rem;
+  height: 100%;
+  transition: all 0.5s ease;
+}
+
+.navbar__links:hover{
+  background-image: linear-gradient(to right, #7700ff 30%, #001eff 100%);
+  background-size: 100%;
+  -webkit-background-clip: text;
+  -moz-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  -moz-text-fill-color: transparent;
+  text-decoration: none;
+}
+
+@media screen and (max-width:960px){
+  .navbar__container{
+      display: flex;
+      justify-content: space-between;
+      height: 80px;
+      z-index: 1;
+      width: 100%;
+      max-width: 1300px;
+      padding: 0;
+  }
+  .navbar__menu{
+      display: grid;
+      grid-template-columns: auto;
+      margin: 0;
+      width: 100%;
+      position: absolute;
+      top: -1000px;
+      left: 0;
+      opacity: 0;
+      transition: all 0.5s ease;
+      height: 50vh;
+      z-index: -1;
+      background: #131313;
+  }
+  .navbar__menu.active{
+      background: #131313;
+      top: 80px;
+      opacity: 1;
+      transition: all 0.5s ease;
+      z-index: 10000;
+      height: 50vh;
+      font-size: 1.6rem;
+  }
+  #navbar__logo{
+      padding-left: 25px;
+  }
+  .navbar__toggle .bar:nth-child(1){
+      width: 25px;
+      height: 3px;
+      margin: 5px auto;
+      transition: all 0.3s ease-in-out;
+      background: #fff;
+  }
+  .navbar__toggle .bar:nth-child(2){
+      width: 23px;
+      height: 3px;
+      margin: 5px auto;
+      transition: all 0.3s ease-in-out;
+      background: #fff;
+  }
+  .navbar__toggle .bar:nth-child(3){
+      width: 20px;
+      height: 3px;
+      margin: 5px auto;
+      transition: all 0.3s ease-in-out;
+      background: #fff;
+  }
+  
+  .navbar__item{
+      width: 100%;
+  }
+  .navbar__links{
+      text-align: center;
+      padding: 2rem;
+      width: 100%;
+      display: table;
+  }
+  
+  #mobile-menu{
+      position: absolute;
+      top: 20%;
+      right: 5%;
+      transform: translate(5%, 20%);
+  }
+  .navbar__toggle .bar{
+      display: block;
+      cursor: pointer;
+      background-color: #fff;
+  }
+
+  #mobile-menu.is-active .bar:nth-child(2){
+      opacity: 0;
+  }
+  #mobile-menu.is-active .bar:nth-child(1){
+      transform: translateY(8px) rotate(45deg);
+      background-color: #7700ff;
+      width: 25px;
+
+  }
+  #mobile-menu.is-active .bar:nth-child(3){
+      transform: translateY(-8px) rotate(-45deg);
+      background-color: #7700ff;
+      width: 25px;
+  }
+}
+/* ---------------------------------------- Search Bar ----------------------------------------*/
+
+header{
+  background-color: #131313;
+  height: 50px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 1.2rem;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+header form{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+header form input{
+  width: 50%;
+  height: 40px;
+  border: none;
+  border-radius: 5px 0 0 5px;
+  padding: 0 10px;
+  font-size: 1rem;
+}
+
+header form button{
+  width: 10%;
+  height: 40px;
+  border: none;
+  border-radius: 0 5px 5px 0;
+  background-color: #7700ff;
+  color: #fff;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: all 0.5s ease;
+  text-decoration: none;
+}
+
+header form button:hover{
+  background-color: #9e4bfd;
+}
+
+/* ---------------------------------------- Posts ----------------------------------------*/
+.post {
+  position: unset;
+  width: 80%;
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 20px;
+  background-color: #242424;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  max-height: 500px;
+  border-radius: 15px;
+  margin-top: 10px;
+}
+
+.post-info {
+  float: right;
+  font-size: 12px;
+  color: #606060;
+  margin-left: 10px;
+}
+.top{
+  display:flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+.post a{
+  text-decoration: none;
+}
+
+.post-image {
+  /*width: 100%;*/
+  height: auto;
+  /*object-fit: cover;*/
+  border-radius: 15px;
+  margin-bottom: 10px;
+  max-height: 300px;
+  max-width: 100%;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  border: 1px solid #7700ff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: all 0.5s ease;
+}
+
+.post-image:hover {
+  transform: scale(1.01);
+}
+
+.caption {
+  margin-bottom: 10px;
+  color: #fff;
+  font-size: 16px;
+  line-height: 1.5;
+  text-align: justify;
+  text-justify: inter-word;
+  max-height: 100px;
+  position: relative;
+  word-wrap: break-word;
+  overflow: hidden;
+}
+.profile_name{
+  background-image: linear-gradient(to right, #7700ff 30%, #001eff 100%);
+  background-size: 100%;
+  -webkit-background-clip: text;
+  -moz-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  -moz-text-fill-color: transparent;
+  font-size: 16px;
+  line-height: 1.5;
+  text-align: justify;
+  text-justify: inter-word;
+  max-height: 100px;
+  position: relative;
+  overflow: hidden;
+  margin-top: 10px;
+  margin-left: 10px;
+  margin-right: 10px;
+  text-decoration: none;
+}
+.profile_name:hover{
+  text-decoration: none;
+}
+.post_profile_a{
+  text-decoration: none;
+}
+.post_profile_a:hover{
+  text-decoration: none;
+}
+.circle{
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  margin-right: 10px;
+  margin-top: 5px;
+  align-items: center;
+  justify-content: center;
+  float: left;
+  background-color: #7700ff;
+}
+.inner_circle_icon{
+  color: #fff;
+  top: 0;
+  left: 0;
+  transform: translate(50%, 20%);
+}
+.post_profile_picture {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  margin-right: 10px;
+  float: left;
+  margin-top: 5px;
+}
+
+.post-profile-content {
+  display: flex;
+  align-items: center;
+}
+
+.post-profile-content a {
+  display: flex;
+  align-items: center;
+}
+
+.post-interactions {
+  display: flex;
+  justify-content: left;
+  flex-direction: row;
+  align-items: center;
+  margin-top: 10px;
+}
+
+
+
+.heartIcon {
+  color: #fff;
+  cursor: pointer;
+  transition: all 0.5s ease;
+}
+
+.post-comments {
+  color: #fff;
+  cursor: pointer;
+  transition: all 0.5s ease;
+}
+
+.likes {
+  margin-right: 10px;
+  color: #fff;
+}
+
+.liked {
+  color: #7700ff;
+  animation: pulseAnimation 1s;
+  cursor: pointer;
+}
+
+.dropdown {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+}
+
+.dropdown-toggle {
+  cursor: pointer;
+}
+
+.dropdown-menu {
+  background-color: #fff;
+  border-radius: 15px;
+  padding: 5px 0;
+  min-width: 150px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  z-index: 1000;
+}
+
+.dropdown-item {
+  display: block;
+  padding: 10px 15px;
+  color: #333;
+  text-decoration: none;
+  transition: background-color 0.3s;
+}
+
+.dropdown-item:hover {
+  background-color: #f5f5f5;
+}
+
+.fa-ellipsis-vertical {
+  font-size: 1.2rem;
+  color: #888;
+}
+
+
+/* ---------------------------------------- Index ----------------------------------------*/
+.title{
+  font-weight: 800;
+}
+.subtitle{
+  font-weight: 500;
+}
+h1{
+  background-image: linear-gradient(to right, #7700ff 30%, #001eff 100%);
+  background-size: 100%;
+  -webkit-background-clip: text;
+  -moz-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  -moz-text-fill-color: transparent;
+  text-align: center;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  justify-content: center;
+  font-size: 4rem;
+  font-weight: 800;
+  text-decoration: none;
+}
+h2{
+  background-image: linear-gradient(to right, #7700ff 30%, #001eff 100%);
+  background-size: 100%;
+  -webkit-background-clip: text;
+  -moz-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  -moz-text-fill-color: transparent;
+  text-align: center;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  justify-content: center;
+  font-size: 30px;
+  font-weight: 500;
+  text-decoration: none;
+}
+.newpost-button{
+  border-radius: 50%;
+  background-color: #7700ff;
+  width: 50px;
+  height: 50px;
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  cursor: pointer;
+  transition: all 0.5s ease;
+  border: 1px solid #7700ff;
+}
+.newpost-button i{
+  color: #fff;
+  font-size: 30px;
+  align-items: center;
+  justify-content: center;
+}
+
+.newpost-button:hover{
+  transform: translateY(-5px);
+}
+/* ---------------------------------------- Login Page ----------------------------------------*/
+.loginpage {
+  max-width: 300px;
+  margin: 0 auto;
+  padding: 20px;
+  border-radius: 15px;
+  background-color: #222;
+}
+
+
+label {
+  display: block;
+  margin-bottom: 5px;
+  color: #fff;
+}
+
+.login-input {
+  width: 100%;
+  padding: 10px;
+  margin-bottom: 10px;
+  border: 1px solid #7700ff;
+  border-radius: 15px;
+  background-color: #333;
+  color: #fff;
+}
+
+.login-button {
+  width: 100%;
+  padding: 10px;
+  background-color: #7700ff;
+  color: #fff;
+  border: none;
+  border-radius: 15px;
+  cursor: pointer;
+}
+
+.login-button:hover {
+  background-color: #4400aa;
+}
+
+.form-button {
+  width: 20px;
+  text-align: center;
+  color: #7700ff;
+}
+/* ---------------------------------------- Register Page ----------------------------------------*/
+
+.registerpage {
+  max-width: 300px;
+  margin: 0 auto;
+  padding: 20px;
+  border-radius: 15px;
+  background-color: #222;
+}
+
+.register-input {
+  width: 100%;
+  padding: 10px;
+  margin-bottom: 10px;
+  border: 1px solid #7700ff;
+  border-radius: 15px;
+  background-color: #333;
+  color: #fff;
+}
+
+.register-button {
+  width: 100%;
+  padding: 10px;
+  background-color: #7700ff;
+  color: #fff;
+  border: none;
+  border-radius: 15px;
+  cursor: pointer;
+}
+
+.register-button:hover {
+  background-color: #4400aa;
+}
+
+/* ---------------------------------------- Account Page ----------------------------------------*/
+.account-form {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+  border-radius: 15px;
+  background-color: #222;
+  color: #fff;
+}
+
+.form-column {
+  flex: 1;
+  padding-right: 20px;
+}
+
+.account-input {
+  width: 100%;
+  padding: 10px;
+  margin-bottom: 10px;
+  border: 1px solid #7700ff;
+  border-radius: 15px;
+  background-color: #333; 
+  color: #fff;
+}
+
+.account-buttons {
+  width: 100%;
+  padding: 10px;
+  margin-bottom: 10px;
+  color: #fff;
+  border: none;
+  border-radius: 15px;
+  background-color: #7700ff;
+  cursor: pointer;
+}
+
+.account-textarea {
+  resize: vertical;
+}
+
+.account-img {
+  max-width: 100px;
+  max-height: 100px;
+  width: 100%;
+  height: 100%;
+  margin-top: 10px;
+  margin-bottom: 20px;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  border-radius: 50%;
+  border: 2px solid #7700ff;
+  background-color: #333;
+  color: #fff;
+}
+
+
+.profile-pics{
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.account-submit {
+  width: 100%;
+  padding: 10px;
+  background-color: #7700ff;
+  color: #fff;
+  border: none;
+  border-radius: 15px;
+  cursor: pointer;
+}
+
+.account-submit:hover {
+  background-color: #4400aa;
+}
+
+.account-form::after {
+  content: "";
+  flex: auto;
+}
+
+.account-form > .form-column:last-child {
+  flex: 1 1 100%;
+}
+/* ---------------------------------------- Flash Messages ----------------------------------------*/
+
+.flash-messages{
+  position: absolute;
+  margin-top: 20px;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  z-index: 1000;
+}
+.flash-message{
+  padding: 10px 20px;
+  border-radius: 15px;
+  margin-bottom: 10px;
+  color: #fff;
+  font-weight: 600;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 300px;
+  background-color: #7700ff;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+}
+/* ---------------------------------------- Search Results ----------------------------------------*/
+.searchresults_ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.searchresults_container {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+  border-radius: 15px;
+  background-color: #222;
+  color: #fff;
+  margin-bottom: 10px;
+}
+
+.searchresults_img {
+  max-width: 100px;
+  max-height: 100px;
+  width: 100%;
+  height: 100%;
+  margin-top: 10px;
+  display: block;
+  margin-right: 10px;
+  border-radius: 50%;
+  border: 2px solid #7700ff;
+  background-color: #333;
+  color: #fff;
+}
+
+.searchresults_h2 {
+  flex: 1;
+}
+
+.searchresults_li {
+  margin-bottom: 10px;
+}
+
+.searchresults_a {
+  display: inline-block;
+  padding: 10px 15px;
+  background-color: #7700ff;
+  color: #fff;
+  text-decoration: none;
+  border-radius: 15px;
+  transition: background-color 0.3s;
+}
+.searchresults_a:hover {
+  background-color: #4400aa;
+  color: #fff;
+  text-decoration: none;
+}
+
+.searchresults_p {
+  margin-bottom: 0;
+  max-width: 75%;
+}
+
+.toprow {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.bottomrow {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.follow_button{
+  display: inline-block;
+  padding: 10px 15px;
+  background-color: #7700ff;
+  color: #fff;
+  text-decoration: none;
+  border-radius: 15px;
+  transition: background-color 0.3s;
+}
+
+.follow_button:hover {
+  background-color: #4400aa;
+  color: #fff;
+  text-decoration: none;
+}
+/* ---------------------------------------- User Profiles ----------------------------------------*/
+.userprofile_container {
+  max-width: 90%;
+  margin: 0 auto;
+  padding: 20px;
+  border-radius: 15px;
+  background-color: #222;
+  color: #fff;
+  margin-bottom: 10px;
+}
+
+.user-profile__rows {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
+.user-profile__left-column {
+  margin-right: 5%;
+  width: 35%;
+  display: flex;
+  flex-direction: column;
+  align-items: right;
+  background: #131313;
+}
+
+.user-profile__right_column {
+  width: 40%;
+}
+
+.user-profile__profile-picture {
+  max-width: 100%;
+  max-height: 100%;
+  width: 250px;
+  height: 250px;
+  margin-top: 10px;
+  border-radius: 50%;
+  border: 2px solid #7700ff;
+  background-color: #131313;
+  color: #131313;
+}
+.user-profile__profile-picture img{
+  background-color: #131313;
+  color: #131313;
+}
+.text-center img{
+  background-color: #131313;
+  color: #131313;
+  border-radius: 50%;
+  height: 50%;
+  width: 50%;
+  border: none;
+}
+
+.user-profile__a,
+.user-profile__follow_button {
+  display: inline-block;
+  padding: 10px 15px;
+  background-color: #7700ff;
+  color: #fff;
+  text-decoration: none;
+  border-radius: 15px;
+  transition: background-color 0.3s;
+  margin-top: 10px;
+}
+
+.user-profile__a:hover,
+.user-profile__follow_button:hover {
+  background-color: #4400aa;
+  color: #fff;
+  text-decoration: none;
+}
+
+.user-profile__p {
+  margin-bottom: 0;
+  max-width: 75%;
+}
+h3{
+  color: #7700ff;
+  background-image: linear-gradient(to right, #7700ff 30%, #001eff 100%);
+  background-size: 100%;
+  -webkit-background-clip: text;
+  -moz-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  -moz-text-fill-color: transparent;
+  text-decoration: none;
+  text-align: center;
+}
+.user-profile__email,
+.user-profile__username,
+.user-profile__name,
+.user-profile__bio,
+.user-profile__profession,
+.user-profile__location {
+  color: #fff;
+}
+
+
+/* ---------------------------------------- Modals ----------------------------------------*/
+
+.modal.fade.dark-modal .modal-content {
+  background-color: #333;
+  color: #fff;
+}
+
+.modal.fade.dark-modal .modal-header {
+  background-color: #555;
+  border-bottom: 1px solid #888;
+}
+
+.modal.fade.dark-modal .modal-title {
+  color: #fff;
+}
+
+.modal.fade.dark-modal .close {
+  color: #fff;
+}
+
+.modal.fade.dark-modal .modal-body {
+  /* Customize modal body styles if needed */
+}
+
+.modal.fade.dark-modal .list-group-item {
+  background-color: #444;
+  border-color: #666;
+  color: #fff;
+}
+
+.modal.fade.dark-modal .list-group-item strong {
+  color: #7700ff;
+}
+
+.modal.fade.dark-modal .modal-footer {
+  background-color: #555;
+  border-top: 1px solid #888;
+}
+
+.modal.fade.dark-modal .form-control {
+  background-color: #555;
+  color: #fff;
+}
+
+.modal.fade.dark-modal .btn-primary {
+  background-color: #7700ff;
+  border-color: #7700ff;
+  transition: all 0.5s ease;
+}
+
+.modal.fade.dark-modal .btn-primary:hover {
+  background-color: #9131ff;
+  border-color: #9131ff;
+}
+
+.modal.fade.dark-modal .modal-body::-webkit-scrollbar {
+  width: 8px;
+}
+
+.modal.fade.dark-modal .modal-body::-webkit-scrollbar-thumb {
+  background-color: #666;
+}
+
+.modal.fade.dark-modal .modal-body::-webkit-scrollbar-thumb:hover {
+  background-color: #888;
+}
+/* ---------------------------------------- Conversations ----------------------------------------*/
+.ablankgap{
+  display: absolute;
+  height: 30px;
+}
+.conversations__container{
+  max-width: 90%;
+  margin: 0 auto;
+  padding: 20px;
+  border-radius: 15px;
+  background-color: #242424;
+  color: #fff;
+  margin-bottom: 10px;
+  height: 400px;
+  margin-top: 30px;
+}
+.conversations__ul {
+  list-style: none;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-gap: 10px;
+  grid-template-rows: 1fr;
+}
+
+.conversations__li {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.conversations__user__box {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  color: #fff;
+  background-color: #333;
+  box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
+  height: 75px;
+  padding: 10px;
+  width: 300px;
+  border-radius: 15px;
+  transition: 0.5s all ease;
+}
+
+.conversations__user__box:hover {
+  background-color: #282828;
+  color: #7700ff;
+  text-decoration: none;
+  
+}
+
+.conversations__user__image {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  margin-right: 10px;
+  object-fit: cover;
+  align-items: center;
+}
+.conversations__name_and_icon{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 90%;
+}
+
+.conversations__username {
+  font-weight: bold;
+  margin-bottom: 0;
+  margin-right: 10px;
+}
+
+.conversations__new {
+  display: flex;
+  justify-content: center;
+}
+
+.conversations__new__button {
+  display: inline-block;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 15px;
+  margin-bottom: 20px;
+  background-color: #7700ff;
+  color: #fff;
+  text-decoration: none;
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.conversations__new__button:hover {
+  background-color: #4400aa;
+  text-decoration: none;
+  color: #fff;
+}
+@media screen and (max-width: 600px) {
+  .conversations__user__box {
+    width: 100%;
+  }
+  .conversations__container{
+    align-items: center;
+    height: 100%;
+  }
+  .conversations__ul{
+    grid-template-columns: 1fr;
+  }
+}
+/* ---------------------------------------- Conversation ----------------------------------------*/
+.conversation__container{
+  max-width: 90%;
+  margin: 0 auto;
+  padding: 20px;
+  border-radius: 15px;
+  background-color: #242424;
+  color: #fff;
+  margin-bottom: 10px;
+  height: 400px;
+  margin-top: 30px;
+}
+.conversation__messages{
+  height: 300px;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  align-items: center;
+}
+.conversation__messages::-webkit-scrollbar {
+  width: 8px;
+}
+.conversation__messages::-webkit-scrollbar-thumb {
+  background-color: #666;
+}
+.conversation__messages::-webkit-scrollbar-thumb:hover {
+  background-color: #888;
+}
+.conversation__message__top__row{
+  margin-left: 30px;
+  display: flex;
+  justify-content: left;
+  width: 100%;
+  margin-bottom: 5px;
+}
+.conversation__message{
+  display: flex;
+  flex-direction: column;
+  margin: auto 30px;
+  border-radius: 15px;
+  align-items: left;
+  margin-bottom: 10px;
+  background-color: #333;
+}
+.conversation__content{
+  margin-left: 30px;
+  margin-right: 30px;
+  margin-bottom: 10px;
+}
+.conversation__message__box{
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  color: #fff;
+  background-color: #333;
+  box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
+  height: 75px;
+  padding: 10px;
+  width: 75%;
+  border-radius: 15px;
+  transition: 0.5s all ease;
+}
+.conversation__send__message{
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  background-color: #242424;
+  gap: 5%;
+}
+.conversation__message__info{
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  margin-left: 20px;
+  opacity: 0.6;
+}
+.conversation__message__button{
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  color: #fff;
+  background-color: #333;
+  box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
+  height: 75px;
+  padding: 10px;
+  width: 300px;
+  border-radius: 15px;
+  transition: 0.5s all ease;
+}
+.conversation__message__button:hover{
+  background-color: #282828;
+  color: #7700ff;
+  text-decoration: none;
+}
+/* ---------------------------------------- New Conversation ----------------------------------------*/
+.new_conversation__form{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-top: 30px;
+}
+.new_conversation__label{
+  margin-bottom: 10px;
+}
+.new_conversation__input{
+  margin-bottom: 10px;
+  padding: 10px;
+  border-radius: 15px;
+  width: 50%;
+  border: none;
+  background-color: #333;
+  color: #fff;
+}
+.new_conversation__textarea{
+  margin-bottom: 10px;
+  padding: 10px;
+  border-radius: 15px;
+  border: none;
+  background-color: #333;
+  color: #fff;
+  resize: none;
+  height: 100px;
+  width: 50%;
+
+}
+.new_conversation__button{
+  display: inline-block;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 15px;
+  margin-bottom: 20px;
+  background-color: #7700ff;
+  color: #fff;
+  text-decoration: none;
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+/* ---------------------------------------- Animations ----------------------------------------*/
+
+.footer{
+  margin-top: 150px;
+  background-color: #242424;
+  color: #fff;
+  padding: 80px 0;
+}
+.footer__container{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  max-width: 1000px;
+  margin: 0 auto;
+}
+.footer__links{
+  width: 100%;
+  max-width: 1000px;
+  display: flex;
+  justify-content: center;
+}
+.footer__link--wrapper{
+  display: flex;
+}
+.footer__link--items{
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin: 16px;
+  text-align: left;
+  width: 160px;
+  box-sizing: border-box;
+}
+.footer__link--items h2{
+  margin-bottom: 16px;
+}
+.footer__link--items > h2{
+  color: #fff;
+}
+.footer__link--items a{
+  color: #fff;
+  text-decoration: none;
+  margin-bottom: 0.5rem;
+}
+.footer__link--items a:hover{
+  color: #7700ff;
+  transition: 0.3s ease-out;
+  text-decoration: none;
+}
+.footer__logo{
+  display: flex;
+  align-items: center;
+  justify-self: flex-start;
+  margin-bottom: 16px;
+}
+.footer__logo > img{
+  margin-right: 10px;
+}
+.social__media{
+  max-width: 1000px;
+  width: 100%;
+}
+.social__media--wrap{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 90%;
+  max-width: 1000px;
+  margin: 40px auto 0 auto;
+}
+.social__logo{
+  color: #fff;
+  justify-self: start;
+  cursor: pointer;
+  text-decoration: none;
+  font-size: 2rem;
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+  font-weight: bold;
+}
+.social__logo > img{
+  margin-right: 10px;
+}
+.website__rights{
+  color: #fff;
+  margin-bottom: 16px;
+}
+.social__icons{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 240px;
+}
+.social__icon--link{
+  color: #fff;
+  font-size: 24px;
+}
+/* ---------------------------------------- Animations ----------------------------------------*/
+
+@keyframes pulseAnimation {
+  0% {
+    transform: scale(1);
+  }
+  25% {
+    transform: scale(1.5);
+  }
+  50% {
+    transform: scale(1);
+  }
+  75% {
+    transform: scale(1.25);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+

static/js/app.js

@@ -0,0 +1,6 @@
+const menu = document.querySelector('#mobile-menu')
+const menuLinks = document.querySelector('.navbar__menu')
+menu.addEventListener('click', function() {
+    menu.classList.toggle('is-active')
+    menuLinks.classList.toggle('active')
+})

static/js/deletePost.js

@@ -0,0 +1,16 @@
+function deletePost(postId) {
+    fetch(`/delete_post/${postId}`, { method: 'POST' })
+      .then((response) => {
+        if (response.ok) {
+          const postElement = document.querySelector(`.post[data-post-id="${postId}"]`);
+          if (postElement) {
+            postElement.remove();
+          }
+        } else {
+          console.error('Error deleting post:', response);
+        }
+      })
+      .catch((error) => {
+        console.error('Error deleting post:', error);
+      });
+  }

static/js/dropdown.js

@@ -0,0 +1,14 @@
+document.addEventListener('click', function (event) {
+    const dropdownToggle = event.target.closest('.dropdown-toggle');
+    if (dropdownToggle) {
+      const dropdownMenu = dropdownToggle.nextElementSibling;
+      if (dropdownMenu) {
+        dropdownMenu.classList.toggle('show');
+      }
+    } else {
+      const dropdownMenus = document.querySelectorAll('.dropdown-menu');
+      dropdownMenus.forEach((menu) => {
+        menu.classList.remove('show');
+      });
+    }
+  });

static/js/likePost.js

@@ -0,0 +1,17 @@
+function likePost(postId) {
+    fetch(`/like_post/${postId}`, { method: 'POST' })
+      .then((response) => response.json())
+      .then((data) => {
+        const likeCountSpan = document.getElementById(`likeCount${postId}`);
+        likeCountSpan.textContent = data.likes_count;
+
+        const heartIcon = document.getElementById(`heartIcon${postId}`);
+        if (data.liked) {
+          heartIcon.classList.add('liked'); 
+          heartIcon.classList.remove('heartIcon');
+        } else {
+          heartIcon.classList.remove('liked');
+          heartIcon.classList.add('heartIcon');
+        }
+      });
+  }

static/js/showComments.js

@@ -0,0 +1,3 @@
+function showComments(postId) {
+    $(`#commentsModal${postId}`).modal('show');
+  }

templates/account.html

@@ -0,0 +1,64 @@
+{% extends "layout.html" %}
+
+{% block content %}
+<h1 class="title">Account</h1>
+  <form class="account-form" action="{{ url_for('account') }}" method="post" enctype="multipart/form-data">
+    <div class="form-column">
+  
+      <label for="username"><i class="fa-solid fa-at form-button"></i> Username:</label>
+      <input class="account-input" type="text" id="username" name="username" value="{{ current_user.username }}" required>
+  
+      <label for="email"><i class="fa-solid fa-envelope form-button"></i>  Email:</label>
+      <input class="account-input" type="email" id="email" name="email" value="{{ current_user.email }}" required>
+  
+      <label for="first_name"><i class="fa-solid fa-signature form-button"></i> First Name:</label>
+      <input class="account-input" type="text" id="first_name" name="first_name" value="{{ current_user.first_name }}">
+  
+      <label for="last_name"><i class="fa-solid fa-signature form-button"></i> Last Name:</label>
+      <input class="account-input" type="text" id="last_name" name="last_name" value="{{ current_user.last_name }}">
+
+      <label for="new_password"><i class="fa-solid fa-lock form-button"> </i>New Password:</label>
+      <input class="account-input" type="password" id="new_password" name="new_password">
+    </div>
+  
+    <div class="form-column">
+      <label for="profile_picture"><i class="fa-solid fa-camera form-button"></i> Profile Picture:</label>
+      <div class="profile-pics">
+        {% if current_user.profile_pic %}
+          <img id="profilePicture" class="account-img" src="{{ url_for('static', filename='users/uploaded_images/' + current_user.profile_pic) }}" alt="Profile Picture">
+        {% else %}
+          <img id="profilePicture" class="account-img" src="{{ url_for('static', filename='users/uploaded_images/default.jpg') }}" alt="Profile Picture">
+        {% endif %}
+        <input class="account-buttons" type="file" id="profile_picture" name="profile_picture" onchange="previewProfilePicture(event)">
+      </div>
+      <label for="bio"><i class="fa-solid fa-circle-info form-button"></i> Bio:</label>
+      <textarea class="account-input account-textarea" id="bio" name="bio">{{ current_user.bio }}</textarea>
+  
+      <label for="location"><i class="fa-solid fa-location-dot form-button"></i> Location:</label>
+      <input class="account-input" type="text" id="location" name="location" value="{{ current_user.location }}">
+  
+      <label for="profession"><i class="fa-solid fa-user-tie form-button"></i> Profession:</label>
+      <input class="account-input" type="text" id="profession" name="profession" value="{{ current_user.profession }}">
+  
+      <input class="account-submit" type="submit" value="Update Profile">
+    </div>
+  </form>
+  <script>
+    // Function to update the profile picture preview
+    function previewProfilePicture(event) {
+      const fileInput = event.target;
+      const profilePicture = document.getElementById('profilePicture');
+  
+      if (fileInput.files && fileInput.files[0]) {
+        const reader = new FileReader();
+  
+        reader.onload = function (e) {
+          profilePicture.src = e.target.result;
+        };
+  
+        reader.readAsDataURL(fileInput.files[0]);
+      }
+    }
+  </script>
+  
+{% endblock %}

templates/conversation.html

@@ -0,0 +1,22 @@
+{% extends "layout.html" %}
+
+{% block content %}
+  <h1 class="title">Conversation with {{ recipient.username }}</h1>
+  <div class="conversation__container">
+  <div class="conversation__messages">
+    {% for message in messages %}
+      <div class="conversation__message">
+        <div class="conversation__message__top__row"><img class="post_profile_picture" src="{{ url_for('static', filename='users/uploaded_images/' + message.sender.profile_pic) }}" alt="Profile Image"><p class="profile_name">{{ message.sender.username }}</p></div>
+        <p class="conversation__content">{{ message.content }}</p>
+        <p class="conversation__message__info">Time: {{ message.timestamp.strftime('%Y-%m-%d %H:%M') }}</p>
+      </div>
+    {% endfor %}
+  </div>
+  <form action="{{ url_for('conversation', recipient_id=recipient.id) }}" method="post">
+    <div class="conversation__send__message">
+      <textarea class="conversation__message__box" name="message_content" placeholder="Message" required></textarea>
+      <input class="conversation__message__button" type="submit" value="Send Message">
+    </div>
+  </form>
+</div>
+{% endblock %}

templates/conversations.html

@@ -0,0 +1,28 @@
+{% extends "layout.html" %}
+
+{% block content %}
+<div class="ablankgap"></div>
+<div class="conversations__container">
+  <h1 class="title">Private Messages</h1>
+  <div class="conversations__new">
+    <a class="conversations__new__button" href="{{ url_for('new_conversation') }}">Start a New Conversation</a>
+  </div>
+  <div class="conversations__list">
+    <ul class="conversations__ul">
+      {% for user in conversations %}
+        <li class="conversations__li">
+          <a class="conversations__user__box" href="{{ url_for('conversation', recipient_id=user.id) }}">
+            <img class="conversations__user__image" src="{{ url_for('static', filename='users/uploaded_images/' + user.profile_pic) }}" alt="User Image">
+            <div class="conversations__name_and_icon">
+              <p class="conversations__username">{{ user.username }}</p>
+              <div class="circle">
+                <i class="fa-solid fa-arrow-up-right-from-square inner_circle_icon"></i>
+              </div>
+            </div>
+          </a>
+        </li>
+      {% endfor %}
+    </ul>
+  </div>
+</div>
+{% endblock %}

templates/index.html

@@ -0,0 +1,107 @@
+{% extends "layout.html" %}
+
+{% block content %}
+  <h1 class="title">Hello, {{ current_user.username }}!</h1>
+  <h2 class="subtitle">Recent Posts:</h2>
+  <button type="button" title="New Post" class="newpost-button" data-toggle="modal" data-target="#createPostModal">
+    <i class="fa-solid fa-plus"></i>
+  </button>
+  <!-- Modals -->
+  <div class="modal fade dark-modal" id="createPostModal" tabindex="-1" role="dialog" aria-labelledby="createPostModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="createPostModalLabel">Create New Post</h5>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div class="modal-body">
+          <form method="POST" action="{{ url_for('create_post') }}" enctype="multipart/form-data">
+            <div class="form-group">
+              <label for="postCaption">Caption</label>
+              <textarea id="postCaption" name="content" class="form-control" required></textarea>
+            </div>
+            <div class="form-group">
+              <label for="postImage">Image</label>
+              <input type="file" id="postImage" name="image" class="form-control-file">
+            </div>
+            <div class="modal-footer">
+              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+              <button type="submit" class="btn btn-primary">Create Post</button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  {% for post in posts %}
+  <div class="post">
+    <div class="top">
+    <a class="post_profile_a" href="user/{{post.author.id}}"><img class="post_profile_picture" src="{{ url_for('static', filename='users/uploaded_images/' + post.author.profile_pic) }}" alt="Profile Image"><p class="profile_name">{{ post.author.username }}</p></a>
+    <div class="dropdown">
+      <button class="btn dropdown-toggle" type="button" id="dropdownMenuButton{{ post.id }}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        <i class="fas fa-ellipsis-vertical"></i>
+      </button>
+      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton{{ post.id }}">
+        <a class="dropdown-item" href="/" onclick="deletePost({{ post.id }})">Delete Post</a>
+      </div>
+    </div>
+  </div>
+  <p class="caption">{{ post.content }}</p>
+    {% if post.filename %}
+      <img class="post-image" src="{{ url_for('static', filename='users/uploaded_images/' + post.filename) }}" alt="Post Image">
+    {% endif %}
+  
+    
+  
+    <div class="post-interactions">
+      <p class="post-likes">
+        <i class="fas fa-heart {% if not current_user.has_liked_post(post) %}heartIcon{% endif %}{% if current_user.has_liked_post(post) %}liked{% endif %}" onclick="likePost({{ post.id }})" id="heartIcon{{ post.id }}"></i>
+        <span class="likes" id="likeCount{{ post.id }}">{{ post.likes_count }}</span>
+      </p>
+      <p class="post-comments" onclick="showComments({{ post.id }})">
+        <i class="fas fa-comment CommentIcon"></i> {{ post.comments | length }}
+      </p>
+      <p class="post-info">Posted by {{ post.author.username }} on {{ post.created_at.strftime('%Y-%m-%d') }}</p>
+    </div>
+    <div class="modal fade dark-modal" id="commentsModal{{ post.id }}" tabindex="-1" role="dialog" aria-labelledby="commentsModalLabel" aria-hidden="true">
+      <div class="modal-dialog" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="commentsModalLabel">Comments</h5>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div class="modal-body">
+            <ul class="list-group">
+              {% for comment in post.comments %}
+                <li class="list-group-item">
+                  <strong>{{ comment.author.username }}:</strong> {{ comment.content }}
+                </li>
+              {% endfor %}
+            </ul>
+          </div>
+          <div class="modal-footer">
+            <form method="POST" action="{{ url_for('add_comment', post_id=post.id) }}">
+              <div class="form-group">
+                <textarea name="content" class="form-control" placeholder="Write your comment here" required></textarea>
+              </div>
+              <button type="submit" class="btn btn-primary">Submit Comment</button>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+      </div>
+
+  {% endfor %}
+  <script src="{{ url_for('static', filename='js/editPost.js') }}"></script>
+  <script src="{{ url_for('static', filename='js/deletePost.js') }}"></script>
+  <script src="{{ url_for('static', filename='js/likePost.js') }}"></script>
+  <script src="{{ url_for('static', filename='js/showComments.js') }}"></script>
+  <script src="{{ url_for('static', filename='js/dropdown.js') }}"></script>
+{% endblock %}
+

templates/layout.html

@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Simplz</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+    <meta name="icon" type="image/ico" href="{{ url_for('static', filename='images/favicon.ico') }}">
+    <script src="https://kit.fontawesome.com/c76bc25f8c.js" crossorigin="anonymous"></script>
+</head>
+<body>
+<div class="page">
+    <div class="stick">
+        <nav class="navbar">
+            <div class="navbar__container">
+                <a href="/" id="navbar__logo"><img class="logo" src="{{ url_for('static', filename='images/logo.png')}}" width="60">Simplz</a>
+                <div class="navbar__toggle" id="mobile-menu">
+                    <span class="bar"></span>
+                    <span class="bar"></span>
+                    <span class="bar"></span>
+                </div>
+                <ul class="navbar__menu">
+                    <li class="navbar__item"><a class="navbar__links" href="{{ url_for('index') }}" title="Home"><i class="fa-solid fa-house"></i></a></li>
+                    {% if current_user.is_authenticated %}
+                        <li class="navbar__item"><a class="navbar__links" href="{{ url_for('account') }}" title="Account Settings"><i class="fa-solid fa-user"></i></a></li>
+                        <li class="navbar__item"><a class="navbar__links" href="{{ url_for('conversations') }}" title="Messages"><i class="fa-solid fa-envelope"></i></a></li>
+                        <li class="navbar__item"><a class="navbar__links" href="{{ url_for('logout') }}" title="Logout"><i class="fa-solid fa-right-from-bracket"></i></a></li>
+                    {% else %}
+                        <li class="navbar__item"><a class="navbar__links" href="{{ url_for('login') }}">Login</a></li>
+                        <li class="navbar__item"><a class="navbar__links" href="{{ url_for('register') }}">Register</a></li>
+                    {% endif %}
+                </ul>
+            </div>
+        </nav>
+        
+    <header>
+        <form action="{{ url_for('search_user') }}" method="get">
+            <input type="text" name="search_query" placeholder="Search for users..." value="{{ searchq }}">
+            <button type="submit"><i class="fa-solid fa-magnifying-glass"></i></button>
+        </form>
+    </header>
+    </div>
+
+    <div class="contents">
+        {% block content %}
+        {% endblock %}
+    </div>
+    {% with messages = get_flashed_messages() %}
+        {% if messages %}
+            <ul class="flash-messages">
+                {% for message in messages %}
+                    <li class="flash-message">{{ message }}</li>
+                {% endfor %}
+            </ul>
+        {% endif %}
+    {% endwith %}   
+    <footer class="footer">
+        <div class="footer__container">
+            <div class="footer__links">
+                <!-- class="footer__link--wrapper">
+                    <div class="footer__link--items">
+                        <h2>About Us</h2>
+                        <a href="/">How it works</a>
+                        <a href="/">Testimonials</a>
+                        <a href="/">Careers</a>
+                        <a href="/">Terms of Service</a>
+                    </div>
+                    <div class="footer__link--items">
+                        <h2>Contact Us</h2>
+                        <a href="/">Contact</a>
+                        <a href="/">Support</a>
+                        <a href="/">Destinations</a>
+                        <a href="/">Sponsorships</a>
+                    </div-->
+                </div>
+                <div class="footer__link--wrapper">
+                    <div class="footer__link--items">
+                        <h2>About</h2>
+                        <a href="/">Developers</a>
+                        <a href="/">Support</a>
+                        <a href="/">How To</a>
+                        <a href="/"></a>
+                    </div>
+                    <div class="footer__link--items">
+                        <h2>Socials</h2>
+                        <a href="/">Instagram</a>
+                        <a href="/">Facebook</a>
+                        <a href="/">Youtube</a>
+                        <a href="/">Twitter</a>
+                    </div>
+                </div>
+            </div>
+            <section class="social__media">
+                <div class="social__media--wrap">
+                    <div class="footer__logo">
+                        <a href="/" id="footer__logo"><img class="logo" src="{{ url_for('static', filename='images/logo.png')}}" width="60">Simplz</a>
+                    </div>
+                    <p class="website__rights">© Simplz By Zaanind - 2024.</p>
+                    <!--div class="social__icons">
+                        <a href="/" class="social__icon--link" target="_blank"><i class="fa-brands fa-facebook"></i></a>
+                        <a href="/" class="social__icon--link" target="_blank"><i class="fa-brands fa-instagram"></i></a>
+                        <a href="/" class="social__icon--link" target="_blank"><i class="fa-brands fa-youtube"></i></a> 
+                        <a href="/" class="social__icon--link" target="_blank"><i class="fa-brands fa-twitter"></i></a>
+
+                    </div-->
+                </div>
+            </section>
+        </div>
+    </footer>
+</div>
+    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+    <script src="{{ url_for('static', filename='js/app.js') }}"></script>
+</body>
+</html>

templates/login.html

@@ -0,0 +1,12 @@
+{% extends "layout.html" %}
+
+{% block content %}
+    <h1 class="title">Login</h1>
+    <form class = "loginpage" action="{{ url_for('login') }}" method="post">
+        <label for="username"><i class="fa-solid fa-at form-button"></i> Username:</label>
+        <input class = "login-input" type="text" id="username" name="username" placeholder="username...">
+        <label for="password"><i class="fa-solid fa-lock form-button"></i> Password:</label>
+        <input class = "login-input" type="password" id="password" name="password" placeholder="password..." required>
+        <input class = "login-button" type="submit" value="Login">
+    </form>
+{% endblock %}

templates/new_conversation.html

@@ -0,0 +1,12 @@
+{% extends "layout.html" %}
+
+{% block content %}
+  <h1 class="title">Start a New Conversation</h1>
+  <form class="new_conversation__form" action="{{ url_for('send_message') }}" method="post">
+    <label class="new_conversation__label" for="recipient_username">Recipient's Username:</label>
+    <input class="new_conversation__input" type="text" id="recipient_username" name="recipient_username" required>
+    <label class="new_conversation__label" for="message_content">Message:</label>
+    <textarea class="new_conversation__textarea" id="message_content" name="message_content" required></textarea>
+    <button class="new_conversation__button" type="submit">Send Message</button>
+  </form>
+{% endblock %}

templates/register.html

@@ -0,0 +1,18 @@
+<!-- register.html -->
+
+{% extends "layout.html" %}
+
+{% block content %}
+    <h1 class="title">Register</h1>
+    <form class = "registerpage" action="{{ url_for('register') }}" method="post">
+        <label for="email"><i class="fa-solid fa-envelope form-button"></i> Email:</label>
+        <input class = "register-input" type="email" id="email" name="email" required>
+        <label for="username"><i class="fa-solid fa-at form-button"></i> Username:</label>
+        <input class = "register-input" type="text" id="username" name="username" required>
+        <label for="password"><i class="fa-solid fa-lock form-button"></i> Password:</label>
+        <input class = "register-input" type="password" id="password" name="password" required>
+        <label for="password2"><i class="fa-solid fa-lock form-button"></i> Confirm Password:</label>
+        <input class = "register-input" type="password" id="password2" name="password2" required>
+        <input class = "register-button" type="submit" value="Register">
+    </form>
+{% endblock %}

templates/search_results.html

@@ -0,0 +1,37 @@
+<!-- search_results.html -->
+{% extends "layout.html" %}
+
+{% block content %}
+    <h1 class="title">Search Results</h1>
+    {% if users %}
+        <ul class="searchresults_ul">
+            {% for user in users %}
+                <div class="searchresults_container">
+                    <div class="toprow">
+                        <img class = "searchresults_img" src="{{ url_for('static', filename='users/uploaded_images/' + user.profile_pic) }}" alt="Profile Picture" class="searchresults_img">
+                        <h2 class = "searchresults_h2">{{ user.username }} | {{user.first_name }} {{ user.last_name }}</h2>
+                        {% if current_user.is_authenticated and current_user.id != user.id %}
+                        {% if current_user.is_following(user) %}
+                            <form action="{{ url_for('unfollow', user_id=user.id, page='search') }}" method="post">
+                                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
+                                <button class = "follow_button" type="submit"><i class="fa-solid fa-user-minus"></i> Unfollow</button>
+                            </form>
+                        {% else %}
+                            <form action="{{ url_for('follow', user_id=user.id, page='search') }}" method="post">
+                                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
+                                <button class = "follow_button" type="submit"><i class="fa-solid fa-user-plus"></i> Follow</button>
+                            </form>
+                        {% endif %}
+                        {% endif %}
+                    </div>
+                    <div class="bottomrow">
+                        <p class = "searchresults_p">Bio: {{ user.bio }}</p>
+                        <li class="searchresults_li"><a class = "searchresults_a" href="{{ url_for('view_profile', user_id=user.id) }}"><i class="fa-solid fa-share-from-square"></i> Visit Profile</a></li>
+                    </div>
+                </div>
+            {% endfor %}
+        </ul>
+    {% else %}
+        <center><p style="color:#fff">No results found.</p></center>
+    {% endif %}
+{% endblock %}

templates/user_profile.html

@@ -0,0 +1,174 @@
+{% extends "layout.html" %}
+
+{% block content %}
+  <div class="user-profile__container">
+    <div class="user-profile__rows">
+      <div class="user-profile__left-column">
+        <div class="text-center">
+          <img src="{{ url_for('static', filename='users/uploaded_images/' + user.profile_pic) }}" alt="Profile Picture"
+            class="user-profile__profile-picture img-thumbnail">
+        </div>
+        {% if current_user.is_authenticated and current_user.id != user.id %}
+          <div class="text-center mt-3">
+            {% if current_user.is_following(user) %}
+              <form action="{{ url_for('unfollow', user_id=profile_user_id, page='profile') }}" method="post">
+                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
+                <button type="submit" class="user-profile__follow-button btn btn-danger"><i class="fa-solid fa-user-minus"></i> Unfollow</button>
+              </form>
+            {% else %}
+              <form action="{{ url_for('follow', user_id=profile_user_id, page='profile') }}" method="post">
+                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
+                <button type="submit" class="user-profile__follow-button btn btn-primary"><i class="fa-solid fa-user-plus"></i> Follow</button>
+              </form>
+            {% endif %}
+          </div>
+        {% endif %}
+      </div>
+
+      <div class="user-profile__right-column">
+        <h1 class="title">{{ user.username }}</h1>
+        <p class="user-profile__email"><strong>Email:</strong> {{ user.email }}</p>
+        {% if user.first_name or user.last_name %}
+          <p class="user-profile__name"><strong>Name:</strong> {{ user.first_name }} {{ user.last_name }}</p>
+        {% endif %}
+        {% if user.profession %}
+          <p class="user-profile__profession"><strong>Profession:</strong> {{ user.profession }}</p>
+        {% endif %}
+        {% if user.location %}
+          <p class="user-profile__location"><strong>Location:</strong> {{ user.location }}</p>
+        {% endif %}
+      </div>
+    </div>
+  </div>
+
+  <hr>
+
+  <h3>Posts</h3>
+
+  <div class="row">
+    <div class="col-md-12">
+      {% if posts %}
+        {% for post in posts %}
+          <div class="post mb-4">
+            <div class="top">
+              <a href="user/{{ post.author.id }}">
+                <img class="post_profile_picture" src="{{ url_for('static', filename='users/uploaded_images/' + post.author.profile_pic) }}" alt="Profile Image">
+                <p class="profile_name">{{ post.author.username }}</p>
+              </a>
+              <div class="dropdown">
+                <button class="btn dropdown-toggle" type="button" id="dropdownMenuButton{{ post.id }}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                  <i class="fas fa-ellipsis-vertical"></i>
+                </button>
+                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton{{ post.id }}">
+                  <a class="dropdown-item" href="#" onclick="deletePost({{ post.id }})">Delete Post</a>
+                </div>
+              </div>
+            </div>
+            {% if post.filename %}
+              <img class="post-image" src="{{ url_for('static', filename='users/uploaded_images/' + post.filename) }}" alt="Post Image">
+            {% endif %}
+            <p class="caption">{{ post.content }}</p>
+            <div class="post-interactions">
+              <p class="post-likes">
+                <i class="fas fa-heart {% if not current_user.has_liked_post(post) %}heartIcon{% endif %}{% if current_user.has_liked_post(post) %}liked{% endif %}" onclick="likePost({{ post.id }})" id="heartIcon{{ post.id }}"></i>
+                <span class="likes" id="likeCount{{ post.id }}">{{ post.likes_count }}</span>
+              </p>
+              <p class="post-comments" onclick="showComments({{ post.id }})">
+                <i class="fas fa-comment CommentIcon"></i> {{ post.comments | length }}
+              </p>
+              <p class="post-info">Posted by {{ post.author.username }} on {{ post.created_at.strftime('%Y-%m-%d') }}</p>
+            </div>
+            <!-- Comments Modal -->
+            <div class="modal fade" id="commentsModal{{ post.id }}" tabindex="-1" role="dialog" aria-labelledby="commentsModalLabel" aria-hidden="true">
+              <div class="modal-dialog" role="document">
+                <div class="modal-content">
+                  <div class="modal-header">
+                    <h5 class="modal-title" id="commentsModalLabel">Comments</h5>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                      <span aria-hidden="true">&times;</span>
+                    </button>
+                  </div>
+                  <div class="modal-body">
+                    <ul class="list-group">
+                      {% for comment in post.comments %}
+                        <li class="list-group-item">
+                          <strong>{{ comment.author.username }}:</strong> {{ comment.content }}
+                        </li>
+                      {% endfor %}
+                    </ul>
+                  </div>
+                  <div class="modal-footer">
+                    <form method="POST" action="{{ url_for('add_comment', post_id=post.id) }}">
+                      <div class="form-group">
+                        <textarea name="content" class="form-control" placeholder="Write your comment here" required></textarea>
+                      </div>
+                      <button type="submit" class="btn btn-primary">Submit Comment</button>
+                    </form>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        {% endfor %}
+      {% else %}
+        <div class="col-md-12">
+          <p>No posts yet.</p>
+        </div>
+      {% endif %}
+    </div>
+  </div>
+  <script>
+    function likePost(postId) {
+      fetch(`/like_post/${postId}`, { method: 'POST' })
+        .then((response) => response.json())
+        .then((data) => {
+          const likeCountSpan = document.getElementById(`likeCount${postId}`);
+          likeCountSpan.textContent = data.likes_count;
+  
+          const heartIcon = document.getElementById(`heartIcon${postId}`);
+          if (data.liked) {
+            heartIcon.classList.add('liked'); 
+            heartIcon.classList.remove('heartIcon');
+          } else {
+            heartIcon.classList.remove('liked');
+            heartIcon.classList.add('heartIcon');
+          }
+        });
+    }
+  
+    function showComments(postId) {
+      $(`#commentsModal${postId}`).modal('show');
+    }
+    function deletePost(postId) {
+      fetch(`/delete_post/${postId}`, { method: 'POST' })
+        .then((response) => {
+          if (response.ok) {
+            const postElement = document.querySelector(`.post[data-post-id="${postId}"]`);
+            if (postElement) {
+              postElement.remove();
+            }
+          } else {
+            console.error('Error deleting post:', response);
+          }
+        })
+        .catch((error) => {
+          console.error('Error deleting post:', error);
+        });
+    }
+
+    document.addEventListener('click', function (event) {
+      const dropdownToggle = event.target.closest('.dropdown-toggle');
+      if (dropdownToggle) {
+        const dropdownMenu = dropdownToggle.nextElementSibling;
+        if (dropdownMenu) {
+          dropdownMenu.classList.toggle('show');
+        }
+      } else {
+        const dropdownMenus = document.querySelectorAll('.dropdown-menu');
+        dropdownMenus.forEach((menu) => {
+          menu.classList.remove('show');
+        });
+      }
+    });
+  </script>
+{% endblock %}