From 42d8eab1f00e4f53a835d4843f598543948557d7 Mon Sep 17 00:00:00 2001 From: free ko Date: Sat, 16 Nov 2024 15:46:05 +0200 Subject: [PATCH] new pages, and various edits --- public/assets/css/checkout.css | 334 ++++++++++++++++ public/assets/css/createStore.css | 76 ++++ public/assets/css/nav.css | 101 +++-- public/assets/css/pagination.css | 2 +- public/assets/css/popup.css | 44 +++ public/assets/css/product.css | 4 + public/assets/css/productCard.css | 2 +- public/assets/css/storeCard.css | 6 +- public/assets/css/storePage.css | 174 +++++++++ public/assets/css/styles.css | 77 +++- public/assets/css/tabs.css | 35 ++ public/assets/css/userPage.css | 330 ++++++++++++++++ public/assets/js/expandProductCheckout.js | 10 + public/assets/js/popups.js | 31 ++ public/assets/js/tabs.js | 10 +- public/checkout.html | 380 ++++++++++++++++++ public/createProduct.html | 348 +++++++++++++++++ public/createStore.html | 340 ++++++++++++++++ public/index.html | 174 ++++++++- public/productPage.html | 200 ++++++++-- public/products.html | 174 ++++++++- public/storePage.html | 208 ++++++++-- public/stores.html | 174 ++++++++- public/userPage.html | 456 ++++++++++++++++++++++ 24 files changed, 3542 insertions(+), 148 deletions(-) create mode 100644 public/assets/css/checkout.css create mode 100644 public/assets/css/createStore.css create mode 100644 public/assets/css/storePage.css create mode 100644 public/assets/css/userPage.css create mode 100644 public/assets/js/expandProductCheckout.js create mode 100644 public/assets/js/popups.js create mode 100644 public/checkout.html create mode 100644 public/createProduct.html create mode 100644 public/createStore.html create mode 100644 public/userPage.html diff --git a/public/assets/css/checkout.css b/public/assets/css/checkout.css new file mode 100644 index 0000000..a407478 --- /dev/null +++ b/public/assets/css/checkout.css @@ -0,0 +1,334 @@ +.checkoutMain { + width: 100%; + display: flex; + flex-direction: column; + grid-gap: 15px; +} + +.checkoutMainInside { + width: 100%; + display: flex; + flex-direction: row; + grid-gap: 25px; +} + +@media (max-width: 992px) { + .checkoutMainInside { + flex-direction: column; + } +} + +.checkoutMainInsideSec { + width: 100%; + display: flex; + flex-direction: column; + grid-gap: 15px; +} + +.checkoutMainTop { + width: 100%; + display: flex; + flex-direction: row; + grid-gap: 15px; +} + +.checkoutMainTopTitle { + display: flex; + flex-direction: column; + grid-gap: 5px; +} + +.checkoutMainTopTitleHeading { + font-weight: 700; + color: rgba(0,0,0,0.75); +} + +.checkoutMainInsideSec.checkoutMainInsideSecSide { + min-width: 400px; + max-width: 400px; + position: relative; +} + +@media (max-width: 992px) { + .checkoutMainInsideSec.checkoutMainInsideSecSide { + min-width: auto; + max-width: unset; + width: 100%; + } +} + +.checkoutMainInsideSec.checkoutMainInsideSecBody { +} + +@media (max-width: 992px) { + .checkoutMainInsideSec.checkoutMainInsideSecBody { + order: 2; + } +} + +.checkoutMainInsideSecSideSec { + width: 100%; + display: flex; + flex-direction: column; + grid-gap: 10px; + border-radius: 8px; + padding: 0 10px; +} + +.checkoutMainInsideSecSideSec.checkoutMainInsideSecSideSecAlt { + padding: 10px; + background: white; + box-shadow: 0 0 8px 0 rgb(0,0,0,0.1); +} + +.checkoutMainInsideSecBodyCard { + width: 100%; + border-radius: 8px; + display: flex; + flex-direction: column; + grid-gap: 0px; + overflow: hidden; + box-shadow: 0 0 8px 0 rgb(0,0,0,0.1); + background: white; + padding: 5px; +} + +.checkoutMainInsideSecBodyCardTop { + width: 100%; + display: flex; + flex-direction: row; + grid-gap: 15px; + padding: 10px 15px; +} + +.checkoutMainInsideSecBodyCardBottom { + transition: ease 0.0s; + width: 100%; + display: flex; + flex-direction: row; + grid-gap: 20px; + background: rgba(0,0,0,0.05); + padding: 0px; + height: 0px; + overflow: hidden; + outline: solid 1px rgba(0,0,0,0); + border-radius: 6px; +} + +.checkoutMainInsideSecBodyCardBottom.checkoutMainInsideSecBodyCardBottomActive { + padding: 10px; + height: 100%; + outline: solid 1px rgba(0,0,0,0.1); +} + +.checkoutMainInsideSecBodyCardTopName { + flex-grow: 1; + font-weight: 600; + font-size: 16px; +} + +.checkoutMainInsideSecBodyCardTopSec { + display: flex; + flex-direction: column; + justify-content: center; +} + +.checkoutMainInsideSecBodyCardTopSec.checkoutMainInsideSecBodyCardTopAmount { +} + +.checkoutMainInsideSecBodyCardTopAction { + display: flex; + flex-direction: row; + grid-gap: 5px; +} + +.checkoutMainInsideSecBodyCardTopSec.checkoutMainInsideSecBodyCardTopPrice { + font-weight: 600; + white-space: nowrap; +} + +.checkoutMainInsideSecBodyCardTopNameText { + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; + -webkit-line-clamp: 1; +} + +.inputMain.checkoutMainInsideSecBodyCardTopAmountInput { + max-width: 65px; +} + +.btnMain.checkoutMainInsideSecBodyCardTopActionBtnView { + padding: 10px; + background: rgba(0,0,0,0.1); + color: rgba(0,0,0,0.35); +} + +.btnMain.checkoutMainInsideSecBodyCardTopActionBtnTrash { + padding: 10px; + background: rgba(0,0,0,0.1); + color: rgba(0,0,0,0.35); +} + +.btnMain.checkoutMainInsideSecBodyCardTopActionBtnTrash:hover { + background: tomato; + color: rgb(255,255,255); +} + +.checkoutMainInsideSecBodyCardBottomMedia { + width: 100%; + max-width: 200px; + min-width: 200px; +} + +.checkoutMainInsideSecBodyCardBottomMediaInside { + padding-top: 50%; + background: rgba(0,0,0,0.1); + border-radius: 6px; + box-shadow: 0 0 4px 0 rgb(0,0,0,0.1); + position: relative; + overflow: hidden; +} + +.checkoutMainInsideSecBodyCardBottomMediaInsideImg { + object-fit: cover; + width: 100%; + height: 100%; + z-index: 1; + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; +} + +.checkoutMainInsideSecBodyCardBottomDetails { + flex-grow: 1; + display: flex; + flex-direction: column; + grid-gap: 5px; +} + +.checkoutMainInsideSecBodyCardBottomDetailsSummary { + padding: 0 10px; +} + +.checkoutMainInsideSecBodyCardBottomDetailsSummaryText { + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; + -webkit-line-clamp: 8; +} + +.checkoutMainInsideSecSideSecInfo { + display: flex; + flex-direction: column; + grid-gap: 10px; + justify-content: end; +} + +.checkoutMainInsideSecSideSecInfoSec { + width: 100%; + display: flex; + flex-direction: row; + grid-gap: 10px; + justify-content: space-between; + padding: 5px 10px; + border-radius: 6px; + background: rgba(0,0,0,0.05); +} + +.checkoutMainInsideSecSideSecInfoSecText1 { + font-weight: 700; + color: rgba(0,0,0,0.65); +} + +.checkoutMainInsideSecSideSecInfoSecText2 { + color: rgba(0,0,0,0.75); +} + +.checkoutMainInsideSecSideSecInfoDivider { + width: 100%; + height: 1px; + background: rgba(0,0,0,0.1); +} + +.checkoutMainInsideSecSideSecInfoActions { + display: flex; + flex-direction: row; + grid-gap: 5px; +} + +.btnMain.checkoutMainInsideSecSideSecInfoActionsBtn { + padding: 5px 10px; + width: 100%; +} + +.btnMain.checkoutMainInsideSecSideSecInfoActionsBtnAlt { + padding: 5px 10px; + background: white; + border: solid 1px rgba(0,0,0,0.1); + color: rgba(0,0,0,0.3); +} + +.checkoutMainInsideSecSideSecWrapper { + width: 100%; + position: sticky; + top: 10px; + display: flex; + flex-direction: column; + grid-gap: 15px; +} + +.checkoutMainInsideSecSideSecNoteText { + font-size: 14px; +} + +.checkoutMainInsideSecBodyCardBottomDetailsStore { + width: 100%; + display: flex; + flex-direction: row; + grid-gap: 10px; + padding: 5px 15px; + border-radius: 6px; + background: white; + border: solid 1px rgba(0,0,0,0.1); + font-weight: 500; +} + +.checkoutMainInsideSecBodyCardBottomDetailsStore:hover { + color: white; + background: #ff9900; + border: solid 1px rgba(0,0,0,0); +} + +.createStoreMainActions { + display: flex; + flex-direction: row; + grid-gap: 25px; + background: white; + padding: 25px; + border-radius: 8px; + box-shadow: 0 0 8px 0 rgb(0,0,0,0.1); + align-items: center; +} + +@media (max-width: 768px) { + .createStoreMainActions { + flex-direction: column; + } +} + +.createStoreMainActionsText { + flex-grow: 1; +} + +.btnMain.createStoreMainActionsBtn { +} + +@media (max-width: 768px) { + .btnMain.createStoreMainActionsBtn { + width: 100%; + } +} + diff --git a/public/assets/css/createStore.css b/public/assets/css/createStore.css new file mode 100644 index 0000000..4c69fde --- /dev/null +++ b/public/assets/css/createStore.css @@ -0,0 +1,76 @@ +.createStoreMain { + width: 100%; + display: flex; + flex-direction: column; + grid-gap: 15px; +} + +.createStoreMainSec { + display: flex; + flex-direction: column; + grid-gap: 25px; + background: white; + padding: 25px; + border-radius: 8px; + box-shadow: 0 0 8px 0 rgb(0,0,0,0.1); +} + +.createStoreMainSec.createStoreMainSecAlt { + display: grid; + grid-template-columns: 1fr 1fr; +} + +@media (max-width: 768px) { + .createStoreMainSec.createStoreMainSecAlt { + grid-template-columns: 1fr; + } +} + +.createStoreMainTitle { + display: flex; + flex-direction: row; + grid-gap: 15px; + justify-content: space-between; +} + +.createStoreMainTitleInfo { + display: flex; + flex-direction: column; + grid-gap: 10px; +} + +.createStoreMainSecBox { + width: 100%; + display: flex; + flex-direction: column; + grid-gap: 10px; + min-width: 50%; +} + +.createStoreMainSecBox.createStoreMainSecBoxFull { + grid-column-start: 1; + grid-column-end: 3; +} + +@media (max-width: 768px) { + .createStoreMainSecBox.createStoreMainSecBoxFull { + grid-column-start: 1; + grid-column-end: 1; + } +} + +.inputMainWrapper.createStoreMainSecBoxInside { + height: 100%; + justify-content: space-between; +} + +.btnMain.createStoreMainSecBoxInsideBtn { + align-self: end; + font-size: 16px; + margin-top: 5px; + background: white; + color: rgba(0,0,0,0.3); + border: solid 1px rgba(0,0,0,0.1); + font-weight: 700; +} + diff --git a/public/assets/css/nav.css b/public/assets/css/nav.css index 85cf95c..b75a82c 100644 --- a/public/assets/css/nav.css +++ b/public/assets/css/nav.css @@ -3,7 +3,7 @@ display: flex; flex-direction: column; align-items: center; - padding: 15px 0; + /*padding: 15px 0;*/ background: white; box-shadow: 0 0 8px 0 rgb(0,0,0,0.1); border-bottom: solid 1px rgba(0,0,0,0.1); @@ -11,6 +11,7 @@ @media (max-width: 992px) { .TopMain { + display: none; padding: 15px 0 5px 0; border-bottom: solid 1px rgba(255,255,255,0.05); } @@ -19,17 +20,14 @@ .navMain { width: 100%; display: grid; - grid-template-columns: 0.5fr 1.5fr 0.5fr; + grid-template-columns: 0.65fr 1.35fr; grid-gap: 25px; + padding: 8px 0px; } -@media (max-width: 992px) { - .navMain { - width: 100%; - display: grid; - grid-template-columns: 2fr 0.75fr 0.25fr; - grid-gap: 10px; - } +.navMain.navMainAlt { + grid-template-columns: 1fr; + padding: 5px 0; } .navMainSec { @@ -39,12 +37,6 @@ flex-direction: row; } -@media (max-width: 992px) { - .navMainSec { - justify-content: center; - } -} - .navMainSecLogo { transition: ease 0.4s; display: flex; @@ -97,22 +89,23 @@ flex-direction: row; grid-gap: 20px; align-items: center; - justify-content: space-around; + justify-content: center; + /*justify-content: space-around;*/ } @media (max-width: 992px) { .navMainSecLinks { - overflow-x: scroll; - align-items: start; - justify-content: start; + flex-direction: column; } } .navMainSecLinksLink { - font-size: 20px; - padding: 10px 15px; + font-size: 18px; + padding: 8px 15px; white-space: nowrap; font-weight: 600; + width: 100%; + text-align: center; } .navMainSecLinksLink:hover { @@ -123,6 +116,7 @@ @media (max-width: 992px) { .navMainSecLinksLink { padding: 15px 10px; + font-size: 18px; } } @@ -136,17 +130,23 @@ opacity: 0.5; } +@media (max-width: 992px) { + .navMainSecLinksLinkWrapper { + width: 100%; + } +} + .navMainSecLinksLinkWrapper:hover { - transition: ease 0.2s; opacity: 1; } .navMainSecLinksSocial { display: flex; - flex-direction: column; - justify-content: center; - align-items: end; + flex-direction: row; + justify-content: end; + align-items: center; flex-grow: 1; + grid-gap: 10px; } @media (max-width: 992px) { @@ -163,6 +163,8 @@ flex-direction: column; justify-content: center; align-items: center; + font-size: 24px; + color: rgba(0,0,0,0.5); } @media (max-width: 992px) { @@ -185,11 +187,8 @@ opacity: 0; } -@media (max-width: 992px) { - .navMainSec.navMainSecFirst { - grid-column-start: 1; - grid-column-end: 4; - } +.navMainSec.navMainSecMid { + width: 100%; } @media (max-width: 992px) { @@ -199,3 +198,45 @@ } } +.TopMain.TopMainMobile { + display: none; + padding: 10px 0; +} + +@media (max-width: 992px) { + .TopMain.TopMainMobile { + display: flex; + } +} + +.navMain.navMainMobile { + display: flex; + flex-direction: row; +} + +.navMainSec.navMainSecMobile { + width: unset; + flex-grow: unset; +} + +.btnMain.navMainSecLinksSocialBurger { + padding: 10px 20px; + font-size: 24px; + border: solid 1px rgba(0,0,0,0.1); + background: white; + color: rgba(0,0,0,0.5); +} + +.btnMain.navMainSecLinksSocialBtn { + padding: 8px 15px; +} + +.navMainWrapper { + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + border-bottom: solid 1px rgba(0,0,0,0.1); +} + diff --git a/public/assets/css/pagination.css b/public/assets/css/pagination.css index 83c1bdf..52b65b8 100644 --- a/public/assets/css/pagination.css +++ b/public/assets/css/pagination.css @@ -7,7 +7,7 @@ } .paginationMainInside { - width: 100%; + width: auto; max-width: 500px; display: flex; flex-direction: row; diff --git a/public/assets/css/popup.css b/public/assets/css/popup.css index 755afcb..a4e8fb1 100644 --- a/public/assets/css/popup.css +++ b/public/assets/css/popup.css @@ -12,6 +12,7 @@ justify-content: start; align-items: center; padding: 25px; + overflow: auto; } @media (max-width: 576px) { @@ -74,6 +75,9 @@ } .popupMainSecInsideBoxBottom { + display: flex; + flex-direction: row; + grid-gap: 10px; } .popupMainSecInsideBoxTopTitle { @@ -97,3 +101,43 @@ grid-gap: 15px; } +.popupMainSecInsideBoxMidStoreProfileDescription { + width: 100%; + display: flex; + flex-direction: column; + grid-gap: 10px; +} + +.popupMainSecInsideBoxMidNavigation { + display: flex; + flex-direction: column; + grid-gap: 10px; +} + +.popupMainSecInsideBoxBottomActions { + flex-grow: 1; + display: flex; + flex-direction: row; + grid-gap: 10px; +} + +.btnMain.popupMainSecInsideBoxBottomActionsBtn { + flex-grow: 1; + grid-gap: 10px; +} + +.popupMainSecInsideBoxMidLoginRegister { +} + +.tabsMainTopElement.popupMainSecInsideBoxMidLoginRegisterNostrTab { + max-width: 75px; +} + +.tabsMainTopElement.popupMainSecInsideBoxMidLoginRegisterNostrTab > * { + filter: brightness(0.75) contrast(100%); +} + +.tabsMainTopElement.popupMainSecInsideBoxMidLoginRegisterNostrTab:hover > * { + filter: sepia(100%) saturate(10000%) hue-rotate(-45deg); +} + diff --git a/public/assets/css/product.css b/public/assets/css/product.css index 4c4f706..72dba74 100644 --- a/public/assets/css/product.css +++ b/public/assets/css/product.css @@ -210,6 +210,10 @@ } .productMainSecSideSecText { + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; + -webkit-line-clamp: 8; } .btnMain.productMainSecSideSecBtn { diff --git a/public/assets/css/productCard.css b/public/assets/css/productCard.css index 4bff2aa..2d6f607 100644 --- a/public/assets/css/productCard.css +++ b/public/assets/css/productCard.css @@ -50,7 +50,7 @@ .productCardMainInsideBot { display: flex; flex-direction: row; - grid-gap: 10px; + grid-gap: 5px; } .btnMain.productCardMainInsideBotBtn { diff --git a/public/assets/css/storeCard.css b/public/assets/css/storeCard.css index 1777b5b..8cb8823 100644 --- a/public/assets/css/storeCard.css +++ b/public/assets/css/storeCard.css @@ -41,7 +41,7 @@ .storeCardMainInsideBot { display: flex; flex-direction: row; - grid-gap: 10px; + grid-gap: 5px; } .btnMain.storeCardMainInsideBotBtn { @@ -277,3 +277,7 @@ box-shadow: 0 0 6px 0 rgba(0,0,0,0.5); } +.btnMain.storeCardMainInsideBotBtn.storeCardMainInsideBotBtnAlt { + flex-grow: 0; +} + diff --git a/public/assets/css/storePage.css b/public/assets/css/storePage.css new file mode 100644 index 0000000..f1b3f54 --- /dev/null +++ b/public/assets/css/storePage.css @@ -0,0 +1,174 @@ +.storeMain { + display: flex; + flex-direction: column; + grid-gap: 0px; + align-items: center; +} + +.storeMainTop { + width: 100%; + display: flex; + flex-direction: column; + position: relative; + padding-top: 35%; + border-radius: 8px; + background: rgba(0,0,0,0.05); + overflow: hidden; + box-shadow: 0 0 4px 0 rgb(0,0,0,0.5); + align-items: center; +} + +.storeMainMid { + display: flex; + flex-direction: column; + grid-gap: 25px; + justify-content: center; + align-items: center; + padding: 0 5%; +} + +.storeMainMidInside { + width: 100%; + display: grid; + grid-template-columns: 1fr 1fr; + grid-gap: 25px; + margin-top: -50px; + border-radius: 8px; + padding: 10px; + background: rgba(255,255,255,0.85); + z-index: 1; + backdrop-filter: blur(10px); + box-shadow: 0 0 4px 0 rgb(0,0,0,0.2); + flex-wrap: wrap; +} + +@media (max-width: 992px) { + .storeMainMidInside { + grid-template-columns: 1fr; + } +} + +.storeMainTopImg { + object-fit: cover; + width: 100%; + height: 100%; + z-index: 1; + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; +} + +.storeMainMidInsideSec { + display: flex; + flex-direction: row; + grid-gap: 10px; +} + +.storeMainMidInsideSec.storeMainMidInsideSecAlt { + flex-direction: column; +} + +.storeMainMidInsideSecProfilePic { + height: 125px; + width: 125px; + min-height: 125px; + min-width: 125px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background: rgba(0,0,0,0.1); + border-radius: 6px; + position: relative; + overflow: hidden; + box-shadow: 0 0 6px 0 rgb(0,0,0,0.25); + border: solid 4px white; +} + +.storeMainMidInsideSecProfileDetails { + display: flex; + flex-direction: column; + grid-gap: 5px; + justify-content: space-between; +} + +.storeMainMidInsideSecProfilePicImg { + object-fit: cover; + width: 100%; + height: 100%; + z-index: 1; + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; +} + +.storeMainMidInsideSecProfileDetailsName { + font-weight: 600; + font-size: 21px; + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; + -webkit-line-clamp: 1; +} + +.storeMainMidInsideSecProfileDetailsBio { + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; + -webkit-line-clamp: 2; +} + +.storeMainMidInsideSecProfilePop { + justify-self: center; + align-self: end; + padding: 5px 10px; + border-radius: 4px; +} + +.storeMainMidInsideSecUser { + width: 100%; + display: flex; + flex-direction: row; + justify-content: space-between; + grid-gap: 10px; + background: white; + border-radius: 5px; + padding: 5px 5px 5px 15px; + border: solid 1px rgba(0,0,0,0.15); + align-items: center; + flex-wrap: wrap; +} + +.btnMain.storeMainMidInsideSecUserBtn { + padding: 5px 15px; + flex-grow: 1; + background: rgba(0,0,0,0.1); + color: rgba(0,0,0,0.5); +} + +.storeMainMidInsideSecUserText { + display: flex; + grid-gap: 10px; + flex-wrap: wrap; + flex-grow: 1; +} + +.storeMainMidInsideSecUserTextLink { + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; + -webkit-line-clamp: 1; + flex-grow: 1; + max-width: 300px; + font-weight: 500; +} + +.btnMain.storeMainMidInsideSecUserBtn.storeMainMidInsideSecUserBtnActive { + background: rgb(255,153,0); + color: white; +} + diff --git a/public/assets/css/styles.css b/public/assets/css/styles.css index cb47bf8..502d2f7 100644 --- a/public/assets/css/styles.css +++ b/public/assets/css/styles.css @@ -127,7 +127,7 @@ a:hover { flex-direction: row; justify-content: center; align-items: center; - grid-gap: 5px; + grid-gap: 10px; border: solid 1px rgba(0,0,0,0); } @@ -319,6 +319,11 @@ a:hover { padding: 5px 15px; grid-gap: 10px; height: 100%; + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; + -webkit-line-clamp: 1; + text-overflow: ellipsis; } .dropdown-menu.dropdownMainMenu { @@ -326,6 +331,7 @@ a:hover { border: solid 1px rgba(0,0,0,0.1); box-shadow: 0 0 8px 0 rgb(0,0,0,0.1); padding: 5px; + width: 100%; } .dropdown-menu.dropdownMainMenu > *:last-child { @@ -369,6 +375,7 @@ a:hover { background: rgba(0,0,0,0.05); color: rgba(0,0,0,0.85); line-height: 1.5; + width: 100%; } .inputMain:focus { @@ -387,7 +394,7 @@ a:hover { padding: 5px 10px; border-radius: 0px; box-shadow: unset; - color: rgba(0,0,0,0.75); + color: rgba(0,0,0,0.5); background: rgba(255,153,0,0); } @@ -415,6 +422,7 @@ a:hover { } .inputMainLabel { + font-size: 16px; } .checkboxWrapperCheck { @@ -467,3 +475,68 @@ a:hover { font-weight: 600; } +.inputMainWrapper { + display: flex; + flex-direction: column; + grid-gap: 5px; +} + +.inputMainBox { + display: flex; + flex-direction: column; + grid-gap: 15px; + flex-wrap: wrap; +} + +.inputMainBoxWrapper { + width: 100%; + display: flex; + flex-direction: column; + grid-gap: 15px; +} + +.inputMainBoxWrapperActions { + display: flex; + flex-direction: row; + grid-gap: 10px; + justify-content: center; + align-items: center; +} + +.btnMain.inputMainBoxWrapperActionsBtn { + flex-grow: 1; +} + +.inputMainNote { + display: flex; + flex-direction: column; + grid-gap: 5px; + border: solid 2px rgba(0,0,0,0.1); + border-radius: 6px; + padding: 10px; + background: rgba(0,0,0,0.1); + color: black; + font-size: 14px; +} + +.inputMainNote.inputMainNoteRed { + border: solid 2px #ffa494; + background: #ef745e; + color: white; +} + +.inputMainNote.inputMainNoteGreen { + border: solid 2px #a5da8b; + background: #80b865; + color: white; +} + +.inputMain.inputMainArea { + transition: height ease 0s; +} + +.inputMainLabelExtra { + font-size: 14px; + color: rgba(0,0,0,0.65); +} + diff --git a/public/assets/css/tabs.css b/public/assets/css/tabs.css index dbe6bde..5039bad 100644 --- a/public/assets/css/tabs.css +++ b/public/assets/css/tabs.css @@ -68,6 +68,41 @@ background: white; border-radius: 8px; padding: 15px; + grid-gap: 15px; box-shadow: 0 0 4px 0 rgb(0,0,0,0.1); } +.tabsMainTopElement.tabsMainTopElementAlt { +} + +.tabsMainTopElement.tabsMainTopElementAlt:hover { + border: solid 1px #ff9900; + color: #ff9900; +} + +.tabsMainTopElement.tabsMainTopElementAlt.tabsMainTopElementActive.tabsMainTopElementActiveAlt { + background: #ff9900; + color: white; +} + +.tabsMainTopElement.tabsMainTopElementAlt.tabsMainTopElementActive.tabsMainTopElementActiveAlt > img { + filter: brightness(1) contrast(100%); +} + +.tabsMainMidElementDivider { + width: 100%; + height: 1px; + background: rgba(0,0,0,0.1); +} + +.tabsMainMidElementDividerWrapper { + display: flex; + flex-direction: row; + grid-gap: 15px; + white-space: nowrap; + color: rgba(0,0,0,0.35); + align-items: center; + font-weight: 700; + font-size: 14px; +} + diff --git a/public/assets/css/userPage.css b/public/assets/css/userPage.css new file mode 100644 index 0000000..e74af60 --- /dev/null +++ b/public/assets/css/userPage.css @@ -0,0 +1,330 @@ +.profileMain { + width: 100%; + display: grid; + grid-template-columns: 0.5fr 1.5fr; + grid-gap: 25px; +} + +@media (max-width: 992px) { + .profileMain { + grid-template-columns: 1fr; + } +} + +.profileMainSec { + width: 100%; + display: flex; + flex-direction: column; + grid-gap: 15px; +} + +.profileMainSec.profileMainSecSide { + position: relative; +} + +.profileMainSec.profileMainSecBody { +} + +.profileMainSecInside { + width: 100%; + display: flex; + flex-direction: column; + grid-gap: 15px; +} + +.profileMainSecInside.profileMainSecInsideSide { + position: sticky; + top: 15px; +} + +.profileMainSecInside.profileMainSecInsideBody { + width: 100%; + display: flex; + flex-direction: column; + grid-gap: 10px; +} + +.profileMainSecInsideSideBox { + width: 100%; + border-radius: 10px; + display: flex; + flex-direction: column; + grid-gap: 10px; + overflow: hidden; +} + +.profileMainSecInsideSideBox.profileMainSecInsideSideBoxAlt { + padding: 15px; + border: solid 1px rgba(0,0,0,0.1); +} + +.profileMainSecInsideSideBox.profileMainSecInsideSideBoxAlt2 { + padding: 15px; + background: white; + box-shadow: 0 0 8px 0 rgb(0,0,0,0.1); +} + +.profileMainSecInsideSideBoxProfile { + width: 100%; + display: flex; + flex-direction: column; + grid-gap: 15px; +} + +.profileMainSecInsideSideBoxProfileMedia { + width: 100%; + display: flex; + flex-direction: column; + grid-gap: 0px; + align-items: center; + justify-content: center; +} + +.profileMainSecInsideSideBoxProfileMediaBanner { + width: 100%; + border-radius: 8px; + padding-top: 25%; + background: rgba(0,0,0,0.1); + position: relative; + overflow: hidden; + display: flex; + flex-direction: column; + box-shadow: 0 0 6px 0 rgb(0,0,0,0.2); + margin-bottom: -30px; +} + +.profileMainSecInsideSideBoxProfileMediaBannerImg { + width: 100%; + height: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + object-fit: cover; +} + +.profileMainSecInsideSideBoxProfileMediaPic { + transition: ease 0.3s; + min-height: 75px; + min-width: 75px; + max-height: 75px; + max-width: 50%; + background: rgba(0,0,0,0.1); + border-radius: 100%; + border: solid 4px white; + box-shadow: 0 0 6px 0 rgb(0,0,0,0.25); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; +} + +.profileMainSecInsideSideBoxProfileMediaPic:hover { + transform: scale(1.03); +} + +.profileMainSecInsideSideBoxProfileMediaPicImg { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + object-fit: cover; + width: 100%; + height: 100%; +} + +.profileMainSecInsideSideBoxProfileDetails { + width: 100%; + display: flex; + flex-direction: column; + grid-gap: 10px; +} + +.profileMainSecInsideSideBoxProfileDetailsNames { + width: 100%; + display: flex; + flex-direction: column; + grid-gap: 5px; +} + +.profileMainSecInsideSideBoxProfileDetailsNamesName { + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; + -webkit-line-clamp: 1; +} + +.profileMainSecInsideSideBoxProfileDetailsBio { + width: 100%; + display: flex; + flex-direction: column; + grid-gap: 5px; +} + +.profileMainSecInsideSideBoxProfileDetailsBioText { + font-size: 14px; + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; + -webkit-line-clamp: 4; +} + +.btnMain.profileMainSecInsideSideBoxProfileDetailsBioBtn { + padding: 5px 15px; + font-size: 14px; + background: rgba(0,0,0,0.1); + color: rgba(0,0,0,0.5); +} + +.btnMain.profileMainSecInsideSideBoxProfileDetailsBioBtn:hover { + background: #ff9900; + color: white; +} + +.profileMainSecInsideSideBoxProfileLinks { + width: 100%; + display: flex; + flex-direction: row; + grid-gap: 0px; + border: solid 1px rgba(0,0,0,0.1); + border-radius: 6px; + overflow: hidden; + flex-wrap: wrap; +} + +.btnMain.profileMainSecInsideSideBoxProfileLinksLink { + padding: 6px; + font-size: 14px; + border-radius: 0px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + flex-grow: 1; + color: rgba(0,0,0,0.5); + background: rgba(255,255,255,0); +} + +.btnMain.profileMainSecInsideSideBoxProfileLinksLink:hover { + background: #ff9900; + color: white; +} + +.profileMainSecInsideSideBoxProfileAction { + width: 100%; + display: flex; + flex-direction: row; + grid-gap: 10px; +} + +.btnMain.profileMainSecInsideSideBoxProfileActionBtn { + flex-grow: 1; + padding: 8px 15px; + background: rgba(0,0,0,0.25); + color: rgba(0,0,0,0.5); +} + +.btnMain.profileMainSecInsideSideBoxProfileActionBtn:hover { + background: rgb(255,153,0); + color: rgb(255,255,255); +} + +.btnMain.profileMainSecInsideSideBoxProfileActionBtn.profileMainSecInsideSideBoxProfileActionBtnActive { + background: rgb(255,153,0); + color: rgb(255,255,255); +} + +.profileMainSecInsideBodyBox { + width: 100%; + display: flex; + flex-direction: column; + grid-gap: 15px; +} + +.profileMainSecInsideBodyBoxInfo { + width: 100%; + display: flex; + flex-direction: row; + grid-gap: 15px; +} + +.profileMainSecInsideBodyBoxInfoText { + display: flex; + flex-direction: column; + grid-gap: 5px; +} + +.profileMainSecInsideBodyBoxInfoTextHeading { + color: rgba(0,0,0,0.65); + font-weight: 600; +} + +.profileMainSecInsideBodyBoxInfoTextPara { +} + +.tabsMainMidElement.tabsMainMidElementAlt { + background: unset; + box-shadow: unset; + padding: 0; +} + +.profileMainSecInsideSideBoxProfileDetailsAddresses { + width: 100%; + display: flex; + flex-direction: column; + grid-gap: 10px; +} + +.btnMain.profileMainSecInsideSideBoxBtn { + background: rgba(0,0,0,0.1); + justify-content: start; + color: rgba(0,0,0,0.5); +} + +.btnMain.profileMainSecInsideSideBoxBtn:hover { + background: rgba(255,153,0,0.9); + color: rgb(255,255,255); + grid-gap: 15px; +} + +.btnMain.profileMainSecInsideSideBoxBtn.profileMainSecInsideSideBoxBtnActive { + background: rgb(255,153,0); + color: rgb(255,255,255); +} + +.createStoreProductCardMain { + transition: ease 0.4s; + border-radius: 8px; + background: rgba(0,0,0,0.1); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + color: rgba(0,0,0,0.5); + border: solid 4px rgba(0,0,0,0.1); + grid-gap: 15px; + padding: 25px; +} + +.createStoreProductCardMain:hover { + transform: scale(0.98); + border: solid 4px rgb(255,153,0); + background: rgb(255,255,255); + color: rgb(255,153,0); + grid-gap: 10px; +} + +.btnMainIcon.createStoreProductCardMainIcon { + font-size: 42px; +} + +.createStoreProductCardMainText { + font-size: 24px; + font-weight: 700; + text-align: center; +} + diff --git a/public/assets/js/expandProductCheckout.js b/public/assets/js/expandProductCheckout.js new file mode 100644 index 0000000..d9296cc --- /dev/null +++ b/public/assets/js/expandProductCheckout.js @@ -0,0 +1,10 @@ +document.querySelectorAll('.checkoutMainInsideSecBodyCard').forEach(card => { + const actionBtn = card.querySelector('.checkoutMainInsideSecBodyCardTopActionBtnView'); + const bottom = card.querySelector('.checkoutMainInsideSecBodyCardBottom'); + + if (actionBtn && bottom) { + actionBtn.addEventListener('click', () => { + bottom.classList.toggle('checkoutMainInsideSecBodyCardBottomActive'); + }); + } +}); diff --git a/public/assets/js/popups.js b/public/assets/js/popups.js new file mode 100644 index 0000000..4df90f5 --- /dev/null +++ b/public/assets/js/popups.js @@ -0,0 +1,31 @@ +document.addEventListener('DOMContentLoaded', function() { + function setupPopup(triggerId, popupId) { + const trigger = document.getElementById(triggerId); + const popup = document.getElementById(popupId); + + if (trigger && popup) { + trigger.addEventListener('click', function() { + popup.style.display = 'flex'; + document.body.style.overflow = 'hidden'; + }); + } + } + + // Setup popups + setupPopup('storePageInfoPopupTrigger', 'storePageInfoPopup'); + setupPopup('mobileMenuPopupTrigger', 'mobileMenuPopup'); + setupPopup('loginRegisterPopupTrigger', 'loginRegisterPopup'); + setupPopup('loginRegisterMobilePopupTrigger', 'loginRegisterPopup'); + setupPopup('userPageInfoPopupTrigger', 'userPageInfoPopup');// Add more as needed + + // Close popups + document.querySelectorAll('.popupMainSecInsideBoxTopBtn').forEach(function(button) { + button.addEventListener('click', function() { + const popup = document.querySelector('.popupMain[style*="display: flex"]'); + if (popup) { + popup.style.display = 'none'; + document.body.style.overflow = 'auto'; + } + }); + }); +}); diff --git a/public/assets/js/tabs.js b/public/assets/js/tabs.js index 1c391ec..3014dd3 100644 --- a/public/assets/js/tabs.js +++ b/public/assets/js/tabs.js @@ -1,15 +1,21 @@ document.querySelectorAll('.tabsMain').forEach(tabsMain => { - const tabsTopElements = tabsMain.querySelectorAll('.tabsMainTopElement'); + const tabsTopElements = tabsMain.querySelectorAll('.tabsMainTopElement, .tabsMainTopElementAlt'); const tabsMidElements = tabsMain.querySelectorAll('.tabsMainMidElement'); tabsTopElements.forEach((tab, index) => { tab.addEventListener('click', () => { // Remove active class from all tabs and content - tabsTopElements.forEach(t => t.classList.remove('tabsMainTopElementActive')); + tabsTopElements.forEach(t => { + t.classList.remove('tabsMainTopElementActive'); + t.classList.remove('tabsMainTopElementActiveAlt'); + }); tabsMidElements.forEach(m => m.classList.remove('tabsMainMidElementActive')); // Add active class to the clicked tab and corresponding content tab.classList.add('tabsMainTopElementActive'); + if (tab.classList.contains('tabsMainTopElementAlt')) { + tab.classList.add('tabsMainTopElementActiveAlt'); + } tabsMidElements[index].classList.add('tabsMainMidElementActive'); // Set active class on the parent tabsMain diff --git a/public/checkout.html b/public/checkout.html new file mode 100644 index 0000000..a0ca562 --- /dev/null +++ b/public/checkout.html @@ -0,0 +1,380 @@ + + + + + + + Cheems Market + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Home
+
text
+
text
+
About
+
Dashboard
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Checkout

+
+
+
+
+
+
+
This is a product name, and its clickable / leads to product page
+
+

$420.69

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+
+

Product by: Store name

+ +
+
+
+
+
+
This is a product name, and its clickable / leads to product page
+
+

$420.69

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+
+

Product by: Store name

+ +
+
+
+
+
+
This is a product name, and its clickable / leads to product page
+
+

$420.69

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+
+

Product by: Store name

+ +
+
+
+
+
+
+
+
+
+

Initial total

+

$1,262.07

+
+
+

Tax

+

%10

+
+
+
+

Final total

+

$1,388.28

+
+
+
+
+
+

Notice 1: Your cart is saved locally on your device. Meaning your.. etc (unless it can be saved on relays?)

+

Notice 2: You can only purchase products from one store (or not? don't know about the technicalities of this)

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

CHEEMS MARKET

+
+
+
+
HometexttextAboutDashboard
+
+
+
+

text

+
+
+
+
+
+
+
+
+
+

Copyright ©  Chems All Rights Reserved.

+
+
+
+
+
+ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/createProduct.html b/public/createProduct.html new file mode 100644 index 0000000..62d2a93 --- /dev/null +++ b/public/createProduct.html @@ -0,0 +1,348 @@ + + + + + + + Cheems Market + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Home
+
text
+
text
+
About
+
Dashboard
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Create a product listing

+

Here's where you can create a brand new product listing associate with your store and/or your profile

+
+
+
+
+
+

Think of a name that best describe what you might be selling

+
+
+
+
+
+

Tell users what type of product are you selling

+
+
DigitalPhysic
+
+
+
+
+
+

Write a short summary of your product that tells people what you're selling

+
+
+
+
+
+

Fully share what your product is

+
+
+
+
+
+

Separate each tag with a comma (Example: tag1, tag2, tag3)

+
+
+
+
+
+

Can you deliver this product to your customers?

+
+
+
+
+
+

Tell users what type of product are you selling

+
+
Current profileStore: NameStore: Name
+
+
+
+
+
+

Add 10 to 30 second vvideo to showcase your product

+
+
+
+
+
+

Add a banner image, one that would help make your store visually distinct

+
+
+
+
+
+

Add multiple images of your product to better showcase it

+
+
+
+
+
+

Everything in order and ready to publish your product listing?

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

CHEEMS MARKET

+
+
+
+
HometexttextAboutDashboard
+
+
+
+

text

+
+
+
+
+
+
+
+
+
+

Copyright ©  Chems All Rights Reserved.

+
+
+
+
+
+ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/createStore.html b/public/createStore.html new file mode 100644 index 0000000..30717cc --- /dev/null +++ b/public/createStore.html @@ -0,0 +1,340 @@ + + + + + + + Cheems Market + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Home
+
text
+
text
+
About
+
Dashboard
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Create a store page

+

Here's where you can create a brand new store page associate with your profile

+
+
+
+
+
+

Think of a name that best describe what you might be selling

+
+
+
+
+
+

Tell users what type of store are you and what kind of products do you sell

+
+
DigitalPhysicDigital & Physical
+
+
+
+
+
+

Write a short summary of your store that tells people who you sell

+
+
+
+
+
+

Fully share what your store is about, what it sells, and how it serves your customers

+
+
+
+
+
+

Separate each tag with a comma (Example: tag1, tag2, tag3)

+
+
+
+
+
+

Separate each category with a comma (Example: category1, category2, category2)

+
+
+
+
+
+

Add a profile picture image to the store

+
+
+
+
+
+

Add banner image, one that would help make your store visually distinct

+
+
+
+
+
+

Where is your store located at?

+
+
+
+
+
+

Everything in order and ready to publish your store page?

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

CHEEMS MARKET

+
+
+
+
HometexttextAboutDashboard
+
+
+
+

text

+
+
+
+
+
+
+
+
+
+

Copyright ©  Chems All Rights Reserved.

+
+
+
+
+
+ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/index.html b/public/index.html index 55ff110..1e0a693 100644 --- a/public/index.html +++ b/public/index.html @@ -8,6 +8,8 @@ + + @@ -17,10 +19,11 @@ - + + @@ -30,25 +33,44 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Home
+
text
+
text
+
About
+
Dashboard
+
+
+
+
+
+
+
-
+
-
-
-
Home
-
text
-
text
-
About
-
text
-
-
-
-
-
-
+
+
@@ -271,7 +293,7 @@
-
HometexttextAbouttext
+
HometexttextAboutDashboard
@@ -291,11 +313,131 @@
+ + + + diff --git a/public/productPage.html b/public/productPage.html index aa2ce7f..0741d1b 100644 --- a/public/productPage.html +++ b/public/productPage.html @@ -8,6 +8,8 @@ + + @@ -17,10 +19,11 @@ - + + @@ -30,25 +33,44 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Home
+
text
+
text
+
About
+
Dashboard
+
+
+
+
+
+
+
-
+
-
-
-
Home
-
text
-
text
-
About
-
text
-
-
-
-
-
-
+
+
@@ -220,7 +242,7 @@
-
+

name

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

@@ -231,12 +253,12 @@

Followed by (Cheem's network)

-
-
- -
- -
+
+
+ +
+ +

+50

@@ -245,12 +267,12 @@

Also by (Your network)

-
-
- -
- -
+
+
+ +
+ +

+50

@@ -424,7 +446,7 @@
-
HometexttextAbouttext
+
HometexttextAboutDashboard
@@ -444,11 +466,131 @@
+ + + + diff --git a/public/products.html b/public/products.html index bc84bda..2d03e5f 100644 --- a/public/products.html +++ b/public/products.html @@ -8,6 +8,8 @@ + + @@ -17,10 +19,11 @@ - + + @@ -30,25 +33,44 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Home
+
text
+
text
+
About
+
Dashboard
+
+
+
+
+
+
+
-
+
-
-
-
Home
-
text
-
text
-
About
-
text
-
-
-
-
-
-
+
+
@@ -210,7 +232,7 @@
-
HometexttextAbouttext
+
HometexttextAboutDashboard
@@ -230,11 +252,131 @@
+ + + + diff --git a/public/storePage.html b/public/storePage.html index fc8f947..546eb61 100644 --- a/public/storePage.html +++ b/public/storePage.html @@ -8,6 +8,8 @@ + + @@ -17,10 +19,11 @@ - + + @@ -30,25 +33,44 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Home
+
text
+
text
+
About
+
Dashboard
+
+
+
+
+
+
+
-
+
-
-
-
Home
-
text
-
text
-
About
-
text
-
-
-
-
-
-
+
+
@@ -70,17 +92,17 @@
-

Store by:User's Name

+

Store by:User's Name

Followed by (Cheem's network)

-
-
- -
- -
+
+
+ +
+ +

+50

@@ -89,12 +111,12 @@

Also by (Your network)

-
-
- -
- -
+
+
+ +
+ +

+50

@@ -265,7 +287,7 @@
-
HometexttextAbouttext
+
HometexttextAboutDashboard
@@ -289,7 +311,7 @@
-
+

Jimmy's Long Smokes

@@ -297,10 +319,8 @@
-
-
-
-

Paragraph

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

@@ -310,11 +330,131 @@
+ + + + diff --git a/public/stores.html b/public/stores.html index 830259a..91f9236 100644 --- a/public/stores.html +++ b/public/stores.html @@ -8,6 +8,8 @@ + + @@ -17,10 +19,11 @@ - + + @@ -30,25 +33,44 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Home
+
text
+
text
+
About
+
Dashboard
+
+
+
+
+
+
+
-
+
-
-
-
Home
-
text
-
text
-
About
-
text
-
-
-
-
-
-
+
+
@@ -214,7 +236,7 @@
-
HometexttextAbouttext
+
HometexttextAboutDashboard
@@ -234,11 +256,131 @@
+ + + + diff --git a/public/userPage.html b/public/userPage.html new file mode 100644 index 0000000..428f3d0 --- /dev/null +++ b/public/userPage.html @@ -0,0 +1,456 @@ + + + + + + + Cheems Market + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Home
+
text
+
text
+
About
+
Dashboard
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Name

+

Handle@domain.com

+
+
+
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+
+
+
+
+
+
+
+
+
+

Followed by (Cheem's network)

+
+
+ +
+ +
+ +
+

+50

+
+
+
+
+

Also by (Your network)

+
+
+ +
+ +
+ +
+

+50

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

Stores and products

+
+
+
+
+
+
+
+

Stores

+
+
+

Products

+
+
+
+
+
+

Create new Store

+ +
+
+
+
+
+
+

Product title

+

$25

+
+ +
+

Product title

+

$25

+
+ +
+

Product title

+

$25

+
+
+
+
+
+
+
+

Online

+
+
+
+
+
+

Jimmy's Long Smokes

+

Need a smoke? A specific kind of smoke? We got it. We got the long, the short, the thick and thin, the brown and black. We have them all.

+
+
Visit stall
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Create new product

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

Physical

+
+
+
+
+
+

USA: Texas

+
+
+
+

2-5 km

+
+
+
+
+
+

PS5 (2 months used)

+
+
+
+

Gamers United

+
+
in stock$30,000.69
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

CHEEMS MARKET

+
+
+
+
HometexttextAboutDashboard
+
+
+
+

text

+
+
+
+
+
+
+
+
+
+

Copyright ©  Chems All Rights Reserved.

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