From 5c7bb458f3fd95ec398fd2dace3396f4ab9d1cd5 Mon Sep 17 00:00:00 2001 From: Miwory Date: Sat, 30 Aug 2025 15:35:33 +0300 Subject: [PATCH] k1r4ka donation goal gen 1 --- DonationGoals/k1r4ka/generation 1/index.html | 10 ++ DonationGoals/k1r4ka/generation 1/script.js | 18 +++ DonationGoals/k1r4ka/generation 1/style.css | 114 +++++++++++++++++++ 3 files changed, 142 insertions(+) create mode 100644 DonationGoals/k1r4ka/generation 1/index.html create mode 100644 DonationGoals/k1r4ka/generation 1/script.js create mode 100644 DonationGoals/k1r4ka/generation 1/style.css diff --git a/DonationGoals/k1r4ka/generation 1/index.html b/DonationGoals/k1r4ka/generation 1/index.html new file mode 100644 index 0000000..eaf85c2 --- /dev/null +++ b/DonationGoals/k1r4ka/generation 1/index.html @@ -0,0 +1,10 @@ +
+
+ donate goal +
+
+ 0 + 100 +
+
+
diff --git a/DonationGoals/k1r4ka/generation 1/script.js b/DonationGoals/k1r4ka/generation 1/script.js new file mode 100644 index 0000000..8aa8d03 --- /dev/null +++ b/DonationGoals/k1r4ka/generation 1/script.js @@ -0,0 +1,18 @@ +let goalNode = document.getElementById('donationgoal'); +let nameText = document.getElementById('name'); +let rangeText = document.getElementById('range'); +let progressFrom = document.getElementById('from'); +let progressTo = document.getElementById('to'); + +window.addEventListener('message', function (event) { + let message = event.detail; + let data = message.data; + + let percent = ((data.value / data.goal) * 100); + if (percent > 100) {percent = 100;} + + nameText.textContent = data.title; + progressFrom.textContent = data.value; + progressTo.textContent = data.goal; + goalNode.style.setProperty('--progress', `${percent}%`); +}); diff --git a/DonationGoals/k1r4ka/generation 1/style.css b/DonationGoals/k1r4ka/generation 1/style.css new file mode 100644 index 0000000..1c5cfb1 --- /dev/null +++ b/DonationGoals/k1r4ka/generation 1/style.css @@ -0,0 +1,114 @@ +@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital@0;1&display=swap'); + +#widget { + display: flex; + align-items: center; + justify-content: center; +} + +#donationgoal { + position: relative; + width: 100%; + display: flex; + flex-direction: column; + font-size: 40px; + justify-content: center; + font-family: 'Montserrat'; + font-weight: 800; +} + +.bar { + position: relative; + display: flex; + flex-direction: column; + margin-top: 75px; + background-position: bottom 0% right 5%; + background-size: 20%, 100%; + background-repeat: no-repeat; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='171' height='80' fill='none'%3E%3Cpath fill='url(%23a)' d='M131.467 24.596C154.218 33.954 171 87.506 171 88.971L1.72 91c-6.645-8.794 8.109-30.102 8.109-33.71 0-3.608 1.239-34.95 6.87-38.782 5.632-3.834 25.004 7.44 28.608 6.087 17.795-13.19 49.782-7.779 52.597-10.372 2.816-2.593 19.147-15.67 24.778-14.092 4.506 1.263 7.734 16.836 8.785 24.464Z' opacity='.46'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='85.5' x2='85.5' y1='0' y2='107.372' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23FFDFD7'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E"), linear-gradient(45deg, #EF9543 -100%, #F2E4D9 100%); + border-radius: 25px; + padding: 25px 50px; +} + +.bar::before { + position: absolute; + content: ''; + top: 0; + left: 25px; + transform: translateY(-50%); + width: 150px; + aspect-ratio: 74 / 92; + background-size: contain; + background-repeat: no-repeat; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='74' height='92' fill='none'%3E%3Cpath stroke='%236C840A' stroke-width='4' d='M50.25 87.923c-9.147-10.149-27.82-38.02-29.34-68.32'/%3E%3Cpath fill='url(%23a)' d='M30.386 16.854c-4.786 3.099-8.509 3.13-9.772 2.758.994-2.186 3.693-6.904 6.543-8.292 2.85-1.387 8.734.907 11.32 2.228-.703-.189-3.305.208-8.091 3.306Z'/%3E%3Cpath fill='url(%23b)' d='M11.938 22.177c5.691.172 8.889-1.705 9.776-2.665-1.978-1.339-6.722-3.946-9.875-3.661-3.153.284-6.996 5.231-8.523 7.669.502-.52 2.931-1.514 8.622-1.343Z'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='26.642' x2='30.494' y1='11.604' y2='18.206' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23C3D480'/%3E%3Cstop offset='1' stop-color='%236C840A'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='12.425' x2='12.544' y1='15.827' y2='23.375' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23C3D480'/%3E%3Cstop offset='1' stop-color='%236C840A'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E"); + z-index: -1; +} + +.bar::after { + position: absolute; + content: ''; + top: 0; + right: 35px; + height: 50px; + aspect-ratio: 178 / 25; + background-size: contain; + background-repeat: no-repeat; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='178' height='25' fill='none'%3E%3Cpath stroke='%23B84939' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M148.497.01c.888 4.204 3.931 11.819 9 8.643 5.069-3.175-3.888-7.085-9-8.643Zm0 0c-.979 4.145-4.15 11.678-8.999 8.643-6.061-3.792 8.173-8.905 8.999-8.643Zm0 0L144.64 24M148.497.01 152.446 24'/%3E%3Cpath stroke='%23F09C50' stroke-linecap='round' stroke-linejoin='round' d='M170.998.006c.508 2.452 2.246 6.894 5.143 5.042 2.896-1.852-2.222-4.133-5.143-5.042Zm0 0c-.559 2.418-2.371 6.812-5.142 5.042-3.463-2.212 4.67-5.195 5.142-5.042Zm0 0L168.795 14M170.998.006 173.255 14'/%3E%3Cpath fill='url(%23a)' d='M10.664-4.569s-3.8.796-5.488 2.11C3.17-.896 0 4.449 0 4.449s3.29.66 6.117-.755c2.826-1.414 4.547-8.262 4.547-8.262Z'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='.83' x2='9.833' y1='-.775' y2='.656' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23C3D480'/%3E%3Cstop offset='1' stop-color='%236C840A'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E"); +} + +#name { + color: white; + margin-bottom: 15px; + font-size: 42px; +} + +#name::after { + position: absolute; + content: ''; + width: 20px; + aspect-ratio: 9 / 11; + background-size: contain; + background-repeat: no-repeat; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='11' fill='none'%3E%3Cpath fill='%23302321' d='M5.843 7.388c.46.21.343.768.48 1.255.137.487.514.825.223 1.24-.375.534-1.025-.092-1.62-.354-.624-.274-1.62-.299-1.448-.96.13-.5.624-.449 1.086-.68.462-.23.81-.715 1.28-.501ZM7.566 8.493c-.167.257-.435.38-.6.273-.164-.107-.162-.402.005-.66.166-.257.435-.379.599-.272.164.107.163.402-.004.66ZM3.833 6.894c-.071.298.026.577.216.622.19.045.403-.16.474-.458.072-.298-.025-.576-.216-.621-.19-.046-.403.159-.474.457ZM7.013 7.197c-.167.257-.435.38-.6.272-.164-.106-.162-.401.004-.659.167-.257.435-.379.6-.272.164.106.162.401-.004.659ZM5.153 6.4c-.071.298.026.577.216.622.191.046.403-.16.475-.457.071-.298-.026-.577-.216-.622-.191-.046-.403.16-.475.457ZM2.843 2.388c.46.21.343.768.48 1.255.137.487.514.825.223 1.24-.375.534-1.025-.092-1.62-.354-.624-.274-1.62-.299-1.448-.96.13-.5.624-.449 1.086-.68.462-.23.81-.715 1.28-.501ZM4.566 3.493c-.167.257-.435.38-.6.273-.164-.107-.162-.402.005-.66.166-.257.435-.379.599-.272.164.107.163.402-.004.66ZM.833 1.894c-.071.298.026.577.216.622.19.045.403-.16.474-.458.072-.298-.025-.576-.216-.621-.19-.046-.403.159-.474.457ZM4.013 2.197c-.167.257-.435.38-.6.272-.164-.106-.162-.401.004-.659.167-.257.435-.379.6-.272.164.106.162.401-.004.659ZM2.153 1.4c-.071.298.026.577.216.622.191.046.403-.16.475-.457.071-.298-.026-.577-.216-.622-.191-.046-.403.16-.475.457Z'/%3E%3C/svg%3E"); +} + +.progress { + position: relative; + width: 100%; + min-height: 20px; + background-image: linear-gradient(to right, #FFE3C9, #FFD6B1); + border-radius: 25px; +} + +.progress::before { + position: absolute; + content: ''; + inset: 0; + border-radius: inherit; + background-image: linear-gradient(to right, #B84939, #F09C50); + max-width: var(--progress); + transition: max-width 1.2s ease-in-out; +} + +.info { + display: flex; + justify-content: space-between; + color: white; + font-size: 20px; +} + +#to { + color: #B84939; +} + +.info::after { + position: absolute; + content: ''; + left: 250px; + bottom: 0; + width: 35px; + aspect-ratio: 14 / 7; + background-size: contain; + background-repeat: no-repeat; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='7' fill='none'%3E%3Cpath fill='url(%23a)' d='M13.632 10.897S11.632 6.63 9.608 5C7.204 3.065.003.808.003.808S.14 4.88 2.6 7.827c2.46 2.946 11.032 3.07 11.032 3.07Z'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='6.407' x2='7.225' y1='.333' y2='11.372' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23C3D480'/%3E%3Cstop offset='1' stop-color='%236C840A'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E"); +}