ourworld_web/www_circl
20
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
dist/output.css vendored
View File

@ -921,18 +921,6 @@ body:is(.dark *) {
}
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.absolute {
position: absolute;
}
@ -1174,18 +1162,10 @@ body:is(.dark *) {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.cursor-pointer {
cursor: pointer;
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.flex-col {
flex-direction: column;
}
@ -1281,11 +1261,6 @@ body:is(.dark *) {
background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
}
.bg-indigo-500 {
--tw-bg-opacity: 1;
background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1));
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
@ -1362,10 +1337,6 @@ body:is(.dark *) {
object-fit: cover;
}
.p-1 {
padding: 0.25rem;
}
.p-8 {
padding: 2rem;
}
@ -1443,6 +1414,11 @@ body:is(.dark *) {
line-height: 2rem;
}
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.text-sm\/6 {
font-size: 0.875rem;
line-height: 1.5rem;
@ -1473,11 +1449,6 @@ body:is(.dark *) {
letter-spacing: -0.025em;
}
.text-black {
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.text-gray-300 {
--tw-text-opacity: 1;
color: rgb(209 213 219 / var(--tw-text-opacity, 1));
@ -1668,6 +1639,72 @@ body:is(.dark *) {
}
}
.toggle-switch {
position: relative;
display: inline-flex;
cursor: pointer;
border-radius: 9999px;
background-color: rgb(0 0 0 / 0.3);
padding: 0.25rem;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 300ms;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.toggle-switch[data-state="checked"] {
--tw-bg-opacity: 1;
background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
}
.toggle-switch-thumb {
height: 1.5rem;
width: 120px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
border-radius: 9999px;
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 300ms;
}
.toggle-switch[data-state="checked"] .toggle-switch-thumb {
transform: translateX(100%);
}
.toggle-switch-label {
position: absolute;
inset: 0px;
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 1rem;
padding-right: 1rem;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 500;
}
.toggle-switch-label span {
z-index: 10;
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity, 1));
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 300ms;
}
.toggle-switch[data-state="checked"] .toggle-switch-label span:first-child {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.toggle-switch[data-state="unchecked"] .toggle-switch-label span:last-child {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.hover\:scale-105:hover {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;

6
package-lock.json generated
View File

@ -9,10 +9,10 @@
"version": "1.0.0",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^10.4.14",
"autoprefixer": "^10.4.21",
"http-server": "^14.1.1",
"postcss": "^8.4.23",
"tailwindcss": "^3.3.2"
"postcss": "^8.5.3",
"tailwindcss": "^3.4.17"
}
},
"node_modules/@alloc/quick-lru": {

6
package.json
View File

@ -17,9 +17,9 @@
"license": "ISC",
"description": "",
"devDependencies": {
"autoprefixer": "^10.4.14",
"autoprefixer": "^10.4.21",
"http-server": "^14.1.1",
"postcss": "^8.4.23",
"tailwindcss": "^3.3.2"
"postcss": "^8.5.3",
"tailwindcss": "^3.4.17"
}
}

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;
}
}