commit 91cee9a33a5b358973293fcf569d6cf5a5d5b5ab Author: 4DBug <4DBug@github.com> Date: Sat Feb 28 21:33:31 2026 -0600 create bug.tools diff --git a/background.mp4 b/background.mp4 new file mode 100644 index 0000000..5c2a93a Binary files /dev/null and b/background.mp4 differ diff --git a/fonts/BRAILLE1.ttf b/fonts/BRAILLE1.ttf new file mode 100644 index 0000000..ff67aa3 Binary files /dev/null and b/fonts/BRAILLE1.ttf differ diff --git a/fonts/FORCEDSQUARE.ttf b/fonts/FORCEDSQUARE.ttf new file mode 100644 index 0000000..f9a7bd2 Binary files /dev/null and b/fonts/FORCEDSQUARE.ttf differ diff --git a/fonts/SFTelegraphicLight.ttf b/fonts/SFTelegraphicLight.ttf new file mode 100644 index 0000000..c2f9940 Binary files /dev/null and b/fonts/SFTelegraphicLight.ttf differ diff --git a/fonts/nitrods-font.otf b/fonts/nitrods-font.otf new file mode 100644 index 0000000..e6c5252 Binary files /dev/null and b/fonts/nitrods-font.otf differ diff --git a/fonts/nitrods-font.ttf b/fonts/nitrods-font.ttf new file mode 100644 index 0000000..059555f Binary files /dev/null and b/fonts/nitrods-font.ttf differ diff --git a/fonts/spaceage.ttf b/fonts/spaceage.ttf new file mode 100644 index 0000000..85a62a8 Binary files /dev/null and b/fonts/spaceage.ttf differ diff --git a/fonts/war-games.ttf b/fonts/war-games.ttf new file mode 100644 index 0000000..a56b2d3 Binary files /dev/null and b/fonts/war-games.ttf differ diff --git a/images/ascii-lab.gif b/images/ascii-lab.gif new file mode 100644 index 0000000..875a5dd Binary files /dev/null and b/images/ascii-lab.gif differ diff --git a/images/ascii_cat.gif b/images/ascii_cat.gif new file mode 100644 index 0000000..2799b06 Binary files /dev/null and b/images/ascii_cat.gif differ diff --git a/images/ascii_cat_sleep.gif b/images/ascii_cat_sleep.gif new file mode 100644 index 0000000..a46241f Binary files /dev/null and b/images/ascii_cat_sleep.gif differ diff --git a/images/dotloader.gif b/images/dotloader.gif new file mode 100644 index 0000000..01f9472 Binary files /dev/null and b/images/dotloader.gif differ diff --git a/images/dsonlineicon.png b/images/dsonlineicon.png new file mode 100644 index 0000000..5ff1635 Binary files /dev/null and b/images/dsonlineicon.png differ diff --git a/images/loadercircle.png b/images/loadercircle.png new file mode 100644 index 0000000..57c22a7 Binary files /dev/null and b/images/loadercircle.png differ diff --git a/images/loadingicon.gif b/images/loadingicon.gif new file mode 100644 index 0000000..e8d1e54 Binary files /dev/null and b/images/loadingicon.gif differ diff --git a/images/nav.png b/images/nav.png new file mode 100644 index 0000000..3ba9284 Binary files /dev/null and b/images/nav.png differ diff --git a/images/navcircle.png b/images/navcircle.png new file mode 100644 index 0000000..1065be3 Binary files /dev/null and b/images/navcircle.png differ diff --git a/images/navcircleblue.png b/images/navcircleblue.png new file mode 100644 index 0000000..c7badf6 Binary files /dev/null and b/images/navcircleblue.png differ diff --git a/images/pitcochatmenu.png b/images/pitcochatmenu.png new file mode 100644 index 0000000..51c9255 Binary files /dev/null and b/images/pitcochatmenu.png differ diff --git a/images/snowflake.gif b/images/snowflake.gif new file mode 100644 index 0000000..8075fdb Binary files /dev/null and b/images/snowflake.gif differ diff --git a/images/snowflake/frame001.png b/images/snowflake/frame001.png new file mode 100644 index 0000000..09c1a52 Binary files /dev/null and b/images/snowflake/frame001.png differ diff --git a/images/snowflake/frame002.png b/images/snowflake/frame002.png new file mode 100644 index 0000000..60d1864 Binary files /dev/null and b/images/snowflake/frame002.png differ diff --git a/images/snowflake/frame003.png b/images/snowflake/frame003.png new file mode 100644 index 0000000..8531458 Binary files /dev/null and b/images/snowflake/frame003.png differ diff --git a/images/snowflake/frame004.png b/images/snowflake/frame004.png new file mode 100644 index 0000000..75428cd Binary files /dev/null and b/images/snowflake/frame004.png differ diff --git a/images/snowflake/frame005.png b/images/snowflake/frame005.png new file mode 100644 index 0000000..372d271 Binary files /dev/null and b/images/snowflake/frame005.png differ diff --git a/images/snowflake/frame006.png b/images/snowflake/frame006.png new file mode 100644 index 0000000..6aeef81 Binary files /dev/null and b/images/snowflake/frame006.png differ diff --git a/images/snowflake/frame007.png b/images/snowflake/frame007.png new file mode 100644 index 0000000..b636c37 Binary files /dev/null and b/images/snowflake/frame007.png differ diff --git a/images/snowflake/frame008.png b/images/snowflake/frame008.png new file mode 100644 index 0000000..91538af Binary files /dev/null and b/images/snowflake/frame008.png differ diff --git a/images/snowflake/frame009.png b/images/snowflake/frame009.png new file mode 100644 index 0000000..15a37be Binary files /dev/null and b/images/snowflake/frame009.png differ diff --git a/images/snowflake/frame010.png b/images/snowflake/frame010.png new file mode 100644 index 0000000..0c1b09c Binary files /dev/null and b/images/snowflake/frame010.png differ diff --git a/images/snowflake/frame011.png b/images/snowflake/frame011.png new file mode 100644 index 0000000..81ff6a7 Binary files /dev/null and b/images/snowflake/frame011.png differ diff --git a/images/snowflake/frame012.png b/images/snowflake/frame012.png new file mode 100644 index 0000000..d542bc0 Binary files /dev/null and b/images/snowflake/frame012.png differ diff --git a/images/snowflake/frame013.png b/images/snowflake/frame013.png new file mode 100644 index 0000000..06e7637 Binary files /dev/null and b/images/snowflake/frame013.png differ diff --git a/images/snowflake/frame014.png b/images/snowflake/frame014.png new file mode 100644 index 0000000..7e5dc99 Binary files /dev/null and b/images/snowflake/frame014.png differ diff --git a/images/snowflake/frame015.png b/images/snowflake/frame015.png new file mode 100644 index 0000000..e274f67 Binary files /dev/null and b/images/snowflake/frame015.png differ diff --git a/images/snowflake/frame016.png b/images/snowflake/frame016.png new file mode 100644 index 0000000..a45cfb5 Binary files /dev/null and b/images/snowflake/frame016.png differ diff --git a/images/snowflake/frame017.png b/images/snowflake/frame017.png new file mode 100644 index 0000000..5d0529f Binary files /dev/null and b/images/snowflake/frame017.png differ diff --git a/images/snowflake/frame018.png b/images/snowflake/frame018.png new file mode 100644 index 0000000..3ef48e1 Binary files /dev/null and b/images/snowflake/frame018.png differ diff --git a/images/snowflake/frame019.png b/images/snowflake/frame019.png new file mode 100644 index 0000000..2b8515f Binary files /dev/null and b/images/snowflake/frame019.png differ diff --git a/images/snowflake/frame020.png b/images/snowflake/frame020.png new file mode 100644 index 0000000..504442c Binary files /dev/null and b/images/snowflake/frame020.png differ diff --git a/images/snowflake/frame021.png b/images/snowflake/frame021.png new file mode 100644 index 0000000..5edd131 Binary files /dev/null and b/images/snowflake/frame021.png differ diff --git a/images/snowflake/frame022.png b/images/snowflake/frame022.png new file mode 100644 index 0000000..47edac3 Binary files /dev/null and b/images/snowflake/frame022.png differ diff --git a/images/snowflake/frame023.png b/images/snowflake/frame023.png new file mode 100644 index 0000000..bdf6e31 Binary files /dev/null and b/images/snowflake/frame023.png differ diff --git a/images/xbutton.png b/images/xbutton.png new file mode 100644 index 0000000..47b4c7b Binary files /dev/null and b/images/xbutton.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..8b2e3dd --- /dev/null +++ b/index.html @@ -0,0 +1,281 @@ + + + + + + bug.tools + + + + + + + + + + + + +
+
+
+ +
bug
+
.tools
+ + + + + + + + + + + + + + + + + + + + +
+ +
+ +

