├── img ├── menu.png ├── user.png ├── banner.png ├── minglr.png ├── Minglr-Feed.png ├── Minglr-Home.png ├── Minglr-Profile.png ├── Minglr-Pvt-msg.png ├── favicon_minglr.png └── dark_img │ ├── SunIcon.png │ └── MoonIcon.png ├── logo ├── cover.png ├── logo.png ├── banner1.jpg ├── banner2.jpg ├── profile.png ├── Minglr logo1.png ├── Minglr logo2.png ├── Minglr logo3.png └── Minglr logo4.png ├── uploads ├── 65c669d705337.png ├── 65c7ab9f9f1c3.png ├── 65c7bb8eaee85.png └── DO_NOT_REMOVE_THIS_IMG.png ├── back ├── env.php ├── .htaccess ├── connection.php ├── logout.php └── search.php ├── error └── user_not_found.html ├── db ├── connection.php ├── database.sql └── validate.php ├── pvtmsg.php ├── LICENSE ├── style ├── darktheme_css │ ├── dark_about.css │ ├── dark_message.css │ ├── dark_feed.css │ ├── dark_account.css │ └── dark_style.css └── lighttheme_css │ ├── light_about.css │ ├── light_message.css │ ├── light_feed.css │ ├── light_account.css │ └── light_style.css ├── post.php ├── CONTRIBUTING.md ├── js └── script.js ├── LEARN.md ├── README.md ├── about-us.php ├── message.php ├── feed.php ├── index.php └── account.php /img/menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mayuresh-22/Minglr/HEAD/img/menu.png -------------------------------------------------------------------------------- /img/user.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mayuresh-22/Minglr/HEAD/img/user.png -------------------------------------------------------------------------------- /img/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mayuresh-22/Minglr/HEAD/img/banner.png -------------------------------------------------------------------------------- /img/minglr.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mayuresh-22/Minglr/HEAD/img/minglr.png -------------------------------------------------------------------------------- /logo/cover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mayuresh-22/Minglr/HEAD/logo/cover.png -------------------------------------------------------------------------------- /logo/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mayuresh-22/Minglr/HEAD/logo/logo.png -------------------------------------------------------------------------------- /logo/banner1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mayuresh-22/Minglr/HEAD/logo/banner1.jpg -------------------------------------------------------------------------------- /logo/banner2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mayuresh-22/Minglr/HEAD/logo/banner2.jpg -------------------------------------------------------------------------------- /logo/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mayuresh-22/Minglr/HEAD/logo/profile.png -------------------------------------------------------------------------------- /img/Minglr-Feed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mayuresh-22/Minglr/HEAD/img/Minglr-Feed.png -------------------------------------------------------------------------------- /img/Minglr-Home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mayuresh-22/Minglr/HEAD/img/Minglr-Home.png -------------------------------------------------------------------------------- /img/Minglr-Profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mayuresh-22/Minglr/HEAD/img/Minglr-Profile.png -------------------------------------------------------------------------------- /img/Minglr-Pvt-msg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mayuresh-22/Minglr/HEAD/img/Minglr-Pvt-msg.png -------------------------------------------------------------------------------- /img/favicon_minglr.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mayuresh-22/Minglr/HEAD/img/favicon_minglr.png -------------------------------------------------------------------------------- /logo/Minglr logo1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mayuresh-22/Minglr/HEAD/logo/Minglr logo1.png -------------------------------------------------------------------------------- /logo/Minglr logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mayuresh-22/Minglr/HEAD/logo/Minglr logo2.png -------------------------------------------------------------------------------- /logo/Minglr logo3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mayuresh-22/Minglr/HEAD/logo/Minglr logo3.png -------------------------------------------------------------------------------- /logo/Minglr logo4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mayuresh-22/Minglr/HEAD/logo/Minglr logo4.png -------------------------------------------------------------------------------- /img/dark_img/SunIcon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mayuresh-22/Minglr/HEAD/img/dark_img/SunIcon.png -------------------------------------------------------------------------------- /img/dark_img/MoonIcon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mayuresh-22/Minglr/HEAD/img/dark_img/MoonIcon.png -------------------------------------------------------------------------------- /uploads/65c669d705337.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mayuresh-22/Minglr/HEAD/uploads/65c669d705337.png -------------------------------------------------------------------------------- /uploads/65c7ab9f9f1c3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mayuresh-22/Minglr/HEAD/uploads/65c7ab9f9f1c3.png -------------------------------------------------------------------------------- /uploads/65c7bb8eaee85.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mayuresh-22/Minglr/HEAD/uploads/65c7bb8eaee85.png -------------------------------------------------------------------------------- /uploads/DO_NOT_REMOVE_THIS_IMG.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mayuresh-22/Minglr/HEAD/uploads/DO_NOT_REMOVE_THIS_IMG.png -------------------------------------------------------------------------------- /back/env.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /back/.htaccess: -------------------------------------------------------------------------------- 1 | AuthGroupFile /dev/null 2 | AuthUserFile /home/minglrcu/domains/minglr.cu.ma/.htpasswd/public_html/back/.htpasswd 3 | AuthName "ADMIN AREA" 4 | ErrorDocument 401 "Unauthorized Access" 5 | -------------------------------------------------------------------------------- /back/connection.php: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /error/user_not_found.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 |

User not found, try searching something different

6 |
7 | 8 | -------------------------------------------------------------------------------- /db/connection.php: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /back/logout.php: -------------------------------------------------------------------------------- 1 | 14 | window.location="'.$home_page.'"; 15 | 16 | '; 17 | exit; 18 | }else{ 19 | echo ' 20 | 23 | '; 24 | exit; 25 | } 26 | ?> 27 | -------------------------------------------------------------------------------- /back/search.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |

Search & Mingle

