diff --git a/README.md b/README.md index 654a6a1..b640f33 100644 --- a/README.md +++ b/README.md @@ -21,6 +21,14 @@ - Learn how to use the $_SERVER - Understand what a server-side language is and what it is used for +## Preview + +This is a screenshot of the Log In page of the project. + +

+ Log In page +

+ ## Repository First of all you must fork this project into your GitHub account. diff --git a/php_server_environment/close_session.php b/php_server_environment/close_session.php new file mode 100644 index 0000000..f4edbf5 --- /dev/null +++ b/php_server_environment/close_session.php @@ -0,0 +1,24 @@ + + + + + + + + + + PHP Server Environment | Joe Alt + + + + + + + \ No newline at end of file diff --git a/php_server_environment/css/index.css b/php_server_environment/css/index.css new file mode 100644 index 0000000..8c9c2de --- /dev/null +++ b/php_server_environment/css/index.css @@ -0,0 +1,156 @@ +html { + background-color: #f6f7fc; +} + +* { + font-family: 'Roboto', sans-serif; + font-weight: 300; + color: #212529; +} + +h1 { + font-size: 28px; + margin: 0; +} + +p { + color: #b3b3b3; + margin-bottom: 40px; +} + +body { + display: grid; + grid-template-columns: auto 350px; + margin: 0; + padding: 0; + overflow: hidden; +} + +.logInFlex { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + max-height: 100vh; +} + +.logInContainer { + margin: 0 auto; + max-width: 500px; +} + +.background-image { + height: auto; + width: auto; + overflow: hidden; +} + +.background-image img { + margin: 0px 0px 0px -740px; +} + +.logInLabel { + display: block; + font-size: 16px; + font-weight: 400; + margin-bottom: 8px; +} + +input { + padding: 15px 12px; + border: none !important; + box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%); + border-radius: 4px; + font-size: 19px; + margin-bottom: 20px; + width: 100%; +} + +input:focus { + outline: none; +} + +input[type=submit] { + display: inline-block; + font-weight: 400; + text-align: center; + vertical-align: middle; + padding: 0.375rem 0.75rem; + font-size: 1rem; + line-height: 1.5; + border-radius: 0.25rem; + height: 54px; + padding-left: 30px; + padding-right: 30px; + color: #fff; + background-color: #fb771a; + width: auto; +} + +.hide { + display: none; +} + +.show { + display: flex; + padding: 15px 12px; + border: none !important; + box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%); + border-radius: 4px; + margin-bottom: 20px; + width: 100%; + background-color: #fb771a; +} + +.show span { + color: #fff; +} + + +/***** Responsive Media Query *****/ +@media screen and (max-width: 780px) { + .logInContainer { + padding: 15px; + margin: 15px; + } + + input { + margin-right: 50px; + } +} + +@media screen and (max-width: 950px) { + body { + overflow: auto; + overflow-x: hidden; + grid-template-columns: auto; + grid-template-areas: + "BGimg" + "logIn"; + } + + .logInFlex { + grid-area: logIn; + margin-top: 60px; + } + + .background-image { + grid-area: BGimg; + height: 230px; + width: 110%; + } + + .background-image img { + margin: -150px 0px 0px -460px; + } +} + +@media screen and (min-width: 1400px) { + body { + grid-template-columns: 2fr 1fr; + } + + .background-image img { + margin: 0px 0px 0px -600px; + } +} \ No newline at end of file diff --git a/php_server_environment/css/style.css b/php_server_environment/css/style.css new file mode 100644 index 0000000..6813b61 --- /dev/null +++ b/php_server_environment/css/style.css @@ -0,0 +1,521 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap'); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} + +.sidebar { + position: fixed; + height: 100%; + width: 240px; + background: #fb771a; + transition: all 0.5s ease; +} + +.sidebar.active { + width: 60px; +} + +.sidebar .logo-details { + height: 80px; + display: flex; + align-items: center; +} + +.sidebar .logo-details i { + font-size: 28px; + font-weight: 500; + color: #fff; + min-width: 60px; + text-align: center +} + +.sidebar .logo-details .logo_name { + color: #fff; + font-size: 24px; + font-weight: 500; +} + +.sidebar .nav-links { + margin-top: 10px; +} + +.sidebar .nav-links li { + position: relative; + list-style: none; + height: 50px; +} + +.sidebar .nav-links li a { + height: 100%; + width: 100%; + display: flex; + align-items: center; + text-decoration: none; + transition: all 0.4s ease; +} + +.sidebar .nav-links li a.active { + background: #c5580a; +} + +.sidebar .nav-links li a:hover { + background: #c5580a; +} + +.sidebar .nav-links li i { + min-width: 60px; + text-align: center; + font-size: 18px; + color: #fff; +} + +.sidebar .nav-links li a .links_name { + color: #fff; + font-size: 15px; + font-weight: 400; + white-space: nowrap; +} + +.sidebar .nav-links .log_out { + position: absolute; + bottom: 0; + width: 100%; +} + +.home-section { + position: relative; + background: #f6f7fc; + min-height: 100vh; + width: calc(100% - 240px); + left: 240px; + transition: all 0.5s ease; +} + +.sidebar.active~.home-section { + width: calc(100% - 60px); + left: 60px; +} + +.home-section nav { + display: flex; + justify-content: space-between; + height: 80px; + background: #fff; + display: flex; + align-items: center; + position: fixed; + width: calc(100% - 240px); + left: 240px; + z-index: 100; + padding: 0 20px; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); + transition: all 0.5s ease; +} + +.sidebar.active~.home-section nav { + left: 60px; + width: calc(100% - 60px); +} + +.home-section nav .sidebar-button { + display: flex; + align-items: center; + font-size: 24px; + font-weight: 500; +} + +nav .sidebar-button i { + font-size: 35px; + margin-right: 10px; + cursor: pointer; +} + +.home-section nav .search-box { + position: relative; + height: 50px; + max-width: 550px; + width: 100%; + margin: 0 20px; +} + +nav .search-box input { + height: 100%; + width: 100%; + outline: none; + background: #F5F6FA; + border: 2px solid #EFEEF1; + border-radius: 6px; + font-size: 18px; + padding: 0 15px; +} + +nav .search-box .bx-search { + position: absolute; + height: 40px; + width: 40px; + background: #fb771a; + right: 5px; + top: 50%; + transform: translateY(-50%); + border-radius: 4px; + line-height: 40px; + text-align: center; + color: #fff; + font-size: 22px; + transition: all 0.4 ease; +} + +.home-section nav .profile-details { + display: flex; + align-items: center; + background: #F5F6FA; + border: 2px solid #EFEEF1; + border-radius: 6px; + height: 50px; + min-width: 190px; + padding: 0 15px 0 2px; +} + +nav .profile-details img { + height: 40px; + width: 40px; + border-radius: 6px; + object-fit: cover; +} + +nav .profile-details .admin_name { + font-size: 15px; + font-weight: 500; + color: #333; + margin: 0 10px; + white-space: nowrap; +} + +nav .profile-details i { + font-size: 25px; + color: #333; +} + +.home-section .home-content { + position: relative; + padding-top: 104px; +} + +.home-content .overview-boxes { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + padding: 0 20px; + margin-bottom: 26px; +} + +.overview-boxes .box { + display: flex; + align-items: center; + justify-content: center; + width: calc(100% / 4 - 15px); + background: #fff; + padding: 15px 14px; + border-radius: 12px; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); +} + +.overview-boxes .box-topic { + font-size: 20px; + font-weight: 500; +} + +.home-content .box .number { + display: inline-block; + font-size: 35px; + margin-top: -6px; + font-weight: 500; +} + +.home-content .box .indicator { + display: flex; + align-items: center; +} + +.home-content .box .indicator i { + height: 20px; + width: 20px; + background: #8FDACB; + line-height: 20px; + text-align: center; + border-radius: 50%; + color: #fff; + font-size: 20px; + margin-right: 5px; +} + +.box .indicator i.down { + background: #e87d88; +} + +.home-content .box .indicator .text { + font-size: 12px; +} + +.home-content .box .cart { + display: inline-block; + font-size: 32px; + height: 50px; + width: 50px; + background: #cce5ff; + line-height: 50px; + text-align: center; + color: #66b0ff; + border-radius: 12px; + margin: -15px 0 0 6px; +} + +.home-content .box .cart.two { + color: #2BD47D; + background: #C0F2D8; +} + +.home-content .box .cart.three { + color: #ffc233; + background: #ffe8b3; +} + +.home-content .box .cart.four { + color: #e05260; + background: #f7d4d7; +} + +.home-content .total-order { + font-size: 20px; + font-weight: 500; +} + +.home-content .sales-boxes { + display: flex; + justify-content: space-between; + padding: 0 20px; +} + +/* left box */ +.home-content .sales-boxes .recent-sales { + width: 65%; + background: #fff; + padding: 20px 30px; + margin: 0; + border-radius: 12px; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); + overflow: hidden !important; +} + +.home-content .sales-boxes .sales-details { + display: flex; + align-items: center; + justify-content: space-between; +} + +.sales-boxes .box .title { + font-size: 24px; + font-weight: 500; + /* margin-bottom: 10px; */ +} + +.sales-boxes .sales-details li.topic { + font-size: 20px; + font-weight: 500; +} + +.sales-boxes .sales-details li { + list-style: none; + margin: 8px 0; +} + +.sales-boxes .sales-details li a { + font-size: 18px; + color: #333; + font-size: 400; + text-decoration: none; +} + +.sales-boxes .box .button { + width: 100%; + display: flex; + justify-content: flex-end; +} + +.sales-boxes .box .button a { + color: #fff; + background: #0A2558; + padding: 4px 12px; + font-size: 15px; + font-weight: 400; + border-radius: 4px; + text-decoration: none; + transition: all 0.3s ease; +} + +.sales-boxes .box .button a:hover { + background: #0d3073; +} + +/* Right box */ +.home-content .sales-boxes .top-sales { + width: 35%; + background: #fff; + padding: 20px 30px; + margin: 0 0 0 20px; + border-radius: 12px; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); + overflow: hidden !important; +} + +.sales-boxes .top-sales li { + display: flex; + align-items: center; + justify-content: space-between; + margin: 10px 0; +} + +.sales-boxes .top-sales li a img { + height: 40px; + width: 40px; + object-fit: cover; + border-radius: 12px; + margin-right: 10px; + background: #333; +} + +.sales-boxes .top-sales li a { + display: flex; + align-items: center; + text-decoration: none; +} + +.sales-boxes .top-sales li .product, +.price { + font-size: 17px; + font-weight: 400; + color: #333; +} + +/***** Responsive Media Query *****/ +@media (max-width: 1240px) { + .sidebar { + width: 60px; + } + + .sidebar.active { + width: 220px; + } + + .home-section { + width: calc(100% - 60px); + left: 60px; + } + + .sidebar.active~.home-section { + left: 220px; + width: calc(100% - 220px); + overflow: hidden; + } + + .home-section nav { + width: calc(100% - 60px); + left: 60px; + } + + .sidebar.active~.home-section nav { + width: calc(100% - 220px); + left: 220px; + } +} + +@media (max-width: 1150px) { + .home-content .sales-boxes { + flex-direction: column; + } + + .home-content .sales-boxes .box { + width: 100%; + margin-bottom: 30px; + } + + .home-content .sales-boxes .top-sales { + margin: 0; + } + +} + +@media (max-width: 1000px) { + .overview-boxes .box { + width: calc(100% / 2 - 15px); + margin-bottom: 15px; + } +} + +@media (max-width: 700px) { + + nav .sidebar-button .dashboard, + nav .profile-details .admin_name, + nav .profile-details i { + display: none; + } + + .home-section nav .profile-details { + height: 50px; + min-width: 40px; + } + + .home-content .sales-boxes .recent-sales { + overflow: auto !important; + } + + .home-content .sales-boxes .top-sales { + overflow: auto !important; + } +} + +@media (max-width: 550px) { + .overview-boxes .box { + width: 100%; + margin-bottom: 15px; + } + + .sidebar.active~.home-section nav .profile-details { + display: none; + } +} + +@media (max-width: 400px) { + .sidebar { + width: 0; + } + + .sidebar.active { + width: 60px; + } + + .home-section { + width: 100%; + left: 0; + } + + .sidebar.active~.home-section { + left: 60px; + width: calc(100% - 60px); + } + + .home-section nav { + width: 100%; + left: 0; + } + + .sidebar.active~.home-section nav { + left: 60px; + width: calc(100% - 60px); + } +} \ No newline at end of file diff --git a/php_server_environment/images/addidas.jpg b/php_server_environment/images/addidas.jpg new file mode 100644 index 0000000..c34d6e9 Binary files /dev/null and b/php_server_environment/images/addidas.jpg differ diff --git a/php_server_environment/images/bag.jpg b/php_server_environment/images/bag.jpg new file mode 100644 index 0000000..8df184e Binary files /dev/null and b/php_server_environment/images/bag.jpg differ diff --git a/php_server_environment/images/blueBag.jpg b/php_server_environment/images/blueBag.jpg new file mode 100644 index 0000000..6d56aee Binary files /dev/null and b/php_server_environment/images/blueBag.jpg differ diff --git a/php_server_environment/images/jeans.jpg b/php_server_environment/images/jeans.jpg new file mode 100644 index 0000000..f0bf8ad Binary files /dev/null and b/php_server_environment/images/jeans.jpg differ diff --git a/php_server_environment/images/logIn.png b/php_server_environment/images/logIn.png new file mode 100644 index 0000000..3bedef4 Binary files /dev/null and b/php_server_environment/images/logIn.png differ diff --git a/php_server_environment/images/nike.jpg b/php_server_environment/images/nike.jpg new file mode 100644 index 0000000..18ab8f4 Binary files /dev/null and b/php_server_environment/images/nike.jpg differ diff --git a/php_server_environment/images/profile.jpg b/php_server_environment/images/profile.jpg new file mode 100644 index 0000000..2d5fa4e Binary files /dev/null and b/php_server_environment/images/profile.jpg differ diff --git a/php_server_environment/images/scarves.jpg b/php_server_environment/images/scarves.jpg new file mode 100644 index 0000000..606429c Binary files /dev/null and b/php_server_environment/images/scarves.jpg differ diff --git a/php_server_environment/images/shirt.jpg b/php_server_environment/images/shirt.jpg new file mode 100644 index 0000000..3c0a970 Binary files /dev/null and b/php_server_environment/images/shirt.jpg differ diff --git a/php_server_environment/images/sunglasses.jpg b/php_server_environment/images/sunglasses.jpg new file mode 100644 index 0000000..3866f70 Binary files /dev/null and b/php_server_environment/images/sunglasses.jpg differ diff --git a/php_server_environment/index.php b/php_server_environment/index.php new file mode 100644 index 0000000..c7e9f8f --- /dev/null +++ b/php_server_environment/index.php @@ -0,0 +1,52 @@ + + + + + + + + + + + + PHP Server Environment | Joe Alt + + + +
+
+
"> + Log Out succeeded! +
+

