<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Fevra - Nova Flexin'</title>

    <style>

        /* Basic styling for the page */

        body, html {

            margin: 0;

            padding: 0;

            overflow: hidden; /* Prevent scrolling */

            display: flex;

            align-items: center;

            justify-content: center;

            height: 100vh; /* Make body full height */

        }

    </style>

</head>

<body>

    <!-- Audio element with looping enabled -->

    <audio id="background-audio" src="/content/3663a944ada3aff1faf0bf99fa4660552b9898c692c0a909310712c401ac7411i0" loop></audio>


    <!-- Including p5.js script for visuals -->

    <script src="/content/7e37766541506810ba6399c4b2735121f508bd9209df43dd200bf2316b014594i0"></script>


    <!-- Inline script for p5.js animation and audio control -->

    <script>

        let angle = 110;

        let recordSize = 700;

        let recordColor;


        function setup() {

            // Create a canvas that matches the smaller dimension of the window

            const size = min(windowWidth, windowHeight);

            createCanvas(size, size);

            recordColor = generateRecordColor();

            noFill();

            stroke(5);

            frameRate(60);

            noCursor();

            playAudio(); // Start audio automatically

        }


        function windowResized() {

            // Adjust canvas size on window resize, maintaining 1:1 ratio

            const size = min(windowWidth, windowHeight);

            resizeCanvas(size, size);

        }


        function draw() {

            background(0, 3.75);

            translate(width / 2, height / 2);

            rotate(angle);


            // Draw spinning record

            drawVinylRecord(recordSize, recordColor);

            angle += radians(1);


            if (mouseIsPressed) {

                recordSize = random(700, 700);

                recordColor = generateRecordColor();

            }

        }


        function generateRecordColor() {

            return color(random(20, 247), random(110, 147), random(100, 26), 250);

        }


        function drawVinylRecord(size, color) {

            stroke(color);

            ellipse(size / 200, size / 5, size, size / 22.5);

            ellipse(-size / 200, -size / 5, -size, size / 22.5);

            ellipse(0, 0, 0, size / 45, 0, size / 111.5, size / 2.5); // Center

        }


        function playAudio() {

            const audio = document.getElementById('background-audio');

            audio.play().catch(error => {

                console.log("Audio playback was prevented:", error);

            });

        }

    </script>

</body>

</html>