7 |
8 |
9 | 10 | 11 |
12 |
13 | 14 | -------------------------------------------------------------------------------- /pvtmsg.php: -------------------------------------------------------------------------------- 1 | 18 | window.location='message.php?recp2=".$recp2."'; 19 | "; 20 | 21 | ?> -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Mayuresh Choudhary 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /style/darktheme_css/dark_about.css: -------------------------------------------------------------------------------- 1 | .about-us { 2 | padding: 50px; 3 | } 4 | 5 | .about-us h2 { 6 | text-align: center; 7 | font-size: 32px; 8 | margin-bottom: 30px; 9 | } 10 | 11 | .about-us p { 12 | font-size: 18px; 13 | line-height: 1.5; 14 | text-align: justify; 15 | margin-bottom: 20px; 16 | } 17 | 18 | .about-us ul { 19 | list-style: none; 20 | margin: 0; 21 | padding: 0; 22 | } 23 | 24 | .about-us li { 25 | font-size: 18px; 26 | line-height: 1.5; 27 | margin-bottom: 10px; 28 | } 29 | 30 | .about-us li:last-child { 31 | margin-bottom: 0; 32 | } 33 | 34 | .about-us a { 35 | color: #007bff; 36 | text-decoration: none; 37 | } 38 | 39 | .about-us a:hover { 40 | text-decoration: underline; 41 | } 42 | 43 | .about-us-logo { 44 | display: block; 45 | margin: 0 auto; 46 | max-width: 200px; 47 | height: auto; 48 | margin-bottom: 30px; 49 | } 50 | 51 | .theme-button{ 52 | height: 35px; 53 | width: 35px; 54 | border: dashed #ffffff3d 0.5px; 55 | background-color: #2058d100; 56 | border-radius: 360px; 57 | padding: 5px; 58 | margin-top: 22px; 59 | } 60 | .menu-icon{ 61 | height: 15px; 62 | width: 15px; 63 | vertical-align: middle; 64 | margin-right: 5px; 65 | margin-left: 5px; 66 | } -------------------------------------------------------------------------------- /style/lighttheme_css/light_about.css: -------------------------------------------------------------------------------- 1 | .about-us { 2 | padding: 50px; 3 | } 4 | 5 | .about-us h2 { 6 | text-align: center; 7 | font-size: 32px; 8 | margin-bottom: 30px; 9 | } 10 | 11 | .about-us p { 12 | font-size: 18px; 13 | line-height: 1.5; 14 | text-align: justify; 15 | margin-bottom: 20px; 16 | } 17 | 18 | .about-us ul { 19 | list-style: none; 20 | margin: 0; 21 | padding: 0; 22 | } 23 | 24 | .about-us li { 25 | font-size: 18px; 26 | line-height: 1.5; 27 | margin-bottom: 10px; 28 | } 29 | 30 | .about-us li:last-child { 31 | margin-bottom: 0; 32 | } 33 | 34 | .about-us a { 35 | color: #007bff; 36 | text-decoration: none; 37 | } 38 | 39 | .about-us a:hover { 40 | text-decoration: underline; 41 | } 42 | 43 | .about-us-logo { 44 | display: block; 45 | margin: 0 auto; 46 | max-width:200px; 47 | height: auto; 48 | margin-bottom: 30px; 49 | } 50 | 51 | .theme-button{ 52 | height: 35px; 53 | width: 35px; 54 | border: dashed #ffffff3d 0.5px; 55 | background-color: #2058d100; 56 | border-radius: 360px; 57 | padding: 5px; 58 | margin-top: 22px; 59 | } 60 | 61 | .menu-icon{ 62 | height: 15px; 63 | width: 15px; 64 | vertical-align: middle; 65 | margin-right: 5px; 66 | margin-left: 5px; 67 | } -------------------------------------------------------------------------------- /post.php: -------------------------------------------------------------------------------- 1 | 31 | alert('Message Empty'); 32 | window.location='".$home_page."account.php?username=".$username."'; 33 | "; 34 | exit(); 35 | } 36 | 37 | // storing post in database 38 | if(isset($imagename)){ 39 | $sql = "INSERT INTO `posts` (`uid`, `msg`, `image`, `type`, `dop`) VALUES (?, ?, '$imagename', 'p', current_timestamp());"; 40 | }else{ 41 | $sql = "INSERT INTO `posts` (`uid`, `msg`, `type`, `dop`) VALUES (?, ?, 'p', current_timestamp());"; 42 | } 43 | 44 | // prepare statements 45 | $sql = mysqli_prepare($connection, $sql); 46 | mysqli_stmt_bind_param($sql, "is", $user_id, $message); 47 | // execute 48 | $sql->execute(); 49 | 50 | // displaying message and redirecting user back to account page 51 | if(isset($_POST['redirect'])){ 52 | echo ""; 56 | }else{ 57 | echo ""; 61 | } 62 | ?> -------------------------------------------------------------------------------- /style/darktheme_css/dark_message.css: -------------------------------------------------------------------------------- 1 | .message-body{ 2 | margin-top: 20px; 3 | width: 30%; 4 | padding: 5px; 5 | } 6 | 7 | .message-window{ 8 | padding: 20px; 9 | border: 1px solid grey; 10 | border-radius: 20px; 11 | width: 100%; 12 | height: 80%; 13 | } 14 | 15 | li{ 16 | display: inline-block; 17 | vertical-align: middle; 18 | } 19 | 20 | .message-account-profpic-online{ 21 | height: 70px; 22 | margin-right: 10px; 23 | border: 2px solid green; 24 | border-radius: 360px; 25 | } 26 | 27 | .message-account-profpic-offline{ 28 | height: 70px; 29 | margin-right: 10px; 30 | border: 2px solid gray; 31 | border-radius: 360px; 32 | } 33 | 34 | .message-window-head{ 35 | padding: 10px; 36 | width: 100%; 37 | border-bottom: 3px solid #13239ac0; 38 | margin-bottom: 10px; 39 | } 40 | 41 | .message-window-message-box{ 42 | overflow-y: auto; 43 | height: 80%; 44 | max-height: 80%; 45 | } 46 | 47 | .message-window-message-display-box{ 48 | padding-top: 5px; 49 | padding-bottom: 5px; 50 | } 51 | 52 | .message-window-message-display-box-message{ 53 | border-left: 2px solid #13239ac0; 54 | padding-left: 10px; 55 | } 56 | 57 | .message-window-input-message{ 58 | position:unset; 59 | top: 1%; 60 | } 61 | 62 | .message-window-input-message input{ 63 | text-align: left; 64 | width: 90%; 65 | height:30px; 66 | margin-left: 5%; 67 | margin-right: 5%; 68 | padding: 20px; 69 | border-radius: 360px; 70 | } 71 | 72 | .theme-button{ 73 | height: 35px; 74 | width: 35px; 75 | border: dashed #ffffff3d 0.5px; 76 | background-color: #2058d100; 77 | border-radius: 360px; 78 | padding: 5px; 79 | margin-top: 22px; 80 | } 81 | 82 | @media(max-width: 720px) { 83 | .message-body{ 84 | width: 90%; 85 | } 86 | .message-window-message-box{ 87 | height: 75%; 88 | max-height: 75%; 89 | font-size: 15px; 90 | } 91 | .message-window-input-message{ 92 | margin-top: 5px; 93 | } 94 | } 95 | .menu-icon{ 96 | height: 15px; 97 | width: 15px; 98 | vertical-align: middle; 99 | margin-right: 5px; 100 | margin-left: 5px; 101 | } -------------------------------------------------------------------------------- /style/lighttheme_css/light_message.css: -------------------------------------------------------------------------------- 1 | .message-body{ 2 | margin-top: 20px; 3 | width: 30%; 4 | padding: 5px; 5 | } 6 | 7 | .message-window{ 8 | padding: 20px; 9 | border: 1px solid grey; 10 | border-radius: 20px; 11 | width: 100%; 12 | height: 80%; 13 | } 14 | 15 | li{ 16 | display: inline-block; 17 | vertical-align: middle; 18 | } 19 | 20 | .message-account-profpic-online{ 21 | height: 70px; 22 | margin-right: 10px; 23 | border: 2px solid green; 24 | border-radius: 360px; 25 | } 26 | 27 | .message-account-profpic-offline{ 28 | height: 70px; 29 | margin-right: 10px; 30 | border: 2px solid gray; 31 | border-radius: 360px; 32 | } 33 | 34 | .message-window-head{ 35 | padding: 10px; 36 | width: 100%; 37 | border-bottom: 3px solid #13239ac0; 38 | margin-bottom: 10px; 39 | } 40 | 41 | .message-window-message-box{ 42 | overflow-y: auto; 43 | height: 80%; 44 | max-height: 80%; 45 | } 46 | 47 | .message-window-message-display-box{ 48 | padding-top: 5px; 49 | padding-bottom: 5px; 50 | } 51 | 52 | .message-window-message-display-box-message{ 53 | border-left: 2px solid #13239ac0; 54 | padding-left: 10px; 55 | } 56 | 57 | .message-window-input-message{ 58 | position:unset; 59 | top: 1%; 60 | } 61 | 62 | .message-window-input-message input{ 63 | text-align: left; 64 | width: 90%; 65 | height:30px; 66 | margin-left: 5%; 67 | margin-right: 5%; 68 | padding: 20px; 69 | border-radius: 360px; 70 | } 71 | 72 | .theme-button{ 73 | height: 35px; 74 | width: 35px; 75 | border: dashed #ffffff3d 0.5px; 76 | background-color: #2058d100; 77 | border-radius: 360px; 78 | padding: 5px; 79 | margin-top: 22px; 80 | } 81 | 82 | @media(max-width: 720px) { 83 | .message-body{ 84 | width: 90%; 85 | } 86 | .message-window-message-box{ 87 | height: 75%; 88 | max-height: 75%; 89 | font-size: 15px; 90 | } 91 | .message-window-input-message{ 92 | margin-top: 5px; 93 | } 94 | } 95 | .menu-icon{ 96 | height: 15px; 97 | width: 15px; 98 | vertical-align: middle; 99 | margin-right: 5px; 100 | margin-left: 5px; 101 | } -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to Minglr Social Network Site 2 | 3 | Thank you for considering contributing to Minglr! We welcome your contributions to help make Minglr better and more feature-rich. Before you get started, please take a moment to review the following guidelines to ensure a smooth and productive contribution process. 4 | 5 | ## Table of Contents 6 | 7 | - [How Can I Contribute?](#how-can-i-contribute) 8 | - [Reporting Bugs](#reporting-bugs) 9 | - [Suggesting Enhancements](#suggesting-enhancements) 10 | - [Working on Issues](#working-on-issues) 11 | - [Submitting Pull Requests](#submitting-pull-requests) 12 | 13 | 14 | ## How Can I Contribute? 15 | 16 | ### Reporting Bugs 17 | 18 | If you encounter a bug or issue with Minglr, please help us by [reporting it](mailto:mayureshchoudhary22@gmail.com) on our GitHub Issues page. When reporting a bug, please include as much detail as possible, including steps to reproduce the issue, expected behavior, and any relevant screenshots or error messages. 19 | 20 | ### Suggesting Enhancements 21 | 22 | We welcome suggestions for enhancements or new features. You can [submit your ideas](mailto:mayureshchoudhary22@gmail.com) on our GitHub Issues page. Before submitting, please check if a similar suggestion already exists, and if so, you can add your input to the existing thread. 23 | 24 | ### Working on Issues 25 | 26 | If you want to work on a specific issue, please check the list of open issues on our GitHub Issues page. If you find an issue you'd like to tackle, please comment on it to let others know you're working on it. If you have any questions about an issue, feel free to ask for clarification. 27 | 28 | ### Submitting Pull Requests 29 | 30 | We encourage contributors to submit pull requests (PRs) to address bugs, implement new features, or improve existing ones. To submit a PR, follow these steps: 31 | 32 | 1. Fork the Minglr repository to your GitHub account. 33 | 2. Create a new branch for your changes from the `main` branch. 34 | 3. Make your changes and ensure that your code adheres to our coding style. 35 | 4. Test your changes thoroughly to ensure they work as expected. 36 | 5. Commit your changes with clear and descriptive commit messages. 37 | 6. Push your changes to your forked repository. 38 | 7. Create a pull request from your branch to the `main` branch of the Minglr repository. 39 | 40 | Please be patient after submitting a PR, as our team will review it. We may provide feedback or request further changes before merging. 41 | -------------------------------------------------------------------------------- /js/script.js: -------------------------------------------------------------------------------- 1 | // Check button in mobile view 2 | const menuBTN = document.querySelector('.menu-btn'); 3 | const menuItems = document.querySelector('.menu-items'); 4 | 5 | function toggleBtn() { 6 | menuBTN.classList.toggle("change"); 7 | menuItems.classList.toggle("active"); 8 | } 9 | 10 | menuBTN.addEventListener('click', toggleBtn); 11 | 12 | // JavaScript code for the lightbox feature 13 | function openLightbox(imageSrc) { 14 | var lightboxOverlay = document.getElementById('lightbox-overlay'); 15 | var lightboxImage = document.getElementById('lightbox-image'); 16 | 17 | lightboxImage.src = imageSrc; 18 | lightboxOverlay.style.display = 'block'; 19 | } 20 | 21 | function closeLightbox() { 22 | var lightboxOverlay = document.getElementById('lightbox-overlay'); 23 | lightboxOverlay.style.display = 'none'; 24 | } 25 | 26 | document.addEventListener("DOMContentLoaded", function() { 27 | var images = document.querySelectorAll('.feed-post-display-box-image img'); 28 | 29 | images.forEach(function(image) { 30 | image.addEventListener('click', function() { 31 | openLightbox(this.src); 32 | }); 33 | }); 34 | }); 35 | 36 | //Dark theme code 37 | 38 | 39 | function changeTheme() { 40 | const theme = document.getElementById("theme"); 41 | const themeIcon = document.getElementById("theme-icon"); 42 | //console.log('theme:',theme.getAttribute("href").includes("darktheme_css")); 43 | if (theme.getAttribute("href").includes("darktheme_css")) { 44 | theme.setAttribute("href", "style/lighttheme_css/light_feed.css"); 45 | themeIcon.setAttribute("src", "img/dark_img/MoonIcon.png"); 46 | } else { 47 | theme.setAttribute("href", "style/darktheme_css/dark_feed.css"); 48 | themeIcon.setAttribute("src", "img/dark_img/SunIcon.png"); 49 | } 50 | } 51 | 52 | function changeAccountTheme() { 53 | const theme = document.getElementById("theme"); 54 | const themeIcon = document.getElementById("theme-icon"); 55 | //console.log('theme:',theme.getAttribute("href").includes("darktheme_css")); 56 | if (theme.getAttribute("href").includes("darktheme_css")) { 57 | theme.setAttribute("href", "style/lighttheme_css/light_account.css"); 58 | themeIcon.setAttribute("src", "img/dark_img/MoonIcon.png"); 59 | } else { 60 | theme.setAttribute("href", "style/darktheme_css/dark_account.css"); 61 | themeIcon.setAttribute("src", "img/dark_img/SunIcon.png"); 62 | } 63 | } 64 | 65 | function changeIndexTheme() { 66 | const theme = document.getElementById("theme"); 67 | const themeIcon = document.getElementById("theme-icon"); 68 | //console.log('theme:',theme.getAttribute("href").includes("darktheme_css")); 69 | if (theme.getAttribute("href").includes("darktheme_css")) { 70 | theme.setAttribute("href", "style/lighttheme_css/light_style.css"); 71 | themeIcon.setAttribute("src", "img/dark_img/MoonIcon.png"); 72 | } else { 73 | theme.setAttribute("href", "style/darktheme_css/dark_style.css"); 74 | themeIcon.setAttribute("src", "img/dark_img/SunIcon.png"); 75 | } 76 | } 77 | 78 | 79 | function changeMessageTheme() { 80 | const theme = document.getElementById("theme"); 81 | const themeIcon = document.getElementById("theme-icon"); 82 | //console.log('theme:',theme.getAttribute("href").includes("darktheme_css")); 83 | if (theme.getAttribute("href").includes("darktheme_css")) { 84 | theme.setAttribute("href", "style/lighttheme_css/light_message.css"); 85 | themeIcon.setAttribute("src", "img/dark_img/MoonIcon.png"); 86 | } else { 87 | theme.setAttribute("href", "style/darktheme_css/dark_message.css"); 88 | themeIcon.setAttribute("src", "img/dark_img/SunIcon.png"); 89 | } 90 | } 91 | 92 | 93 | 94 | 95 | -------------------------------------------------------------------------------- /db/database.sql: -------------------------------------------------------------------------------- 1 | -- phpMyAdmin SQL Dump 2 | -- version 5.2.1 3 | -- https://www.phpmyadmin.net/ 4 | -- 5 | -- Host: localhost:3306 6 | -- Generation Time: Sep 08, 2023 at 02:03 AM 7 | -- Server version: 5.7.42-cll-lve 8 | -- PHP Version: 7.4.33 9 | 10 | SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; 11 | START TRANSACTION; 12 | SET time_zone = "+00:00"; 13 | 14 | 15 | /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; 16 | /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; 17 | /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; 18 | /*!40101 SET NAMES utf8mb4 */; 19 | 20 | -- 21 | -- Database: `minglrcu_ma` 22 | -- 23 | 24 | -- -------------------------------------------------------- 25 | 26 | -- 27 | -- Table structure for table `messages` 28 | -- 29 | 30 | CREATE TABLE `messages` ( 31 | `msg_id` int(11) NOT NULL, 32 | `author` int(11) NOT NULL, 33 | `message` mediumtext NOT NULL, 34 | `room_id` int(11) NOT NULL, 35 | `dos` datetime NOT NULL 36 | ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; 37 | 38 | -- -------------------------------------------------------- 39 | 40 | -- 41 | -- Table structure for table `posts` 42 | -- 43 | 44 | CREATE TABLE `posts` ( 45 | `pid` int(11) NOT NULL, 46 | `uid` int(11) NOT NULL, 47 | `msg` mediumtext NOT NULL, 48 | `image` varchar(50) DEFAULT NULL, 49 | `type` varchar(1) NOT NULL DEFAULT 'p', 50 | `dop` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP 51 | ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; 52 | 53 | -- -------------------------------------------------------- 54 | 55 | -- 56 | -- Table structure for table `rooms` 57 | -- 58 | 59 | CREATE TABLE `rooms` ( 60 | `room_id` int(11) NOT NULL, 61 | `recp1` int(11) NOT NULL, 62 | `recp2` int(11) NOT NULL 63 | ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; 64 | 65 | -- -------------------------------------------------------- 66 | 67 | -- 68 | -- Table structure for table `users` 69 | -- 70 | 71 | CREATE TABLE `users` ( 72 | `id` int(11) NOT NULL, 73 | `username` varchar(20) NOT NULL, 74 | `fname` varchar(50) NOT NULL, 75 | `lname` varchar(50) NOT NULL, 76 | `email` varchar(256) NOT NULL, 77 | `password` text NOT NULL, 78 | `status` int(11) NOT NULL DEFAULT '0' 79 | ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; 80 | 81 | -- 82 | -- Indexes for dumped tables 83 | -- 84 | 85 | -- 86 | -- Indexes for table `messages` 87 | -- 88 | ALTER TABLE `messages` 89 | ADD PRIMARY KEY (`msg_id`), 90 | ADD KEY `msgroom` (`room_id`); 91 | 92 | -- 93 | -- Indexes for table `posts` 94 | -- 95 | ALTER TABLE `posts` 96 | ADD PRIMARY KEY (`pid`), 97 | ADD KEY `user_post` (`uid`); 98 | 99 | -- 100 | -- Indexes for table `rooms` 101 | -- 102 | ALTER TABLE `rooms` 103 | ADD PRIMARY KEY (`room_id`); 104 | 105 | -- 106 | -- Indexes for table `users` 107 | -- 108 | ALTER TABLE `users` 109 | ADD PRIMARY KEY (`id`); 110 | 111 | -- 112 | -- AUTO_INCREMENT for dumped tables 113 | -- 114 | 115 | -- 116 | -- AUTO_INCREMENT for table `messages` 117 | -- 118 | ALTER TABLE `messages` 119 | MODIFY `msg_id` int(11) NOT NULL AUTO_INCREMENT; 120 | 121 | -- 122 | -- AUTO_INCREMENT for table `posts` 123 | -- 124 | ALTER TABLE `posts` 125 | MODIFY `pid` int(11) NOT NULL AUTO_INCREMENT; 126 | 127 | -- 128 | -- AUTO_INCREMENT for table `rooms` 129 | -- 130 | ALTER TABLE `rooms` 131 | MODIFY `room_id` int(11) NOT NULL AUTO_INCREMENT; 132 | 133 | -- 134 | -- AUTO_INCREMENT for table `users` 135 | -- 136 | ALTER TABLE `users` 137 | MODIFY `id` int(11) NOT NULL AUTO_INCREMENT; 138 | 139 | -- 140 | -- Constraints for dumped tables 141 | -- 142 | 143 | -- 144 | -- Constraints for table `posts` 145 | -- 146 | ALTER TABLE `posts` 147 | ADD CONSTRAINT `user_post` FOREIGN KEY (`uid`) REFERENCES `users` (`id`) ON DELETE CASCADE ON UPDATE NO ACTION; 148 | COMMIT; 149 | 150 | /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; 151 | /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; 152 | /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */; 153 | -------------------------------------------------------------------------------- /LEARN.md: -------------------------------------------------------------------------------- 1 | # Learning and Understanding Minglr Social Network Site 2 | 3 | Welcome to the learning and understanding guide for the Minglr Social Network Site repository. This guide is designed to help you get acquainted with the project's codebase, architecture, and best practices. Whether you're a new contributor or just interested in exploring the inner workings of Minglr, this guide will provide you with a solid starting point. 4 | 5 | ## Table of Contents 6 | 7 | - [Project Structure](#project-structure) 8 | - [Technologies Used](#technologies-used) 9 | - [How Minglr Works](#how-minglr-works) 10 | - [Contributing Guidelines](#contributing-guidelines) 11 | - [Getting Started](#getting-started) 12 | - [Additional Resources](#additional-resources) 13 | 14 | ## Project Structure 15 | 16 | Minglr's codebase is organized in a structured manner to make it easier to navigate and understand. Here are the key directories and their purposes: 17 | 18 | - `/`: This directory contains the source code for the Minglr application. You'll find the PHP files that power the backend of the social networking site. 19 | 20 | - `/back`: This directory contains the code for connection, env, logout, and search files. 21 | 22 | - `/db`: Here, you'll find the SQL file (`database.sql`) for setting up the database schema used by Minglr and the connection and validation file. 23 | 24 | - `/error`: In this directory, you will find HTML files for error 25 | 26 | - `/style`: The public directory stores assets like CSS, and JavaScript. 27 | 28 | - `/uploads`: Here, you will find all the images uploaded by the users on the platform. 29 | 30 | ## Technologies Used 31 | 32 | Minglr relies on several technologies to deliver its functionality. Understanding these technologies can help you navigate the codebase more effectively: 33 | 34 | - **PHP**: The primary backend language used for server-side logic. 35 | 36 | - **HTML5 and CSS**: Responsible for structuring and styling the front end. 37 | 38 | - **JavaScript**: Enhances user interaction and provides dynamic features. 39 | 40 | - **MySQL**: The database management system used to store and retrieve data. 41 | 42 | ## How Minglr Works 43 | 44 | Minglr provides several key features, including user registration, profile management, news feeds, post creation, private messaging, and more. To better understand how these features are implemented, consider exploring the following components: 45 | 46 | - **User Authentication**: Check the code for user registration and login in the `/db/validation.php` directory. 47 | 48 | - **Profile Management**: Investigate the logic related to user profiles in the `/accpunt.php` file. 49 | 50 | - **News Feed**: Examine how news feeds are generated and displayed in the `/feed.php` file. 51 | 52 | - **Post Creation**: Learn how users can create and interact with posts by reviewing the code in the `/post.php` file. 53 | 54 | - **Private Messaging**: Discover the logic behind private messaging in the `/pvtmsg.php` file. 55 | 56 | ## Contributing Guidelines 57 | 58 | Before contributing to Minglr, make sure to read and follow our [Contributing Guidelines](CONTRIBUTING.md). These guidelines will help you understand how to report issues, suggest enhancements, and submit pull requests effectively. 59 | 60 | ## Getting Started 61 | 62 | To get started with Minglr, follow these steps: 63 | 64 | 1. Clone the Minglr repository to your local machine. 65 | 66 | 2. Set up a local development environment (e.g., XAMPP) and configure it to run the project. 67 | 68 | 3. Review the project structure and explore the codebase to get a better understanding of how Minglr works. 69 | 70 | 4. Experiment with making changes or improvements within your forked repository. 71 | 72 | 5. Follow the [Contributing Guidelines](CONTRIBUTING.md) to submit your contributions. 73 | 74 | ## Additional Resources 75 | 76 | - If you encounter any issues or have questions, please refer to the project's [GitHub Issues](#) section for assistance. 77 | 78 | - Check the [LICENSE](LICENSE) file for information on Minglr's licensing. 79 | 80 | By following this guide, you'll gain a better understanding of Minglr's codebase and be better equipped to contribute to the project or utilize it for your own purposes. Good luck and happy coding! 81 | -------------------------------------------------------------------------------- /db/validate.php: -------------------------------------------------------------------------------- 1 | '; 47 | echo 'alert("' . $message . '");'; 48 | echo 'window.location="' . $location . '";'; 49 | echo ''; 50 | } 51 | 52 | // checking if the user is logging in or registering 53 | if (isset($_POST['lgn']) && isset($username) && isset($password)) { 54 | // passing required value to validate function and checking the result 55 | validate($username, $password, $connection); 56 | if ($login == 0) { 57 | alert_message("Username & Password don't match", $home_page); 58 | exit(); 59 | } 60 | /* As logged in details are validated, we will start the session for that user. 61 | We will be adding some piece of information */ 62 | 63 | // to add user id we will run another query 64 | $sql = "SELECT `id` FROM `users` WHERE `username` = '$username';"; 65 | $result = mysqli_query($connection, $sql); 66 | 67 | if (mysqli_num_rows($result) == 1) { 68 | // fetching and storing records in variables 69 | $row = mysqli_fetch_assoc($result); 70 | $uid = $row['id']; 71 | } 72 | 73 | // start session after verification 74 | session_start(); 75 | $_SESSION['username'] = $username; 76 | $_SESSION['status'] = $login; 77 | $_SESSION['id'] = $uid; 78 | 79 | echo ''; 82 | } else { 83 | if (isset($_POST['regst']) && isset($username) && isset($password) && isset($email) && isset($fname) && isset($lname)) { 84 | // Validating email format using RegEx 85 | if (!filter_var($email, FILTER_VALIDATE_EMAIL)) { 86 | alert_message("Invalid email format", $home_page); 87 | exit(); 88 | } 89 | 90 | // Validating password using RegEx 91 | $password_pattern = '/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/'; 92 | if (!preg_match($password_pattern, $password)) { 93 | alert_message("Invalid password format", $home_page); 94 | exit(); 95 | } 96 | 97 | $hashed_pswd = crypt($password, '$1$'); 98 | 99 | $sql = "SELECT * FROM `users` WHERE `username` = '$username'"; 100 | $result = mysqli_query($connection, $sql); 101 | 102 | // check whether username exists 103 | if (mysqli_num_rows($result) == 0) { 104 | /* After passing validation (username exists? .etc) we will create an account for the user */ 105 | $sql = "INSERT INTO `users` (`id`, `username`, `fname`, `lname`, `email`, `password`) VALUES (NULL, '$username', '$fname', '$lname', '$email', '$hashed_pswd')"; 106 | 107 | mysqli_query($connection, $sql); 108 | 109 | // to add user id we will run another query 110 | $sql = "SELECT `id` FROM `users` WHERE `username` = '$username';"; 111 | $result = mysqli_query($connection, $sql); 112 | 113 | if (mysqli_num_rows($result) == 1) { 114 | // fetching and storing records in variables 115 | $row = mysqli_fetch_assoc($result); 116 | $uid = $row['id']; 117 | } 118 | 119 | /* After creating an account for the user we will start the session for the user and redirect the user to the user's account page */ 120 | session_start(); 121 | $_SESSION["username"] = $username; 122 | $_SESSION["status"] = $login; 123 | $_SESSION["id"] = $uid; 124 | 125 | echo ''; 129 | } else { 130 | alert_message("Username already taken. Try another one", $home_page); 131 | } 132 | } 133 | } 134 | ?> 135 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | https://github.com/Mayuresh-22/Minglr/assets/111348926/332b573b-9811-4878-869c-43029c318a50 2 | 3 | 4 | # Minglr - Social Networking Site 5 | 6 | [![CodeFactor](https://www.codefactor.io/repository/github/mayuresh-22/minglr/badge)](https://www.codefactor.io/repository/github/mayuresh-22/minglr) 7 | 8 | Minglr is a secure and feature-rich social networking site that enables users to connect, interact, and share content with others. Built with PHP for the backend and HTML5, CSS, and JavaScript for the front end, Minglr provides a seamless and enjoyable user experience. 9 | 10 | ![Minglr Preview](https://github.com/Mayuresh-22/Minglr/blob/main/img/minglr.png) 11 | 12 | ## Features 13 | 14 | - **User Registration and Authentication:** Easily create an account and securely log in to Minglr. 15 | - **Account Page:** Every user gets their dedicated account page, displaying their profile information, posts, and photos. 16 | - **Feed Page:** Browse a dynamic feed of posts shared by other users, keeping you updated on the latest content. 17 | - **Post Sharing:** Share posts directly from your account page or the feed page, expressing yourself and connecting with others. 18 | - **Photo Sharing:** Share photos along with your posts to enrich your content and engage with the community. 19 | - **Info Tab:** View and manage your account information, including profile details and privacy settings, in a dedicated Info tab. 20 | - **Photos Tab:** Access a collection of photos shared by you on your account page's Photos tab. 21 | - **Explore Other Users:** Visit other users' account pages to see their shared posts, photos, and information. 22 | - **Private Messaging:** Communicate privately with other users through the messaging feature, fostering personal connections. 23 | 24 | ## Demo 25 | 26 | Experience Minglr firsthand with a live website at [https://minglr.cu.ma/](https://links.mayuresh.me/minglr). 27 | 28 | ## Screenshots 29 | 30 | | Account Page | 31 | | ------------ | 32 | | ![Account Page](https://github.com/Mayuresh-22/Minglr/blob/main/img/Minglr-Profile.png) | 33 | 34 | | Feed Page | 35 | | ------------ | 36 | ![Feed Page](https://github.com/Mayuresh-22/Minglr/blob/main/img/Minglr-Feed.png) | 37 | 38 | | Private Messaging | 39 | | ----------------- | 40 | ![Private Messaging](https://github.com/Mayuresh-22/Minglr/blob/main/img/Minglr-Pvt-msg.png) | 41 | 42 | Certainly! Here are the modified installation steps including installing and configuring XAMPP and changing the directory to `htdocs` before cloning the GitHub repository: 43 | 44 | ## Setting up the project (developer) 45 | 46 | Follow these steps to set up Minglr locally using XAMPP: 47 | 48 | 1. Install XAMPP: 49 | - Download and install XAMPP from the [official website](https://www.apachefriends.org/index.html) based on your operating system. 50 | - Launch XAMPP after the installation is complete. 51 | 52 | 2. Configure XAMPP: 53 | - Open XAMPP and start the Apache and MySQL services. 54 | - If these services do not start, you may need to change the ports for Apache and MySQL in the XAMPP settings. 55 | 56 | 3. Clone the GitHub repository: 57 | - Head over to C:\xampp\htdocs in your Windows Explorer. (If you installed XAMPP in a different location, you will need to navigate to that folder instead.) 58 | - Open the terminal or command prompt in the same folder. 59 | - Execute the following command to change the directory to `htdocs`: 60 | ```bash 61 | cd C:\xampp\htdocs 62 | ``` 63 | 64 | 4. Clone the repository: 65 | - Execute the following command to clone the GitHub repository: 66 | ```bash 67 | git clone https://github.com/Mayuresh-22/Minglr.git 68 | ``` 69 | 70 | 5. Create and Configure the Database: 71 | - Open the XAMPP control panel and start the Apache and MySQL services. 72 | - Open `http://localhost/phpmyadmin` in a web browser to access phpMyAdmin. 73 | - Create a new MySQL database by clicking "new" option on left sidebar. Name it `minglr`. 74 | - Import the database schema from the provided SQL file (`db/database.sql`). 75 | - Update the database configuration in [`db/connection.php`](db/connection.php) with your database credentials (For example: LOCALHOST, USERNAME, PASSWORD, DATABASE). Follow this step only if you have changed the default database name or credentials. 76 | 77 | 6. Start the Development Server: 78 | - Open XAMPP and start the Apache and MySQL services (If not already started). 79 | - Launch a web browser and visit `http://localhost/Minglr` or `http://127.0.0.1/Minglr` to access Minglr. 80 | 81 | Congratulations! You have successfully set up Minglr on your machine. 82 | 83 | Please note that the steps may vary slightly based on your specific operating system and XAMPP configuration. Make sure to adjust the paths and commands accordingly. 84 | 85 | ## Technologies Used 86 | 87 | - PHP 88 | - HTML5 89 | - CSS 90 | - JavaScript 91 | - MySQL 92 | - [DiceBear](https://www.dicebear.com/) HTTP API 93 | 94 | ## Contributing 95 | 96 | Contributions to Minglr are welcome! If you'd like to contribute, please follow these steps: 97 | 98 | 1. Fork the repository. 99 | 2. Create a new branch for your feature/bug fix. 100 | 3. Make your changes and commit them with descriptive commit messages. 101 | 4. Push your changes to your forked repository. 102 | 5. Submit a pull request, explaining your changes and why they should be merged. 103 | 104 | ## Project Admin 105 | [Mayuresh Choudhary](https://github.com/Mayuresh-22) 106 | Email: [mayureshchoudhary22@gmail.com](mailto:mayureshchoudhary22@gmail.com) 107 | 108 | ## 💖 Thanks to Our Contributors 109 | 110 | 111 | 112 | 113 | 114 | ## License 115 | 116 | This project is licensed under the [MIT License](LICENSE). 117 | -------------------------------------------------------------------------------- /style/lighttheme_css/light_feed.css: -------------------------------------------------------------------------------- 1 | body{ 2 | color: black; 3 | background-color: rgb(250 251 253); 4 | } 5 | 6 | .feed-page-body{ 7 | width: 80%; 8 | } 9 | 10 | .theme-icon{ 11 | color: rgb(255, 255, 255); 12 | } 13 | 14 | 15 | .feed-page-head{ 16 | margin-top: 20px; 17 | margin-bottom: 30px; 18 | padding-bottom: 10px; 19 | border-bottom: solid grey 1px; 20 | } 21 | 22 | .feed-posting-box{ 23 | margin-top: 20px; 24 | background-color: white; 25 | border: solid rgba(128, 128, 128, 0.248) 1px; 26 | border-radius: 5px; 27 | padding-top: 20px; 28 | padding-left: 50px; 29 | padding-right: 50px; 30 | } 31 | 32 | .feed-post-box-textarea{ 33 | width: 100%; 34 | height:15%; 35 | padding: 30px; 36 | font-size: 17px; 37 | border-radius: 5px; 38 | min-width: 100%; 39 | max-width: 100%; 40 | } 41 | 42 | .post-btn{ 43 | width: 80px; 44 | margin-top: 8px; 45 | margin-bottom: 16px; 46 | padding: 10px; 47 | border-radius: 7px; 48 | border: solid rgba(243, 243, 243, 0.76) 1px; 49 | background:#163353; 50 | color: #fff !important; 51 | } 52 | 53 | .feed-post-display-box{ 54 | margin-top: 20px; 55 | background-color: white; 56 | border: solid rgba(128, 128, 128, 0.356) 1px; 57 | border-radius: 5px; 58 | padding-top: 20px; 59 | padding-left: 40px; 60 | padding-right: 40px; 61 | } 62 | 63 | .feed-post-display-box-head li{ 64 | display: inline-block; 65 | vertical-align: middle; 66 | } 67 | .feed-post-display-box-head img{ 68 | height: 40px; 69 | border: solid green 1px; 70 | border-radius: 360px; 71 | } 72 | 73 | .feed-post-display-box-message{ 74 | display: block; 75 | margin-top: 20px; 76 | margin-bottom: 20px; 77 | padding-right: 20px; 78 | padding-left: 20px; 79 | font-size: 17px; 80 | border-left: solid #13239a 3px; 81 | } 82 | 83 | 84 | .feed-post-display-box-image{ 85 | padding-right: 60%; 86 | } 87 | 88 | input.postimage{ 89 | border: none; 90 | margin-left: 0px; 91 | padding-left: 0px; 92 | padding-top: 7px; 93 | margin-bottom: 0px; 94 | height: 65px; 95 | } 96 | 97 | ::-webkit-file-upload-button{ 98 | width: 100px; 99 | padding: 10px; 100 | border: none; 101 | border-radius: 7px; 102 | background-color: #163353; 103 | color: white; 104 | } 105 | 106 | 107 | /* Message Page CSS */ 108 | 109 | .message-body{ 110 | margin-top: 20px; 111 | width: 30%; 112 | padding: 5px; 113 | } 114 | 115 | .message-window{ 116 | padding: 20px; 117 | border: 1px solid grey; 118 | border-radius: 20px; 119 | width: 100%; 120 | height: 80%; 121 | } 122 | 123 | li{ 124 | display: inline-block; 125 | vertical-align: middle; 126 | } 127 | 128 | .message-account-profpic-online{ 129 | height: 70px; 130 | margin-right: 10px; 131 | border: 2px solid green; 132 | border-radius: 360px; 133 | } 134 | 135 | .message-account-profpic-offline{ 136 | height: 70px; 137 | margin-right: 10px; 138 | border: 2px solid gray; 139 | border-radius: 360px; 140 | } 141 | 142 | .message-window-head{ 143 | padding: 10px; 144 | width: 100%; 145 | border-bottom: 3px solid #13239ac0; 146 | margin-bottom: 10px; 147 | } 148 | 149 | .message-window-message-box{ 150 | border: solid 1px rgb(8, 17, 34); 151 | border-radius: 18px; 152 | padding: 15px; 153 | overflow-y: auto; 154 | height: 80%; 155 | max-height: 80%; 156 | } 157 | 158 | .message-window-message-display-box{ 159 | padding-top: 5px; 160 | padding-bottom: 5px; 161 | } 162 | 163 | .message-window-message-display-box-message{ 164 | border-left: 2px solid #13239ac0; 165 | padding-left: 10px; 166 | } 167 | 168 | .message-window-input-message{ 169 | position:unset; 170 | top: 1%; 171 | } 172 | 173 | .message-window-input-message input{ 174 | text-align: left; 175 | width: 90%; 176 | height:30px; 177 | margin-left: 5%; 178 | margin-right: 5%; 179 | padding: 20px; 180 | border-radius: 360px; 181 | } 182 | 183 | .theme-button{ 184 | height: 35px; 185 | width: 35px; 186 | border: dashed #ffffff3d 0.5px; 187 | background-color: #2058d100; 188 | border-radius: 360px; 189 | padding: 5px; 190 | margin-top: 22px; 191 | } 192 | 193 | @media(max-width: 720px) { 194 | .message-body{ 195 | width: 90%; 196 | } 197 | .message-window-message-box{ 198 | height: 75%; 199 | max-height: 75%; 200 | font-size: 15px; 201 | } 202 | .message-window-input-message{ 203 | margin-top: 5px; 204 | } 205 | } 206 | 207 | 208 | /* About Page CSS */ 209 | 210 | 211 | 212 | .about-us { 213 | padding: 50px; 214 | } 215 | 216 | .about-us h2 { 217 | text-align: center; 218 | font-size: 32px; 219 | margin-bottom: 30px; 220 | } 221 | 222 | .about-us p { 223 | font-size: 18px; 224 | line-height: 1.5; 225 | text-align: justify; 226 | margin-bottom: 20px; 227 | } 228 | 229 | .about-us ul { 230 | list-style: none; 231 | margin: 0; 232 | padding: 0; 233 | } 234 | 235 | .about-us li { 236 | font-size: 18px; 237 | line-height: 1.5; 238 | margin-bottom: 10px; 239 | } 240 | 241 | .about-us li:last-child { 242 | margin-bottom: 0; 243 | } 244 | 245 | .about-us a { 246 | color: #007bff; 247 | text-decoration: none; 248 | } 249 | 250 | .about-us a:hover { 251 | text-decoration: underline; 252 | } 253 | 254 | .about-us-logo { 255 | display: block; 256 | margin: 0 auto; 257 | max-width:200px; 258 | height: auto; 259 | margin-bottom: 30px; 260 | } 261 | 262 | 263 | @media(max-width: 720px){ 264 | .feed-page-body{ 265 | width: 90%; 266 | } 267 | 268 | .feed-posting-box{ 269 | padding-left: 30px; 270 | padding-right: 30px; 271 | } 272 | 273 | .feed-post-box-textarea{ 274 | padding: 20px; 275 | font-size: 15px; 276 | } 277 | 278 | .feed-post-display-box-message{ 279 | padding-right: 15px; 280 | padding-left: 15px; 281 | font-size: 15px; 282 | } 283 | 284 | .feed-post-display-box-head li{ 285 | font-size: 14px; 286 | } 287 | 288 | .feed-post-display-box-image{ 289 | padding-right: 0%; 290 | } 291 | } 292 | .menu-icon{ 293 | height: 15px; 294 | width: 15px; 295 | vertical-align: middle; 296 | margin-right: 5px; 297 | margin-left: 5px; 298 | } -------------------------------------------------------------------------------- /style/darktheme_css/dark_feed.css: -------------------------------------------------------------------------------- 1 | body{ 2 | color: white; 3 | background-color: rgb(8, 17, 34); 4 | } 5 | 6 | .theme-icon{ 7 | color: rgb(0, 0, 0); 8 | } 9 | 10 | .feed-page-body{ 11 | width: 80%; 12 | } 13 | 14 | .feed-page-head{ 15 | margin-top: 20px; 16 | margin-bottom: 30px; 17 | padding-bottom: 10px; 18 | border-bottom: solid rgb(255, 255, 255) 1px; 19 | } 20 | 21 | .feed-posting-box{ 22 | margin-top: 20px; 23 | background-color: #163353d1; 24 | border: solid rgba(255, 255, 255, 0.568) 1px; 25 | border-radius: 5px; 26 | padding-top: 20px; 27 | padding-left: 50px; 28 | padding-right: 50px; 29 | } 30 | 31 | .feed-post-box-textarea{ 32 | width: 100%; 33 | height:15%; 34 | padding: 30px; 35 | font-size: 17px; 36 | border-radius: 5px; 37 | min-width: 100%; 38 | max-width: 100%; 39 | } 40 | 41 | .post-btn{ 42 | width: 80px; 43 | margin-top: 10px; 44 | margin-bottom: 20px; 45 | padding: 10px; 46 | border: solid rgb(255, 255, 255); 47 | border: none; 48 | border-radius: 7px; 49 | background-color: #2058d1; 50 | color: rgb(255, 255, 255); 51 | } 52 | 53 | .feed-post-display-box{ 54 | margin-top: 20px; 55 | background-color: #163353d1; 56 | border: solid rgba(128, 128, 128, 0.356) 1px; 57 | border-radius: 5px; 58 | padding-top: 20px; 59 | padding-left: 40px; 60 | padding-right: 40px; 61 | } 62 | 63 | .feed-post-display-box-head li{ 64 | display: inline-block; 65 | vertical-align: middle; 66 | } 67 | .feed-post-display-box-head img{ 68 | height: 40px; 69 | border: solid green 1px; 70 | border-radius: 360px; 71 | } 72 | 73 | .feed-post-display-box-message{ 74 | display: block; 75 | margin-top: 20px; 76 | margin-bottom: 20px; 77 | padding-right: 20px; 78 | padding-left: 20px; 79 | font-size: 17px; 80 | border-left: solid #13239a 3px; 81 | } 82 | 83 | 84 | .feed-post-display-box-image{ 85 | padding-right: 60%; 86 | } 87 | 88 | input.postimage{ 89 | border: none; 90 | margin-left: 0px; 91 | padding-left: 0px; 92 | padding-top: 7px; 93 | margin-bottom: 0px; 94 | height: 65px; 95 | } 96 | 97 | ::-webkit-file-upload-button{ 98 | width: 100px; 99 | padding: 10px; 100 | border: none; 101 | border-radius: 7px; 102 | background-color: #2058d1; 103 | color: white; 104 | } 105 | 106 | a{ 107 | color: white; 108 | } 109 | 110 | /* Message Page CSS */ 111 | 112 | .message-body{ 113 | margin-top: 20px; 114 | width: 30%; 115 | padding: 5px; 116 | } 117 | 118 | .message-window{ 119 | background: #132d4a; 120 | padding: 20px; 121 | border: 1px solid grey; 122 | border-radius: 20px; 123 | width: 100%; 124 | height: 80%; 125 | } 126 | 127 | li{ 128 | display: inline-block; 129 | vertical-align: middle; 130 | } 131 | 132 | .message-account-profpic-online{ 133 | height: 70px; 134 | margin-right: 10px; 135 | border: 2px solid green; 136 | border-radius: 360px; 137 | } 138 | 139 | .message-account-profpic-offline{ 140 | height: 70px; 141 | margin-right: 10px; 142 | border: 2px solid gray; 143 | border-radius: 360px; 144 | } 145 | 146 | .message-window-head{ 147 | padding: 10px; 148 | width: 100%; 149 | border-bottom: 3px solid #13239ac0; 150 | margin-bottom: 10px; 151 | } 152 | 153 | .message-window-message-box{ 154 | border: solid 1px #ffffff96; 155 | border-radius: 18px; 156 | padding: 15px; 157 | background-color: #081122; 158 | overflow-y: auto; 159 | height: 80%; 160 | max-height: 80%; 161 | } 162 | 163 | .message-window-message-display-box{ 164 | padding-top: 5px; 165 | padding-bottom: 5px; 166 | } 167 | 168 | .message-window-message-display-box-message{ 169 | border-left: 2px solid #13239ac0; 170 | padding-left: 10px; 171 | } 172 | 173 | .message-window-input-message{ 174 | position:unset; 175 | top: 1%; 176 | } 177 | 178 | .message-window-input-message input{ 179 | text-align: left; 180 | width: 90%; 181 | height:30px; 182 | margin-left: 5%; 183 | margin-right: 5%; 184 | padding: 20px; 185 | border-radius: 360px; 186 | } 187 | 188 | .theme-button{ 189 | height: 35px; 190 | width: 35px; 191 | border: dashed #ffffff3d 0.5px; 192 | background-color: #2058d100; 193 | border-radius: 360px; 194 | padding: 5px; 195 | margin-top: 22px; 196 | } 197 | 198 | @media(max-width: 720px) { 199 | .message-body{ 200 | width: 90%; 201 | } 202 | .message-window-message-box{ 203 | height: 75%; 204 | max-height: 75%; 205 | font-size: 15px; 206 | } 207 | .message-window-input-message{ 208 | margin-top: 5px; 209 | } 210 | } 211 | 212 | 213 | /* About Page CSS */ 214 | .about-us { 215 | padding: 50px; 216 | } 217 | 218 | .about-us h2 { 219 | text-align: center; 220 | font-size: 32px; 221 | margin-bottom: 30px; 222 | } 223 | 224 | .about-us p { 225 | font-size: 18px; 226 | line-height: 1.5; 227 | text-align: justify; 228 | margin-bottom: 20px; 229 | } 230 | 231 | .about-us ul { 232 | list-style: none; 233 | margin: 0; 234 | padding: 0; 235 | } 236 | 237 | .about-us li { 238 | font-size: 18px; 239 | line-height: 1.5; 240 | margin-bottom: 10px; 241 | } 242 | 243 | .about-us li:last-child { 244 | margin-bottom: 0; 245 | } 246 | 247 | .about-us a { 248 | color: #007bff; 249 | text-decoration: none; 250 | } 251 | 252 | .about-us a:hover { 253 | text-decoration: underline; 254 | } 255 | 256 | .about-us-logo { 257 | display: block; 258 | margin: 0 auto; 259 | max-width:200px; 260 | height: auto; 261 | margin-bottom: 30px; 262 | } 263 | 264 | 265 | 266 | @media(max-width: 720px){ 267 | .feed-page-body{ 268 | width: 90%; 269 | } 270 | 271 | .feed-posting-box{ 272 | padding-left: 30px; 273 | padding-right: 30px; 274 | } 275 | 276 | .feed-post-box-textarea{ 277 | padding: 20px; 278 | font-size: 15px; 279 | } 280 | 281 | .feed-post-display-box-message{ 282 | padding-right: 15px; 283 | padding-left: 15px; 284 | font-size: 15px; 285 | } 286 | 287 | .feed-post-display-box-head li{ 288 | font-size: 14px; 289 | } 290 | 291 | .feed-post-display-box-image{ 292 | padding-right: 0%; 293 | } 294 | .theme-button{ 295 | height: 35px; 296 | width: 35px; 297 | border: solid #ffffff3d 0.5px; 298 | background-color: #2058d100; 299 | border-radius: 360px; 300 | padding: 5px; 301 | margin-top: 25px; 302 | } 303 | 304 | } 305 | .menu-icon{ 306 | height: 15px; 307 | width: 15px; 308 | vertical-align: middle; 309 | margin-right: 5px; 310 | margin-left: 5px; 311 | } -------------------------------------------------------------------------------- /style/lighttheme_css/light_account.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: rgb(250 251 253); 3 | } 4 | .account{ 5 | width: 100%; 6 | /* display: flex; */ 7 | /* justify-content: left; */ 8 | /* background-color: cornflowerblue; */ 9 | } 10 | .account-body{ 11 | width: 80%; 12 | /* height: 100%; */ 13 | /* background-color: cornflowerblue; */ 14 | } 15 | .account-banner{ 16 | margin: auto; 17 | width: 100%; 18 | padding-top: 10%; 19 | border: solid white; 20 | border-bottom-left-radius: 69px; 21 | } 22 | .account-banner-img{ 23 | object-fit:contain; 24 | object-position: 50% 50%; 25 | margin: auto; 26 | width: 100%; 27 | } 28 | .account-profpic{ 29 | margin: -2px; 30 | object-fit: contain; 31 | align-items: center; 32 | border: solid rgb(255, 255, 255); 33 | border-radius: 360px; 34 | } 35 | .account-img li{ 36 | color: white; 37 | display: inline-block; 38 | vertical-align:middle; 39 | } 40 | 41 | .message-btn{ 42 | width: 120px; 43 | margin-left: 50px; 44 | padding: 10px; 45 | border: 50px; 46 | border-radius: 7px; 47 | background-color: #13239a; 48 | color: white; 49 | } 50 | 51 | .message-buttons-name { 52 | display: flex; 53 | flex-direction: column; 54 | align-items: flex-start; 55 | } 56 | /* To hide desktop button on mobile devices */ 57 | .desktop-btn { 58 | display: block; 59 | } 60 | .mobile-btn { 61 | display: none; 62 | } 63 | 64 | /* Account tabs stylling */ 65 | .account-tabs ul{ 66 | background-color: white; 67 | margin-top: 10px; 68 | border: solid rgba(128, 128, 128, 0.248) 1px; 69 | border-radius: 5px; 70 | } 71 | .account-tabs li{ 72 | display: inline-block; 73 | margin-left: 20px; 74 | } 75 | li.acc-tabs-item{ 76 | padding: 10px; 77 | } 78 | .acc-tabs-btn{ 79 | font-size: 15px; 80 | padding: 10px; 81 | background-color: white; 82 | border: none; 83 | } 84 | .acc-tabs-link{ 85 | text-decoration: none; 86 | } 87 | .acc-tabs-link:active{ 88 | border-bottom: solid#1f1efb 2px; 89 | padding-bottom: 4px; 90 | text-decoration: none; 91 | } 92 | /* Account tabs (Feed, Info, etc) styling */ 93 | .acc-tabs-page{ 94 | margin-top: 20px; 95 | } 96 | .acc-info-content{ 97 | margin-top: 20px; 98 | background-color: white; 99 | border: solid rgba(128, 128, 128, 0.248) 1px; 100 | border-radius: 5px; 101 | padding-top: 20px; 102 | padding-left: 50px; 103 | padding-right: 50px; 104 | } 105 | .acc-info-content-head{ 106 | border-bottom: solid rgba(128, 128, 128, 0.248) 1px; 107 | padding-bottom: 10px; 108 | } 109 | .acc-info-content-lst{ 110 | margin-top: 20px; 111 | margin-bottom: 20px; 112 | } 113 | .acc-info-content-list{ 114 | 115 | display:inline-block; 116 | margin-top: 5px; 117 | margin-left: 5px; 118 | margin-right: -4px; 119 | margin-bottom: 5px; 120 | } 121 | 122 | 123 | /* Accound feed post box styling */ 124 | .feed-posting-box{ 125 | margin-top: 20px; 126 | background-color: white; 127 | border: solid rgba(128, 128, 128, 0.248) 1px; 128 | border-radius: 5px; 129 | padding-top: 20px; 130 | padding-left: 50px; 131 | padding-right: 50px; 132 | } 133 | 134 | .feed-post-box-textarea{ 135 | width: 100%; 136 | height:15%; 137 | padding: 30px; 138 | font-size: 17px; 139 | border-radius: 5px; 140 | max-width: 100%; 141 | min-width: 100%; 142 | } 143 | 144 | .post-btn{ 145 | width: 80px; 146 | margin-top: 8px; 147 | margin-bottom: 16px; 148 | padding: 10px; 149 | border-radius: 7px; 150 | border: solid rgba(243, 243, 243, 0.76) 1px; 151 | background:#163353; 152 | color: #fff !important; 153 | } 154 | 155 | .feed-post-display-box{ 156 | margin-top: 20px; 157 | background-color: white; 158 | border: solid rgba(128, 128, 128, 0.248) 1px; 159 | border-radius: 5px; 160 | padding-top: 20px; 161 | padding-left: 40px; 162 | padding-right: 40px; 163 | } 164 | 165 | .feed-post-display-box-head li{ 166 | display: inline-block; 167 | vertical-align: middle; 168 | } 169 | .feed-post-display-box-head img{ 170 | height: 40px; 171 | border: solid green 1px; 172 | border-radius: 360px; 173 | } 174 | 175 | .feed-post-display-box-message{ 176 | display: block; 177 | margin-top: 20px; 178 | margin-bottom: 20px; 179 | padding-right: 20px; 180 | padding-left: 20px; 181 | font-size: 17px; 182 | border-left: solid #13239a 3px; 183 | } 184 | 185 | .feed-post-display-box-image{ 186 | padding-right: 60%; 187 | } 188 | 189 | input.postimage{ 190 | border: none; 191 | margin-left: 0px; 192 | padding-left: 0px; 193 | padding-top: 7px; 194 | margin-bottom: 0px; 195 | height: 65px; 196 | } 197 | 198 | ::-webkit-file-upload-button{ 199 | width: 100px; 200 | padding: 10px; 201 | border: none; 202 | border-radius: 7px; 203 | background-color: #163353; 204 | color: white; 205 | } 206 | .user-profile { 207 | display: flex; 208 | align-items: center; 209 | margin-bottom: 16px; 210 | padding: 16px; 211 | background-color: #fff; 212 | border-radius: 5px; 213 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 214 | } 215 | .user-avatar { 216 | width: 80px; 217 | height: 80px; 218 | border-radius: 50%; 219 | margin-right: 16px; 220 | } 221 | .user-info { 222 | flex-grow: 1; 223 | } 224 | .user-username { 225 | font-weight: bold; 226 | font-size: 18px; 227 | } 228 | .user-name { 229 | color: #777; 230 | } 231 | 232 | /* css adjustments for mobile */ 233 | @media(max-width: 720px){ 234 | .account-body{ 235 | width: 90%; 236 | } 237 | 238 | .feed-post-box-textarea{ 239 | padding: 10px; 240 | font-size: 15px; 241 | } 242 | 243 | .account-tabs li{ 244 | font-size: 15px; 245 | } 246 | 247 | .feed-post-display-box-message{ 248 | padding-right: 15px; 249 | padding-left: 15px; 250 | font-size: 15px; 251 | } 252 | 253 | .feed-post-display-box-head li{ 254 | font-size: 14px; 255 | } 256 | 257 | .acc-info-content{ 258 | font-size: 15px; 259 | } 260 | 261 | .feed-post-display-box-image{ 262 | padding-right: 0%; 263 | } 264 | 265 | .post-btn{ 266 | width: 70px; 267 | } 268 | 269 | .message-btn{ 270 | width: 120px; 271 | margin: auto; 272 | padding: 10px; 273 | border: none; 274 | } 275 | 276 | /* Show mobile button on smaller screens */ 277 | .desktop-btn { 278 | display: none; 279 | } 280 | .mobile-btn { 281 | display: block; 282 | font-size: small; 283 | width: 120px; 284 | margin: auto; 285 | padding: 10px; 286 | border: none; 287 | } 288 | 289 | 290 | .account-profpic { 291 | width: 60%; 292 | margin: 13px; 293 | object-fit: contain; 294 | align-items: center; 295 | border: solid rgb(255, 255, 255); 296 | border-radius: 360px; 297 | } 298 | } 299 | 300 | /*@media(max-width: 400px){ 301 | .message-btn{ 302 | font-size: xx-small; 303 | width: 90px; 304 | margin: auto; 305 | padding: 10px; 306 | border: none; 307 | } 308 | }*/ 309 | .menu-icon{ 310 | height: 15px; 311 | width: 15px; 312 | vertical-align: middle; 313 | margin-right: 5px; 314 | margin-left: 5px; 315 | } -------------------------------------------------------------------------------- /style/darktheme_css/dark_account.css: -------------------------------------------------------------------------------- 1 | body{ 2 | color: white; 3 | background-color: rgb(8, 17, 34); 4 | } 5 | 6 | a{ 7 | color: white; 8 | } 9 | .account{ 10 | width: 100%; 11 | /* display: flex; */ 12 | /* justify-content: left; */ 13 | /* background-color: cornflowerblue; */ 14 | } 15 | .account-body{ 16 | width: 80%; 17 | /* height: 100%; */ 18 | /* background-color: cornflowerblue; */ 19 | } 20 | .account-banner{ 21 | margin: auto; 22 | width: 100%; 23 | padding-top: 10%; 24 | /* border: solid white; */ 25 | border: 3px solid white; 26 | border-bottom-left-radius: 69px; 27 | } 28 | .account-banner-img{ 29 | object-fit:contain; 30 | object-position: 50% 50%; 31 | margin: auto; 32 | width: 100%; 33 | } 34 | .account-profpic{ 35 | margin: -2px; 36 | object-fit: contain; 37 | align-items: center; 38 | border: solid rgb(255, 255, 255); 39 | border-radius: 360px; 40 | } 41 | .account-img li{ 42 | color: white; 43 | display: inline-block; 44 | vertical-align:middle; 45 | } 46 | 47 | .message-btn{ 48 | width: 120px; 49 | margin-left: 50px; 50 | padding: 10px; 51 | border: 50px; 52 | border-radius: 7px; 53 | background-color: #13239a; 54 | color: white; 55 | } 56 | 57 | .message-buttons-name { 58 | display: flex; 59 | flex-direction: column; 60 | align-items: flex-start; 61 | } 62 | /* To hide desktop button on mobile devices */ 63 | .desktop-btn { 64 | display: block; 65 | } 66 | .mobile-btn { 67 | display: none; 68 | } 69 | 70 | /* Account tabs stylling */ 71 | .account-tabs ul{ 72 | background-color: #163353d1; 73 | margin-top: 10px; 74 | border: solid rgba(128, 128, 128, 0.248) 1px; 75 | border-radius: 5px; 76 | } 77 | .account-tabs li{ 78 | display: inline-block; 79 | margin-left: 20px; 80 | } 81 | li.acc-tabs-item{ 82 | padding: 10px; 83 | } 84 | .acc-tabs-btn{ 85 | font-size: 15px; 86 | padding: 10px; 87 | background-color: white; 88 | border: none; 89 | } 90 | .acc-tabs-link{ 91 | color: white; 92 | text-decoration: none; 93 | } 94 | .acc-tabs-link:active{ 95 | border-bottom: solid#1f1efb 2px; 96 | padding-bottom: 4px; 97 | text-decoration: none; 98 | } 99 | /* Account tabs (Feed, Info, etc) styling */ 100 | .acc-tabs-page{ 101 | margin-top: 20px; 102 | } 103 | .acc-info-content{ 104 | margin-top: 20px; 105 | background-color: #163353d1; 106 | border: solid rgba(128, 128, 128, 0.248) 1px; 107 | border-radius: 5px; 108 | padding-top: 20px; 109 | padding-left: 50px; 110 | padding-right: 50px; 111 | } 112 | .acc-info-content-head{ 113 | border-bottom: solid rgba(128, 128, 128, 0.248) 1px; 114 | padding-bottom: 10px; 115 | } 116 | .acc-info-content-lst{ 117 | margin-top: 20px; 118 | margin-bottom: 20px; 119 | } 120 | .acc-info-content-list{ 121 | 122 | display:inline-block; 123 | margin-top: 5px; 124 | margin-left: 5px; 125 | margin-right: -4px; 126 | margin-bottom: 5px; 127 | } 128 | 129 | 130 | /* Accound feed post box styling */ 131 | .feed-posting-box{ 132 | margin-top: 20px; 133 | background-color: white; 134 | border: solid rgba(128, 128, 128, 0.248) 1px; 135 | border-radius: 5px; 136 | padding-top: 20px; 137 | padding-left: 50px; 138 | padding-right: 50px; 139 | } 140 | 141 | .feed-post-box-textarea{ 142 | width: 100%; 143 | height:15%; 144 | padding: 30px; 145 | font-size: 17px; 146 | border-radius: 5px; 147 | max-width: 100%; 148 | min-width: 100%; 149 | } 150 | 151 | .post-btn{ 152 | width: 80px; 153 | margin-top: 8px; 154 | margin-bottom: 16px; 155 | padding: 10px; 156 | border-radius: 7px; 157 | border: solid rgba(243, 243, 243, 0.76) 1px; 158 | background:#163353; 159 | color: #fff !important; 160 | } 161 | 162 | .feed-post-display-box{ 163 | margin-top: 20px; 164 | background-color: #163353d1; 165 | border: solid rgba(128, 128, 128, 0.248) 1px; 166 | border-radius: 5px; 167 | padding-top: 20px; 168 | padding-left: 40px; 169 | padding-right: 40px; 170 | } 171 | 172 | .feed-post-display-box-head li{ 173 | display: inline-block; 174 | vertical-align: middle; 175 | } 176 | .feed-post-display-box-head img{ 177 | height: 40px; 178 | border: solid green 1px; 179 | border-radius: 360px; 180 | } 181 | 182 | .feed-post-display-box-message{ 183 | display: block; 184 | margin-top: 20px; 185 | margin-bottom: 20px; 186 | padding-right: 20px; 187 | padding-left: 20px; 188 | font-size: 17px; 189 | border-left: solid #13239a 3px; 190 | } 191 | 192 | .feed-post-display-box-image{ 193 | padding-right: 60%; 194 | } 195 | 196 | input.postimage{ 197 | border: none; 198 | margin-left: 0px; 199 | padding-left: 0px; 200 | padding-top: 7px; 201 | margin-bottom: 0px; 202 | height: 65px; 203 | } 204 | 205 | ::-webkit-file-upload-button{ 206 | width: 100px; 207 | padding: 10px; 208 | border: none; 209 | border-radius: 7px; 210 | background-color: #163353; 211 | color: white; 212 | } 213 | 214 | .user-profile { 215 | display: flex; 216 | align-items: center; 217 | margin-bottom: 16px; 218 | padding: 16px; 219 | background-color: #fff; 220 | border-radius: 5px; 221 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 222 | } 223 | .user-avatar { 224 | width: 80px; 225 | height: 80px; 226 | border-radius: 50%; 227 | margin-right: 16px; 228 | } 229 | .user-info { 230 | flex-grow: 1; 231 | } 232 | .user-username { 233 | font-weight: bold; 234 | font-size: 18px; 235 | } 236 | .user-name { 237 | color: #777; 238 | } 239 | 240 | /* css adjustments for mobile */ 241 | @media(max-width: 720px){ 242 | .account-body{ 243 | width: 90%; 244 | } 245 | 246 | .feed-post-box-textarea{ 247 | padding: 10px; 248 | font-size: 15px; 249 | } 250 | 251 | .account-tabs li{ 252 | font-size: 15px; 253 | } 254 | 255 | .feed-post-display-box-message{ 256 | padding-right: 15px; 257 | padding-left: 15px; 258 | font-size: 15px; 259 | } 260 | 261 | .feed-post-display-box-head li{ 262 | font-size: 14px; 263 | } 264 | 265 | .acc-info-content{ 266 | font-size: 15px; 267 | } 268 | 269 | .feed-post-display-box-image{ 270 | padding-right: 0%; 271 | } 272 | 273 | .post-btn{ 274 | width: 70px; 275 | } 276 | 277 | .message-btn{ 278 | width: 120px; 279 | margin: auto; 280 | padding: 10px; 281 | border: none; 282 | } 283 | 284 | /* Show mobile button on smaller screens */ 285 | .desktop-btn { 286 | display: none; 287 | } 288 | .mobile-btn { 289 | display: block; 290 | font-size: small; 291 | width: 120px; 292 | margin: auto; 293 | padding: 10px; 294 | border: none; 295 | } 296 | 297 | .account-profpic { 298 | width: 60%; 299 | margin: 13px; 300 | object-fit: contain; 301 | align-items: center; 302 | border: solid rgb(255, 255, 255); 303 | border-radius: 360px; 304 | } 305 | } 306 | 307 | /*@media(max-width: 400px){ 308 | .message-btn{ 309 | font-size: xx-small; 310 | width: 90px; 311 | margin: auto; 312 | padding: 10px; 313 | border: none; 314 | } 315 | }*/ 316 | .menu-icon{ 317 | height: 15px; 318 | width: 15px; 319 | vertical-align: middle; 320 | margin-right: 5px; 321 | margin-left: 5px; 322 | } -------------------------------------------------------------------------------- /about-us.php: -------------------------------------------------------------------------------- 1 | 4 | 5 | Minglr - About Us 6 | 7 | 8 | 9 | 10 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 72 | 73 | 89 |
90 |
91 |
92 |

