ourworld_web/www_circl
23
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

edit pricing

Browse Source
This commit is contained in:
sasha-astiadi
2025-05-07 15:09:12 +02:00
parent e1d084aca5
commit 629ad976cb
10 changed files with 158 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/about.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About - Dark Mode Website</title>
<title>About - Circl</title>
<link href="../dist/output.css" rel="stylesheet">
</head>
<body class="min-h-screen bg-black">

2
src/base.html
View File

@@ -30,7 +30,7 @@
<!-- START: Footer -->
<footer class="mt-12 text-center text-gray-400">
<p>&copy; 2025 Dark Mode Website. All rights reserved.</p>
<p>&copy; 2025 Circl. All rights reserved.</p>
</footer>
<!-- END: Footer -->
</div>

2
src/contact.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact - Dark Mode Website</title>
<title>Contact - Circl</title>
<link href="../dist/output.css" rel="stylesheet">
</head>
<body class="min-h-screen bg-black">

2
src/features.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Features - Dark Mode Website</title>
<title>Features - Circl</title>
<link href="../dist/output.css" rel="stylesheet">
</head>
<body class="min-h-screen bg-black">

BIN
src/home/img/backgrounds/cta.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

58
src/index.html
View File

@@ -229,20 +229,13 @@
</div>
<p class="mx-auto mt-6 max-w-2xl text-center text-lg font-extralight fade-up text-pretty text-gray-400 sm:text-xl/8">Choose an affordable plan that’s packed with the best features for engaging your audience and needs.</p>
<div class="mt-16 flex justify-center">
<fieldset aria-label="Payment frequency">
<div class="grid grid-cols-2 gap-x-1 rounded-full bg-white p-1 text-center text-xs/5 font-semibold text-black">
<!-- Checked: "bg-indigo-500" -->
<label class="cursor-pointer rounded-full px-2.5 py-1">
<input type="radio" name="frequency" value="monthly" class="sr-only">
<span>Monthly</span>
</label>
<!-- Checked: "bg-indigo-500" -->
<label class="cursor-pointer rounded-full px-2.5 py-1">
<input type="radio" name="frequency" value="annually" class="sr-only">
<span>Annually</span>
</label>
<button type="button" class="toggle-switch" data-state="unchecked" id="billing-toggle" aria-label="Toggle billing frequency">
<div class="toggle-switch-thumb"></div>
<div class="toggle-switch-label">
<span>Monthly</span>
<span>Annually</span>
</div>
</fieldset>
</button>
</div>
<div class="isolate mx-auto mt-10 grid max-w-md grid-cols-1 gap-8 lg:mx-0 lg:max-w-none lg:grid-cols-3">
<div class="pricing-card rounded-3xl p-8 ring-1 ring-white/10 xl:p-10">
@@ -408,10 +401,47 @@
<div class="container mx-auto px-4">
<footer class="mt-12 text-center text-gray-400">
<p class="fade-up">&copy; 2025 Dark Mode Website. All rights reserved.</p>
<p class="fade-up">&copy; 2025 Circl. All rights reserved.</p>
</footer>
</div>
<script>
// Pricing toggle functionality
const billingToggle = document.getElementById('billing-toggle');
const priceElements = document.querySelectorAll('.pricing-card .text-4xl');
const frequencyElements = document.querySelectorAll('.pricing-card [class*="text-sm"]');
billingToggle.addEventListener('click', () => {
const isAnnual = billingToggle.getAttribute('data-state') === 'checked';
billingToggle.setAttribute('data-state', isAnnual ? 'unchecked' : 'checked');
const frequency = isAnnual ? 'year' : 'month';
const prices = isAnnual ? {
teams: '$71.88', // $5.99 * 12
companies: '$131.88', // $10.99 * 12
businesses: '$251.88' // $20.99 * 12
} : {
teams: '$7.99',
companies: '$12.99',
businesses: '$24.99'
};
// Update prices and frequency text using parent elements
const cards = {
teams: document.querySelector('#tier-freelancer').closest('.pricing-card'),
companies: document.querySelector('#tier-startup').closest('.pricing-card'),
businesses: document.querySelector('#tier-enterprise').closest('.pricing-card')
};
// Update each card's price and frequency
Object.entries(cards).forEach(([type, card]) => {
const priceElement = card.querySelector('.text-4xl');
const frequencyElement = card.querySelector('.text-sm\\/6');
priceElement.textContent = prices[type];
frequencyElement.textContent = `/ user / ${frequency}`;
});
});
const observerOptions = {
root: null,
rootMargin: '0px',

33
src/input.css
View File

@@ -212,4 +212,37 @@
.connector-text {
@apply text-white text-base md:text-lg font-medium tracking-wider mb-4;
}
.toggle-switch {
@apply relative inline-flex cursor-pointer rounded-full p-1 bg-black/30 transition-colors duration-300;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.toggle-switch[data-state="checked"] {
@apply bg-gray-500;
}
.toggle-switch-thumb {
@apply h-6 w-[120px] rounded-full bg-white transition-transform duration-300 transform;
}
.toggle-switch[data-state="checked"] .toggle-switch-thumb {
transform: translateX(100%);
}
.toggle-switch-label {
@apply absolute inset-0 flex items-center justify-between px-4 text-sm font-medium;
}
.toggle-switch-label span {
@apply z-10 text-black transition-colors duration-300;
}
.toggle-switch[data-state="checked"] .toggle-switch-label span:first-child {
@apply text-white;
}
.toggle-switch[data-state="unchecked"] .toggle-switch-label span:last-child {
@apply text-white;
}
}