mirror of
https://github.com/zen-browser/www.git
synced 2025-07-08 01:10:02 +02:00
115 lines
3.8 KiB
Text
115 lines
3.8 KiB
Text
<script>
|
|
import JSConfetti from 'js-confetti'
|
|
import { UAParser } from 'ua-parser-js'
|
|
|
|
// Handle platform selection
|
|
const platformSections = document.querySelectorAll('.platform-section')
|
|
|
|
// Function to detect OS and select appropriate platform
|
|
function detectOS() {
|
|
const userAgent = window.navigator.userAgent
|
|
const { cpu, os } = UAParser(userAgent)
|
|
let detectedOS = 'mac' // Default to macOS
|
|
|
|
if (os.name === 'Windows') {
|
|
detectedOS = 'windows'
|
|
} else if (os.name === 'Linux' || os.name === 'Ubuntu') {
|
|
detectedOS = 'linux'
|
|
}
|
|
|
|
let arch = cpu.architecture || 'x86_64' // Default to x86_64
|
|
if (arch === 'amd64' || arch === 'x86_64') {
|
|
arch = 'x86_64'
|
|
} else if (arch === 'arm64' || arch === 'aarch64') {
|
|
arch = 'aarch64'
|
|
} else if (arch === 'arm') {
|
|
arch = 'arm64' // Treat arm as arm64 for simplicity
|
|
}
|
|
|
|
return { os: detectedOS, cpu: arch }
|
|
}
|
|
|
|
function getRandomNumber(min: number, max: number) {
|
|
return Math.floor(Math.random() * (max - min + 1)) + min
|
|
}
|
|
|
|
// Initialize platform based on user's OS
|
|
async function initializePlatform() {
|
|
const detectedOS = detectOS()
|
|
selectPlatform(detectedOS.os, detectedOS.cpu)
|
|
|
|
for (const button of document.querySelectorAll('.download-button')) {
|
|
button.addEventListener('click', () => {
|
|
const jsConfetti = new JSConfetti()
|
|
jsConfetti.addConfetti({
|
|
confettiNumber: 100,
|
|
// If we get a 1 to 10k chance, show only burger confetti
|
|
...(getRandomNumber(1, 10000) === 1 ? { emojis: ['🍔'] } : {}),
|
|
})
|
|
})
|
|
}
|
|
}
|
|
|
|
// Function to select a platform
|
|
async function selectPlatform(platform: string, cpu = 'x86_64') {
|
|
// Show/hide platform sections
|
|
for (const section of platformSections) {
|
|
if (
|
|
section.getAttribute('data-platform') === platform &&
|
|
section.getAttribute('data-cpu') === cpu
|
|
) {
|
|
section.setAttribute('data-active', 'true')
|
|
} else {
|
|
section.setAttribute('data-active', 'false')
|
|
}
|
|
}
|
|
}
|
|
|
|
// Check for twilight mode
|
|
async function checkTwilightMode() {
|
|
const urlParams = new URLSearchParams(window.location.search)
|
|
const isTwilight = urlParams.has('twilight')
|
|
|
|
if (isTwilight) {
|
|
const twilightInfoElem = document.getElementById('twilight-info')
|
|
twilightInfoElem?.setAttribute('data-twilight', 'true')
|
|
|
|
// Update UI to show twilight mode with animation
|
|
const titleElem = document.getElementById('download-title')
|
|
if (titleElem) {
|
|
const zenText = titleElem.innerHTML
|
|
titleElem.innerHTML = zenText.replace('Zen', 'Twilight')
|
|
}
|
|
|
|
const tags = document.querySelectorAll('.release-type-tag')
|
|
for (const tag of tags) {
|
|
tag.innerHTML = tag.innerHTML.replace('Beta', 'Twilight')
|
|
}
|
|
|
|
// Apply twilight mode to all relevant elements
|
|
const coralElements = document.querySelectorAll(
|
|
'.download-browser-logo, .release-type-tag, .decorative-gradient, .download-link, .download-arrow-icon, .download-card__icon, .checksum-icon-btn, .copy-btn, .flathub-download'
|
|
)
|
|
for (const element of coralElements) {
|
|
element.setAttribute('data-twilight', 'true')
|
|
}
|
|
|
|
// Replace all download links with twilight versions
|
|
const downloadLinks = document.querySelectorAll('a.download-button')
|
|
|
|
for (const link of downloadLinks) {
|
|
if (!link.id.includes('beta')) {
|
|
const href = link.getAttribute('href')
|
|
if (href && href.includes('/latest/download/')) {
|
|
const twilightHref = href.replace('/latest/download/', '/download/twilight/')
|
|
link.setAttribute('href', twilightHref)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Initialize the page
|
|
initializePlatform()
|
|
checkTwilightMode()
|
|
</script>
|