Compare commits
2 Commits
1b4c05c1da
...
bc790b6d10
| Author | SHA1 | Date | |
|---|---|---|---|
| bc790b6d10 | |||
| 7605543f39 |
6
DonationGoals/altrumi/generation 1/index.html
Normal file
6
DonationGoals/altrumi/generation 1/index.html
Normal file
@ -0,0 +1,6 @@
|
||||
<div id="donationgoal">
|
||||
<div class="bar">
|
||||
<div class="progress"></div>
|
||||
</div>
|
||||
<a id="name"></a>
|
||||
</div>
|
||||
14
DonationGoals/altrumi/generation 1/script.js
Normal file
14
DonationGoals/altrumi/generation 1/script.js
Normal file
@ -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}%`);
|
||||
});
|
||||
95
DonationGoals/altrumi/generation 1/style.css
Normal file
95
DonationGoals/altrumi/generation 1/style.css
Normal file
@ -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);
|
||||
}
|
||||
6
DonationGoals/hina/generation 1/index.html
Normal file
6
DonationGoals/hina/generation 1/index.html
Normal file
@ -0,0 +1,6 @@
|
||||
<div id="donationgoal">
|
||||
<a id="name"></a>
|
||||
<div class="bar">
|
||||
<div class="progress"></div>
|
||||
</div>
|
||||
</div>
|
||||
14
DonationGoals/hina/generation 1/script.js
Normal file
14
DonationGoals/hina/generation 1/script.js
Normal file
@ -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}%`);
|
||||
});
|
||||
105
DonationGoals/hina/generation 1/style.css
Normal file
105
DonationGoals/hina/generation 1/style.css
Normal file
@ -0,0 +1,105 @@
|
||||
@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;
|
||||
}
|
||||
|
||||
#donationgoal::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 120px;
|
||||
bottom: 15px;
|
||||
right: 10px;
|
||||
aspect-ratio: 87 / 49;
|
||||
background-size: cover;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='87' height='49' fill='none'%3E%3Cpath stroke='%23F4A5D2' stroke-linecap='round' stroke-width='3' d='M32.98 22.923C24.848 16.676 20.794 11.55 14.525 4.197M32.98 25.02c-8.132 6.247-12.186 11.371-18.455 18.726M33.712 23.255s8.102-.635 12.072-3.016c3.017-1.81 5.191-4.39 4.217-7.85-.67-2.382-2.946-3.819-6.63-3.606-6.219.36-9.66 13.265-9.66 13.265'/%3E%3Cpath stroke='%23F4A5D2' stroke-linecap='round' stroke-width='3' d='M33.728 21.745s4.973-6.427 5.877-10.968c.687-3.45.236-6.794-2.982-8.398-2.213-1.103-5.243-.685-7.125 2.49-3.045 5.136 3.336 16.065 3.336 16.065M33.728 26.748s4.973 6.427 5.877 10.968c.687 3.45.236 6.794-2.982 8.398-2.213 1.103-5.243.686-7.125-2.489-3.045-5.137 3.336-16.066 3.336-16.066'/%3E%3Cpath stroke='%23F4A5D2' stroke-linecap='round' stroke-width='3' d='M34.192 24.836s8.102.635 12.073 3.016c3.017 1.81 5.19 4.39 4.216 7.85-.67 2.381-2.946 3.818-6.63 3.606-6.218-.36-9.659-13.265-9.659-13.265'/%3E%3Cg filter='url(%23a)'%3E%3Cpath fill='%23fff' d='M67.635 37.843a.436.436 0 0 0 .067-.421c-.029-.083-.653-1.809-2.146-3.14 3.461-.944 6.196-4.355 6.196-8v-.03c-.005-1.047-.122-2.098-.235-3.115-.07-.634-.14-1.268-.184-1.9a.795.795 0 0 1 .079-.28.86.86 0 0 1 .255.187c.273.36.522.74.773 1.118.32.483.649.981 1.024 1.445 1.056 1.305 2.305 2.188 3.712 2.625.567.177 1 .148 1.325-.087.326-.237.489-.647.499-1.255a5.825 5.825 0 0 0-.069-.724c-.336-2.126-1.46-3.952-3.434-5.583-.696-.576-1.026-1.078-1.102-1.681-.287-2.25-1.624-3.815-4.087-4.784-.769-.304-1.559-.268-2.224.098-.686.377-1.154 1.053-1.32 1.904-.01.052-.017.104-.026.156-.16.012-.32.024-.481.025-2.728.01-4.503 1.236-5.276 3.644-.048.152-.102.222-.102.222-.02-.003-.102-.038-.215-.173-.264-.31-.47-.702-.654-1.079-.143-.292-.58-1.182-1.589-1.073-.767.083-1.248.643-1.318 1.535-.042.516-.07 1.07.01 1.612.188 1.27 1 2.152 1.772 2.847l.141.128c.386.347.783.703 1.115 1.072-.364-.331-.94-.716-1.71-.51-1.107.298-1.254 1.395-1.302 1.756-.086.643-.129 1.278-.129 1.904 0 1.193.156 2.35.466 3.46.516 1.843 1.714 3.274 3.26 4.078.064.1.125.2.18.295.28.488.57.992 1.78 2.032 1.821 1.567 4.446 1.849 4.557 1.86a.44.44 0 0 0 .392-.168Zm2.406-21.767a.828.828 0 1 1 1.655 0 .828.828 0 1 1-1.655 0Z'/%3E%3C/g%3E%3Cg filter='url(%23b)'%3E%3Ccircle cx='6' cy='24' r='2' fill='%23BEE2C7' transform='rotate(90 6 24)'/%3E%3C/g%3E%3Cg filter='url(%23c)'%3E%3Cpath fill='%23BEE2C7' d='M17.94 19c-2.542 0-3.897 2.01-5.11 3.48C12.404 23 12 23.5 12 24s.403 1 .83 1.52c1.213 1.47 2.568 3.48 5.11 3.48 2.543 0 4.346-2.75 1.902-5 2.444-2.25.64-5-1.901-5Z'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='a' width='38' height='42' x='49' y='4.013' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' result='hardAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation='4'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3CfeBlend in2='BackgroundImageFix' result='effect1_dropShadow_2223_2'/%3E%3CfeBlend in='SourceGraphic' in2='effect1_dropShadow_2223_2' result='shape'/%3E%3C/filter%3E%3Cfilter id='b' width='12' height='12' x='0' y='18' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' result='hardAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation='2'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3CfeBlend in2='BackgroundImageFix' result='effect1_dropShadow_2223_2'/%3E%3CfeBlend in='SourceGraphic' in2='effect1_dropShadow_2223_2' result='shape'/%3E%3C/filter%3E%3Cfilter id='c' width='17' height='18' x='8' y='15' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' result='hardAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation='2'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3CfeBlend in2='BackgroundImageFix' result='effect1_dropShadow_2223_2'/%3E%3CfeBlend in='SourceGraphic' in2='effect1_dropShadow_2223_2' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
#name {
|
||||
color: white;
|
||||
margin-left: 50px;
|
||||
margin-bottom: 15px;
|
||||
font-size: 24px;
|
||||
filter: drop-shadow(0 0 7.5px #FFC3E8) drop-shadow(0 0 10px #FFC3E8);
|
||||
}
|
||||
|
||||
.bar {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: calc(100% - 100px);
|
||||
height: 100px;
|
||||
background-image: linear-gradient(to right, #FFC3E8, #F8EBFF 140%);
|
||||
border-radius: 65px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.bar::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
inset: -12px;
|
||||
border: 3px solid white;
|
||||
border-radius: inherit;
|
||||
z-index: -1;
|
||||
-webkit-mask-image: linear-gradient(
|
||||
to right,
|
||||
rgba(0, 0, 0, 1) 0%,
|
||||
rgba(0, 0, 0, 0) 75%);
|
||||
}
|
||||
|
||||
.bar::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: -19px;
|
||||
width: 15px;
|
||||
aspect-ratio: 11 / 12;
|
||||
filter: drop-shadow(0 0 7.5px white);
|
||||
background-size: cover;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='12' fill='none'%3E%3Cpath fill='%23fff' d='M7.26 0C4.154 0 2.499 2.412 1.016 4.177.492 4.8 0 5.4 0 6c0 .6.492 1.2 1.015 1.823C2.498 9.588 4.153 12 7.261 12c3.107 0 5.31-3.3 2.323-6 2.988-2.7.784-6-2.323-6Z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.progress {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
background-color: #FFFFFF;
|
||||
margin-inline: 50px;
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
.progress::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
background-color: #F4A5D2;
|
||||
max-width: var(--progress);
|
||||
transition: max-width 1.2s ease-in-out;
|
||||
}
|
||||
|
||||
.progress::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 65px;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translate(-20px, -50%);
|
||||
transition: left 1.2s ease-in-out;
|
||||
aspect-ratio: 46 / 50;
|
||||
filter: drop-shadow(0 0 7.5px white);
|
||||
background-size: cover;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='50' fill='none'%3E%3Cpath fill='%23A7D5B3' d='M39.243 31.057c3.668 4.695 2.79 13.985 2.39 16.989a.92.92 0 0 1-1.1.79c-2.942-.571-11.883-2.644-15.544-7.33-3.614-4.625-3.995-14.753-4.014-18.27a.936.936 0 0 1 1.199-.915c3.45.968 13.442 4.095 17.069 8.736Z'/%3E%3Cpath fill='%23A7D5B3' d='M21.015 40.845c-2.107 3.65-8.512 6.717-11.259 7.901a.93.93 0 0 1-1.31-.85c-.045-3.166.077-10.978 2.209-14.671 2.104-3.646 8.077-6.588 10.643-7.721a.926.926 0 0 1 1.309.786c.228 3.07.555 10.836-1.592 14.555Z'/%3E%3Cpath fill='%23fff' d='M28.001 32.332c-4.976-1.257-8.114-5.816-7.01-10.183 1.103-4.366 6.03-6.886 11.006-5.629 4.976 1.258 10.505 6.421 9.401 10.787-1.103 4.367-8.421 6.283-13.397 5.025Z'/%3E%3Cpath fill='%23fff' d='M18.76 13.174c4.976 1.257 8.115 5.816 7.012 10.183-1.104 4.366-6.032 6.886-11.008 5.628-4.975-1.257-10.504-6.42-9.4-10.786 1.103-4.367 8.421-6.283 13.397-5.025Z'/%3E%3Cpath fill='%23fff' d='M17.194 13.953c-1.258 4.975 1.263 9.903 5.629 11.007 4.366 1.103 8.925-2.035 10.183-7.011 1.257-4.976-.659-12.294-5.025-13.397-4.367-1.104-9.53 4.425-10.787 9.4Z'/%3E%3Cpath fill='%23fff' d='M13.802 27.373c1.257-4.976 5.816-8.114 10.183-7.01 4.366 1.103 6.886 6.03 5.628 11.006-1.257 4.976-6.42 10.505-10.787 9.401-4.366-1.103-6.282-8.421-5.024-13.397Z'/%3E%3Ccircle cx='23.52' cy='22.981' r='3.793' fill='%23F8EFD6' transform='rotate(104.184 23.52 22.981)'/%3E%3C/svg%3E");
|
||||
}
|
||||
Reference in New Issue
Block a user