canwifhat PFP by @pronax464 - Codewith.it

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

Referenze

<base>Specifica l'URL di base per tutti gli URL relativi all'interno della pagina.
<object>Incorpora risorse varie nella pagina web.
<input>Definisce un area di input per l'invio di dati e informazioni
listCollega un elemento input con una lista di opzioni datalist
titleIndica informazioni aggiuntive riguardo un elemento HTML
controlsL'attributo controls si usa per visualizzare gli strumenti per la riproduzione dei file audio e video

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

4399-sposta oggetto

Figure & Figcaption Music Album Pr

il museo di leonardo

test-border-on-wrap

Il mondo della tecnologia

esercitazione 2 webdevel

Better Call Saul

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>