Log In

+

Lorem ipsum dolor sit amet elit. Sapiente sit aut eos consectetur adipisicing.

+
+ + + +
+
"> + Invalid email or password +
+
+
+
+ Background +
+ + + \ No newline at end of file diff --git a/php_server_environment/panel.php b/php_server_environment/panel.php new file mode 100644 index 0000000..4d25d29 --- /dev/null +++ b/php_server_environment/panel.php @@ -0,0 +1,266 @@ + + + + + + + + + + + + + PHP Server Environment | Joe Alt + + + +
+
+ + CodingLab +
+ +
+
+ + +
+
+
+
+
Total Order
+
40,876
+
+ + Up from yesterday +
+
+ +
+
+
+
Total Sales
+
38,876
+
+ + Up from yesterday +
+
+ +
+
+
+
Total Profit
+
$12,876
+
+ + Up from yesterday +
+
+ +
+
+
+
Total Return
+
11,086
+
+ + Down since last day +
+
+ +
+
+ +
+
+
Recent Sales
+
+
    +
  • Customer
    • +
  • Alex Doe
    • +
  • David Mart
    • +
  • Roe Parter
    • +
  • Diana Penty
    • +
  • Martin Paw
    • +
  • Doe Alex
    • +
  • Aiana Lexa
    • +
  • Rexel Mags
    • +
  • Tiana Loths
    • +