moving background

+
+ +
+
+ STATUS + +
+ +
+ +
+
bug ❄️
+
working on something...
+
// 3 days ago
+
+ +
+
+ +
+
+ STATS + +
+ +
+ + your digital ID number
+ + + 0000000 + +
+ +
+
+ +
+
+
+ welcome + +
+ +
+
+ + + + + + + + +
+
+
+ +
+ +
+
+ +
+
+
+ UPDATES + +
+ +
+
+
+ +
+
+
+ +
+
+ MUSIC + +
+ +
+
+ +
+
no track selected
+
---
+
+ +
+
+ +
+
+ 0:00 + 0:00 +
+ +
+ + + + + +
+ +
+ ♬ + +
+ +
    +
    +
    +
    +
    +
    + +
    + +
    + + diff --git a/js/counter.js b/js/counter.js new file mode 100644 index 0000000..238761c --- /dev/null +++ b/js/counter.js @@ -0,0 +1,21 @@ +(function () { + const COUNTER_DURATION = 2000; + + fetch("https://counter.bug-dev-mail.workers.dev") + .then(r => r.text()) + .then(count => { + const target = parseInt(count, 10); + const el = document.getElementById("counter"); + const start = performance.now(); + + function tick(now) { + const t = Math.min((now - start) / COUNTER_DURATION, 1); + const eased = 1 - Math.pow(1 - t, 3); + const current = Math.round(eased * target); + el.textContent = String(current).padStart(7, '0'); + if (t < 1) requestAnimationFrame(tick); + } + + requestAnimationFrame(tick); + }); +})(); diff --git a/js/favicon.js b/js/favicon.js new file mode 100644 index 0000000..175b361 --- /dev/null +++ b/js/favicon.js @@ -0,0 +1,33 @@ +const frames = [ + './images/snowflake/frame001.png', + './images/snowflake/frame002.png', + './images/snowflake/frame003.png', + './images/snowflake/frame004.png', + './images/snowflake/frame005.png', + './images/snowflake/frame006.png', + './images/snowflake/frame007.png', + './images/snowflake/frame008.png', + './images/snowflake/frame009.png', + './images/snowflake/frame010.png', + './images/snowflake/frame011.png', + './images/snowflake/frame012.png', + './images/snowflake/frame013.png', + './images/snowflake/frame014.png', + './images/snowflake/frame015.png', + './images/snowflake/frame016.png', + './images/snowflake/frame017.png', + './images/snowflake/frame018.png', + './images/snowflake/frame019.png', + './images/snowflake/frame020.png', + './images/snowflake/frame021.png', + './images/snowflake/frame022.png', + './images/snowflake/frame023.png' +]; + +let current = 0; +const favicon = document.getElementById('dynamic-favicon'); + +setInterval(() => { + current = (current + 1) % frames.length; + favicon.href = frames[current]; +}, 150); diff --git a/js/onLoad.js b/js/onLoad.js new file mode 100644 index 0000000..aa93f4f --- /dev/null +++ b/js/onLoad.js @@ -0,0 +1,51 @@ + +function newFact() { + const facts = [ + 'Are you watching me, or am I watching you?', + 'Is the self you know, the self that exists?', + 'When freedom is lost, what is left?', + 'Protect your privacy, embrace your freedom', + 'I am a wizard, and this is my realm.', + ]; + + const randomFact = Math.floor(Math.random() * facts.length); + const factDisplayElement = document.getElementById("factDisplay"); + if (factDisplayElement) { + factDisplayElement.innerHTML = facts[randomFact]; + } else { + console.warn('Element with ID "factDisplay" not found.'); + } +} + +function initVideoControls() { + const video = document.getElementById("bgVideo"); + const btn = document.getElementById("vidBtn"); + + window.PlayPauseVideo = function PlayPauseVideo() { + if (!video || !btn) return; + + if (video.paused) { + video.play(); + btn.innerHTML = "TURN OFF"; + } else { + video.pause(); + btn.innerHTML = "TURN ON"; + } + }; +} + +function applyFadeIn() { + const fadeInElements = document.querySelectorAll(".fade-in"); + + fadeInElements.forEach((element) => { + requestAnimationFrame(() => { + element.classList.add("visible"); + }); + }); +} + +document.addEventListener("DOMContentLoaded", function () { + newFact(); + applyFadeIn(); + initVideoControls(); +}); diff --git a/js/player.js b/js/player.js new file mode 100644 index 0000000..ca58a9d --- /dev/null +++ b/js/player.js @@ -0,0 +1,249 @@ +(function () { + const playlist = [ + //{ title: "Sanctuary OS", artist: "Dusqk", src: "music/SanctuaryOS.flac" }, + { title: "Sanctuary 1", artist: "Dusqk", src: "music/sanctuary_1.m4a" }, + { title: "cloud zone", artist: "oooz", src: "music/cloud_zone.m4a" }, + { title: "ketamina", artist: "yaego", src: "music/ketamina.m4a" }, + { title: "fine night", artist: "goreshit", src: "music/fine_night.m4a" }, + { title: "what we did in the desert", artist: "eightiesheadachetape", src: "music/what_we_did_in_the_desert.m4a" }, + { title: "Fleeting Frozen Heart", artist: "Xxtarlit⚸", src: "music/fleeting_frozen_heart.m4a" }, + { title: "Heaven", artist: "i\\believe\\in\\angels", src: "music/heaven.m4a" }, + { title: "i wish to have a happy end", artist: "イア / ia", src: "music/i_wish_to_have_a_happy_end.m4a" }, + { title: "it is not my fault and never will be", artist: "Skeinn", src: "music/it_is_not_my_fault_and_never_will_be.m4a" }, + { title: "Sanctuary 10", artist: "Dusqk", src: "music/sanctuary_10.m4a" }, + { title: "Lexapro Delirium", artist: "sewerslvt", src: "music/lexapro_delirium.m4a" }, + ]; + + let currentIdx = -1; + let isPlaying = false; + let isShuffle = false; + let isLoop = false; + let wasEnded = false; + + const audio = new Audio(); + audio.volume = 0.7; + audio.preload = "metadata"; + + const elTitle = document.getElementById('mp-title'); + const elArtist = document.getElementById('mp-artist'); + const elPlay = document.getElementById('mp-play'); + const elPrev = document.getElementById('mp-prev'); + const elNext = document.getElementById('mp-next'); + const elShuffle = document.getElementById('mp-shuffle'); + const elLoop = document.getElementById('mp-loop'); + const elSeek = document.getElementById('mp-seek'); + const elFill = document.getElementById('mp-progress-fill'); + const elCurrent = document.getElementById('mp-current'); + const elDur = document.getElementById('mp-duration'); + const elVol = document.getElementById('mp-volume'); + const elList = document.getElementById('mp-playlist'); + + function buildList() { + elList.innerHTML = ''; + if (!playlist.length) { + const li = document.createElement('li'); + li.className = 'mp-empty'; + li.textContent = 'playlist is empty'; + elList.appendChild(li); + return; + } + + playlist.forEach((track, i) => { + const li = document.createElement('li'); + li.textContent = (i + 1) + '. ' + track.title; + li.title = track.title + (track.artist ? ' · ' + track.artist : ''); + li.addEventListener('click', () => loadTrack(i, true)); + elList.appendChild(li); + }); + } + + function formatTime(s) { + if (isNaN(s) || s < 0) return '0:00'; + const m = Math.floor(s / 60); + const sec = Math.floor(s % 60); + return m + ':' + (sec < 10 ? '0' : '') + sec; + } + + function highlightRow(idx) { + const items = elList.querySelectorAll('li'); + items.forEach((li, i) => li.classList.toggle('playing', i === idx)); + } + + function setPlayIcon() { + elPlay.innerHTML = isPlaying ? '▮▮' : '▶'; + } + + function loadTrack(idx, autoplay) { + if (!playlist.length) return; + currentIdx = idx; + const t = playlist[idx]; + audio.src = t.src; + elTitle.textContent = t.title || 'untitled'; + elArtist.textContent = t.artist || '---'; + elFill.style.width = '0%'; + elSeek.value = 0; + elCurrent.textContent = '0:00'; + elDur.textContent = '0:00'; + highlightRow(idx); + + if (autoplay) { + audio.play().then(() => { isPlaying = true; setPlayIcon(); }) + .catch(() => {}); + } else { + isPlaying = false; + setPlayIcon(); + } + } + + function nextTrack() { + if (!playlist.length) return; + let idx; + if (isShuffle) { + idx = Math.floor(Math.random() * playlist.length); + } else { + idx = (currentIdx + 1) % playlist.length; + } + loadTrack(idx, true); + } + + function prevTrack() { + if (!playlist.length) return; + + if (audio.currentTime > 3) { + audio.currentTime = 0; + return; + } + let idx = (currentIdx - 1 + playlist.length) % playlist.length; + loadTrack(idx, true); + } + + elPlay.addEventListener('click', () => { + if (!playlist.length) return; + if (currentIdx === -1) { loadTrack(0, true); return; } + if (isPlaying) { + audio.pause(); + isPlaying = false; + } else { + audio.play().catch(() => {}); + isPlaying = true; + } + setPlayIcon(); + }); + + elNext.addEventListener('click', nextTrack); + elPrev.addEventListener('click', prevTrack); + + elShuffle.addEventListener('click', () => { + isShuffle = !isShuffle; + elShuffle.classList.toggle('active', isShuffle); + }); + + elLoop.addEventListener('click', () => { + isLoop = !isLoop; + audio.loop = isLoop; + elLoop.classList.toggle('active', isLoop); + }); + + function updateVolFill() { + const pct = (elVol.value / elVol.max) * 100; + elVol.style.background = 'linear-gradient(90deg, #a9c6f0 0%, #74a4db ' + pct + '%, #e8ecf0 ' + pct + '%)'; + } + + elVol.addEventListener('input', () => { audio.volume = elVol.value; updateVolFill(); }); + + elSeek.addEventListener('input', () => { + if (audio.duration) { + audio.currentTime = (elSeek.value / 100) * audio.duration; + } + }); + + audio.addEventListener('timeupdate', () => { + if (!audio.duration) return; + const pct = (audio.currentTime / audio.duration) * 100; + elFill.style.width = pct + '%'; + elSeek.value = pct; + elCurrent.textContent = formatTime(audio.currentTime); + }); + + audio.addEventListener('loadedmetadata', () => { + elDur.textContent = formatTime(audio.duration); + }); + + audio.addEventListener('ended', () => { + if (!isLoop) nextTrack(); + }); + + audio.addEventListener('play', () => { isPlaying = true; setPlayIcon(); }); + audio.addEventListener('pause', () => { isPlaying = false; setPlayIcon(); }); + + function setCookie(name, value, days) { + const d = new Date(); + d.setTime(d.getTime() + days * 86400000); + document.cookie = name + '=' + encodeURIComponent(value) + ';expires=' + d.toUTCString() + ';path=/;SameSite=Lax'; + } + + function getCookie(name) { + const match = document.cookie.match(new RegExp('(?:^|; )' + name + '=([^;]*)')); + return match ? decodeURIComponent(match[1]) : null; + } + + function saveState() { + setCookie('mp_track', currentIdx, 30); + setCookie('mp_time', Math.floor(audio.currentTime), 30); + setCookie('mp_volume', audio.volume, 30); + setCookie('mp_shuffle', isShuffle ? '1' : '0', 30); + setCookie('mp_loop', isLoop ? '1' : '0', 30); + } + + setInterval(saveState, 5000); + window.addEventListener('beforeunload', saveState); + + buildList(); + setPlayIcon(); + updateVolFill(); + + const savedTrack = getCookie('mp_track'); + const savedTime = getCookie('mp_time'); + const savedVol = getCookie('mp_volume'); + const savedShuf = getCookie('mp_shuffle'); + const savedLoop = getCookie('mp_loop'); + + if (savedVol !== null) { + audio.volume = parseFloat(savedVol); + elVol.value = audio.volume; + updateVolFill(); + } + + if (savedShuf === '1') { + isShuffle = true; + elShuffle.classList.add('active'); + } + + if (savedLoop === '1') { + isLoop = true; + audio.loop = true; + elLoop.classList.add('active'); + } + + if (savedTrack !== null && playlist[parseInt(savedTrack)]) { + const idx = parseInt(savedTrack); + loadTrack(idx, false); + if (savedTime !== null) { + audio.addEventListener('loadedmetadata', function onceSeek() { + audio.currentTime = Math.min(parseInt(savedTime), audio.duration || 0); + audio.removeEventListener('loadedmetadata', onceSeek); + }); + } + } + + function autoplayOnce() { + if (currentIdx >= 0 && !isPlaying) { + audio.play().catch(() => {}); + } + document.removeEventListener('click', autoplayOnce); + document.removeEventListener('keydown', autoplayOnce); + } + + document.addEventListener('click', autoplayOnce); + document.addEventListener('keydown', autoplayOnce); +})(); diff --git a/js/switchPage.js b/js/switchPage.js new file mode 100644 index 0000000..8c8588e --- /dev/null +++ b/js/switchPage.js @@ -0,0 +1,41 @@ +const pages = { + home: { title: "welcome" }, + contact: { title: "contact" }, + links: { title: "links" }, + sitemap: { title: "sitemap" } +}; + +function switchPage(pageKey) { + const page = pages[pageKey]; + const template = document.getElementById('page-' + pageKey); + if (!page || !template) return; + + const contentDiv = document.getElementById('page-content'); + const toolbarTitle = document.getElementById('toolbar-title'); + + location.hash = pageKey === 'home' ? '' : pageKey; + + contentDiv.style.opacity = 0; + + setTimeout(() => { + contentDiv.innerHTML = ''; + contentDiv.appendChild(template.content.cloneNode(true)); + if (toolbarTitle) { + toolbarTitle.textContent = page.title; + toolbarTitle.setAttribute('data-text', page.title); + } + + contentDiv.style.transition = 'opacity 0.3s ease'; + contentDiv.style.opacity = 1; + }, 150); +} + +document.addEventListener('DOMContentLoaded', () => { + const hash = location.hash.replace('#', ''); + switchPage(pages[hash] ? hash : 'home'); +}); + +window.addEventListener('hashchange', () => { + const hash = location.hash.replace('#', ''); + switchPage(pages[hash] ? hash : 'home'); +}); diff --git a/js/updates.js b/js/updates.js new file mode 100644 index 0000000..3decaf5 --- /dev/null +++ b/js/updates.js @@ -0,0 +1,40 @@ +const updates = [ + { date: "28.02.2026", message: 'Music player now remembers your track and position via cookies \uE026' }, + { date: "28.02.2026", message: 'Added autoplay on first interaction \uE026' }, + { date: "28.02.2026", message: 'Added hash-based routing so refreshing keeps your page \uE026' }, + { date: "27.02.2026", message: 'Added the music player with shuffle, loop, and volume controls \uE026' }, + { date: "27.02.2026", message: 'Created the sitemap page \uE026' }, + { date: "27.02.2026", message: 'Created the contact page \uE026' }, + { date: "26.02.2026", message: 'Created the links page \uE026' }, + { date: "26.02.2026", message: 'Added this pictochat updates box \uE026' }, + { date: "25.02.2026", message: 'Wrote the home page' }, + { date: "24.02.2026", message: 'Styled everything with custom CSS \uE026' }, + { date: "24.02.2026", message: 'Added the video background \uE026' }, + { date: "23.02.2026", message: 'Built the page switching system \uE026' }, + { date: "23.02.2026", message: 'Created the navigation menu' }, + { date: "22.02.2026", message: 'Set up the main layout' }, + { date: "21.02.2026", message: 'Started building the site \uE026' }, +]; + +(function () { + const picto = document.querySelector('#pictochat-content .picto'); + if (!picto) return; + + updates.forEach(({ date, message }) => { + const entry = document.createElement('div'); + entry.style.setProperty('--col', '#90c9ff'); + + const nameDiv = document.createElement('div'); + nameDiv.textContent = 'bug'; + + const msgDiv = document.createElement('div'); + msgDiv.innerHTML = message; + + entry.appendChild(nameDiv); + entry.appendChild(document.createTextNode(date)); + entry.appendChild(document.createElement('br')); + entry.appendChild(msgDiv); + + picto.appendChild(entry); + }); +})(); diff --git a/music/cloud_zone.m4a b/music/cloud_zone.m4a new file mode 100644 index 0000000..53bd42c Binary files /dev/null and b/music/cloud_zone.m4a differ diff --git a/music/fine_night.m4a b/music/fine_night.m4a new file mode 100644 index 0000000..f4aeaae Binary files /dev/null and b/music/fine_night.m4a differ diff --git a/music/fleeting_frozen_heart.m4a b/music/fleeting_frozen_heart.m4a new file mode 100644 index 0000000..a1c2355 Binary files /dev/null and b/music/fleeting_frozen_heart.m4a differ diff --git a/music/heaven.m4a b/music/heaven.m4a new file mode 100644 index 0000000..38633c0 Binary files /dev/null and b/music/heaven.m4a differ diff --git a/music/i_wish_to_have_a_happy_end.m4a b/music/i_wish_to_have_a_happy_end.m4a new file mode 100644 index 0000000..125b53c Binary files /dev/null and b/music/i_wish_to_have_a_happy_end.m4a differ diff --git a/music/it_is_not_my_fault_and_never_will_be.m4a b/music/it_is_not_my_fault_and_never_will_be.m4a new file mode 100644 index 0000000..f70946f Binary files /dev/null and b/music/it_is_not_my_fault_and_never_will_be.m4a differ diff --git a/music/ketamina.m4a b/music/ketamina.m4a new file mode 100644 index 0000000..410fd51 Binary files /dev/null and b/music/ketamina.m4a differ diff --git a/music/lexapro_delirium.m4a b/music/lexapro_delirium.m4a new file mode 100644 index 0000000..c31c5b1 Binary files /dev/null and b/music/lexapro_delirium.m4a differ diff --git a/music/sanctuary_1.m4a b/music/sanctuary_1.m4a new file mode 100644 index 0000000..e9353ce Binary files /dev/null and b/music/sanctuary_1.m4a differ diff --git a/music/sanctuary_10.m4a b/music/sanctuary_10.m4a new file mode 100644 index 0000000..e376264 Binary files /dev/null and b/music/sanctuary_10.m4a differ diff --git a/music/what_we_did_in_the_desert.m4a b/music/what_we_did_in_the_desert.m4a new file mode 100644 index 0000000..79ff3e0 Binary files /dev/null and b/music/what_we_did_in_the_desert.m4a differ diff --git a/style.css b/style.css new file mode 100644 index 0000000..edfef5d --- /dev/null +++ b/style.css @@ -0,0 +1,1303 @@ + +@import url('https://fonts.googleapis.com/css2?family=Aldrich&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@200..900&display=swap'); + +@font-face { + font-family: 'Forced Square'; + src: url('./fonts/FORCEDSQUARE.ttf') format('truetype'); +} + +@font-face { + font-family: 'DSWare'; + src: url('./fonts/nitrods-font.ttf') format('truetype'), + url('./fonts/nitrods-font.otf') format('opentype'); +} + +@font-face { + font-family: 'Space Age'; + src: url('./fonts/spaceage.ttf') format('truetype'); +} + +@font-face { + font-family: 'Braille'; + src: url('./fonts/BRAILLE1.ttf') format('truetype'); +} + +@font-face { + font-family: 'SF Telegraphic Light'; + src: url('./fonts/SFTelegraphicLight.ttf') format('truetype'); +} + +@font-face { + font-family: 'war-games'; + src: url('./fonts/war-games.ttf') format('truetype'); +} + + + +.blink_text { + animation: blinker 1.5s infinite; + -webkit-animation: blinker 1.5s infinite; + -moz-animation: blinker 1.5s infinite; +} + +@-moz-keyframes blinker { + 0% { + opacity: 1.0; + } + + 49% { + opacity: 1.0; + } + + 60% { + opacity: 0.0; + } + + 99% { + opacity: 0.0; + } + + 100% { + opacity: 1.0; + } +} + +@-webkit-keyframes blinker { + 0% { + opacity: 1.0; + } + + 49% { + opacity: 1.0; + } + + 60% { + opacity: 0.0; + } + + 99% { + opacity: 0.0; + } + + 100% { + opacity: 1.0; + } +} + +@keyframes blinker { + 0% { + opacity: 1.0; + } + + 49% { + opacity: 1.0; + } + + 60% { + opacity: 0.0; + } + + 99% { + opacity: 0.0; + } + + 100% { + opacity: 1.0; + } +} + +.fade-in { + opacity: 0; + transition: opacity 0.5s ease-in; +} + +.fade-in.visible { + opacity: 1; +} + +.aldrich-regular { + font-family: "Aldrich", sans-serif; + font-weight: 400; + font-style: normal; +} + + + +html { + width: 99%; + height: 100%; + margin: 0px; + margin-left: -30px; + margin-right: -200px; + padding: 0px; + overflow-x: auto; +} + +body { + top: 0px; + left: 0px; + width: 100%; + height: 95%; + background-color: rgb(218, 236, 255); + color: black; + font-family: Verdana; + +} + +a { + color: #74a4db; + text-decoration: none; +} + +a:hover { + color: #a9c6f0; +} + +* { + box-sizing: border-box; +} + +.column { + padding: 10px; +} + +.left { + position: absolute; + top: 20px; + min-width: 220px; +} + +.middle { + position: absolute; + top: 20px; + left: 240px; + min-width: 500px; +} + +.right { + position: absolute; + top: 20px; + left: 770px; + min-width: 300px; +} + +.row { + position: relative; + padding: 0; + margin-left: 30px; + top: 0; + left: 0; + width: 100%; + height: auto; +} + +#bgVideoContainer { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; + overflow: hidden; +} + +#bgVideo { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + min-width: 100%; + min-height: 100%; + width: auto; + height: auto; + object-fit: cover; +} + +@media screen and (max-width:767px) { + #bgVideoContainer { + width: 400% !important; + left: 0 !important; + height: 400% !important; + z-index: -100; + object-fit: cover; + } +} + +#vidbutton { + position: relative; + top: -20px; + margin-left: 30px; + margin-bottom: 5px; + text-align: left; + text-shadow: 0px 0px 4px rgb(255, 255, 255); + color: #a0a6af; + font-family: "forced square"; + font-size: 14px; + text-transform: uppercase; + z-index: 200; +} + +#vidbutton p { + margin-top: 5px; + margin-left: 5px; + margin-bottom: 0px; + z-index: 200; + font-size: 14px; +} + +#vidBtn { + width: 110px; + font-size: 15px; + padding: 10px; + border: 1px solid #c9d1dd; + border-radius: 20px; + color: #8b939c; + font-family: "forced square"; + cursor: help; + background: + radial-gradient(75% 50% at 50% 0%, rgb(244, 248, 255), white), + radial-gradient(75% 50% at 50% 70%, #ffffff, white); + box-shadow: + inset 0 -2px 4px 0px #b0b3b8 + ; +} + +#vidBtn:hover { + background: #ddd; + color: #81a1c8; +} + +.navbar { + margin-top: 0px; + height: 300px; + background-image: url("./images/nav.png"); + image-rendering: auto; + background-size: 200px; + background-repeat: no-repeat; + color: white; + font-family: Verdana; + z-index: 0; +} + +.navbar-title { + margin-top: 13px; + line-height: 40px; + margin-bottom: 0px; + top: 0px; + padding-left: 55px; + font-family: "Space Age"; + background: linear-gradient(0deg, rgba(129, 161, 200, 1) 0%, rgba(167, 213, 255, 1) 55%); + background-clip: text; + color: transparent; + font-size: 42px; + letter-spacing: 3px; + display: inline-block; + transform: scale(1, 1.5); + /* Safari and Chrome */ + -webkit-transform: scale(1, 0.8); + /* Firefox */ + -moz-transform: scale(1, 0.8); + /* IE 9+ */ + -ms-transform: scale(1, 0.8); + /* Opera */ + -o-transform: scale(1, 0.8); +} + +.navbar-title-2 { + margin-top: -6px; + padding-left: 54px; + line-height: 30px; + font-family: "Braille"; + color: #c9cfd6; + font-size: 24px; + letter-spacing: 1px; +} + +.navbar-title-2 text { + letter-spacing: 3px; + line-height: 30px; +} + +.navbar table { + margin-left: 50px; + margin-top: 1px; + width: 125px !important; + border-collapse: collapse; + line-height: 20px; +} + +.navbar td { + height: 10px; + border-top-width: 10px; + border-top-style: solid; + border-top-color: transparent; + border-radius: 0px; + font-family: "Forced Square"; + font-size: 20px; + /*color: #89929c;*/ + padding-right: 5px; + padding-top: 1px; + padding-left: 1px; + padding-bottom: 1px; + text-align: right; + vertical-align: middle; +} + +.navbar tr:before { + position: absolute; + content: ''; + width: 125px; + height: 1px; + background: linear-gradient(90deg, rgba(255, 255, 255, 0.4) 0%, rgba(189, 199, 211, 1) 25%, rgba(189, 199, 211, 1) 50%, rgba(189, 199, 211, 1) 75%, rgba(255, 255, 255, 0.4) 100%); + box-shadow: 0px 0px 4px 1px #ffffff; +} + + +.navbar tr { + text-align: right; +} + +.navbar a { + position: relative; + font-family: "Forced Square"; + color: #9da7b3; + text-decoration: none; + text-align: right; + display: block; + margin-top: -5px; + margin-bottom: -5px; + padding-top: 5px; + padding-bottom: 5px; +} + +.navbar a:hover { + color: #81a1c8; +} + +#navhover img { + vertical-align: middle; + align-items: start; + height: 13px; + image-rendering: pixelated; + float: left; + margin-top: 3px; + margin-left: 11px; +} + +#navhover { + background-image: url('./images/navcircle.png'); + background-repeat: no-repeat; + background-position-x: 11px; + background-position-y: 4px; + background-size: 13px; + image-rendering: pixelated; +} + +#navtable tr:last-child td:last-child { + background-image: none; +} + +#navhover img:hover { + content: url('imgs/navcircleblue.png'); + vertical-align: middle; + align-items: start; + height: 13px; + image-rendering: pixelated; + float: left; + margin-top: 3px; + margin-left: 11px; +} + +#navhover:hover { + background-image: url('imgs/navcircleblue.png'); + background-size: 13px; + image-rendering: crisp-edges; +} + +#loadercircle { + image-rendering: crisp-edges; + position: absolute; + height: 25px; + margin-top: 12px; + margin-left: 12px; + animation: rotate 1.3s linear infinite; + /* 2s duration, linear speed curve, infinite repeat */ +} + +@keyframes rotate { + from { + transform: rotate(0deg); + } + + to { + transform: rotate(360deg); + } +} + +.content { + position: relative; + margin-top: 0px; + left: 0px; + width: 500px; + height: auto; + background-image: linear-gradient(90deg, #fafbfb 0%, #f7f7f7 50%, #fafbfb 100%); + border: 1.5px solid #c9c9c9; + border-radius: 18px; + z-index: 1 !important; + box-shadow: inset 0px -5px 5px -5px #dadada, 0px 0px 5px 0px #dadada; +} + +.content-toolbar { + z-index: 1 !important; + position: relative; + height: 40px; + line-height: 35px; + margin-left: 3px; + margin-right: 3px; + border-radius: 25px 25px 15px 15px; + padding: 12px 16px; + background-color: #f0f0f0; + background-image: + radial-gradient(75% 50% at 50% 0%, rgb(244, 248, 255), transparent), + radial-gradient(75% 50% at 50% 70%, #ffffff, transparent); + box-shadow: + inset 0 -2px 4px 0px #b0b3b8 + ; + + + + &::after { + content: ''; + position: absolute; + top: 0px; + left: 50%; + transform: translateX(-50%); + border-radius: 100px; + width: 101%; + height: 40px; + background-image: linear-gradient(180deg, rgb(255, 255, 255) 5%, rgb(237, 241, 245) 20%, rgb(255, 255, 255) 80%, rgba(255, 255, 255, 0) 100%); + background-clip: border-box; + opacity: 1; + z-index: 1 !important; + } +} + +.content-toolbar span { + position: relative; + background: linear-gradient(0deg, rgba(129, 161, 200, 1) 0%, #a7d5ff 55%); + background-clip: text; + color: transparent; + font-family: "Space Age"; + font-size: 32px; + top: -10.5px; + padding-left: 10px; + z-index: 10 !important; +} + + +#xbutton { + position: relative; + top: -5px; + right: -9px; + float: right; + height: 25px; + z-index: 100 !important; +} + +.content-inner { + position: relative; + height: auto; + padding-left: 20px; + padding-right: 20px; + padding-top: 8px; + padding-bottom: 15px; + margin-top: 13px; + margin-left: 7px; + margin-right: 7px; + margin-bottom: 10px; + border: 1.5px solid #c9c9c9; + background-image: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgb(250, 250, 251) 5%, rgba(250, 251, 251, 1) 95%, rgba(255, 255, 255, 1) 100%); + border-radius: 18px; + box-shadow: inset 0px 0px 5px 0px rgb(202, 202, 202), 0px -4px 5px -3px #bbbbbb, 0px 5px 1px -3px #ffffff; + z-index: 1; +} + +.content-inner span { + position: relative; + display: inline-block; + color: #9da7b3; + font-size: 14px; + font-family: "Aldrich", sans-serif; + font-weight: 400; + text-align: justify; + text-justify: inherit; + padding-left: 10px; + padding-right: 10px; + padding-top: 5px; + padding-bottom: 10px; +} + +.content-inner .bubble span { + padding-left: 2px !important; + padding-right: 0px !important; + padding-top: 0px !important; + padding-bottom: 0px !important; + margin: 0px !important; + color: #9da7b3; + color: #bcc7d4; + font-size: 18px; + font-family: "Aldrich", sans-serif; + font-weight: 500; +} + +.content-inner h1 { + position: relative; + color: #9da7b3; + font-size: 18px; + font-family: "Aldrich", sans-serif; + font-weight: 500; + padding-left: 20px; +} + +.content-inner h1::after { + position: relative; + display: block; + content: ''; + width: 100%; + left: -20px; + height: 1px; + margin-top: 3px; + background: linear-gradient(90deg, rgba(255, 255, 255, 0.4) 0%, rgba(189, 199, 211, 1) 25%, rgba(189, 199, 211, 1) 50%, rgba(189, 199, 211, 1) 75%, rgba(255, 255, 255, 0.4) 100%); + box-shadow: 0px 0px 4px 1px #ffffff; +} + +.content-footer { + position: relative; + top: 0px; + height: 25px; + margin-top: 10px; + margin-left: 7px; + margin-right: 7px; + margin-bottom: 7px; + background-image: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(250, 251, 251, 1) 5%, rgba(250, 251, 251, 1) 95%, rgba(255, 255, 255, 1) 100%); + border-radius: 18px; + box-shadow: inset 0px 3px 5px -1px rgb(202, 202, 202), 0px -4px 5px -3px #bbbbbb, 0px 5px 1px -3px #ffffff; + z-index: 1; +} + +.content-footer span { + position: absolute; + color: #9da7b3; + font-family: "Forced Square"; + font-size: 13px; + vertical-align: middle; + top: 8px; + padding-left: 25px; +} + +#middle-column-img { + position: relative; + float: right; + right: 0px; + top: -0px; +} + +.small-content { + position: relative; + margin-top: 10px; + top: 0px; + left: 20px; + width: 180px; + height: auto; + background-image: linear-gradient(90deg, #fafbfb 0%, #f7f7f7 50%, #fafbfb 100%); + border: 1.5px solid #c9c9c9; + border-radius: 22px; + z-index: 1; + box-shadow: inset 0px -5px 5px -4px #dadada, 0px 0px 5px 0px #dadada; +} + +.small-content-toolbar { + position: relative; + height: 15px; + margin-left: 3px; + margin-right: 3px; + border-radius: 25px 25px 15px 15px; + padding: 12px 16px; + background-color: #f0f0f0; + background-image: + radial-gradient(75% 50% at 50% 0%, rgb(244, 248, 255), transparent), + radial-gradient(75% 50% at 50% 70%, #ffffff, transparent); + + + + &::after { + content: ''; + position: absolute; + top: 0px; + left: 50%; + transform: translateX(-50%); + border-radius: 100px; + width: 101%; + height: 40px; + background-image: linear-gradient(180deg, rgb(255, 255, 255) 5%, rgb(239, 242, 245) 20%, rgb(255, 255, 255) 80%, rgba(255, 255, 255, 0) 100%); + background-clip: border-box; + opacity: 1; + } +} + +.small-content-toolbar span { + position: relative; + color: #555a61; + font-family: "SF Telegraphic Light"; + font-size: 24px; + letter-spacing: 1px; + line-height: 30px; + margin-top: -4px; + float: right; + z-index: 100 !important; +} + +#small-xbutton-right { + position: relative; + margin-top: -1.5%; + left: -7px; + float: left; + height: 24px; + z-index: 100 !important; +} + +.small-content-inner { + position: relative; + height: auto !important; + padding-left: 18px; + padding-right: 18px; + padding-top: 0px; + padding-bottom: 18px; + margin-top: 30px; + margin-left: 7px; + margin-right: 7px; + margin-bottom: 8px; + border: 1.5px solid #c9c9c9; + background-image: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgb(250, 250, 251) 5%, rgba(250, 251, 251, 1) 95%, rgba(255, 255, 255, 1) 100%); + border-radius: 18px; + box-shadow: inset 0px 0px 5px 0px rgb(202, 202, 202), 0px -4px 5px -3px #bbbbbb, 0px 5px 1px -3px #ffffff; + z-index: 1; +} + +.small-content-inner span { + position: relative; + display: block; + color: #9da7b3; + font-size: 12px; +} + + +.small-content-mood { + position: relative; + margin-top: 10px; + top: -20px; + left: 20px; + width: 180px; + height: auto; + background-image: linear-gradient(90deg, #fafbfb 0%, #f7f7f7 50%, #fafbfb 100%); + border: 1.5px solid #c9c9c9; + border-radius: 22px; + z-index: 1; + box-shadow: inset 0px -5px 5px -4px #dadada, 0px 0px 5px 0px #dadada; +} + +#imood { + position: relative; + top: -7px; + margin: auto; + display: block; +} + +#status-username { + padding-bottom: 5px; +} + +#status-username a { + width: auto; + color: #93bdec; + font-family: "Forced Square"; + font-size: 18px; + text-decoration: none; + padding-left: 0px; + text-align: left; + top: 0px; +} + +#status-content { + font-family: "Aldrich", sans-serif; + font-size: 14px; + text-align: left; + padding-bottom: 5px; +} + +#status-date { + font-family: "Aldrich"; + font-style: italic; + font-size: 12px; + text-align: left; +} + + + + +#buttonmarquee { + margin-left: 0px; +} + +#buttonmarquee img { + margin: 0px; + filter: opacity(70%); + height: 31px; +} + +#buttonmarquee:hover img { + filter: none !important; +} + +.small-content-list { + position: relative; + margin-top: 0px; + top: 0px; + left: 20px; + width: 180px; + height: auto; + background-image: linear-gradient(90deg, #fafbfb 0%, #f7f7f7 50%, #fafbfb 100%); + border: 1.5px solid #c9c9c9; + border-radius: 22px; + z-index: 1; + box-shadow: inset 0px -5px 5px -4px #dadada, 0px 0px 5px 0px #dadada; +} + +#small-content-listing { + position: relative; + height: auto !important; + margin-top: 25px; + margin-left: 7px; + margin-right: 7px; + margin-bottom: 7px; + padding-top: 10px; + padding-bottom: 15px; + padding-left: 25px; + border: 1.5px solid #c9c9c9; + background-image: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgb(250, 250, 251) 5%, rgba(250, 251, 251, 1) 95%, rgba(255, 255, 255, 1) 100%); + border-radius: 18px; + box-shadow: inset 0px 0px 5px 0px rgb(202, 202, 202), 0px -4px 5px -3px #bbbbbb, 0px 5px 1px -3px #ffffff; + z-index: 1; +} + +#small-content-listing a::after { + position: relative; + display: block; + content: ''; + margin-top: 5px; + width: 100%; + left: -20px; + height: 1px; + background: linear-gradient(90deg, rgba(255, 255, 255, 0.4) 0%, rgba(189, 199, 211, 1) 25%, rgba(189, 199, 211, 1) 50%, rgba(189, 199, 211, 1) 75%, rgba(255, 255, 255, 0.4) 100%); + box-shadow: 0px 0px 4px 1px #ffffff; +} + +#small-content-listing a:last-child:after { + display: none; +} + +#small-content-listing a { + font-size: 18px; + font-family: "Aldrich", sans-serif; + font-weight: 400; + color: #74a4db; + text-decoration: none; + padding-top: 5px; +} + +#small-content-listing a:hover { + color: #a9c6f0; +} + +.small-content-updates { + position: relative; + margin-top: 0px; + top: 0px; + left: 20px; + width: 180px; + height: auto; + background-image: linear-gradient(90deg, #fafbfb 0%, #f7f7f7 50%, #fafbfb 100%); + border: 1.5px solid #c9c9c9; + border-radius: 22px; + z-index: 1; + box-shadow: inset 0px -5px 5px -4px #dadada, 0px 0px 5px 0px #dadada; +} + +#small-content-pictochat { + position: relative; + height: 345px !important; + padding: 10px; + margin-top: 25px; + margin-left: 7px; + margin-right: 7px; + margin-bottom: 7px; + border: 1.5px solid #c9c9c9; + background-image: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgb(250, 250, 251) 5%, rgba(250, 251, 251, 1) 95%, rgba(255, 255, 255, 1) 100%); + border-radius: 18px; + box-shadow: inset 0px 0px 5px 0px rgb(202, 202, 202), 0px -4px 5px -3px #bbbbbb, 0px 5px 1px -3px #ffffff; + z-index: 1; + overflow: hidden; +} + +#pictochat-content { + display: flex; + flex-direction: column; + align-items: center; + padding: 0 8px; +} + +#pictochat-content .picto { + width: 257px; + height: 137px; + padding: 0.1px; + line-height: 25px; + font-size: 11px; + color: #9da7b3; + font-family: 'DSware'; + padding-right: 0px; + text-align: left; + position: relative; + image-rendering: pixelated; + overflow-y: auto; + transform: scaleX(-1); +} + +#pictochat-content .picto > br { + display: none; +} + +#pictochat-content .picto > div { + --col1: white; + --col: #0049cb; + margin: 0px 4px; + padding: 6px 12px; + text-indent: 90px; + background: #fff0; + box-sizing: border-box; + position: relative; + z-index: 0; + transform: scaleX(-1); +} + +#pictochat-content .picto > div::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: var(--col1); + outline: var(--col) solid 1px; + z-index: -1; + clip-path: polygon(0 8px, 2px 8px, 2px 6px, 4px 6px, 4px 4px, 6px 4px, 6px 2px, 8px 2px, 8px 0, + calc(100% - 8px) 0px, calc(100% - 8px) 2px, calc(100% - 6px) 2px, calc(100% - 6px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 6px, calc(100% - 2px) 6px, calc(100% - 2px) 8px, calc(100% - 0px) 8px, + calc(100% - 0px) calc(100% - 8px), calc(100% - 2px) calc(100% - 8px), calc(100% - 2px) calc(100% - 6px), calc(100% - 4px) calc(100% - 6px), calc(100% - 4px) calc(100% - 4px), calc(100% - 6px) calc(100% - 4px), calc(100% - 6px) calc(100% - 2px), calc(100% - 8px) calc(100% - 2px), calc(100% - 8px) calc(100% - 0px), + 8px calc(100% - 0px), 8px calc(100% - 2px), 6px calc(100% - 2px), 6px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 6px), 2px calc(100% - 6px), 2px calc(100% - 8px), 0px calc(100% - 8px)); +} + +#pictochat-content .picto > div::after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: var(--col); + z-index: -1; + clip-path: polygon(4px 8px, 4px 6px, 6px 6px, 6px 4px, 8px 4px, 8px 2px, calc(100% - 8px) 2px, calc(100% - 8px) 4px, calc(100% - 6px) 4px, calc(100% - 6px) 6px, calc(100% - 4px) 6px, calc(100% - 4px) 8px, calc(100% - 2px) 8px, calc(100% - 2px) calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) calc(100% - 2px), 8px calc(100% - 2px), 8px calc(100% - 4px), 6px calc(100% - 4px), 6px calc(100% - 6px), 4px calc(100% - 6px), 4px calc(100% - 8px), 4px 1151px, 4px 7px, 3px 7px, 3px calc(100% - 7px), 5px calc(100% - 7px), 5px calc(100% - 5px), 7px calc(100% - 5px), 7px calc(100% - 3px), calc(100% - 7px) calc(100% - 3px), calc(100% - 7px) calc(100% - 5px), calc(100% - 5px) calc(100% - 5px), calc(100% - 5px) calc(100% - 7px), calc(100% - 3px) calc(100% - 7px), calc(100% - 3px) 7px, calc(100% - 5px) 7px, calc(100% - 5px) 5px, calc(100% - 7px) 5px, calc(100% - 7px) 3px, 7px 3px, 7px 5px, 5px 5px, 5px 7px, 3px 7px); +} + +#pictochat-content .picto > div.enter { + color: Yellow; + --col1: black; + --col: rgb(255, 255, 255); + text-indent: 0; +} + +#pictochat-content .picto > div > div:first-of-type { + position: absolute; + top: 2px; + left: 4px; + width: 80px; + height: 23px; + text-indent: 10px; + z-index: 0; + color: var(--col); +} + +#pictochat-content .picto > div > div:last-of-type { + padding: 3px; + text-indent: 0px; + line-height: 18px; +} + +#pictochat-content .picto > div > div:first-of-type::before { + content: ''; + position: absolute; + top: 0; + left: -1px; + width: 100%; + height: 100%; + background: var(--col); + opacity: 0.2; + z-index: -1; + clip-path: polygon(0px 4px, 2px 4px, 2px 2px, 4px 2px, 4px 0px, + 100% 0, + calc(100% - 0px) calc(100% - 4px), calc(100% - 2px) calc(100% - 4px), calc(100% - 2px) calc(100% - 2px), calc(100% - 4px) calc(100% - 2px), calc(100% - 4px) calc(100% - 0px), + 4px calc(100% - 0px), 4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px), 0px calc(100% - 4px)); +} + +#pictochat-content .picto > div > div:first-of-type::after { + content: ''; + position: absolute; + top: 0; + left: -1px; + width: 100%; + height: 100%; + background: var(--col); + outline: var(--col) solid 1px; + z-index: -1; + clip-path: polygon(100% 0, calc(100% + 2px) 0, + calc(100% + 1px) calc(100% + -5px), calc(100% + -1px) calc(100% + -5px), calc(100% + -1px) calc(100% + -3px), calc(100% + -3px) calc(100% + -3px), calc(100% + -3px) calc(100% + -1px), calc(100% + -5px) calc(100% + -1px), calc(100% + -5px) calc(100% + 1px), + 5px calc(100% + 1px), 5px calc(100% + -1px), 3px calc(100% + -1px), 3px calc(100% + -3px), 1px calc(100% + -3px), 1px calc(100% + -5px), + 0px calc(100% - 4px), 2px calc(100% - 4px), 2px calc(100% - 2px), 4px calc(100% - 2px), 4px calc(100% - 0px), + calc(100% - 4px) calc(100% - 0px), calc(100% - 4px) calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) calc(100% - 4px), calc(100% - 0px) calc(100% - 4px)); +} + +#pictochat-content .picto > div img:first-of-type { + position: absolute; + top: 0; + left: auto; + right: auto; + width: 468px; + pointer-events: none; +} + +#pictochat-content a { + color: #4da9ff; + text-decoration: underline dotted; +} + +#pictochat-content .picto::-webkit-scrollbar { + width: 18px; +} + +#pictochat-content .picto::-webkit-scrollbar-track { + background-color: #ffffff; +} + +#pictochat-content .picto::-webkit-scrollbar-thumb { + background-color: #cecece; + border: 4px solid transparent; + border-radius: 8px; + background-clip: content-box; +} + +#pictochat-content .picto::-webkit-scrollbar-button:single-button { + height: 19px; + width: 19px; +} + +#pictochat-content .picto::-webkit-scrollbar-button:single-button:vertical:decrement { + background-image: url("./images/dsonlineicon.png"); + image-rendering: pixelated; + background-repeat: no-repeat; +} + +#pictochat-content .picto::-webkit-scrollbar-button:single-button:vertical:increment { + background-image: url("./images/loadingicon.gif"); + image-rendering: pixelated; + background-repeat: no-repeat; +} + +#small-content-todo { + position: relative; + height: auto !important; + padding-left: 15px; + padding-right: 15px; + padding-top: 15px; + padding-bottom: 15px; + margin-top: 25px; + margin-left: 7px; + margin-right: 7px; + margin-bottom: 7px; + border: 1.5px solid #c9c9c9; + background-image: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgb(250, 250, 251) 5%, rgba(250, 251, 251, 1) 95%, rgba(255, 255, 255, 1) 100%); + border-radius: 18px; + box-shadow: inset 0px 0px 5px 0px rgb(202, 202, 202), 0px -4px 5px -3px #bbbbbb, 0px 5px 1px -3px #ffffff; + z-index: 1; +} + +#small-content-todo span { + font-family: "Aldrich", sans-serif; + font-size: 14px; + text-align: left; + color: #9da7b3; +} + +#small-content-todo ul { + padding-left: 0px; + margin: 0px; +} + +#small-content-todo li { + list-style-image: url('imgs/navcircle.png'); + list-style-position: outside; +} + +.ascii-art img { + margin-bottom: 10px; + margin-right: 10px; + max-width: 420px; + image-rendering: pixelated; +} + + + +#music-player { + /* no extra padding — the parent .todo box already has 15px all around */ + display: flex; + flex-direction: column; + gap: 8px; /* one consistent gap between every section */ + font-family: 'Aldrich', sans-serif; + font-size: 11px; + color: #9da7b3; + user-select: none; +} + +/* ---- track info ---- */ +#mp-info { + text-align: center; + padding-bottom: 8px; + border-bottom: 1px solid #d0d8e2; +} +#mp-title { + font-size: 13px; + color: #74a4db; + font-family: 'Aldrich', sans-serif; + letter-spacing: 0.05em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +#mp-artist { + font-size: 10px; + color: #000; + margin-top: 2px; + font-family: 'SF Telegraphic Light', 'Aldrich', sans-serif; + letter-spacing: 0.07em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +/* ---- progress bar (full width, no side margins) ---- */ +#mp-progress-bg { + position: relative; + width: 100%; + height: 7px; + background: linear-gradient(90deg, #f0f2f5 0%, #e8ecf0 50%, #f0f2f5 100%); + border: 1px solid #c9c9c9; + border-radius: 10px; + box-shadow: inset 0 1px 3px 0 rgb(200,205,212); + cursor: pointer; + /* gap: 8px handles spacing above/below */ +} +#mp-progress-fill { + position: absolute; + left: 0; top: 0; bottom: 0; + width: 0%; + background: linear-gradient(90deg, #a9c6f0, #74a4db); + border-radius: 10px; + pointer-events: none; + transition: width 0.1s linear; +} +#mp-seek { + position: absolute; + inset: -5px 0; + width: 100%; + height: calc(100% + 10px); + opacity: 0; + cursor: pointer; + margin: 0; padding: 0; +} + +/* ---- timestamps ---- */ +#mp-time { + display: flex; + justify-content: space-between; + color: #b3bdc8; + font-size: 10px; + font-family: 'Forced Square', monospace; + margin-top: -4px; /* pull up a little since gap already adds 8px above */ +} + +/* ---- controls (evenly spaced row) ---- */ +#mp-controls { + display: flex; + align-items: center; + justify-content: center; + gap: 5px; +} +.mp-btn { + background: + radial-gradient(75% 50% at 50% 0%, rgb(244,248,255), white), + radial-gradient(75% 50% at 50% 70%, #fff, white); + border: 1px solid #c9d1dd; + border-radius: 10px; + color: #8b939c; + font-size: 10px; + padding: 5px 9px; + cursor: pointer; + font-family: 'Forced Square', monospace; + box-shadow: inset 0 -2px 3px 0 #b0b3b8; + transition: color 0.15s, border-color 0.15s, box-shadow 0.1s; + line-height: 1; + white-space: nowrap; +} +.mp-btn:hover { + color: #74a4db; + border-color: #a9c6f0; + box-shadow: inset 0 -2px 3px 0 #b0b3b8, 0 0 5px 0 #c9dcf0; +} +.mp-btn:active { + box-shadow: inset 0 2px 4px 0 #c0c4cc; +} +.mp-btn.active { + color: #74a4db; + border-color: #a9c6f0; + background: radial-gradient(75% 50% at 50% 0%, rgb(225,238,255), white); + box-shadow: inset 0 1px 4px 0 #b8c8e0, 0 0 4px 0 #c9dcf0; +} +.mp-btn-play { + padding: 5px 14px; + font-size: 12px; + border-radius: 14px; +} +.mp-btn-sm { + font-size: 13px; + padding: 4px 7px; +} + +/* ---- volume row ---- */ +#mp-vol-row { + display: flex; + align-items: center; + gap: 7px; +} +#mp-vol-icon { + font-size: 13px; + color: #b3bdc8; + flex-shrink: 0; + line-height: 1; +} +#mp-volume { + flex: 1; + -webkit-appearance: none; + height: 5px; + background: linear-gradient(90deg, #f0f2f5 0%, #e8ecf0 50%, #f0f2f5 100%); + border: 1px solid #c9c9c9; + border-radius: 10px; + outline: none; + cursor: pointer; + box-shadow: inset 0 1px 2px 0 rgb(200,205,212); +} +#mp-volume::-webkit-slider-thumb { + -webkit-appearance: none; + width: 13px; + height: 13px; + background: radial-gradient(75% 50% at 50% 0%, rgb(244,248,255), white); + border: 1px solid #c9d1dd; + border-radius: 50%; + cursor: pointer; + box-shadow: inset 0 -1px 2px 0 #b0b3b8; +} +#mp-volume::-moz-range-thumb { + width: 13px; height: 13px; + background: white; + border: 1px solid #c9d1dd; + border-radius: 50%; + cursor: pointer; +} + +/* ---- playlist ---- */ +#mp-playlist { + list-style: none; + margin: 0; padding: 0; + border: 1.5px solid #c9c9c9; + border-radius: 14px; + max-height: 108px; + overflow-y: auto; + overflow-x: hidden; + background: linear-gradient(90deg, #fff 0%, #fafbfb 5%, #fafbfb 95%, #fff 100%); + box-shadow: inset 0 0 5px 0 rgb(202,202,202); + scrollbar-width: thin; + scrollbar-color: #d0d8e4 transparent; +} +#mp-playlist::-webkit-scrollbar { width: 5px; } +#mp-playlist::-webkit-scrollbar-thumb { background: #d0d8e4; border-radius: 10px; } + +#mp-playlist li { + padding: 5px 10px; + cursor: pointer; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + font-size: 11px; + font-family: 'Aldrich', sans-serif; + color: #9da7b3; + position: relative; + transition: background 0.1s, color 0.1s; +} +#mp-playlist li::after { + content: ''; + position: absolute; + left: 8px; right: 8px; bottom: 0; + height: 1px; + background: linear-gradient(90deg, + rgba(255,255,255,0.4) 0%, + rgba(189,199,211,0.7) 50%, + rgba(255,255,255,0.4) 100%); +} +#mp-playlist li:last-child::after { display: none; } +#mp-playlist li:hover { background: rgba(169,198,240,0.1); color: #74a4db; } +#mp-playlist li.playing { + color: #74a4db; + background: rgba(169,198,240,0.15); +} +#mp-playlist li.playing::before { + content: '▶ '; + font-size: 8px; + color: #93bdec; +} +#mp-playlist li.mp-empty { + color: #c4cdd8; + font-style: italic; + cursor: default; + text-align: center; + padding: 10px 0; +} +#mp-playlist li.mp-empty:hover { background: transparent; color: #c4cdd8; } + + +#counter { + font-family: "war-games", monospace; + font-size: 24px; + font-weight: 600; + + color: #93bdec; + + letter-spacing: 4px; + text-shadow: 0 0 3px #93bdec66; +}