mirror of
https://github.com/zen-browser/www.git
synced 2025-07-08 17:30:01 +02:00
fix(features): fix features order
This commit is contained in:
taroj1205
parent
97e9ff35c8
commit
f87ef1aba8
1 changed files with 118 additions and 119 deletions
|
|
@ -61,135 +61,134 @@ import Video from './Video.astro'
|
||||||
preload="none"
|
preload="none"
|
||||||
class="rounded-xl border-4 border-white object-cover shadow"
|
class="rounded-xl border-4 border-white object-cover shadow"
|
||||||
/>
|
/>
|
||||||
<div class="long-feature xl:!flex-row-reverse">
|
</div>
|
||||||
<div class="lg:p-24">
|
<div class="long-feature xl:!flex-row-reverse">
|
||||||
<Description class="feature-title text-5xl font-bold md:text-6xl">
|
<div class="lg:p-24">
|
||||||
Compact Mode
|
<Description class="feature-title text-5xl font-bold md:text-6xl">
|
||||||
</Description>
|
Compact Mode
|
||||||
<p class="desc mt-2 text-xl font-normal">
|
</Description>
|
||||||
Zen's compact mode allows you to focus on your work without any
|
<p class="desc mt-2 text-xl font-normal">
|
||||||
distractions.
|
Zen's compact mode allows you to focus on your work without any
|
||||||
</p>
|
distractions.
|
||||||
</div>
|
</p>
|
||||||
<Video
|
|
||||||
src={browserCompactMode}
|
|
||||||
poster={browserCompactModePoster.src}
|
|
||||||
autoplay
|
|
||||||
loop
|
|
||||||
muted
|
|
||||||
playsinline
|
|
||||||
preload="none"
|
|
||||||
class="rounded-xl border-4 border-white object-cover shadow"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="long-feature">
|
<Video
|
||||||
<div class="lg:p-24">
|
src={browserCompactMode}
|
||||||
<Description
|
poster={browserCompactModePoster.src}
|
||||||
class="feature-title whitespace-nowrap text-5xl font-bold md:text-6xl"
|
autoplay
|
||||||
>
|
loop
|
||||||
Zen Glance
|
muted
|
||||||
</Description>
|
playsinline
|
||||||
<p class="desc mt-2 text-xl font-normal">
|
preload="none"
|
||||||
Zen's glance feature allows you to view links without <i>actually</i
|
class="rounded-xl border-4 border-white object-cover shadow"
|
||||||
>
|
/>
|
||||||
opening them.
|
</div>
|
||||||
</p>
|
<div class="long-feature">
|
||||||
</div>
|
<div class="lg:p-24">
|
||||||
<Video
|
<Description
|
||||||
src={browserGlance}
|
class="feature-title whitespace-nowrap text-5xl font-bold md:text-6xl"
|
||||||
poster={browserGlancePoster.src}
|
>
|
||||||
autoplay
|
Zen Glance
|
||||||
loop
|
</Description>
|
||||||
muted
|
<p class="desc mt-2 text-xl font-normal">
|
||||||
playsinline
|
Zen's glance feature allows you to view links without <i>actually</i>
|
||||||
preload="none"
|
opening them.
|
||||||
class="rounded-xl border-4 border-white object-cover shadow"
|
</p>
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="long-feature xl:!flex-row-reverse">
|
<Video
|
||||||
<div class="lg:p-24">
|
src={browserGlance}
|
||||||
<Description
|
poster={browserGlancePoster.src}
|
||||||
class="feature-title whitespace-nowrap text-5xl font-bold md:text-6xl"
|
autoplay
|
||||||
>
|
loop
|
||||||
Split Views
|
muted
|
||||||
</Description>
|
playsinline
|
||||||
<p class="desc mt-2 text-xl font-normal">
|
preload="none"
|
||||||
Zen's split view feature allows you to view multiple tabs at once.
|
class="rounded-xl border-4 border-white object-cover shadow"
|
||||||
</p>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<Video
|
<div class="long-feature xl:!flex-row-reverse">
|
||||||
src={browserSplitViews}
|
<div class="lg:p-24">
|
||||||
poster={browserSplitViewsPoster.src}
|
<Description
|
||||||
autoplay
|
class="feature-title whitespace-nowrap text-5xl font-bold md:text-6xl"
|
||||||
loop
|
>
|
||||||
muted
|
Split Views
|
||||||
playsinline
|
</Description>
|
||||||
preload="none"
|
<p class="desc mt-2 text-xl font-normal">
|
||||||
class="rounded-xl border-4 border-white object-cover shadow"
|
Zen's split view feature allows you to view multiple tabs at once.
|
||||||
/>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="long-feature">
|
<Video
|
||||||
<div class="lg:p-24">
|
src={browserSplitViews}
|
||||||
<Description class="feature-title text-5xl font-bold md:text-6xl">
|
poster={browserSplitViewsPoster.src}
|
||||||
Sidebar
|
autoplay
|
||||||
</Description>
|
loop
|
||||||
<p class="desc mt-2 text-xl font-normal">
|
muted
|
||||||
Zen's sidebar feature allows you to view all your tabs in one place.
|
playsinline
|
||||||
</p>
|
preload="none"
|
||||||
</div>
|
class="rounded-xl border-4 border-white object-cover shadow"
|
||||||
<Video
|
/>
|
||||||
src={browserSidebar}
|
</div>
|
||||||
poster={browserSidebarPoster.src}
|
<div class="long-feature">
|
||||||
autoplay
|
<div class="lg:p-24">
|
||||||
loop
|
<Description class="feature-title text-5xl font-bold md:text-6xl">
|
||||||
muted
|
Sidebar
|
||||||
playsinline
|
</Description>
|
||||||
preload="none"
|
<p class="desc mt-2 text-xl font-normal">
|
||||||
class="rounded-xl border-4 border-white object-cover shadow"
|
Zen's sidebar feature allows you to view all your tabs in one place.
|
||||||
/>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
<Video
|
||||||
|
src={browserSidebar}
|
||||||
|
poster={browserSidebarPoster.src}
|
||||||
|
autoplay
|
||||||
|
loop
|
||||||
|
muted
|
||||||
|
playsinline
|
||||||
|
preload="none"
|
||||||
|
class="rounded-xl border-4 border-white object-cover shadow"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
</section>
|
||||||
function changeFeature(index: number) {
|
<script>
|
||||||
document
|
function changeFeature(index: number) {
|
||||||
.querySelectorAll('#feature-list .feature')
|
|
||||||
.forEach((feature: any, i) => {
|
|
||||||
if (i === index) {
|
|
||||||
feature.setAttribute('active', '')
|
|
||||||
} else {
|
|
||||||
feature.removeAttribute('active')
|
|
||||||
}
|
|
||||||
})
|
|
||||||
document
|
|
||||||
.querySelectorAll('#feature-list-image > *')
|
|
||||||
.forEach((img: any, i) => {
|
|
||||||
img.style.opacity = i === index ? 1 : 0
|
|
||||||
img.classList.toggle('absolute', i !== index)
|
|
||||||
img.classList.toggle('hidden', i !== index)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
document
|
document
|
||||||
.querySelectorAll('#feature-list .feature')
|
.querySelectorAll('#feature-list .feature')
|
||||||
.forEach((feature: any, i) => {
|
.forEach((feature: any, i) => {
|
||||||
feature.addEventListener('click', () => {
|
if (i === index) {
|
||||||
changeFeature(i)
|
feature.setAttribute('active', '')
|
||||||
})
|
} else {
|
||||||
|
feature.removeAttribute('active')
|
||||||
|
}
|
||||||
})
|
})
|
||||||
changeFeature(0)
|
document
|
||||||
</script>
|
.querySelectorAll('#feature-list-image > *')
|
||||||
<style>
|
.forEach((img: any, i) => {
|
||||||
.long-feature {
|
img.style.opacity = i === index ? 1 : 0
|
||||||
@apply relative flex w-full flex-col items-center gap-10 px-4 md:px-12 lg:px-24 xl:flex-row xl:gap-32 xl:px-0 2xl:px-24;
|
img.classList.toggle('absolute', i !== index)
|
||||||
|
img.classList.toggle('hidden', i !== index)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
& > div:first-child {
|
document
|
||||||
@apply xl:min-w-[40%];
|
.querySelectorAll('#feature-list .feature')
|
||||||
}
|
.forEach((feature: any, i) => {
|
||||||
|
feature.addEventListener('click', () => {
|
||||||
|
changeFeature(i)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
changeFeature(0)
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.long-feature {
|
||||||
|
@apply relative flex w-full flex-col items-center gap-10 px-4 md:px-12 lg:px-24 xl:flex-row xl:gap-32 xl:px-0 2xl:px-24;
|
||||||
|
|
||||||
& video {
|
& > div:first-child {
|
||||||
@apply xl:h-96 2xl:h-[32rem];
|
@apply xl:min-w-[40%];
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
|
||||||
</section>
|
& video {
|
||||||
|
@apply xl:h-96 2xl:h-[32rem];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue