From 7605543f39747a6be2ee14ea69dc794303fe625e Mon Sep 17 00:00:00 2001 From: Miwory Date: Mon, 18 Aug 2025 18:10:11 +0300 Subject: [PATCH] donation goal altrumi gen 1 --- DonationGoals/altrumi/generation 1/index.html | 6 ++ DonationGoals/altrumi/generation 1/script.js | 14 +++ DonationGoals/altrumi/generation 1/style.css | 95 +++++++++++++++++++ 3 files changed, 115 insertions(+) create mode 100644 DonationGoals/altrumi/generation 1/index.html create mode 100644 DonationGoals/altrumi/generation 1/script.js create mode 100644 DonationGoals/altrumi/generation 1/style.css diff --git a/DonationGoals/altrumi/generation 1/index.html b/DonationGoals/altrumi/generation 1/index.html new file mode 100644 index 0000000..184dcdd --- /dev/null +++ b/DonationGoals/altrumi/generation 1/index.html @@ -0,0 +1,6 @@ +
+
+
+
+ +
diff --git a/DonationGoals/altrumi/generation 1/script.js b/DonationGoals/altrumi/generation 1/script.js new file mode 100644 index 0000000..9eb3cb1 --- /dev/null +++ b/DonationGoals/altrumi/generation 1/script.js @@ -0,0 +1,14 @@ +let goalNode = document.getElementById('donationgoal'); +let nameText = document.getElementById('name'); +let rangeText = document.getElementById('range'); + +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; + goalNode.style.setProperty('--progress', `${percent}%`); +}); diff --git a/DonationGoals/altrumi/generation 1/style.css b/DonationGoals/altrumi/generation 1/style.css new file mode 100644 index 0000000..6894b4c --- /dev/null +++ b/DonationGoals/altrumi/generation 1/style.css @@ -0,0 +1,95 @@ +@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&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: 'Nunito'; + font-weight: 800; +} + +.bar { + position: relative; + display: flex; + align-items: center; + width: calc(100% - 100px); + height: 100px; + background-color: #3E3250; + border-radius: 20px; + margin-top: 30px; +} + +.bar::before { + position: absolute; + content: ''; + width: 140px; + right: 5px; + top: -20px; + transform: translateX(50%); + aspect-ratio: 1; + background-size: cover; + background-image: url("data:image/svg+xml,%3Csvg width='42' height='42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23a)' fill='%23806E97'%3E%3Cpath d='M17.6 38.35a3.8 3.8 0 0 1-.55-.69c-1.39-2.06-.68-4.88 1.93-7.7l.24-.25c1.2-1.3 2.42-2.65 2.66-4.23a3.35 3.35 0 0 0-1.48-3.3 3.06 3.06 0 0 0-3.51.36c-.9.86-1.1 2.4-.41 3.34.27.39 1.1.64 1.84.41.65-.2 1-.7 1.04-1.46a.77.77 0 0 1 .78-.72c.41 0 .73.35.71.76a3 3 0 0 1-2.13 2.85c-1.3.4-2.8-.01-3.47-.95a4.2 4.2 0 0 1 .61-5.33 4.56 4.56 0 0 1 5.32-.58 4.84 4.84 0 0 1 2.18 4.8c-.3 2.03-1.77 3.62-3.07 5.02l-.24.24c-1 1.09-3.14 3.8-1.76 5.88.55.82 1.4 1.27 2.37 1.27 1.1 0 2.2-.6 2.89-1.56.5-.71.62-1.7.3-2.45a1.62 1.62 0 0 0-1.36-.98 1.8 1.8 0 0 0-1.6.8c-.17.26-.4.77-.07 1.33.2.35.08.8-.28 1.02a.74.74 0 0 1-1.02-.25 2.7 2.7 0 0 1 .14-2.9 3.33 3.33 0 0 1 3.04-1.47c1.15.13 2.07.8 2.52 1.83a4.14 4.14 0 0 1-.45 3.92 5.12 5.12 0 0 1-4.13 2.21 4.23 4.23 0 0 1-3.04-1.23v.01Z'/%3E%3Cpath d='M15.8 20.61a4.14 4.14 0 0 1-.42-5.23c.7-.97 2.21-1.4 3.5-1.03 1.25.36 2.02 1.4 2.07 2.8.01.4-.3.76-.73.78a.73.73 0 0 1-.77-.71c-.02-.77-.36-1.25-1-1.44-.75-.21-1.58.06-1.86.45-.7.98-.52 2.54.34 3.34a3 3 0 0 0 3.5.28 3.48 3.48 0 0 0 1.56-3.34c-.2-1.57-1.42-2.89-2.6-4.16l-.23-.24c-2.54-2.75-3.18-5.55-1.75-7.65a4.45 4.45 0 0 1 3.64-2 4.82 4.82 0 0 1 4.07 2.12c.79 1.12.92 2.66.37 3.9a3.17 3.17 0 0 1-5.57.49 2.7 2.7 0 0 1-.08-2.9.76.76 0 0 1 1.03-.27c.35.2.47.66.25 1.02a1.2 1.2 0 0 0 .05 1.32 1.68 1.68 0 0 0 2.95-.24c.34-.77.25-1.75-.24-2.45a3.45 3.45 0 0 0-2.85-1.5c-.98.03-1.83.5-2.4 1.33-1.42 2.1.67 4.77 1.64 5.83l.23.23c1.26 1.39 2.69 2.93 2.95 4.98a5.07 5.07 0 0 1-2.29 4.84 4.52 4.52 0 0 1-5.3-.46l-.08-.08h.02Z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' transform='rotate(45 10.02 25.9)' d='M0 0h28.64v29.34H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); +} + +.bar::after { + position: absolute; + content: ''; + width: 45px; + aspect-ratio: 1; + top: 50%; + right: -75px; + transform: translateY(-50%); + filter: drop-shadow(0 0 7.5px #E6D7FE) drop-shadow(0 0 10px #E6D7FE); + background-size: cover; + background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.32 6.18a1 1 0 0 1 0 1.64l-3.1 2.15a1 1 0 0 0-.25.25l-2.15 3.1a1 1 0 0 1-1.64 0l-2.15-3.1a1 1 0 0 0-.25-.25L.68 7.82a1 1 0 0 1 0-1.64l3.1-2.15a1 1 0 0 0 .25-.25L6.18.68a1 1 0 0 1 1.64 0l2.15 3.1a1 1 0 0 0 .25.25l3.1 2.15Z' fill='%23fff'/%3E%3C/svg%3E"); +} + +.progress { + position: relative; + width: 100%; + height: 30px; + background-color: #4F4062; + margin-inline: 50px; + border-radius: 25px; +} + +.progress::before { + position: absolute; + content: ''; + inset: 0; + border-radius: inherit; + background-color: white; + max-width: var(--progress); + transition: max-width 1.2s ease-in-out; + filter: drop-shadow(0 0 7.5px #AB8DB2) drop-shadow(0 0 10px #AB8DB2); +} + +.progress::after { + position: absolute; + content: ''; + width: 40px; + top: 50%; + left: var(--progress); + transform: translate(-20px, -50%); + transition: left 1.2s ease-in-out; + aspect-ratio: 15 / 20; + filter: drop-shadow(0 0 7.5px #DEB6E4) drop-shadow(0 0 10px #DEB6E4); + background-size: cover; + background-image: url("data:image/svg+xml,%3Csvg width='16' height='21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.41 10.5a9.22 9.22 0 0 0 2-4.22 5.28 5.28 0 0 0-1.1-4.5A4.37 4.37 0 0 0 10.2.6c-1.33.24-2.7.95-3.9 2.05a4.42 4.42 0 0 0-3.59.6A4.9 4.9 0 0 0 .98 5.26a5.33 5.33 0 0 0 .44 5.24 5.25 5.25 0 0 0-.15 5.78c.53.86 1.3 1.53 2.2 1.9.9.37 1.89.44 2.82.18a8.03 8.03 0 0 0 3.91 2.05 4.36 4.36 0 0 0 4.09-1.2c1.1-1.18 1.38-2.86 1.1-4.49a9.22 9.22 0 0 0-1.99-4.22' fill='%23fff'/%3E%3C/svg%3E"); +} + +#name { + color: white; + margin-left: 10px; + letter-spacing: .15rem; + filter: drop-shadow(0 0 7.5px #F4DBFF) drop-shadow(0 0 10px #F4DBFF); +}