mirror of
https://github.com/Alvin-Zilverstand/school.git
synced 2026-03-06 03:06:33 +01:00
l
This commit is contained in:
vista-man
Submodule projects/challange 2/SkillSphere/SkillSphere-Network deleted from b746f8b250
119
projects/challange 2/SkillSphere/SkillSphere/README.md
Normal file
119
projects/challange 2/SkillSphere/SkillSphere/README.md
Normal file
@@ -0,0 +1,119 @@
|
||||
# Skill Exchange Platform for Software Development Students
|
||||
|
||||
This project is a modern social network platform designed to facilitate skill exchange among students studying Software Development (crebo 25604). The platform incorporates gamification elements, providing an engaging and interactive experience for users while meeting the standards outlined by SBB Nederland's qualification framework.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Features
|
||||
|
||||
- **Skill Exchange:** Connect with peers to share and develop software development skills.
|
||||
- **Gamification:** Earn badges, points, and rewards for participation and achievements.
|
||||
- **User-Friendly Front-End:** Clean and intuitive UI for seamless navigation.
|
||||
- **Robust Back-End:** Secure and scalable back-end architecture.
|
||||
- **Structured Database:** Well-designed database schema to support efficient data management.
|
||||
|
||||
---
|
||||
|
||||
## 🛠️ Tech Stack
|
||||
|
||||
- **Front-End:** React.js / Angular / Vue.js (choose as per your group decision)
|
||||
- **Back-End:** Node.js / Express / Django / Flask (choose as per your group decision)
|
||||
- **Database:** MySQL / PostgreSQL / MongoDB
|
||||
- **Version Control:** Git
|
||||
|
||||
---
|
||||
|
||||
## 📋 Requirements
|
||||
|
||||
- Node.js (latest stable version)
|
||||
- Database of choice (MySQL, PostgreSQL, or MongoDB)
|
||||
- Git
|
||||
|
||||
---
|
||||
|
||||
## 📂 Project Structure
|
||||
|
||||
```
|
||||
/frontend
|
||||
├── public
|
||||
├── src
|
||||
├── components
|
||||
├── pages
|
||||
├── assets
|
||||
/backend
|
||||
├── models
|
||||
├── routes
|
||||
├── controllers
|
||||
/database
|
||||
├── migrations
|
||||
├── seeders
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Objectives
|
||||
|
||||
- Implement core functionalities based on the qualification dossier for Software Development (SBB Nederland).
|
||||
- Create a fully functional skill exchange platform with gamified elements.
|
||||
- Develop and test the application collaboratively within a group of up to four members.
|
||||
|
||||
---
|
||||
|
||||
## 📖 Getting Started
|
||||
|
||||
1. **Clone the repository**
|
||||
```bash
|
||||
git clone https://github.com/your-username/skill-exchange-platform.git
|
||||
cd skill-exchange-platform
|
||||
```
|
||||
|
||||
2. **Set up the front-end**
|
||||
```bash
|
||||
cd frontend
|
||||
npm install
|
||||
npm start
|
||||
```
|
||||
|
||||
3. **Set up the back-end**
|
||||
```bash
|
||||
cd backend
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
|
||||
4. **Configure the database**
|
||||
- Update your database credentials in `backend/config/db.js`.
|
||||
- Run migrations and seed data if applicable.
|
||||
|
||||
---
|
||||
|
||||
## 🎮 Gamification Details
|
||||
|
||||
- **Achievements:** Unlock badges for specific milestones.
|
||||
- **Leaderboards:** Compare skills and contributions with peers.
|
||||
- **Challenges:** Weekly and monthly challenges to encourage engagement.
|
||||
|
||||
---
|
||||
|
||||
## 🤝 Collaboration
|
||||
|
||||
- Group size: 4 members.
|
||||
- Communicate effectively and split tasks based on skill sets.
|
||||
- Validate solutions using multiple sources and seek guidance when needed.
|
||||
|
||||
---
|
||||
|
||||
## 📚 Resources
|
||||
|
||||
- [SBB Nederland Qualification Framework](https://www.s-bb.nl/)
|
||||
- [MDN Web Docs](https://developer.mozilla.org/)
|
||||
- [Stack Overflow](https://stackoverflow.com/)
|
||||
|
||||
---
|
||||
|
||||
## 💡 Tips
|
||||
|
||||
- Research thoroughly and verify answers from multiple sources.
|
||||
- Take advantage of your mentors' expertise when in doubt.
|
||||
- Focus on both functionality and user experience.
|
||||
|
||||
244
projects/challange 2/SkillSphere/SkillSphere/assets/css/auth.css
Normal file
244
projects/challange 2/SkillSphere/SkillSphere/assets/css/auth.css
Normal file
@@ -0,0 +1,244 @@
|
||||
:root {
|
||||
--primary: rgb(182, 157, 230);
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "San Francisco", Helvetica, Arial, sans-serif;
|
||||
font-weight: 300;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
background-image: url(../images/layered-waves-haikei.svg);
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background-size: cover;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 12.5px;
|
||||
color: #000;
|
||||
opacity: 0.8;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
form {
|
||||
padding: 40px 30px;
|
||||
background: #fefefe;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding-bottom: 20px;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
form h4 {
|
||||
margin-bottom: 20px;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
form h4 span {
|
||||
color: rgba(0, 0, 0, 1);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
form p {
|
||||
line-height: 155%;
|
||||
margin-bottom: 5px;
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
opacity: 0.65;
|
||||
font-weight: 400;
|
||||
max-width: 200px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
a.discrete {
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
font-size: 14px;
|
||||
border-bottom: solid 1px rgba(0, 0, 0, 0);
|
||||
padding-bottom: 4px;
|
||||
margin-left: auto;
|
||||
font-weight: 300;
|
||||
transition: all 0.3s ease;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
a.discrete:hover {
|
||||
border-bottom: solid 1px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
button {
|
||||
width: auto;
|
||||
min-width: 100px;
|
||||
border-radius: 24px;
|
||||
text-align: center;
|
||||
padding: 15px 40px;
|
||||
margin-top: 5px;
|
||||
background-color: rgb(182, 157, 230);
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
margin-left: auto;
|
||||
font-weight: 500;
|
||||
box-shadow: 0px 2px 6px -1px rgba(0, 0, 0, 0.13);
|
||||
border: none;
|
||||
transition: all 0.3s ease;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 2px 6px -1px rgba(182, 157, 230, 0.65);
|
||||
}
|
||||
|
||||
button:active {
|
||||
transform: scale(0.99);
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: 16px;
|
||||
padding: 20px 0px;
|
||||
height: 56px;
|
||||
border: none;
|
||||
border-bottom: solid 1px rgba(0, 0, 0, 0.1);
|
||||
background: #fff;
|
||||
width: 280px;
|
||||
box-sizing: border-box;
|
||||
transition: all 0.3s linear;
|
||||
color: #000;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
border-bottom: solid 1px var(--primary);
|
||||
outline: 0;
|
||||
box-shadow: 0 2px 6px -8px rgba(182, 157, 230, 0.45);
|
||||
}
|
||||
|
||||
.floating-label {
|
||||
position: relative;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.floating-label label {
|
||||
position: absolute;
|
||||
top: calc(50% - 7px);
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
transition: all 0.3s ease;
|
||||
padding-left: 44px;
|
||||
}
|
||||
|
||||
.floating-label input {
|
||||
width: calc(100% - 44px);
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.floating-label .icon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 56px;
|
||||
width: 44px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.floating-label .icon svg {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
margin: auto;
|
||||
opacity: 0.15;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.floating-label .icon svg path {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.floating-label input:not(:placeholder-shown) {
|
||||
padding: 28px 0px 12px 0px;
|
||||
}
|
||||
|
||||
.floating-label input:not(:placeholder-shown) + label {
|
||||
transform: translateY(-10px);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.floating-label input:valid:not(:placeholder-shown) + label + .icon svg {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.floating-label input:valid:not(:placeholder-shown) + label + .icon svg path {
|
||||
fill: var(--primary);
|
||||
}
|
||||
|
||||
.floating-label input:not(:valid):not(:focus) + label + .icon {
|
||||
animation-name: shake-shake;
|
||||
animation-duration: 0.3s;
|
||||
}
|
||||
|
||||
@keyframes shake-shake {
|
||||
0% {
|
||||
transform: translateX(-3px);
|
||||
}
|
||||
20% {
|
||||
transform: translateX(3px);
|
||||
}
|
||||
40% {
|
||||
transform: translateX(-3px);
|
||||
}
|
||||
60% {
|
||||
transform: translateX(3px);
|
||||
}
|
||||
80% {
|
||||
transform: translateX(-3px);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0px);
|
||||
}
|
||||
}
|
||||
|
||||
.session {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: auto auto;
|
||||
background: #ffffff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 2px 6px -1px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.left {
|
||||
width: 220px;
|
||||
height: auto;
|
||||
min-height: 100%;
|
||||
position: relative;
|
||||
background: url("https://images.pexels.com/photos/114979/pexels-photo-114979.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
|
||||
background-size: cover;
|
||||
border-top-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
|
||||
.left svg {
|
||||
height: 40px;
|
||||
width: auto;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,243 @@
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #ED654A;
|
||||
font-family: Arial;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* NavbarTop */
|
||||
.navbar-top {
|
||||
background-color: #004f59;
|
||||
color: #ffffff;
|
||||
box-shadow: 0px 4px 8px 0px grey;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: 'inter', sans-serif;
|
||||
padding-top: 15px;
|
||||
position: absolute;
|
||||
left: 45%;
|
||||
}
|
||||
|
||||
.navbar-top ul {
|
||||
float: right;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
padding: 18px 50px 0 40px;
|
||||
}
|
||||
|
||||
.navbar-top ul li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.navbar-top ul li a {
|
||||
color: #ffffff;
|
||||
padding: 14px 16px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.icon-count {
|
||||
background-color: #ff0000;
|
||||
color: #fff;
|
||||
float: right;
|
||||
font-size: 11px;
|
||||
left: -25px;
|
||||
padding: 2px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* End */
|
||||
|
||||
/* Sidenav */
|
||||
.sidenav {
|
||||
background-color: #00444d;
|
||||
color: #ffffff;
|
||||
border-bottom-right-radius: 25px;
|
||||
height: 86%;
|
||||
left: 0;
|
||||
overflow-x: hidden;
|
||||
padding-top: 20px;
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.profile {
|
||||
margin-bottom: 20px;
|
||||
margin-top: -12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.profile img {
|
||||
border-radius: 50%;
|
||||
box-shadow: 0px 0px 5px 1px grey;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.job {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.url, hr {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.url hr {
|
||||
margin-left: 20%;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.url a {
|
||||
font-weight: 600px;
|
||||
color: #000000;
|
||||
display: block;
|
||||
font-size: 20px;
|
||||
margin: 10px 0;
|
||||
padding: 6px 8px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.url a:hover, .url .active {
|
||||
font-weight: 600px;
|
||||
background-color: #e8f5ff;
|
||||
border-radius: 28px;
|
||||
color: #000000;
|
||||
margin-left: 14%;
|
||||
width: 65%;
|
||||
}
|
||||
|
||||
/* End */
|
||||
|
||||
/* Main */
|
||||
.main {
|
||||
margin-top: 2%;
|
||||
margin-left: 29%;
|
||||
font-size: 28px;
|
||||
padding: 0 10px;
|
||||
width: 58%;
|
||||
}
|
||||
|
||||
.main h2 {
|
||||
color: #ffffff;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
font-size: 24px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.main .card {
|
||||
background-color: #004f59;
|
||||
border-radius: 18px;
|
||||
box-shadow: 1px 1px 8px 0 grey;
|
||||
height: auto;
|
||||
margin-bottom: 20px;
|
||||
padding: 20px 0 20px 50px;
|
||||
}
|
||||
|
||||
.main .card table {
|
||||
border: none;
|
||||
font-size: 16px;
|
||||
height: 270px;
|
||||
width: 80%;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.edit {
|
||||
position: absolute;
|
||||
color: #e7e7e8;
|
||||
right: 14%;
|
||||
}
|
||||
|
||||
.social-media {
|
||||
text-align: center;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.social-media span {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.fa-facebook:hover {
|
||||
color: #4267b3 !important;
|
||||
}
|
||||
|
||||
.fa-twitter:hover {
|
||||
color: #1da1f2 !important;
|
||||
}
|
||||
|
||||
.fa-instagram:hover {
|
||||
color: #ce2b94 !important;
|
||||
}
|
||||
|
||||
.fa-invision:hover {
|
||||
color: #f83263 !important;
|
||||
}
|
||||
|
||||
.fa-github:hover {
|
||||
color: #161414 !important;
|
||||
}
|
||||
|
||||
.fa-whatsapp:hover {
|
||||
color: #25d366 !important;
|
||||
}
|
||||
|
||||
.fa-snapchat:hover {
|
||||
color: #fffb01 !important;
|
||||
}
|
||||
|
||||
/* Input Fields */
|
||||
input[type="text"], input[type="email"], input[type="password"], textarea {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
margin: 10px 0;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
box-sizing: border-box;
|
||||
font-size: 16px;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background-color: #f9f9f9;
|
||||
transition: 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, textarea:focus {
|
||||
border-color: #007BFF;
|
||||
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Submit Button */
|
||||
button[type="submit"] {
|
||||
background-color: #007BFF;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
button[type="submit"]:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
/* Optional: Style for form container */
|
||||
form {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
|
||||
/* End */
|
||||
@@ -0,0 +1,45 @@
|
||||
/* Global */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 14px;
|
||||
font-family: 'Titillium Web', sans-serif;
|
||||
background-image: url(../images/layered-waves-haikei.svg);
|
||||
background-size: cover;
|
||||
color: #FEFEFE;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #FF0042;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/* Home.html */
|
||||
|
||||
.container {
|
||||
margin: 20px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.subforum {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.subforum-title {
|
||||
background-color: #292B2E;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
margin: 4px;
|
||||
}
|
||||
.subforum-row {
|
||||
display: grid;
|
||||
grid-template-columns: 7% 60% 13% 20%;
|
||||
border-radius: 5px;
|
||||
background-color: #111314;
|
||||
}
|
||||
.center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #004f59;
|
||||
color: #e56a54;
|
||||
}
|
||||
|
||||
header, footer {
|
||||
background-color: #e56a54;
|
||||
color: #004f59;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.forum-section {
|
||||
background-color: #e56a54;
|
||||
color: #004f59;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.forum-section h2 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.forum-section ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.forum-section li {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.forum-section a {
|
||||
color: #004f59;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.forum-section a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
229
projects/challange 2/SkillSphere/SkillSphere/assets/css/home.css
Normal file
229
projects/challange 2/SkillSphere/SkillSphere/assets/css/home.css
Normal file
@@ -0,0 +1,229 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
|
||||
:root{
|
||||
--base-clr: #D2705A;
|
||||
--line-clr: #CCCECF;
|
||||
--hover-clr: #CD977E;
|
||||
--text-clr: #FFF;
|
||||
--accent-clr: #D2705A;
|
||||
--secondary-text-clr: #b0b3c1;
|
||||
}
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
html{
|
||||
font-family: Poppins, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
body{
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
background-color: var(--base-clr);
|
||||
color: var(--text-clr);
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
}
|
||||
#sidebar{
|
||||
box-sizing: border-box;
|
||||
height: 100vh;
|
||||
width: 250px;
|
||||
padding: 5px 1em;
|
||||
background-color: #1F4952;
|
||||
border-right: 1px solid var(--line-clr);
|
||||
|
||||
position: sticky;
|
||||
top: 0;
|
||||
align-self: start;
|
||||
transition: 300ms ease-in-out;
|
||||
overflow: hidden;
|
||||
text-wrap: nowrap;
|
||||
}
|
||||
#sidebar.close{
|
||||
padding: 5px;
|
||||
width: 60px;
|
||||
}
|
||||
#sidebar ul{
|
||||
list-style: none;
|
||||
}
|
||||
#sidebar > ul > li:first-child{
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 16px;
|
||||
.logo{
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
#sidebar ul li.active a{
|
||||
color: var(--accent-clr);
|
||||
|
||||
svg{
|
||||
fill: var(--accent-clr);
|
||||
}
|
||||
}
|
||||
|
||||
#sidebar a, #sidebar .dropdown-btn, #sidebar .logo{
|
||||
border-radius: .5em;
|
||||
padding: .85em;
|
||||
text-decoration: none;
|
||||
color: var(--text-clr);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1em;
|
||||
}
|
||||
.dropdown-btn{
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
background: none;
|
||||
border: none;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
#sidebar svg{
|
||||
flex-shrink: 0;
|
||||
fill: var(--text-clr);
|
||||
}
|
||||
#sidebar a span, #sidebar .dropdown-btn span{
|
||||
flex-grow: 1;
|
||||
}
|
||||
#sidebar a:hover, #sidebar .dropdown-btn:hover{
|
||||
background-color: var(--hover-clr);
|
||||
}
|
||||
#sidebar .sub-menu{
|
||||
display: grid;
|
||||
grid-template-rows: 0fr;
|
||||
transition: 300ms ease-in-out;
|
||||
|
||||
> div{
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
#sidebar .sub-menu.show{
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
.dropdown-btn svg{
|
||||
transition: 200ms ease;
|
||||
}
|
||||
.rotate svg:last-child{
|
||||
rotate: 180deg;
|
||||
}
|
||||
#sidebar .sub-menu a{
|
||||
padding-left: 2em;
|
||||
}
|
||||
#toggle-btn{
|
||||
margin-left: auto;
|
||||
padding: 1em;
|
||||
border: none;
|
||||
border-radius: .5em;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
|
||||
svg{
|
||||
transition: rotate 150ms ease;
|
||||
}
|
||||
}
|
||||
#toggle-btn:hover{
|
||||
background-color: var(--hover-clr);
|
||||
}
|
||||
|
||||
main{
|
||||
padding: min(30px, 7%);
|
||||
}
|
||||
main p{
|
||||
color: var(--secondary-text-clr);
|
||||
margin-top: 5px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.container{
|
||||
border: 1px solid var(--line-clr);
|
||||
border-radius: 1em;
|
||||
margin-bottom: 20px;
|
||||
padding: min(3em, 15%);
|
||||
|
||||
h2, p { margin-top: 1em }
|
||||
background-color: #1F4952;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.edit {
|
||||
position: absolute;
|
||||
color: #FFF;
|
||||
right: 14%;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.logout {
|
||||
position: absolute;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
@media(max-width: 800px){
|
||||
body{
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
main{
|
||||
padding: 2em 1em 60px 1em;
|
||||
}
|
||||
.container{
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
#sidebar{
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
border-right: none;
|
||||
border-top: 1px solid var(--line-clr);
|
||||
padding: 0;
|
||||
position: fixed;
|
||||
top: unset;
|
||||
bottom: 0;
|
||||
|
||||
> ul{
|
||||
padding: 0;
|
||||
display: grid;
|
||||
grid-auto-columns: 60px;
|
||||
grid-auto-flow: column;
|
||||
align-items: center;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
ul li{
|
||||
height: 100%;
|
||||
}
|
||||
ul a, ul .dropdown-btn{
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
ul li span, ul li:first-child, .dropdown-btn svg:last-child{
|
||||
display: none;
|
||||
}
|
||||
|
||||
ul li .sub-menu.show{
|
||||
position: fixed;
|
||||
bottom: 60px;
|
||||
left: 0;
|
||||
box-sizing: border-box;
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
background-color: var(--hover-clr);
|
||||
border-top: 1px solid var(--line-clr);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
> div{
|
||||
overflow-x: auto;
|
||||
}
|
||||
li{
|
||||
display: inline-flex;
|
||||
}
|
||||
a{
|
||||
box-sizing: border-box;
|
||||
padding: 1em;
|
||||
width: auto;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,192 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'inter', sans-serif;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.background {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background-image: url(../images/layered-waves-haikei.svg);
|
||||
background-size: cover;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/* App Container */
|
||||
.main {
|
||||
background: #ffffff30;
|
||||
width: 95%;
|
||||
margin: 2% auto 0;
|
||||
border-radius: 10px;
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
height: 91%;
|
||||
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
#header {
|
||||
font-size: 25px;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
border-bottom: 4px solid #ED654A;
|
||||
padding-bottom: 30px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.main, .inhoud {
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.top-right-buttons {
|
||||
position: absolute;
|
||||
top: 8%;
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
/* Inhoud */
|
||||
.inhoud {
|
||||
padding: 20px 0;
|
||||
color: #fff;
|
||||
margin-top: 10%;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.login {
|
||||
background-color: #e56a54 !important;
|
||||
border: none !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.sign-up {
|
||||
background-color: #e5a854 !important;
|
||||
border: none !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.login:hover {
|
||||
background-color: #cc5f4a !important;
|
||||
border: none !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.sign-up:hover {
|
||||
background-color: #d2954a !important;
|
||||
border: none !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.inhoud p {
|
||||
margin-top: 10px;
|
||||
width: 60%;
|
||||
font-size: 25px;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
overflow: hidden; /* Ensures the content is not revealed until the animation */
|
||||
border-right: .15em solid #ED654A; /* The typwriter cursor */
|
||||
white-space: nowrap; /* Keeps the content on a single line */
|
||||
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
|
||||
animation:
|
||||
typing 3.5s steps(40, end),
|
||||
blink-caret .75s step-end infinite;
|
||||
}
|
||||
|
||||
.inhoud a {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.inhoud a:hover {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.inhoud .contact {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
#readmore {
|
||||
padding: 3px;
|
||||
font-size: 20px;
|
||||
border: none;
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
background-color: #004f59;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
#readmore:hover {
|
||||
background-color: #fff;
|
||||
color: #004f59;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
|
||||
/* The typing effect */
|
||||
@keyframes typing {
|
||||
from { width: 0 }
|
||||
to { width: 60% }
|
||||
}
|
||||
|
||||
/* The typewriter cursor effect */
|
||||
@keyframes blink-caret {
|
||||
from, to { border-color: transparent }
|
||||
50% { border-color: #e56a54; }
|
||||
}
|
||||
|
||||
.box div {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background-color: transparent;
|
||||
border: 6px solid rgba(255, 255, 255, 0.8);
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.box div:nth-child(1) { top: 12%; left: 42%; animation: animate 10s linear infinite; }
|
||||
.box div:nth-child(2) { top: 70%; left: 50%; animation: animate 7s linear infinite; }
|
||||
.box div:nth-child(3) { top: 17%; left: 6%; animation: animate 9s linear infinite; }
|
||||
.box div:nth-child(4) { top: 20%; left: 60%; animation: animate 10s linear infinite; }
|
||||
.box div:nth-child(5) { top: 67%; left: 10%; animation: animate 6s linear infinite; }
|
||||
.box div:nth-child(6) { top: 80%; left: 70%; animation: animate 12s linear infinite; }
|
||||
.box div:nth-child(7) { top: 60%; left: 80%; animation: animate 15s linear infinite; }
|
||||
.box div:nth-child(8) { top: 32%; left: 25%; animation: animate 16s linear infinite; }
|
||||
.box div:nth-child(9) { top: 90%; left: 25%; animation: animate 9s linear infinite; }
|
||||
.box div:nth-child(10) { top: 20%; left: 80%; animation: animate 5s linear infinite; }
|
||||
|
||||
@keyframes animate {
|
||||
0% { transform: scale(0) translateY(0) rotate(0); opacity: 1; }
|
||||
100% { transform: scale(1.3) translateY(-90px) rotate(360deg); opacity: 0; }
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 815px) {
|
||||
.main {
|
||||
width: 100%;
|
||||
margin: 50px auto 0;
|
||||
height: 85%;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
height: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-height: 635px) {
|
||||
.main {
|
||||
height: 90%;
|
||||
margin-top: 3%;
|
||||
}
|
||||
|
||||
.btn i {
|
||||
font-size: xx-large;
|
||||
}
|
||||
}
|
||||
BIN
projects/challange 2/SkillSphere/SkillSphere/assets/images/3.png
Normal file
BIN
projects/challange 2/SkillSphere/SkillSphere/assets/images/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 359 KiB |
@@ -0,0 +1 @@
|
||||
<svg id="visual" viewBox="0 0 3840 2160" width="3840" height="2160" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect x="0" y="0" width="3840" height="2160" fill="#004f59"></rect><path d="M0 904L91.5 883C183 862 366 820 548.8 833C731.7 846 914.3 914 1097.2 946.3C1280 978.7 1463 975.3 1645.8 947.2C1828.7 919 2011.3 866 2194.2 884.5C2377 903 2560 993 2742.8 1070C2925.7 1147 3108.3 1211 3291.2 1161C3474 1111 3657 947 3748.5 865L3840 783L3840 2161L3748.5 2161C3657 2161 3474 2161 3291.2 2161C3108.3 2161 2925.7 2161 2742.8 2161C2560 2161 2377 2161 2194.2 2161C2011.3 2161 1828.7 2161 1645.8 2161C1463 2161 1280 2161 1097.2 2161C914.3 2161 731.7 2161 548.8 2161C366 2161 183 2161 91.5 2161L0 2161Z" fill="#e56a54"></path><path d="M0 1215L91.5 1210.3C183 1205.7 366 1196.3 548.8 1198.2C731.7 1200 914.3 1213 1097.2 1238C1280 1263 1463 1300 1645.8 1284.5C1828.7 1269 2011.3 1201 2194.2 1189.3C2377 1177.7 2560 1222.3 2742.8 1250.3C2925.7 1278.3 3108.3 1289.7 3291.2 1291.5C3474 1293.3 3657 1285.7 3748.5 1281.8L3840 1278L3840 2161L3748.5 2161C3657 2161 3474 2161 3291.2 2161C3108.3 2161 2925.7 2161 2742.8 2161C2560 2161 2377 2161 2194.2 2161C2011.3 2161 1828.7 2161 1645.8 2161C1463 2161 1280 2161 1097.2 2161C914.3 2161 731.7 2161 548.8 2161C366 2161 183 2161 91.5 2161L0 2161Z" fill="#f58a50"></path><path d="M0 1489L91.5 1457.7C183 1426.3 366 1363.7 548.8 1376.2C731.7 1388.7 914.3 1476.3 1097.2 1473.2C1280 1470 1463 1376 1645.8 1385.7C1828.7 1395.3 2011.3 1508.7 2194.2 1534.7C2377 1560.7 2560 1499.3 2742.8 1451.3C2925.7 1403.3 3108.3 1368.7 3291.2 1381.3C3474 1394 3657 1454 3748.5 1484L3840 1514L3840 2161L3748.5 2161C3657 2161 3474 2161 3291.2 2161C3108.3 2161 2925.7 2161 2742.8 2161C2560 2161 2377 2161 2194.2 2161C2011.3 2161 1828.7 2161 1645.8 2161C1463 2161 1280 2161 1097.2 2161C914.3 2161 731.7 2161 548.8 2161C366 2161 183 2161 91.5 2161L0 2161Z" fill="#ffac50"></path><path d="M0 1600L91.5 1629.8C183 1659.7 366 1719.3 548.8 1742.8C731.7 1766.3 914.3 1753.7 1097.2 1736.7C1280 1719.7 1463 1698.3 1645.8 1712.7C1828.7 1727 2011.3 1777 2194.2 1777.2C2377 1777.3 2560 1727.7 2742.8 1715.8C2925.7 1704 3108.3 1730 3291.2 1708.8C3474 1687.7 3657 1619.3 3748.5 1585.2L3840 1551L3840 2161L3748.5 2161C3657 2161 3474 2161 3291.2 2161C3108.3 2161 2925.7 2161 2742.8 2161C2560 2161 2377 2161 2194.2 2161C2011.3 2161 1828.7 2161 1645.8 2161C1463 2161 1280 2161 1097.2 2161C914.3 2161 731.7 2161 548.8 2161C366 2161 183 2161 91.5 2161L0 2161Z" fill="#ffcf57"></path><path d="M0 1985L91.5 1989C183 1993 366 2001 548.8 1978.3C731.7 1955.7 914.3 1902.3 1097.2 1856.5C1280 1810.7 1463 1772.3 1645.8 1765.2C1828.7 1758 2011.3 1782 2194.2 1793C2377 1804 2560 1802 2742.8 1812C2925.7 1822 3108.3 1844 3291.2 1856C3474 1868 3657 1870 3748.5 1871L3840 1872L3840 2161L3748.5 2161C3657 2161 3474 2161 3291.2 2161C3108.3 2161 2925.7 2161 2742.8 2161C2560 2161 2377 2161 2194.2 2161C2011.3 2161 1828.7 2161 1645.8 2161C1463 2161 1280 2161 1097.2 2161C914.3 2161 731.7 2161 548.8 2161C366 2161 183 2161 91.5 2161L0 2161Z" fill="#fff36a"></path></svg>
|
||||
|
After Width: | Height: | Size: 3.0 KiB |
@@ -0,0 +1,31 @@
|
||||
const toggleButton = document.getElementById('toggle-btn')
|
||||
const sidebar = document.getElementById('sidebar')
|
||||
|
||||
function toggleSidebar(){
|
||||
sidebar.classList.toggle('close')
|
||||
toggleButton.classList.toggle('rotate')
|
||||
|
||||
closeAllSubMenus()
|
||||
}
|
||||
|
||||
function toggleSubMenu(button){
|
||||
|
||||
if(!button.nextElementSibling.classList.contains('show')){
|
||||
closeAllSubMenus()
|
||||
}
|
||||
|
||||
button.nextElementSibling.classList.toggle('show')
|
||||
button.classList.toggle('rotate')
|
||||
|
||||
if(sidebar.classList.contains('close')){
|
||||
sidebar.classList.toggle('close')
|
||||
toggleButton.classList.toggle('rotate')
|
||||
}
|
||||
}
|
||||
|
||||
function closeAllSubMenus(){
|
||||
Array.from(sidebar.getElementsByClassName('show')).forEach(ul => {
|
||||
ul.classList.remove('show')
|
||||
ul.previousElementSibling.classList.remove('rotate')
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,151 @@
|
||||
<?php
|
||||
session_start();
|
||||
include("database.inc.php");
|
||||
|
||||
// Check if the user is logged in
|
||||
if (!isset($_SESSION['user_id'])) {
|
||||
header("Location: login.php"); // Redirect to login page if not logged in
|
||||
exit();
|
||||
}
|
||||
|
||||
// Get the user ID from the session
|
||||
$user_id = $_SESSION['user_id'];
|
||||
|
||||
// Fetch user data from the database
|
||||
$sql = "
|
||||
SELECT user.*, profiles.bio
|
||||
FROM user
|
||||
JOIN profiles ON user.id = profiles.user_id
|
||||
WHERE user.id = ?
|
||||
";
|
||||
|
||||
// Prepare the query and bind the user_id parameter
|
||||
$data = array($user_id);
|
||||
$result = Database::getData($sql, $data);
|
||||
|
||||
if (!empty($result)) {
|
||||
$user = $result[0]; // User details
|
||||
|
||||
// Create a username using fname and lname with capitalized first letters
|
||||
$first_name = ucfirst(strtolower($user['fname'])); // Lowercase all, then capitalize first letter
|
||||
$last_name = ucfirst(strtolower($user['lname'])); // Lowercase all, then capitalize first letter
|
||||
$username = $first_name . ' ' . $last_name; // Combine first name and last name with a space
|
||||
|
||||
// Set the profile picture
|
||||
$profile_picture = !empty($user['profile_picture']) ? htmlspecialchars($user['profile_picture']) : '../images/jp_balkenende.jpg';
|
||||
} else {
|
||||
echo "<p>User not found.</p>";
|
||||
exit();
|
||||
}
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Calendar</title>
|
||||
<link rel="stylesheet" href="../css/home.css">
|
||||
<script type="text/javascript" src="../js/app.js" defer></script>
|
||||
<link rel="icon" href="../images/favicon-32x32-circle.png">
|
||||
|
||||
<!-- Essential JS 2 Calendar's dependent material theme -->
|
||||
<link href="https://cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" type="text/css" />
|
||||
<link href="https://cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css" />
|
||||
<link href="https://cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<!-- Essential JS 2 all script -->
|
||||
<!-- <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script> -->
|
||||
|
||||
<!-- Essential JS 2 Calendar's dependent scripts -->
|
||||
<script src="https://cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
|
||||
<script src="https://cdn.syncfusion.com/ej2/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script>
|
||||
<script src="https://cdn.syncfusion.com/ej2/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
|
||||
<script src="https://cdn.syncfusion.com/ej2/ej2-lists/dist/global/ej2-lists.min.js" type="text/javascript"></script>
|
||||
<script src="https://cdn.syncfusion.com/ej2/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
|
||||
<script src="https://cdn.syncfusion.com/ej2/ej2-calendars/dist/global/ej2-calendars.min.js" type="text/javascript"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<nav id="sidebar">
|
||||
<ul>
|
||||
<li>
|
||||
<span class="logo"><?php echo htmlspecialchars($username); ?></span>
|
||||
<button onclick=toggleSidebar() id="toggle-btn">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="m313-480 155 156q11 11 11.5 27.5T468-268q-11 11-28 11t-28-11L228-452q-6-6-8.5-13t-2.5-15q0-8 2.5-15t8.5-13l184-184q11-11 27.5-11.5T468-692q11 11 11 28t-11 28L313-480Zm264 0 155 156q11 11 11.5 27.5T732-268q-11 11-28 11t-28-11L492-452q-6-6-8.5-13t-2.5-15q0-8 2.5-15t8.5-13l184-184q11-11 27.5-11.5T732-692q11 11 11 28t-11 28L577-480Z"/></svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<a href="home.php">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M240-200h120v-200q0-17 11.5-28.5T400-440h160q17 0 28.5 11.5T600-400v200h120v-360L480-740 240-560v360Zm-80 0v-360q0-19 8.5-36t23.5-28l240-180q21-16 48-16t48 16l240 180q15 11 23.5 28t8.5 36v360q0 33-23.5 56.5T720-120H560q-17 0-28.5-11.5T520-160v-200h-80v200q0 17-11.5 28.5T400-120H240q-33 0-56.5-23.5T160-200Zm320-270Z"/></svg>
|
||||
<span>Home</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="posts.php">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M520-640v-160q0-17 11.5-28.5T560-840h240q17 0 28.5 11.5T840-800v160q0 17-11.5 28.5T800-600H560q-17 0-28.5-11.5T520-640ZM120-480v-320q0-17 11.5-28.5T160-840h240q17 0 28.5 11.5T440-800v320q0 17-11.5 28.5T400-440H160q-17 0-28.5-11.5T120-480Zm400 320v-320q0-17 11.5-28.5T560-520h240q17 0 28.5 11.5T840-480v320q0 17-11.5 28.5T800-120H560q-17 0-28.5-11.5T520-160Zm-400 0v-160q0-17 11.5-28.5T160-360h240q17 0 28.5 11.5T440-320v160q0 17-11.5 28.5T400-120H160q-17 0-28.5-11.5T120-160Zm80-360h160v-240H200v240Zm400 320h160v-240H600v240Zm0-480h160v-80H600v80ZM200-200h160v-80H200v80Zm160-320Zm240-160Zm0 240ZM360-280Z"/></svg>
|
||||
<span>Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<button onclick=toggleSubMenu(this) class="dropdown-btn">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h207q16 0 30.5 6t25.5 17l57 57h320q33 0 56.5 23.5T880-640v400q0 33-23.5 56.5T800-160H160Zm0-80h640v-400H447l-80-80H160v480Zm0 0v-480 480Zm400-160v40q0 17 11.5 28.5T600-320q17 0 28.5-11.5T640-360v-40h40q17 0 28.5-11.5T720-440q0-17-11.5-28.5T680-480h-40v-40q0-17-11.5-28.5T600-560q-17 0-28.5 11.5T560-520v40h-40q-17 0-28.5 11.5T480-440q0 17 11.5 28.5T520-400h40Z"/></svg>
|
||||
<span>Create</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M480-361q-8 0-15-2.5t-13-8.5L268-556q-11-11-11-28t11-28q11-11 28-11t28 11l156 156 156-156q11-11 28-11t28 11q11 11 11 28t-11 28L508-372q-6 6-13 8.5t-15 2.5Z"/></svg>
|
||||
</button>
|
||||
<ul class="sub-menu">
|
||||
<div>
|
||||
<li><a href="#">Post</a></li>
|
||||
<li><a href="#">Guide</a></li>
|
||||
<li><a href="#">Workspace</a></li>
|
||||
</div>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<button onclick=toggleSubMenu(this) class="dropdown-btn">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="m221-313 142-142q12-12 28-11.5t28 12.5q11 12 11 28t-11 28L250-228q-12 12-28 12t-28-12l-86-86q-11-11-11-28t11-28q11-11 28-11t28 11l57 57Zm0-320 142-142q12-12 28-11.5t28 12.5q11 12 11 28t-11 28L250-548q-12 12-28 12t-28-12l-86-86q-11-11-11-28t11-28q11-11 28-11t28 11l57 57Zm339 353q-17 0-28.5-11.5T520-320q0-17 11.5-28.5T560-360h280q17 0 28.5 11.5T880-320q0 17-11.5 28.5T840-280H560Zm0-320q-17 0-28.5-11.5T520-640q0-17 11.5-28.5T560-680h280q17 0 28.5 11.5T880-640q0 17-11.5 28.5T840-600H560Z"/></svg>
|
||||
<span>Todo-Lists</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M480-361q-8 0-15-2.5t-13-8.5L268-556q-11-11-11-28t11-28q11-11 28-11t28 11l156 156 156-156q11-11 28-11t28 11q11 11 11 28t-11 28L508-372q-6 6-13 8.5t-15 2.5Z"/></svg>
|
||||
</button>
|
||||
<ul class="sub-menu">
|
||||
<div>
|
||||
<li><a href="#">Work</a></li>
|
||||
<li><a href="#">Private</a></li>
|
||||
<li><a href="#">Coding</a></li>
|
||||
<li><a href="#">Gardening</a></li>
|
||||
<li><a href="#">School</a></li>
|
||||
</div>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="calender.php">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-40q0-17 11.5-28.5T280-880q17 0 28.5 11.5T320-840v40h320v-40q0-17 11.5-28.5T680-880q17 0 28.5 11.5T720-840v40h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z"/></svg>
|
||||
<span>Calendar</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="profile.php">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M480-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM160-240v-32q0-34 17.5-62.5T224-378q62-31 126-46.5T480-440q66 0 130 15.5T736-378q29 15 46.5 43.5T800-272v32q0 33-23.5 56.5T720-160H240q-33 0-56.5-23.5T160-240Zm80 0h480v-32q0-11-5.5-20T700-306q-54-27-109-40.5T480-360q-56 0-111 13.5T260-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T560-640q0-33-23.5-56.5T480-720q-33 0-56.5 23.5T400-640q0 33 23.5 56.5T480-560Zm0-80Zm0 400Z"/></svg>
|
||||
<span>Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<main>
|
||||
<center>
|
||||
<div class="container">
|
||||
<h2>Calendar</h2>
|
||||
<br>
|
||||
<!-- Add the HTML <div> element -->
|
||||
<div id="element"/>
|
||||
<script>
|
||||
// initialize the Calendar component
|
||||
var calendar = new ej.calendars.Calendar();
|
||||
|
||||
// Render the initialized button.
|
||||
calendar.appendTo('#element')
|
||||
</script>
|
||||
</div>
|
||||
</center>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,114 @@
|
||||
<?php
|
||||
/*************************************************************
|
||||
Created 2019 by E.steens
|
||||
Edited 2020/2021/2022 by E. Steens and J. Wilmes
|
||||
*************************************************************/
|
||||
|
||||
// database implemented abstract because only one implementation required
|
||||
abstract class Database {
|
||||
private static $result = array();
|
||||
private static $numrows = -1;
|
||||
private static $currentrow = -1;
|
||||
|
||||
public static function dbConnect() {
|
||||
$dbhost = "localhost:3306";
|
||||
$dbname = "boydfranken_nl_";
|
||||
$dbuser = "root";
|
||||
$dbpass = '';
|
||||
$conn = ""; // connection string
|
||||
$pdo = ""; // handler
|
||||
$charset = 'utf8mb4';
|
||||
|
||||
$conn = "mysql:host=" . $dbhost . "; dbname=" . $dbname . ";charset=" . $charset;
|
||||
|
||||
$options = [ // define options for PDO connection
|
||||
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION, // give error in case of issue
|
||||
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC, // get row indexed by column name
|
||||
PDO::ATTR_EMULATE_PREPARES => false,
|
||||
];
|
||||
try {
|
||||
$pdo = new PDO($conn, $dbuser, $dbpass, $options); // create connection
|
||||
return $pdo;
|
||||
} catch (\PDOException $e) {
|
||||
throw new \PDOException($e->getMessage(), (int)$e->getCode());
|
||||
}
|
||||
}
|
||||
|
||||
// Function to execute a query that does not return data
|
||||
public static function executeQuery($p_sSql, $p_aData = "") {
|
||||
// execute query on Mysql server (INSERT, UPDATE, DELETE, etc.)
|
||||
// $p_sSQL contains MySQL query string with parameters '?'
|
||||
// $p_aData contains array with query parameters
|
||||
$pdo = Database::dbConnect();
|
||||
$stmt = $pdo->prepare($p_sSql); // prepare the query
|
||||
if (is_array($p_aData)) { // add the data
|
||||
return $stmt->execute($p_aData); // execute the query
|
||||
} else {
|
||||
return $stmt->execute(); // execute when no parameters
|
||||
}
|
||||
}
|
||||
|
||||
// Get Data: Modified to handle fetching posts with user details
|
||||
public static function getData($p_sSql, $p_aData = "", $print = false) {
|
||||
// execute query on Mysql server
|
||||
// $p_sSQL contains MySql query string with parameter ?'s
|
||||
// $p_aData contains array with query parameters
|
||||
$pdo = Database::dbConnect();
|
||||
$stmt = $pdo->prepare($p_sSql); // prepare the query
|
||||
|
||||
if (is_array($p_aData)) { // add the data
|
||||
$stmt->execute($p_aData); // execute the query
|
||||
} else {
|
||||
$stmt->execute(); // execute when no parameters
|
||||
}
|
||||
|
||||
// Fetch the results
|
||||
database::$numrows = $stmt->rowCount();
|
||||
$result = $stmt->fetchAll(); // get result
|
||||
database::$result = $result; // set class var
|
||||
database::$currentrow = 0; // set current row
|
||||
if ($print === true) { print_r($result); }
|
||||
return $result; // database query result
|
||||
}
|
||||
|
||||
public static function getNumrows() {
|
||||
return database::$numrows;
|
||||
}
|
||||
|
||||
public static function nextRow() {
|
||||
if (database::$currentrow < database::getNumRows() - 1) {
|
||||
database::$currentrow++;
|
||||
}
|
||||
echo "n:" . database::$currentrow;
|
||||
$row = array();
|
||||
array_push($row, database::$result[database::$currentrow]);
|
||||
return $row;
|
||||
}
|
||||
|
||||
public static function previousRow() {
|
||||
if (database::$currentrow > 0) {
|
||||
database::$currentrow--;
|
||||
}
|
||||
echo "p:" . database::$currentrow;
|
||||
$row = array();
|
||||
array_push($row, database::$result[database::$currentrow]);
|
||||
return $row;
|
||||
}
|
||||
|
||||
public static function currentRow() {
|
||||
$rownr = database::$currentrow;
|
||||
$row = array();
|
||||
array_push($row, database::$result[database::$currentrow]);
|
||||
return $row;
|
||||
}
|
||||
|
||||
public static function jsonParse($p_aValue) {
|
||||
if (is_array($p_aValue)) {
|
||||
return json_encode($p_aValue);
|
||||
}
|
||||
if (is_string($p_aValue)) {
|
||||
return json_decode($p_aValue);
|
||||
}
|
||||
}
|
||||
}
|
||||
?>
|
||||
@@ -0,0 +1,15 @@
|
||||
<?php
|
||||
// Include database connection (same as above)
|
||||
|
||||
$sql = "SELECT * FROM posts ORDER BY created_at DESC";
|
||||
$stmt = $pdo->query($sql);
|
||||
$posts = $stmt->fetchAll(PDO::FETCH_ASSOC);
|
||||
|
||||
foreach ($posts as $post) {
|
||||
echo "<div>";
|
||||
echo "<p><strong>User ID:</strong> " . htmlspecialchars($post['user_id']) . "</p>";
|
||||
echo "<p>" . nl2br(htmlspecialchars($post['content'])) . "</p>";
|
||||
echo "<p><small><em>Posted on: " . $post['created_at'] . "</em></small></p>";
|
||||
echo "</div><hr>";
|
||||
}
|
||||
?>
|
||||
150
projects/challange 2/SkillSphere/SkillSphere/assets/php/home.php
Normal file
150
projects/challange 2/SkillSphere/SkillSphere/assets/php/home.php
Normal file
@@ -0,0 +1,150 @@
|
||||
<?php
|
||||
session_start();
|
||||
include("database.inc.php");
|
||||
|
||||
// Check if the user is logged in
|
||||
if (!isset($_SESSION['user_id'])) {
|
||||
header("Location: login.php"); // Redirect to login page if not logged in
|
||||
exit();
|
||||
}
|
||||
|
||||
// Get the user ID from the session
|
||||
$user_id = $_SESSION['user_id'];
|
||||
|
||||
// Fetch user data from the database
|
||||
$sql = "
|
||||
SELECT user.*, profiles.bio, posts.content
|
||||
FROM user
|
||||
JOIN profiles ON user.id = profiles.user_id
|
||||
LEFT JOIN posts ON user.id = posts.user_id
|
||||
WHERE user.id = ?
|
||||
";
|
||||
|
||||
|
||||
// Prepare the query and bind the user_id parameter
|
||||
$data = array($user_id);
|
||||
$result = Database::getData($sql, $data);
|
||||
|
||||
if (!empty($result)) {
|
||||
$user = $result[0]; // User details
|
||||
|
||||
// Create a username using fname and lname with capitalized first letters
|
||||
$first_name = ucfirst(strtolower($user['fname'])); // Lowercase all, then capitalize first letter
|
||||
$last_name = ucfirst(strtolower($user['lname'])); // Lowercase all, then capitalize first letter
|
||||
$username = $first_name . ' ' . $last_name; // Combine first name and last name with a space
|
||||
|
||||
// Set the profile picture
|
||||
$profile_picture = !empty($user['profile_picture']) ? htmlspecialchars($user['profile_picture']) : '../images/jp_balkenende.jpg';
|
||||
} else {
|
||||
echo "<p>User not found.</p>";
|
||||
exit();
|
||||
}
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Home | SkillBuddy</title>
|
||||
<link rel="stylesheet" href="../css/home.css">
|
||||
<script type="text/javascript" src="../js/app.js" defer></script>
|
||||
<link rel="icon" href="../images/favicon-32x32-circle.png">
|
||||
</head>
|
||||
<body>
|
||||
<nav id="sidebar">
|
||||
<ul>
|
||||
<li>
|
||||
<span class="logo"><?php echo htmlspecialchars($username); ?></span>
|
||||
<button onclick=toggleSidebar() id="toggle-btn">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="m313-480 155 156q11 11 11.5 27.5T468-268q-11 11-28 11t-28-11L228-452q-6-6-8.5-13t-2.5-15q0-8 2.5-15t8.5-13l184-184q11-11 27.5-11.5T468-692q11 11 11 28t-11 28L313-480Zm264 0 155 156q11 11 11.5 27.5T732-268q-11 11-28 11t-28-11L492-452q-6-6-8.5-13t-2.5-15q0-8 2.5-15t8.5-13l184-184q11-11 27.5-11.5T732-692q11 11 11 28t-11 28L577-480Z"/></svg>
|
||||
</button>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="home.php">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M240-200h120v-200q0-17 11.5-28.5T400-440h160q17 0 28.5 11.5T600-400v200h120v-360L480-740 240-560v360Zm-80 0v-360q0-19 8.5-36t23.5-28l240-180q21-16 48-16t48 16l240 180q15 11 23.5 28t8.5 36v360q0 33-23.5 56.5T720-120H560q-17 0-28.5-11.5T520-160v-200h-80v200q0 17-11.5 28.5T400-120H240q-33 0-56.5-23.5T160-200Zm320-270Z"/></svg>
|
||||
<span>Home</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="posts.php">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M520-640v-160q0-17 11.5-28.5T560-840h240q17 0 28.5 11.5T840-800v160q0 17-11.5 28.5T800-600H560q-17 0-28.5-11.5T520-640ZM120-480v-320q0-17 11.5-28.5T160-840h240q17 0 28.5 11.5T440-800v320q0 17-11.5 28.5T400-440H160q-17 0-28.5-11.5T120-480Zm400 320v-320q0-17 11.5-28.5T560-520h240q17 0 28.5 11.5T840-480v320q0 17-11.5 28.5T800-120H560q-17 0-28.5-11.5T520-160Zm-400 0v-160q0-17 11.5-28.5T160-360h240q17 0 28.5 11.5T440-320v160q0 17-11.5 28.5T400-120H160q-17 0-28.5-11.5T120-160Zm80-360h160v-240H200v240Zm400 320h160v-240H600v240Zm0-480h160v-80H600v80ZM200-200h160v-80H200v80Zm160-320Zm240-160Zm0 240ZM360-280Z"/></svg>
|
||||
<span>Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<button onclick=toggleSubMenu(this) class="dropdown-btn">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h207q16 0 30.5 6t25.5 17l57 57h320q33 0 56.5 23.5T880-640v400q0 33-23.5 56.5T800-160H160Zm0-80h640v-400H447l-80-80H160v480Zm0 0v-480 480Zm400-160v40q0 17 11.5 28.5T600-320q17 0 28.5-11.5T640-360v-40h40q17 0 28.5-11.5T720-440q0-17-11.5-28.5T680-480h-40v-40q0-17-11.5-28.5T600-560q-17 0-28.5 11.5T560-520v40h-40q-17 0-28.5 11.5T480-440q0 17 11.5 28.5T520-400h40Z"/></svg>
|
||||
<span>Create</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M480-361q-8 0-15-2.5t-13-8.5L268-556q-11-11-11-28t11-28q11-11 28-11t28 11l156 156 156-156q11-11 28-11t28 11q11 11 11 28t-11 28L508-372q-6 6-13 8.5t-15 2.5Z"/></svg>
|
||||
</button>
|
||||
<ul class="sub-menu">
|
||||
<div>
|
||||
<li><a href="#">Post</a></li>
|
||||
<li><a href="#">Guide</a></li>
|
||||
<li><a href="#">Workspace</a></li>
|
||||
</div>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<button onclick=toggleSubMenu(this) class="dropdown-btn">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="m221-313 142-142q12-12 28-11.5t28 12.5q11 12 11 28t-11 28L250-228q-12 12-28 12t-28-12l-86-86q-11-11-11-28t11-28q11-11 28-11t28 11l57 57Zm0-320 142-142q12-12 28-11.5t28 12.5q11 12 11 28t-11 28L250-548q-12 12-28 12t-28-12l-86-86q-11-11-11-28t11-28q11-11 28-11t28 11l57 57Zm339 353q-17 0-28.5-11.5T520-320q0-17 11.5-28.5T560-360h280q17 0 28.5 11.5T880-320q0 17-11.5 28.5T840-280H560Zm0-320q-17 0-28.5-11.5T520-640q0-17 11.5-28.5T560-680h280q17 0 28.5 11.5T880-640q0 17-11.5 28.5T840-600H560Z"/></svg>
|
||||
<span>Todo-Lists</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M480-361q-8 0-15-2.5t-13-8.5L268-556q-11-11-11-28t11-28q11-11 28-11t28 11l156 156 156-156q11-11 28-11t28 11q11 11 11 28t-11 28L508-372q-6 6-13 8.5t-15 2.5Z"/></svg>
|
||||
</button>
|
||||
<ul class="sub-menu">
|
||||
<div>
|
||||
<li><a href="#">Work</a></li>
|
||||
<li><a href="#">Private</a></li>
|
||||
<li><a href="#">Coding</a></li>
|
||||
<li><a href="#">Home</a></li>
|
||||
<li><a href="#">School</a></li>
|
||||
</div>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="calendar.php">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-40q0-17 11.5-28.5T280-880q17 0 28.5 11.5T320-840v40h320v-40q0-17 11.5-28.5T680-880q17 0 28.5 11.5T720-840v40h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z"/></svg>
|
||||
<span>Calendar</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="profile.php">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M480-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM160-240v-32q0-34 17.5-62.5T224-378q62-31 126-46.5T480-440q66 0 130 15.5T736-378q29 15 46.5 43.5T800-272v32q0 33-23.5 56.5T720-160H240q-33 0-56.5-23.5T160-240Zm80 0h480v-32q0-11-5.5-20T700-306q-54-27-109-40.5T480-360q-56 0-111 13.5T260-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T560-640q0-33-23.5-56.5T480-720q-33 0-56.5 23.5T400-640q0 33 23.5 56.5T480-560Zm0-80Zm0 400Z"/></svg>
|
||||
<span>Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<main>
|
||||
<div class="container">
|
||||
<h1>Forum</h1>
|
||||
|
||||
<!-- Post Form -->
|
||||
<form method="POST" action="submit_post.php">
|
||||
<label for="content">Post Content:</label><br>
|
||||
<textarea id="content" name="content" rows="5" cols="50" required></textarea><br><br>
|
||||
<button type="submit">Submit Post</button>
|
||||
</form>
|
||||
|
||||
<h2>Posts</h2>
|
||||
<div id="posts">
|
||||
<?php
|
||||
if (!empty($result)) {
|
||||
foreach ($result as $post) {
|
||||
// Get the user's full name
|
||||
$post_user = ucfirst(strtolower($post['fname'])) . ' ' . ucfirst(strtolower($post['lname']));
|
||||
// Output the post content
|
||||
echo "<div class='post'>
|
||||
<p><strong>{$post_user}</strong> <span class='date'>{$post['created_at']}</span></p>
|
||||
<p>{$post['content']}</p>
|
||||
</div>";
|
||||
}
|
||||
} else {
|
||||
echo "<p>No posts available.</p>";
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-40q0-17 11.5-28.5T280-880q17 0 28.5 11.5T320-840v40h320v-40q0-17 11.5-28.5T680-880q17 0 28.5 11.5T720-840v40h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z"/></svg>
|
||||
|
After Width: | Height: | Size: 1017 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="m221-313 142-142q12-12 28-11.5t28 12.5q11 12 11 28t-11 28L250-228q-12 12-28 12t-28-12l-86-86q-11-11-11-28t11-28q11-11 28-11t28 11l57 57Zm0-320 142-142q12-12 28-11.5t28 12.5q11 12 11 28t-11 28L250-548q-12 12-28 12t-28-12l-86-86q-11-11-11-28t11-28q11-11 28-11t28 11l57 57Zm339 353q-17 0-28.5-11.5T520-320q0-17 11.5-28.5T560-360h280q17 0 28.5 11.5T880-320q0 17-11.5 28.5T840-280H560Zm0-320q-17 0-28.5-11.5T520-640q0-17 11.5-28.5T560-680h280q17 0 28.5 11.5T880-640q0 17-11.5 28.5T840-600H560Z"/></svg>
|
||||
|
After Width: | Height: | Size: 613 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h207q16 0 30.5 6t25.5 17l57 57h320q33 0 56.5 23.5T880-640v400q0 33-23.5 56.5T800-160H160Zm0-80h640v-400H447l-80-80H160v480Zm0 0v-480 480Zm400-160v40q0 17 11.5 28.5T600-320q17 0 28.5-11.5T640-360v-40h40q17 0 28.5-11.5T720-440q0-17-11.5-28.5T680-480h-40v-40q0-17-11.5-28.5T600-560q-17 0-28.5 11.5T560-520v40h-40q-17 0-28.5 11.5T480-440q0 17 11.5 28.5T520-400h40Z"/></svg>
|
||||
|
After Width: | Height: | Size: 544 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M520-640v-160q0-17 11.5-28.5T560-840h240q17 0 28.5 11.5T840-800v160q0 17-11.5 28.5T800-600H560q-17 0-28.5-11.5T520-640ZM120-480v-320q0-17 11.5-28.5T160-840h240q17 0 28.5 11.5T440-800v320q0 17-11.5 28.5T400-440H160q-17 0-28.5-11.5T120-480Zm400 320v-320q0-17 11.5-28.5T560-520h240q17 0 28.5 11.5T840-480v320q0 17-11.5 28.5T800-120H560q-17 0-28.5-11.5T520-160Zm-400 0v-160q0-17 11.5-28.5T160-360h240q17 0 28.5 11.5T440-320v160q0 17-11.5 28.5T400-120H160q-17 0-28.5-11.5T120-160Zm80-360h160v-240H200v240Zm400 320h160v-240H600v240Zm0-480h160v-80H600v80ZM200-200h160v-80H200v80Zm160-320Zm240-160Zm0 240ZM360-280Z"/></svg>
|
||||
|
After Width: | Height: | Size: 731 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M240-200h120v-200q0-17 11.5-28.5T400-440h160q17 0 28.5 11.5T600-400v200h120v-360L480-740 240-560v360Zm-80 0v-360q0-19 8.5-36t23.5-28l240-180q21-16 48-16t48 16l240 180q15 11 23.5 28t8.5 36v360q0 33-23.5 56.5T720-120H560q-17 0-28.5-11.5T520-160v-200h-80v200q0 17-11.5 28.5T400-120H240q-33 0-56.5-23.5T160-200Zm320-270Z"/></svg>
|
||||
|
After Width: | Height: | Size: 441 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M480-361q-8 0-15-2.5t-13-8.5L268-556q-11-11-11-28t11-28q11-11 28-11t28 11l156 156 156-156q11-11 28-11t28 11q11 11 11 28t-11 28L508-372q-6 6-13 8.5t-15 2.5Z"/></svg>
|
||||
|
After Width: | Height: | Size: 280 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="m313-480 155 156q11 11 11.5 27.5T468-268q-11 11-28 11t-28-11L228-452q-6-6-8.5-13t-2.5-15q0-8 2.5-15t8.5-13l184-184q11-11 27.5-11.5T468-692q11 11 11 28t-11 28L313-480Zm264 0 155 156q11 11 11.5 27.5T732-268q-11 11-28 11t-28-11L492-452q-6-6-8.5-13t-2.5-15q0-8 2.5-15t8.5-13l184-184q11-11 27.5-11.5T732-692q11 11 11 28t-11 28L577-480Z"/></svg>
|
||||
|
After Width: | Height: | Size: 455 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M480-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM160-240v-32q0-34 17.5-62.5T224-378q62-31 126-46.5T480-440q66 0 130 15.5T736-378q29 15 46.5 43.5T800-272v32q0 33-23.5 56.5T720-160H240q-33 0-56.5-23.5T160-240Zm80 0h480v-32q0-11-5.5-20T700-306q-54-27-109-40.5T480-360q-56 0-111 13.5T260-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T560-640q0-33-23.5-56.5T480-720q-33 0-56.5 23.5T400-640q0 33 23.5 56.5T480-560Zm0-80Zm0 400Z"/></svg>
|
||||
|
After Width: | Height: | Size: 592 B |
@@ -0,0 +1,115 @@
|
||||
<?php
|
||||
session_start();
|
||||
include("database.inc.php");
|
||||
|
||||
|
||||
function checkPost() {
|
||||
foreach($_POST as $key => $value) {
|
||||
$_POST[$key] = htmlentities(trim(strip_tags($value)));
|
||||
}
|
||||
}
|
||||
|
||||
if (isset($_POST['frmLogin'])) {
|
||||
echo 2;
|
||||
checkPost();
|
||||
}
|
||||
if ($_SERVER['REQUEST_METHOD'] == "POST") {
|
||||
$email = trim($_POST['email']);
|
||||
$password = $_POST['password'];
|
||||
|
||||
if (!empty($email) && !empty($password)) {
|
||||
echo 3;
|
||||
$sql = "SELECT * FROM user WHERE email = ?";
|
||||
$data = array($email);
|
||||
$result = Database::getData($sql, $data);
|
||||
if (!empty($result)) {
|
||||
echo 4;
|
||||
$hashed_password_from_db = $result[0]['password'];
|
||||
|
||||
var_dump($password);
|
||||
var_dump($hashed_password_from_db);
|
||||
|
||||
if (password_verify($password, $hashed_password_from_db)) {
|
||||
$_SESSION['user_id'] = $result[0]['id'];
|
||||
header("Location: profile.php");
|
||||
exit();
|
||||
} else {
|
||||
echo "<p style='color:red;'>Ongeldig wachtwoord.</p>";
|
||||
}
|
||||
} else {
|
||||
echo "<p style='color:red;'>Ongeldige email of wachtwoord.</p>";
|
||||
}
|
||||
} else {
|
||||
echo "<p style='color:red;'>Vul alstublieft een email en wachtwoord in.</p>";
|
||||
}
|
||||
}
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>SkillBuddy | Log In</title>
|
||||
<link rel="stylesheet" href="../css/auth.css">
|
||||
<link rel="icon" href="../images/favicon-32x32-circle.png">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
|
||||
<link rel="icon" href="../images/favicon-32x32-circle.png">
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
.success-message {
|
||||
color: green;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
background-color: #eaf7ea;
|
||||
border: 1px solid #d4e5d4;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
margin: 20px auto;
|
||||
max-width: 400px;
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
<div class="session">
|
||||
<div class="left">
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg enable-background="new 0 0 300 302.5" version="1.1" viewBox="0 0 300 302.5" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
|
||||
<style type="text/css">.st01{fill:#fff;}</style>
|
||||
<path class="st01" d="m126 302.2c-2.3 0.7-5.7 0.2-7.7-1.2l-105-71.6c-2-1.3-3.7-4.4-3.9-6.7l-9.4-126.7c-0.2-2.4 1.1-5.6 2.8-7.2l93.2-86.4c1.7-1.6 5.1-2.6 7.4-2.3l125.6 18.9c2.3 0.4 5.2 2.3 6.4 4.4l63.5 110.1c1.2 2 1.4 5.5 0.6 7.7l-46.4 118.3c-0.9 2.2-3.4 4.6-5.7 5.3l-121.4 37.4zm63.4-102.7c2.3-0.7 4.8-3.1 5.7-5.3l19.9-50.8c0.9-2.2 0.6-5.7-0.6-7.7l-27.3-47.3c-1.2-2-4.1-4-6.4-4.4l-53.9-8c-2.3-0.4-5.7 0.7-7.4 2.3l-40 37.1c-1.7 1.6-3 4.9-2.8 7.2l4.1 54.4c0.2 2.4 1.9 5.4 3.9 6.7l45.1 30.8c2 1.3 5.4 1.9 7.7 1.2l52-16.2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<form action="" method="POST" class="log-in" autocomplete="off">
|
||||
<h4>Welcome back to <span>SkillBuddy!</span></h4>
|
||||
<p>Log in to access your account.</p>
|
||||
|
||||
<div class="floating-label">
|
||||
<div class="icon">
|
||||
<i class="fas fa-envelope"></i>
|
||||
</div>
|
||||
<input placeholder="Email" type="email" name="email" id="email" autocomplete="off" required>
|
||||
<label for="email">Email:</label>
|
||||
</div>
|
||||
|
||||
<div class="floating-label">
|
||||
<div class="icon">
|
||||
<i class="fas fa-lock"></i>
|
||||
</div>
|
||||
<input placeholder="Password" type="password" name="password" id="password" autocomplete="off" required>
|
||||
<label for="password">Password:</label>
|
||||
</div>
|
||||
|
||||
<button type="submit">
|
||||
<i class="fas fa-sign-in-alt"></i> Log In
|
||||
</button>
|
||||
<?php
|
||||
if (isset($_GET['signup']) && $_GET['signup'] === 'success') {
|
||||
echo "<div class='success-message'>Account succesvol aangemaakt! Je kan nu inloggen.</div>";
|
||||
}
|
||||
?>
|
||||
|
||||
<p style="font-size:17px;">Don't have an account yet?<br><a href="signup.php">Sign Up</a></p>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,7 @@
|
||||
<?php
|
||||
session_start();
|
||||
session_unset(); // Remove all session variables
|
||||
session_destroy(); // Destroy the session
|
||||
|
||||
header("Location: login.php"); // Redirect to login page after logout
|
||||
exit();
|
||||
@@ -0,0 +1,126 @@
|
||||
<?php
|
||||
session_start();
|
||||
include("database.inc.php");
|
||||
|
||||
// Check if the user is logged in
|
||||
if (!isset($_SESSION['user_id'])) {
|
||||
header("Location: login.php"); // Redirect to login page if not logged in
|
||||
exit();
|
||||
}
|
||||
|
||||
// Get the user ID from the session
|
||||
$user_id = $_SESSION['user_id'];
|
||||
|
||||
// Fetch user data from the database
|
||||
$sql = "
|
||||
SELECT user.*, profiles.bio
|
||||
FROM user
|
||||
JOIN profiles ON user.id = profiles.user_id
|
||||
WHERE user.id = ?
|
||||
";
|
||||
|
||||
// Prepare the query and bind the user_id parameter
|
||||
$data = array($user_id);
|
||||
$result = Database::getData($sql, $data);
|
||||
|
||||
if (!empty($result)) {
|
||||
$user = $result[0]; // User details
|
||||
|
||||
// Create a username using fname and lname with capitalized first letters
|
||||
$first_name = ucfirst(strtolower($user['fname'])); // Lowercase all, then capitalize first letter
|
||||
$last_name = ucfirst(strtolower($user['lname'])); // Lowercase all, then capitalize first letter
|
||||
$username = $first_name . ' ' . $last_name; // Combine first name and last name with a space
|
||||
|
||||
// Set the profile picture
|
||||
$profile_picture = !empty($user['profile_picture']) ? htmlspecialchars($user['profile_picture']) : '../images/jp_balkenende.jpg';
|
||||
} else {
|
||||
echo "<p>User not found.</p>";
|
||||
exit();
|
||||
}
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Dashboard</title>
|
||||
<link rel="stylesheet" href="../css/home.css">
|
||||
<script type="text/javascript" src="../js/app.js" defer></script>
|
||||
<link rel="icon" href="../images/favicon-32x32-circle.png">
|
||||
</head>
|
||||
<body>
|
||||
<nav id="sidebar">
|
||||
<ul>
|
||||
<li>
|
||||
<span class="logo"><?php echo htmlspecialchars($username); ?></span>
|
||||
<button onclick=toggleSidebar() id="toggle-btn">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="m313-480 155 156q11 11 11.5 27.5T468-268q-11 11-28 11t-28-11L228-452q-6-6-8.5-13t-2.5-15q0-8 2.5-15t8.5-13l184-184q11-11 27.5-11.5T468-692q11 11 11 28t-11 28L313-480Zm264 0 155 156q11 11 11.5 27.5T732-268q-11 11-28 11t-28-11L492-452q-6-6-8.5-13t-2.5-15q0-8 2.5-15t8.5-13l184-184q11-11 27.5-11.5T732-692q11 11 11 28t-11 28L577-480Z"/></svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<a href="home.php">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M240-200h120v-200q0-17 11.5-28.5T400-440h160q17 0 28.5 11.5T600-400v200h120v-360L480-740 240-560v360Zm-80 0v-360q0-19 8.5-36t23.5-28l240-180q21-16 48-16t48 16l240 180q15 11 23.5 28t8.5 36v360q0 33-23.5 56.5T720-120H560q-17 0-28.5-11.5T520-160v-200h-80v200q0 17-11.5 28.5T400-120H240q-33 0-56.5-23.5T160-200Zm320-270Z"/></svg>
|
||||
<span>Home</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="posts.php">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M520-640v-160q0-17 11.5-28.5T560-840h240q17 0 28.5 11.5T840-800v160q0 17-11.5 28.5T800-600H560q-17 0-28.5-11.5T520-640ZM120-480v-320q0-17 11.5-28.5T160-840h240q17 0 28.5 11.5T440-800v320q0 17-11.5 28.5T400-440H160q-17 0-28.5-11.5T120-480Zm400 320v-320q0-17 11.5-28.5T560-520h240q17 0 28.5 11.5T840-480v320q0 17-11.5 28.5T800-120H560q-17 0-28.5-11.5T520-160Zm-400 0v-160q0-17 11.5-28.5T160-360h240q17 0 28.5 11.5T440-320v160q0 17-11.5 28.5T400-120H160q-17 0-28.5-11.5T120-160Zm80-360h160v-240H200v240Zm400 320h160v-240H600v240Zm0-480h160v-80H600v80ZM200-200h160v-80H200v80Zm160-320Zm240-160Zm0 240ZM360-280Z"/></svg>
|
||||
<span>Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<button onclick=toggleSubMenu(this) class="dropdown-btn">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h207q16 0 30.5 6t25.5 17l57 57h320q33 0 56.5 23.5T880-640v400q0 33-23.5 56.5T800-160H160Zm0-80h640v-400H447l-80-80H160v480Zm0 0v-480 480Zm400-160v40q0 17 11.5 28.5T600-320q17 0 28.5-11.5T640-360v-40h40q17 0 28.5-11.5T720-440q0-17-11.5-28.5T680-480h-40v-40q0-17-11.5-28.5T600-560q-17 0-28.5 11.5T560-520v40h-40q-17 0-28.5 11.5T480-440q0 17 11.5 28.5T520-400h40Z"/></svg>
|
||||
<span>Create</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M480-361q-8 0-15-2.5t-13-8.5L268-556q-11-11-11-28t11-28q11-11 28-11t28 11l156 156 156-156q11-11 28-11t28 11q11 11 11 28t-11 28L508-372q-6 6-13 8.5t-15 2.5Z"/></svg>
|
||||
</button>
|
||||
<ul class="sub-menu">
|
||||
<div>
|
||||
<li><a href="#">Post</a></li>
|
||||
<li><a href="#">Guide</a></li>
|
||||
<li><a href="#">Workspace</a></li>
|
||||
</div>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<button onclick=toggleSubMenu(this) class="dropdown-btn">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="m221-313 142-142q12-12 28-11.5t28 12.5q11 12 11 28t-11 28L250-228q-12 12-28 12t-28-12l-86-86q-11-11-11-28t11-28q11-11 28-11t28 11l57 57Zm0-320 142-142q12-12 28-11.5t28 12.5q11 12 11 28t-11 28L250-548q-12 12-28 12t-28-12l-86-86q-11-11-11-28t11-28q11-11 28-11t28 11l57 57Zm339 353q-17 0-28.5-11.5T520-320q0-17 11.5-28.5T560-360h280q17 0 28.5 11.5T880-320q0 17-11.5 28.5T840-280H560Zm0-320q-17 0-28.5-11.5T520-640q0-17 11.5-28.5T560-680h280q17 0 28.5 11.5T880-640q0 17-11.5 28.5T840-600H560Z"/></svg>
|
||||
<span>Todo-Lists</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M480-361q-8 0-15-2.5t-13-8.5L268-556q-11-11-11-28t11-28q11-11 28-11t28 11l156 156 156-156q11-11 28-11t28 11q11 11 11 28t-11 28L508-372q-6 6-13 8.5t-15 2.5Z"/></svg>
|
||||
</button>
|
||||
<ul class="sub-menu">
|
||||
<div>
|
||||
<li><a href="#">Work</a></li>
|
||||
<li><a href="#">Private</a></li>
|
||||
<li><a href="#">Coding</a></li>
|
||||
<li><a href="#">Home</a></li>
|
||||
<li><a href="#">School</a></li>
|
||||
</div>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="calendar.php">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-40q0-17 11.5-28.5T280-880q17 0 28.5 11.5T320-840v40h320v-40q0-17 11.5-28.5T680-880q17 0 28.5 11.5T720-840v40h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z"/></svg>
|
||||
<span>Calendar</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="profile.php">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M480-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM160-240v-32q0-34 17.5-62.5T224-378q62-31 126-46.5T480-440q66 0 130 15.5T736-378q29 15 46.5 43.5T800-272v32q0 33-23.5 56.5T720-160H240q-33 0-56.5-23.5T160-240Zm80 0h480v-32q0-11-5.5-20T700-306q-54-27-109-40.5T480-360q-56 0-111 13.5T260-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T560-640q0-33-23.5-56.5T480-720q-33 0-56.5 23.5T400-640q0 33 23.5 56.5T480-560Zm0-80Zm0 400Z"/></svg>
|
||||
<span>Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<main>
|
||||
<center>
|
||||
<div class="container">
|
||||
<h2>Dashboard</h2>
|
||||
<br>
|
||||
<img src="../images/image.png" alt="">
|
||||
</div>
|
||||
</center>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,185 @@
|
||||
<?php
|
||||
session_start();
|
||||
include("database.inc.php");
|
||||
|
||||
// Check if the user is logged in
|
||||
if (!isset($_SESSION['user_id'])) {
|
||||
header("Location: login.php"); // Redirect to login page if not logged in
|
||||
exit();
|
||||
}
|
||||
|
||||
// Get the user ID from the session
|
||||
$user_id = $_SESSION['user_id'];
|
||||
|
||||
// Fetch user data from the database
|
||||
$sql = "
|
||||
SELECT user.*, profiles.bio
|
||||
FROM user
|
||||
JOIN profiles ON user.id = profiles.user_id
|
||||
WHERE user.id = ?
|
||||
";
|
||||
|
||||
// Prepare the query and bind the user_id parameter
|
||||
$data = array($user_id);
|
||||
$result = Database::getData($sql, $data);
|
||||
|
||||
// Assuming the result is an associative array
|
||||
|
||||
if (!empty($result) && isset($result[0]['bio'])) {
|
||||
$bio = $result[0]['bio']; // Access the first row's bio
|
||||
$user = $result[0]; // Access other user data
|
||||
} else {
|
||||
$bio = 'No bio available'; // Default if bio is not found
|
||||
echo "<p>User not found or no profile available.</p>";
|
||||
exit();
|
||||
}
|
||||
|
||||
|
||||
if (!empty($result)) {
|
||||
$user = $result[0]; // User details
|
||||
|
||||
// Create a username using fname and lname with capitalized first letters
|
||||
$first_name = ucfirst(strtolower($user['fname'])); // Lowercase all, then capitalize first letter
|
||||
$last_name = ucfirst(strtolower($user['lname'])); // Lowercase all, then capitalize first letter
|
||||
$username = $first_name . ' ' . $last_name; // Combine first name and last name with a space
|
||||
|
||||
// Set the profile picture
|
||||
$profile_picture = !empty($user['profile_picture']) ? htmlspecialchars($user['profile_picture']) : '../images/jp_balkenende.jpg';
|
||||
} else {
|
||||
echo "<p>User not found.</p>";
|
||||
exit();
|
||||
}
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Profile</title>
|
||||
<link rel="stylesheet" href="../css/home.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
|
||||
<script type="text/javascript" src="../js/app.js" defer></script>
|
||||
<link rel="icon" href="../images/favicon-32x32-circle.png">
|
||||
</head>
|
||||
<body>
|
||||
<nav id="sidebar">
|
||||
<ul>
|
||||
<li>
|
||||
<span class="logo"><?php echo htmlspecialchars($username); ?></span>
|
||||
<button onclick=toggleSidebar() id="toggle-btn">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="m313-480 155 156q11 11 11.5 27.5T468-268q-11 11-28 11t-28-11L228-452q-6-6-8.5-13t-2.5-15q0-8 2.5-15t8.5-13l184-184q11-11 27.5-11.5T468-692q11 11 11 28t-11 28L313-480Zm264 0 155 156q11 11 11.5 27.5T732-268q-11 11-28 11t-28-11L492-452q-6-6-8.5-13t-2.5-15q0-8 2.5-15t8.5-13l184-184q11-11 27.5-11.5T732-692q11 11 11 28t-11 28L577-480Z"/></svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<a href="home.php">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M240-200h120v-200q0-17 11.5-28.5T400-440h160q17 0 28.5 11.5T600-400v200h120v-360L480-740 240-560v360Zm-80 0v-360q0-19 8.5-36t23.5-28l240-180q21-16 48-16t48 16l240 180q15 11 23.5 28t8.5 36v360q0 33-23.5 56.5T720-120H560q-17 0-28.5-11.5T520-160v-200h-80v200q0 17-11.5 28.5T400-120H240q-33 0-56.5-23.5T160-200Zm320-270Z"/></svg>
|
||||
<span>Home</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="posts.php">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M520-640v-160q0-17 11.5-28.5T560-840h240q17 0 28.5 11.5T840-800v160q0 17-11.5 28.5T800-600H560q-17 0-28.5-11.5T520-640ZM120-480v-320q0-17 11.5-28.5T160-840h240q17 0 28.5 11.5T440-800v320q0 17-11.5 28.5T400-440H160q-17 0-28.5-11.5T120-480Zm400 320v-320q0-17 11.5-28.5T560-520h240q17 0 28.5 11.5T840-480v320q0 17-11.5 28.5T800-120H560q-17 0-28.5-11.5T520-160Zm-400 0v-160q0-17 11.5-28.5T160-360h240q17 0 28.5 11.5T440-320v160q0 17-11.5 28.5T400-120H160q-17 0-28.5-11.5T120-160Zm80-360h160v-240H200v240Zm400 320h160v-240H600v240Zm0-480h160v-80H600v80ZM200-200h160v-80H200v80Zm160-320Zm240-160Zm0 240ZM360-280Z"/></svg>
|
||||
<span>Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<button onclick=toggleSubMenu(this) class="dropdown-btn">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h207q16 0 30.5 6t25.5 17l57 57h320q33 0 56.5 23.5T880-640v400q0 33-23.5 56.5T800-160H160Zm0-80h640v-400H447l-80-80H160v480Zm0 0v-480 480Zm400-160v40q0 17 11.5 28.5T600-320q17 0 28.5-11.5T640-360v-40h40q17 0 28.5-11.5T720-440q0-17-11.5-28.5T680-480h-40v-40q0-17-11.5-28.5T600-560q-17 0-28.5 11.5T560-520v40h-40q-17 0-28.5 11.5T480-440q0 17 11.5 28.5T520-400h40Z"/></svg>
|
||||
<span>Create</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M480-361q-8 0-15-2.5t-13-8.5L268-556q-11-11-11-28t11-28q11-11 28-11t28 11l156 156 156-156q11-11 28-11t28 11q11 11 11 28t-11 28L508-372q-6 6-13 8.5t-15 2.5Z"/></svg>
|
||||
</button>
|
||||
<ul class="sub-menu">
|
||||
<div>
|
||||
<li><a href="#">Post</a></li>
|
||||
<li><a href="#">Guide</a></li>
|
||||
<li><a href="#">Workspace</a></li>
|
||||
</div>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<button onclick=toggleSubMenu(this) class="dropdown-btn">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="m221-313 142-142q12-12 28-11.5t28 12.5q11 12 11 28t-11 28L250-228q-12 12-28 12t-28-12l-86-86q-11-11-11-28t11-28q11-11 28-11t28 11l57 57Zm0-320 142-142q12-12 28-11.5t28 12.5q11 12 11 28t-11 28L250-548q-12 12-28 12t-28-12l-86-86q-11-11-11-28t11-28q11-11 28-11t28 11l57 57Zm339 353q-17 0-28.5-11.5T520-320q0-17 11.5-28.5T560-360h280q17 0 28.5 11.5T880-320q0 17-11.5 28.5T840-280H560Zm0-320q-17 0-28.5-11.5T520-640q0-17 11.5-28.5T560-680h280q17 0 28.5 11.5T880-640q0 17-11.5 28.5T840-600H560Z"/></svg>
|
||||
<span>Todo-Lists</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M480-361q-8 0-15-2.5t-13-8.5L268-556q-11-11-11-28t11-28q11-11 28-11t28 11l156 156 156-156q11-11 28-11t28 11q11 11 11 28t-11 28L508-372q-6 6-13 8.5t-15 2.5Z"/></svg>
|
||||
</button>
|
||||
<ul class="sub-menu">
|
||||
<div>
|
||||
<li><a href="#">Work</a></li>
|
||||
<li><a href="#">Private</a></li>
|
||||
<li><a href="#">Coding</a></li>
|
||||
<li><a href="#">Home</a></li>
|
||||
<li><a href="#">School</a></li>
|
||||
</div>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="calendar.php">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-40q0-17 11.5-28.5T280-880q17 0 28.5 11.5T320-840v40h320v-40q0-17 11.5-28.5T680-880q17 0 28.5 11.5T720-840v40h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z"/></svg>
|
||||
<span>Calendar</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="profile.php">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M480-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM160-240v-32q0-34 17.5-62.5T224-378q62-31 126-46.5T480-440q66 0 130 15.5T736-378q29 15 46.5 43.5T800-272v32q0 33-23.5 56.5T720-160H240q-33 0-56.5-23.5T160-240Zm80 0h480v-32q0-11-5.5-20T700-306q-54-27-109-40.5T480-360q-56 0-111 13.5T260-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T560-640q0-33-23.5-56.5T480-720q-33 0-56.5 23.5T400-640q0 33 23.5 56.5T480-560Zm0-80Zm0 400Z"/></svg>
|
||||
<span>Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<main>
|
||||
<div class="container">
|
||||
<img src="<?php echo $profile_picture; ?>" alt="Profile Picture" width="100" height="100">
|
||||
<h2>Profile</h2>
|
||||
<div class="main">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<i class="fa fa-pen fa-xs edit"></i>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Name</td>
|
||||
<td>:</td>
|
||||
<td><?php echo htmlspecialchars($username); ?></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bio</td>
|
||||
<td>:</td>
|
||||
<td><?php echo htmlspecialchars($bio); ?></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Email</td>
|
||||
<td>:</td>
|
||||
<td><?php echo htmlspecialchars($user['email']); ?></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Address</td>
|
||||
<td>:</td>
|
||||
<td> Netherlands, Heerlen</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hobbies</td>
|
||||
<td>:</td>
|
||||
<td> Diving, Reading Book</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Job</td>
|
||||
<td>:</td>
|
||||
<td> Web Developer</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Skill</td>
|
||||
<td>:</td>
|
||||
<td> PHP, HTML, CSS, Java</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<p></p>
|
||||
<a class="logout" href="logout.php">
|
||||
<i class="fa fa-sign-out-alt fa-2x"></i>
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,98 @@
|
||||
<?php
|
||||
// session start
|
||||
session_start();
|
||||
include("database.inc.php");
|
||||
|
||||
if ($_SERVER['REQUEST_METHOD'] == "POST") {
|
||||
$firstname = trim($_POST['fname']);
|
||||
$lastname = trim($_POST['lname']);
|
||||
$email = trim($_POST['email']);
|
||||
$password = $_POST['password'];
|
||||
|
||||
if (!empty($firstname) && !empty($lastname) && filter_var($email, FILTER_VALIDATE_EMAIL) && !empty($password)) {
|
||||
$hashed_password = password_hash($password, PASSWORD_DEFAULT);
|
||||
|
||||
$sql = "INSERT INTO user (fname, lname, email, password) VALUES (?, ?, ?, ?)";
|
||||
$data = [$firstname, $lastname, $email, $hashed_password];
|
||||
|
||||
$result = Database::getData($sql, $data);
|
||||
|
||||
// Check based on expected `getData` behavior
|
||||
if ($result === true || $result > 0) { // Adjust as per Database::getData behavior
|
||||
header("Location: login.php?signup=success");
|
||||
exit;
|
||||
} else {
|
||||
echo "<script type='text/javascript'>alert('Registration failed. Please try again.');</script>";
|
||||
}
|
||||
} else {
|
||||
echo "<script type='text/javascript'>alert('Voer geldige informatie in.');</script>";
|
||||
}
|
||||
}
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>SkillBuddy | Sign Up</title>
|
||||
<link rel="stylesheet" href="../css/auth.css">
|
||||
<link rel="icon" href="../images/favicon-32x32-circle.png">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
|
||||
<link rel="icon" href="../assets/images/favicon-32x32-circle.png">
|
||||
</head>
|
||||
<body>
|
||||
<div class="session">
|
||||
<div class="left">
|
||||
<!-- Left Section (SVG or image) -->
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg enable-background="new 0 0 300 302.5" version="1.1" viewBox="0 0 300 302.5" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
|
||||
<style type="text/css">.st01{fill:#fff;}</style>
|
||||
<path class="st01" d="m126 302.2c-2.3 0.7-5.7 0.2-7.7-1.2l-105-71.6c-2-1.3-3.7-4.4-3.9-6.7l-9.4-126.7c-0.2-2.4 1.1-5.6 2.8-7.2l93.2-86.4c1.7-1.6 5.1-2.6 7.4-2.3l125.6 18.9c2.3 0.4 5.2 2.3 6.4 4.4l63.5 110.1c1.2 2 1.4 5.5 0.6 7.7l-46.4 118.3c-0.9 2.2-3.4 4.6-5.7 5.3l-121.4 37.4zm63.4-102.7c2.3-0.7 4.8-3.1 5.7-5.3l19.9-50.8c0.9-2.2 0.6-5.7-0.6-7.7l-27.3-47.3c-1.2-2-4.1-4-6.4-4.4l-53.9-8c-2.3-0.4-5.7 0.7-7.4 2.3l-40 37.1c-1.7 1.6-3 4.9-2.8 7.2l4.1 54.4c0.2 2.4 1.9 5.4 3.9 6.7l45.1 30.8c2 1.3 5.4 1.9 7.7 1.2l52-16.2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<form action="" method="POST" class="log-in" autocomplete="off">
|
||||
<h4>Welcome to <span>SkillBuddy!</span></h4>
|
||||
<p>Welcome! Sign up to view and create new posts!</p>
|
||||
|
||||
<div class="floating-label">
|
||||
<div class="icon">
|
||||
<i class="fas fa-user"></i> <!-- First Name Icon -->
|
||||
</div>
|
||||
<input placeholder="First Name" type="text" name="fname" id="fname" autocomplete="off" required>
|
||||
<label for="fname">First Name:</label>
|
||||
</div>
|
||||
|
||||
<div class="floating-label">
|
||||
<div class="icon">
|
||||
<i class="fas fa-user-tag"></i> <!-- Last Name Icon -->
|
||||
</div>
|
||||
<input placeholder="Last Name" type="text" name="lname" id="lname" autocomplete="off" required>
|
||||
<label for="lname">Last Name:</label>
|
||||
</div>
|
||||
|
||||
<div class="floating-label">
|
||||
<div class="icon">
|
||||
<i class="fas fa-envelope"></i> <!-- Email Icon -->
|
||||
</div>
|
||||
<input placeholder="Email" type="email" name="email" id="email" autocomplete="off" required>
|
||||
<label for="email">Email:</label>
|
||||
</div>
|
||||
|
||||
<div class="floating-label">
|
||||
<div class="icon">
|
||||
<i class="fas fa-lock"></i> <!-- Password Icon -->
|
||||
</div>
|
||||
<input placeholder="Password" type="password" name="password" id="password" autocomplete="off" required>
|
||||
<label for="password">Password:</label>
|
||||
</div>
|
||||
|
||||
<button type="submit">
|
||||
<i class="fas fa-sign-in-alt"></i> Sign Up
|
||||
</button>
|
||||
|
||||
<p style="font-size:17px;">Already have an account?<br><a href="login.php">Log In</a></p>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,33 @@
|
||||
<?php
|
||||
session_start();
|
||||
include("database.inc.php");
|
||||
|
||||
// Check if the user is logged in
|
||||
if (!isset($_SESSION['user_id'])) {
|
||||
header("Location: login.php"); // Redirect to login page if not logged in
|
||||
exit();
|
||||
}
|
||||
|
||||
// Get the user ID from the session
|
||||
$user_id = $_SESSION['user_id'];
|
||||
|
||||
// Check if the post content is submitted
|
||||
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['content'])) {
|
||||
// Clean up the content to avoid XSS attacks
|
||||
$content = htmlspecialchars($_POST['content']);
|
||||
|
||||
// Prepare the SQL query to insert the post
|
||||
$sql = "INSERT INTO posts (user_id, content) VALUES (?, ?)";
|
||||
|
||||
// Bind the parameters and execute the query
|
||||
$data = array($user_id, $content);
|
||||
|
||||
if (Database::executeQuery($sql, $data)) {
|
||||
// Post submitted successfully, redirect to the home page or forum page
|
||||
header("Location: home.php");
|
||||
exit();
|
||||
} else {
|
||||
echo "Error: Unable to submit the post.";
|
||||
}
|
||||
}
|
||||
?>
|
||||
31
projects/challange 2/SkillSphere/SkillSphere/index.html
Normal file
31
projects/challange 2/SkillSphere/SkillSphere/index.html
Normal file
@@ -0,0 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>SkillBuddy</title>
|
||||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
<script src="https://kit.fontawesome.com/bb89b598a6.js" crossorigin="anonymous"></script>
|
||||
<link rel="icon" href="assets/images/favicon-32x32-circle.png">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="background">
|
||||
<div class="main">
|
||||
<h1 id="header">SkillBuddy</h1>
|
||||
<div class="inhoud">
|
||||
<h1>SkillBuddy</h1>
|
||||
<p>Connect, learn, and grow with fellow Software Development students.</p>
|
||||
|
||||
<button id="readmore" onclick="window.location.href='#'">Read More <i class="fa-solid fa-arrow-right" style="font-size: large;"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="top-right-buttons">
|
||||
<button type="button" onclick="location.href = 'assets/php/login.php'" class="btn btn-primary login">Login</button>
|
||||
<button type="button" onclick="location.href = 'assets/php/signup.php'" class="btn btn-secondary sign-up">Sign Up</button>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user