From b1aba9a1b262ea5c525ac05d7882bda1104642da Mon Sep 17 00:00:00 2001 From: JSriwongsa Date: Fri, 21 Jul 2023 15:40:52 -0500 Subject: [PATCH] added circular progress bar --- donation_website/index.html | 157 ++++++++++++++++- donation_website/main.js | 56 +++++- donation_website/style.css | 335 ++++++++++++++++++++++++------------ 3 files changed, 428 insertions(+), 120 deletions(-) diff --git a/donation_website/index.html b/donation_website/index.html index 4f89c37..26d3c33 100644 --- a/donation_website/index.html +++ b/donation_website/index.html @@ -160,15 +160,162 @@ -
+
- +
-

content

-

message

- Learn more +

Give blood and keep the world beating

+

World Blood Donor Day is celebrated on 14 June every year to spread awareness and seek attention to the importance of blood donation. + It is important that people are educated on the importance of safe blood donation and blood products for the purpose of transfusion. +

+ Read more +
+
+
+ +
+
+
+

Average distribution of blood types in the United States

+
+
+
+
+
+
+
+
+
+ 0% +
+
+
+

Blood type A+

+ Donate +
+
+
+
+
+
+
+
+
+
+ 0% +
+
+
+

Blood type A-

+ Donate +
+
+
+
+
+
+
+
+
+
+ 0% +
+
+
+

Blood type B+

+ Donate +
+
+
+
+
+
+
+
+
+
+ 0% +
+
+
+

Blood type B-

+ Donate +
+
+
+
+
+
+
+
+
+
+ 0% +
+
+
+

Blood type AB+

+ Donate +
+
+
+
+
+
+
+
+
+
+ 0% +
+
+
+

Blood type AB-

+ Donate +
+
+
+
+
+
+
+
+
+
+ 0% +
+
+
+

Blood type O+

+ Donate +
+
+
+
+
+
+
+
+
+
+ 0% +
+
+
+

Blood type O-

