From bc7d0fae63018acd725dc2f031fe3450d45653ea Mon Sep 17 00:00:00 2001 From: stitch Date: Mon, 11 Nov 2024 13:07:33 +0200 Subject: [PATCH] product page and store page --- public/assets/css/popup.css | 99 ++++++++++++++++++ public/assets/css/product.css | 167 ++++++++++++++++++++++++++++++- public/assets/css/profileBox.css | 7 +- public/assets/css/store.css | 40 ++++++-- public/assets/css/styles.css | 2 + public/assets/css/wot.css | 15 ++- public/index.html | 1 + public/productPage.html | 98 ++++++++++++++---- public/products.html | 1 + public/storePage.html | 55 ++++++++-- public/stores.html | 1 + 11 files changed, 448 insertions(+), 38 deletions(-) create mode 100644 public/assets/css/popup.css diff --git a/public/assets/css/popup.css b/public/assets/css/popup.css new file mode 100644 index 0000000..755afcb --- /dev/null +++ b/public/assets/css/popup.css @@ -0,0 +1,99 @@ +.popupMain { + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: rgba(0,0,0,0.5); + backdrop-filter: blur(10px); + z-index: 10; + display: flex; + flex-direction: column; + justify-content: start; + align-items: center; + padding: 25px; +} + +@media (max-width: 576px) { + .popupMain { + padding: 15px 5px; + } +} + +.popupMainSec { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; +} + +.popupMainSecInside { + width: 100%; + display: flex; + flex-direction: column; + justify-content: start; + align-items: center; +} + +.popupMainSecInsideBox { + width: 100%; + max-width: 600px; + padding: 20px; + background: white; + border-radius: 10px; + box-shadow: 0 0 8px 0 rgb(0,0,0,0.1); + display: flex; + flex-direction: column; + grid-gap: 15px; +} + +@media (max-width: 576px) { + .popupMainSecInsideBox { + padding: 15px; + } +} + +.popupMainSecInsideBox.popupMainSecInsideBoxAlt { + max-width: unset; +} + +.popupMainSecInsideBoxTop { + display: flex; + flex-direction: row; + grid-gap: 10px; +} + +.popupMainSecInsideBoxMid { + width: 100%; + display: flex; + flex-direction: column; + grid-gap: 10px; + border-top: solid 1px rgba(0,0,0,0.1); + border-bottom: solid 1px rgba(0,0,0,0.1); + padding: 10px 0; +} + +.popupMainSecInsideBoxBottom { +} + +.popupMainSecInsideBoxTopTitle { + flex-grow: 1; + display: flex; + flex-direction: column; + justify-content: center; +} + +.btnMain.popupMainSecInsideBoxTopBtn { + padding: 8px 15px; + font-size: 24px; + border: solid 1px rgba(0,0,0,0.1); + background: rgba(255,153,0,0); + color: rgba(0,0,0,0.5); +} + +.popupMainSecInsideBoxMidStoreProfile { + display: flex; + flex-direction: column; + grid-gap: 15px; +} + diff --git a/public/assets/css/product.css b/public/assets/css/product.css index 9836f4c..4c4f706 100644 --- a/public/assets/css/product.css +++ b/public/assets/css/product.css @@ -109,6 +109,7 @@ box-shadow: 0 0 4px 0 rgb(0,0,0,0.1); outline: solid 3px rgba(255,153,0,0); cursor: pointer; + overflow: hidden; } .productMainSecBodGalleryBotListPic:hover { @@ -296,7 +297,6 @@ justify-content: center; align-items: center; padding: 5px 15px; - border-right: solid 1px rgba(0,0,0,0.1); background: rgba(255,153,0,0.85); color: white; font-weight: 600; @@ -381,3 +381,168 @@ background: #ffa826; } +.productMainSecBodExtraInsideMap { + width: 100%; + display: flex; + flex-direction: column; + position: relative; + border-radius: 8px; + background: rgba(0,0,0,0.1); + padding-top: 40%; + border: solid 1px rgba(0,0,0,0.05); + box-shadow: 0 0 4px 0 rgb(0,0,0,0.15); + overflow: hidden; +} + +.productMainSecBodExtraInsideMapInside { + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; + height: 100%; + width: 100%; + display: flex; + flex-direction: column; + grid-gap: 0px; +} + +.productMainSecBodExtraInsideMapInside > small { + width: 100%; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + background: white; + align-self: center; + padding: 5px; + border-top: solid 1px rgba(0,0,0,0.1); + font-weight: 500; + font-size: 14px; + color: rgba(0,0,0,0.5); +} + +.productMainSecBodExtraInsideSources { + width: 100%; + display: flex; + flex-direction: row; + grid-gap: 10px; + flex-wrap: wrap; +} + +.productMainSecBodExtraInsideSourcesCard { + width: 100%; + flex-grow: 1; + border: solid 1px rgba(0,0,0,0.1); + border-radius: 6px; + padding: 10px; + display: flex; + flex-direction: column; + grid-gap: 10px; +} + +.productMainSecBodExtraInsideSourcesCardTop { + display: flex; + flex-direction: row; + justify-content: start; + align-items: start; + width: 100%; + grid-gap: 15px; + flex-wrap: wrap; +} + +.productMainSecBodExtraInsideSourcesCardTopFlag { + border: solid 4px white; + box-shadow: 0 0 4px 0 rgb(0,0,0,0.1); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + overflow: hidden; + border-radius: 6px; + max-width: 100px; + box-shadow: 0 0 4px 1px rgb(0,0,0,0.25); +} + +.productMainSecBodExtraInsideSourcesCardTopFlagImg { + width: 100%; + height: 100%; +} + +.productMainSecBodExtraInsideSourcesCardTopDetails { + display: flex; + flex-direction: column; + grid-gap: 10px; +} + +.productMainSecBodExtraInsideSourcesCardMidElement { + display: flex; + flex-direction: column; + grid-gap: 10px; + flex-grow: 1; +} + +.productMainSecBodExtraInsideSourcesCardTopDetailsText { +} + +.productMainSecBodExtraInsideSourcesCardTopDetailsOther { + display: flex; + flex-direction: row; + grid-gap: 10px; + flex-wrap: wrap; +} + +.productMainSecBodExtraInsideSourcesCardTopDetailsOtherElement { + border-radius: 6px; + padding: 5px 15px; + background: white; + display: flex; + flex-direction: row; + grid-gap: 10px; + border: solid 1px rgba(0,0,0,0.1); + white-space: nowrap; + font-size: 14px; + font-weight: 500; +} + +.productMainSecBodExtraInsideSourcesCardTopDetailsOtherElementPercentage { +} + +.productMainSecBodExtraInsideSourcesCardTopDetailsOtherElementName { +} + +.productMainSecBodExtraInsideSourcesCardMid { + display: flex; + flex-direction: row; + grid-gap: 25px; + flex-wrap: wrap; +} + +.productMainSecBodGalleryBotListVidCover { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: rgba(0,0,0,0.35); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + color: rgba(255,255,255,0.5); +} + +.productMainSecBodGalleryBotListVidCoverIcon { + transition: ease 0.3s; + font-size: 42px; +} + +.productMainSecBodGalleryBotListVidCover:hover { + color: #ff9900; + background: rgba(0,0,0,0.5); +} + +.productMainSecBodGalleryBotListVidCover:hover > * { + transform: scale(1.1); +} + diff --git a/public/assets/css/profileBox.css b/public/assets/css/profileBox.css index 37fda6f..0b9b5df 100644 --- a/public/assets/css/profileBox.css +++ b/public/assets/css/profileBox.css @@ -14,7 +14,6 @@ background: rgba(255,255,255,0.85); backdrop-filter: blur(10px); padding: 10px; - margin-top: -30px; z-index: 1; border-radius: 8px; box-shadow: 0 0 4px 0 rgb(0,0,0,0.15); @@ -119,6 +118,7 @@ display: flex; flex-direction: column; box-shadow: 0 0 6px 0 rgb(0,0,0,0.2); + margin-bottom: -30px; } .userProfileBoxMainBannerImg { @@ -139,3 +139,8 @@ border-radius: 8px; } +.userProfileBoxMainBox { + display: flex; + flex-direction: column; +} + diff --git a/public/assets/css/store.css b/public/assets/css/store.css index 5e60b02..767d7e5 100644 --- a/public/assets/css/store.css +++ b/public/assets/css/store.css @@ -2,9 +2,11 @@ display: flex; flex-direction: column; grid-gap: 0px; + align-items: center; } .storeMainTop { + width: 100%; display: flex; flex-direction: column; position: relative; @@ -13,7 +15,7 @@ background: rgba(0,0,0,0.05); overflow: hidden; box-shadow: 0 0 4px 0 rgb(0,0,0,0.5); - /*border: solid 1px rgba(0,0,0,0.1);*/ + align-items: center; } .storeMainMid { @@ -33,7 +35,7 @@ margin-top: -50px; border-radius: 8px; padding: 10px; - background: rgba(255,255,255,0.75); + 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); @@ -127,9 +129,6 @@ border-radius: 4px; } -.storeMainMidInsideSecAction { -} - .storeMainMidInsideSecUser { width: 100%; display: flex; @@ -138,6 +137,35 @@ grid-gap: 10px; background: white; border-radius: 5px; - padding: 5px 15px; + 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; +} + +.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 5c48c17..cb47bf8 100644 --- a/public/assets/css/styles.css +++ b/public/assets/css/styles.css @@ -128,11 +128,13 @@ a:hover { justify-content: center; align-items: center; grid-gap: 5px; + border: solid 1px rgba(0,0,0,0); } .btnMain:hover { background: rgba(255,153,0,0.85); color: rgb(255,255,255); + border: solid 1px rgba(0,0,0,0); } .btnMain:active { diff --git a/public/assets/css/wot.css b/public/assets/css/wot.css index de06399..df0d119 100644 --- a/public/assets/css/wot.css +++ b/public/assets/css/wot.css @@ -44,21 +44,24 @@ align-items: center; position: relative; overflow: hidden; - margin-left: -20px; color: rgba(0,0,0,0.5); font-weight: 700; font-size: 14px; } -.wotMainSecPeoplePerson:first-child { +.wotMainSecPeoplePersonWrapper:first-child { margin: 0; } -.wotMainSecPeoplePerson:hover { - margin: 0 20px 0 0; +.wotMainSecPeoplePersonWrapper:first-child:hover > .wotMainSecPeoplePerson { + margin-left: 0; +} + +.wotMainSecPeoplePersonWrapper:hover > .wotMainSecPeoplePerson { transform: translateY(-5px); border: solid 3px rgb(255,153,0); box-shadow: 0 0 0px 0 rgb(0,0,0,0.5); + margin: 0 20px 0 20px; } .wotMainSecPeoplePersonImg { @@ -71,3 +74,7 @@ height: 100%; } +.wotMainSecPeoplePersonWrapper { + margin-left: -20px; +} + diff --git a/public/index.html b/public/index.html index ae10045..55ff110 100644 --- a/public/index.html +++ b/public/index.html @@ -13,6 +13,7 @@ + diff --git a/public/productPage.html b/public/productPage.html index 730ca97..aa2ce7f 100644 --- a/public/productPage.html +++ b/public/productPage.html @@ -13,6 +13,7 @@ + @@ -77,7 +78,9 @@
-
+
+
+
@@ -101,7 +104,7 @@

0Lorem 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.

-
View full
+
@@ -109,7 +112,9 @@

1Lorem 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.

-
View full
+
+
View Larger Map
+
@@ -117,7 +122,42 @@

2Lorem 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.

-
View full
+
+
+
+
+
+

This product was 65% made in COUNTRY

+
+
+
+
+

Assembled in:

+
+
15% +

COUNTRY2

+
+
+
+
+

Processed at:

+
+
15% +

COUNTRY2

+
+
+
+
+

Materials from:

+
+
15% +

COUNTRY2

+
+
+
+
+
+
@@ -162,11 +202,13 @@
-
-
-
-

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.

+
+
+
+
+

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.

+
@@ -176,30 +218,48 @@
-
-
-
-

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.

+
+
+
+
+

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.

+

Followed by (Cheem's network)

-
-

+50

+
+
+ +
+ +
+ +
+

+50

+

Also by (Your network)

-
-

+50

+
+
+ +
+ +
+ +
+

+50

+
-
Following
+
diff --git a/public/products.html b/public/products.html index f3212ac..bc84bda 100644 --- a/public/products.html +++ b/public/products.html @@ -13,6 +13,7 @@ + diff --git a/public/storePage.html b/public/storePage.html index 9108693..fc8f947 100644 --- a/public/storePage.html +++ b/public/storePage.html @@ -13,6 +13,7 @@ + @@ -64,28 +65,43 @@

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.

Read full +

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.

View full
-

By UserNameHandle(visitProfile)

follow-btn +

Store by:User's Name

Followed by (Cheem's network)

-
-

+50

+
+
+ +
+ +
+ +
+

+50

+

Also by (Your network)

-
-

+50

+
+
+ +
+ +
+ +
+

+50

+
-
@@ -269,6 +285,31 @@
+ diff --git a/public/stores.html b/public/stores.html index 8dc3acd..830259a 100644 --- a/public/stores.html +++ b/public/stores.html @@ -13,6 +13,7 @@ +