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

edit colors

Browse Source
This commit is contained in:
sasha-astiadi 2025-05-07 13:57:50 +02:00
parent 35540c9432
commit 3053f54fb4
12 changed files with 52 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
dist/output.css vendored
View File

@ -747,7 +747,7 @@ body:is(.dark *) {
border-radius: 9999px;
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(234 179 8 / var(--tw-border-opacity, 1));
border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
padding-left: 1rem;
@ -770,7 +770,7 @@ body:is(.dark *) {
z-index: -1;
border-radius: 9999px;
--tw-bg-opacity: 1;
background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));
background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
opacity: 0.2;
--tw-blur: blur(16px);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@ -782,7 +782,7 @@ body:is(.dark *) {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
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));
--tw-shadow-color: rgb(234 179 8 / 0.7);
--tw-shadow-color: rgb(107 114 128 / 0.7);
--tw-shadow: var(--tw-shadow-colored);
}
@ -831,10 +831,10 @@ body:is(.dark *) {
}
.pill-button {
box-shadow: 0 0 60px rgba(234, 179, 8, 0.8),
0 0 120px rgba(234, 179, 8, 0.6),
0 0 180px rgba(234, 179, 8, 0.4);
border: 2px solid rgba(234, 179, 8, 0.9);
box-shadow: 0 0 60px rgba(198, 198, 196, 0.8),
0 0 120px rgba(116, 116, 115, 0.6),
0 0 180px rgba(70, 69, 68, 0.4);
border: 2px solid rgba(44, 43, 42, 0.9);
}
.circular-layout {
@ -992,6 +992,10 @@ body:is(.dark *) {
margin-bottom: 1rem;
}
.mb-6 {
margin-bottom: 1.5rem;
}
.mb-8 {
margin-bottom: 2rem;
}
@ -1028,6 +1032,10 @@ body:is(.dark *) {
height: 1.5rem;
}
.h-8 {
height: 2rem;
}
.h-\[600px\] {
height: 600px;
}
@ -1246,6 +1254,11 @@ body:is(.dark *) {
padding-bottom: 3rem;
}
.py-24 {
padding-top: 6rem;
padding-bottom: 6rem;
}
.py-48 {
padding-top: 12rem;
padding-bottom: 12rem;
@ -1337,6 +1350,10 @@ body:is(.dark *) {
transition-delay: 200ms;
}
.duration-1000 {
transition-duration: 1000ms;
}
.duration-500 {
transition-duration: 500ms;
}
@ -1439,4 +1456,8 @@ body:is(.dark *) {
.lg\:h-6 {
height: 1.5rem;
}
.lg\:pt-12 {
padding-top: 3rem;
}
}

2
src/about.html
View File

@ -10,7 +10,7 @@
<div class="container mx-auto px-4 py-8">
<nav class="flex items-center justify-between mb-8">
<div class="flex items-center">
<img src="assets/logos/logo_lightmode.svg" alt="Logo" class="h-6 md:h-5 lg:h-6 w-auto mr-4">
<img src="assets/logos/logo_lightmode2.svg" alt="Logo" class="h-6 md:h-5 lg:h-6 w-auto mr-4">
</div>
<ul class="flex space-x-6 text-white">
<li><a href="index.html" class="hover:text-gray-300">Home</a></li>

BIN
src/assets/.DS_Store vendored
View File

Binary file not shown.

4
src/base.html
View File

@ -11,7 +11,7 @@
<!-- START: Navigation -->
<nav class="flex items-center justify-between mb-8">
<div class="flex items-center">
<img src="assets/logos/logo_lightmode.svg" alt="Logo" class="h-6 md:h-5 lg:h-6 w-auto mr-4">
<img src="assets/logos/logo_lightmode2.svg" alt="Logo" class="h-8 mr-4">
</div>
<ul class="flex space-x-6 text-white">
<li><a href="index.html" class="hover:text-gray-300">Home</a></li>
@ -34,5 +34,3 @@
</footer>
<!-- END: Footer -->
</div>
</body>
</html>

2
src/contact.html
View File

@ -10,7 +10,7 @@
<div class="container mx-auto px-4 py-8">
<nav class="flex items-center justify-between mb-8">
<div class="flex items-center">
<img src="assets/logos/logo_lightmode.svg" alt="Logo" class="h-6 md:h-5 lg:h-6 w-auto mr-4">
<img src="assets/logos/logo_lightmode2.svg" alt="Logo" class="h-6 md:h-5 lg:h-6 w-auto mr-4">
</div>
<ul class="flex space-x-6 text-white">
<li><a href="index.html" class="hover:text-gray-300">Home</a></li>

2
src/features.html
View File

@ -10,7 +10,7 @@
<div class="container mx-auto px-4 py-8">
<nav class="flex items-center justify-between mb-8">
<div class="flex items-center">
<img src="assets/logos/logo_lightmode.svg" alt="Logo" class="h-6 md:h-5 lg:h-6 w-auto mr-4">
<img src="assets/logos/logo_lightmode2.svg" alt="Logo" class="h-6 md:h-5 lg:h-6 w-auto mr-4">
</div>
<ul class="flex space-x-6 text-white">
<li><a href="index.html" class="hover:text-gray-300">Home</a></li>

BIN
src/home/img/carousell/HUMAN2.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
src/home/img/carousell/ONE2.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
src/home/img/carousell/OWN2.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
src/home/img/carousell/WEB42.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 56 KiB

45
src/index.html
View File

@ -17,7 +17,7 @@
<div class="container mx-auto px-4 py-8">
<nav class="flex items-center justify-between mb-8">
<div class="flex items-center">
<img src="../src/assets/logos/logo_lightmode.svg" alt="Logo" class="h-6 md:h-5 lg:h-6 w-auto mr-4">
<img src="../src/assets/logos/logo_lightmode2.svg" alt="Logo" class="h-6 md:h-5 lg:h-6 w-auto mr-4">
</div>
<ul class="flex space-x-6 text-white">
<li><a href="index.html" class="hover:text-gray-300">Home</a></li>
@ -62,32 +62,32 @@
<section class="relative w-screen h-[600px] overflow-hidden -mx-[50vw] left-[50%] right-[50%] relative">
<div class="carousel relative w-full h-[600px]">
<div class="carousel-slides absolute inset-0">
<div class="carousel-slide absolute inset-0 opacity-95 transition-opacity duration-3000">
<img src="../src/home/img/carousell/data.webp" alt="Data" class="w-full h-[600px] object-cover">
<div class="carousel-slide absolute inset-0 opacity-95 transition-opacity duration-1000">
<img src="../src/home/img/carousell/own2.webp" alt="Data" class="w-full h-[600px] object-cover">
</div>
<div class="carousel-slide absolute inset-0 opacity-0 transition-opacity duration-3000">
<img src="../src/home/img/carousell/human.webp" alt="Human" class="w-full h-[600px] object-cover">
<img src="../src/home/img/carousell/human2.webp" alt="Human" class="w-full h-[600px] object-cover">
</div>
<div class="carousel-slide absolute inset-0 opacity-0 transition-opacity duration-3000">
<img src="../src/home/img/carousell/one.webp" alt="One" class="w-full h-[600px] object-cover">
<img src="../src/home/img/carousell/one2.webp" alt="One" class="w-full h-[600px] object-cover">
</div>
<div class="carousel-slide absolute inset-0 opacity-0 transition-opacity duration-3000">
<img src="../src/home/img/carousell/WEB4.webp" alt="Web4" class="w-full h-[600px] object-cover">
<img src="../src/home/img/carousell/WEB42.webp" alt="Web4" class="w-full h-[600px] object-cover">
</div>
</div>
<div class="absolute inset-0 bg-black bg-opacity-50 z-10"></div>
<div class="carousel-text absolute inset-0 flex items-center justify-center z-20">
<div class="carousel-text-slides relative w-full">
<div class="carousel-text-slide absolute inset-0 flex items-center justify-center opacity-95 transition-opacity duration-2000">
<div class="carousel-text-slide absolute inset-0 flex items-center justify-center opacity-95 transition-opacity duration-1000">
<h2 class="hero-heading text-center max-w-4xl px-4">Own Your Data</h2>
</div>
<div class="carousel-text-slide absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-2000">
<div class="carousel-text-slide absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-1000">
<h2 class="hero-heading text-center max-w-4xl px-4">Human-centered</h2>
</div>
<div class="carousel-text-slide absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-2000">
<div class="carousel-text-slide absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-1000">
<h2 class="hero-heading text-center max-w-4xl px-4">All in One</h2>
</div>
<div class="carousel-text-slide absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-2000">
<div class="carousel-text-slide absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-1000">
<h2 class="hero-heading text-center max-w-4xl px-4">Built on Web4</h2>
</div>
</div>
@ -111,28 +111,19 @@
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-10">
<h1 class="hero-heading-2 text-center fade-up max-w-xl">Everything You Need in One <span class="font-semibold">Circl.</span></h1>
</div>
<!-- Top -->
<div class="circular-button" style="top: -10%; left: 50%; transform: translate(-50%, -50%);">
<button class="pill-button" style="animation-delay: 0ms;">File Drive</button>
</div>
<!-- Top Right -->
<div class="circular-button" style="top: 10%; right: -5%; transform: translate(50%, -50%);">
<button class="pill-button" style="animation-delay: 200ms;">Circle Docs</button>
<button class="pill-button" style="animation-delay: 200ms;">Circl Docs</button>
</div>
<!-- Right -->
<div class="circular-button" style="top: 50%; right: -20%; transform: translate(50%, -50%);">
<button class="pill-button" style="animation-delay: 400ms;">Secure VPN</button>
</div>
<!-- Bottom Right -->
<div class="circular-button" style="bottom: 10%; right: -10%; transform: translate(50%, 50%);">
<button class="pill-button" style="animation-delay: 600ms;">Video Call</button>
<button class="pill-button" style="animation-delay: 400ms;">Circl Chat</button>
</div>
<!-- Bottom -->
<div class="circular-button" style="bottom: -10%; left: 50%; transform: translate(-50%, 50%);">
<div class="circular-button" style="bottom: 10%; right: -30%; transform: translate(-50%, 50%);">
<button class="pill-button" style="animation-delay: 800ms;">Circl Mail</button>
</div>
@ -148,7 +139,7 @@
<!-- upper left -->
<div class="circular-button" style="top: 10%; left: -10%; transform: translate(-50%, -50%);">
<button class="pill-button" style="animation-delay: 1200ms;">Project Board</button>
<button class="pill-button" style="animation-delay: 1200ms;">Video Call</button>
</div>
</div>
</div>
@ -165,9 +156,6 @@
<div class="w-full">
<button class="pill-button w-full" style="animation-delay: 200ms;">Circle Docs</button>
</div>
<div class="w-full">
<button class="pill-button w-full" style="animation-delay: 400ms;">Secure VPN</button>
</div>
<div class="w-full">
<button class="pill-button w-full" style="animation-delay: 600ms;">Video Call</button>
</div>
@ -180,9 +168,6 @@
<div class="w-full">
<button class="pill-button w-full" style="animation-delay: 1200ms;">AI Assistant</button>
</div>
<div class="w-full">
<button class="pill-button w-full" style="animation-delay: 1400ms;">Project Board</button>
</div>
</div>
</div>
</section>
@ -219,7 +204,7 @@
</div>
</div>
</section>
<!-- Home Section 8 -->
<section class="py-24 relative w-screen min-h-[600px] overflow-hidden -mx-[50vw] left-[50%] right-[50%] flex items-center justify-center bg-cover bg-center" style="background-image: url('../src/home/img/backgrounds/home_bg8.webp');">
<div class="absolute inset-0 bg-black bg-opacity-30"></div>

10
src/input.css
View File

@ -59,7 +59,7 @@
}
.main-button {
@apply relative px-4 py-2 md:px-6 md:py-3 text-white text-base md:text-lg font-medium rounded-full bg-black border border-yellow-500 transition-all duration-300 before:absolute before:inset-0 before:rounded-full before:blur-lg before:bg-yellow-500 before:opacity-20 before:content-[''] before:z-[-1] hover:before:opacity-40 hover:before:blur-xl hover:scale-105 hover:shadow-yellow-500/70;
@apply relative px-4 py-2 md:px-6 md:py-3 text-white text-base md:text-lg font-medium rounded-full bg-black border border-gray-300 transition-all duration-300 before:absolute before:inset-0 before:rounded-full before:blur-lg before:bg-gray-500 before:opacity-20 before:content-[''] before:z-[-1] hover:before:opacity-40 hover:before:blur-xl hover:scale-105 hover:shadow-gray-500/70;
}
.starry-bg {
@ -71,10 +71,10 @@
.pill-button {
@apply px-5 py-2.5 rounded-[50px] bg-black text-white font-bold relative transition-all duration-500 transform hover:scale-105 text-base;
box-shadow: 0 0 60px rgba(234, 179, 8, 0.8),
0 0 120px rgba(234, 179, 8, 0.6),
0 0 180px rgba(234, 179, 8, 0.4);
border: 2px solid rgba(234, 179, 8, 0.9);
box-shadow: 0 0 60px rgba(198, 198, 196, 0.4),
0 0 120px rgba(116, 116, 115, 0.2),
0 0 180px rgba(70, 69, 68, 0.1);
border: 2px solid rgba(152, 151, 149, 0.9);
}
.circular-layout {