├── .gitignore ├── CSS ├── about-us.css ├── contact-us.css ├── footer.css ├── friend.css ├── header.css ├── homepage.css ├── login.css ├── notification.css ├── post.css ├── profile.css ├── search.css ├── signup.css └── style.css ├── Database └── travellog.sql ├── Images ├── Background │ ├── img1.jpg │ ├── img3.jpg │ ├── img5.jpg │ ├── pexels-dominika-roseclay-1252500.jpg │ ├── pexels-ketut-subiyanto-4436363.jpg │ ├── pexels-mohamed-almari-368893.jpg │ └── pexels-nappy-1058959.jpg ├── Landing-Page-SS.png ├── Landing-Page-Screenshot.png ├── Mobile-Background │ ├── pexels-alex-azabache-3214958.jpg │ ├── pexels-ketut-subiyanto-4429452.jpg │ ├── pexels-simon-migaj-885880.jpg │ └── pexels-taryn-elliott-3889855.jpg ├── about-us-rec.gif ├── alps_favicon.png ├── mountain.png ├── search.png └── traveller.png ├── JS ├── about-us-toggle.js ├── change-bg.js ├── homepage.js ├── script.js └── scroll-homepage.js ├── LICENSE.txt ├── PHP ├── accept-request.php ├── add-friend.php ├── contact-us.php ├── create-post.php ├── decline-request.php ├── delete-post.php ├── disp-friend-box.php ├── edit-profile.php ├── footer.php ├── functions.php ├── header.php ├── homepage.php ├── login.php ├── logout.php ├── notification.php ├── post.php ├── profile.php ├── remove-friend.php ├── search.php ├── signup.php └── terms-and-conditions.php ├── README.md ├── about-us.html └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | .vscode/ -------------------------------------------------------------------------------- /CSS/about-us.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap'); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | font-family: 'Montserrat', sans-serif; 8 | scroll-behavior: smooth; 9 | } 10 | 11 | body { 12 | background: #111; 13 | display: flex; 14 | flex-direction: column; 15 | } 16 | 17 | ::-webkit-scrollbar { 18 | width: 0; 19 | /* Remove scrollbar space */ 20 | background: transparent; 21 | /* Optional: just make scrollbar invisible */ 22 | } 23 | 24 | /*****************************************Header Styles *************************************************/ 25 | ul, 26 | nav { 27 | list-style: none; 28 | display: flex; 29 | flex-direction: row; 30 | } 31 | 32 | a { 33 | text-decoration: none; 34 | opacity: 0.75; 35 | color: #fff; 36 | display: flex; 37 | cursor: pointer; 38 | } 39 | 40 | a:hover { 41 | opacity: 1; 42 | } 43 | 44 | .grid { 45 | width: 100%; 46 | display: flex; 47 | flex-wrap: wrap; 48 | justify-content: center; 49 | } 50 | 51 | hr { 52 | width: 250px; 53 | height: 3px; 54 | background-color: #3f51b5; 55 | border: 0; 56 | margin-bottom: 50px; 57 | } 58 | 59 | a.btn { 60 | border-radius: 4px; 61 | text-transform: uppercase; 62 | font-weight: bold; 63 | text-align: center; 64 | background-color: #333; 65 | opacity: 1; 66 | color: #fff; 67 | border: 2px solid #fff; 68 | } 69 | 70 | header { 71 | width: 95%; 72 | color: #fff; 73 | display: flex; 74 | justify-content: space-between; 75 | font-family: "Raleway", sans-serif; 76 | font-weight: 500; 77 | align-items: center; 78 | animation: 1s fadein 0.5s forwards; 79 | opacity: 0; 80 | margin: 20px auto; 81 | } 82 | 83 | @keyframes fadein { 84 | 100% { 85 | opacity: 1; 86 | } 87 | } 88 | 89 | header h2 { 90 | margin-left: 5%; 91 | } 92 | 93 | header nav { 94 | display: flex; 95 | align-items: center; 96 | justify-content: center; 97 | } 98 | 99 | header nav li { 100 | margin: 0 15px; 101 | cursor: pointer; 102 | } 103 | 104 | @media (max-width: 800px) { 105 | .content { 106 | flex-direction: column; 107 | } 108 | 109 | header { 110 | /* padding: 20px 50px; */ 111 | flex-direction: column; 112 | } 113 | 114 | header h2 { 115 | margin-left: 0; 116 | margin-bottom: 12px; 117 | } 118 | } 119 | 120 | /***************************************** Main Content Styles *************************************************/ 121 | section { 122 | position: relative; 123 | padding: 100px; 124 | } 125 | 126 | .banner { 127 | position: relative; 128 | width: 100%; 129 | min-height: 100vh; 130 | display: flex; 131 | justify-content: center; 132 | align-items: center; 133 | } 134 | 135 | .banner:before { 136 | position: absolute; 137 | bottom: 0; 138 | left: 0; 139 | width: 100%; 140 | height: 400px; 141 | z-index: 1; 142 | background: linear-gradient(to top, #111, transparent); 143 | background: linear-gradient(to bottom, #111, transparent); 144 | } 145 | 146 | .banner .content { 147 | position: relative; 148 | max-width: 900; 149 | text-align: center; 150 | z-index: 1; 151 | } 152 | 153 | .banner .content h2 { 154 | color: #fff; 155 | font-size: 5em; 156 | } 157 | 158 | .banner .content p { 159 | color: #fff; 160 | font-size: 1.2em; 161 | } 162 | 163 | .btn { 164 | position: relative; 165 | display: inline-block; 166 | margin-top: 30px; 167 | padding: 10px 30px; 168 | background: #fff; 169 | color: #333; 170 | text-decoration: none; 171 | } 172 | 173 | .fitBg { 174 | position: absolute; 175 | top: 0; 176 | left: 0; 177 | width: 100%; 178 | height: 100%; 179 | object-fit: cover; 180 | opacity: 0.5; 181 | box-shadow: 8px 8px 8px 8px black inset; 182 | background: linear-gradient(to top, #111, transparent); 183 | background: linear-gradient(to bottom, #111, transparent); 184 | border: none; 185 | } 186 | 187 | .about { 188 | position: relative; 189 | width: 100%; 190 | display: flex; 191 | justify-content: center; 192 | align-items: center; 193 | } 194 | 195 | .about .contentBx { 196 | min-width: 50%; 197 | width: 50%; 198 | text-align: end; 199 | padding-right: 40px; 200 | } 201 | 202 | .titleText { 203 | font-weight: 600; 204 | color: #fff; 205 | font-size: 2em; 206 | margin-bottom: 10px; 207 | } 208 | 209 | .text { 210 | color: #fff; 211 | font-size: 1em; 212 | } 213 | 214 | .about .imgBx { 215 | position: relative; 216 | min-width: 50%; 217 | width: 50%; 218 | min-height: 500px; 219 | } 220 | 221 | /***************************************** Banner 2 aand Banner 3 *************************************************/ 222 | .banner2, 223 | .banner3 { 224 | position: relative; 225 | width: 100%; 226 | min-height: 100vh; 227 | display: flex; 228 | justify-content: center; 229 | align-items: center; 230 | } 231 | 232 | .banner2:before, 233 | .banner3:before { 234 | /* content: ''; */ 235 | position: absolute; 236 | bottom: 0; 237 | left: 0; 238 | width: 100%; 239 | height: 400px; 240 | z-index: 1; 241 | background: linear-gradient(to top, #111, transparent); 242 | } 243 | 244 | .banner2:after, 245 | .banner3:after { 246 | /* content: ''; */ 247 | position: absolute; 248 | top: 0; 249 | left: 0; 250 | width: 100%; 251 | height: 400px; 252 | z-index: 1; 253 | background: linear-gradient(to bottom, #111, transparent); 254 | } 255 | 256 | /***************************************** Banner 2 Section Text Styles *************************************************/ 257 | .banner2 .Tagline { 258 | color: white !important; 259 | margin: 30px; 260 | display: flex; 261 | flex-direction: column; 262 | width: 60%; 263 | margin: auto; 264 | text-align: center; 265 | } 266 | 267 | .banner2 .Tagline h1 { 268 | font-family: 'Merriweather Sans', sans-serif; 269 | font-size: 40px; 270 | margin-bottom: 5px; 271 | display: inline-block; 272 | opacity: 1; 273 | } 274 | 275 | .banner2 .Tagline h3 { 276 | font-family: 'Montserrat', sans-serif; 277 | font-size: 20px; 278 | margin-top: 5px; 279 | margin-bottom: 10%; 280 | display: inline-block; 281 | } 282 | 283 | .banner2 .Tagline .buttons-flex { 284 | display: flex; 285 | justify-content: space-around; 286 | } 287 | 288 | /***************************************** Testimonial Section Styles *************************************************/ 289 | .testimonials { 290 | text-align: center; 291 | } 292 | 293 | .testimonials .content2 { 294 | text-align: center; 295 | } 296 | 297 | .testimonials .testimonialsList { 298 | position: relative; 299 | display: flex; 300 | justify-content: center; 301 | align-items: center; 302 | flex-wrap: wrap; 303 | margin-top: 40px; 304 | } 305 | 306 | .testimonials .testimonialsList .box { 307 | position: relative; 308 | width: 300px; 309 | height: 400px; 310 | background: #191919; 311 | transition: 0.5s; 312 | margin: 10px; 313 | display: flex; 314 | align-items: center; 315 | flex-direction: column; 316 | } 317 | 318 | .testimonials .testimonialsList:hover .box { 319 | opacity: 0.2; 320 | } 321 | 322 | .testimonials .testimonialsList .box:hover { 323 | opacity: 1; 324 | } 325 | 326 | .testimonials .testimonialsList .box .imgBx { 327 | display: flex; 328 | position: relative; 329 | width: 100px; 330 | height: 100px; 331 | border-radius: 100%; 332 | margin-top: 20%; 333 | } 334 | 335 | .testimonials-img { 336 | width: 100px; 337 | height: 100px; 338 | border-radius: 100%; 339 | } 340 | 341 | .testimonials .testimonialsList .box .content { 342 | width: 100%; 343 | height: 80px; 344 | padding: 20px; 345 | display: flex; 346 | flex-direction: column; 347 | justify-content: center; 348 | align-items: center; 349 | } 350 | 351 | .testimonials .testimonialsList .box .content blockquote { 352 | color: #fff; 353 | font-weight: 500; 354 | line-height: 1.2em; 355 | display: flex; 356 | padding-top: 100px; 357 | } 358 | 359 | .testimonials .testimonialsList .box .content h2 { 360 | padding-top: 20px; 361 | color: #fff; 362 | font-weight: 500; 363 | line-height: 1.2em; 364 | display: flex; 365 | } 366 | 367 | .testimonials .testimonialsList .box .content span { 368 | font-size: 0.8em !important; 369 | opacity: 0.5 !important; 370 | display: flex !important; 371 | color: #fff; 372 | font-weight: 500; 373 | line-height: 1.2em; 374 | } 375 | 376 | /***************************************** Banner 3 Section Text Styles *************************************************/ 377 | .banner3 .Tagline { 378 | color: white !important; 379 | margin: 30px; 380 | display: flex; 381 | flex-direction: column; 382 | width: 60%; 383 | margin: auto; 384 | text-align: center; 385 | } 386 | 387 | .banner3 .Tagline h1 { 388 | font-family: 'Merriweather Sans', sans-serif; 389 | font-size: 40px; 390 | margin-bottom: 5px; 391 | display: inline-block; 392 | opacity: 1; 393 | } 394 | 395 | .banner3 .Tagline h3 { 396 | font-family: 'Montserrat', sans-serif; 397 | font-size: 20px; 398 | margin-top: 5px; 399 | margin-bottom: 10%; 400 | display: inline-block; 401 | } 402 | 403 | .banner3 .Tagline .buttons-flex { 404 | display: flex; 405 | justify-content: space-around; 406 | } 407 | 408 | /***************************************** Footer Styles *************************************************/ 409 | .footer { 410 | display: flex; 411 | justify-content: center; 412 | align-items: center; 413 | flex-direction: column; 414 | } 415 | 416 | .footer .footer-links { 417 | color: #ffffff; 418 | padding: 0; 419 | } 420 | 421 | .footer .footer-links a { 422 | display: inline-block; 423 | line-height: 1.8; 424 | text-decoration: none; 425 | color: inherit; 426 | margin: 10px; 427 | padding: 5px 20px; 428 | margin-bottom: 40px; 429 | } 430 | 431 | .footer-links a:hover { 432 | background-color: black; 433 | text-decoration: underline; 434 | } 435 | 436 | .footer .sci { 437 | position: relative; 438 | display: flex; 439 | } 440 | 441 | .footer .sci li { 442 | list-style: none; 443 | } 444 | 445 | .footer .sci li a { 446 | text-decoration: none; 447 | margin: 0 20px; 448 | } 449 | 450 | .footer .sci li a .fa { 451 | color: #fff; 452 | font-size: 40px; 453 | } 454 | 455 | .copyrightText { 456 | margin-top: 20px; 457 | color: #fff; 458 | font-size: 18px; 459 | font-weight: 300; 460 | color: #666; 461 | text-align: center; 462 | } 463 | 464 | .copyrightText a { 465 | color: #fff; 466 | text-decoration: none; 467 | display: inline-block; 468 | } 469 | 470 | /***************************************** To Top Button Styles *************************************************/ 471 | .toTop { 472 | position: fixed; 473 | bottom: 40px; 474 | right: 40px; 475 | padding-top: 7px; 476 | border-radius: 50%; 477 | background: #fff; 478 | color: #333; 479 | font-size: 25px; 480 | z-index: 2; 481 | opacity: 0.7; 482 | pointer-events: auto; 483 | transition: all 0.4s; 484 | width: 50px; 485 | height: 50px; 486 | text-align: center; 487 | display: inline-block; 488 | } 489 | 490 | .toTop:hover { 491 | opacity: 1; 492 | } 493 | 494 | /***************************************** Responsive Styles for mobile *************************************************/ 495 | @media (max-width: 767px) { 496 | section { 497 | padding: 40px; 498 | } 499 | 500 | header nav li { 501 | margin: 0 !important; 502 | } 503 | 504 | nav { 505 | width: 90% !important; 506 | } 507 | 508 | nav a { 509 | font-size: 12px; 510 | margin: 5px !important; 511 | padding: 0 !important; 512 | } 513 | 514 | .banner .content { 515 | width: 95%; 516 | /* justify-content: flex-start; */ 517 | } 518 | 519 | h2 { 520 | font-size: 2em !important; 521 | /* text-align: left !important; */ 522 | } 523 | 524 | /* p { 525 | text-align: left !important; 526 | } */ 527 | p, a { 528 | font-size: 1em !important; 529 | } 530 | 531 | .about { 532 | flex-direction: column; 533 | justify-content: flex-start; 534 | background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../Images/Mobile-Background/pexels-alex-azabache-3214958.jpg"); 535 | background-position: center; 536 | background-repeat: no-repeat; 537 | background-size: cover; 538 | } 539 | 540 | .about .contentBx { 541 | max-width: 100%; 542 | width: 100%; 543 | text-align: left; 544 | padding-right: 0px; 545 | } 546 | 547 | .about .imgBx { 548 | display: none; 549 | } 550 | 551 | .Tagline { 552 | width: 100% !important; 553 | } 554 | 555 | .Tagline h1 { 556 | font-size: 1.5em !important; 557 | text-align: left; 558 | } 559 | 560 | .Tagline h3 { 561 | font-size: 1em !important; 562 | text-align: left; 563 | } 564 | 565 | .Tagline .buttons-flex { 566 | justify-content: flex-start; 567 | } 568 | 569 | .banner2 .Tagline .buttons-flex .btn { 570 | margin-right: 20%; 571 | } 572 | 573 | .banner3 .Tagline .buttons-flex .btn { 574 | font-size: 12px; 575 | margin-right: 10%; 576 | } 577 | 578 | .btn { 579 | margin-bottom: 30px; 580 | /* margin-right: 20%; */ 581 | font-size: 0.7em !important; 582 | padding: 10px 10px; 583 | } 584 | 585 | .testimonials .content2 .titleText { 586 | font-size: 1.5em !important; 587 | text-align: left; 588 | } 589 | 590 | .testimonials .testimonialsList .box .imgBx { 591 | margin-top: 30px; 592 | margin-bottom: 80px; 593 | } 594 | 595 | .testimonials .testimonialsList .box .content blockquote { 596 | padding-top: 0; 597 | text-align: left; 598 | } 599 | 600 | .footer .sci li a .fa { 601 | font-size: 30px; 602 | } 603 | } 604 | -------------------------------------------------------------------------------- /CSS/contact-us.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | font-family: 'Montserrat', sans-serif; 4 | margin: 0; 5 | padding: 0; 6 | /* color: white; */ 7 | } 8 | 9 | /***************************************** CONTACT SECTION STYLING *************************************************/ 10 | .contact { 11 | align-items: center; 12 | background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../Images/Background/img1.jpg'); 13 | background-size: cover; 14 | display: flex; 15 | flex-direction: column; 16 | justify-content: center; 17 | min-height: 100vh; 18 | padding: 50px 100px; 19 | position: relative; 20 | } 21 | 22 | /********************************* CONTAINER WITHIN CONTACT SECTION STYLING *****************************************/ 23 | .container { 24 | display: flex; 25 | justify-content: center; 26 | align-items: center; 27 | width: 100%; 28 | margin-top: 30px; 29 | } 30 | 31 | /***************************************** LEFT SIDE OF CONTAINER STYLING *************************************************/ 32 | .container .contact-info { 33 | display: flex; 34 | flex-direction: column; 35 | width: 50%; 36 | } 37 | 38 | .container .contact-info a { 39 | text-decoration: none; 40 | } 41 | 42 | .container .contact-info h2 { 43 | font-size: 40px; 44 | font-weight: 300; 45 | color: white; 46 | text-decoration: none; 47 | padding-bottom: 20px; 48 | margin-top: 0; 49 | padding-top: 5px; 50 | } 51 | 52 | .container .contact-info .box { 53 | display: flex; 54 | padding: 20px 0; 55 | position: relative; 56 | } 57 | 58 | .container .contact-info .box .icon { 59 | min-width: 50px; 60 | height: 50px; 61 | background: white; 62 | display: flex; 63 | justify-content: center; 64 | align-items: center; 65 | border-radius: 50%; 66 | font-size: 20px; 67 | } 68 | 69 | .container .contact-info .box .text { 70 | display: flex; 71 | flex-direction: column; 72 | justify-content: center; 73 | /* align-items: center; */ 74 | margin-left: 20px; 75 | font-size: 16px; 76 | color: white; 77 | } 78 | 79 | .container .contact-info .box .text h3 { 80 | color: #e27802; 81 | } 82 | 83 | /***************************************** RIGHT SIDE OF CONTAINER STYLING *************************************************/ 84 | .contact-form { 85 | width: 40%; 86 | padding: 40px; 87 | background: #fff; 88 | } 89 | 90 | .contact-form h2 { 91 | font-size: 30px; 92 | color: #333; 93 | font-weight: 500; 94 | } 95 | 96 | .contact-form .input-box { 97 | position: relative; 98 | width: 100%; 99 | margin-top: 10px; 100 | } 101 | 102 | .contact-form .input-box input, textarea { 103 | width: 100%; 104 | padding: 5px 0; 105 | font-size: 16px; 106 | margin: 10px 0; 107 | border: none; 108 | outline: none; 109 | border-bottom: 1px solid #333; 110 | resize: none; 111 | } 112 | 113 | .contact-form .input-box span { 114 | position: absolute; 115 | left: 0; 116 | padding-bottom: 10px; 117 | color: gray; 118 | font-size: 12px; 119 | } 120 | 121 | .contact-form .input-box input[type="submit"] { 122 | background: none; 123 | border-radius: 18px; 124 | border: 2px solid #e27802; 125 | color: #e27802; 126 | cursor: pointer; 127 | } 128 | 129 | .contact-form .input-box input[type="submit"]:hover { 130 | background-color: #e27802; 131 | color: #333; 132 | } 133 | 134 | /***************************************** RESONSIVE STYLING *************************************************/ 135 | @media (max-width: 991px) { 136 | .contact { 137 | padding: 50px; 138 | } 139 | 140 | .container { 141 | flex-direction: column; 142 | align-items: center; 143 | } 144 | 145 | .container .contact-info { 146 | padding: 20px 0; 147 | justify-content: center; 148 | } 149 | 150 | .container .contact-info .box { 151 | padding: 0; 152 | } 153 | 154 | .container .contact-info .box .icon { 155 | height: 40px; 156 | min-width: 40px; 157 | } 158 | 159 | .container .contact-info a h2 { 160 | font-size: 30px; 161 | } 162 | 163 | .container .contact-info .box .text { 164 | margin-bottom: 40px; 165 | font-size: 12px !important; 166 | } 167 | 168 | .container .contact-info, .contact-form { 169 | width: 100%; 170 | } 171 | 172 | .contact-form h2 { 173 | font-size: 15px; 174 | } 175 | 176 | .contact-form .input-box span { 177 | font-size: 12px; 178 | } 179 | 180 | .contact-form .input-box input, textarea { 181 | font-size: 12px; 182 | } 183 | 184 | .contact-form .input-box input[type="submit"] { 185 | font-size: 12px; 186 | } 187 | } 188 | -------------------------------------------------------------------------------- /CSS/footer.css: -------------------------------------------------------------------------------- 1 | a{ 2 | text-decoration: none; 3 | opacity: 0.75; 4 | color: #fff; 5 | } 6 | 7 | a:hover{ 8 | opacity: 1; 9 | } 10 | 11 | /******************************************* FOOTER STYLING ***********************************/ 12 | footer { 13 | position: relative; 14 | text-align: center!important; 15 | padding: 20px; 16 | font-size: 20px!important; 17 | font-family: 'Montserrat'!important; 18 | } 19 | 20 | hr { 21 | /* width: 250px; */ 22 | height: 3px; 23 | background-color: #3f51b5; 24 | border: 0; 25 | margin-bottom: 50px; 26 | } 27 | 28 | .footer-distributed { 29 | background-color: #292c2f; 30 | box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12); 31 | box-sizing: border-box; 32 | width: 100%; 33 | font-family: 'Montserrat', sans-serif; 34 | font: bold 16px; 35 | } 36 | 37 | .footer-distributed { 38 | display: inline-block; 39 | vertical-align: top; 40 | } 41 | 42 | .footer-distributed .footer-links { 43 | color: #ffffff; 44 | padding: 0; 45 | } 46 | 47 | .footer-distributed .footer-links a { 48 | display: inline-block; 49 | line-height: 1.8; 50 | text-decoration: none; 51 | color: inherit; 52 | margin: 10px; 53 | padding: 5px; 54 | } 55 | 56 | .footer-links a:hover { 57 | background-color: black; 58 | text-decoration: underline; 59 | } 60 | 61 | .footer-distributed .footer-company-name { 62 | color: #8f9296; 63 | font-size: 14px; 64 | font-weight: normal; 65 | /* margin: 0; */ 66 | } 67 | 68 | .footer-distributed .footer-icons { 69 | margin-top: 15px; 70 | margin-bottom: 25px; 71 | } 72 | 73 | .footer-distributed .footer-icons a { 74 | display: inline-block; 75 | width: 35px; 76 | height: 35px; 77 | cursor: pointer; 78 | background-color: #33383b; 79 | border-radius: 2px; 80 | font-size: 20px; 81 | color: #ffffff; 82 | text-align: center; 83 | line-height: 35px; 84 | margin-right: 3px; 85 | margin-bottom: 5px; 86 | } 87 | 88 | .footer-icons a:hover { 89 | background-color: black; 90 | } 91 | 92 | @media (max-width: 880px) { 93 | .footer-distributed { 94 | font: bold 14px sans-serif; 95 | } 96 | 97 | .main { 98 | line-height: normal; 99 | font-size: auto; 100 | } 101 | } -------------------------------------------------------------------------------- /CSS/friend.css: -------------------------------------------------------------------------------- 1 | 2 | /************************************* ACCEPT/DECLINE FRIEND REQUESTS ******************************/ 3 | @import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700'); 4 | 5 | a { 6 | color: #333 !important; 7 | } 8 | 9 | .profile-links { 10 | color: #333 !important; 11 | text-decoration: none; 12 | } 13 | 14 | .profile-links :hover { 15 | text-decoration: none!important; 16 | color: #333!important; 17 | } 18 | 19 | .panel-body { 20 | display: flex; 21 | flex-direction: column; 22 | box-sizing: border-box; 23 | margin-top: 10%; 24 | margin-bottom: 5%; 25 | } 26 | 27 | .friend-list { 28 | font-family: 'Montserrat', sans-serif; 29 | } 30 | 31 | .friend-requests { 32 | font-family: 'Montserrat', sans-serif; 33 | text-align: center; 34 | } 35 | 36 | .friend-box { 37 | position: relative; 38 | /* background-color: #eee; */ 39 | border-radius: 5px; 40 | box-shadow: 0 0 1px rgba(0, 0, 0, 0.63); 41 | border-radius: 10px; 42 | padding: 20px; 43 | } 44 | 45 | .friend-profile { 46 | float: left; 47 | border-radius: 5px; 48 | height: 70px; 49 | width: 70px; 50 | background-size: cover; 51 | background-position: center; 52 | box-shadow: 0px 0px 15px #aaa; 53 | margin-right: 3%; 54 | } 55 | 56 | .name-box { 57 | text-align: left; 58 | color: #4F7091; 59 | font-size: 18px; 60 | } 61 | 62 | .user-name-box { 63 | text-align: left; 64 | font-size: 12px; 65 | line-height: 16px; 66 | } 67 | 68 | .request-btn-row { 69 | bottom: 10px; 70 | text-align: center; 71 | display: flex; 72 | justify-content: space-between; 73 | } 74 | 75 | .friend-request { 76 | margin-top: 10px; 77 | border-radius: 5px; 78 | border: 2px solid transparent; 79 | padding: 5px; 80 | cursor: pointer; 81 | } 82 | 83 | .decline-request { 84 | display: flex; 85 | background-color: #FF6666; 86 | text-align: center; 87 | color: #fff; 88 | } 89 | 90 | .decline-request:hover { 91 | background-color: #993333; 92 | } 93 | 94 | .accept-request { 95 | display: flex; 96 | text-align: center; 97 | background-color: #41c764; 98 | color: #fff; 99 | } 100 | 101 | .accept-request:hover { 102 | background-color: #419764; 103 | } 104 | 105 | .fr-request-pending { 106 | position: relative; 107 | top: -10px; 108 | color: #17406f; 109 | font-weight: bold; 110 | } 111 | 112 | .request-btn-row.disappear { 113 | display: none; 114 | } -------------------------------------------------------------------------------- /CSS/header.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | font-size: 12px; 5 | font-family: "Raleway", sans-serif; 6 | } 7 | 8 | ::-webkit-scrollbar { 9 | width: 0; 10 | /* Remove scrollbar space */ 11 | background: transparent; 12 | /* Optional: just make scrollbar invisible */ 13 | } 14 | 15 | /****************************************** NAVBAR STYLE ********************************************/ 16 | 17 | .nav-wrapper { 18 | width: 100%; 19 | /* position: -webkit-sticky; */ 20 | /* Safari */ 21 | position: sticky; 22 | top: 0; 23 | background-color: #fff; 24 | } 25 | 26 | nav { 27 | position: sticky; 28 | top: 0; 29 | left: 0; 30 | right: 0; 31 | /* height: 10%; */ 32 | display: flex; 33 | justify-content: space-between; 34 | padding-left: 3%; 35 | background-color: #333; 36 | color: white; 37 | box-shadow: 1px 3px 4px #e6e6e6; 38 | align-items: center; 39 | } 40 | 41 | /****************************************** NAVBAR LOGO STYLE ********************************************/ 42 | 43 | .Logo { 44 | width: auto; 45 | padding: 5px; 46 | display: flex; 47 | align-items: baseline; 48 | justify-content: center; 49 | } 50 | 51 | .Logo a { 52 | text-decoration: none; 53 | } 54 | 55 | .Logo-Img { 56 | height: 45px; 57 | width: 45px; 58 | margin-top: 5px; 59 | } 60 | 61 | .Logo-Text { 62 | color: lightgray; 63 | font-family: "Raleway", sans-serif; 64 | font-size: 45px; 65 | font-weight: 300; 66 | margin-right: 25px; 67 | flex: 1; 68 | } 69 | 70 | /****************************************** NAVBAR RIGHT NAVIGATION STYLE ********************************************/ 71 | .navigation { 72 | display: flex; 73 | right: 25px; 74 | float: right; 75 | align-items: center; 76 | padding-right: 20px; 77 | } 78 | 79 | .menu { 80 | display: flex; 81 | flex-direction: row; 82 | list-style: none; 83 | } 84 | 85 | .menu li a { 86 | color: inherit; 87 | text-decoration: none; 88 | margin: 0 15px; 89 | display: flex; 90 | padding: 5px; 91 | } 92 | 93 | .menu li a:hover { 94 | background-color: black; 95 | } 96 | 97 | .menu li a i { 98 | height: 30px; 99 | width: 30px; 100 | display: flex; 101 | align-items: center; 102 | justify-content: center; 103 | font-size: 20px; 104 | } 105 | 106 | .not-menu { 107 | display: flex; 108 | align-items: center; 109 | justify-content: space-between; 110 | flex-direction: row; 111 | } 112 | 113 | /***************************************** NAVBAR NOTIFICATION SECTION *********************************************/ 114 | 115 | .dropdown-menu { 116 | width: 250px !important; 117 | } 118 | 119 | a.dropdown-menu-header:hover { 120 | background-color: #e6e6e6 !important; 121 | } 122 | 123 | a.dropdown-menu-header { 124 | background: #f7f9fe; 125 | font-weight: bold; 126 | border-bottom: 1px solid #e3e3e3; 127 | } 128 | /* .dropdown-menu > li a { 129 | padding: 10px; 130 | } */ 131 | 132 | .dropdown-menu li { 133 | padding: 10px; 134 | /* margin-left: 10px; */ 135 | } 136 | 137 | 138 | /****************************************** NAVBAR SEARCH SECTION STYLE ********************************************/ 139 | .search { 140 | position: relative; 141 | display: flex; 142 | } 143 | 144 | .search-input::placeholder { 145 | color: white; 146 | opacity: 0.8; 147 | font-family: "Raleway", sans-serif; 148 | font-size: 15px; 149 | } 150 | 151 | .search-input { 152 | height: 0px; 153 | border: none; 154 | position: absolute; 155 | left: -200px; 156 | visibility: hidden; 157 | opacity: 0; 158 | top: 40px; 159 | background: #333; 160 | color: white; 161 | padding: 6px; 162 | font-size: 12px; 163 | outline: none; 164 | width: 220px; 165 | transition: 80ms all ease-in; 166 | border-bottom-left-radius: 5px; 167 | border-bottom-right-radius: 5px; 168 | box-shadow: none; 169 | } 170 | 171 | .search-button { 172 | background: transparent; 173 | color: white; 174 | cursor: pointer; 175 | font-size: 14px; 176 | padding-top: 4px; 177 | border: 0; 178 | margin: 0 15px; 179 | } 180 | 181 | .search-button i { 182 | height: 30px; 183 | width: 30px; 184 | display: flex; 185 | align-items: center; 186 | justify-content: center; 187 | font-size: 20px; 188 | } 189 | 190 | .search-button:hover+.search-input, 191 | .search-input:hover, 192 | .search:hover .search-input { 193 | visibility: visible !important; 194 | /* The search bar comes into view when hovered over */ 195 | opacity: 1 !important; 196 | z-index: 9 !important; 197 | box-shadow: 1px 3px 4px #e6e6e6; 198 | height: 25px !important; 199 | } 200 | 201 | /****************************************** NAVBAR SIGNOUT STYLE ********************************************/ 202 | 203 | .sign-out { 204 | display: flex; 205 | } 206 | 207 | .sign-out a { 208 | text-decoration: none; 209 | } 210 | 211 | .sign-out .menu-text { 212 | font-family: "Raleway", sans-serif; 213 | font-size: 20px; 214 | color: white; 215 | margin: 0 15px; 216 | border: 1px solid white; 217 | border-radius: 5px; 218 | padding: 5px; 219 | } 220 | 221 | .sign-out .menu-text:hover { 222 | background-color: white; 223 | color: #333; 224 | } 225 | 226 | .sign-out-mobile { 227 | display: none; 228 | } 229 | 230 | /**************************************** RESPONSIVE DESIGN CODE ******************************************************/ 231 | 232 | @media only screen and (max-width: 720px) { 233 | h1 { 234 | font-size: 20px; 235 | } 236 | 237 | h2 { 238 | font-size: 20px; 239 | } 240 | 241 | p { 242 | font-size: 12px; 243 | } 244 | 245 | /* MOBILE NAVIGATION */ 246 | .nav-wrapper { 247 | background-color: #333; 248 | width: 100%; 249 | } 250 | 251 | .navbar { 252 | flex-direction: column; 253 | width: 100%; 254 | background-color: #333; 255 | /* align-items: stretch; */ 256 | } 257 | 258 | .navigation { 259 | background-color: #333; 260 | flex-direction: column; 261 | } 262 | 263 | nav { 264 | height: auto; 265 | } 266 | 267 | .Logo { 268 | align-items: baseline; 269 | justify-content: center; 270 | } 271 | 272 | .Logo-Text { 273 | font-size: 30px; 274 | padding-bottom: 0; 275 | } 276 | 277 | .Logo-Img { 278 | height: 30px; 279 | width: 30px; 280 | } 281 | 282 | .not-menu { 283 | display: flex; 284 | align-items: center; 285 | justify-content: space-between; 286 | } 287 | 288 | .search { 289 | background-color: #333; 290 | } 291 | 292 | .search-input { 293 | top: 34px; 294 | left: -60px; 295 | } 296 | 297 | .sign-out { 298 | display: none; 299 | } 300 | 301 | .sign-out-mobile { 302 | display: flex; 303 | } 304 | 305 | .sign-out-mobile a { 306 | color: white; 307 | text-decoration: none; 308 | } 309 | 310 | .sign-out-mobile a i { 311 | height: 30px; 312 | width: 30px; 313 | display: flex; 314 | align-items: center; 315 | justify-content: center; 316 | font-size: 20px; 317 | } 318 | } -------------------------------------------------------------------------------- /CSS/homepage.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | /* font-family: Arial, Helvetica, sans-serif; */ 5 | font-size: 12px; 6 | } 7 | 8 | ::-webkit-scrollbar { 9 | width: 0; 10 | /* Remove scrollbar space */ 11 | background: transparent; 12 | /* Optional: just make scrollbar invisible */ 13 | } 14 | 15 | body { 16 | height: 100vh; 17 | width: 100%; 18 | } 19 | 20 | /************************************** NAVBAR CUSTOM ************************************************/ 21 | .nav-wrapper { 22 | /* position: relative !important; */ 23 | position: absolute!important; 24 | display: block; 25 | /* overflow: hidden; */ 26 | top: 0; 27 | } 28 | 29 | nav { 30 | /* position: relative !important; */ 31 | position: absolute!important; 32 | top: 0; 33 | } 34 | 35 | nav a { 36 | color: #fff !important; 37 | } 38 | 39 | .menu { 40 | margin-bottom: 0; 41 | } 42 | 43 | main { 44 | padding-top: 3%; 45 | } 46 | 47 | /************************************** TEXT CONTAINER **********************************************/ 48 | .container { 49 | font-family: "Raleway", sans-serif; 50 | padding-top: 3%; 51 | padding-bottom: 3%; 52 | position: absolute; 53 | top: 100px; 54 | left: 30px; 55 | right: 30px; 56 | /* overflow: auto; */ 57 | /* margin-top: 10%; */ 58 | } 59 | 60 | .container .user { 61 | color: #333 !important; 62 | } 63 | 64 | input[type="file"] { 65 | display: none; 66 | } 67 | 68 | .input-group-btn { 69 | display: flex; 70 | justify-content: space-between; 71 | } 72 | 73 | .btn { 74 | background-color: #333; 75 | border: #333; 76 | color: #fff; 77 | margin: 0; 78 | } 79 | 80 | .btn :hover { 81 | /* color: #fff !important; */ 82 | background-color: #ccc !important; 83 | } 84 | 85 | .container hr { 86 | background-color: #333; 87 | margin-bottom: 0px; 88 | } 89 | 90 | .media-body { 91 | margin-left: 10px; 92 | } 93 | 94 | /************************************** PROFILE CARD ***********************************************/ 95 | /*Profile Card 5*/ 96 | .profile-card-5 { 97 | display: flex; 98 | margin-top: 20px; 99 | } 100 | 101 | .profile-card-5 .btn { 102 | border-radius: 2px; 103 | text-transform: uppercase; 104 | font-size: 12px; 105 | padding: 7px 20px; 106 | } 107 | 108 | .btn :hover { 109 | background-color: #330; 110 | color: #eee !important; 111 | } 112 | 113 | .profile-card-5 .card-img-block { 114 | width: 150px; 115 | height: 150px; 116 | margin: 0 auto; 117 | position: relative; 118 | top: -20px; 119 | 120 | } 121 | 122 | .profile-card-5 .card-img-block img { 123 | border-radius: 5px; 124 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.63); 125 | } 126 | 127 | .profile-card-5 h5 { 128 | font-weight: 600; 129 | } 130 | 131 | .profile-card-5 p { 132 | font-size: 14px; 133 | font-weight: 300; 134 | } 135 | 136 | .profile-card-5 a { 137 | color: #eee !important; 138 | } 139 | 140 | /************************************ FRIEND BOXES **************************************************/ 141 | h4 { 142 | padding-top: 10px; 143 | } -------------------------------------------------------------------------------- /CSS/login.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | ::-webkit-scrollbar { 7 | width: 0; 8 | /* Remove scrollbar space */ 9 | background: transparent; 10 | /* Optional: just make scrollbar invisible */ 11 | } 12 | 13 | /* Style for background video */ 14 | #backgroundVideo { 15 | object-fit: cover; 16 | width: 100vw; 17 | height: 100vh; 18 | position: fixed; 19 | top: 0; 20 | left: 0; 21 | } 22 | 23 | #backgroundImage { 24 | display: none; 25 | } 26 | 27 | /* Style for title of the page */ 28 | .Site-Title { 29 | text-align: center; 30 | color: white; 31 | font-family: "Raleway", sans-serif; 32 | font-size: 60px; 33 | font-weight: 500; 34 | /* text-decoration: double; */ 35 | flex: 1; 36 | padding: 30px auto; 37 | padding-top: 50px; 38 | position: absolute; 39 | top: 0; 40 | bottom: 0; 41 | left: 0; 42 | right: 0; 43 | margin: auto; 44 | } 45 | 46 | .Text { 47 | color: white; 48 | text-decoration: none; 49 | } 50 | 51 | /* The div of login form is centered */ 52 | .login-box { 53 | color: white; 54 | width: 340px; 55 | position: absolute; 56 | top: 20%; 57 | bottom: 0; 58 | left: 0; 59 | right: 0; 60 | margin: auto; 61 | } 62 | 63 | .login-box h1 { 64 | float: left; 65 | font-family: 'Montserrat', sans-serif; 66 | font-size: 30px; 67 | font-weight: 200; 68 | border-bottom: 6px solid #e27802; 69 | margin-bottom: 30px; 70 | margin-top: 50px; 71 | margin-right: 10px; 72 | padding-bottom: 10px; 73 | } 74 | 75 | /* Style for textboxes of the form */ 76 | .textbox { 77 | width: 100%; 78 | overflow: hidden; 79 | font-size: 20px; 80 | padding: 8px 0; 81 | margin: 8px 0; 82 | border-bottom: 1px solid #e27802; 83 | } 84 | 85 | .textbox i { 86 | width: 26px; 87 | float: left; 88 | text-align: center; 89 | } 90 | 91 | .textbox input { 92 | border: none; 93 | outline: none; 94 | background: none; 95 | color: white; 96 | font-size: 18px; 97 | width: 250px; 98 | float: left; 99 | margin: 0 10px; 100 | } 101 | 102 | .btn { 103 | background: none; 104 | border: 2px solid #e27802; 105 | color: white; 106 | cursor: pointer; 107 | font-size: 18px; 108 | margin: 12px 0; 109 | padding: 10px; 110 | width: 100%; 111 | } 112 | 113 | .btn:hover { 114 | background-color: white; 115 | color: #e27802; 116 | } 117 | 118 | .forgot-password { 119 | text-align: left; 120 | padding: 10px 0; 121 | margin: 0; 122 | } 123 | 124 | /* Style for redirecting to signup page */ 125 | .Acc { 126 | font-family: 'Montserrat', sans-serif; 127 | font-size: 16px; 128 | padding-top: 10%; 129 | text-align: center; 130 | width: 100%; 131 | } 132 | 133 | .login-box a { 134 | background: none; 135 | color: #e27802; 136 | cursor: pointer; 137 | font-family: 'Montserrat', sans-serif; 138 | font-size: 18px; 139 | margin: 12px 0; 140 | padding: 10px; 141 | } 142 | 143 | /********************* Responsive Styling *************************************/ 144 | 145 | @media (max-width: 480px) { 146 | 147 | .login-box { 148 | width: 90%; 149 | /* background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)); */ 150 | } 151 | 152 | #backgroundVideo { 153 | display: none; 154 | } 155 | 156 | #backgroundImage { 157 | background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)); 158 | object-fit: cover; 159 | width: 100vw; 160 | height: 100vh; 161 | position: fixed; 162 | top: 0; 163 | left: 0; 164 | margin: 0; 165 | padding: 0; 166 | display: inline; 167 | } 168 | 169 | .Site-Title { 170 | width: 90%; 171 | font-size: 35px; 172 | } 173 | 174 | .login-box h1 { 175 | font-size: 20px; 176 | } 177 | 178 | .textbox { 179 | width: 90%; 180 | } 181 | } 182 | -------------------------------------------------------------------------------- /CSS/notification.css: -------------------------------------------------------------------------------- 1 | /* ------------- */ 2 | /* Basic Setting */ 3 | /* ------------- */ 4 | 5 | html, 6 | body { 7 | box-sizing: border-box; 8 | font-family: 'Raleway', sans-serif; 9 | font-weight: 300; 10 | font-style: normal; 11 | font-size: 1em; 12 | line-height: 1.5; 13 | color: #ffffffee; 14 | scroll-behavior: smooth; 15 | } 16 | 17 | *, 18 | *::before, 19 | *::after { 20 | box-sizing: inherit; 21 | } 22 | 23 | .nav-wrapper { 24 | position: relative!important; 25 | } 26 | 27 | .navbar { 28 | position: relative !important; 29 | } 30 | 31 | main { 32 | position: relative; 33 | display: flex; 34 | justify-content: center; 35 | align-items: center; 36 | flex-direction: column; 37 | width: 100%; 38 | height: 100vh; 39 | min-height: 400px; 40 | } 41 | 42 | ::selection { 43 | color: #fff; 44 | background-color: #3ed0ff; 45 | } 46 | 47 | 48 | /* ------------- */ 49 | /* Content Style */ 50 | /* ------------- */ 51 | 52 | section { 53 | display: block; 54 | } 55 | 56 | .notification { 57 | position: relative; 58 | display: flex; 59 | justify-content: space-between; 60 | align-items: center; 61 | width: 90%; 62 | height: 50px; 63 | margin: 10px; 64 | padding: 0 20px; 65 | background-color: #333; 66 | border-radius: 10px; 67 | box-shadow: 0 0 25px #00384a44; 68 | font-weight: 400; 69 | } 70 | 71 | .notification a { 72 | text-decoration: none; 73 | color: #ffffffee; 74 | font-weight: 700; 75 | letter-spacing: .5px; 76 | transition: 300ms; 77 | } 78 | 79 | .notification a:hover { 80 | color: #ffffffaa; 81 | } 82 | 83 | .animation { 84 | animation: FadeIn 4s ease-in-out; 85 | } 86 | 87 | 88 | /* --------- */ 89 | /* Animation */ 90 | /* --------- */ 91 | 92 | @keyframes FadeIn { 93 | 0% { 94 | top: 50px; 95 | opacity: 0; 96 | } 97 | 98 | 25% { 99 | top: -5px; 100 | opacity: .75; 101 | } 102 | 103 | 50% { 104 | top: 5px; 105 | opacity: 1; 106 | } 107 | 108 | 100% { 109 | top: 0px; 110 | } 111 | } -------------------------------------------------------------------------------- /CSS/post.css: -------------------------------------------------------------------------------- 1 | /************************************** ONE POST CARD **********************************************/ 2 | 3 | .scrollable { 4 | overflow-y: scroll!important; 5 | } 6 | 7 | #main-window { 8 | margin: auto; 9 | left: 0; 10 | right: 0; 11 | max-width: 650px; 12 | width: 95%; 13 | padding: 10px 0; 14 | /* background:black; */ 15 | } 16 | 17 | .post { 18 | margin: 10px; 19 | width: 90%; 20 | background: #fff; 21 | border-radius: 4px; 22 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 23 | transition: all 0.2s ease-in-out; 24 | overflow: hidden; 25 | } 26 | 27 | .post:hover { 28 | box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); 29 | } 30 | 31 | .post .user { 32 | padding: 10px; 33 | background: #f9f9f9; 34 | overflow: hidden; 35 | display: flex; 36 | align-items: center; 37 | justify-content: space-between; 38 | } 39 | 40 | .post .user-stuff { 41 | display: flex; 42 | align-items: center; 43 | } 44 | 45 | .post .user .user-stuff .user-img { 46 | margin-right: 10px; 47 | width: 35px; 48 | height: 35px; 49 | float: left; 50 | border-radius: 6px; 51 | background: #444; 52 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 53 | overflow: hidden; 54 | } 55 | 56 | .post .user .user-stuff .user-info { 57 | margin-right: 10px; 58 | /* width:calc(100% - 190px); */ 59 | /* height:35px; */ 60 | line-height: 18px; 61 | float: left; 62 | color: #98d; 63 | } 64 | 65 | .post .user .user-stuff .user-info .post-date { 66 | font-size: 13px; 67 | color: #444; 68 | } 69 | 70 | .post .user .actions { 71 | display: flex; 72 | } 73 | 74 | .post .user .actions span { 75 | margin-right: 10px; 76 | width: 20px; 77 | height: 20px; 78 | float: left; 79 | display: block; 80 | cursor: pointer; 81 | overflow: hidden; 82 | background-size: 80%; 83 | background-position: 50% 50%; 84 | background-repeat: no-repeat; 85 | opacity: 0.2; 86 | transition: 0.25s opacity ease-in-out; 87 | } 88 | 89 | .post .user .actions span:hover { 90 | opacity: 1; 91 | } 92 | 93 | .post .user .actions span:last-child { 94 | margin-right: 0; 95 | } 96 | 97 | .post .user .actions span.heart { 98 | background-image: 99 | url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACAUlEQVRYR82XjU0DMQxGv04ATAAbQCeATkA7ATABsAEbABMAEwATABNAJ6BsUCYAvZNducf9JHcnlUioIrHzvdiOoxtpw2O0YX3VAZxIOrK/PYP8kPQq6dl+q9jxOTa/AzNYmP2T+a75lQFwupPkznUBYrMzSUsz2Da/aUtEOcClJA5TjAhwKulaEpv5+A7GQG2FNU42s/8fJXmkmGryAxo/YFYAbP4SxN8kXVWEGkjmd004RoCpL1u/L0WC1OB3GPwmHM4jgDhGjAdJCNUNIgT9fslgbns4VJU/YNQXgz0mACBG3hmc3EEaGIo0RYgUcd8PP4/EDIBIRViK3CQMIG7M7iIUZJsrByTiRbQB+LQConBiAbZt1GedNFHQCwB+MsPfR/hPGv4FAE2BiiYsO0McL2EPj/qcCFBI5+ZEdyvf4YT9skzirbsFIFYl3W2cUdFZylbk76Frjr0R0dt5RBikhOvY1FByhbHnhnH9/J3hUZs6AIsIe4sdGqIsTssGZBkfIyZoQv7gDAVRFqffkPbiRax6joeEaBSvAmBuqEi0itcBDAGRJN4E0AciWbwNoAtElngKQA5EtngqQApEJ/EcgCYI1mKHW7vnbS0z98Ok6oo6HL9Z4rkR8MOUIXw+W7wrQFU6Oon3AXAIXlEGX0Srr522vMf13BrI2TvJduMAv9o2lX4LR6fmAAAAAElFTkSuQmCC'); 100 | } 101 | 102 | .post .user .actions span.comment { 103 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABIElEQVRYR+2X0bEBQRBFjwgQARkgAkKQASJQIkAGRIAMhEAGRPCeDGRAXTVTtTW1ip4dy8f2z+58TN9z7/ZHb40vVw1oAHNg7N7LQLoCW2AmgBUwLUM1R2MtANHUgSMwdOdP8ijxPdAH/gVwc2rNEsS9sTbwp0MWQO9l1sN4BfDTCZyATqKhUK9e0OvlDKQEOANdK0Ai80/bvEygAvi5BCxDmTf1oSHzDFgA8qa+MEDqT2JOoAKoEvh4Al9byfxSegAmWhRTWw36aR/cAAPgooVk4f4LLLoC1V6fLf1XqLGlln4RFYQatAy3sxBW8YszsIjZhOV85EAFofLOd87I2z5iANQ8C+HFzOK6GAsQQkSJFwXwEHpqBqKqSAJRguGlOwYCUNzXkk7/AAAAAElFTkSuQmCC'); 104 | } 105 | 106 | .post .user .actions span.share { 107 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAB6ElEQVRYR82XgTEEQRBF/0WACBABGSADIkAEiIAMEAEi4CJABkTgZEAG6l1Nq941s9d7s1unq1Sp2pnu37+7//RNNJ6dSDqTtJtCPEm6lfTiQ05GiL8u6VHSfsH3vaRT+zYGgJuUeVduR5JgREMD2JL0EWB1Jml7DADU/S4AgCMAmA3NwJWkyyCAAxpySADQT/NZ1y/CsSHpawgAdD3jRvZRe7UpqQVwKOlaEtlH7TsFf6tpQgLSbKVZn6Zvay1UBAf0rxiVGIDWnXT5nVql/xfRzdnzFICzTIWxQ8bMvvmau2wD4BKUctEbF/mjzjm6yYxviFAv8wAI/tyjiy3QQ8q6kVkUhQcQkVDv19MdjffnnAdABu2myTlemu6cMwNAN0N/xC6WqXXJ8b8BAMBoCThHx7NcVFtNEzLXlKOx4fRF1B5DnJkARX2x4QCkegwJiBYwjset6EirCdFmBtnSZemSYntWodpLMVJbevN9WUiGRLwUk0inFEdpxynU7xUuwBajDQhvBGcfXPgYRYHwslGyXFlKPgDBNlT1HHvnZNlVlhwQGADEoFsxZYH66BQNtpL5DFe6lAJk5Wt59IfJp41n7VKaa7DIXjHaTzNTU5qxpBE8YkzN3MZgwHzTDwSyqUAFYafxeP0AlftgIScjdPAAAAAASUVORK5CYII='); 108 | } 109 | 110 | .post .user .actions a i { 111 | font-size: 20px; 112 | } 113 | 114 | #del-this { 115 | width: 35px; 116 | height: 35px; 117 | opacity: 0.9 !important; 118 | color: #eee; 119 | } 120 | 121 | .post .content { 122 | padding: 20px; 123 | font-size: 16px; 124 | line-height: 22px; 125 | font-family: 'Helvetica Neue'; 126 | overflow: hidden; 127 | } 128 | 129 | .post .media { 130 | margin: 0 20px 20px; 131 | } 132 | 133 | .post .media img { 134 | border-radius: 4px; 135 | width: 100%; 136 | } 137 | 138 | .post .media iframe { 139 | border-radius: 4px; 140 | } 141 | 142 | .post .content img { 143 | width: 100%; 144 | /* height: px; */ 145 | display: block; 146 | margin-bottom: 2%; 147 | } 148 | 149 | @media only screen and (max-width: 720px) { 150 | .profile-card-5 { 151 | display: none; 152 | } 153 | 154 | .panel-body { 155 | display: none; 156 | } 157 | 158 | .col-md-6 { 159 | top: 50px; 160 | left: 0; 161 | width: 80%; 162 | } 163 | 164 | .post .user { 165 | flex-direction: column; 166 | } 167 | 168 | .post .user .actions { 169 | margin-top: 15px; 170 | justify-content: space-between; 171 | } 172 | 173 | .post .user .actions span { 174 | margin-right: 25px; 175 | justify-content: space-between; 176 | } 177 | } 178 | 179 | /************************************** COMMENTS SECTION ***********************************************/ 180 | .card__footer { 181 | display: flex; 182 | color: #666; 183 | margin-left: 10px; 184 | font-size: 16px !important; 185 | } 186 | 187 | .card__footer__like { 188 | font-size: 16px !important; 189 | } 190 | 191 | .card__footer__comment { 192 | margin-left: 1em; 193 | font-size: 16px !important; 194 | } 195 | 196 | form button { 197 | margin: 5px 0px; 198 | } 199 | 200 | textarea { 201 | display: block; 202 | margin-bottom: 10px; 203 | } 204 | 205 | .clearfix { 206 | margin-bottom: 5px; 207 | } 208 | 209 | /*post*/ 210 | .post { 211 | border: 1px solid #ccc; 212 | margin-top: 10px; 213 | } 214 | 215 | /*comments*/ 216 | .comments-section { 217 | margin-top: 10px; 218 | border: 1px solid #ccc; 219 | border-radius: 4px; 220 | margin: 10px; 221 | padding: 10px; 222 | } 223 | 224 | .comment { 225 | margin-bottom: 10px; 226 | } 227 | 228 | .comment .comment-name { 229 | font-weight: bold; 230 | } 231 | 232 | .comment .comment-date { 233 | font-style: italic; 234 | font-size: 0.8em; 235 | } 236 | 237 | .comment .reply-btn, 238 | .edit-btn { 239 | font-size: 0.8em; 240 | } 241 | 242 | .comment-details { 243 | width: 91.5%; 244 | float: left; 245 | } 246 | 247 | .comment-details p { 248 | margin-bottom: 0px; 249 | } 250 | 251 | .comment .profile_pic { 252 | width: 35px; 253 | height: 35px; 254 | margin-right: 5px; 255 | float: left; 256 | border-radius: 50%; 257 | } 258 | 259 | /*replies*/ 260 | .reply { 261 | margin-left: 30px; 262 | } 263 | 264 | .reply_form { 265 | margin-left: 40px; 266 | display: none; 267 | } 268 | 269 | #comment_form { 270 | margin-top: 10px; 271 | } -------------------------------------------------------------------------------- /CSS/profile.css: -------------------------------------------------------------------------------- 1 | /* styles */ 2 | 3 | * { 4 | font-family: 'Raleway', sans-serif; 5 | } 6 | 7 | .scrollable a { 8 | color: #333 !important; 9 | } 10 | 11 | body { 12 | font-family: 'Raleway'; 13 | } 14 | 15 | /* .container { 16 | height: 100vh; 17 | width: 100%; 18 | overflow: hidden; 19 | } */ 20 | 21 | .nav-wrapper { 22 | position: relative !important; 23 | } 24 | 25 | nav { 26 | position: relative !important; 27 | } 28 | 29 | nav a { 30 | color: #fff !important; 31 | } 32 | 33 | .menu { 34 | margin-bottom: 0; 35 | } 36 | 37 | main { 38 | padding-top: 3%; 39 | } 40 | 41 | .btn { 42 | background-color: #333; 43 | border: #333; 44 | } 45 | 46 | main hr { 47 | background-color: #333; 48 | } 49 | 50 | .media-body { 51 | margin-left: 10px; 52 | } 53 | 54 | /************************************** TEXT CONTAINER **********************************************/ 55 | .container { 56 | font-family: "Raleway", sans-serif; 57 | padding-top: 3%; 58 | padding-bottom: 3%; 59 | /* overflow: auto; */ 60 | /* margin-top: 10%; */ 61 | } 62 | 63 | .container .user { 64 | color: #333 !important; 65 | } 66 | 67 | input[type="file"] { 68 | display: none; 69 | } 70 | 71 | .input-group-btn { 72 | display: flex; 73 | justify-content: space-between; 74 | } 75 | 76 | .btn { 77 | background-color: #333; 78 | border: #333; 79 | color: #fff; 80 | margin: 0; 81 | } 82 | 83 | .btn :hover { 84 | /* color: #fff !important; */ 85 | background-color: #ccc !important; 86 | } 87 | 88 | .container hr { 89 | background-color: #333; 90 | margin-bottom: 0px; 91 | } 92 | 93 | .media-body { 94 | margin-left: 10px; 95 | } 96 | 97 | 98 | /************************************* TIMELINE ***********************************************/ 99 | 100 | 101 | 102 | /*************************************************** FRIENDS ************************************************/ 103 | 104 | /************************************* ACCEPT/DECLINE FRIEND REQUESTS ******************************/ 105 | @import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700'); 106 | 107 | .panel-body { 108 | display: flex; 109 | flex-direction: column; 110 | box-sizing: border-box; 111 | margin-top: 10%; 112 | margin-bottom: 5%; 113 | } 114 | 115 | .friend-list { 116 | font-family: 'Montserrat', sans-serif; 117 | } 118 | 119 | .friend-requests { 120 | font-family: 'Montserrat', sans-serif; 121 | text-align: center; 122 | } 123 | 124 | .friend-box { 125 | position: relative; 126 | /* background-color: #eee; */ 127 | border-radius: 5px; 128 | box-shadow: 0 0 1px rgba(0, 0, 0, 0.63); 129 | border-radius: 10px; 130 | padding: 20px; 131 | } 132 | 133 | .friend-profile { 134 | float: left; 135 | border-radius: 5px; 136 | height: 70px; 137 | width: 70px; 138 | background-size: cover; 139 | background-position: center; 140 | box-shadow: 0px 0px 15px #aaa; 141 | margin-right: 3%; 142 | } 143 | 144 | .name-box { 145 | text-align: left; 146 | color: #4F7091; 147 | font-size: 18px; 148 | } 149 | 150 | .user-name-box { 151 | text-align: left; 152 | font-size: 12px; 153 | line-height: 16px; 154 | } 155 | 156 | .request-btn-row { 157 | bottom: 10px; 158 | text-align: center; 159 | display: flex; 160 | justify-content: space-between; 161 | } 162 | 163 | .friend-request { 164 | margin-top: 10px; 165 | border-radius: 5px; 166 | border: 2px solid transparent; 167 | padding: 5px; 168 | cursor: pointer; 169 | } 170 | 171 | .decline-request { 172 | display: flex; 173 | background-color: #FF6666; 174 | text-align: center; 175 | color: #fff; 176 | } 177 | 178 | .decline-request:hover { 179 | background-color: #993333; 180 | } 181 | 182 | .accept-request { 183 | display: flex; 184 | text-align: center; 185 | background-color: #41c764; 186 | color: #fff; 187 | } 188 | 189 | .accept-request:hover { 190 | background-color: #419764; 191 | } 192 | 193 | .fr-request-pending { 194 | position: relative; 195 | top: -10px; 196 | color: #17406f; 197 | font-weight: bold; 198 | } 199 | 200 | .request-btn-row.disappear { 201 | display: none; 202 | } -------------------------------------------------------------------------------- /CSS/search.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | font-family: 'Raleway', Helvetica, sans-serif; 5 | font-size: 12px; 6 | } 7 | 8 | ::-webkit-scrollbar { 9 | width: 0; 10 | /* Remove scrollbar space */ 11 | background: transparent; 12 | /* Optional: just make scrollbar invisible */ 13 | } 14 | 15 | body { 16 | height: 100vh; 17 | width: 100%; 18 | } 19 | 20 | /************************************** NAVBAR CUSTOM ************************************************/ 21 | .nav-wrapper { 22 | /* position: relative !important; */ 23 | position: relative !important; 24 | display: block; 25 | /* overflow: hidden; */ 26 | top: 0; 27 | } 28 | 29 | nav { 30 | position: relative !important; 31 | /* position: absolute !important; */ 32 | /* top: 0; */ 33 | } 34 | 35 | nav a { 36 | color: #fff !important; 37 | } 38 | 39 | .menu { 40 | margin-bottom: 0; 41 | } 42 | 43 | main { 44 | padding-top: 3%; 45 | display: flex !important; 46 | justify-content: center; 47 | align-items: center; 48 | padding: 20px; 49 | flex-direction: row; 50 | flex-wrap: wrap; 51 | } 52 | 53 | .btn { 54 | background-color: #333; 55 | border: #333; 56 | color: #fff; 57 | margin: 0; 58 | } 59 | 60 | .btn :hover { 61 | /* color: #fff !important; */ 62 | background-color: #ccc !important; 63 | } 64 | 65 | .container hr { 66 | background-color: #333; 67 | margin-bottom: 0px; 68 | } 69 | 70 | .media-body { 71 | margin-left: 10px; 72 | } 73 | 74 | /************************************** PROFILE CARD ***********************************************/ 75 | /*Profile Card 5*/ 76 | .profile-card-5 { 77 | display: flex !important; 78 | margin-top: 20px; 79 | width: 300px; 80 | margin: 15px 20px; 81 | } 82 | 83 | .profile-card-5 .btn { 84 | border-radius: 2px; 85 | text-transform: uppercase; 86 | font-size: 12px; 87 | padding: 7px 20px; 88 | } 89 | 90 | .btn :hover { 91 | background-color: #330; 92 | color: #eee !important; 93 | } 94 | 95 | .profile-card-5 .card-img-block { 96 | width: 150px; 97 | height: 150px; 98 | margin: 0 auto; 99 | position: relative; 100 | top: -20px; 101 | 102 | } 103 | 104 | .profile-card-5 .card-img-block img { 105 | border-radius: 5px; 106 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.63); 107 | } 108 | 109 | .profile-card-5 h5 { 110 | font-weight: 600; 111 | } 112 | 113 | .profile-card-5 p { 114 | font-size: 14px; 115 | font-weight: 300; 116 | } 117 | 118 | .profile-card-5 a { 119 | color: #eee !important; 120 | } -------------------------------------------------------------------------------- /CSS/signup.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | ::-webkit-scrollbar { 7 | width: 0; 8 | /* Remove scrollbar space */ 9 | background: transparent; 10 | /* Optional: just make scrollbar invisible */ 11 | } 12 | 13 | /* Style for background video */ 14 | #backgroundVideo { 15 | object-fit: cover; 16 | width: 100vw; 17 | height: 100vh; 18 | position: fixed; 19 | top: 0; 20 | left: 0; 21 | } 22 | 23 | #backgroundImage { 24 | display: none; 25 | } 26 | 27 | /* Style for title of the page */ 28 | .Site-Title { 29 | text-align: center; 30 | color: white; 31 | font-family: "Raleway", sans-serif; 32 | font-size: 60px; 33 | font-weight: 500; 34 | /* text-decoration: double; */ 35 | flex: 1; 36 | padding: 30px auto; 37 | padding-top: 50px; 38 | position: absolute; 39 | top: 0; 40 | bottom: 0; 41 | left: 0; 42 | right: 0; 43 | margin: auto; 44 | } 45 | 46 | .Text { 47 | color: white; 48 | text-decoration: none; 49 | } 50 | 51 | /* The div of login form is centered */ 52 | .login-box { 53 | color: white; 54 | width: 340px; 55 | position: absolute; 56 | top: 20%; 57 | bottom: 0; 58 | left: 0; 59 | right: 0; 60 | margin: auto; 61 | } 62 | 63 | .login-box h1 { 64 | float: left; 65 | font-family: 'Montserrat', sans-serif; 66 | font-size: 30px; 67 | font-weight: 200; 68 | border-bottom: 6px solid #e27802; 69 | margin-bottom: 30px; 70 | margin-top: 50px; 71 | margin-right: 10px; 72 | padding-bottom: 10px; 73 | } 74 | 75 | /* Style for textboxes of the form */ 76 | .textbox { 77 | width: 100%; 78 | overflow: hidden; 79 | font-size: 20px; 80 | padding: 8px 0; 81 | margin: 8px 0; 82 | border-bottom: 1px solid #e27802; 83 | } 84 | 85 | .textbox i { 86 | width: 26px; 87 | float: left; 88 | text-align: center; 89 | } 90 | 91 | .textbox input { 92 | border: none; 93 | outline: none; 94 | background: none; 95 | color: white; 96 | font-size: 18px; 97 | width: 250px; 98 | float: left; 99 | margin: 0 10px; 100 | } 101 | 102 | /************** Terms and Conditions iframe ****************/ 103 | #t-and-c { 104 | border: none; 105 | outline: none; 106 | margin: 10px 0; 107 | } 108 | 109 | .btn { 110 | background: none; 111 | border: 2px solid #e27802; 112 | color: white; 113 | cursor: pointer; 114 | font-size: 18px; 115 | margin: 12px 0; 116 | padding: 10px; 117 | width: 100%; 118 | } 119 | 120 | .btn:hover { 121 | background-color: white; 122 | color: #e27802; 123 | } 124 | 125 | /* Style for redirecting to signup page */ 126 | 127 | hr { 128 | color: #e27802; 129 | background-color: #e27802; 130 | } 131 | 132 | .Acc { 133 | font-family: 'Montserrat', sans-serif; 134 | font-size: 16px; 135 | padding-top: 8%; 136 | text-align: center; 137 | width: 100%; 138 | } 139 | 140 | .login-box a { 141 | background: none; 142 | color: #e27802; 143 | cursor: pointer; 144 | font-family: 'Montserrat', sans-serif; 145 | font-size: 16px; 146 | margin: 10px 0; 147 | padding: 5px; 148 | } 149 | 150 | /********************* Responsive Styling *************************************/ 151 | 152 | @media (max-width: 480px) { 153 | .login-box { 154 | width: 90%; 155 | } 156 | 157 | #backgroundVideo { 158 | display: none; 159 | } 160 | 161 | #backgroundImage { 162 | /* background-image: url("../Images/Mobile-Background/pexels-alex-azabache-3214958.jpg"); 163 | background-position: center; 164 | background-repeat: no-repeat; 165 | background-size: cover; */ 166 | object-fit: cover; 167 | width: 100vw; 168 | height: 100vh; 169 | position: fixed; 170 | top: 0; 171 | left: 0; 172 | margin: 0; 173 | padding: 0; 174 | display: inline; 175 | } 176 | 177 | .Site-Title { 178 | width: 90%; 179 | font-size: 35px; 180 | } 181 | 182 | .login-box h1 { 183 | font-size: 20px; 184 | } 185 | 186 | .textbox { 187 | width: 90%; 188 | } 189 | } 190 | -------------------------------------------------------------------------------- /CSS/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | overflow-y: scroll; 4 | /* overflow: hidden; */ 5 | padding: 0; 6 | } 7 | 8 | ::-webkit-scrollbar { 9 | width: 0; 10 | /* Remove scrollbar space */ 11 | background: transparent; 12 | /* Optional: just make scrollbar invisible */ 13 | } 14 | 15 | /*****************************************Header Styles *************************************************/ 16 | 17 | ul, 18 | nav { 19 | list-style: none; 20 | } 21 | 22 | a{ 23 | text-decoration: none; 24 | opacity: 0.75; 25 | color: #fff; 26 | } 27 | 28 | a:hover{ 29 | opacity: 1; 30 | } 31 | 32 | .grid { 33 | width: 100%; 34 | display: flex; 35 | flex-wrap: wrap; 36 | justify-content: center; 37 | } 38 | 39 | hr { 40 | width: 250px; 41 | height: 3px; 42 | background-color: #3f51b5; 43 | border: 0; 44 | margin-bottom: 50px; 45 | } 46 | 47 | a.btn { 48 | border-radius: 4px; 49 | text-transform: uppercase; 50 | font-weight: bold; 51 | text-align: center; 52 | background-color: #3f51b5; 53 | opacity: 1; 54 | } 55 | 56 | header { 57 | width: 95%; 58 | color: #fff; 59 | display: flex; 60 | justify-content: space-between; 61 | font-family: "Raleway", sans-serif; 62 | font-weight: 500; 63 | align-items: center; 64 | animation: 1s fadein 0.5s forwards; 65 | opacity: 0; 66 | padding: 20px auto; 67 | } 68 | 69 | @keyframes fadein { 70 | 100% { 71 | opacity: 1; 72 | } 73 | } 74 | 75 | header h2 { 76 | margin-left: 5%; 77 | } 78 | 79 | header nav { 80 | display: flex; 81 | } 82 | 83 | header nav li{ 84 | padding: 0 15px; 85 | } 86 | 87 | @media (max-width: 800px) { 88 | 89 | #content { 90 | flex-direction: column; 91 | } 92 | header { 93 | /* padding: 20px 50px; */ 94 | flex-direction: column; 95 | } 96 | header h2 { 97 | margin-bottom: 12px; 98 | } 99 | } 100 | 101 | /******************************************* BODY CONTENT ***********************************/ 102 | #content { 103 | height: 100vh; 104 | width: 100%; 105 | } 106 | 107 | /********************************************* MOBILE BACKGROUND IMAGE ANIMATION ************************************/ 108 | @media (max-width: 1025px) { 109 | #content { 110 | display: flex; 111 | flex-direction: column; 112 | animation-name: animate-mobile; 113 | animation-direction: alternate-reverse; 114 | animation-duration: 60s; 115 | animation-fill-mode: forwards; 116 | animation-iteration-count: infinite; 117 | animation-play-state: running; 118 | animation-timing-function: ease-in; 119 | background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../Images/Mobile-Background/pexels-alex-azabache-3214958.jpg'); 120 | background-size: cover; 121 | background-position: center; 122 | background-repeat: no-repeat; 123 | } 124 | 125 | /* Mobile display styles */ 126 | .Site-Title { 127 | font-size: 40px !important; 128 | padding-top: 30px !important; 129 | } 130 | 131 | .Tagline { 132 | width: 100% !important; 133 | } 134 | 135 | .Tagline h1 { 136 | font-size: 20px !important 137 | } 138 | 139 | .Tagline h3 { 140 | font-size: 15px !important; 141 | margin-bottom: 8% !important; 142 | } 143 | 144 | .button { 145 | font-size: 16px !important; 146 | /* margin-right: 30px !important; */ 147 | } 148 | 149 | .button-flex { 150 | display: flex; 151 | justify-content: space-between; 152 | } 153 | } 154 | 155 | /********************************************* CONTENT STYLING ************************************/ 156 | .Site-Title { 157 | text-align: center; 158 | color: lightgray; 159 | font-family: "Raleway", sans-serif; 160 | font-size: 60px; 161 | font-weight: 500; 162 | flex: 1; 163 | padding: 30px auto; 164 | padding-top: 50px; 165 | } 166 | 167 | .Tagline { 168 | color: white; 169 | margin: 30px; 170 | display: flex; 171 | flex-direction: column; 172 | width: 60%; 173 | margin: auto; 174 | text-align: center; 175 | } 176 | 177 | .Tagline h1 { 178 | font-family: 'Merriweather Sans', sans-serif; 179 | font-size: 40px; 180 | margin-bottom: 5px; 181 | display: inline-block; 182 | } 183 | 184 | .Tagline h3 { 185 | font-family: 'Montserrat', sans-serif; 186 | font-size: 20px; 187 | margin-top: 5px; 188 | margin-bottom: 10%; 189 | display: inline-block; 190 | } 191 | 192 | .button { 193 | color: white; 194 | background-color: #292c2f; 195 | text-decoration: none; 196 | font-family: 'Montserrat', sans-serif; 197 | font-size: 20px; 198 | padding: 10px 15px; 199 | } 200 | 201 | .button:hover { 202 | color: black; 203 | background-color: white; 204 | } 205 | 206 | .buttons-flex { 207 | width: 100%; 208 | display: flex; 209 | justify-content: space-around; 210 | } 211 | 212 | /******************************************* FOOTER STYLING ***********************************/ 213 | footer { 214 | position: relative; 215 | text-align: center; 216 | } 217 | 218 | .footer-distributed { 219 | background-color: #292c2f; 220 | box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12); 221 | box-sizing: border-box; 222 | width: 100%; 223 | font-family: 'Montserrat', sans-serif; 224 | font: bold 16px; 225 | } 226 | 227 | .footer-distributed { 228 | display: inline-block; 229 | vertical-align: top; 230 | } 231 | 232 | .footer-distributed .footer-links { 233 | color: #ffffff; 234 | padding: 0; 235 | } 236 | 237 | .footer-distributed .footer-links a { 238 | display: inline-block; 239 | line-height: 1.8; 240 | text-decoration: none; 241 | color: inherit; 242 | margin: 10px; 243 | padding: 5px; 244 | } 245 | 246 | .footer-links a:hover { 247 | background-color: black; 248 | text-decoration: underline; 249 | } 250 | 251 | .footer-distributed .footer-company-name { 252 | color: #8f9296; 253 | font-size: 14px; 254 | font-weight: normal; 255 | /* margin: 0; */ 256 | } 257 | 258 | .footer-distributed .footer-icons { 259 | margin-top: 15px; 260 | margin-bottom: 25px; 261 | } 262 | 263 | .footer-distributed .footer-icons a { 264 | display: inline-block; 265 | width: 35px; 266 | height: 35px; 267 | cursor: pointer; 268 | background-color: #33383b; 269 | border-radius: 2px; 270 | font-size: 20px; 271 | color: #ffffff; 272 | text-align: center; 273 | line-height: 35px; 274 | margin-right: 3px; 275 | margin-bottom: 5px; 276 | } 277 | 278 | .footer-icons a:hover { 279 | background-color: black; 280 | } 281 | 282 | @media (max-width: 880px) { 283 | .footer-distributed { 284 | font: bold 14px sans-serif; 285 | } 286 | 287 | .main { 288 | line-height: normal; 289 | font-size: auto; 290 | } 291 | } 292 | -------------------------------------------------------------------------------- /Images/Background/img1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sn2606/TravelLog/502b00e5da1dc01c0b300f8bb07dd3b3939c32c4/Images/Background/img1.jpg -------------------------------------------------------------------------------- /Images/Background/img3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sn2606/TravelLog/502b00e5da1dc01c0b300f8bb07dd3b3939c32c4/Images/Background/img3.jpg -------------------------------------------------------------------------------- /Images/Background/img5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sn2606/TravelLog/502b00e5da1dc01c0b300f8bb07dd3b3939c32c4/Images/Background/img5.jpg -------------------------------------------------------------------------------- /Images/Background/pexels-dominika-roseclay-1252500.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sn2606/TravelLog/502b00e5da1dc01c0b300f8bb07dd3b3939c32c4/Images/Background/pexels-dominika-roseclay-1252500.jpg -------------------------------------------------------------------------------- /Images/Background/pexels-ketut-subiyanto-4436363.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sn2606/TravelLog/502b00e5da1dc01c0b300f8bb07dd3b3939c32c4/Images/Background/pexels-ketut-subiyanto-4436363.jpg -------------------------------------------------------------------------------- /Images/Background/pexels-mohamed-almari-368893.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sn2606/TravelLog/502b00e5da1dc01c0b300f8bb07dd3b3939c32c4/Images/Background/pexels-mohamed-almari-368893.jpg -------------------------------------------------------------------------------- /Images/Background/pexels-nappy-1058959.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sn2606/TravelLog/502b00e5da1dc01c0b300f8bb07dd3b3939c32c4/Images/Background/pexels-nappy-1058959.jpg -------------------------------------------------------------------------------- /Images/Landing-Page-SS.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sn2606/TravelLog/502b00e5da1dc01c0b300f8bb07dd3b3939c32c4/Images/Landing-Page-SS.png -------------------------------------------------------------------------------- /Images/Landing-Page-Screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sn2606/TravelLog/502b00e5da1dc01c0b300f8bb07dd3b3939c32c4/Images/Landing-Page-Screenshot.png -------------------------------------------------------------------------------- /Images/Mobile-Background/pexels-alex-azabache-3214958.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sn2606/TravelLog/502b00e5da1dc01c0b300f8bb07dd3b3939c32c4/Images/Mobile-Background/pexels-alex-azabache-3214958.jpg -------------------------------------------------------------------------------- /Images/Mobile-Background/pexels-ketut-subiyanto-4429452.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sn2606/TravelLog/502b00e5da1dc01c0b300f8bb07dd3b3939c32c4/Images/Mobile-Background/pexels-ketut-subiyanto-4429452.jpg -------------------------------------------------------------------------------- /Images/Mobile-Background/pexels-simon-migaj-885880.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sn2606/TravelLog/502b00e5da1dc01c0b300f8bb07dd3b3939c32c4/Images/Mobile-Background/pexels-simon-migaj-885880.jpg -------------------------------------------------------------------------------- /Images/Mobile-Background/pexels-taryn-elliott-3889855.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sn2606/TravelLog/502b00e5da1dc01c0b300f8bb07dd3b3939c32c4/Images/Mobile-Background/pexels-taryn-elliott-3889855.jpg -------------------------------------------------------------------------------- /Images/about-us-rec.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sn2606/TravelLog/502b00e5da1dc01c0b300f8bb07dd3b3939c32c4/Images/about-us-rec.gif -------------------------------------------------------------------------------- /Images/alps_favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sn2606/TravelLog/502b00e5da1dc01c0b300f8bb07dd3b3939c32c4/Images/alps_favicon.png -------------------------------------------------------------------------------- /Images/mountain.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sn2606/TravelLog/502b00e5da1dc01c0b300f8bb07dd3b3939c32c4/Images/mountain.png -------------------------------------------------------------------------------- /Images/search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sn2606/TravelLog/502b00e5da1dc01c0b300f8bb07dd3b3939c32c4/Images/search.png -------------------------------------------------------------------------------- /Images/traveller.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sn2606/TravelLog/502b00e5da1dc01c0b300f8bb07dd3b3939c32c4/Images/traveller.png -------------------------------------------------------------------------------- /JS/about-us-toggle.js: -------------------------------------------------------------------------------- 1 | function menuToggle() { 2 | var nav = document.getElementById('menu-overlay'); 3 | nav.classList.toggle('active'); 4 | var nav1 = document.getElementById('toggle'); 5 | nav1.classList.toggle('active'); 6 | }; 7 | 8 | const toTop = document.querySelector(".toTop"); 9 | window.addEventListener("scroll", () => { 10 | if (window.pageYOffset > 300) { 11 | toTop.classList.add("active"); 12 | } else { 13 | toTop.classList.remove("active"); 14 | } 15 | }) 16 | -------------------------------------------------------------------------------- /JS/change-bg.js: -------------------------------------------------------------------------------- 1 | // onload document window using js 2 | window.onload = function(){ 3 | // pick body element ID 4 | var image = document.getElementById("content"); 5 | 6 | var x = window.matchMedia("(max-width: 1025px)"); 7 | if(x.matches){ 8 | // Background Images 9 | var images = [ 10 | 'url(../Images/Mobile-Background/pexels-taryn-elliott-3889855.jpg)', 11 | 'url(../Images/Mobile-Background/pexels-alex-azabache-3214958.jpg)', 12 | 'url(../Images/Mobile-Background/pexels-ketut-subiyanto-4429452.jpg)', 13 | 'url(../Images/Mobile-Background/pexels-simon-migaj-885880.jpg)', 14 | ] 15 | 16 | // change image every after 5 seconds 17 | var i = 0; 18 | i = Math.floor(images.length * Math.random()); 19 | image.style.backgroundImage = 'linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), ' + images[i]; 20 | image.style.backgroundSize = "cover"; 21 | image.style.backgroundRepeat = "no-repeat"; 22 | image.style.backgroundPosition = "center"; 23 | 24 | } else { 25 | 26 | // Background Images 27 | var images = [ 28 | 'url(../Images/Background/img1.jpg)', 29 | 'url(../Images/Background/img3.jpg)', 30 | 'url(../Images/Background/img5.jpg)', 31 | 'url(../Images/Background/pexels-dominika-roseclay-1252500.jpg)', 32 | 'url(../Images/Background/pexels-ketut-subiyanto-4436363.jpg)', 33 | 'url(../Images/Background/pexels-nappy-1058959.jpg)', 34 | 'url(../Images/Background/pexels-mohamed-almari-368893.jpg)', 35 | ] 36 | 37 | // change image every after 5 seconds 38 | var i = 0; 39 | i = Math.floor(images.length * Math.random()); 40 | console.log(i); 41 | image.style.backgroundImage = 'linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), ' + images[i]; 42 | image.style.backgroundSize = "cover"; 43 | image.style.backgroundRepeat = "no-repeat"; 44 | image.style.backgroundPosition = "center"; 45 | } 46 | } -------------------------------------------------------------------------------- /JS/homepage.js: -------------------------------------------------------------------------------- 1 | document.getElementById("get-photo").onchange = function() { 2 | var img = document.getElementById("get-photo"); 3 | var txt = document.getElementById("size-chk"); 4 | var imgSize = img.files[0].size; 5 | var imgName = img.files[0].name; 6 | console.log(imgSize + " " + imgName); 7 | if(imgSize >= 16777216) { 8 | txt.innerHTML = "File size should be less than 16MiB"; 9 | txt.style.color = "red"; 10 | document.getElementById("create-post").reset(); 11 | }else{ 12 | txt.innerHTML = imgName; 13 | txt.style.color = "#334"; 14 | } 15 | } 16 | 17 | hearts = ['url("data:image/png;base64,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")', 18 | 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACAUlEQVRYR82XjU0DMQxGv04ATAAbQCeATkA7ATABsAEbABMAEwATABNAJ6BsUCYAvZNducf9JHcnlUioIrHzvdiOoxtpw2O0YX3VAZxIOrK/PYP8kPQq6dl+q9jxOTa/AzNYmP2T+a75lQFwupPkznUBYrMzSUsz2Da/aUtEOcClJA5TjAhwKulaEpv5+A7GQG2FNU42s/8fJXmkmGryAxo/YFYAbP4SxN8kXVWEGkjmd004RoCpL1u/L0WC1OB3GPwmHM4jgDhGjAdJCNUNIgT9fslgbns4VJU/YNQXgz0mACBG3hmc3EEaGIo0RYgUcd8PP4/EDIBIRViK3CQMIG7M7iIUZJsrByTiRbQB+LQConBiAbZt1GedNFHQCwB+MsPfR/hPGv4FAE2BiiYsO0McL2EPj/qcCFBI5+ZEdyvf4YT9skzirbsFIFYl3W2cUdFZylbk76Frjr0R0dt5RBikhOvY1FByhbHnhnH9/J3hUZs6AIsIe4sdGqIsTssGZBkfIyZoQv7gDAVRFqffkPbiRax6joeEaBSvAmBuqEi0itcBDAGRJN4E0AciWbwNoAtElngKQA5EtngqQApEJ/EcgCYI1mKHW7vnbS0z98Ok6oo6HL9Z4rkR8MOUIXw+W7wrQFU6Oon3AXAIXlEGX0Srr522vMf13BrI2TvJduMAv9o2lX4LR6fmAAAAAElFTkSuQmCC")' 19 | ] 20 | 21 | var i = 0; 22 | document.getElementsByClassName("heart").onclick = function() { 23 | i = (i == 0) ? 1 : 0; 24 | document.getElementsByClassName("heart").style.backgroundImage = hearts[i]; 25 | } 26 | 27 | -------------------------------------------------------------------------------- /JS/script.js: -------------------------------------------------------------------------------- 1 | document.querySelector('.img-btn').addEventListener('click', function() 2 | { 3 | document.querySelector('.cont').classList.toggle('s-signup') 4 | } 5 | ); 6 | -------------------------------------------------------------------------------- /JS/scroll-homepage.js: -------------------------------------------------------------------------------- 1 | // When the user scrolls the page, execute myFunction 2 | window.onscroll = function() {myFunction()}; 3 | 4 | // Get the header 5 | var header = document.getElementById("header"); 6 | 7 | // Get the offset position of the navbar 8 | var sticky = header.offsetTop; 9 | 10 | // Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position 11 | function myFunction() { 12 | if (window.pageYOffset > sticky) { 13 | header.classList.add("sticky"); 14 | } else { 15 | header.classList.remove("sticky"); 16 | } 17 | } -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Othneil Drew 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 | -------------------------------------------------------------------------------- /PHP/accept-request.php: -------------------------------------------------------------------------------- 1 | prepare("INSERT INTO friends (user_id, friend_id) VALUES (?, ?), (?, ?)"); 6 | // friendship is 2-sided 7 | $statement->bind_param('iiii', $_SESSION['userid'], $_GET['uid'], $_GET['uid'], $_SESSION['userid']); 8 | // remove friend request 9 | if ($statement->execute()) { 10 | redirect_to("decline-request.php?uid=" . $_GET['uid']); 11 | } else { 12 | echo "Error: " . $conn->error; 13 | } -------------------------------------------------------------------------------- /PHP/add-friend.php: -------------------------------------------------------------------------------- 1 | prepare($sql); 6 | $statement->bind_param('ii', $_SESSION['userid'], $_GET['uid']); 7 | if ($statement->execute()) { 8 | $id = $_GET['uid']; 9 | $un = $_SESSION['username']; 10 | $msg = "@".$un." sent you a friend request."; 11 | $sql = "INSERT into notifications(user_id, notification) VALUES('$id','$msg')"; 12 | if($conn->query($sql)){ 13 | redirect_to("homepage.php?request_sent=true"); 14 | } 15 | } else { 16 | echo "Error: " . $conn->error; 17 | } -------------------------------------------------------------------------------- /PHP/contact-us.php: -------------------------------------------------------------------------------- 1 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | Contact Us 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 37 |
38 |
39 | 40 |
41 | 42 |

TRAVELLOG

43 |
44 |
45 |
46 | 47 |
48 |
49 |

Address

50 |

Rahjung street, Pune, India

51 |
52 |
53 | 54 |
55 |
56 | 57 |
58 |
59 |

Email

60 |

contact@travellog.com

61 |
62 |
63 | 64 |
65 |
66 | 67 |
68 |
69 |

Phone

70 |

123-456-7890

71 |
72 |
73 |
74 | 75 | 76 |
77 |
78 |

Send Message

79 |
80 | 81 | Full Name 82 |
83 |
84 | 85 | Email 86 |
87 |
88 | 89 | Message 90 |
91 |
92 | 93 |
94 |
95 |
96 |
97 |
98 | 99 | 100 | 101 | -------------------------------------------------------------------------------- /PHP/create-post.php: -------------------------------------------------------------------------------- 1 | 11 | 17 | prepare("INSERT INTO posts (user_id, content, content_img, created_at) VALUES (?, ?, ?, ?)"); 26 | $statement->bind_param('isss', $uid, $content, $blobimg, $date); 27 | // $statement->bind_param('s', $content); 28 | // $statement->bind_param('b', $blobimg); 29 | // $statement->bind_param('s', $date); 30 | if ($statement->execute()) { 31 | $_SESSION['post-flag'] = 1; 32 | redirect_to("homepage.php"); 33 | } else { 34 | echo "Error: " . $conn->error; 35 | } 36 | } 37 | } 38 | // $conn->close(); -------------------------------------------------------------------------------- /PHP/decline-request.php: -------------------------------------------------------------------------------- 1 | prepare($sql); 7 | $statement->bind_param('ii', $_GET['uid'], $_SESSION['userid']); 8 | if ($statement->execute()) { 9 | redirect_to("homepage.php"); 10 | } else { 11 | echo "Error: " . $conn->error; 12 | } 13 | -------------------------------------------------------------------------------- /PHP/delete-post.php: -------------------------------------------------------------------------------- 1 | prepare($sql); 6 | $statement->bind_param('i', $_GET['id']); 7 | if ($statement->execute()) { 8 | redirect_to("homepage.php"); 9 | } else { 10 | echo "Error: " . $conn->error; 11 | } 12 | // $conn->close(); -------------------------------------------------------------------------------- /PHP/disp-friend-box.php: -------------------------------------------------------------------------------- 1 | query($sql); 5 | 6 | if ($result && $result->num_rows > 0) { 7 | ?> 8 |
9 |
10 | fetch_assoc()) { 12 | ?> 13 | 14 | 15 | 75 |
76 | 77 | 80 | 81 |
82 |
83 | 84 | 85 | 88 |

Nothing to display yet!

89 | prepare($sql); 8 | $statement->bind_param('ssi', $_POST['status'], $_POST['location'], $_SESSION['userid']); 9 | if($statement->execute()) { 10 | redirect_to("profile.php?username={$_SESSION['username']}"); 11 | } else { 12 | echo "Error: ".$conn->error; 13 | } 14 | } 15 | 16 | if (isset($_POST['update_img'])) { 17 | 18 | if (empty($_FILES['get-photo']['tmp_name'])) { 19 | print "Invalid request"; 20 | $_SESSION['prof-flag'] = 0; 21 | redirect_to("profile.php?username={$_SESSION['username']}"); 22 | } else { 23 | 24 | // $sql = "INSERT INTO posts (user_id, content, content_img, created_at) VALUES (?, ?, ?, ?)"; 25 | $blobimg = file_get_contents($_FILES['get-photo']['tmp_name']); 26 | $uid = $_SESSION['userid']; 27 | // $sql = "INSERT INTO users(profile_img) VALUES '$blobimg' WHERE user_id = '$uid'"; 28 | $statement = $conn->prepare("UPDATE users SET profile_img = ? WHERE user_id = ?"); 29 | $statement->bind_param('si', $blobimg, $uid); 30 | // $statement->bind_param('s', $content); 31 | // $statement->bind_param('b', $blobimg); 32 | // $statement->bind_param('s', $date); 33 | if ($statement->execute()) { 34 | $_SESSION['prof-flag'] = 1; 35 | redirect_to("profile.php?username={$_SESSION['username']}"); 36 | } else { 37 | echo "Error: " . $conn->error; 38 | } 39 | } 40 | } 41 | $conn->close(); -------------------------------------------------------------------------------- /PHP/footer.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | TravelLog 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 24 | 25 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /PHP/functions.php: -------------------------------------------------------------------------------- 1 | ping()) { 13 | // printf ("Our connection is ok!\n"); 14 | } else { 15 | printf("Error: %s\n", $conn->error); 16 | } 17 | 18 | if ($conn->connect_error) { 19 | die("Error: " . $conn->connect_error); 20 | } 21 | // echo '

Connected to DB!

'; 22 | } 23 | 24 | function redirect_to($location) 25 | { 26 | header('Location:' . $location); 27 | } 28 | 29 | function is_auth() 30 | { 31 | return isset($_SESSION['userid']); 32 | } 33 | 34 | function check_auth() 35 | { 36 | if (!is_auth()) { 37 | redirect_to("/login.php?logged_in=false"); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /PHP/header.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | TravelLog 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 22 | 23 | 24 | 76 | 77 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /PHP/homepage.php: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | TravelLog 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 44 | 45 | 46 | 49 | 50 | 51 |
52 |
53 |
54 | 55 | prepare($sql); 58 | $statement->bind_param('s', $_SESSION['username']); 59 | $statement->execute(); 60 | $statement->store_result(); 61 | $statement->bind_result($profile_img, $status); 62 | $statement->fetch(); 63 | ?> 64 |
65 |
66 | '; 69 | } else { 70 | ?> 71 | Portrait Placeholder 72 | 75 |
76 |
77 |
78 | 81 |

82 | Profile 83 |
84 |
85 |
86 | 87 | 88 | 89 |

Friend Requests

90 | 103 | 104 |
105 |
106 | 107 |

Hello

108 |
109 |
110 | 111 |
112 |
113 |

114 | 120 |

121 | 122 | 126 | 127 | 128 |
129 |
130 | 131 | 132 | 133 |
134 | 135 | 141 |
142 | 143 |
144 |
145 | 146 |

Add Friend

147 | 164 | 165 | 166 | 167 | 168 |

Friends

169 | 182 | 183 |
184 |
185 |
186 | 187 | 188 | 189 | -------------------------------------------------------------------------------- /PHP/login.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Login 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 24 | 25 | 26 | 27 | 28 | 29 |
TRAVELLOG
30 | 31 | query($userquery); 40 | 41 | if (!$userres->num_rows) { 42 | ?> 43 |

User does not exist.

44 | fetch_assoc(); 47 | $db_pass = $userpass['password']; 48 | $pass_decode = password_verify($password, $db_pass); 49 | 50 | if ($pass_decode) { 51 | $_SESSION['name'] = $userpass['name']; 52 | $_SESSION['username'] = $username; 53 | $_SESSION['post-flag'] = 1; 54 | $_SESSION['prof-flag'] = 1; 55 | $_SESSION['userid'] = $userpass['user_id']; 56 | ?> 57 | 60 | 61 | 69 | 70 | 71 |
72 |
73 |

Login

74 |
75 | 76 | 77 |
78 |
79 | 80 | 81 |
82 | 85 | 86 | 87 |
88 |
89 | Don't have an account? 90 | Create one! 91 |
92 |
93 |
94 | 95 | 96 | 97 | -------------------------------------------------------------------------------- /PHP/logout.php: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 |
7 | 8 | 9 | query($sql); 14 | if ($result->num_rows > 0) { 15 | while ($row = $result->fetch_assoc()) { 16 | // 17 | $notif = $row["notification"]; 18 | $ts = $row["timestamp"]; 19 | ?> 20 |
21 |
22 | 23 |
24 |
25 | 27 | } 28 | } else { 29 | echo "

No notifications!

"; 30 | } 31 | ?> 32 | 33 |
34 | 35 | -------------------------------------------------------------------------------- /PHP/post.php: -------------------------------------------------------------------------------- 1 | query($sql); 5 | 6 | if ($result->num_rows > 0) { 7 | while ($post = $result->fetch_assoc()) { 8 | ?> 9 | 10 |
11 |
12 |
13 |
14 |
15 | '; 18 | } else { 19 | ?> 20 | Portrait Placeholder 21 | 24 |
25 | 33 |
34 | 37 |
38 | 40 | 41 |
42 | 46 | 47 | 49 | 50 | 51 | 52 | 53 | 54 |
55 |
56 | 57 |
58 |
59 | '; 62 | } 63 | echo $post['content']; 64 | ?> 65 |
66 | 67 | 68 | 76 | 77 | 78 | 79 | 80 | 85 | 86 | 87 | 88 | 89 | 99 | 100 | 112 | 113 | 114 | 115 | 116 |
117 |
118 | 122 |

No posts yet!

123 | close(); 126 | ?> 127 | 128 | -------------------------------------------------------------------------------- /PHP/profile.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | TravelLog 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 29 | 30 | prepare($sql); 36 | $statement->bind_param('s', $_GET['username']); 37 | $statement->execute(); 38 | $statement->store_result(); 39 | $statement->bind_result($id, $name, $username, $status, $profile_image, $location); 40 | $statement->fetch(); 41 | ?> 42 | 43 | 44 |
45 |
46 | 49 |
50 | 51 |
52 |
53 |

Edit profile

54 |
55 |
56 | 57 |
58 | 59 |
60 | 61 |
62 | 63 |
64 | 65 |
66 |
67 |
68 |
69 | 70 | 71 |
72 |
73 |

Change profile image

74 |
75 |

76 | 82 |

83 | 84 | 88 | 89 | 90 |
91 |
92 |
93 | 94 |
95 | 98 |
99 | 100 |
101 |
102 | '; 105 | } else { 106 | ?> 107 | Portrait Placeholder 108 | 111 | 112 |
113 |
114 |

115 |

116 |

Status:
Location:

117 |
118 |
119 | 120 | 121 |
122 | 123 | 124 | 125 |
126 | 127 | 132 |
133 | 134 |
135 | 136 |
137 | 138 |

Friends

139 | 152 | 153 |
154 |
155 |
156 | 157 | 158 | 159 | 162 | 163 | 164 | 165 | -------------------------------------------------------------------------------- /PHP/remove-friend.php: -------------------------------------------------------------------------------- 1 | prepare($sql); 6 | $statement->bind_param('iiii', $_GET['uid'], $_SESSION['userid'], $_SESSION['userid'], $_GET['uid']); 7 | if ($statement->execute()) { 8 | redirect_to("homepage.php"); 9 | } else { 10 | echo "Error: " . $conn->error; 11 | } 12 | -------------------------------------------------------------------------------- /PHP/search.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 10 | 11 |
12 | 13 | query($sql); 20 | if ($result->num_rows > 0) { 21 | while ($row = $result->fetch_assoc()) { 22 | $username = $row['username']; 23 | $uid = $row['user_id']; 24 | $status = $row['status']; 25 | $profile_img = $row['profile_img']; 26 | $name = $row['name']; 27 | ?> 28 |
29 |
30 | '; 33 | } else { 34 | ?> 35 | Portrait Placeholder 36 | 39 |
40 |
41 |
42 | 45 |

46 | Profile 47 |
48 |
49 |
50 | 55 | 56 |
57 | 58 | 2 | 3 | 4 | 5 | 6 | 7 | Sign Up 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | Mobile-Imange 26 | 27 | 28 |
TRAVELLOG
29 | 30 | 33 | 34 | query($emailquery); 48 | 49 | $userquery = "SELECT * FROM users WHERE username = '$username'"; 50 | $userres = $conn->query($userquery); 51 | 52 | if ($emailres->num_rows > 0) { 53 | echo "Email already exists."; 54 | } elseif ($userres->num_rows > 0) { 55 | echo "User already exists."; 56 | } else { 57 | if ($password === $cpassword) { 58 | $sql = "INSERT INTO users(name, email, username, password) VALUES('$name', '$email', '$username', '$pass')"; 59 | $result = $conn->query($sql); 60 | $sql = "SELECT user_id FROM users WHERE username='$username'"; 61 | $result = $conn->query($sql); 62 | if ($result->num_rows > 0) { 63 | while($row = $result->fetch_assoc()) { 64 | $id = $row['user_id']; 65 | $sql = "INSERT into notifications(user_id, notification) VALUES('$id', 'Welcome to TravelLog')"; 66 | $res = $conn->query($sql); 67 | } 68 | } 69 | redirect_to("login.php"); 70 | } else { 71 | echo "Passwords not matching."; 72 | } 73 | } 74 | $conn->close(); 75 | } 76 | ?> 77 | 78 | 79 |
80 |
81 |

Sign Up

82 |
83 | 84 | 85 |
86 |
87 | 88 | 89 |
90 |
91 | 92 | 93 |
94 |
95 | 96 | 97 |
98 |
99 | 100 | 101 |
102 | 103 | 104 | I Agree to the Terms and Conditions. 105 | 106 | 107 |
108 |
109 | Already have an account? 110 | Login! 111 |
112 |
113 |
114 | 115 | 116 | -------------------------------------------------------------------------------- /PHP/terms-and-conditions.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | TravelLog T&C 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 33 |
34 |
35 |
36 | 37 |
38 | 39 |
40 |
41 |

42 | TravelLog Mgmt., SRL ("TravelLog Mgmt.") operates TravelLog (as defined below), your use of TravelLog is governed by these Terms of Service (“Terms”), and your use of TravelLog constitutes your acceptance of the Terms. 43 |

44 |

45 | "TravelLog" (the "Service") means TravelLog project management solution made available at Repository (the “Site”) and any other software, sites, and services offered by TravelLog Mgmt. in connection therewith but does not include any sites, services, products, or offerings governed by other terms of use, or, other agreements between you and TravelLog Mgmt.. "Customer Data" means any data you make available to TravelLog Mgmt. or TravelLog from your GitHub account for the purpose of using TravelLog. "Content" means all content generated by TravelLog Mgmt. on your behalf (including metric data) and does not include Customer Data. 46 |

47 |

48 | We will endeavor to provide you with notice about major changes to the Terms or TravelLog and other changes (via email to the address on your account), but we make no guarantees. Other changes could be, without limitation, changes to payment policies, security patches, added or removed functionality, and other enhancements or restrictions to TravelLog. Your use of TravelLog after the Terms have changed constitutes your acceptance of the Terms as changed. You may reject changes to the Terms by terminating your subscription in accordance with the "Cancellation and Termination" section of these Terms of Service. TravelLog Mgmt. shall not be liable to you or to any third party for any change to TravelLog. 49 |

50 |

51 | Please use TravelLog responsibly and in compliance with these Terms. If you don't, we reserve the right to terminate your subscription in accordance with the "Cancellation and Termination" section of these Terms of Service. 52 |

53 | 54 |

1. Use of TravelLog

55 |

56 | To use TravelLog, you must (i) Sign Up (ii) authorize TravelLog Mgmt. to access your Customer Data to provide TravelLog, (iii) provide accurate account information any time you register to use TravelLog, (iv) provide accurate GitHub account information when you register to use TravelLog, and (v) be a human over the age of 13. Uses by automated methods are not permitted. You grant TravelLog Mgmt. a non-exclusive, royalty-free, and worldwide license to use, store, and copy your Customer Data in order to provide TravelLog. 57 |

58 |

59 | You are responsible for the security of your passwords and for any use of your account. You may not allow multiple people to use the same account or otherwise access TravelLog in a manner intended to avoid incurring fees. 60 |

61 |

62 | You must comply with all applicable GitHub policies and terms of service. TravelLog Mgmt. is not responsible for any acts or omissions of GitHub whether related to your account or otherwise. 63 |

64 |

65 | TravelLog Mgmt. reserves the right to enforce quotas and usage limits (to any resources, including the API) at its sole discretion, with or without notice, which may result in TravelLog Mgmt. disabling or throttling your usage of the Service for any amount of time. 66 |

67 |

68 | You are responsible for obtaining access to TravelLog and that access may involve third party fees (such as Internet service provider or airtime charges). You are responsible for those fees. In addition, you must provide and are responsible for all equipment necessary to access the Site. 69 |

70 |

71 | You may not use TravelLog: 72 |

73 |
    74 |
  • 75 | for any illegal purpose, in any manner inconsistent with applicable laws, regulations, or ordinances, or to submit, post, upload, or otherwise transmit any Customer Data or Content that is unlawful, defamatory, libelous, invasive of another's privacy, abusive, threatening, harassing, vulgar, obscene, indecent or otherwise objectionable; 76 |
  • 77 |
  • 78 | to submit, post, upload or otherwise transmit any Customer Data or Content that infringes or otherwise violates the rights of any third party, including without limitation privacy rights, fiduciary rights and proprietary rights; 79 |
  • 80 |
  • 81 | to submit, post, upload or otherwise transmit Customer Data or Content that contains viruses, corrupted files, or any other similar software or programs that may damage the operation of TravelLog or another person's computer; or 82 |
  • 83 |
  • 84 | if you are a person barred from receiving TravelLog under the laws of the United States or other countries, including the country in which you are resident or from which you use TravelLog. 85 |
  • 86 |
87 | 88 |

2. Cancellation and Termination

89 |

90 | To cancel your subscription, account, and access to TravelLog, send us an email at hi@tryTravelLog.com instructing us to do so or cancel via the functionality on the Waffle website. If you paid for your subscription, TravelLog Mgmt. is not obligated to provide any refunds if you cancel your subscription or if TravelLog Mgmt. terminates your subscription because you breached these Terms. If your subscription is cancelled or terminated in accordance with the foregoing before the end of the current paid-up month, your cancellation will take effect immediately and you will not be charged again. All of your Customer Data and Content will, within a reasonable amount of time to be determined solely by TravelLog Mgmt., be deleted from TravelLog upon cancellation. 91 |

92 |

93 | You agree that TravelLog Mgmt., in its sole discretion and for any or no reason, may terminate or suspend your account. You agree that any termination of your access to the Service may be without prior notice, and you agree that TravelLog Mgmt. will not be liable to you or any third party for such termination. If you paid for your subscription, and TravelLog Mgmt. did not terminate or suspend your account due to your breach of these Terms, TravelLog Mgmt. will provide a pro-rata refund of unused subscription fees if it terminates or suspends your account in accordance with this paragraph. 94 |

95 | 96 |

3. Customer Data

97 |

98 | TravelLog Mgmt. claims no ownership or control over any Customer Data. Except for the license expressly granted by you to TravelLog Mgmt. to provide TravelLog, you retain all right, title, and interest in and to Customer Data and you are responsible for protecting those rights and interests, as appropriate. Notwithstanding the foregoing, you grant to TravelLog Mgmt. for its use a worldwide, non-exclusive, royalty-free license to aggregate or compile Customer Data with customer data of other users of TravelLog so long as such aggregation or compilation omits any data that would enable the identification of you (“Aggregated Data”). TravelLog Mgmt. shall have a worldwide, perpetual, royalty-free license to use, modify, distribute and create derivative works based on such Aggregated Data, and as between you and TravelLog Mgmt., TravelLog Mgmt. shall own all compilations of the Aggregated Data, including all reports, statistics or analyses created or derived therefrom. 99 |

100 |

101 | You understand that projects in TravelLog will display Customer Data to you and any collaborators that you designate for that project. You are solely responsible for any collaborators and third-parties (including third-party services) that you allow to view Customer Data and entrust them at your own risk. 102 |

103 |

104 | You are solely responsible for configuring TravelLog to allow appropriate access to your Customer Data. TravelLog Mgmt. is not responsible if you fail to configure, or misconfigure, your project and inadvertently allow unauthorized parties to view any Customer Data. 105 |

106 | 107 |

4. Ideas and Feedback

108 |

109 | As part of your use of TravelLog, you may choose, or we may invite you, to submit comments, feedback or ideas about TravelLog, including but not limited to ideas about improving TravelLog or our other offerings ("Ideas"). You hereby grant TravelLog Mgmt. a perpetual, royalty-free, unlimited, worldwide license to use and/or incorporate such Ideas into any TravelLog Mgmt. offering (including TravelLog) at any time in TravelLog Mgmt.’s sole discretion. Ideas you submit will not be afforded any confidential treatment by TravelLog Mgmt., regardless of whether you request such treatment or otherwise designate Ideas as proprietary or confidential. 110 |

111 | 112 |

5. External Sites and Content

113 |

114 | The TravelLog may contain links to other websites or content (“Third Party Sites”). TravelLog Mgmt. does not endorse, sanction or verify the accuracy or ownership of the information contained in/on any Third Party Site or any products or services advertised on Third Party Sites. If you decide to leave the Site and navigate to Third Party Sites, or install any software or download content from any such Third Party Sites, you do so at your own risk. Once you access a Third Party Site through a link on our Site, you may be subject to the terms and conditions of such Third Party Site. You should review the applicable policies, including privacy and data gathering practices, of any Third Party Site to which you navigate from the Site, or relating to any software you use or install from a Third Party Site, including any applicable license agreement. Concerns regarding a Third Party Site should be directed to the Third Party Site itself. TravelLog Mgmt. bears no responsibility for any action associated with any Third Party Site. 115 |

116 | 117 |

6. License and Restrictions

118 |

119 | Subject to and conditioned upon your agreement to and compliance with these Terms, we will make TravelLog available to you on a subscription basis solely for your own use and not for resale or to provide services to any third party. 120 |

121 |

122 | Excluding Third Party Sites and their related content, all of the content available on or through TravelLog, including without limitation, text, photographs, graphics, logos, trade/service marks, and/or audiovisual content, but expressly excluding Customer Data, is owned and/or controlled by TravelLog Mgmt., its licensors or TravelLog users and is protected, as applicable, by copyright, trademark, trade dress, patent, and trade secret laws, other proprietary rights, and international treaties. You acknowledge that TravelLog and any underlying technology or software used in connection with TravelLog contain our proprietary information. 123 |

124 |

125 | You will not, nor will you attempt to (or allow anyone else to or attempt to): 126 |

127 |
    128 |
  • 129 | copy, modify, create a derivative work of, reverse engineer, decompile or otherwise attempt to extract the source code of TravelLog or any part thereof; 130 |
  • 131 |
  • 132 | attempt to disable or circumvent any security or verification mechanism used by TravelLog; 133 |
  • 134 |
  • 135 | use TravelLog in any manner, or otherwise engage in any activity, that could damage, disable, overburden or impair our servers or networks, or interfere with or disrupt TravelLog or any other users' use or enjoyment of TravelLog. 136 |
  • 137 |
  • 138 | attempt to gain unauthorized access to any of TravelLog, member accounts, or computer systems or networks, through hacking, password mining or any other means. 139 |
  • 140 |
  • 141 | remove any notices of copyright, trademark or other proprietary rights contained in/on or accessible through TravelLog or in any content or other material obtained via TravelLog; 142 |
  • 143 |
  • 144 | use any robot, spider, website search/retrieval application, or other automated device, process or means to access, retrieve or index any portion of TravelLog; 145 |
  • 146 |
  • 147 | reformat or frame any portion of the web pages that are part of TravelLog; 148 |
  • 149 |
  • 150 | use TravelLog for commercial purposes not permitted under these Terms; 151 |
  • 152 |
  • 153 | in connection with your use of TravelLog, make unauthorized use of others’ GitHub accounts or Customer Data; 154 |
  • 155 |
  • 156 | create user accounts by automated means or under false or fraudulent pretenses; 157 |
  • 158 |
  • 159 | provide or use tracking or monitoring functionality in connection with TravelLog, including, without limitation, to identify other users’ actions or activities; 160 |
  • 161 |
  • 162 | impersonate or attempt to impersonate any other person or entity, including without limitation TravelLog Mgmt. or any employee, contractor or associate of TravelLog Mgmt.; or 163 |
  • 164 |
  • 165 | collect or store personal data about other users in connection with the prohibited activities described in this paragraph. 166 |
  • 167 |
168 | 169 |

7. Open Source Software

170 |

171 | Open source software licenses for components of TravelLog released under an open source license constitute separate written agreements. To the limited extent that the open source software licenses expressly supersede these Terms, the open source licenses govern your agreement with TravelLog Mgmt. only for the use of the components of TravelLog released under an open source license. 172 |

173 | 174 |

8. Monitoring of Content

175 |

176 | You understand that TravelLog Mgmt. may access and disclose Customer Data or otherwise provide third parties access to it for the following reasons: 177 |

178 |
    179 |
  • 180 | to send an email message to you upon your request; 181 |
  • 182 |
  • 183 | to maintain the Site and TravelLog and to develop new and useful features and services; 184 |
  • 185 |
  • 186 | to follow a court order, subpoena, complaint or a lawful request from governmental authorities; 187 |
  • 188 |
  • 189 | to enforce these Terms; 190 |
  • 191 |
  • 192 | to respond to claims that any Customer Data or Content violates third party rights; 193 |
  • 194 |
  • 195 | to respond to your requests for customer service; and 196 |
  • 197 |
  • 198 | to protect the rights, property, or personal safety of TravelLog Mgmt., users of TravelLog Mgmt.’s offerings, including without limitation TravelLog, and the public. 199 |
  • 200 |
201 | 202 |

9. Our Copyright Dispute Policy

203 |

204 | TravelLog Mgmt. respects the intellectual property of others and requires that our users do the same. If you believe that material or content residing on or accessible through TravelLog infringes a copyright, please send a notice of copyright infringement containing the following information to the Designated Copyright Agent listed below: 205 |

206 |
    207 |
  • 208 | identification of the copyrighted work claimed to have been infringed, or, if multiple copyrighted works are covered by a single notification, a representative list of such works; 209 |
  • 210 |
  • 211 | identification of the claimed infringing material and information reasonably sufficient to permit us to locate the material on TravelLog (providing the URL(s) of the claimed infringing material satisfies this requirement); 212 |
  • 213 |
  • 214 | information reasonably sufficient to permit us to contact you, such as an address, telephone number, and an email address; 215 |
  • 216 |
  • 217 | a statement by you that you have a good faith belief that the disputed use is not authorized by the copyright owner, its agent, or the law; 218 |
  • 219 |
  • 220 | a statement by you, made under penalty of perjury, that the above information in your notification is accurate and that you are the copyright owner or are authorized to act on the copyright owner's behalf; and 221 |
  • 222 |
  • 223 | your physical or electronic signature. 224 |
  • 225 |
226 |

227 | Our Designated Copyright Agent for notification of claimed infringement can be reached by email at: hi@tryTravelLog.com or at the following postal address: 228 |

229 |

230 | Attn: Legal/Urgent, TravelLog Mgmt./TravelLog, 1011 Cassinoni, Montevideo, Uruguay 231 |

232 |

233 | Disclaimer of Warranties: 234 |

235 |

236 | IF YOU ACCESS TravelLog, YOU DO SO AT YOUR OWN RISK. WE PROVIDE TravelLog “AS IS,” “WITH ALL FAULTS” AND “AS AVAILABLE.” WE MAKE NO EXPRESS OR IMPLIED WARRANTIES OR GUARANTEES ABOUT TravelLog. TO THE MAXIMUM EXTENT PERMITTED BY LAW, WE HEREBY DISCLAIM ALL SUCH WARRANTIES, INCLUDING ALL STATUTORY WARRANTIES, WITH RESPECT TO TravelLog, INCLUDING WITHOUT LIMITATION ANY WARRANTIES THAT TravelLog IS MERCHANTABLE, OF SATISFACTORY QUALITY, ACCURATE, FIT FOR A PARTICULAR PURPOSE OR NEED, OR NON-INFRINGING. WE DO NOT GUARANTEE THAT THE RESULTS THAT MAY BE OBTAINED FROM THE USE OF TravelLog WILL BE EFFECTIVE, RELIABLE OR ACCURATE OR WILL MEET YOUR REQUIREMENTS. WE DO NOT GUARANTEE THAT YOU WILL BE ABLE TO ACCESS OR USE TravelLog (EITHER DIRECTLY OR THROUGH THIRD-PARTY NETWORKS) AT TIMES OR LOCATIONS OF YOUR CHOOSING. WE ARE NOT RESPONSIBLE FOR THE ACCURACY, RELIABILITY, TIMELINESS OR COMPLETENESS OF INFORMATION PROVIDED BY ANY OTHER USERS OF TravelLog OR ANY OTHER DATA OR INFORMATION PROVIDED OR RECEIVED THROUGH TravelLog. EXCEPT AS EXPRESSLY SET FORTH HEREIN, TravelLog Mgmt. MAKES NO WARRANTIES ABOUT THE INFORMATION SYSTEMS, SOFTWARE AND FUNCTIONS MADE ACCESSIBLE BY OR THROUGH TravelLog OR ANY SECURITY ASSOCIATED WITH THE TRANSMISSION OF SENSITIVE INFORMATION. TravelLog Mgmt. DOES NOT WARRANT THAT TravelLog WILL OPERATE ERROR-FREE, THAT ERRORS IN THE SERVICE WILL BE FIXED, THAT LOSS OF DATA WILL NOT OCCUR, OR THAT TravelLog IS FREE OF COMPUTER VIRUSES, CONTAMINANTS OR OTHER HARMFUL ITEMS. UNDER NO CIRCUMSTANCES WILL TravelLog Mgmt., ANY OF OUR AFFILIATES, DISTRIBUTORS, PARTNERS, LICENSORS, AND/OR ANY OF OUR OR THEIR DIRECTORS, OFFICERS, EMPLOYEES, CONSULTANTS, AGENTS, OR OTHER REPRESENTATIVES BE LIABLE FOR ANY LOSS OR DAMAGE CAUSED BY YOUR RELIANCE ON INFORMATION OBTAINED THROUGH THE SERVICE. 237 |

238 | 239 |

10. Limitations on Liability

240 |

241 | YOUR SOLE AND EXCLUSIVE REMEDY FOR ANY DISPUTE WITH US IS THE CANCELLATION OF YOUR USE OF TravelLog. IN NO EVENT SHALL WE BE LIABLE TO YOU (OR TO ANY THIRD PARTY CLAIMING UNDER OR THROUGH YOU) FOR ANY DAMAGES WHATSOEVER, INCLUDING, INDIRECT, SPECIAL, INCIDENTAL, CONSEQUENTIAL, PUNITIVE OR EXEMPLARY DAMAGES OR ANY BODILY INJURY, EMOTIONAL DISTRESS, DEATH OR ANY OTHER DAMAGES ARISING FROM YOUR USE OF OR INABILITY TO USE TravelLog, WHETHER ON-LINE OR OFF-LINE, OR OTHERWISE IN CONNECTION WITH TravelLog. THESE EXCLUSIONS APPLY TO ANY CLAIMS FOR LOST PROFITS, LOST DATA, LOSS OF GOODWILL OR BUSINESS REPUTATION, COST OF PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES, WORK STOPPAGE, COMPUTER FAILURE OR MALFUNCTION, ANY OTHER COMMERCIAL DAMAGES OR LOSSES, OR ANY PERSONAL INJURY OR PROPERTY DAMAGES, EVEN IF WE KNEW OR SHOULD HAVE KNOWN OF THE POSSIBILITY OF SUCH DAMAGES. TravelLog Mgmt.’S LIABILITY UNDER THESE TERMS SHALL BE LIMITED TO THE FEES YOU PAID TravelLog Mgmt. IN THE TWELVE MONTHS PRIOR TO THE DATE THE CLAIM AROSE. BECAUSE SOME STATES OR JURISDICTIONS DO NOT ALLOW THE EXCLUSION OR THE LIMITATION OF LIABILITY FOR CONSEQUENTIAL OR INCIDENTAL DAMAGES, IN SUCH STATES OR JURISDICTIONS, OUR LIABILITY SHALL BE LIMITED TO THE EXTENT PERMITTED BY LAW. 242 |

243 | 244 |

11. Indemnification

245 |

246 | You agree to hold harmless and indemnify TravelLog Mgmt., and its subsidiaries, affiliates, officers, agents, employees, advertisers, licensors, suppliers or partners from and against any third party claim arising from or in any way related to (a) your breach of the Terms, (b) your use of TravelLog, (c) your violation of applicable laws, rules or regulations in connection with TravelLog, or (d) your Customer Data, including any liability or expense arising from all claims, losses, damages (actual and consequential), suits, judgments, litigation costs and attorneys' fees, of every kind and nature. In such a case, TravelLog Mgmt. will provide you with written notice of such claim, suit or action. 247 |

248 | 249 |

12. Choice of Law and Dispute Resolution

250 |

251 | These Terms will be governed by and construed in accordance with the laws of the State of California without giving effect to principles of conflict of laws, and the parties consent to the jurisdiction of the federal courts of the State of California. Each party irrevocably submits to the jurisdiction and venue of any such court in any such action or proceeding. The United Nations Convention on Contracts for the International Sale of Goods will not apply to These Terms. 252 |

253 | 254 |

13. General Legal Terms

255 |

256 | These Terms constitute the whole legal agreement between you and TravelLog Mgmt. and govern your use of the Service and completely replace any prior agreements between you and TravelLog Mgmt., written or oral, in relation to TravelLog. 257 |

258 |

259 | If any part of the Terms is held invalid or unenforceable, that portion shall be construed in a manner consistent with applicable law to reflect, as nearly as possible, the original intentions of the parties, and the remaining portions shall remain in full force and effect. 260 |

261 |

262 | The failure of TravelLog Mgmt. to exercise or enforce any right or provision of the Terms shall not constitute a waiver of such right or provision. 263 |

264 |

265 | TravelLog Mgmt. shall not be liable for failing or delaying performance of its obligations resulting from any condition beyond its reasonable control, including but not limited to, governmental action, acts of terrorism, earthquake, fire, flood or other acts of God, labor conditions, power failures, and Internet disturbances. 266 |

267 |

268 | TravelLog Mgmt. may assign this contract at any time to any parent, subsidiary, or any affiliated company, or as part of the sale to, merger with, or other transfer of our company to another entity. You may not assign these Terms. 269 |

270 |

271 | These Terms are adapted from the Waffle.io Terms of Service, which is an adaption of the CodeClimate Terms of Service, which is an adaption of the Heroku Terms of Service, which in turn is an adaptation of the Google App Engine Terms of Service. The original work has been modified with permission under the Creative Commons Attribution 3.0 License. Neither CA, Inc, CodeClimate, LLC, Heroku, Inc. nor Google, Inc. is connected with, nor do they sponsor or endorse, TravelLog Mgmt. or its use of the work. 272 |

273 |

274 | Version 1.0, Feb 21, 2021 275 |

276 | 277 |
278 |
279 |
280 |
281 | 282 | 283 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 12 | 13 | 14 | 15 | 16 | 23 | [![Contributors][contributors-shield]][contributors-url] 24 | [![MIT License][license-shield]][license-url] 25 | [![LinkedIn][linkedin-shield]][linkedin-url] 26 | [![Stars][stars-shield]][stars-url] 27 | [![Forks][forks-shield]][forks-url] 28 | 29 | 30 | 31 | 32 |
33 |

34 | 35 | Logo 36 | 37 | 38 |

TravelLog

39 | 40 |

41 | Social Network website for sharing travel experiences & travel micro-blogging. 42 |
43 | 44 |
45 | 46 | 47 | · 48 | Report Bug 49 | · 50 | 51 |

52 |

53 | 54 | 55 | 56 | 57 |
58 |

Table of Contents

59 |
    60 |
  1. 61 | About The Project 62 | 65 |
  2. 66 |
  3. 67 | Getting Started 68 | 72 |
  4. 73 |
  5. Contributing
  6. 74 |
  7. License
  8. 75 |
  9. Contact
  10. 76 |
77 |
78 | 79 | 80 | 81 | 82 | ## About The Project 83 | 84 | [![Product Name Screen Shot]](https://example.com) 85 | 86 | 87 | ![product-screenshot] 88 | 89 | 90 | ### Built With 91 | 92 | * [HTML, CSS, JavaScript, PHP, MySQL]() 93 | * [fontawesome](https://fontawesome.com/) 94 | * [pexels](https://www.pexels.com/) 95 | 96 | 97 | 98 | 99 | ## Getting Started 100 | 101 | To get a local copy up and running follow these simple steps. 102 | 103 | ### Prerequisites 104 | 105 | 1. XAMPP 106 | * [Download](https://www.apachefriends.org/download.html) 107 | * [Install](https://xamppguide.com/) 108 | 2. IDE of choice - e.g. [VSCode](https://code.visualstudio.com/download) 109 | 3. Web Browser of choice - e.g. [Google Chrome](https://www.google.com/intl/en_in/chrome/) 110 | 111 | ### Installation 112 | 113 | 1. Start XAMPP and open phpMyAdmin on browser. 114 | 2. Create a new database for the project and name it "travellog" 115 | 3. Import the [Database](https://github.com/sn2606/TravelLog/blob/master/Database/travellog.sql) 116 | 4. Clone the repository in any folder and name folder as per choice. 117 | ``` 118 | git clone git@github.com:sn2606/TravelLog.git your-folder-name 119 | ``` 120 | 5. Start XAMPP servers - Apache and MySQL 121 | 6. Start PHP development server (at port of your choice) in Folder Directory via command line 122 | ``` 123 | php -S localhost:5000 124 | ``` 125 | 7. Navigate to http://localhost:5000 126 | 127 | 128 | 129 | ## Contributing 130 | 131 | Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**. 132 | 133 | 1. Fork the Project 134 | 2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`) 135 | 3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`) 136 | 4. Push to the Branch (`git push origin feature/AmazingFeature`) 137 | 5. Open a Pull Request 138 | 139 | 140 | 141 | ## Contact 142 | 143 | Swaranjana Nayak - [@LinkedIn](https://www.linkedin.com/in/swaranjana-nayak/) - swaranjananayak@gmail.com 144 | 145 | Project Link: [https://github.com/sn2606/TravelLog](https://github.com/sn2606/TravelLog) 146 | 147 | 148 | 149 | 150 | 151 | [contributors-shield]: https://img.shields.io/github/contributors/sn2606/TravelLog.svg?style=for-the-badge 152 | [contributors-url]: https://github.com/sn2606/TravelLog/graphs/contributors 153 | [forks-shield]: https://img.shields.io/github/forks/sn2606/TravelLog.svg?style=for-the-badge 154 | [forks-url]: https://github.com/sn2606/TravelLog/network/members 155 | [stars-shield]: https://img.shields.io/github/stars/sn2606/TravelLog.svg?style=for-the-badge 156 | [stars-url]: https://github.com/sn2606/TravelLog/stargazers 157 | [issues-shield]: https://img.shields.io/github/issues/sn2606/TravelLog.svg?style=for-the-badge 158 | [issues-url]: https://github.com/sn2606/TravelLog/issues 159 | [license-shield]: https://img.shields.io/github/license/sn2606/TravelLog.svg?style=for-the-badge 160 | [license-url]: https://github.com/sn2606/TravelLog/blob/master/LICENSE.txt 161 | [linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555 162 | [linkedin-url]: https://www.linkedin.com/in/swaranjana-nayak/ 163 | [Product Name Screen Shot]: Images/Landing-Page-SS.png 164 | [product-screenshot]: Images/about-us-rec.gif 165 | -------------------------------------------------------------------------------- /about-us.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | About Us 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 30 | 31 | 39 | 40 |
41 |
42 |

Feel The Beauty Of The World

43 |

44 | Are you the one for camping the the rainforests? Or backpacking through Europe? Or scaling the tallest mountains? 45 |

46 | At TravelLog, meet others that share your love for travelling. All are welcome. The team is committed to making the platform as safe and inclusive as 47 | possible. 48 |

49 | Share photos, videos and post your experiences with the rest of the world. Carve a corner in the internet 50 | where people can see the world through your eyes. 51 |

52 | Connect with explorers and create content that reflects your free soul. Grow your brand with our global community. And it's completely free! 53 |

54 | Get Started 55 |
56 |
57 | img2 58 |
59 |
60 | 61 |
62 | image3 63 |
64 |

GET STARTED TODAY!

65 |

Connect with other travellers and explorers

66 |

67 |
68 | Login 69 | Sign Up 70 |
71 |
72 |
73 | 74 |
75 |
76 |

What the users have to say about us

77 |
78 |
79 |
80 |
81 | image4 82 |
83 |
84 |
85 | 86 | An amazing experience with an awesome community! Got to share my love for Hungarian Architecture with the world. 87 | 88 |
89 |

- Kisa

90 | Budapest, Hungary 91 |
92 |
93 |
94 |
95 | image5 96 |
97 |
98 |
99 | 100 | Found so many others to explore the Australian wildlife with! No more shrieking over spiders alone! 101 | 102 |
103 |

- Monique

104 | Sydney, Australia 105 |
106 |
107 |
108 |
109 | image6 110 |
111 |
112 |
113 | 114 | Absolutely the best place to share my city core photography! 115 | 116 |
117 |

- Jonah

118 | Toronto, Canada 119 |
120 |
121 |
122 | Back To Home 123 |
124 | 125 |
126 | image7 127 |
128 |

CONTRIBUTE TO OUR PLATFORM

129 |

You can contribute to this free platform as a sponsor or as an open source developer

130 |

131 |
132 | Sponsor 133 | Developer 134 |
135 |
136 |
137 | 138 | 157 | 158 | 159 | 160 | 161 | 162 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | TravelLog 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 |
25 |

TRAVELLOG

26 | 31 |
32 | 33 |
34 |

NEVER STOP EXPLORING

35 |

Connect with other travellers and explorers

36 |

37 |
38 | Login 39 | Sign Up 40 |
41 |
42 |
43 | 44 | 45 | 61 | 62 | 63 | --------------------------------------------------------------------------------