+ Donate +
+
+
+
+
+ +
+ + +
diff --git a/donation_website/main.js b/donation_website/main.js index 0719845..edefe4f 100644 --- a/donation_website/main.js +++ b/donation_website/main.js @@ -25,20 +25,58 @@ const submenu = document.querySelectorAll('.sub-trigger'); this.classList.toggle('expand') } } +//progress +function progressBar(progressBarNum, progressStart, progressEnd, speed) { + + let progressBar = document.querySelector('.progress-bar-' + progressBarNum); + let progressValue = document.querySelector('.progress-value-' + progressBarNum); + + let progress = setInterval(() => { + progressStart ++; + progressValue.textContent = `${progressStart}%` + progressBar.style.background = `conic-gradient(red ${progressStart * 3.6}deg, lightgray 0deg)` + + if(progressStart == progressEnd){ + clearInterval(progress); + } + }, speed) + + return progress +} +progressBar(1, 0, 34, 200); +progressBar(2, 0, 6, 300); +progressBar(3, 0, 9 ,400); +progressBar(4, 0, 2, 500); +progressBar(5, 0, 3, 400); +progressBar(6, 0, 1, 300); +progressBar(7, 0, 38, 200); +progressBar(8, 0, 7, 200); //slider -const swiper = new Swiper('.sliderbox', { - loop: true, - effect:'fade', +const swiper = new Swiper('.swiper', { + slidesPerView: 1, + spaceBetween: 30, autoHeight: true, - - - pagination: { - el: '.swiper-pagination', - clickable: true, + loop: true, + breakpoints:{ + 992:{ + slidesPerView: 3, + centeredSlides: true, + }, + 641:{ + slidesPerView: 2, + centeredSlides: false, + } + }, + pagination: { + el: '.pagination', + }, + navigation: { + nextEl: '.button-next', + prevEl: '.button-prev', }, - }); + \ No newline at end of file diff --git a/donation_website/style.css b/donation_website/style.css index acb88fc..4568f45 100644 --- a/donation_website/style.css +++ b/donation_website/style.css @@ -336,10 +336,10 @@ form.search i{ padding: 0 15px; } /*---------- slider ----------*/ -.slider :where(.image, .object-cover){ +.home :where(.image, .object-cover){ position: relative; } -.slider .object-cover{ +.home .object-cover{ height: 430px; } .object-cover img{ @@ -349,10 +349,10 @@ form.search i{ object-fit: cover; opacity: 0.8; } -.slider .title-info{ +.home .title-info{ background-color: whitesmoke; } -.slider .title-info .wrap{ +.home .title-info .wrap{ display: flex; flex-direction: column; align-items: center; @@ -362,11 +362,11 @@ form.search i{ margin: 0 auto; text-align: center; } -.slider .title-info .text{ +.home .title-info .text{ position: relative; font-size: 40px; margin-top: -40px; - color: red; + color: #D22B2B; text-shadow: 2px 2px salmon; display: flex; align-items: center; @@ -375,19 +375,6 @@ form.search i{ letter-spacing: 1px; word-spacing: 2px; } -.slider .title-info .text-1{ - position: relative; - font-size: 40px; - margin-top: -40px; - color: black; - text-shadow: 2px 2px lightgray; - display: flex; - align-items: center; - justify-content: center; - text-transform: uppercase; - letter-spacing: 1px; - word-spacing: 2px; -} .primary-btn{ padding: 10px 18px; background-color: #E34234; @@ -399,98 +386,220 @@ form.search i{ background-color: #FA8072; color: black; } -.slider .custom-pagination{ - position: absolute; - right: 30px; - top: 50%; - bottom: 50%; -} -.slider .custom-pagination .swiper-pagination{ - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; -} -.custom-pagination .swiper-pagination-bullet{ - position: relative; - width: 20px; - height: 20px; - opacity: 1; - background-color: transparent; -} -.custom-pagination .swiper-pagination-bullet::before{ - content: ''; - position: absolute; - width: 10px; - height: 10px; - top: 50%; - left: 50%; - background-color: gray; - border: 1px solid gray; - border-radius: 50%; - transform: translate(-50%, -50%); - transition: width 0.3s, height 0.3s, transform 0.3s; -} -.custom-pagination .swiper-pagination-bullet-active::before{ - background-color: transparent; - width: 15px; - height: 15px; -} -.slider .title-info :where(h1, h3, button){ - transform: translateY(30px); - opacity: 0; - visibility: hidden; - transition: transform 0.5s, opacity 0.5s, visibility 0.5s; -} -.slider .swiper-slide-active .title-info :where(h1, h3, button){ - transform: translateY(0); - opacity: 1; - visibility: visible; -} /*---------- guide ----------*/ -.site main > div:not(.slider){ - padding: 50px 0; +.guide .row{ + display: flex; + flex-wrap: wrap; + cursor: pointer; } -:is(.guide) .dot-image .thumbnail{ - position: relative; - opacity: unset; -} -.guide{ - background-color: whitesmoke; -} -.dotgrid .dot-image{ - position: relative; - margin-bottom: 15px; -} -.guide .dotgrid .wrapper{ - --grid-col: 300px; - display: grid; - grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-col), 100%), 1fr)); - gap: var(--gutter, 30px); -} -.guide .dot-image .thumbnail img{ +.guide .row h1{ width: 100%; -} -main > div .heading{ text-align: center; - margin-bottom: 60px; + margin: 20px 0; font-size: 22px; text-transform: uppercase; text-shadow: 2px 2px gray; -} -.guide .dot-title{ +} +.guide .column{ + padding: 16px; +} +.guide .card{ + padding: 48px 10px; text-align: center; + background: linear-gradient(0deg, #E34234 10px, transparent 10px); + background-repeat: no-repeat; + background-position: 0 10px; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); + border-radius: 5px; + transition: 0.5s; +} +.guide .card .icon{ + font-size: 40px; + height: 70px; + width: 70px; + margin: auto; + background-color: #FA8072; + display: grid; + place-items: center; + border-radius: 50%; + color: white; +} +.guide .card .icon::before{ + content: ''; + position: absolute; + height: 80px; + width: 80px; + border: 4px solid #FA8072; + border-radius: 50%; + transition: 0.5s; +} +.guide .card h3{ font-size: 18px; font-weight: 600; - padding: 10px 0; + margin: 16px 0 24px 0; + letter-spacing: 1px; + text-transform: uppercase; } -.guide .dot-info p{ +.guide .card p{ line-height: 1.5; + color: #625a71; font-size: 14px; } - - - +.guide .card:hover{ + background-position: 0; +} +.guide .card:hover .icon::before{ + height: 50px; + width: 50px; +} +/*----- content-1 -----*/ +.content-1 .container{ + max-width: 69%; + display: flex; + flex-wrap: wrap; + gap: 50px; + margin-top: 100px; +} +.content-1-img{ + flex: 1 1 21rem; +} +.content-1-img img{ + border-radius: 5px; + height: 95%; +} +.content-1-text{ + flex: 1 1 21rem; +} +.content-1-text h2{ + font-size: 22px; + text-shadow: 2px 2px gray; + text-transform: uppercase; +} +.content-1-text p{ + margin: 0.5rem 0 2.5rem; + text-align: justify; +} +.content-1-text .primary-btn:hover{ + background: transparent; + border: 2px solid #E34234; + color: black; +} +/*----- progress -----*/ +.progress{ + display: flex; + align-items: center; + height: 80vh; +} +.progress .container{ + padding: 0 30px; + margin: 0 auto; + max-width: 1100px; + width: 100%; +} +.progress .progress-content h1{ + width: 100%; + text-align: center; + margin: 50px 0; + font-size: 22px; + text-transform: uppercase; + text-shadow: 2px 2px gray; +} +.card-progress{ + max-width: 300px; + background-color: white; + border-radius: 10px; + box-shadow: rgb(225 225 225 / 0.2) 0 0 0 8px; + margin: 0 auto; + overflow: hidden; +} +.card-progress .head{ + position: relative; + height: 420px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 20px; + text-align: center; +} +.card-progress .thumbnail-progress{ + position: relative; +} +.card-progress .thumbnail-progress .progress-bar{ + position: relative; + height: 259px; + width: 250px; + background-color: lightgray; + border-radius: 50%; + background: conic-gradient(red 3deg, lightgray 0deg); + display: flex; + justify-content: center; + align-items: center; +} +.card-progress .thumbnail-progress .progress-bar::before{ + content: ''; + position: absolute; + height: 210px; + width: 210px; + background-color: white; + border-radius: 50%; +} +.card-progress .thumbnail-progress .progress-value{ + position: relative; + font-size: 30px; + font-weight: 600; + color: salmon; +} +.card-progress .meta{ + position: relative; +} +.card-progress .meta h2{ + font-size: 26px; + font-weight: 600; + margin-bottom: 20px; +} +.card-progress .meta .progress-btn{ + padding: 6px 14px; + border: 2px solid #E34234; + margin-bottom: 20px; + text-transform: uppercase; + font-size: 12px; + font-weight: 600; +} +.card-progress .meta .progress-btn:hover{ + background-color: #E34234; + color: white; +} +.swiper .pagination{ + text-align: center; + padding: 20px; +} +.swiper .pagination span{ + height: 4px; + border-radius: 4px; + background-color: gray; + opacity: 1; + transition: width 0.3s; +} +.swiper .pagination span[class*=-active]{ + width: 25px; + background-color: red; +} +.nextprev{ + position: absolute; + right: 0; + bottom: 0; + padding: 15px 0; +} +.nextprev i{ + color: black; + font-size: 22px; + padding: 0 10px; + cursor: pointer; +} +.nextprev i:hover{ + color: gray; +} @@ -529,29 +638,43 @@ main > div .heading{ opacity: 1; visibility: visible; } - /*----- slider -----*/ - .slider .title-info{ + /*----- home -----*/ + .home .title-info{ position: absolute; bottom: 0; left: 0; right: 0; background-color: transparent; } - .slider .object-cover{ + .home .object-cover{ height: calc(100vh - 80px); } - .slider .title{ + .home .title{ font-size: 30px; color: white; text-transform: capitalize; } - .slider .title-1{ + .home .title-1{ font-size: 30px; color: red; text-transform: capitalize; + } + .guide{ + padding: 1rem; } - - - - + .card{ + padding: 5rem 2rem; + } + .column{ + flex: 0 0 33.33%; + max-width: 33.33%; + padding: 0 1rem; + } + } + +@media screen and (min-width:768px){ + .guide{ + padding: 1rem 7rem; + } +} \ No newline at end of file