About Us

93 |

Minglr is a social networking site where users can share their posts, images, and chat with each other. It was created to provide a seamless experience to people who want to connect with others and share their experiences.

94 |

We believe that social media can be used to bring people together and create positive changes in the world. Minglr is a platform that empowers people to express themselves and share their ideas with a wider audience.

95 |

Our team is committed to creating a safe and inclusive environment for all users. We take privacy and security seriously and have implemented measures to protect user data. Minglr is a place where everyone is welcome and encouraged to be themselves.

96 |

Thank you for being a part of our community. We look forward to seeing what you create and share on Minglr.

97 |
98 | 99 |
100 |

Minglr

101 | 115 | 129 |

This website is only for educational purposes and does not try to replicate any institution/entity/company - by Mayuresh Choudhary

130 |
131 | 132 | 133 | 134 | 135 | -------------------------------------------------------------------------------- /style/darktheme_css/dark_style.css: -------------------------------------------------------------------------------- 1 | /* Animation */ 2 | @keyframes loginloader { 3 | 0% {margin-top:0px;} 4 | 100% {margin-top:60px;} 5 | } 6 | 7 | @keyframes mainloader { 8 | 0%{opacity: 0%;} 9 | 100%{opacity: 100%;} 10 | } 11 | 12 | *{ 13 | font-family:Poppins; 14 | padding: 0px; 15 | box-sizing: border-box; 16 | margin: auto; 17 | opacity: 100%; 18 | animation-name: mainloader; 19 | animation-duration: 2s; 20 | animation-iteration-count: 1; 21 | } 22 | 23 | body{ 24 | color: white; 25 | background-color: rgb(8, 17, 34); 26 | } 27 | 28 | /*Navbar Style*/ 29 | /* h1.nav-item-logo{ 30 | padding-right: 1px; 31 | font-size: 26px; 32 | font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif 33 | } */ 34 | 35 | /* .navbar{ 36 | border-bottom: solid #022b59; 37 | } 38 | 39 | .navbar li{ 40 | display: inline-block; 41 | padding-left: 15px; 42 | padding-right: 15px; 43 | } 44 | /* */ 45 | /* li.nav-item{ 46 | font-size: 18px; 47 | padding-left: 3vw; 48 | } 49 | 50 | li.nav-link{ 51 | text-decoration: none; 52 | } */ 53 | 54 | nav{ 55 | position: fixed; 56 | top: 0; 57 | left: 0; 58 | background: #132d4a; 59 | height: 80px; 60 | width: 100%; 61 | z-index: 10; 62 | border-bottom: 3px solid #1225b4; 63 | } 64 | 65 | label.logo{ 66 | color: white; 67 | font-size: 35px; 68 | line-height: 80px; 69 | padding: 0 100px; 70 | font-weight: bold; 71 | } 72 | nav ul{ 73 | float: right; 74 | margin-right: 20px; 75 | } 76 | nav ul li{ 77 | display: inline-block; 78 | line-height: 80px; 79 | margin: 0 5px; 80 | } 81 | nav ul li .navv-item{ 82 | color: #ffffff; 83 | font-size: 17px; 84 | padding: 7px 13px; 85 | border-radius: 3px; 86 | text-transform: uppercase; 87 | } 88 | .navv-item.active{ 89 | color: #fff !important; 90 | } 91 | .navv-item.active,.navv-item:hover{ 92 | border: solid rgba(243, 243, 243, 0.76) 1px; 93 | background:#1e1efb82; 94 | transition: .5s; 95 | color: #fff !important; 96 | } 97 | .menu-btn { 98 | float: right; 99 | cursor: pointer; 100 | margin-right: 40px; 101 | margin-top: 25px; 102 | vertical-align: middle; 103 | color: #12209d; 104 | display: none; 105 | } 106 | .bar { 107 | width: 30px; 108 | height: 5px; 109 | border-radius: 1px; 110 | margin: 5px 0; 111 | background-color: #ffffff; 112 | transition: all 0.5s; 113 | } 114 | .change .bar1 { 115 | transform: translate(1px,10px) rotate(-45deg); 116 | } 117 | .change .bar2 { 118 | opacity: 0; 119 | } 120 | .change .bar3 { 121 | transform: translate(1px,-10px) rotate(45deg); 122 | } 123 | 124 | /* a:link { 125 | color:#022b59; 126 | } 127 | a:visited{ 128 | color:#022b59; 129 | } */ 130 | 131 | /* search bar styling*/ 132 | div.container{ 133 | width: 50%; 134 | padding-top: 10px; 135 | } 136 | input.search-bar{ 137 | /* width: 100%; */ 138 | margin-right: 0%; 139 | } 140 | .search-btn{ 141 | padding: 10px; 142 | border: solid grey; 143 | border: none; 144 | border-width: 1px; 145 | border-radius: 7px; 146 | background-color: #1e1efb; 147 | color: white; 148 | width: 30%; 149 | margin-left: 35%; 150 | } 151 | 152 | /*error page styling*/ 153 | div.error-container{ 154 | text-align: center; 155 | margin: 7%; 156 | } 157 | /*Logo*/ 158 | .logo { 159 | width: 8rem; 160 | max-height: 60; 161 | max-width: 100%; 162 | vertical-align: middle; 163 | padding-left: 0%; 164 | } 165 | 166 | /*Login & signup form styling*/ 167 | .login-logo{ 168 | max-height: 100; 169 | max-width: 100%; 170 | } 171 | 172 | .login-signup{ 173 | background-color: #163353d1; 174 | border: solid rgba(128, 128, 128, 0.356) 1px; 175 | padding: 20px; 176 | margin-top: 60px; 177 | margin-left: 10%; 178 | margin-right: 10%; 179 | border-width: 1px; 180 | border-radius: 15px; 181 | position: relative; 182 | animation-name: loginloader; 183 | animation-duration: 3s; 184 | animation-iteration-count: 1; 185 | } 186 | 187 | .login-form{ 188 | padding: 20px; 189 | width: 90%; 190 | } 191 | 192 | .regst-form{ 193 | padding: 20px; 194 | width: 90%; 195 | text-align: center; 196 | } 197 | 198 | input{ 199 | text-align: left; 200 | width: 70%; 201 | height:30px; 202 | margin-left: 15%; 203 | margin-right: 15%; 204 | margin-bottom: 10px; 205 | padding: 20px; 206 | border: solid grey; 207 | border-width: 1px; 208 | border-radius: 4px; 209 | } 210 | .valid-password { 211 | outline: 3px solid green !important; 212 | } 213 | .invalid-password { 214 | outline: 3px solid red !important; 215 | } 216 | .div-toggle-password{ 217 | display: flex; 218 | margin: 1px 0 3px; 219 | } 220 | #togglePassword { 221 | align-self: start; 222 | padding: 10px; 223 | margin: 0 0 9px 14.5%; 224 | border: none; 225 | border-radius: 5px; 226 | cursor: pointer; 227 | background-color: grey; 228 | color: white; 229 | } 230 | .login-btn{ 231 | width: 40%; 232 | margin-left: 30%; 233 | margin-right: 30%; 234 | padding: 10px; 235 | border: solid grey; 236 | border: none; 237 | border-radius: 7px; 238 | background-color: #13239a; 239 | color: white; 240 | } 241 | 242 | .rgst-btn{ 243 | width: 40%; 244 | margin-left: 30%; 245 | margin-right: 30%; 246 | padding: 10px; 247 | border: solid grey; 248 | border: none; 249 | border-radius: 7px; 250 | background-color: #13239a; 251 | color: white; 252 | } 253 | 254 | .btn{ 255 | margin: 10px; 256 | padding: 7px; 257 | border: solid grey; 258 | border: none; 259 | border-width: 1px; 260 | border-radius: 7px; 261 | background-color: #1e1efb; 262 | color: white; 263 | } 264 | 265 | .btn:hover{ 266 | box-shadow: 4px 4px #4d61f59c; 267 | transition: all 0.2s ease-in; 268 | transform: translateY(-4px); 269 | cursor: pointer; 270 | } 271 | 272 | .rgst-btn:hover , .login-btn:hover , .search-btn:hover{ 273 | box-shadow: 4px 4px #4d61f59c, 274 | -4px -4px #4d61f59c; 275 | transition: all 0.5s ease-in-out; 276 | transform: translateY(-1px); 277 | cursor: pointer; 278 | } 279 | 280 | /* Footer styling*/ 281 | .footer{ 282 | color: white; 283 | border-top: 3px solid #1225b4; 284 | box-sizing: border-box; 285 | height:30dvb; 286 | width: 100%; 287 | padding: 30px; 288 | margin-top: 10%; 289 | background-color:#132d4a; 290 | text-align: center; 291 | } 292 | .footer ul p{ 293 | color:white; 294 | } 295 | .footer li{ 296 | display: inline-block; 297 | padding: 20px; 298 | } 299 | a.foot-link:link{ 300 | color: white; 301 | } 302 | a.foot-link:visited{ 303 | color: white; 304 | } 305 | .seperate_header{ 306 | height: 1px; 307 | margin-top: 80px; 308 | } 309 | 310 | 311 | .theme-button{ 312 | height: 35px; 313 | width: 35px; 314 | border: dashed #ffffff3d 0.5px; 315 | background-color: #2058d100; 316 | border-radius: 360px; 317 | padding: 5px; 318 | margin-top: 22px; 319 | } 320 | 321 | 322 | 323 | 324 | 325 | /* mobile style adjustments */ 326 | @media(max-width: 720px){ 327 | .navbar li{ 328 | font-size: 16px; 329 | padding-right: 0px; 330 | } 331 | 332 | .login-signup{ 333 | margin-left: 5%; 334 | margin-right: 5%; 335 | } 336 | 337 | input{ 338 | width: 80%; 339 | margin-left: 10%; 340 | margin-right: 10%; 341 | } 342 | 343 | .footer li{ 344 | padding: 5px; 345 | font-size: 13px; 346 | } 347 | .footer p{ 348 | font-size: 12px; 349 | } 350 | 351 | .theme-button{ 352 | height: 35px; 353 | width: 35px; 354 | border: solid #ffffff3d 0.5px; 355 | background-color: #2058d100; 356 | border-radius: 360px; 357 | padding: 5px; 358 | margin-top: 25px; 359 | } 360 | 361 | } 362 | 363 | @media (max-width: 952px){ 364 | label.logo{ 365 | font-size: 30px; 366 | padding-left: 50px; 367 | } 368 | nav .menu-items .menu-items-li .navv-item{ 369 | font-size: 16px; 370 | } 371 | } 372 | 373 | @media (max-width: 858px){ 374 | /* .cbtn{ 375 | display: block; 376 | } */ 377 | .menu-btn { 378 | display: inline-block; 379 | } 380 | .menu-items{ 381 | position:fixed; 382 | display: block; 383 | width: 100%; 384 | height: 90vh; 385 | background: #212121; 386 | top: 31px; 387 | left: -100%; 388 | text-align: center; 389 | transition: all .5s; 390 | z-index: 100; 391 | } 392 | nav .menu-items{ 393 | background-color: #132d4aeb; 394 | display: grid; 395 | margin: 50px 0; 396 | line-height: 30px; 397 | align-content: center; 398 | justify-content: center; 399 | align-items: center; 400 | justify-items: center; 401 | } 402 | nav .menu-items .menu-items-li .navv-item{ 403 | font-size: 20px; 404 | } 405 | .navv-item:hover,.navv-item.active{ 406 | background: none; 407 | color: #0082e6; 408 | } 409 | .active { 410 | left: 0%; 411 | } 412 | } 413 | 414 | a{ 415 | color: #fff; 416 | text-decoration: none; 417 | transition: color 0.3s; /* Smooth color transition on hover */ 418 | } 419 | @media (max-width: 350px){ 420 | .menu-btn { 421 | margin-right: 15px; 422 | } 423 | } 424 | .menu-icon{ 425 | height: 15px; 426 | width: 15px; 427 | vertical-align: middle; 428 | margin-right: 5px; 429 | margin-left: 5px; 430 | } -------------------------------------------------------------------------------- /style/lighttheme_css/light_style.css: -------------------------------------------------------------------------------- 1 | /* Animation */ 2 | @keyframes loginloader { 3 | 0% {margin-top:0px;} 4 | 100% {margin-top:60px;} 5 | } 6 | 7 | @keyframes mainloader { 8 | 0%{opacity: 0%;} 9 | 100%{opacity: 100%;} 10 | } 11 | 12 | *{ 13 | font-family:Poppins; 14 | padding: 0px; 15 | box-sizing: border-box; 16 | margin: auto; 17 | opacity: 100%; 18 | 19 | animation-name: mainloader; 20 | animation-duration: 0.5s; 21 | animation-iteration-count: 1; 22 | } 23 | 24 | body{ 25 | background-color: rgb(250 251 253); 26 | } 27 | 28 | /*Navbar Style*/ 29 | /* h1.nav-item-logo{ 30 | padding-right: 1px; 31 | font-size: 26px; 32 | font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif 33 | } */ 34 | 35 | /* .navbar{ 36 | border-bottom: solid #022b59; 37 | } 38 | 39 | .navbar li{ 40 | display: inline-block; 41 | padding-left: 15px; 42 | padding-right: 15px; 43 | } 44 | /* */ 45 | /* li.nav-item{ 46 | font-size: 18px; 47 | padding-left: 3vw; 48 | } 49 | 50 | li.nav-link{ 51 | text-decoration: none; 52 | } */ 53 | 54 | nav{ 55 | position: fixed; 56 | top: 0; 57 | left: 0; 58 | background: #132d4a; 59 | height: 80px; 60 | width: 100%; 61 | z-index: 10; 62 | border-bottom: 3px solid #1225b4; 63 | } 64 | 65 | label.logo{ 66 | color: white; 67 | font-size: 35px; 68 | line-height: 80px; 69 | padding: 0 100px; 70 | font-weight: bold; 71 | } 72 | nav ul{ 73 | float: right; 74 | margin-right: 20px; 75 | } 76 | nav ul li{ 77 | display: inline-block; 78 | line-height: 80px; 79 | margin: 0 5px; 80 | } 81 | nav ul li .navv-item{ 82 | color: #ffffff; 83 | font-size: 17px; 84 | padding: 7px 13px; 85 | border-radius: 3px; 86 | text-transform: uppercase; 87 | } 88 | .navv-item.active{ 89 | color: #fff !important; 90 | } 91 | .navv-item.active,.navv-item:hover{ 92 | border: solid rgba(243, 243, 243, 0.76) 1px; 93 | background:#1e1efb82; 94 | transition: .5s; 95 | color: #fff !important; 96 | } 97 | .menu-btn { 98 | float: right; 99 | cursor: pointer; 100 | margin-right: 40px; 101 | margin-top: 25px; 102 | vertical-align: middle; 103 | color: #12209d; 104 | display: none; 105 | } 106 | .bar { 107 | width: 30px; 108 | height: 5px; 109 | border-radius: 1px; 110 | margin: 5px 0; 111 | background-color: #ffffff; 112 | transition: all 0.5s; 113 | } 114 | .change .bar1 { 115 | transform: translate(1px,10px) rotate(-45deg); 116 | } 117 | .change .bar2 { 118 | opacity: 0; 119 | } 120 | .change .bar3 { 121 | transform: translate(1px,-10px) rotate(45deg); 122 | } 123 | 124 | /* a:link { 125 | color:#022b59; 126 | } 127 | a:visited{ 128 | color:#022b59; 129 | } */ 130 | 131 | /* search bar styling*/ 132 | div.container{ 133 | width: 50%; 134 | padding-top: 10px; 135 | } 136 | input.search-bar{ 137 | /* width: 100%; */ 138 | margin-right: 0%; 139 | } 140 | .search-btn{ 141 | padding: 10px; 142 | border: solid grey; 143 | border: none; 144 | border-width: 1px; 145 | border-radius: 7px; 146 | background-color: #1e1efb; 147 | color: white; 148 | width: 30%; 149 | margin-left: 35%; 150 | } 151 | 152 | /*error page styling*/ 153 | div.error-container{ 154 | text-align: center; 155 | margin: 7%; 156 | } 157 | /*Logo*/ 158 | .logo { 159 | width: 8rem; 160 | max-height: 60; 161 | max-width: 100%; 162 | vertical-align: middle; 163 | padding-left: 0%; 164 | } 165 | 166 | /*Login & signup form styling*/ 167 | .login-logo{ 168 | max-height: 100; 169 | max-width: 100%; 170 | } 171 | 172 | .login-signup{ 173 | background-color: white; 174 | padding: 20px; 175 | margin-top: 60px; 176 | margin-left: 10%; 177 | margin-right: 10%; 178 | border: solid grey; 179 | border-width: 1px; 180 | border-radius: 15px; 181 | position: relative; 182 | animation-name: loginloader; 183 | animation-duration: 3s; 184 | animation-iteration-count: 1; 185 | } 186 | 187 | .login-form{ 188 | padding: 20px; 189 | width: 90%; 190 | } 191 | 192 | .regst-form{ 193 | padding: 20px; 194 | width: 90%; 195 | text-align: center; 196 | } 197 | 198 | input{ 199 | text-align: left; 200 | width: 70%; 201 | height:30px; 202 | margin-left: 15%; 203 | margin-right: 15%; 204 | margin-bottom: 10px; 205 | padding: 20px; 206 | border: solid grey; 207 | border-width: 1px; 208 | border-radius: 4px; 209 | } 210 | .valid-password { 211 | outline: 3px solid green !important; 212 | } 213 | .invalid-password { 214 | outline: 3px solid red !important; 215 | } 216 | .div-toggle-password{ 217 | display: flex; 218 | margin: 1px 0 3px; 219 | } 220 | #togglePassword { 221 | align-self: start; 222 | padding: 10px; 223 | margin: 0 0 9px 14.5%; 224 | border: none; 225 | border-radius: 5px; 226 | cursor: pointer; 227 | background-color: grey; 228 | color: white; 229 | } 230 | .login-btn{ 231 | width: 40%; 232 | margin-left: 30%; 233 | margin-right: 30%; 234 | padding: 10px; 235 | border: solid grey; 236 | border: none; 237 | border-radius: 7px; 238 | background-color: #13239a; 239 | color: white; 240 | } 241 | 242 | .rgst-btn{ 243 | width: 40%; 244 | margin-left: 30%; 245 | margin-right: 30%; 246 | padding: 10px; 247 | border: solid grey; 248 | border: none; 249 | border-radius: 7px; 250 | background-color: #13239a; 251 | color: white; 252 | } 253 | 254 | .btn{ 255 | margin: 10px; 256 | padding: 7px; 257 | border: solid grey; 258 | border: none; 259 | border-width: 1px; 260 | border-radius: 7px; 261 | background-color: #1e1efb; 262 | color: white; 263 | } 264 | 265 | .btn:hover{ 266 | box-shadow: 4px 4px #4d61f59c; 267 | transition: all 0.2s ease-in; 268 | transform: translateY(-4px); 269 | cursor: pointer; 270 | } 271 | 272 | .rgst-btn:hover , .login-btn:hover , .search-btn:hover{ 273 | box-shadow: 4px 4px #4d61f59c, 274 | -4px -4px #4d61f59c; 275 | transition: all 0.5s ease-in-out; 276 | transform: translateY(-1px); 277 | cursor: pointer; 278 | } 279 | 280 | /* Footer styling*/ 281 | .footer{ 282 | color: white; 283 | border-top: 3px solid #1225b4; 284 | box-sizing: border-box; 285 | height:30dvb; 286 | width: 100%; 287 | padding: 30px; 288 | margin-top: 10%; 289 | background-color:#132d4a; 290 | text-align: center; 291 | } 292 | .footer ul p{ 293 | color:white; 294 | } 295 | .footer li{ 296 | display: inline-block; 297 | padding: 20px; 298 | } 299 | a.foot-link:link{ 300 | color: white; 301 | } 302 | a.foot-link:visited{ 303 | color: white; 304 | } 305 | 306 | .footer p{ 307 | color:white; 308 | margin-top:2rem; 309 | } 310 | 311 | .seperate_header{ 312 | height: 1px; 313 | margin-top: 80px; 314 | } 315 | 316 | 317 | .theme-button{ 318 | height: 35px; 319 | width: 35px; 320 | border: dashed #ffffff3d 0.5px; 321 | background-color: #2058d100; 322 | border-radius: 360px; 323 | padding: 5px; 324 | margin-top: 22px; 325 | } 326 | 327 | 328 | 329 | 330 | 331 | /* mobile style adjustments */ 332 | @media(max-width: 720px){ 333 | .navbar li{ 334 | font-size: 16px; 335 | padding-right: 0px; 336 | } 337 | 338 | .login-signup{ 339 | margin-left: 5%; 340 | margin-right: 5%; 341 | } 342 | 343 | input{ 344 | width: 80%; 345 | margin-left: 10%; 346 | margin-right: 10%; 347 | } 348 | 349 | .footer li{ 350 | padding: 5px; 351 | font-size: 13px; 352 | } 353 | .footer p{ 354 | font-size: 12px; 355 | } 356 | 357 | .theme-button{ 358 | height: 35px; 359 | width: 35px; 360 | border: solid #ffffff3d 0.5px; 361 | background-color: #2058d100; 362 | border-radius: 360px; 363 | padding: 5px; 364 | margin-top: 25px; 365 | } 366 | 367 | } 368 | 369 | @media (max-width: 952px){ 370 | label.logo{ 371 | font-size: 30px; 372 | padding-left: 50px; 373 | } 374 | nav .menu-items .menu-items-li .navv-item{ 375 | font-size: 16px; 376 | } 377 | } 378 | 379 | @media (max-width: 858px){ 380 | /* .cbtn{ 381 | display: block; 382 | } */ 383 | .menu-btn { 384 | display: inline-block; 385 | } 386 | .menu-items{ 387 | position:fixed; 388 | display: block; 389 | width: 100%; 390 | height: 90vh; 391 | background: #212121; 392 | top: 31px; 393 | left: -100%; 394 | text-align: center; 395 | transition: all .5s; 396 | z-index: 100; 397 | } 398 | nav .menu-items{ 399 | background-color: #132d4aeb; 400 | display: grid; 401 | margin: 50px 0; 402 | line-height: 30px; 403 | align-content: center; 404 | justify-content: center; 405 | align-items: center; 406 | justify-items: center; 407 | } 408 | nav .menu-items .menu-items-li .navv-item{ 409 | font-size: 20px; 410 | } 411 | .navv-item:hover,.navv-item.active{ 412 | background: none; 413 | color: #0082e6; 414 | } 415 | .active { 416 | left: 0%; 417 | } 418 | } 419 | 420 | a { 421 | text-decoration: none; 422 | color: #333; /* Default link color */ 423 | transition: color 0.3s; /* Smooth color transition on hover */ 424 | } 425 | @media (max-width: 350px){ 426 | .menu-btn { 427 | margin-right: 15px; 428 | } 429 | } 430 | 431 | /* Add the CSS styles for the lightbox here */ 432 | .lightbox-overlay { 433 | display: none; 434 | position: fixed; 435 | top: 0; 436 | left: 0; 437 | width: 100%; 438 | height: 100%; 439 | background-color: rgba(0, 0, 0, 0.7); 440 | z-index: 9999; 441 | text-align: center; 442 | } 443 | 444 | .lightbox-overlay img { 445 | max-width: 95%; 446 | max-height: 95%; 447 | margin-top: 3%; 448 | margin-bottom: 3%; 449 | 450 | } 451 | .menu-icon{ 452 | height: 15px; 453 | width: 15px; 454 | vertical-align: middle; 455 | margin-right: 5px; 456 | margin-left: 5px; 457 | } -------------------------------------------------------------------------------- /message.php: -------------------------------------------------------------------------------- 1 | 12 | alert('Error occurred please Login to continue'); 13 | window.location = '$home_page'; 14 | 15 | "; 16 | } 17 | 18 | // getting GET & SESSION variables 19 | $recp1 = $_SESSION['id']; 20 | $recp2 = $_GET['recp2']; 21 | 22 | // $recp1 = 7; 23 | // $recp2 = 1; 24 | 25 | //set $username for both the recipients 26 | // creating associative array to access username with id 27 | $username = array(); 28 | $name = array(); 29 | $status = array(); 30 | 31 | $sql = "SELECT `username` FROM `users` WHERE `id` = $recp1"; 32 | $result = mysqli_query($connection, $sql); 33 | $rows = mysqli_fetch_all($result); 34 | // setting username and name for recipient 1 35 | $username[$recp1] = $rows[0][0]; 36 | $name[$recp1] = "Me"; 37 | $status[$recp1] = 1; 38 | 39 | $sql = "SELECT `username`, `fname`, `status` FROM `users` WHERE `id` = $recp2"; 40 | $result = mysqli_query($connection, $sql); 41 | $rows = mysqli_fetch_all($result); 42 | // setting username and name for recipient 2 43 | $username[$recp2] = $rows[0][0]; 44 | $name[$recp2] = $rows[0][1]; 45 | $status[$recp2] = $rows[0][2]; 46 | 47 | 48 | // checking whether the room with recipient already exits or not 49 | $sql = "SELECT * FROM `rooms` WHERE (`recp1` = ".$recp1." OR `recp1` = ".$recp2.") AND (`recp2` = ".$recp1." OR `recp2` = ".$recp2.");"; 50 | $result = mysqli_query($connection, $sql); 51 | 52 | if(mysqli_num_rows($result) == 1){ 53 | $rows = mysqli_fetch_assoc($result); 54 | // set $room_id 55 | $room_id = $rows['room_id']; 56 | } else if(mysqli_num_rows($result) == 0){ 57 | // creating new room for the recipients 58 | $sql = "INSERT INTO `rooms` (`room_id`, `recp1`, `recp2`) VALUES (NULL, '".$recp1."', '".$recp2."');"; 59 | $result = mysqli_query($connection, $sql); 60 | 61 | // set $room_id 62 | $sql = "SELECT `room_id` FROM `rooms` WHERE `recp1` = ".$recp1." AND `recp2` = ".$recp2.";"; 63 | $result = mysqli_query($connection, $sql); 64 | $rows = mysqli_fetch_assoc($result); 65 | $room_id = $rows['room_id']; 66 | } 67 | 68 | ?> 69 | 70 | 71 | Minglr - Get Connected 72 | 73 | 74 | 75 | 76 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 140 |
141 | 171 | 172 |
173 |
174 |
175 |
    176 |
  • 177 | profile"> 178 |
    • 179 |
  • 180 | ".$name[$recp1]."";} else{echo "".$name[$recp2]."";} ?> 181 |
    online";} else{echo "
    offline    ";} ?> 182 |
    • 183 |
184 |
185 |
186 | 0){ 193 | $rows = mysqli_fetch_all($result); 194 | foreach($rows as $row){ 195 | echo '
196 |
197 | 202 |
203 |
204 | '.str_replace("\n", "
", $row[1]).' 205 |
206 |
'; 207 | } 208 | } else{ 209 | echo "
Start new Conversation
"; 210 | } 211 | ?> 212 |
213 | 216 |
217 |
218 | 219 | 220 | 221 | 222 | 223 |
224 |
225 |
226 |
227 | 228 |
229 |

Minglr

230 | 244 | 258 |

This website is only for educational purposes and does not try to replicate any institution/entity/company - by Mayuresh Choudhary

259 |
260 | 261 | 262 | 263 | -------------------------------------------------------------------------------- /feed.php: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | Minglr - Get Connected 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 87 | 88 | 89 | 90 |
91 | 119 | 120 |
121 |
122 |

Feed

123 |
124 | 125 | 126 |
127 |
128 | 129 | 130 | 131 | "> 132 | 133 | 134 |
135 |
136 | 137 | 138 |
139 | New post) 141 | $postsql = "SELECT `msg`, `image`, `uid`, `dop` FROM `posts` ORDER BY `dop` DESC;"; 142 | // executing query 143 | $postresult = mysqli_query($connection, $postsql); 144 | // counting number of rows return by query and only show post box 145 | // if number posts are greater than zero 146 | 147 | if (mysqli_num_rows($postresult) > 0) { 148 | 149 | 150 | // fetching rows returned by query 151 | $postrows = mysqli_fetch_all($postresult); 152 | 153 | foreach ($postrows as $postrow) { 154 | // getting usernames for every posts as usernames are not stored in same table 155 | $usrsql = "SELECT `username`, `fname` FROM `users` WHERE `id` = " . $postrow[2] . ";"; 156 | $usrresult = mysqli_query($connection, $usrsql); 157 | $usrrow = mysqli_fetch_assoc($usrresult); 158 | 159 | if ($postrow[1] == NULL) { 160 | echo '
161 |
162 |
    163 |
  • 164 | 165 |
    • 166 |
  • 167 | ' . $usrrow['fname'] . ' 168 |
    • 169 |
  • 170 | shared a post in the feed on 171 | ' . $postrow[3] . ' 172 |
    • 173 |
174 |
175 |
176 | ' . str_replace("\n", "
", $postrow[0]) . ' 177 |
178 |
'; 179 | } else { 180 | echo '
181 |
182 |
    183 |
  • 184 | 185 |
    • 186 |
  • 187 | ' . $usrrow['fname'] . ' 188 |
    • 189 |
  • 190 | shared a post in the feed on 191 | ' . $postrow[3] . ' 192 |
    • 193 |
194 |
195 |
196 | ' . str_replace("\n", "
", $postrow[0]) . ' 197 |
198 |
199 | ' . $postrow[1] . ' 200 |
201 |
'; 202 | } 203 | } 204 | } else { 205 | echo '

Posts Not found

'; 206 | } 207 | ?> 208 |
209 |
210 | 211 |
212 |

Minglr

213 | 227 | 241 |

This website is only for educational purposes and does not try to replicate any institution/entity/company - by Mayuresh Choudhary

242 |
243 | 246 | 247 | 248 | 249 | 250 | -------------------------------------------------------------------------------- /index.php: -------------------------------------------------------------------------------- 1 | 8 | 9 | Minglr - Social Networking Site 10 | 11 | 12 | 13 | 22 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 97 | 98 |
99 | 128 | 129 |
130 |
131 |
OR
132 |
133 | 138 |
139 |
140 | 209 |
210 |
211 | 212 |
213 |

Minglr

214 | 228 | 242 |

This website is only for educational purposes and does not try to replicate any institution/entity/company - by Mayuresh Choudhary

243 |
244 | 245 | 246 | 247 | -------------------------------------------------------------------------------- /account.php: -------------------------------------------------------------------------------- 1 | =1){ 20 | // // fetching and storing records in variables 21 | // // while(){ 22 | 23 | // // } 24 | // $row = mysqli_fetch_assoc($result); 25 | // $username_row=$row['username']; 26 | // $user_id = $row['id']; 27 | // $fname = $row['fname']; 28 | // $lname = $row['lname']; 29 | // $email = $row['email']; 30 | // } 31 | } 32 | 33 | ?> 34 | 35 | 36 | Minglr - Get Connected 37 | 38 | 39 | 40 | 41 | 42 | 43 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 107 |
108 | 136 | 137 | 138 | = 1) : ?> 139 | 146 | 147 |
148 | User 1 149 | 153 |
154 | 155 | 156 | 157 | 160 | 161 | 162 | 178 |
179 |
180 | 214 | 215 | 228 | 229 |
230 | 232 | 233 | 234 | 235 | 239 |
240 |

