canwifhat PFP by @pronax464 - Codewith.it

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

Referenze

<cite>Inserisce citazioni e menzioni riguardo un'opera creativa.
formnovalidateImpedisce la convalida di un singolo elemento input
srcIndica la provenienza di una risorsa esterna (tramite URL).
<aside>Definisce un contenuto separato dal testo perincipale
colspanDefinisce il numero di colonne di una cella all'interno di una tabella.
placeholderDefinisce un testo segnaposto per un elemento input o textarea

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

sito mattia chiarabini(2)

voti con virgola

Navbar Example 3

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!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>