Skip to content

Commit

Permalink
better payment page styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@SanderGi
SanderGi committed Jan 13, 2024
1 parent b6a9a70 commit 421eb34
Show file tree
Hide file tree
Showing 6 changed files with 90 additions and 80 deletions.
2 changes: 1 addition & 1 deletion public/components/UserIcon.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ button {
z-index: 1;
top: 110%;
left: 0;
margin-left: -230%;
margin-left: -232%;
}
.popup::after {
content: "";
Expand Down
26 changes: 0 additions & 26 deletions public/groups.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,32 +40,6 @@ <h1>My Groups</h1>
<div id="businesses"></div>
</section>
</navigation-manager>
<style>
.business-card {
background-color: aliceblue;
width: 80%;
min-width: min(100%, 500px);
margin: auto;
padding: 10px;
border-radius: 10px;
margin-bottom: 1rem;
position: relative;
max-width: var(--max-width);
}

.business-card > h1 > span {
font-size: medium;
display: inline;
}

.business-card > hr {
border: 1px solid var(--accent);
width: 30%;
margin: auto;
margin-top: 6px;
margin-bottom: 6px;
}
</style>

<script type="module" src="/groups.js"></script>
<noscript>
Expand Down
39 changes: 23 additions & 16 deletions public/payment.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,44 +22,51 @@
</head>
<body>
<navigation-manager>
<section id="subscriptions">
<section class="light-section">
<h1>Manage Subscriptions</h1>
<br>
<div id="subscriptions"></div>
</section>

<section class="light-section">
<section class="medium-section">
<h2>Choose Subscription</h2>
<br>
<div id="free" class="subscription">
<h3 style="margin-bottom: 3px">Free Plan</h3>
<div style="text-align: center; max-width: 80%; margin: auto">
<li class="subscription-list">Price per Month: $0.00</li>
<li class="subscription-list">Allow up to 50 members</li>
<li class="subscription-list">
<hr>
<ul style="text-align: center; max-width: 80%; margin: auto">
<li>Price per Month: $0.00</li>
<li>Allow up to 50 members</li>
<li>
Includes admin, moderator, scanner, and user privileges
</li>
<li class="subscription-list">FAQ and GitHub community support</li>
<li>FAQ and GitHub community support</li>
</div>
</div>
<div id="standard" class="subscription">
<h3 style="margin-bottom: 3px">Standard Plan</h3>
<div style="text-align: center; max-width: 80%; margin: auto">
<li class="subscription-list">Price per Month: $7.00</li>
<li class="subscription-list">Allow up to 100 members</li>
<li class="subscription-list">
<hr>
<ul style="text-align: center; max-width: 80%; margin: auto">
<li>Price per Month: $7.00</li>
<li>Allow up to 100 members</li>
<li>
Includes custom roles, admin, moderator, scanner, and user privileges
</li>
<li class="subscription-list">Email support (response within 3 days)</li>
<li>Email support (response within 3 days)</li>
</div>
</div>
</section>

<section id="purchase-subscription" class="medium-section" style="display: none">
<section id="purchase-subscription" class="purple-section" style="display: none">
<h2>Purchase Subscriptions</h2>
<form id="payment-form" style="max-width: var(--max-width); margin: auto">
<p>Currently free. Use the credit card number 4111 1111 1111 1111 and any expiration date, CVV, and postal code.</p>
<br>
<form class="form" id="payment-form" style="max-width: var(--max-width); margin: auto">
<div id="dropin-container"></div>
<br />
<label for="businessName">Business Name:</label>
<label for="businessName">Group Name:</label>
<input type="text" id="businessName" name="BusinessName" />
<button class="button" type="submit">Purchase Standard Subscription</button>
<button id="purchase-btn" style="width: 32ch; vertical-align: top;" class="button" type="submit">Purchase</button>
</form>
</section>
</navigation-manager>
Expand Down
19 changes: 9 additions & 10 deletions public/payment.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,16 +32,16 @@ async function showSubscriptions() {
subscriptions = [];
}

document.getElementById('subscriptions').innerHTML =
'<h1>Manage Subscriptions</h1><h3>Currently free. Use the credit card number 4111 1111 1111 1111 and any expiration date, CVV, and postal code.</h3>';
subscriptions.forEach(sub => {
const div = document.createElement('div');
div.id = sub.id;
div.classList.add('business-card');
div.innerHTML = /* html */ `
<h3 style="margin-bottom: 5px;">${sanitizeText(sub.plan)} PLAN</h3>
<div style="text-align: center; max-width: 28%; margin: auto;">
<li style="text-align: left; margin-bottom: 3px;">Business: ${sanitizeText(
sub.businessName,
<h3 style="margin-bottom: 5px;">${sanitizeText(sub.businessName)}</h3>
<hr>
<div style="text-align: center; max-width: fit-content; margin: auto;">
<li style="text-align: left; margin-bottom: 3px;">Subscription: ${sanitizeText(
sub.plan,
)}</li>
<li style="text-align: left; margin-bottom: 3px;">Status: ${sanitizeText(
sub.status,
Expand All @@ -59,18 +59,15 @@ async function showSubscriptions() {
sub.id
}" style="background:none;border:none;position:absolute;top:10px;right:10px;width:auto;min-width:0">❌</button>
`;
div.style =
'max-width: var(--max-width); border: 1px solid black; border-radius: 20px; padding: 10px; margin: auto; position: relative';
document.getElementById('subscriptions').appendChild(div);
document.getElementById('btn-' + sub.id).addEventListener('click', async () => {
if (
await Popup.confirm(
`This will cancel this subscription and delete all data of its associated business. Proceed?`,
`This will cancel this subscription and delete all data of its associated group. Proceed?`,
)
)
unsubscribe(sub.id);
});
document.getElementById('subscriptions').appendChild(document.createElement('br'));
});
hideLoader();
}
Expand Down Expand Up @@ -129,6 +126,7 @@ freeSubscription.addEventListener('click', async () => {
console.log('free subscription');
freeSubscription.classList.add('active-subscription');
standardSubscription.classList.remove('active-subscription');
document.getElementById('purchase-btn').textContent = 'Create Free Group';
document.getElementById('purchase-subscription').style.display = 'block';
subscriptionType = 'FREE';
});
Expand All @@ -137,6 +135,7 @@ standardSubscription.addEventListener('click', async () => {
console.log('standard subscription');
freeSubscription.classList.remove('active-subscription');
standardSubscription.classList.add('active-subscription');
document.getElementById('purchase-btn').textContent = 'Purchase Standard Subscription';
document.getElementById('purchase-subscription').style.display = 'block';
subscriptionType = 'STANDARD';
});
Expand Down
27 changes: 0 additions & 27 deletions public/styles/button.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,30 +101,3 @@
display: flex;
align-items: center;
}

