diff --git a/projects/challange 2/SkillSphere/SkillSphere-Network b/projects/challange 2/SkillSphere/SkillSphere-Network deleted file mode 160000 index b746f8b..0000000 --- a/projects/challange 2/SkillSphere/SkillSphere-Network +++ /dev/null @@ -1 +0,0 @@ -Subproject commit b746f8b250d35bee3fdf110a7891dc89bcbb5937 diff --git a/projects/challange 2/SkillSphere/SkillSphere/README.md b/projects/challange 2/SkillSphere/SkillSphere/README.md new file mode 100644 index 0000000..648913e --- /dev/null +++ b/projects/challange 2/SkillSphere/SkillSphere/README.md @@ -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. + diff --git a/projects/challange 2/SkillSphere/SkillSphere/assets/css/auth.css b/projects/challange 2/SkillSphere/SkillSphere/assets/css/auth.css new file mode 100644 index 0000000..af0e854 --- /dev/null +++ b/projects/challange 2/SkillSphere/SkillSphere/assets/css/auth.css @@ -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; + } + \ No newline at end of file diff --git a/projects/challange 2/SkillSphere/SkillSphere/assets/css/dashboard.css b/projects/challange 2/SkillSphere/SkillSphere/assets/css/dashboard.css new file mode 100644 index 0000000..b8e0610 --- /dev/null +++ b/projects/challange 2/SkillSphere/SkillSphere/assets/css/dashboard.css @@ -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 */ \ No newline at end of file diff --git a/projects/challange 2/SkillSphere/SkillSphere/assets/css/forum-style.css b/projects/challange 2/SkillSphere/SkillSphere/assets/css/forum-style.css new file mode 100644 index 0000000..6afb474 --- /dev/null +++ b/projects/challange 2/SkillSphere/SkillSphere/assets/css/forum-style.css @@ -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; +} \ No newline at end of file diff --git a/projects/challange 2/SkillSphere/SkillSphere/assets/css/forum.css b/projects/challange 2/SkillSphere/SkillSphere/assets/css/forum.css new file mode 100644 index 0000000..2cf4c8d --- /dev/null +++ b/projects/challange 2/SkillSphere/SkillSphere/assets/css/forum.css @@ -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; +} \ No newline at end of file diff --git a/projects/challange 2/SkillSphere/SkillSphere/assets/css/home.css b/projects/challange 2/SkillSphere/SkillSphere/assets/css/home.css new file mode 100644 index 0000000..0c7f45d --- /dev/null +++ b/projects/challange 2/SkillSphere/SkillSphere/assets/css/home.css @@ -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; + } + } + } +} \ No newline at end of file diff --git a/projects/challange 2/SkillSphere/SkillSphere/assets/css/style.css b/projects/challange 2/SkillSphere/SkillSphere/assets/css/style.css new file mode 100644 index 0000000..889c8c5 --- /dev/null +++ b/projects/challange 2/SkillSphere/SkillSphere/assets/css/style.css @@ -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; + } +} \ No newline at end of file diff --git a/projects/challange 2/SkillSphere/SkillSphere/assets/images/3.png b/projects/challange 2/SkillSphere/SkillSphere/assets/images/3.png new file mode 100644 index 0000000..cda3122 Binary files /dev/null and b/projects/challange 2/SkillSphere/SkillSphere/assets/images/3.png differ diff --git a/projects/challange 2/SkillSphere/SkillSphere/assets/images/favicon-32x32-circle.png b/projects/challange 2/SkillSphere/SkillSphere/assets/images/favicon-32x32-circle.png new file mode 100644 index 0000000..e05c16d Binary files /dev/null and b/projects/challange 2/SkillSphere/SkillSphere/assets/images/favicon-32x32-circle.png differ diff --git a/projects/challange 2/SkillSphere/SkillSphere/assets/images/favicon-32x32-nobg.png b/projects/challange 2/SkillSphere/SkillSphere/assets/images/favicon-32x32-nobg.png new file mode 100644 index 0000000..2f081cf Binary files /dev/null and b/projects/challange 2/SkillSphere/SkillSphere/assets/images/favicon-32x32-nobg.png differ diff --git a/projects/challange 2/SkillSphere/SkillSphere/assets/images/favicon-32x32.png b/projects/challange 2/SkillSphere/SkillSphere/assets/images/favicon-32x32.png new file mode 100644 index 0000000..5786fec Binary files /dev/null and b/projects/challange 2/SkillSphere/SkillSphere/assets/images/favicon-32x32.png differ diff --git a/projects/challange 2/SkillSphere/SkillSphere/assets/images/image.png b/projects/challange 2/SkillSphere/SkillSphere/assets/images/image.png new file mode 100644 index 0000000..dbe1e9b Binary files /dev/null and b/projects/challange 2/SkillSphere/SkillSphere/assets/images/image.png differ diff --git a/projects/challange 2/SkillSphere/SkillSphere/assets/images/jp_balkenende.jpg b/projects/challange 2/SkillSphere/SkillSphere/assets/images/jp_balkenende.jpg new file mode 100644 index 0000000..94ddf51 Binary files /dev/null and b/projects/challange 2/SkillSphere/SkillSphere/assets/images/jp_balkenende.jpg differ diff --git a/projects/challange 2/SkillSphere/SkillSphere/assets/images/layered-waves-haikei.svg b/projects/challange 2/SkillSphere/SkillSphere/assets/images/layered-waves-haikei.svg new file mode 100644 index 0000000..3943478 --- /dev/null +++ b/projects/challange 2/SkillSphere/SkillSphere/assets/images/layered-waves-haikei.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/projects/challange 2/SkillSphere/SkillSphere/assets/js/app.js b/projects/challange 2/SkillSphere/SkillSphere/assets/js/app.js new file mode 100644 index 0000000..2eb42ac --- /dev/null +++ b/projects/challange 2/SkillSphere/SkillSphere/assets/js/app.js @@ -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') + }) +} \ No newline at end of file diff --git a/projects/challange 2/SkillSphere/SkillSphere/assets/js/script.js b/projects/challange 2/SkillSphere/SkillSphere/assets/js/script.js new file mode 100644 index 0000000..e69de29 diff --git a/projects/challange 2/SkillSphere/SkillSphere/assets/php/calendar.php b/projects/challange 2/SkillSphere/SkillSphere/assets/php/calendar.php new file mode 100644 index 0000000..f176a66 --- /dev/null +++ b/projects/challange 2/SkillSphere/SkillSphere/assets/php/calendar.php @@ -0,0 +1,151 @@ +User not found.