+
    +
  • Sales
    • +
  • Delivered
    • +
  • Pending
    • +
  • Returned
    • +
  • Delivered
    • +
  • Pending
    • +
  • Returned
    • +
  • Delivered
    • +
  • Pending
    • +
  • Delivered
    • +
+
    +
  • Total
    • +
  • $204.98
    • +
  • $24.55
    • +
  • $25.88
    • +
  • $170.66
    • +
  • $56.56
    • +
  • $44.95
    • +
  • $67.33
    • +
  • $23.53
    • +
  • $46.52
    • +
+
+
+
+
Top Seling Product
+ +
+
+
+
+ + + \ No newline at end of file diff --git a/php_server_environment/validate.php b/php_server_environment/validate.php new file mode 100644 index 0000000..5d938dd --- /dev/null +++ b/php_server_environment/validate.php @@ -0,0 +1,12 @@ + + + + + + + + Server Variables php + + + + ⮜Go Back +

Server Variables php

+ + ', print_r($_SERVER), ''; + + ?> + +

"index.php" : this will be the login page with user and password fields and a login button. This fields must be in a form pointing its action to the validation script. In case you log in or are already logged in, you must be automatically redirected to the panel. + "validate.php": All login validations must be done in this file receiving the form data by the POST method and this should redirect the user depending on whether the login is correct or not. You can use a simple string comparison or anything you want for deciding if the login is correct or not. + "panel.php": this file should indicate on the screen whether the user who is trying to access is logged in or not, in case the user is logged, it must also contain a button to log out, destroy the current session and then redirect you to the "index.php" file. If not logged you must alert the user that this is a private section. + "close_session.php": This is the last file which will be responsible for destroying the session and redirecting to the login page. +

+ + + + \ No newline at end of file diff --git a/session_variables.php b/session_variables.php new file mode 100644 index 0000000..8415ba4 --- /dev/null +++ b/session_variables.php @@ -0,0 +1,32 @@ + + + + + + + + Session Variables php + + + + ⮜Go Back +

Session Variables php

+ + '; + print_r($_SESSION); + echo ''; + ?> + + + + + + \ No newline at end of file