Welcome to 's feed...

241 | 242 | 244 | 245 | 246 |
247 |
248 | 249 | 250 | 251 | 252 | 253 |
254 |
255 | 256 | 257 | 0) { 267 | // fetching rows returned by query 268 | $postrows = mysqli_fetch_all($postresult); 269 | 270 | foreach ($postrows as $postrow) { 271 | if ($postrow[1] == NULL) { 272 | echo '
273 |
274 |
    275 |
  • 276 | 277 |
    • 278 |
  • 279 | ' . $fname . ' 280 |
    • 281 |
  • 282 | shared a post in the feed on 283 | ' . $postrow[3] . ' 284 |
    • 285 |
286 |
287 |
288 | ' . str_replace("\n", "
", $postrow[0]) . ' 289 |
290 |
'; 291 | } else { 292 | echo '
293 |
294 |
    295 |
  • 296 | 297 |
    • 298 |
  • 299 | ' . $fname . ' 300 |
    • 301 |
  • 302 | shared a post in the feed on 303 | ' . $postrow[3] . ' 304 |
    • 305 |
306 |
307 |
308 | ' . str_replace("\n", "
", $postrow[0]) . ' 309 |
310 |
311 | ' . $postrow[1] . ' 312 |
313 |
'; 314 | } 315 | } 316 | } else { 317 | echo '

Posts Not found

'; 318 | } 319 | ?> 320 |
321 | 322 | 323 | 324 |
325 |

Get to know more...

326 |
327 |

Basic

328 |
    329 |
  • 330 |
      331 |
    • 332 |

      Name :

      333 |
      • 334 |
    • 335 | 338 |
      • 339 |
    340 |
    • 341 | 342 |
  • 343 |
      344 |
    • 345 |

      Last Name :

      346 |
      • 347 |
    • 348 | 351 |
      • 352 |
    353 |
    • 354 | 355 |
  • 356 |
      357 |
    • 358 |

      Username :

      359 |
      • 360 |
    • 361 | 364 |
      • 365 |
    366 |
    • 367 | 368 |
  • 369 |
      370 |
    • 371 |

      Email :

      372 |
      • 373 |
    • 374 | 377 |
      • 378 |
    379 |
    • 380 |
381 |
382 |
383 | 384 | 385 | 386 |
387 |

See photos from ...

388 | 0) { 393 | while ($postrow = mysqli_fetch_assoc($postresultimgs)) { 394 | echo '
395 |
396 |
    397 |
  • 398 | 399 |
    • 400 |
  • 401 | ' . $fname . ' 402 |
    • 403 |
  • 404 | shared a post in the feed on 405 | ' . $postrow['dop'] . ' 406 |
    • 407 |
408 |
409 |
410 | ' . str_replace("\n", "
", $postrow['msg']) . ' 411 |
412 |
413 | ' . $postrow['image'] . ' 414 |
415 |
'; 416 | } 417 | } else { 418 | echo '

Posts Not found

'; 419 | } 420 | ?> 421 |
422 | 423 |
424 |
425 |
426 | 427 | 428 | 429 | 430 | 435 | 436 |
437 |

Minglr

438 | 452 | 466 |

This website is only for educational purposes and does not try to replicate any institution/entity/company - by Mayuresh Choudhary

467 |
468 | 469 | 472 | 473 | 474 | 475 | 476 | 477 | --------------------------------------------------------------------------------