"; + exit(); +} +?> + + + + + + Calendar + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+

Calendar

+
+ +
+ +
+
+
+ + \ No newline at end of file diff --git a/projects/challange 2/SkillSphere/SkillSphere/assets/php/database.inc.php b/projects/challange 2/SkillSphere/SkillSphere/assets/php/database.inc.php new file mode 100644 index 0000000..7b87ede --- /dev/null +++ b/projects/challange 2/SkillSphere/SkillSphere/assets/php/database.inc.php @@ -0,0 +1,114 @@ + 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); + } + } +} +?> diff --git a/projects/challange 2/SkillSphere/SkillSphere/assets/php/fetch_posts.php b/projects/challange 2/SkillSphere/SkillSphere/assets/php/fetch_posts.php new file mode 100644 index 0000000..ffc4d4a --- /dev/null +++ b/projects/challange 2/SkillSphere/SkillSphere/assets/php/fetch_posts.php @@ -0,0 +1,15 @@ +query($sql); +$posts = $stmt->fetchAll(PDO::FETCH_ASSOC); + +foreach ($posts as $post) { + echo "
"; + echo "

User ID: " . htmlspecialchars($post['user_id']) . "

"; + echo "

" . nl2br(htmlspecialchars($post['content'])) . "

"; + echo "

Posted on: " . $post['created_at'] . "

"; + echo "
"; +} +?> diff --git a/projects/challange 2/SkillSphere/SkillSphere/assets/php/home.php b/projects/challange 2/SkillSphere/SkillSphere/assets/php/home.php new file mode 100644 index 0000000..05ac1fe --- /dev/null +++ b/projects/challange 2/SkillSphere/SkillSphere/assets/php/home.php @@ -0,0 +1,150 @@ +User not found.

"; + exit(); +} +?> + + + + + + Home | SkillBuddy + + + + + + +
+
+

Forum

+ + +
+
+

+ +
+ +

Posts

+
+ +

{$post_user} {$post['created_at']}

+

{$post['content']}

+
"; + } + } else { + echo "

No posts available.

"; + } +?> +
+ +
+ + \ No newline at end of file diff --git a/projects/challange 2/SkillSphere/SkillSphere/assets/php/icons/calendar_month_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg b/projects/challange 2/SkillSphere/SkillSphere/assets/php/icons/calendar_month_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg new file mode 100644 index 0000000..d915587 --- /dev/null +++ b/projects/challange 2/SkillSphere/SkillSphere/assets/php/icons/calendar_month_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/projects/challange 2/SkillSphere/SkillSphere/assets/php/icons/checklist_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg b/projects/challange 2/SkillSphere/SkillSphere/assets/php/icons/checklist_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg new file mode 100644 index 0000000..a57cf84 --- /dev/null +++ b/projects/challange 2/SkillSphere/SkillSphere/assets/php/icons/checklist_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/projects/challange 2/SkillSphere/SkillSphere/assets/php/icons/create_new_folder_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg b/projects/challange 2/SkillSphere/SkillSphere/assets/php/icons/create_new_folder_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg new file mode 100644 index 0000000..ec979bf --- /dev/null +++ b/projects/challange 2/SkillSphere/SkillSphere/assets/php/icons/create_new_folder_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/projects/challange 2/SkillSphere/SkillSphere/assets/php/icons/dashboard_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg b/projects/challange 2/SkillSphere/SkillSphere/assets/php/icons/dashboard_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg new file mode 100644 index 0000000..995c2b7 --- /dev/null +++ b/projects/challange 2/SkillSphere/SkillSphere/assets/php/icons/dashboard_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/projects/challange 2/SkillSphere/SkillSphere/assets/php/icons/home_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg b/projects/challange 2/SkillSphere/SkillSphere/assets/php/icons/home_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg new file mode 100644 index 0000000..8cbaa45 --- /dev/null +++ b/projects/challange 2/SkillSphere/SkillSphere/assets/php/icons/home_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/projects/challange 2/SkillSphere/SkillSphere/assets/php/icons/keyboard_arrow_down_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg b/projects/challange 2/SkillSphere/SkillSphere/assets/php/icons/keyboard_arrow_down_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg new file mode 100644 index 0000000..a9760a1 --- /dev/null +++ b/projects/challange 2/SkillSphere/SkillSphere/assets/php/icons/keyboard_arrow_down_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/projects/challange 2/SkillSphere/SkillSphere/assets/php/icons/keyboard_double_arrow_left_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg b/projects/challange 2/SkillSphere/SkillSphere/assets/php/icons/keyboard_double_arrow_left_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg new file mode 100644 index 0000000..f2479ad --- /dev/null +++ b/projects/challange 2/SkillSphere/SkillSphere/assets/php/icons/keyboard_double_arrow_left_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/projects/challange 2/SkillSphere/SkillSphere/assets/php/icons/person_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg b/projects/challange 2/SkillSphere/SkillSphere/assets/php/icons/person_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg new file mode 100644 index 0000000..dc0fc08 --- /dev/null +++ b/projects/challange 2/SkillSphere/SkillSphere/assets/php/icons/person_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/projects/challange 2/SkillSphere/SkillSphere/assets/php/login.php b/projects/challange 2/SkillSphere/SkillSphere/assets/php/login.php new file mode 100644 index 0000000..1ac0c17 --- /dev/null +++ b/projects/challange 2/SkillSphere/SkillSphere/assets/php/login.php @@ -0,0 +1,115 @@ + $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 "

Ongeldig wachtwoord.

"; + } + } else { + echo "

Ongeldige email of wachtwoord.

"; + } + } else { + echo "

Vul alstublieft een email en wachtwoord in.

"; + } +} +?> + + + + + + SkillBuddy | Log In + + + + + + + +
+
+ + + + + +
+
+

Welcome back to SkillBuddy!

+

Log in to access your account.

+ +
+
+ +
+ + +
+ +
+
+ +
+ + +
+ + + Account succesvol aangemaakt! Je kan nu inloggen.
"; + } + ?> + +

Don't have an account yet?
Sign Up

+ + + + + \ No newline at end of file diff --git a/projects/challange 2/SkillSphere/SkillSphere/assets/php/logout.php b/projects/challange 2/SkillSphere/SkillSphere/assets/php/logout.php new file mode 100644 index 0000000..09caa38 --- /dev/null +++ b/projects/challange 2/SkillSphere/SkillSphere/assets/php/logout.php @@ -0,0 +1,7 @@ +User not found.

"; + exit(); +} +?> + + + + + + Dashboard + + + + + + +
+
+
+

Dashboard

+
+ +
+
+
+ + \ No newline at end of file diff --git a/projects/challange 2/SkillSphere/SkillSphere/assets/php/profile.php b/projects/challange 2/SkillSphere/SkillSphere/assets/php/profile.php new file mode 100644 index 0000000..20bca67 --- /dev/null +++ b/projects/challange 2/SkillSphere/SkillSphere/assets/php/profile.php @@ -0,0 +1,185 @@ +User not found or no profile available.

"; + 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 "

User not found.

"; + exit(); +} +?> + + + + + + Profile + + + + + + + +
+
+ Profile Picture +

Profile

+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Name:
Bio:
Email:
Address: Netherlands, Heerlen
Hobbies: Diving, Reading Book
Job: Web Developer
Skill: PHP, HTML, CSS, Java
+
+
+

+ + + +
+
+ + \ No newline at end of file diff --git a/projects/challange 2/SkillSphere/SkillSphere/assets/php/signup.php b/projects/challange 2/SkillSphere/SkillSphere/assets/php/signup.php new file mode 100644 index 0000000..fd0ca02 --- /dev/null +++ b/projects/challange 2/SkillSphere/SkillSphere/assets/php/signup.php @@ -0,0 +1,98 @@ + 0) { // Adjust as per Database::getData behavior + header("Location: login.php?signup=success"); + exit; + } else { + echo ""; + } + } else { + echo ""; + } +} +?> + + + + + + SkillBuddy | Sign Up + + + + + + +
+
+ + + + + + +
+
+

Welcome to SkillBuddy!

+

Welcome! Sign up to view and create new posts!

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

Already have an account?
Log In

+ +
+
+ + \ No newline at end of file diff --git a/projects/challange 2/SkillSphere/SkillSphere/assets/php/submit_post.php b/projects/challange 2/SkillSphere/SkillSphere/assets/php/submit_post.php new file mode 100644 index 0000000..8071293 --- /dev/null +++ b/projects/challange 2/SkillSphere/SkillSphere/assets/php/submit_post.php @@ -0,0 +1,33 @@ + diff --git a/projects/challange 2/SkillSphere/SkillSphere/index.html b/projects/challange 2/SkillSphere/SkillSphere/index.html new file mode 100644 index 0000000..a626f27 --- /dev/null +++ b/projects/challange 2/SkillSphere/SkillSphere/index.html @@ -0,0 +1,31 @@ + + + + + + SkillBuddy + + + + + + + +
+
+

SkillBuddy

+
+

SkillBuddy

+

Connect, learn, and grow with fellow Software Development students.

+ + +
+
+
+ +
+ + +
+ + \ No newline at end of file