clowncard

this time everything is done, I added the function of changing the card model when pressed, if you press the card with clown model A it will change to clown model B, when pressed it will make a beep sound, here is the code I used:
const logo = document.getElementById(‘rotate’);
const flip = new Audio(‘assets/audio/dot.wav’);

    const images = [
        'assets/gy2.png',
        'assets/gy1.png',
        'assets/gy3.png',
    ]

    let currentIndex = 0;

    logo, addEventListener('click', () => {
        currentIndex = (currentIndex + 1) % images.length;

        logo.src = images[currentIndex];
        flip.currentTime = 0;
        flip.play()
    });

I have also included a fillout link and also a link to the PDF, everything is ready complete with indicators that change on each page, namely [star, rhombus, cross, triangle].
Let’s talk a little about what I made, this is a website to show the product, not an NFC website for the product, CLOWNCARD is a card equipped with NFC that takes you to a special website called clownbase, there you can find fellow clowncard users if you tap the card with them, it also has a keychain and sticker (if you’re lucky).

At first I changed the scroll indicator to just a star shape for everything but I felt it wasn’t ‘clownish’ enough and just looked monotonous so I googled how to make various shapes in CSS, finally I found clippy! and I made each indicator have its own shape. I modified the code like this

.indicator-dot.active {
    height: 18px;
    width: 18px;
    clip-path: polygon(50% 0%, 65% 35%, 100% 40%, 75% 65%, 80% 100%, 50% 80%, 20% 100%, 25% 65%, 0% 40%, 35% 35%);
    background-color: var(–color-text);
    border-color: var(–color-text);
}

.indicator-dot.active[data-section=“1”] {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.indicator-dot.active[data-section=“2”] {
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.indicator-dot.active[data-section=“3”] {
    clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
gimana

I just added a PDF for more knowledge about clowncard, I put the link to the pdf under the “how it works” section.
here I put a big explanation about what clowncard is, what is the physical item, what is the digital experience, what are the features and who is it suitable for.

I’ve changed the layout of the indicators, and added one additional page, each with a new title, such as “what is it” “how does it work”, “tell me more” and “get yours”.

So today I changed some of the appearance such as the location of the scroll indicator, and I also added some additional illustrations that I made in Canva and Procreate, actually this took the most time but unfortunately I didn’t use lapse.
I also tidied up the UI for the first page.

remake some layout and change to another fonts

i forked the feature from bakebuild and draw the components by my self