diff --git a/client/css/cart.css b/client/css/cart.css new file mode 100644 index 0000000000000000000000000000000000000000..fb1e4b53d146bae71a5d4760f992888df3b66426 --- /dev/null +++ b/client/css/cart.css @@ -0,0 +1,88 @@ +@import url('https://fonts.googleapis.com/css?family=Inter'); + +*{ + margin: 0; + padding: 0; + font-family: Inter; + box-sizing: border-box; + transition: 0.5; +} + +.container{ + position: relative; + max-width: 100%; + height: 100vh; + mix-blend-mode: multiply; + background-position: center; + background-size: cover; + display: block; + place-items: center; +} + +.cart-group{ + padding-top: 10%; + display: block; + /* background-color: red; */ +} + +.cart-group h1{ + margin-bottom: 10px; + margin-left: 5%; + font-size: 30px; +} + +.cart-list{ + /* border-style: solid; */ + border-radius: 10px; + margin-left: 5%; + margin-right: 5%; + display: block; +} +.item{ + margin: 15px; + border-radius: 10px; + background-color: #eaeaea; + padding: 1%; + display: flex; +} +.item-picture-group{ + display:inline-block; + min-width: 20%; + min-height: 15vw; + background-color: azure; + border-radius: 10px; + margin: 10px; +} +.item-text-fields{ + display:inline-block; +} +/* .item-picture{} */ +.item-label{ + display: block; + margin: 10px; +} + +.button-field { + display:flex; + padding: 10px; + justify-content: right; +} + +#checkout-button { + cursor: pointer; + color: white; + background-color: rgb(137, 62, 137); + min-width: 25%; + height: 10vh; + font-size: 20px; + border-radius : 10px; + border-color: transparent; + margin-right: 15px; + margin-bottom: 15px; +} + +@media screen and ((max-width: 400px) or (max-height: 750px)) { + .cart-group{ + height: 750px; + } +} \ No newline at end of file diff --git a/client/css/make-sale.css b/client/css/make-sale.css index 08924ae0b53fa5d6a94a7120f2e407b5357a2fb5..532d5bd6ffe3061d5353f0bbe1e770bd876704cd 100644 --- a/client/css/make-sale.css +++ b/client/css/make-sale.css @@ -18,13 +18,14 @@ background-size: cover; position: relative; place-items: center; - display: grid; + display: block; } .saleform-group { position: relative; /* width: 31%; height: 31%; */ + margin-top: 5vh; min-width: 300px; flex-shrink: 0; display: grid; diff --git a/client/css/navbar.css b/client/css/navbar.css index 6407d4f44fe9e75831a8870d2533f0a596776369..cdbc2e7be1e26b759c07f4c871c1e47c1073fb4d 100644 --- a/client/css/navbar.css +++ b/client/css/navbar.css @@ -1,30 +1,33 @@ - -img{ - float: left; - margin: 10px; - min-width: 100px; - min-height: 50px; -} - -.tabgroup{ +.navbar-container { + display: flex; + justify-content: space-evenly; background-color: #AA1E1E; - color: #eaeaea; - float: left; + border: none; outline: none; + color: #eaeaea; + /* float: left; */ font-size: 17px; width: 100%; height: 8%; } +img{ + /* float: left; */ + margin: 5px; + min-width: 100px; + min-height: 50px; +} + + .searchbar { - float: left; + /* float: left; */ padding: 6px; background: linear-gradient(rgba(255,255,255,0.67), rgba(255,255,255,0.67)); margin-top: 15px; margin-left: 10%; border-radius: 10px; display: flex; - align-items: center; + /* align-items: center; */ max-height: 35px; transition: max-height 0.5s; overflow: hidden; @@ -33,32 +36,28 @@ img{ .searchbar input{ + background: transparent; background-color: transparent; border: none; + outline: none; font-size: 20px; margin-left: 10px; width: 100%; -} - -input{ - width: 100%; - background: transparent; border: 0; - outline: 0; -} +} .tabexpand{ - background-color: #AA1E1E; + color: #eaeaea; float: left; border: none; - outline: none; + text-decoration: none; text-align: center; cursor: pointer; - font-size: 30px; - padding: 14px 14px; + font-size: 5vh; + padding: 10px 14px; width: 5%; height: 100%; } @@ -67,73 +66,74 @@ input{ background-color: transparent; color: #eaeaea; border: none; - outline: none; + cursor: pointer; font-size: 17px; - padding: 17px 0px; + /* padding: 17px 0px; */ width: 10%; text-align: center; border-radius: 10px; height: 100%; } -.tabbutton{ - background-color: #AA1E1E; +/* .tabbutton{ + color: #eaeaea; float: left; border: none; - outline: none; + cursor: pointer; font-size: 17px; padding: 14px 16px; width: 13%; -} +} */ .tabright{ - background-color: #AA1E1E; + color: #eaeaea; float: right; border: none; - outline: none; + text-decoration: none; text-align: center; cursor: pointer; - font-size: 30px; + font-size: 3vh; padding: 17px 14px; width: 13%; - height: 100%; + /* height: 100%; */ } -.tabaccount{ - background-color: #AA1E1E; +/* .tabaccount{ + color: #eaeaea; float: right; border: none; - outline: none; + cursor: pointer; text-align: center; font-size: 30px; padding: 14px 16px; width: 5%; margin-left: 50px; -} +} */ @media screen and (max-width: 850px){ .tabaccount, .tabright{ - font-size: 8px; + font-size: 3vh; width: 17%; height: 100%; } .tabexpand{ - font-size: 15px; + font-size: 3vh; width: 10%; } .searchbar{ margin-left: 5%; width: 50%; - margin-top: 7px; + margin-top: 3.5px; + margin-bottom: 3.5px; } img{ display: none; @@ -142,10 +142,16 @@ input{ @media screen and (max-width: 1350px) and (min-width: 851px) { .tabaccount, .tabright{ - font-size: 25px; + font-size: 3.5vh; } .tabexpand{ - font-size: 25px; + font-size: 3.5vh; + } + .searchbar{ + margin: 5px; + } + img{ + margin: 5px; } } diff --git a/client/js/navbar.js b/client/js/navbar.js index de196a8272b85988751b12b9d79d977488e0b2dd..2f6ce98160fb70cd0351bfe156f19bd2797cf915 100644 --- a/client/js/navbar.js +++ b/client/js/navbar.js @@ -1,22 +1,24 @@ addnavbar = () => { return document.getElementById("tabgroup").innerHTML =` - <a class="tabexpand" href="#"> - <i class="fa-solid fa-bars"></i> - </a> - <img src="../image/logoregis.svg" alt="icon" width="10%" height="5%"> - <div class="searchbar"> - <input id="Searchinput" type="text" placeholder="Search..." value="" onkeypress=""> - <button class="search" onclick=""> - <i class="fa-solid fa-magnifying-glass"></i> - </button> + <div class="navbar-container"> + <a class="tabexpand" href="#"> + <i class="fa-solid fa-bars"></i> + </a> + <img src="../image/logoregis.svg" alt="icon" width="10%" height="5%"> + <div class="searchbar"> + <input id="Searchinput" type="text" placeholder="Search..." value="" onkeypress=""> + <button class="search" onclick=""> + <i class="fa-solid fa-magnifying-glass"></i> + </button> + </div> + <a class="tabright" href="#"> + <i class="fa-solid fa-cart-shopping"></i> + Cart + </a> + <a class="tabright" href="../pages/catalog.php"> + <i class="fa-solid fa-clipboard-list"></i> + Catalog + </a> </div> - <a class="tabright" href="#"> - <i class="fa-solid fa-cart-shopping"></i> - Cart - </a> - <a class="tabright" href="../pages/catalog.php"> - <i class="fa-solid fa-clipboard-list"></i> - Catalog - </a> ` } \ No newline at end of file diff --git a/client/pages/make-sale.php b/client/pages/make-sale.php index 5cbe3420c09973c1d0feff4c3b0fccacd216de23..2196fe8cc688710b8d73ea644fa12fff48d7177a 100644 --- a/client/pages/make-sale.php +++ b/client/pages/make-sale.php @@ -11,9 +11,9 @@ <body> <div class="container"> - <!-- <div class="tabgroup" id="tabgroup"> + <div class="tabgroup" id="tabgroup"> <script>addnavbar();</script> - </div> --> + </div> <div class="saleform-group"> <h1 id="title">Make A Sale</h1> <form id="saleform"> diff --git a/client/protoype/cart.html b/client/protoype/cart.html new file mode 100644 index 0000000000000000000000000000000000000000..31fff5c543af234d45b7ac20bc043fd313f9de58 --- /dev/null +++ b/client/protoype/cart.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<html> + <head> + <meta name="viewport" content="width=device-width, initial scale=1.0"> + <title>Cart</title> + <link rel="stylesheet" href="../css/cart.css"> + <link rel="stylesheet" href="../css/navbar.css"> + <script src="https://kit.fontawesome.com/8505941c5b.js" crossorigin="anonymous"></script> + <script src="../js/navbar.js"></script> + </head> + <body> + <div class="container"> + <div id="tabgroup"> + <script> + addnavbar(); + </script> + </div> + <div class="cart-group"> + <h1> + Cart + </h1> + <div class="cart-list"> + <div class="item"> + <div class="item-picture-group"> + <image src="#" class="item-picture"></image> + </div> + <div class="item-text-fields"> + <label class="item-label">Name</label> + <label class="item-label">Quantity</label> + <label class="item-label">Price</label> + </div> + </div> + <div class="item"> + <div class="item-picture-group"> + <image src="#" class="item-picture"></image> + </div> + <div class="item-text-fields"> + <label class="item-label">Name</label> + <label class="item-label">Quantity</label> + <label class="item-label">Price</label> + </div> + </div> + <div class="item"> + <div class="item-picture-group"> + <image src="#" class="item-picture"></image> + </div> + <div class="item-text-fields"> + <label class="item-label">Name</label> + <label class="item-label">Quantity</label> + <label class="item-label">Price</label> + </div> + </div> + <!-- contains item divs according to data --> + </div> + <div class="button-field"> + <button id="checkout-button"> + Checkout + </button> + </div> + </div> + </div> + </body> +</html> \ No newline at end of file diff --git a/client/protoype/navbar.html b/client/protoype/navbar.html new file mode 100644 index 0000000000000000000000000000000000000000..db0560a4481b1ab70694a296cd7a4b1f7970217a --- /dev/null +++ b/client/protoype/navbar.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <meta name="viewport" content="width=device-width, initial scale=1.0"> + <link rel="stylesheet" href="../css/navbar.css"> + <script src="https://kit.fontawesome.com/8505941c5b.js" crossorigin="anonymous"></script> + <!-- <script src="../js/navbar.js"></script> --> + </head> + <body> + <div class="navbar-container"> + <a class="tabexpand" href="#"> + <i class="fa-solid fa-bars"></i> + </a> + <img src="../image/logoregis.svg" alt="icon" width="10%" height="5%"> + <div class="searchbar"> + <input id="Searchinput" type="text" placeholder="Search..." value="" onkeypress=""> + <button class="search" onclick=""> + <i class="fa-solid fa-magnifying-glass"></i> + </button> + </div> + <a class="tabright" href="#"> + <i class="fa-solid fa-cart-shopping"></i> + Cart + </a> + <a class="tabright" href="../pages/catalog.php"> + <i class="fa-solid fa-clipboard-list"></i> + Catalog + </a> + </div> + </body> +</html> \ No newline at end of file