.subscription {
max-width: calc(var(--max-width) / 2);
border: 1px solid black;
border-radius: 20px;
padding: 10px;
margin: auto;
position: relative;
display: inline-block;
margin-bottom: 5px;
}

.subscription:hover {
border: 1px solid black;
background-color: var(--accent-lighter);
}

.subscription-list {
text-align: left;
margin-bottom: 3px;
}

.subscription.active-subscription {
border: 3px solid black;
background-color: var(--accent);
color: white;
}
57 changes: 57 additions & 0 deletions public/styles/sections.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,3 +56,60 @@ section > ::slotted(img) {
border: none;
}
}

.business-card {
background-color: aliceblue;
width: 80%;
min-width: min(100%, 500px);
margin: auto;
padding: 10px;
border-radius: 10px;
margin-bottom: 1rem;
position: relative;
max-width: var(--max-width);
}

.business-card > h1 > span {
font-size: medium;
display: inline;
}

.business-card > hr, .subscription > hr {
border: 1px solid var(--accent);
width: 30%;
margin: auto;
margin-top: 6px;
margin-bottom: 6px;
}

@media (max-width: 500px) {
.business-card {
border-radius: 0;
}
}

.subscription {
max-width: calc(var(--max-width) / 2);
border: 3px solid transparent;
border-radius: 20px;
padding: 10px;
margin: auto;
position: relative;
display: inline-block;
margin-bottom: 5px;
background-color: aliceblue;
cursor: pointer;
}

.subscription:hover {
opacity: 0.8;
}

.subscription li {
text-align: left;
margin-bottom: 3px;
}

.subscription.active-subscription {
border: 3px solid var(--accent);
}

0 comments on commit 421eb34

Please sign in to comment.