86 lines
4 KiB
PHP
86 lines
4 KiB
PHP
<!DOCTYPE html>
|
|
<html <?php language_attributes(); ?>>
|
|
<head>
|
|
<meta charset="<?php bloginfo('charset'); ?>">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title><?php the_title(); ?> | DIGITALE ANARCHIE</title>
|
|
<?php wp_head(); ?>
|
|
</head>
|
|
<body <?php body_class(); ?>>
|
|
<div class="container">
|
|
<header>
|
|
<h1><a href="<?php echo home_url(); ?>" style="color: var(--accent-orange); text-decoration: none;">[ ZURÜCK ZUR BASIS ]</a></h1>
|
|
<p class="tagline"><?php the_title(); ?></p>
|
|
</header>
|
|
|
|
<div class="content-box" style="position: relative; overflow: hidden;">
|
|
<div class="classification-stamp">TOP SECRET</div>
|
|
<div class="mission-header" style="border-bottom: 1px solid #333; margin-bottom: 20px; padding-bottom: 10px;">
|
|
<span class="status-tag stable">MISSION REPORT</span>
|
|
<p style="font-size: 0.8rem; color: #666;">DATUM: <?php echo get_the_date(); ?> | STATUS: ABGESCHLOSSEN</p>
|
|
</div>
|
|
|
|
<article class="mission-content decrypt-me" style="line-height: 1.8; color: #bbb;">
|
|
<?php if (have_posts()) : while (have_posts()) : the_post();
|
|
the_content();
|
|
endwhile; endif; ?>
|
|
</article>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const el = document.querySelector('.decrypt-me');
|
|
const originalHTML = el.innerHTML;
|
|
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+';
|
|
let iterations = 0;
|
|
|
|
// Neural Audio Synth
|
|
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
|
|
function playTick() {
|
|
if (audioCtx.state === 'suspended') audioCtx.resume();
|
|
const osc = audioCtx.createOscillator();
|
|
const gain = audioCtx.createGain();
|
|
osc.type = 'square'; // Mechanischer Sound
|
|
osc.frequency.setValueAtTime(Math.random() * 100 + 50, audioCtx.currentTime);
|
|
gain.gain.setValueAtTime(0.02, audioCtx.currentTime);
|
|
gain.gain.exponentialRampToValueAtTime(0.0001, audioCtx.currentTime + 0.05);
|
|
osc.connect(gain);
|
|
gain.connect(audioCtx.destination);
|
|
osc.start();
|
|
osc.stop(audioCtx.currentTime + 0.05);
|
|
}
|
|
|
|
const interval = setInterval(() => {
|
|
el.innerHTML = originalHTML
|
|
.split('')
|
|
.map((char, index) => {
|
|
if (index < iterations || char === '<' || char === '>') return char;
|
|
return characters[Math.floor(Math.random() * characters.length)];
|
|
})
|
|
.join('');
|
|
|
|
// Sound nur bei jedem 3. Schritt um die Ohren nicht zu sprengen
|
|
if (iterations % 90 === 0) playTick();
|
|
|
|
if (iterations >= originalHTML.length) {
|
|
clearInterval(interval);
|
|
audioCtx.close(); // Sound-Engine abschalten wenn fertig
|
|
}
|
|
iterations += 30;
|
|
}, 30);
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.mission-content p { margin-bottom: 20px; }
|
|
.mission-content strong { color: var(--accent-gold); }
|
|
.decrypt-me { transition: filter 0.5s; }
|
|
</style>
|
|
</div>
|
|
|
|
<footer>
|
|
© <?php echo date('Y'); ?> SASCHA RODE | DIGITALE ANARCHIE | HANDCODED WITH GEMINI
|
|
</footer>
|
|
</div>
|
|
<?php wp_footer(); ?>
|
|
</body>
|
|
</html>
|