canwifhat PFP by @pronax464 - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

animation-delayDetermina il tempo prima dell'avvio di una animazione in secondi (es. 1s) o millisecondi (ms)
mediaSpecifica a quale dispositivo/display/documento è ottimizzata una risorsa.
srcsetL'attributo srcset definisce la risorsa grafica tramite URL all'interno del tag <source> contenuto in <picture>
titleIndica informazioni aggiuntive riguardo un elemento HTML
loopL'attributo loop è usato per la riproduzione continua dei contenuti video e audio
colspanDefinisce il numero di colonne di una cella all'interno di una tabella.

Users

Log in to search for users

Explore

Find inspiration

New Charter Page Test

INFORMATICA - ESERCIZIO 1 RISOLTO

Costruzione Immagine

Creatore Badge Aziendale

Landing Page Wex

Business Website

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" href="https://i.ibb.co/rfZNrQ1/favicon.png" type="image/png">
  <title>canwifhat PFP</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&display=swap" rel="stylesheet">
  <style>
    @font-face {
    font-family: "League Spartan", sans-serif;
    }


    body {
    margin: 1%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 100vh;
    font-family: 'League Spartan', sans-serif;  
    color: white;
    text-align: center;
    }

    #visionselector {
    margin-bottom: 12px;
    }

    #mustacheType {
    margin-left: 8px;
    padding: 1px 4px;
    }

    #container-wrapper {
    position: relative;
    }

    #canvas-container {
    position: relative;
    background-color: #343c49;
    overflow: hidden;
    }

    #prevMustache,
    #resetMustache,
    #nextMustache {
    background-color: #8f8f8f;
    color: #FFF;
    font-size: 14px;
    padding: 6px 10px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    }

    #prevMustache:hover,
    #resetMustache:hover,
    #nextMustache:hover {
    background-color: #000;
    color: #fff;
    font-size: 14px;
    padding: 6px 10px;
    border: none;
    cursor: pointer;
    }

    #uploadButton,
    #saveButton {
    font-family: 'League Spartan', sans-serif; 
    margin: 16px;
    cursor: pointer;
    color: #000;
    background-color: #FFF;
    border: none;
    font-size: 18px;
    padding: 12px 12px;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    }

    #uploadButton:hover,
    #saveButton:hover {
        background-color: #525252;
        color: #FFF;
    }

    #saveButton {
    display: none;
    }

    #closeButton {
    opacity: 0.5;
    cursor: pointer;
    font-size: 18px;
    border: 2px solid #fff;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
    position: absolute;
    top: 2%;
    right: 2%;
    color: #000;
    background-color: #FFF;
    width: 40px;
    height: 40px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    }

    #closeButton:hover {
    opacity: 1;
    }


    .background {
    position: absolute;
    inset: 0;
    z-index: -1;
    height: 100%;
    width: 100%;
    background: #222831;

    }

    .footer {
    position: relative;
    margin-top: 60px;
    font-size: 12px;
    bottom: 2%;
    left: 0;
    width: 100%;
    color: #8f8f8f;
    text-align: center;
    }

    h1 {
    font-family: 'League Spartan', sans-serif; 
    font-size: 3rem;
    font-weight: 500;
    font-style: bold;
    margin-bottom: 0rem;
    }

    h1 a {
    color: #fff; /* Make the text color transparent */
    text-decoration: none;
    transition: color 0.3s ease-in-out;
    }

    h2 {
    font-family: 'League Spartan', sans-serif; 
    font-size: 1.5rem;
    color: #8f8f8f;
    font-weight: normal;
    margin-bottom: 12px;
    }

    .footer a {
    color: #8f8f8f;
    text-decoration: none;
    transition: color 0.3s ease-in-out;
    }

    .footer a:hover,
    h1 a:hover {
    color: #6b6b6b;
    }

    @media screen and (max-width: 768px) {
    #container-wrapper {
        width: 100%;
    }
    #canvas-container {
        width: 100%;
        max-width: 350px;
        max-height: 350px;
        margin: auto;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .konvajs-content {
        width: 100%;
        max-width: 350px;
        height: auto;
        position: relative;
        user-select: none;
    }
    .konvajs-content canvas {
        width: 100% !important;
        height: auto !important;
        max-width: 350px;
        position: absolute;
        top: 0;
        left: 0;
    }
    
    h1 {
        font-size: 2rem;
    }

    .footer {
        font-size: 10px;
    }
    }

  </style>
