commit dac87c3a2bf15fe76b3a6ed600f81fd699be91ef Author: Tieptk Date: Sat Dec 23 10:55:02 2023 +0700 32/12/2023 diff --git a/assets/css/style.css b/assets/css/style.css new file mode 100644 index 0000000..0733d59 --- /dev/null +++ b/assets/css/style.css @@ -0,0 +1,735 @@ +@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"); +::-webkit-scrollbar-track { + background-color: #c5c5c5; + border-radius: 10px; +} + +::-webkit-scrollbar { + width: 8px; + border-radius: 30px; + background-color: #c5c5c5; +} + +::-webkit-scrollbar-thumb { + background: #5d5d5d; + border-radius: 30px; + background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0.7, #5d5d5d), color-stop(0.5, transparent), to(transparent)); +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Inter", sans-serif; +} + +body { + color: #000; + font-family: "Inter", sans-serif; + margin: 0 auto; + background: #fff; + font-weight: normal; + font-size: 14px; +} + +html { + font-size: 100%; + font-family: "Inter", sans-serif; +} + +img { + max-width: 100%; + height: auto; +} + +a { + text-decoration: none !important; + color: var(--text-black); +} + +.clearfix { + content: ""; + clear: both; +} + +ul, +li { + list-style: none; +} + +table { + border-collapse: collapse; + width: 100%; +} + +.ul, +.ol { + margin: 0; + padding: 0; + list-style: none; +} + +.d-flex { + display: flex !important; +} + +.d-block { + display: block; +} + +.flex-wrap { + flex-wrap: wrap !important; +} + +.text-center { + text-align: center !important; +} + +.align-items { + align-items: center !important; +} + +.space-between { + justify-content: space-between !important; +} + +.space-center { + justify-content: center !important; +} + +.d-block { + display: block !important; +} + +.flex-direction { + flex-direction: column; +} + +.line-clamp-1 { + display: -webkit-box; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.line-clamp-2 { + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.line-clamp-3 { + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.line-clamp-4 { + display: -webkit-box; + -webkit-line-clamp: 4; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.line-clamp-5 { + display: -webkit-box; + -webkit-line-clamp: 5; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.container { + width: 1220px; + padding: 0 10px; + margin: 0 auto; +} + +.header { + background: #fff; + box-shadow: 3px 0px 11.4px 0px rgba(0, 0, 0, 0.25); +} +.header .logo { + padding: 8px 0; +} +.header .box-user { + display: flex; + align-items: center; +} +.header .box-user .txt { + font-size: 16px; + color: #555; +} +.header .box-user .fa-user-circle-o { + color: #555; + font-size: 23px; + margin-left: 7px; +} + +.homepage .ground-list-product { + margin: 30px 0; +} +.homepage .box-list-product { + margin-bottom: 40px; +} +.homepage .box-list-product .title { + font-size: 36px; + font-weight: 700; + text-transform: uppercase; + background: var(--Linear, linear-gradient(0deg, #8b0009 0%, #f80009 100%)); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + text-align: center; + padding-bottom: 26px; + position: relative; +} +.homepage .box-list-product .title::before { + position: absolute; + content: ""; + width: 173px; + height: 1.5px; + background: linear-gradient(0deg, #8b0009 0%, #f80009 100%); + left: 50%; + bottom: 23px; + transform: translate(-50%, 0); +} + +.box-questions { + margin-bottom: 40px; +} +.box-questions .content-questions { + border-radius: 12px; + box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.25); +} +.box-questions .title { + font-size: 24px; + font-weight: 600; + color: #1f8cff; + text-align: center; + text-transform: uppercase; + padding: 13px 0; +} +.box-questions .content { + padding: 10px; +} +.box-questions [data-toggle=collapse].collapsed .fa:before { + content: "\f105"; + font-size: 20px; +} +.box-questions [data-toggle=collapse] .fa:before { + content: "\f107"; + font-size: 20px; +} +.box-questions .card { + margin-bottom: 12px; + border-radius: 5px; + border: 1px solid #b8b8b8; + background: #fff; +} +.box-questions .card-header { + background: #fff; + border-radius: 5px; + border-bottom: 0; + padding: 10px 10px 5px 10px; + font-size: 18px; + font-weight: 500; + color: #3a3a3a; +} +.box-questions .card-body { + padding: 0 10px 10px 10px; +} +.box-questions .card-link.collapsed .card-header { + padding-bottom: 10px; +} + +.product-item { + margin-right: 12px; + margin-bottom: 20px; + width: calc(20% - 12px); +} +.product-item .product-image { + display: block; + width: 100%; + height: 230px; + border: 1px solid #eaeaea; + margin-bottom: 10px; + position: relative; +} +.product-item .product-image img { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + display: block; + margin: auto; +} +.product-item .product-name { + font-size: 16px; + font-weight: 600; + height: 45px; + text-align: center; + margin-bottom: 10px; +} +.product-item .product-cost { + text-align: center; + font-size: 14px; + font-weight: 400; + color: #343434; + margin-bottom: 10px; +} +.product-item .starting-price { + display: block; + color: #e70000; + font-size: 16px; + font-weight: 700; + text-align: center; + margin-bottom: 10px; +} +.product-item .deal-time-holder { + margin-bottom: 10px; +} +.product-item .product-time-holder { + display: flex; + align-items: center; +} +.product-item .product-time-holder .item-time { + margin-left: 10px; + display: flex; + flex-wrap: wrap; + justify-content: center; + text-align: center; + flex-direction: column; + border: 0.559px solid var(--Linear, #ff3d00); + border-radius: 2.238px; + background: #fff; +} +.product-item .product-time-holder .item-time b { + width: 25px; + height: 23px; + line-height: 23px; + text-align: center; + color: #fff; + font-weight: 700; + position: relative; + font-size: 14px; + background: var(--Linear, linear-gradient(90deg, #ff3d00 3.91%, #ffa800 100%)); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} +.product-item .product-time-holder .item-time b::after { + content: ":"; + position: absolute; + right: -8px; + background: var(--Linear, linear-gradient(90deg, #ff3d00 3.91%, #ffa800 100%)); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} +.product-item .product-time-holder .item-time:last-child b { + margin: 0; +} +.product-item .product-time-holder .item-time:last-child b::after { + content: none; +} +.product-item .btn-auction { + display: block; + border-radius: 24px; + border: 1px solid #3194fc; + height: 40px; + line-height: 38px; + text-align: center; + color: #3194fc; + font-size: 18px; + font-weight: 700; +} +.product-item .btn-auction:hover { + background: #3194fc; + color: #fff; +} +.product-item .deal-time-holder.end .txt { + border-radius: 25px; + background: #ededed; + height: 24px; + padding: 0 15px; + line-height: 24px; + font-weight: 700; +} + +.footer { + background: #f3f3f3; +} +.footer .main-content-footer { + padding: 40px 0; +} +.footer .footer-left { + width: 53%; +} +.footer .footer-left h3, +.footer .footer-left p { + font-size: 14px; + font-weight: 400; + margin-bottom: 2px; + line-height: 20px; +} +.footer .footer-right a { + width: 280px; + border-radius: 25px; + position: relative; + text-decoration: none; +} +.footer .footer-right .txt { + height: 50px; + display: flex; + flex-direction: column; + justify-content: center; + padding: 10px 50px 10px 20px; + color: #1c4a10; + font-size: 15px; + font-weight: 600; + line-height: 17px; + position: relative; + background: #f2ffea; + background-clip: padding-box; + -webkit-background-clip: padding-box; + border: 2px solid transparent; + margin: auto; + border-radius: 25px; + border: 1px solid #03ae00; +} +.footer .footer-right .txt::before { + content: ""; + position: absolute; + inset: 0; + z-index: -1; + margin: -3px; + border-radius: inherit; + background-image: linear-gradient(to right, #03ae00, #f2ffea); +} +.footer .footer-right img { + position: absolute; + right: 10px; +} + +.breadcrumb { + background: #fff; + padding: 0; + margin-top: 10px; +} + +.breadcrumb ol { + width: 100%; + float: left; + padding: 0; + margin: 0; + background: none; +} + +.breadcrumb ol li { + float: left; + list-style: none; +} + +.breadcrumb ol li a span { + font-size: 14px; + line-height: 45px; + float: left; + display: flex; + align-items: center; + color: #000; +} + +.breadcrumb ol li a span:hover { + color: var(--color-hover); +} + +.breadcrumb ol li a:last-child { + color: #222; +} + +.breadcrumb ol li h1 { + font-size: 15px; + line-height: 40px; + float: left; + font-weight: 400; + margin: 0; +} + +.breadcrumb ol li i { + margin-left: 10px; + margin-right: 10px; + float: left; + line-height: 45px; +} + +.breadcrumb ol li:last-child i { + display: none; +} + +.breadcrumb i { + color: #333; + font-size: 12px; +} + +.background-white { + background: #fff; + padding: 10px; + border-radius: 12px; + box-shadow: 0px 0px 16px 0px rgba(141, 141, 141, 0.25); +} + +.page-product-detail .box-product-info { + margin-bottom: 12px; +} +.page-product-detail .product-image { + width: 50%; + margin-right: 15px; + height: 400px; + position: relative; + border: 1px solid #eaeaea; +} +.page-product-detail .product-image img { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + display: block; + margin: 0 auto; +} +.page-product-detail .info-right { + width: calc(50% - 15px); +} +.page-product-detail .info-right .name { + font-size: 24px; + font-weight: 600; + margin-bottom: 12px; +} +.page-product-detail .info-right .box-price-normal { + font-size: 16px; +} +.page-product-detail .info-right .name-price { + margin-right: 5px; + font-size: 16px; +} +.page-product-detail .info-right .current-highest-price { + margin: 10px 0; +} +.page-product-detail .info-right .current-highest-price b { + font-size: 24px; + font-weight: 700; + color: #e70000; +} +.page-product-detail .info-right .qt-view { + margin-bottom: 10px; + font-size: 16px; +} +.page-product-detail .info-right .qt-view b { + color: #0061d3; + font-size: 18px; +} +.page-product-detail .info-right .box-time { + margin-bottom: 10px; +} +.page-product-detail .info-right .box-time span { + font-size: 16px; +} +.page-product-detail .info-right .box-time .item-time { + position: relative; + margin-left: 20px; + display: flex; + flex-wrap: wrap; + justify-content: center; + text-align: center; + flex-direction: column; + border: 1.5px solid transparent; + background: #fff; + background-clip: padding-box; + border-radius: 5px; +} +.page-product-detail .info-right .box-time .item-time::before { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: -1; + margin: -1.5px; + border-radius: inherit; + background: linear-gradient(to right, #ff3d00, #ffa800); +} +.page-product-detail .info-right .box-time .item-time b { + width: 38px; + height: 35px; + line-height: 35px; + text-align: center; + color: #000; + font-weight: 700; + position: relative; + font-size: 20px; +} +.page-product-detail .info-right .box-time .item-time b::after { + content: ":"; + position: absolute; + right: -15px; + font-size: 24px; + background: var(--Linear, linear-gradient(90deg, #ff3d00 3.91%, #ffa800 100%)); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} +.page-product-detail .info-right .box-time .item-time:last-child b { + margin: 0; +} +.page-product-detail .info-right .box-time .item-time:last-child b::after { + content: none; +} +.page-product-detail .info-right .box-input-price { + margin-bottom: 10px; +} +.page-product-detail .info-right .box-input-price span { + margin-right: 5px; +} +.page-product-detail .info-right .box-input-price .input-price { + height: 50px; + width: 135px; + border: 1px solid #b1b1b1; + border-radius: 4px; + font-size: 20px; + color: #e70000; + text-align: center; + text-transform: uppercase; + font-weight: 700; +} +.page-product-detail .info-right .box-input-price a { + display: block; + width: 50px; + height: 50px; + margin-left: 6px; + line-height: 50px; + text-align: center; + border: 1px solid #b1b1b1; + border-radius: 4px; +} +.page-product-detail .info-right .box-input-price a i { + color: #777474; +} +.page-product-detail .info-right .box-input-price a.plus-price { + position: relative; + border: 1.5px solid transparent; + background: #fff; + background-clip: padding-box; + border-radius: 5px; +} +.page-product-detail .info-right .box-input-price a.plus-price::before { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: -1; + margin: -1.5px; + border-radius: inherit; + background: linear-gradient(to right, #ff3d00, #ffa800); +} +.page-product-detail .info-right .box-input-price a.plus-price i { + color: #ff4d00; +} +.page-product-detail .info-right .btn-add-auction { + display: block; + width: 100%; + height: 65px; + background: var(--Linear, linear-gradient(0deg, #8b0009 0%, #f80009 100%)); + border-radius: 30px; + margin: 20px 0; + text-align: center; + line-height: 65px; + font-size: 24px; + font-weight: 600; + color: #fff; +} +.page-product-detail .box-spec-deposit { + margin-bottom: 40px; +} +.page-product-detail .box-specification { + width: 50%; + margin-right: 15px; +} +.page-product-detail .box-auction-deposit { + width: calc(50% - 15px); +} +.page-product-detail .box-participant-list .title { + font-size: 20px; + color: #e70000; + font-weight: 700; + padding-bottom: 10px; + border-bottom: 1px solid #7a7a7a; +} +.page-product-detail .box-participant-list td { + border-bottom: 1px solid #e6e6e6; + padding: 10px; + font-weight: 500; +} +.page-product-detail .box-participant-list tr:first-child td img { + margin-right: 5px; +} +.page-product-detail .box-participant-list tr:first-child td span { + color: #2546bb; +} +.page-product-detail .box-participant-list .content { + max-height: 180px; + overflow-x: auto; +} +.page-product-detail .box-specification .title { + font-size: 20px; + color: #e70000; + font-weight: 700; + padding-bottom: 10px; + border-bottom: 1px solid #dadada; +} +.page-product-detail .box-specification .content { + position: relative; + height: 287px; + overflow: hidden; +} +.page-product-detail .box-specification .content::after { + position: absolute; + content: ""; + background: linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, 0) 100%); + width: 100%; + height: 65px; + z-index: 1; + bottom: 0; + left: 0; +} +.page-product-detail .box-specification .more { + display: block; + width: 110px; + height: 30px; + line-height: 30px; + margin: 0 auto; + text-align: center; + border: 1px solid #3e5ed0; + border-radius: 30px; + color: #3e5ed0; + font-weight: 500; +} +.page-product-detail .box-auction-deposit .title { + font-size: 20px; + color: #e70000; + font-weight: 700; + padding-bottom: 10px; + border-bottom: 1px solid #dadada; +} +.page-product-detail .box-auction-deposit .content p { + margin-bottom: 5px; + line-height: 23px; +} +.page-product-detail .box-auction-deposit .content img { + height: 120px; + margin-right: 10px; +}/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/assets/css/style.css.map b/assets/css/style.css.map new file mode 100644 index 0000000..21adbb0 --- /dev/null +++ b/assets/css/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAQ,mHAAA;AACR;EACI,yBAAA;EACA,mBAAA;ACCJ;;ADCA;EACI,UAAA;EACA,mBAAA;EACA,yBAAA;ACEJ;;ADAA;EACI,mBAAA;EACA,mBAAA;EACA,gIAAA;ACGJ;;ADMA;EACI,SAAA;EACA,UAAA;EACA,sBAAA;EACA,gCAAA;ACHJ;;ADMA;EACI,WAAA;EACA,gCAAA;EACA,cAAA;EACA,gBAAA;EACA,mBAAA;EACA,eAAA;ACHJ;;ADMA;EACI,eAAA;EACA,gCAAA;ACHJ;;ADMA;EACI,eAAA;EACA,YAAA;ACHJ;;ADMA;EACI,gCAAA;EACA,wBAAA;ACHJ;;ADMA;EACI,WAAA;EACA,WAAA;ACHJ;;ADMA;;EAEI,gBAAA;ACHJ;;ADMA;EACI,yBAAA;EACA,WAAA;ACHJ;;ADMA;;EAEI,SAAA;EACA,UAAA;EACA,gBAAA;ACHJ;;ADKA;EACI,wBAAA;ACFJ;;ADKA;EACI,cAAA;ACFJ;;ADKA;EACI,0BAAA;ACFJ;;ADKA;EACI,6BAAA;ACFJ;;ADKA;EACI,8BAAA;ACFJ;;ADKA;EACI,yCAAA;ACFJ;;ADKA;EACI,kCAAA;ACFJ;;ADKA;EACI,yBAAA;ACFJ;;ADKA;EACI,sBAAA;ACFJ;;ADIA;EACI,oBAAA;EACA,qBAAA;EACA,4BAAA;EACA,gBAAA;ACDJ;;ADIA;EACI,oBAAA;EACA,qBAAA;EACA,4BAAA;EACA,gBAAA;ACDJ;;ADIA;EACI,oBAAA;EACA,qBAAA;EACA,4BAAA;EACA,gBAAA;ACDJ;;ADGA;EACI,oBAAA;EACA,qBAAA;EACA,4BAAA;EACA,gBAAA;ACAJ;;ADEA;EACI,oBAAA;EACA,qBAAA;EACA,4BAAA;EACA,gBAAA;ACCJ;;ADEA;EACI,aAAA;EACA,eAAA;EACA,cAAA;ACCJ;;ADCA;EACI,gBAAA;EACA,kDAAA;ACEJ;ADDI;EACI,cAAA;ACGR;ADDI;EACI,aAAA;EACA,mBAAA;ACGR;ADFQ;EACI,eAAA;EACA,WAAA;ACIZ;ADFQ;EACI,WAAA;EACA,eAAA;EACA,gBAAA;ACIZ;;ADCI;EACI,cAAA;ACER;ADAI;EACI,mBAAA;ACER;ADDQ;EACI,eAAA;EACA,gBAAA;EACA,yBAAA;EACA,0EAAA;EACA,qBAAA;EACA,6BAAA;EACA,oCAAA;EACA,kBAAA;EACA,oBAAA;EACA,kBAAA;ACGZ;ADFY;EACI,kBAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,2DAAA;EACA,SAAA;EACA,YAAA;EACA,6BAAA;ACIhB;;ADCA;EACI,mBAAA;ACEJ;ADDI;EACI,mBAAA;EACA,+CAAA;ACGR;ADDI;EACI,eAAA;EACA,gBAAA;EACA,cAAA;EACA,kBAAA;EACA,yBAAA;EACA,eAAA;ACGR;ADDI;EACI,aAAA;ACGR;ADDI;EACI,gBAAA;EACA,eAAA;ACGR;ADDI;EACI,gBAAA;EACA,eAAA;ACGR;ADDI;EACI,mBAAA;EACA,kBAAA;EACA,yBAAA;EACA,gBAAA;ACGR;ADDI;EACI,gBAAA;EACA,kBAAA;EACA,gBAAA;EACA,2BAAA;EACA,eAAA;EACA,gBAAA;EACA,cAAA;ACGR;ADDI;EACI,yBAAA;ACGR;ADAQ;EACI,oBAAA;ACEZ;;ADEA;EACI,kBAAA;EACA,mBAAA;EACA,uBAAA;ACCJ;ADAI;EACI,cAAA;EACA,WAAA;EACA,aAAA;EACA,yBAAA;EACA,mBAAA;EACA,kBAAA;ACER;ADDQ;EACI,kBAAA;EACA,OAAA;EACA,MAAA;EACA,QAAA;EACA,SAAA;EACA,cAAA;EACA,YAAA;ACGZ;ADAI;EACI,eAAA;EACA,gBAAA;EACA,YAAA;EACA,kBAAA;EACA,mBAAA;ACER;ADAI;EACI,kBAAA;EACA,eAAA;EACA,gBAAA;EACA,cAAA;EACA,mBAAA;ACER;ADAI;EACI,cAAA;EACA,cAAA;EACA,eAAA;EACA,gBAAA;EACA,kBAAA;EACA,mBAAA;ACER;ADAI;EACI,mBAAA;ACER;ADAI;EACI,aAAA;EACA,mBAAA;ACER;ADDQ;EACI,iBAAA;EACA,aAAA;EACA,eAAA;EACA,uBAAA;EACA,kBAAA;EACA,sBAAA;EACA,4CAAA;EACA,sBAAA;EACA,gBAAA;ACGZ;ADFY;EACI,WAAA;EACA,YAAA;EACA,iBAAA;EACA,kBAAA;EACA,WAAA;EACA,gBAAA;EACA,kBAAA;EACA,eAAA;EACA,8EAAA;EACA,qBAAA;EACA,6BAAA;EACA,oCAAA;ACIhB;ADHgB;EACI,YAAA;EACA,kBAAA;EACA,WAAA;EACA,8EAAA;EACA,qBAAA;EACA,6BAAA;EACA,oCAAA;ACKpB;ADFY;EACI,SAAA;ACIhB;ADHgB;EACI,aAAA;ACKpB;ADAI;EACI,cAAA;EACA,mBAAA;EACA,yBAAA;EACA,YAAA;EACA,iBAAA;EACA,kBAAA;EACA,cAAA;EACA,eAAA;EACA,gBAAA;ACER;ADDQ;EACI,mBAAA;EACA,WAAA;ACGZ;ADAI;EACI,mBAAA;EACA,mBAAA;EACA,YAAA;EACA,eAAA;EACA,iBAAA;EACA,gBAAA;ACER;;ADEA;EACI,mBAAA;ACCJ;ADAI;EACI,eAAA;ACER;ADAI;EACI,UAAA;ACER;ADDQ;;EAEI,eAAA;EACA,gBAAA;EACA,kBAAA;EACA,iBAAA;ACGZ;ADCQ;EACI,YAAA;EACA,mBAAA;EACA,kBAAA;EACA,qBAAA;ACCZ;ADCQ;EACI,YAAA;EACA,aAAA;EACA,sBAAA;EACA,uBAAA;EACA,4BAAA;EACA,cAAA;EACA,eAAA;EACA,gBAAA;EACA,iBAAA;EACA,kBAAA;EACA,mBAAA;EACA,4BAAA;EACA,oCAAA;EACA,6BAAA;EACA,YAAA;EACA,mBAAA;EACA,yBAAA;ACCZ;ADAY;EACI,WAAA;EACA,kBAAA;EACA,QAAA;EACA,WAAA;EACA,YAAA;EACA,sBAAA;EACA,6DAAA;ACEhB;ADCQ;EACI,kBAAA;EACA,WAAA;ACCZ;;ADKA;EACI,gBAAA;EACA,UAAA;EACA,gBAAA;ACFJ;;ADIA;EACI,WAAA;EACA,WAAA;EACA,UAAA;EACA,SAAA;EACA,gBAAA;ACDJ;;ADIA;EACI,WAAA;EACA,gBAAA;ACDJ;;ADIA;EACI,eAAA;EACA,iBAAA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,WAAA;ACDJ;;ADIA;EACI,yBAAA;ACDJ;;ADIA;EACI,WAAA;ACDJ;;ADIA;EACI,eAAA;EACA,iBAAA;EACA,WAAA;EACA,gBAAA;EACA,SAAA;ACDJ;;ADIA;EACI,iBAAA;EACA,kBAAA;EACA,WAAA;EACA,iBAAA;ACDJ;;ADIA;EACI,aAAA;ACDJ;;ADIA;EACI,WAAA;EACA,eAAA;ACDJ;;ADGA;EACI,gBAAA;EACA,aAAA;EACA,mBAAA;EACA,sDAAA;ACAJ;;ADII;EACI,mBAAA;ACDR;ADGI;EACI,UAAA;EACA,kBAAA;EACA,aAAA;EACA,kBAAA;EACA,yBAAA;ACDR;ADEQ;EACI,kBAAA;EACA,SAAA;EACA,QAAA;EACA,gCAAA;EACA,cAAA;EACA,cAAA;ACAZ;ADGI;EACI,uBAAA;ACDR;ADEQ;EACI,eAAA;EACA,gBAAA;EACA,mBAAA;ACAZ;ADEQ;EACI,eAAA;ACAZ;ADEQ;EACI,iBAAA;EACA,eAAA;ACAZ;ADEQ;EACI,cAAA;ACAZ;ADCY;EACI,eAAA;EACA,gBAAA;EACA,cAAA;ACChB;ADEQ;EACI,mBAAA;EACA,eAAA;ACAZ;ADCY;EACI,cAAA;EACA,eAAA;ACChB;ADEQ;EACI,mBAAA;ACAZ;ADCY;EACI,eAAA;ACChB;ADCY;EACI,kBAAA;EACA,iBAAA;EACA,aAAA;EACA,eAAA;EACA,uBAAA;EACA,kBAAA;EACA,sBAAA;EACA,+BAAA;EACA,gBAAA;EACA,4BAAA;EACA,kBAAA;ACChB;ADAgB;EACI,WAAA;EACA,kBAAA;EACA,MAAA;EACA,QAAA;EACA,SAAA;EACA,OAAA;EACA,WAAA;EACA,cAAA;EACA,sBAAA;EACA,uDAAA;ACEpB;ADAgB;EACI,WAAA;EACA,YAAA;EACA,iBAAA;EACA,kBAAA;EACA,WAAA;EACA,gBAAA;EACA,kBAAA;EACA,eAAA;ACEpB;ADDoB;EACI,YAAA;EACA,kBAAA;EACA,YAAA;EACA,eAAA;EACA,8EAAA;EACA,qBAAA;EACA,6BAAA;EACA,oCAAA;ACGxB;ADAgB;EACI,SAAA;ACEpB;ADDoB;EACI,aAAA;ACGxB;ADEQ;EACI,mBAAA;ACAZ;ADCY;EACI,iBAAA;ACChB;ADCY;EACI,YAAA;EACA,YAAA;EACA,yBAAA;EACA,kBAAA;EACA,eAAA;EACA,cAAA;EACA,kBAAA;EACA,yBAAA;EACA,gBAAA;ACChB;ADCY;EACI,cAAA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,iBAAA;EACA,kBAAA;EACA,yBAAA;EACA,kBAAA;ACChB;ADAgB;EACI,cAAA;ACEpB;ADAgB;EACI,kBAAA;EACA,+BAAA;EACA,gBAAA;EACA,4BAAA;EACA,kBAAA;ACEpB;ADDoB;EACI,WAAA;EACA,kBAAA;EACA,MAAA;EACA,QAAA;EACA,SAAA;EACA,OAAA;EACA,WAAA;EACA,cAAA;EACA,sBAAA;EACA,uDAAA;ACGxB;ADDoB;EACI,cAAA;ACGxB;ADEQ;EACI,cAAA;EACA,WAAA;EACA,YAAA;EACA,0EAAA;EACA,mBAAA;EACA,cAAA;EACA,kBAAA;EACA,iBAAA;EACA,eAAA;EACA,gBAAA;EACA,WAAA;ACAZ;ADGI;EACI,mBAAA;ACDR;ADGI;EACI,UAAA;EACA,kBAAA;ACDR;ADGI;EACI,uBAAA;ACDR;ADIQ;EACI,eAAA;EACA,cAAA;EACA,gBAAA;EACA,oBAAA;EACA,gCAAA;ACFZ;ADIQ;EACI,gCAAA;EACA,aAAA;EACA,gBAAA;ACFZ;ADMgB;EACI,iBAAA;ACJpB;ADMgB;EACI,cAAA;ACJpB;ADQQ;EACI,iBAAA;EACA,gBAAA;ACNZ;ADUQ;EACI,eAAA;EACA,cAAA;EACA,gBAAA;EACA,oBAAA;EACA,gCAAA;ACRZ;ADUQ;EACI,kBAAA;EACA,aAAA;EACA,gBAAA;ACRZ;ADSY;EACI,kBAAA;EACA,WAAA;EACA,uEAAA;EACA,WAAA;EACA,YAAA;EACA,UAAA;EACA,SAAA;EACA,OAAA;ACPhB;ADUQ;EACI,cAAA;EACA,YAAA;EACA,YAAA;EACA,iBAAA;EACA,cAAA;EACA,kBAAA;EACA,yBAAA;EACA,mBAAA;EACA,cAAA;EACA,gBAAA;ACRZ;ADYQ;EACI,eAAA;EACA,cAAA;EACA,gBAAA;EACA,oBAAA;EACA,gCAAA;ACVZ;ADaY;EACI,kBAAA;EACA,iBAAA;ACXhB;ADaY;EACI,aAAA;EACA,kBAAA;ACXhB","file":"style.css"} \ No newline at end of file diff --git a/assets/css/style.scss b/assets/css/style.scss new file mode 100644 index 0000000..eee5336 --- /dev/null +++ b/assets/css/style.scss @@ -0,0 +1,750 @@ +@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"); +::-webkit-scrollbar-track { + background-color: #c5c5c5; + border-radius: 10px; +} +::-webkit-scrollbar { + width: 8px; + border-radius: 30px; + background-color: #c5c5c5; +} +::-webkit-scrollbar-thumb { + background: #5d5d5d; + border-radius: 30px; + background-image: -webkit-gradient( + linear, + 0 0, + 0 100%, + color-stop(0.7, #5d5d5d), + color-stop(0.5, transparent), + to(transparent) + ); +} +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Inter", sans-serif; +} + +body { + color: #000; + font-family: "Inter", sans-serif; + margin: 0 auto; + background: #fff; + font-weight: normal; + font-size: 14px; +} + +html { + font-size: 100%; + font-family: "Inter", sans-serif; +} + +img { + max-width: 100%; + height: auto; +} + +a { + text-decoration: none !important; + color: var(--text-black); +} + +.clearfix { + content: ""; + clear: both; +} + +ul, +li { + list-style: none; +} + +table { + border-collapse: collapse; + width: 100%; +} + +.ul, +.ol { + margin: 0; + padding: 0; + list-style: none; +} +.d-flex { + display: flex !important; +} + +.d-block { + display: block; +} + +.flex-wrap { + flex-wrap: wrap !important; +} + +.text-center { + text-align: center !important; +} + +.align-items { + align-items: center !important; +} + +.space-between { + justify-content: space-between !important; +} + +.space-center { + justify-content: center !important; +} + +.d-block { + display: block !important; +} + +.flex-direction { + flex-direction: column; +} +.line-clamp-1 { + display: -webkit-box; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.line-clamp-2 { + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.line-clamp-3 { + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; +} +.line-clamp-4 { + display: -webkit-box; + -webkit-line-clamp: 4; + -webkit-box-orient: vertical; + overflow: hidden; +} +.line-clamp-5 { + display: -webkit-box; + -webkit-line-clamp: 5; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.container { + width: 1220px; + padding: 0 10px; + margin: 0 auto; +} +.header { + background: #fff; + box-shadow: 3px 0px 11.4px 0px rgba(0, 0, 0, 0.25); + .logo { + padding: 8px 0; + } + .box-user { + display: flex; + align-items: center; + .txt { + font-size: 16px; + color: #555; + } + .fa-user-circle-o { + color: #555; + font-size: 23px; + margin-left: 7px; + } + } +} +.homepage { + .ground-list-product { + margin: 30px 0; + } + .box-list-product { + margin-bottom: 40px; + .title { + font-size: 36px; + font-weight: 700; + text-transform: uppercase; + background: var(--Linear, linear-gradient(0deg, #8b0009 0%, #f80009 100%)); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + text-align: center; + padding-bottom: 26px; + position: relative; + &::before { + position: absolute; + content: ""; + width: 173px; + height: 1.5px; + background: linear-gradient(0deg, #8b0009 0%, #f80009 100%); + left: 50%; + bottom: 23px; + transform: translate(-50%, 0); + } + } + } +} +.box-questions { + margin-bottom: 40px; + .content-questions { + border-radius: 12px; + box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.25); + } + .title { + font-size: 24px; + font-weight: 600; + color: #1f8cff; + text-align: center; + text-transform: uppercase; + padding: 13px 0; + } + .content { + padding: 10px; + } + [data-toggle="collapse"].collapsed .fa:before { + content: "\f105"; + font-size: 20px; + } + [data-toggle="collapse"] .fa:before { + content: "\f107"; + font-size: 20px; + } + .card { + margin-bottom: 12px; + border-radius: 5px; + border: 1px solid #b8b8b8; + background: #fff; + } + .card-header { + background: #fff; + border-radius: 5px; + border-bottom: 0; + padding: 10px 10px 5px 10px; + font-size: 18px; + font-weight: 500; + color: #3a3a3a; + } + .card-body { + padding: 0 10px 10px 10px; + } + .card-link.collapsed { + .card-header { + padding-bottom: 10px; + } + } +} +.product-item { + margin-right: 12px; + margin-bottom: 20px; + width: calc(100% / 5 - 12px); + .product-image { + display: block; + width: 100%; + height: 230px; + border: 1px solid #eaeaea; + margin-bottom: 10px; + position: relative; + img { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + display: block; + margin: auto; + } + } + .product-name { + font-size: 16px; + font-weight: 600; + height: 45px; + text-align: center; + margin-bottom: 10px; + } + .product-cost { + text-align: center; + font-size: 14px; + font-weight: 400; + color: #343434; + margin-bottom: 10px; + } + .starting-price { + display: block; + color: #e70000; + font-size: 16px; + font-weight: 700; + text-align: center; + margin-bottom: 10px; + } + .deal-time-holder { + margin-bottom: 10px; + } + .product-time-holder { + display: flex; + align-items: center; + .item-time { + margin-left: 10px; + display: flex; + flex-wrap: wrap; + justify-content: center; + text-align: center; + flex-direction: column; + border: 0.559px solid var(--Linear, #ff3d00); + border-radius: 2.238px; + background: #fff; + b { + width: 25px; + height: 23px; + line-height: 23px; + text-align: center; + color: #fff; + font-weight: 700; + position: relative; + font-size: 14px; + background: var(--Linear, linear-gradient(90deg, #ff3d00 3.91%, #ffa800 100%)); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + &::after { + content: ":"; + position: absolute; + right: -8px; + background: var(--Linear, linear-gradient(90deg, #ff3d00 3.91%, #ffa800 100%)); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + } + &:last-child b { + margin: 0; + &::after { + content: none; + } + } + } + } + .btn-auction { + display: block; + border-radius: 24px; + border: 1px solid #3194fc; + height: 40px; + line-height: 38px; + text-align: center; + color: #3194fc; + font-size: 18px; + font-weight: 700; + &:hover { + background: #3194fc; + color: #fff; + } + } + .deal-time-holder.end .txt { + border-radius: 25px; + background: #ededed; + height: 24px; + padding: 0 15px; + line-height: 24px; + font-weight: 700; + } +} + +.footer { + background: #f3f3f3; + .main-content-footer { + padding: 40px 0; + } + .footer-left { + width: 53%; + h3, + p { + font-size: 14px; + font-weight: 400; + margin-bottom: 2px; + line-height: 20px; + } + } + .footer-right { + a { + width: 280px; + border-radius: 25px; + position: relative; + text-decoration: none; + } + .txt { + height: 50px; + display: flex; + flex-direction: column; + justify-content: center; + padding: 10px 50px 10px 20px; + color: #1c4a10; + font-size: 15px; + font-weight: 600; + line-height: 17px; + position: relative; + background: #f2ffea; + background-clip: padding-box; + -webkit-background-clip: padding-box; + border: 2px solid transparent; + margin: auto; + border-radius: 25px; + border: 1px solid #03ae00; + &::before { + content: ""; + position: absolute; + inset: 0; + z-index: -1; + margin: -3px; + border-radius: inherit; + background-image: linear-gradient(to right, #03ae00, #f2ffea); + } + } + img { + position: absolute; + right: 10px; + } + } +} + +// breadcrumb +.breadcrumb { + background: #fff; + padding: 0; + margin-top: 10px; +} +.breadcrumb ol { + width: 100%; + float: left; + padding: 0; + margin: 0; + background: none; +} + +.breadcrumb ol li { + float: left; + list-style: none; +} + +.breadcrumb ol li a span { + font-size: 14px; + line-height: 45px; + float: left; + display: flex; + align-items: center; + color: #000; +} + +.breadcrumb ol li a span:hover { + color: var(--color-hover); +} + +.breadcrumb ol li a:last-child { + color: #222; +} + +.breadcrumb ol li h1 { + font-size: 15px; + line-height: 40px; + float: left; + font-weight: 400; + margin: 0; +} + +.breadcrumb ol li i { + margin-left: 10px; + margin-right: 10px; + float: left; + line-height: 45px; +} + +.breadcrumb ol li:last-child i { + display: none; +} + +.breadcrumb i { + color: #333; + font-size: 12px; +} +.background-white { + background: #fff; + padding: 10px; + border-radius: 12px; + box-shadow: 0px 0px 16px 0px rgba(141, 141, 141, 0.25); +} + +.page-product-detail { + .box-product-info { + margin-bottom: 12px; + } + .product-image { + width: 50%; + margin-right: 15px; + height: 400px; + position: relative; + border: 1px solid #eaeaea; + img { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + display: block; + margin: 0 auto; + } + } + .info-right { + width: calc(50% - 15px); + .name { + font-size: 24px; + font-weight: 600; + margin-bottom: 12px; + } + .box-price-normal { + font-size: 16px; + } + .name-price { + margin-right: 5px; + font-size: 16px; + } + .current-highest-price { + margin: 10px 0; + b { + font-size: 24px; + font-weight: 700; + color: #e70000; + } + } + .qt-view { + margin-bottom: 10px; + font-size: 16px; + b { + color: #0061d3; + font-size: 18px; + } + } + .box-time { + margin-bottom: 10px; + span { + font-size: 16px; + } + .item-time { + position: relative; + margin-left: 20px; + display: flex; + flex-wrap: wrap; + justify-content: center; + text-align: center; + flex-direction: column; + border: 1.5px solid transparent; + background: #fff; + background-clip: padding-box; + border-radius: 5px; + &::before { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: -1; + margin: -1.5px; + border-radius: inherit; + background: linear-gradient(to right, #ff3d00, #ffa800); + } + b { + width: 38px; + height: 35px; + line-height: 35px; + text-align: center; + color: #000; + font-weight: 700; + position: relative; + font-size: 20px; + &::after { + content: ":"; + position: absolute; + right: -15px; + font-size: 24px; + background: var(--Linear, linear-gradient(90deg, #ff3d00 3.91%, #ffa800 100%)); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + } + &:last-child b { + margin: 0; + &::after { + content: none; + } + } + } + } + .box-input-price { + margin-bottom: 10px; + span { + margin-right: 5px; + } + .input-price { + height: 50px; + width: 135px; + border: 1px solid #b1b1b1; + border-radius: 4px; + font-size: 20px; + color: #e70000; + text-align: center; + text-transform: uppercase; + font-weight: 700; + } + a { + display: block; + width: 50px; + height: 50px; + margin-left: 6px; + line-height: 50px; + text-align: center; + border: 1px solid #b1b1b1; + border-radius: 4px; + i { + color: #777474; + } + &.plus-price { + position: relative; + border: 1.5px solid transparent; + background: #fff; + background-clip: padding-box; + border-radius: 5px; + &::before { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: -1; + margin: -1.5px; + border-radius: inherit; + background: linear-gradient(to right, #ff3d00, #ffa800); + } + i { + color: #ff4d00; + } + } + } + } + .btn-add-auction { + display: block; + width: 100%; + height: 65px; + background: var(--Linear, linear-gradient(0deg, #8b0009 0%, #f80009 100%)); + border-radius: 30px; + margin: 20px 0; + text-align: center; + line-height: 65px; + font-size: 24px; + font-weight: 600; + color: #fff; + } + } + .box-spec-deposit { + margin-bottom: 40px; + } + .box-specification { + width: 50%; + margin-right: 15px; + } + .box-auction-deposit { + width: calc(50% - 15px); + } + .box-participant-list { + .title { + font-size: 20px; + color: #e70000; + font-weight: 700; + padding-bottom: 10px; + border-bottom: 1px solid #7a7a7a; + } + td { + border-bottom: 1px solid #e6e6e6; + padding: 10px; + font-weight: 500; + } + tr:first-child { + td { + img { + margin-right: 5px; + } + span { + color: #2546bb; + } + } + } + .content { + max-height: 180px; + overflow-x: auto; + } + } + .box-specification { + .title { + font-size: 20px; + color: #e70000; + font-weight: 700; + padding-bottom: 10px; + border-bottom: 1px solid #dadada; + } + .content { + position: relative; + height: 287px; + overflow: hidden; + &::after { + position: absolute; + content: ""; + background: linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, 0) 100%); + width: 100%; + height: 65px; + z-index: 1; + bottom: 0; + left: 0; + } + } + .more { + display: block; + width: 110px; + height: 30px; + line-height: 30px; + margin: 0 auto; + text-align: center; + border: 1px solid #3e5ed0; + border-radius: 30px; + color: #3e5ed0; + font-weight: 500; + } + } + .box-auction-deposit { + .title { + font-size: 20px; + color: #e70000; + font-weight: 700; + padding-bottom: 10px; + border-bottom: 1px solid #dadada; + } + .content { + p { + margin-bottom: 5px; + line-height: 23px; + } + img { + height: 120px; + margin-right: 10px; + } + } + } +} diff --git a/assets/images/banner.png b/assets/images/banner.png new file mode 100644 index 0000000..cf972f4 Binary files /dev/null and b/assets/images/banner.png differ diff --git a/assets/images/icon-phone.png b/assets/images/icon-phone.png new file mode 100644 index 0000000..ee5c0b2 Binary files /dev/null and b/assets/images/icon-phone.png differ diff --git a/assets/images/icon_paint.png b/assets/images/icon_paint.png new file mode 100644 index 0000000..09d1214 Binary files /dev/null and b/assets/images/icon_paint.png differ diff --git a/assets/images/logo.png b/assets/images/logo.png new file mode 100644 index 0000000..d8f17de Binary files /dev/null and b/assets/images/logo.png differ diff --git a/assets/images/product-1.png b/assets/images/product-1.png new file mode 100644 index 0000000..361a6d1 Binary files /dev/null and b/assets/images/product-1.png differ diff --git a/assets/images/qr-code.png b/assets/images/qr-code.png new file mode 100644 index 0000000..df19c26 Binary files /dev/null and b/assets/images/qr-code.png differ diff --git a/dist/data.js b/dist/data.js new file mode 100644 index 0000000..56f2d47 --- /dev/null +++ b/dist/data.js @@ -0,0 +1,104 @@ +"use strict"; +//---- dinh nghia +//----- +// du lieu danh sach san pham +const listproduct_mau = [ + { + productId: 1, + product_name: "HHPC 3D i7 13700KF | 32G | RTX 2060 SUPER 8G | 256 bit | GDDR6", + image: "https://hoanghapccdn.com/media/product/250_3765_pc_anubius_pro_elite_360_v3_black_ha1.jpg", + price: 26390000, + starting_price: 2350000, + from_time: 1703213170286, + to_time: 1703955600000, + status: 'started', + specifications: '
STTMÃ HÀNGTÊN HÀNGTHỜI HẠN BẢO HÀNH
1CPUINTEL COREi7 13700KF up 5.4GHz | 16 CORE | 24 THREAD  36 THÁNG
2MAINASROCK Z690 STEELLEGEND DDR436 THÁNG
3TẢN NHIỆTCOOLER MASTER MASTERLIQUIDML360L CORE ARGB12 THÁNG
4RAM32GB DDR4 3600 MHz(2x16G)36 THÁNG
5SSDLEXARNM620 512GB M.2 2280 PCIe 3.0x4 - RW 3500MB/s36 THÁNG
6VGAPALIT GEFORCE RTX2060 SUPER DUAL 8GB GDDR6 256-bit36 THÁNG
7PSUASUS TUFGAMING 750W - 80 PLUS BRONZE72 THÁNG
8CASEXIGMATEK ANUBIS PRO 4FX - 4FAN 
', + }, { + productId: 2, + product_name: "HHPC 3D LUMION i7 13700KF | 32G | NVIDIA RTX 3070 8G", + image: "https://hoanghapccdn.com/media/product/250_3762_pc_anubius_pro_elite_360_v3_black_ha3.jpg", + price: 29890000, + starting_price: 2250000, + from_time: 1703213170286, + to_time: 1703869200000, + status: 'started', + specifications: '
STTMÃ HÀNGTÊN HÀNGTHỜI HẠN BẢO HÀNH
1CPUINTEL COREi7 13700KF up 5.4GHz | 16 CORE | 24 THREAD  36 THÁNG
2MAINASROCK Z690 STEELLEGEND DDR436 THÁNG
3TẢN NHIỆTCOOLER MASTER MASTERLIQUIDML360L CORE ARGB12 THÁNG
4RAM32GB DDR4 3600 MHz(2x16G)36 THÁNG
5SSDLEXARNM620 512GB M.2 2280 PCIe 3.0x4 - RW 3500MB/s36 THÁNG
6VGAPALIT GEFORCE RTX2060 SUPER DUAL 8GB GDDR6 256-bit36 THÁNG
7PSUASUS TUFGAMING 750W - 80 PLUS BRONZE72 THÁNG
8CASEXIGMATEK ANUBIS PRO 4FX - 4FAN 
', + }, { + productId: 3, + product_name: "HHPC 3D i7 13700KF | 32G | NVIDIA RTX 3060 12G", + image: "https://hoanghapccdn.com/media/product/250_3761_pc_anubius_pro_elite_360_v3_black_ha3.jpg", + price: 27390000, + starting_price: 2550000, + from_time: 1703350800000, + to_time: 1703955600000, + status: 'coming', + specifications: '
STTMÃ HÀNGTÊN HÀNGTHỜI HẠN BẢO HÀNH
1CPUINTEL COREi7 13700KF up 5.4GHz | 16 CORE | 24 THREAD  36 THÁNG
2MAINASROCK Z690 STEELLEGEND DDR436 THÁNG
3TẢN NHIỆTCOOLER MASTER MASTERLIQUIDML360L CORE ARGB12 THÁNG
4RAM32GB DDR4 3600 MHz(2x16G)36 THÁNG
5SSDLEXARNM620 512GB M.2 2280 PCIe 3.0x4 - RW 3500MB/s36 THÁNG
6VGAPALIT GEFORCE RTX2060 SUPER DUAL 8GB GDDR6 256-bit36 THÁNG
7PSUASUS TUFGAMING 750W - 80 PLUS BRONZE72 THÁNG
8CASEXIGMATEK ANUBIS PRO 4FX - 4FAN 
', + }, { + productId: 4, + product_name: "HHPC 3D LUMION i9 13900K | 64G DDR5 | NVIDIA RTX 4090 24GB", + image: "https://hoanghapccdn.com/media/product/250_3738_hhpc_case_gank_360_ha3.jpg", + price: 91390000, + starting_price: 81390000, + from_time: 1703213170286, + to_time: 1703955600000, + status: 'started', + specifications: '
STTMÃ HÀNGTÊN HÀNGTHỜI HẠN BẢO HÀNH
1CPUINTEL COREi7 13700KF up 5.4GHz | 16 CORE | 24 THREAD  36 THÁNG
2MAINASROCK Z690 STEELLEGEND DDR436 THÁNG
3TẢN NHIỆTCOOLER MASTER MASTERLIQUIDML360L CORE ARGB12 THÁNG
4RAM32GB DDR4 3600 MHz(2x16G)36 THÁNG
5SSDLEXARNM620 512GB M.2 2280 PCIe 3.0x4 - RW 3500MB/s36 THÁNG
6VGAPALIT GEFORCE RTX2060 SUPER DUAL 8GB GDDR6 256-bit36 THÁNG
7PSUASUS TUFGAMING 750W - 80 PLUS BRONZE72 THÁNG
8CASEXIGMATEK ANUBIS PRO 4FX - 4FAN 
', + }, { + productId: 5, + product_name: "HHPC BLACK RGB i9 12900K | 32G | NVIDIA RTX 3060 12G", + image: "https://hoanghapccdn.com/media/product/250_3668_pc_anubius_pro_elite_360_v3_rgb_ha3.jpg", + price: 27850000, + starting_price: 25850000, + from_time: 1703213170286, + to_time: 1703955600000, + status: 'started', + specifications: '
STTMÃ HÀNGTÊN HÀNGTHỜI HẠN BẢO HÀNH
1CPUINTEL COREi7 13700KF up 5.4GHz | 16 CORE | 24 THREAD  36 THÁNG
2MAINASROCK Z690 STEELLEGEND DDR436 THÁNG
3TẢN NHIỆTCOOLER MASTER MASTERLIQUIDML360L CORE ARGB12 THÁNG
4RAM32GB DDR4 3600 MHz(2x16G)36 THÁNG
5SSDLEXARNM620 512GB M.2 2280 PCIe 3.0x4 - RW 3500MB/s36 THÁNG
6VGAPALIT GEFORCE RTX2060 SUPER DUAL 8GB GDDR6 256-bit36 THÁNG
7PSUASUS TUFGAMING 750W - 80 PLUS BRONZE72 THÁNG
8CASEXIGMATEK ANUBIS PRO 4FX - 4FAN 
', + }, { + productId: 6, + product_name: "HHHPC 3D LUMION i9 13900K | 32G | NVIDIA RTX 3060 12GB", + image: "https://hoanghapccdn.com/media/product/250_3735_hhpc_anubis_pro_4fx_ram_black_ha3.jpg", + price: 32290000, + starting_price: 22290000, + from_time: 1703213170286, + to_time: 1703955600000, + status: 'started', + specifications: '
STTMÃ HÀNGTÊN HÀNGTHỜI HẠN BẢO HÀNH
1CPUINTEL COREi7 13700KF up 5.4GHz | 16 CORE | 24 THREAD  36 THÁNG
2MAINASROCK Z690 STEELLEGEND DDR436 THÁNG
3TẢN NHIỆTCOOLER MASTER MASTERLIQUIDML360L CORE ARGB12 THÁNG
4RAM32GB DDR4 3600 MHz(2x16G)36 THÁNG
5SSDLEXARNM620 512GB M.2 2280 PCIe 3.0x4 - RW 3500MB/s36 THÁNG
6VGAPALIT GEFORCE RTX2060 SUPER DUAL 8GB GDDR6 256-bit36 THÁNG
7PSUASUS TUFGAMING 750W - 80 PLUS BRONZE72 THÁNG
8CASEXIGMATEK ANUBIS PRO 4FX - 4FAN 
', + }, { + productId: 7, + product_name: "HHPC ADOBE i7 13700KF | 32G | RTX 2060 SUPER 8G | 256 bit | GDDR6", + image: "https://hoanghapccdn.com/media/product/250_3756_pc_anubius_pro_elite_360_v3_black_ha4.jpg", + price: 26390000, + starting_price: 16390000, + from_time: 1703350800000, + to_time: 1703955600000, + status: 'coming', + specifications: '
STTMÃ HÀNGTÊN HÀNGTHỜI HẠN BẢO HÀNH
1CPUINTEL COREi7 13700KF up 5.4GHz | 16 CORE | 24 THREAD  36 THÁNG
2MAINASROCK Z690 STEELLEGEND DDR436 THÁNG
3TẢN NHIỆTCOOLER MASTER MASTERLIQUIDML360L CORE ARGB12 THÁNG
4RAM32GB DDR4 3600 MHz(2x16G)36 THÁNG
5SSDLEXARNM620 512GB M.2 2280 PCIe 3.0x4 - RW 3500MB/s36 THÁNG
6VGAPALIT GEFORCE RTX2060 SUPER DUAL 8GB GDDR6 256-bit36 THÁNG
7PSUASUS TUFGAMING 750W - 80 PLUS BRONZE72 THÁNG
8CASEXIGMATEK ANUBIS PRO 4FX - 4FAN 
', + }, { + productId: 8, + product_name: "Bàn phím cơ Gaming MSI Vigor GK50 Elite Black", + image: "https://hoanghapccdn.com/media/product/4807_msi_vigor_gk50_elite_black_ha1.jpg", + price: 1890000, + starting_price: 890000, + from_time: 1703264400000, + to_time: 1703215914798, + status: 'ended', + specifications: '
STTMÃ HÀNGTÊN HÀNGTHỜI HẠN BẢO HÀNH
1CPUINTEL COREi7 13700KF up 5.4GHz | 16 CORE | 24 THREAD  36 THÁNG
2MAINASROCK Z690 STEELLEGEND DDR436 THÁNG
3TẢN NHIỆTCOOLER MASTER MASTERLIQUIDML360L CORE ARGB12 THÁNG
4RAM32GB DDR4 3600 MHz(2x16G)36 THÁNG
5SSDLEXARNM620 512GB M.2 2280 PCIe 3.0x4 - RW 3500MB/s36 THÁNG
6VGAPALIT GEFORCE RTX2060 SUPER DUAL 8GB GDDR6 256-bit36 THÁNG
7PSUASUS TUFGAMING 750W - 80 PLUS BRONZE72 THÁNG
8CASEXIGMATEK ANUBIS PRO 4FX - 4FAN 
', + }, +]; +const du_lieu_thongtindaugia = [ + { + productId: 1, + listUser: [ + { + userName: 'Mai phương', + price: 450000, + time: 1703132219576, + }, + { + userName: 'Quang Đỗ', + price: 360000, + time: 1703132219576, + }, + ] + } +]; diff --git a/dist/detail.js b/dist/detail.js new file mode 100644 index 0000000..a087cec --- /dev/null +++ b/dist/detail.js @@ -0,0 +1,44 @@ +"use strict"; +var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { + function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } + return new (P || (P = Promise))(function (resolve, reject) { + function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } + function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } + function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } + step((generator = generator.apply(thisArg, _arguments || [])).next()); + }); +}; +function get_sp_tu_api() { + return __awaiter(this, void 0, void 0, function* () { + return new Promise((resolve, reject) => { + return resolve(listproduct_mau); + }); + }); +} +function show_info_product() { + return __awaiter(this, void 0, void 0, function* () { + const lay_thongtin_sp = yield get_sp_tu_api(); + // code hien thi danh sach dang dien ra + show_product_detail(lay_thongtin_sp); + }); +} +function GetURLParameter(sParam, url) { + var url_decode = decodeURIComponent(url); + var sPageURL = url_decode; + var sURLVariables = sPageURL.split('?'); + for (var i = 0; i < sURLVariables.length; i++) { + var sParameterName = sURLVariables[i].split('='); + if (sParameterName[0] == sParam) { + return sParameterName[1]; + } + } +} +function show_product_detail(lay_thongtin_sp) { + const IdProduct = Number(GetURLParameter('id', window.location.href)); + lay_thongtin_sp + .filter((product) => product.productId == IdProduct) + .forEach(function (product, keyIndex) { + console.log(product); + }); +} +show_info_product(); diff --git a/dist/main.js b/dist/main.js new file mode 100644 index 0000000..da1fd3e --- /dev/null +++ b/dist/main.js @@ -0,0 +1,133 @@ +"use strict"; +var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { + function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } + return new (P || (P = Promise))(function (resolve, reject) { + function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } + function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } + function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } + step((generator = generator.apply(thisArg, _arguments || [])).next()); + }); +}; +function goi_sp_tu_api() { + return __awaiter(this, void 0, void 0, function* () { + return new Promise((resolve, reject) => { + return resolve(listproduct_mau); + }); + }); +} +function hienthi_sp() { + return __awaiter(this, void 0, void 0, function* () { + const lay_sp_tu_api = yield goi_sp_tu_api(); + // code hien thi danh sach dang dien ra + // Usage example: + showListProductHome(lay_sp_tu_api, 'started', 'js-holder-list-started'); + showListProductHome(lay_sp_tu_api, 'coming', 'js-holder-list-coming'); + showListProductHome(lay_sp_tu_api, 'ended', 'js-holder-list-ended'); + }); +} +function showListProductHome(lay_sp_tu_api, status, holderId) { + const html = []; + const holder = document.getElementById(holderId); + lay_sp_tu_api + .filter((product) => product.status == status) + .forEach(function (product, keyIndex) { + html.push(xayhtml(product)); + if (status != 'ended' || product.to_time > product.from_time) { + const countdownTime = (status == 'started') ? product.to_time : product.from_time; + countDown(`js-deal-time-${product.productId}`, countdownTime); + } + }); + if (holder) { + holder.innerHTML = html.join(''); + } +} +function xayhtml(product) { + var Htmlcheckstatus = ''; + if (product.status == 'started') { + Htmlcheckstatus = `
+
Còn lại:
+
+
+
+ Đấu giá ngay`; + } + else if (product.status == 'coming') { + Htmlcheckstatus = `
+
Bắt đầu sau:
+
+
+
+ Xem chi tiết`; + } + else if (product.to_time < Date.now()) { + Htmlcheckstatus = `
Thắng cuộc ${formatPrice(product.starting_price)}đ
+
+
Đã kết thúc
+
+Xem chi tiết`; + } + return `
+ + ${product.product_name} + +
+ ${product.product_name} +
+ Giá gốc: ${formatPrice(product.price)}đ +
+ ${Htmlcheckstatus} +
+
+ `; +} +function formatPrice(price) { + var b = price.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1.").toString(); + var len = b.length; + b = b.substring(0, len - 3); + return b; +} +function countDown(iid, endTime) { + const updateCountdown = () => { + const now = Date.now(); + const distance = endTime - now; + if (distance > 0) { + const [days, hours, minutes, seconds] = getTimeComponents(distance); + displayCountdown(iid, days, hours, minutes, seconds); + } + else { + clearInterval(timer); + } + }; + // Initial update to avoid delay + updateCountdown(); + const timer = setInterval(updateCountdown, 1000); +} +function getTimeComponents(distance) { + const days = Math.floor(distance / (1000 * 60 * 60 * 24)); + const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); + const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); + const seconds = Math.floor((distance % (1000 * 60)) / 1000); + return [days, hours, minutes, seconds]; +} +function displayCountdown(iid, days, hours, minutes, seconds) { + const element = document.querySelector(`.${iid}`); + if (element) { + if (days > 0) { + element.innerHTML = ` +
${formatTimeComponent(days)}
+
${formatTimeComponent(hours)}
+
${formatTimeComponent(minutes)}
+
${formatTimeComponent(seconds)}
`; + } + else { + element.innerHTML = ` +
${formatTimeComponent(hours)}
+
${formatTimeComponent(minutes)}
+
${formatTimeComponent(seconds)}
`; + } + } +} +function formatTimeComponent(component) { + return component <= 9 ? '0' + component : component.toString(); +} +hienthi_sp(); diff --git a/index.html b/index.html new file mode 100644 index 0000000..21256c8 --- /dev/null +++ b/index.html @@ -0,0 +1,513 @@ + + + + + + + Chương trình đấu giá trực tuyết + + + + + + +
+
+
+ + + Chào phương ! + + +
+
+ +
+
+ +
+
+
+

Đang diễn ra

+
+
+ + + +
+ Máy tính bảng TCL Tab 11 WIFI 4GB 128GB +
+ Giá gốc 4.990.000đ +
+
Khởi điểm 2.350.000đ
+
+
Còn lại:
+
+
20
+
11
+
30
+
+
+ Đấu giá ngay +
+
+
+ + + +
+ Máy tính bảng TCL Tab 11 WIFI 4GB 128GB +
+ Giá gốc 4.990.000đ +
+
Khởi điểm 2.350.000đ
+
+
Còn lại:
+
+
20
+
11
+
30
+
+
+ Đấu giá ngay +
+
+
+ + + +
+ Máy tính bảng TCL Tab 11 WIFI 4GB 128GB +
+ Giá gốc 4.990.000đ +
+
Khởi điểm 2.350.000đ
+
+
Còn lại:
+
+
20
+
11
+
30
+
+
+ Đấu giá ngay +
+
+
+ + + +
+ Máy tính bảng TCL Tab 11 WIFI 4GB 128GB +
+ Giá gốc 4.990.000đ +
+
Khởi điểm 2.350.000đ
+
+
Còn lại:
+
+
20
+
11
+
30
+
+
+ Đấu giá ngay +
+
+
+ + + +
+ Máy tính bảng TCL Tab 11 WIFI 4GB 128GB +
+ Giá gốc 4.990.000đ +
+
Khởi điểm 2.350.000đ
+
+
Còn lại:
+
+
20
+
11
+
30
+
+
+ Đấu giá ngay +
+
+
+ + + +
+ Máy tính bảng TCL Tab 11 WIFI 4GB 128GB +
+ Giá gốc 4.990.000đ +
+
Khởi điểm 2.350.000đ
+
+
Còn lại:
+
+
20
+
11
+
30
+
+
+ Đấu giá ngay +
+
+
+
+
+

Sắp diễn ra

+
+
+ + + +
+ Máy tính bảng TCL Tab 11 WIFI 4GB 128GB +
+ Giá gốc 4.990.000đ +
+
Khởi điểm 2.350.000đ
+
+
Còn lại:
+
+
20
+
11
+
30
+
+
+ Đấu giá ngay +
+
+
+ + + +
+ Máy tính bảng TCL Tab 11 WIFI 4GB 128GB +
+ Giá gốc 4.990.000đ +
+
Khởi điểm 2.350.000đ
+
+
Còn lại:
+
+
20
+
11
+
30
+
+
+ Đấu giá ngay +
+
+
+ + + +
+ Máy tính bảng TCL Tab 11 WIFI 4GB 128GB +
+ Giá gốc 4.990.000đ +
+
Khởi điểm 2.350.000đ
+
+
Còn lại:
+
+
20
+
11
+
30
+
+
+ Đấu giá ngay +
+
+
+ + + +
+ Máy tính bảng TCL Tab 11 WIFI 4GB 128GB +
+ Giá gốc 4.990.000đ +
+
Khởi điểm 2.350.000đ
+
+
Còn lại:
+
+
20
+
11
+
30
+
+
+ Đấu giá ngay +
+
+
+ + + +
+ Máy tính bảng TCL Tab 11 WIFI 4GB 128GB +
+ Giá gốc 4.990.000đ +
+
Khởi điểm 2.350.000đ
+
+
Còn lại:
+
+
20
+
11
+
30
+
+
+ Đấu giá ngay +
+
+
+ + + +
+ Máy tính bảng TCL Tab 11 WIFI 4GB 128GB +
+ Giá gốc 4.990.000đ +
+
Khởi điểm 2.350.000đ
+
+
Còn lại:
+
+
20
+
11
+
30
+
+
+ Đấu giá ngay +
+
+
+
+
+

Đã kết thúc

+
+
+ + + +
+ Máy tính bảng TCL Tab 11 WIFI 4GB 128GB +
+ Giá gốc 4.990.000đ +
+
Khởi điểm 2.350.000đ
+
+
Còn lại:
+
+
20
+
11
+
30
+
+
+ Đấu giá ngay +
+
+
+ + + +
+ Máy tính bảng TCL Tab 11 WIFI 4GB 128GB +
+ Giá gốc 4.990.000đ +
+
Khởi điểm 2.350.000đ
+
+
Còn lại:
+
+
20
+
11
+
30
+
+
+ Đấu giá ngay +
+
+
+ + + +
+ Máy tính bảng TCL Tab 11 WIFI 4GB 128GB +
+ Giá gốc 4.990.000đ +
+
Khởi điểm 2.350.000đ
+
+
Còn lại:
+
+
20
+
11
+
30
+
+
+ Đấu giá ngay +
+
+
+ + + +
+ Máy tính bảng TCL Tab 11 WIFI 4GB 128GB +
+ Giá gốc 4.990.000đ +
+
Khởi điểm 2.350.000đ
+
+
Còn lại:
+
+
20
+
11
+
30
+
+
+ Đấu giá ngay +
+
+
+ + + +
+ Máy tính bảng TCL Tab 11 WIFI 4GB 128GB +
+ Giá gốc 4.990.000đ +
+
Khởi điểm 2.350.000đ
+
+
Còn lại:
+
+
20
+
11
+
30
+
+
+ Đấu giá ngay +
+
+
+ + + +
+ Máy tính bảng TCL Tab 11 WIFI 4GB 128GB +
+ Giá gốc 4.990.000đ +
+
Khởi điểm 2.350.000đ
+
+
Còn lại:
+
+
20
+
11
+
30
+
+
+ Đấu giá ngay +
+
+
+
+
+
+
+ +
+
+
+

Câu hỏi thường gặp

+
+
+ +
+
+ Rất dễ dàng, ,tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet +
+
+
+
+ +
+
+ Rất dễ dàng, ,tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet +
+
+
+
+ +
+
+ Rất dễ dàng, ,tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet +
+
+
+
+
+
+
+
+
+
+
+

CÔNG TY TNHH DỊCH VỤ VÀ CÔNG NGHỆ HOÀNG HÀ ©

+

+ 2008 - 2020 - Công ty TNHH Dịch Vụ Và Công Nghệ Hoàng Hà / GPKD số:0107406972 Do Sở Kế Hoạch Và + Đầu + Tư Thành Phố Hà Nội Cấp Bản Quyền Thuộc Về hoanghapc.vn +

+
+
+ +
+ Tổng đài hỗ trợ miễn phí + 1800.xxxx +
+ phone + +
+
+
+
+ + + + + + + \ No newline at end of file diff --git a/product-detail.html b/product-detail.html new file mode 100644 index 0000000..bc3eecb --- /dev/null +++ b/product-detail.html @@ -0,0 +1,445 @@ + + + + + + + Chương trình đấu giá trực tuyết + + + + + + +
+
+
+ + + Chào phương ! + + +
+
+
+
+
+
+
    +
  1. + + Trang chủ + + +
    2. +
  2. + + Đang diễn ra + + +
    3. +
+
+
+ +
+
+ + + +
+
+

Máy tính bảng TCL Tab 11 WIFI 4GB 128GB

+
+
+
Khởi điểm:
+ 2.350.000đ +
+
+
Bước giá:
+ 2.350.000đ +
+
+
+
Giá cao nhất hiện tại:
+ 4.500.000đ +
+
Số người đang tham gia: 200 người
+
+ Thời gian còn lại: +
+
20
+
11
+
30
+
+
+
+ Nhập giá đấu của bạn + + + +
+ + Đấu giá ngay + +
+

Diễn biến đấu giá

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + Mai phương +
+ 		+ 4.500.000đ + + 14:30:40 15/12/2023 +
+ Mai phương + + 4.500.000đ + + 14:30:40 15/12/2023 +
+ Mai phương + + 4.500.000đ + + 14:30:40 15/12/2023 +
+ Mai phương + + 4.500.000đ + + 14:30:40 15/12/2023 +
+ Mai phương + + 4.500.000đ + + 14:30:40 15/12/2023 +
+ Mai phương + + 4.500.000đ + + 14:30:40 15/12/2023 +
+ Mai phương + + 4.500.000đ + + 14:30:40 15/12/2023 +
+ Mai phương + + 4.500.000đ + + 14:30:40 15/12/2023 +
+ Mai phương + + 4.500.000đ + + 14:30:40 15/12/2023 +
+ Mai phương + + 4.500.000đ + + 14:30:40 15/12/2023 +
+
+
+
+
+
+
+

Thông tin sản phẩm

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
STTMÃ HÀNGTÊN HÀNGTHỜI HẠN BẢO HÀNH
1CPUINTEL + COREi7 13700KF up 5.4GHz | 16 CORE | 24 + THREAD  36 THÁNG
2MAIN + ASROCK + Z690 STEELLEGEND DDR4 + + 36 THÁNG
3TẢN NHIỆT + + COOLER MASTER + MASTERLIQUIDML360L CORE ARGB + 12 THÁNG
4RAM + + 32GB DDR4 3600 + MHz(2x16G) + 36 THÁNG
5SSDLEXARNM620 + 512GB M.2 2280 PCIe 3.0x4 - + RW 3500MB/s36 THÁNG
6VGA + PALIT + GEFORCE RTX2060 + SUPER DUAL 8GB GDDR6 256-bit + 36 THÁNG
7PSUASUS + TUFGAMING 750W - 80 PLUS BRONZE72 THÁNG
8CASE + XIGMATEK + ANUBIS PRO 4FX - 4FAN + +  
6VGA + PALIT + GEFORCE RTX2060 + SUPER DUAL 8GB GDDR6 256-bit + 36 THÁNG
7PSUASUS + TUFGAMING 750W - 80 PLUS BRONZE72 THÁNG
8CASE + XIGMATEK + ANUBIS PRO 4FX - 4FAN + +  
+
+ Xem thêm +
+
+

Thông tin đặt cọc đấu giá

+
+

Quý khách vui lòng làm theo các bước sau đây.

+
+ Bước 1: + Đặt cọc 500.000 VND vào STK bên dưới +
+
+ Bước 2: + Kiểm tra email để nhận thông tin xác nhận đặt cọc thành công từ Hoàng Hà PC gửi + đến (Lưu ý: kiểm tra tất cả các hộp thư bao gồm cả thư + rác) Trường hợp nếu không nhận được email, quý khách vui lòng gửi hình ảnh giao dịch qua + Zalo: 0909000000 để được hỗ trợ nhanh nhất. + +
+ Thông tin tài khoản nhận cọc: +
+ +
+ CÔNG TY CP THƯƠNG MẠI DỊCH VỤ ACB +

Ngân hàng: Techcombank

+

Số tài khoản: 9999998888

+

Nội dung thanh toán: [ID tài khoản] - [Mã SP cọc]

+
+
+
+
+
+
+
+
+
+
+

Câu hỏi thường gặp

+
+
+ +
+
+ Rất dễ dàng, ,tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet +
+
+
+
+ +
+
+ Rất dễ dàng, ,tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet +
+
+
+
+ +
+
+ Rất dễ dàng, ,tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet +
+
+
+
+
+
+
+
+
+
+
+

CÔNG TY TNHH DỊCH VỤ VÀ CÔNG NGHỆ HOÀNG HÀ ©

+

+ 2008 - 2020 - Công ty TNHH Dịch Vụ Và Công Nghệ Hoàng Hà / GPKD số:0107406972 Do Sở Kế Hoạch Và + Đầu + Tư Thành Phố Hà Nội Cấp Bản Quyền Thuộc Về hoanghapc.vn +

+
+
+ +
+ Tổng đài hỗ trợ miễn phí + 1800.xxxx +
+ phone + +
+
+
+
+ + + + + + + \ No newline at end of file diff --git a/src/data.ts b/src/data.ts new file mode 100644 index 0000000..93bd67a --- /dev/null +++ b/src/data.ts @@ -0,0 +1,131 @@ + +//---- dinh nghia + +type ProductInfo = { + productId: number, + product_name: string; + image: string; + price: number; + starting_price: number; + from_time: number; + to_time: number; + status: string; + specifications: string; +}; + +type infoUser = { + userName: string, + price: number, + time: number, +} +type thongtinkhachhangdaugia = { + productId: number, + listUser: infoUser[] +} + +//----- + +// du lieu danh sach san pham +const listproduct_mau: ProductInfo[] = [ + { + productId: 1, + product_name: "HHPC 3D i7 13700KF | 32G | RTX 2060 SUPER 8G | 256 bit | GDDR6", + image: "https://hoanghapccdn.com/media/product/250_3765_pc_anubius_pro_elite_360_v3_black_ha1.jpg", + price: 26390000, + starting_price: 2350000, + from_time: 1703213170286, + to_time: 1703955600000, + status: 'started', + specifications: '
STTMÃ HÀNGTÊN HÀNGTHỜI HẠN BẢO HÀNH
1CPUINTEL COREi7 13700KF up 5.4GHz | 16 CORE | 24 THREAD  36 THÁNG
2MAINASROCK Z690 STEELLEGEND DDR436 THÁNG
3TẢN NHIỆTCOOLER MASTER MASTERLIQUIDML360L CORE ARGB12 THÁNG
4RAM32GB DDR4 3600 MHz(2x16G)36 THÁNG
5SSDLEXARNM620 512GB M.2 2280 PCIe 3.0x4 - RW 3500MB/s36 THÁNG
6VGAPALIT GEFORCE RTX2060 SUPER DUAL 8GB GDDR6 256-bit36 THÁNG
7PSUASUS TUFGAMING 750W - 80 PLUS BRONZE72 THÁNG
8CASEXIGMATEK ANUBIS PRO 4FX - 4FAN 
', + }, { + productId: 2, + product_name: "HHPC 3D LUMION i7 13700KF | 32G | NVIDIA RTX 3070 8G", + image: "https://hoanghapccdn.com/media/product/250_3762_pc_anubius_pro_elite_360_v3_black_ha3.jpg", + price: 29890000, + starting_price: 2250000, + from_time: 1703213170286, + to_time: 1703869200000, + status: 'started', + specifications: '
STTMÃ HÀNGTÊN HÀNGTHỜI HẠN BẢO HÀNH
1CPUINTEL COREi7 13700KF up 5.4GHz | 16 CORE | 24 THREAD  36 THÁNG
2MAINASROCK Z690 STEELLEGEND DDR436 THÁNG
3TẢN NHIỆTCOOLER MASTER MASTERLIQUIDML360L CORE ARGB12 THÁNG
4RAM32GB DDR4 3600 MHz(2x16G)36 THÁNG
5SSDLEXARNM620 512GB M.2 2280 PCIe 3.0x4 - RW 3500MB/s36 THÁNG
6VGAPALIT GEFORCE RTX2060 SUPER DUAL 8GB GDDR6 256-bit36 THÁNG
7PSUASUS TUFGAMING 750W - 80 PLUS BRONZE72 THÁNG
8CASEXIGMATEK ANUBIS PRO 4FX - 4FAN 
', + }, { + productId: 3, + product_name: "HHPC 3D i7 13700KF | 32G | NVIDIA RTX 3060 12G", + image: "https://hoanghapccdn.com/media/product/250_3761_pc_anubius_pro_elite_360_v3_black_ha3.jpg", + price: 27390000, + starting_price: 2550000, + from_time: 1703350800000, + to_time: 1703955600000, + status: 'coming', + specifications: '
STTMÃ HÀNGTÊN HÀNGTHỜI HẠN BẢO HÀNH
1CPUINTEL COREi7 13700KF up 5.4GHz | 16 CORE | 24 THREAD  36 THÁNG
2MAINASROCK Z690 STEELLEGEND DDR436 THÁNG
3TẢN NHIỆTCOOLER MASTER MASTERLIQUIDML360L CORE ARGB12 THÁNG
4RAM32GB DDR4 3600 MHz(2x16G)36 THÁNG
5SSDLEXARNM620 512GB M.2 2280 PCIe 3.0x4 - RW 3500MB/s36 THÁNG
6VGAPALIT GEFORCE RTX2060 SUPER DUAL 8GB GDDR6 256-bit36 THÁNG
7PSUASUS TUFGAMING 750W - 80 PLUS BRONZE72 THÁNG
8CASEXIGMATEK ANUBIS PRO 4FX - 4FAN 
', + }, { + productId: 4, + product_name: "HHPC 3D LUMION i9 13900K | 64G DDR5 | NVIDIA RTX 4090 24GB", + image: "https://hoanghapccdn.com/media/product/250_3738_hhpc_case_gank_360_ha3.jpg", + price: 91390000, + starting_price: 81390000, + from_time: 1703213170286, + to_time: 1703955600000, + status: 'started', + specifications: '
STTMÃ HÀNGTÊN HÀNGTHỜI HẠN BẢO HÀNH
1CPUINTEL COREi7 13700KF up 5.4GHz | 16 CORE | 24 THREAD  36 THÁNG
2MAINASROCK Z690 STEELLEGEND DDR436 THÁNG
3TẢN NHIỆTCOOLER MASTER MASTERLIQUIDML360L CORE ARGB12 THÁNG
4RAM32GB DDR4 3600 MHz(2x16G)36 THÁNG
5SSDLEXARNM620 512GB M.2 2280 PCIe 3.0x4 - RW 3500MB/s36 THÁNG
6VGAPALIT GEFORCE RTX2060 SUPER DUAL 8GB GDDR6 256-bit36 THÁNG
7PSUASUS TUFGAMING 750W - 80 PLUS BRONZE72 THÁNG
8CASEXIGMATEK ANUBIS PRO 4FX - 4FAN 
', + }, { + productId: 5, + product_name: "HHPC BLACK RGB i9 12900K | 32G | NVIDIA RTX 3060 12G", + image: "https://hoanghapccdn.com/media/product/250_3668_pc_anubius_pro_elite_360_v3_rgb_ha3.jpg", + price: 27850000, + starting_price: 25850000, + from_time: 1703213170286, + to_time: 1703955600000, + status: 'started', + specifications: '
STTMÃ HÀNGTÊN HÀNGTHỜI HẠN BẢO HÀNH
1CPUINTEL COREi7 13700KF up 5.4GHz | 16 CORE | 24 THREAD  36 THÁNG
2MAINASROCK Z690 STEELLEGEND DDR436 THÁNG
3TẢN NHIỆTCOOLER MASTER MASTERLIQUIDML360L CORE ARGB12 THÁNG
4RAM32GB DDR4 3600 MHz(2x16G)36 THÁNG
5SSDLEXARNM620 512GB M.2 2280 PCIe 3.0x4 - RW 3500MB/s36 THÁNG
6VGAPALIT GEFORCE RTX2060 SUPER DUAL 8GB GDDR6 256-bit36 THÁNG
7PSUASUS TUFGAMING 750W - 80 PLUS BRONZE72 THÁNG
8CASEXIGMATEK ANUBIS PRO 4FX - 4FAN 
', + }, { + productId: 6, + product_name: "HHHPC 3D LUMION i9 13900K | 32G | NVIDIA RTX 3060 12GB", + image: "https://hoanghapccdn.com/media/product/250_3735_hhpc_anubis_pro_4fx_ram_black_ha3.jpg", + price: 32290000, + starting_price: 22290000, + from_time: 1703213170286, + to_time: 1703955600000, + status: 'started', + specifications: '
STTMÃ HÀNGTÊN HÀNGTHỜI HẠN BẢO HÀNH
1CPUINTEL COREi7 13700KF up 5.4GHz | 16 CORE | 24 THREAD  36 THÁNG
2MAINASROCK Z690 STEELLEGEND DDR436 THÁNG
3TẢN NHIỆTCOOLER MASTER MASTERLIQUIDML360L CORE ARGB12 THÁNG
4RAM32GB DDR4 3600 MHz(2x16G)36 THÁNG
5SSDLEXARNM620 512GB M.2 2280 PCIe 3.0x4 - RW 3500MB/s36 THÁNG
6VGAPALIT GEFORCE RTX2060 SUPER DUAL 8GB GDDR6 256-bit36 THÁNG
7PSUASUS TUFGAMING 750W - 80 PLUS BRONZE72 THÁNG
8CASEXIGMATEK ANUBIS PRO 4FX - 4FAN 
', + }, { + productId: 7, + product_name: "HHPC ADOBE i7 13700KF | 32G | RTX 2060 SUPER 8G | 256 bit | GDDR6", + image: "https://hoanghapccdn.com/media/product/250_3756_pc_anubius_pro_elite_360_v3_black_ha4.jpg", + price: 26390000, + starting_price: 16390000, + from_time: 1703350800000, + to_time: 1703955600000, + status: 'coming', + specifications: '
STTMÃ HÀNGTÊN HÀNGTHỜI HẠN BẢO HÀNH
1CPUINTEL COREi7 13700KF up 5.4GHz | 16 CORE | 24 THREAD  36 THÁNG
2MAINASROCK Z690 STEELLEGEND DDR436 THÁNG
3TẢN NHIỆTCOOLER MASTER MASTERLIQUIDML360L CORE ARGB12 THÁNG
4RAM32GB DDR4 3600 MHz(2x16G)36 THÁNG
5SSDLEXARNM620 512GB M.2 2280 PCIe 3.0x4 - RW 3500MB/s36 THÁNG
6VGAPALIT GEFORCE RTX2060 SUPER DUAL 8GB GDDR6 256-bit36 THÁNG
7PSUASUS TUFGAMING 750W - 80 PLUS BRONZE72 THÁNG
8CASEXIGMATEK ANUBIS PRO 4FX - 4FAN 
', + }, { + productId: 8, + product_name: "Bàn phím cơ Gaming MSI Vigor GK50 Elite Black", + image: "https://hoanghapccdn.com/media/product/4807_msi_vigor_gk50_elite_black_ha1.jpg", + price: 1890000, + starting_price: 890000, + from_time: 1703264400000, + to_time: 1703215914798, + status: 'ended', + specifications: '
STTMÃ HÀNGTÊN HÀNGTHỜI HẠN BẢO HÀNH
1CPUINTEL COREi7 13700KF up 5.4GHz | 16 CORE | 24 THREAD  36 THÁNG
2MAINASROCK Z690 STEELLEGEND DDR436 THÁNG
3TẢN NHIỆTCOOLER MASTER MASTERLIQUIDML360L CORE ARGB12 THÁNG
4RAM32GB DDR4 3600 MHz(2x16G)36 THÁNG
5SSDLEXARNM620 512GB M.2 2280 PCIe 3.0x4 - RW 3500MB/s36 THÁNG
6VGAPALIT GEFORCE RTX2060 SUPER DUAL 8GB GDDR6 256-bit36 THÁNG
7PSUASUS TUFGAMING 750W - 80 PLUS BRONZE72 THÁNG
8CASEXIGMATEK ANUBIS PRO 4FX - 4FAN 
', + }, +]; + +const du_lieu_thongtindaugia: thongtinkhachhangdaugia[] = [ + { + productId: 1, + listUser: [ + { + userName: 'Mai phương', + price: 450000, + time: 1703132219576, + }, + { + userName: 'Quang Đỗ', + price: 360000, + time: 1703132219576, + }, + ] + } +] + + diff --git a/src/detail.ts b/src/detail.ts new file mode 100644 index 0000000..22e0f88 --- /dev/null +++ b/src/detail.ts @@ -0,0 +1,40 @@ +async function get_sp_tu_api(): Promise { + return new Promise((resolve, reject) => { + return resolve(listproduct_mau); + }) +} + + +async function show_info_product() { + const lay_thongtin_sp: ProductInfo[] = await get_sp_tu_api(); + + // code hien thi danh sach dang dien ra + show_product_detail(lay_thongtin_sp); +} + +function GetURLParameter(sParam: string, url: string) { + var url_decode = decodeURIComponent(url); + var sPageURL = url_decode; + var sURLVariables = sPageURL.split('?'); + for (var i = 0; i < sURLVariables.length; i++) { + var sParameterName = sURLVariables[i].split('='); + if (sParameterName[0] == sParam) { + return sParameterName[1]; + } + } +} + + +function show_product_detail(lay_thongtin_sp: ProductInfo[]) { + const IdProduct: number = Number(GetURLParameter('id', window.location.href)); + + + lay_thongtin_sp + .filter((product: ProductInfo) => product.productId == IdProduct) + .forEach(function (product, keyIndex) { + console.log(product) + }) + +} + +show_info_product() diff --git a/src/main.ts b/src/main.ts new file mode 100644 index 0000000..315dceb --- /dev/null +++ b/src/main.ts @@ -0,0 +1,140 @@ + +async function goi_sp_tu_api(): Promise { + return new Promise((resolve, reject) => { + return resolve(listproduct_mau); + }) +} + + +async function hienthi_sp() { + const lay_sp_tu_api: ProductInfo[] = await goi_sp_tu_api(); + + // code hien thi danh sach dang dien ra + // Usage example: + showListProductHome(lay_sp_tu_api, 'started', 'js-holder-list-started'); + showListProductHome(lay_sp_tu_api, 'coming', 'js-holder-list-coming'); + showListProductHome(lay_sp_tu_api, 'ended', 'js-holder-list-ended'); +} + +function showListProductHome(lay_sp_tu_api: ProductInfo[], status: string, holderId: string) { + const html: string[] = []; + const holder = document.getElementById(holderId); + + lay_sp_tu_api + .filter((product: ProductInfo) => product.status == status) + .forEach(function (product, keyIndex) { + html.push( + xayhtml(product) + ); + if (status != 'ended' || product.to_time > product.from_time) { + const countdownTime = (status == 'started') ? product.to_time : product.from_time; + countDown(`js-deal-time-${product.productId}`, countdownTime); + } + }); + + if (holder) { + holder.innerHTML = html.join(''); + } +} + +function xayhtml(product: ProductInfo) { + var Htmlcheckstatus: string = '' + if (product.status == 'started') { + Htmlcheckstatus = `
+
Còn lại:
+
+
+
+ Đấu giá ngay`; + } else if (product.status == 'coming') { + Htmlcheckstatus = `
+
Bắt đầu sau:
+
+
+
+ Xem chi tiết`; + } else if (product.to_time < Date.now()) { + Htmlcheckstatus = `
Thắng cuộc ${formatPrice(product.starting_price)}đ
+
+
Đã kết thúc
+
+Xem chi tiết`; + } + return `
+ + ${product.product_name} + +
+ ${product.product_name} +
+ Giá gốc: ${formatPrice(product.price)}đ +
+ ${Htmlcheckstatus} +
+
+ `; +} + +function formatPrice(price: number) { + var b = price.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1.").toString(); + var len = b.length; + b = b.substring(0, len - 3); + return b; +} + +function countDown(iid: string, endTime: number): void { + + const updateCountdown = () => { + const now: number = Date.now(); + const distance: number = endTime - now; + + if (distance > 0) { + const [days, hours, minutes, seconds] = getTimeComponents(distance); + displayCountdown(iid, days, hours, minutes, seconds); + } else { + clearInterval(timer); + } + }; + + // Initial update to avoid delay + updateCountdown(); + + const timer: NodeJS.Timeout = setInterval(updateCountdown, 1000); +} + +function getTimeComponents(distance: number): [number, number, number, number] { + const days: number = Math.floor(distance / (1000 * 60 * 60 * 24)); + const hours: number = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); + const minutes: number = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); + const seconds: number = Math.floor((distance % (1000 * 60)) / 1000); + + return [days, hours, minutes, seconds]; +} + +function displayCountdown(iid: string, days: number, hours: number, minutes: number, seconds: number): void { + const element: HTMLElement | null = document.querySelector(`.${iid}`); + if (element) { + if (days > 0) { + element.innerHTML = ` +
${formatTimeComponent(days)}
+
${formatTimeComponent(hours)}
+
${formatTimeComponent(minutes)}
+
${formatTimeComponent(seconds)}
`; + } else { + element.innerHTML = ` +
${formatTimeComponent(hours)}
+
${formatTimeComponent(minutes)}
+
${formatTimeComponent(seconds)}
`; + } + } +} + +function formatTimeComponent(component: number): string { + return component <= 9 ? '0' + component : component.toString(); +} + + +hienthi_sp(); + + +