</head>
<body>
  <h1>GET YOUR<a href="https://twitter.com/canwifcoin" target="_blank"> $CAN</a> HAT!</h1>
  <h2>Upload your pfp and tap to edit</h2>
    </div>
  </div>
  <div id="container-wrapper">
    <div id="canvas-container">
      <div class="konvajs-content" role="presentation"></div>
    </div>
    <button id="closeButton" style="display: none;">✖</button>
  </div>
  <div style="display: flex; flex-direction: column; align-items: center">
    <button id="uploadButton">Upload Image</button>
    <button id="saveButton" style="display: none;">Save Image</button>
  </div>
  <script src="https://unpkg.com/konva@9.3.1/konva.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  <script>
     let selectedMustacheIndex = 0; // Default mustache index

    // Array of mustache URLs
    const mustacheURLs = [
    "https://i.ibb.co/bm3gqLn/canwifhat.png",
    ];

    const cycleMustache = (direction) => {
    selectedMustacheIndex += direction;
    if (selectedMustacheIndex < 0) {
        selectedMustacheIndex = mustacheURLs.length - 1;
    } else if (selectedMustacheIndex >= mustacheURLs.length) {
        selectedMustacheIndex = 0;
    }
    changeMustacheType();
    };

    // Event listeners for cycling mustaches
    $("#prevMustache").click(() => cycleMustache(-1));
    $("#nextMustache").click(() => cycleMustache(1));

    // Function to change mustache type based on the selected index
    const changeMustacheType = () => {
    tr.visible(false); // Hide the transformer before destroying the existing mustache
    if (mustache) {
        mustache.destroy(); // Remove the existing mustache
    }
    addMustacheToCanvas(mustacheURLs[selectedMustacheIndex]); // Add the new mustache
    };

    $("#resetMustache").click(() => {
    selectedMustacheIndex = 1; // Reset mustache index to starting one
    changeMustacheType(); // Change mustache type to the starting one
    });

    let fixedCanvasWidth, maxCanvasHeight;

    if (window.innerWidth <= 768) {
    fixedCanvasWidth = 350;
    maxCanvasHeight = 350;
    } else {
    fixedCanvasWidth = 600;
    maxCanvasHeight = 600;
    }

    const stage = new Konva.Stage({
    container: "canvas-container",
    width: fixedCanvasWidth,
    height: maxCanvasHeight,
    });

    const layer = new Konva.Layer();
    stage.add(layer);

    let mustache;
    let canvasBorder;
    let tr;

    const addMustacheToCanvas = (mustacheImageSrc) => {
    if (mustache) {
        mustache.destroy();
        tr.destroy();
    }

    canvasBorder = new Konva.Rect({
        width: stage.width(),
        height: stage.height(),
    });

    layer.add(canvasBorder);

    Konva.Image.fromURL(mustacheImageSrc, (img) => {
        mustache = img;
        const aspectRatio = img.width() / img.height();

        let newMustacheWidth, newMustacheHeight;

        if (window.innerWidth <= 768) {
        newMustacheWidth = 200;
        newMustacheHeight = 200 / aspectRatio;
        } else {
        newMustacheWidth = 500;
        newMustacheHeight = 500 / aspectRatio;
        }

        if (newMustacheHeight > maxCanvasHeight) {
        newMustacheHeight = maxCanvasHeight;
        newMustacheWidth = maxCanvasHeight * aspectRatio;
        }

        mustache.setAttrs({
        width: newMustacheWidth,
        height: newMustacheHeight,
        x: (stage.width() - newMustacheWidth) / 2,
        y: (stage.height() - newMustacheHeight) / 2,
        name: "mustache",
        draggable: true,
        });

        tr = new Konva.Transformer({
        nodes: [mustache],
        enabledAnchors: [
            "top-left",
            "top-right",
            "bottom-left",
            "bottom-right",
        ],
        keepRatio: true,
        boundBoxFunc: (oldBox, newBox) => {
            if (
            Math.abs(newBox.width) < 10 ||
            Math.abs(newBox.height) < 10
            ) {
            return oldBox;
            }
            return newBox;
        },
        padding: 10,
        rotateEnabled: true,
        });

        mustache.on("click tap", () => {
        if (window.innerWidth <= 768) {
            tr.visible(!tr.visible());
            layer.batchDraw();
        } else {
            tr.visible(!tr.visible());
            layer.batchDraw();
        }
        });

        tr.visible(mustache.draggable()); // Set transformer visibility based on mustache draggable property

        layer.add(canvasBorder);
        layer.add(mustache);
        layer.add(tr);
        tr.visible(false);

        layer.batchDraw();
    });
    };

    const changeCanvasBackground = (imageSrc) => {
    const background = new Image();
    background.onload = function () {
        const aspectRatio = background.width / background.height;

        let newCanvasWidth = fixedCanvasWidth;
        let newCanvasHeight = fixedCanvasWidth / aspectRatio;

        if (newCanvasHeight > maxCanvasHeight) {
        newCanvasHeight = maxCanvasHeight;
        newCanvasWidth = maxCanvasHeight * aspectRatio;
        }

        stage.width(newCanvasWidth);
        stage.height(newCanvasHeight);

        canvasBorder.width(newCanvasWidth);
        canvasBorder.height(newCanvasHeight);

        const bg = new Konva.Image({
        image: background,
        width: newCanvasWidth,
        height: newCanvasHeight,
        });

        layer.destroyChildren();
        layer.add(bg);
        addMustacheToCanvas(mustacheURLs[selectedMustacheIndex]); // Add mustache based on the selected type
        layer.batchDraw();
        $("#uploadButton").hide();
        $("#closeButton").show();
        $("#saveButton").show();
    };
    background.src = imageSrc;
    };

    const saveCanvasAsImage = () => {
    tr.visible(false);
    layer.batchDraw();

    const dataURL = stage.toDataURL({
        mimeType: "image/png",
        quality: 1,
        pixelRatio: 3,
    });
    const a = document.createElement("a");
    a.href = dataURL;
    a.download = "send_canwifhat_to_1b.png";
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);

    tr.visible(true);
    layer.batchDraw();
    };

    const resetCanvas = () => {
    $("#uploadButton").show();
    addMustacheToCanvas(mustacheURLs[selectedMustacheIndex]); // Add mustache based on the selected type
    $("#closeButton").hide();
    $("#saveButton").hide();
    layer.destroyChildren();
    stage.width(fixedCanvasWidth);
    stage.height(maxCanvasHeight);
    canvasBorder = new Konva.Rect({
        width: stage.width(),
        height: stage.height(),
    });
    layer.add(canvasBorder);
    layer.batchDraw();
    };

    $(document).ready(function () {
    $("#closeButton").hide();
    $("#saveButton").hide();
    addMustacheToCanvas(mustacheURLs[selectedMustacheIndex]); // Add mustache based on the selected type
    });

    $("#uploadButton").click(function () {
    const input = document.createElement("input");
    input.type = "file";
    input.accept = "image/*";

    input.addEventListener("change", (event) => {
        const file = event.target.files[0];
        if (file) {
        const reader = new FileReader();
        reader.onload = function (event) {
            const imageSrc = event.target.result;
            changeCanvasBackground(imageSrc);
        };
        reader.readAsDataURL(file);
        }
    });

    input.click();
    });

    $("#saveButton").click(function () {
    saveCanvasAsImage();
    });

    $("#closeButton").click(function () {
    resetCanvas();
    });

  </script>
  <div class="absolute inset-0 -z-10 h-full w-full bg-gradient-to-br from-gray-200 via-gray-300 to-white"></div>

  <div class="background"></div>

</body>
</html>