participant.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Badge | GirlScript Foundation India</title>
  <meta name="description"
    content="Girlscript Summer Of Code is a 3-month long open source project under Girlscript Foundation India to build the main website of GirlScript, GirlScript mobile app and websites for various GirlScript Chapters. Not only for the accolades we have in our batch but also for the people new to opensource. Right from word go, be it basic git skills, first timers only issues or helping mentors hone their team leading and guiding skills - be it the rookie or the veteran dev - GirlScript Summer of Code offers something for everyone.">

  <!-- META -->
  <meta name="application-name" content="GirlScript Foundation India">
  <meta name="author" content="GirlScript Summer of Code 2021">
  <meta name="msapplication-tooltip"
    content="Girlscript Summer Of Code is a 3-month long open source project under Girlscript Foundation India">
  <meta name="apple-mobile-web-app-title" content="GirlScript Summer of Code 2021">
  <meta name="og:site_name" content="gssoc.tech" />
  <meta name="og:title" content="Team | GirlScript Summer of Code 2021" />
  <meta name="og:url" content="https://gssoc.tech/" />
  <meta name="og:image" content="images/favicon/favicon.png" />
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ICONS -->
  <link rel="apple-touch-icon" sizes="180x180" href="images/favicon/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="images/favicon/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="images/favicon/favicon-16x16.png">
  <link rel="manifest" href="images/favicon/site.webmanifest">
  <link rel="mask-icon" href="images/favicon/safari-pinned-tab.svg" color="#EF6E00">
  <link rel="shortcut icon" href="images/favicon/favicon.ico">
  <meta name="msapplication-TileColor" content="#ffffff">
  <meta name="msapplication-config" content="images/favicon/browserconfig.xml">
  <meta name="theme-color" content="#EF6E00">

  <!-- FONTS -->
  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.12.0/css/all.css"
    integrity="sha384-ekOryaXPbeCpWQNxMwSWVvQ0+1VrStoPJq54shlYhR8HzQgig1v5fas6YgOqLoKz" crossorigin="anonymous">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Josefin+Sans|Nunito:300,400,700&display=swap">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

  <!-- CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
  <link rel="stylesheet" href="css/common/materialize.min.css">
  <link rel="stylesheet" href="css/style.css">

  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
  <link rel="stylesheet" href="css/common/nav.css"> <!-- common for all pages -->
  <link rel="stylesheet" href="css/common/footer.css"> <!-- common for all pages -->
  <link rel="stylesheet" href="css/common/common.css"> <!-- common for all pages -->
  <link rel="stylesheet" href="css/team.css"> <!-- only for this page -->

  <!-- SCRIPTS -->
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="js/common/materialize.min.js"></script>
  <script src="js/common/init.js"></script> <!-- common for all pages -->
  <script src="resource/2021/data_team.js"></script> <!-- only for this page -->
  <script src="js/team.js" defer></script> <!-- only for this page -->

  <!-- Tracking code  -->
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-134247465-1"></script>
  <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());
    gtag('config', 'UA-134247465-1');
  </script>
</head>
<title>Badge - Girlscrip Summer of Code'2021</title>
<meta name="description" content="GirlScript Summer of Code'2021" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="shortcut icon" href="./favicon.png" />
<link crossorigin="anonymous" href="https://fonts.googleapis.com/icon?family=Google+Sans:400&display=swap"
  rel="stylesheet" />
<style>
  * {
    box-sizing: border-box;
    --shadow-elevation-1: 0 2px 4px -1px rgba(0, 0, 0, 0.2),
      0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
    --shadow-elevation-2: 0 3px 5px -1px rgba(0, 0, 0, 0.2),
      0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
    --button-color: #ffda60;
    --button-color-hover: #f89c51;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    background: #ffc455;
    margin: 0;
    font-family: "Google Sans", sans-serif;
    display: flex;
    flex-direction: column;
    color: #4a4a4a;
    min-height: 100vh;
  }

  header {
    background-color: #fdb851;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2),
      0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
    z-index: 1;
  }

  .main-container {
    display: flex;
    flex: 1;
  }

  .input-panel {
    padding: 24px;
    width: 25%;
    max-width: 420px;
    background-color: #f8eddd;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2),
      0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12);
  }

  .input {
    margin-bottom: 36px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .input:last-child {
    margin-bottom: 0;
  }

  .input label {
    font-size: 19px;
    margin-bottom: 18px;
    margin-top: 18px;
    font-weight: 500;
  }

  .button {
    color: #fff;
    font-size: 15px;
    border-radius: 4px;
    padding: 10px 12px;
    box-shadow: var(--shadow-elevation-1);
    background-color: var(--button-color);
    cursor: pointer;
    border: none;
    transition: box-shadow 100ms ease, background-color 100ms ease;
  }

  .button:hover {
    box-shadow: var(--shadow-elevation-2);
    background-color: var(--button-color-hover);
  }

  input.category-input {
    font-size: 15px;
    padding: 8px;
    background: #fff;
    border: 1px solid #cacaca;
    border-radius: 4px;
    width: 100%;
    max-width: 360px;
  }

  input.category-input:focus {
    outline: none;
    border-color: #ffffff;
  }

  .select-container {
    display: flex;
    border-radius: 10px;
    border: 1px solid #cacaca;
    overflow: hidden;
  }

  .select-container .select {
    background-color: #fff;
    padding: 6px 12px;
    font-size: 15px;
    cursor: pointer;
    transition: background-color 100ms ease;
  }

  .select-container .select:not(:last-child) {
    border-right: 1px solid #cacaca;
  }

  .select-container .select[selected] {
    color: #fff;
    background-color: var(--button-color);
  }

  .preview-panel {
    padding: 36px 0;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  canvas {
    width: 500px;
    max-width: 45%;
    border-radius: 20px;
  }

  .download-fab {
    cursor: pointer;
    position: absolute;
    bottom: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 64px;
    height: 64px;
    background-color: #ffd95d;
    box-shadow: var(--shadow-elevation-1);
    transition: background-color 100ms ease, box-shadow 100ms ease;
  }

  .download-fab:hover {
    background-color: #f8d151;
    box-shadow: var(--shadow-elevation-1);
  }

  @media screen and (max-width: 860px) {
    header {
      height: 56px;
      font-size: 20px;
    }

    .main-container {
      flex-direction: column;
    }

    .input-panel,
    .preview-panel {
      width: 100%;
      max-width: initial;
    }

    .preview-panel {
      padding: 24px 0 96px 0;
      flex: 1;
    }

    .input {
      margin-bottom: 24px;
    }

    .download-fab {
      width: 56px;
      height: 56px;
    }
  }
</style>

<body>
  <!--================================ NAV v2 ================================-->
  <div id="header"></div>

  <!--================================ NAV v2 end ================================-->
</body>

<div class="main-container">
  <div class="input-panel">
    <div class="input">
      <h4>Participant :</h4>
      <label>Upload Your Image<br> From Here :</label>
      <button class="button" onclick="uploadImage()">Upload Image</button>
      <input class="profile-input" type="file" accept="image/*" onchange="upload(event)" hidden />
    </div>
    <div class="input">
      <label>Size :</label>
      <div class="select-container">
        <div class="select" id="original" selected onclick="changeShape('original')">
          Original
        </div>
        <!-- <div class="select" id="square" onclick="changeShape('square')">
            Square
          </div> -->
        <!-- <div class="select" id="circle" onclick="changeShape('circle')">
            Circle
          </div> -->
      </div>
    </div>
    <div class="input">
      <a href="mentor.html">Attend as a Mentor</a><br>
      <a href="admin.html">Attend as a Admin</a>
    </div>
  </div>
  <div class="preview-panel">
    <canvas></canvas>
    <div class="download-fab" onclick="download()">
      <svg xmlns="http://www.w3.org/2000/svg" height="23" viewBox="0 0 24 24" width="24" fill="#fff">
        <path d="M0 0h24v24H0V0z" fill="none" />
        <path
          d="M16.59 9H15V4c0-.55-.45-1-1-1h-4c-.55 0-1 .45-1 1v5H7.41c-.89 0-1.34 1.08-.71 1.71l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.63-.63.19-1.71-.7-1.71zM5 19c0 .55.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1H6c-.55 0-1 .45-1 1z" />
      </svg>
    </div>
  </div>
</div>

<script>
  const canvas = document.querySelector("canvas");
  const ctx = canvas.getContext("2d");
  let image = "";
  let shape = "original";
  let append = "";
  let who = "attendee";
  var banner;

  const uploadImage = () => {
    document.querySelector("input.profile-input").click();
  };

  const changeShape = (type) => {
    const original = document.querySelector(
      ".select-container .select#original"
    );
    const square = document.querySelector(".select-container .select#square");
    const circle = document.querySelector(".select-container .select#circle");
    shape = type;
    switch (type) {
      case "original": {
        append = "";
        original.setAttribute("selected", "");
        square.removeAttribute("selected");
        circle.removeAttribute("selected");
        break;
      }
      case "square": {
        append = "";
        square.setAttribute("selected", "");
        original.removeAttribute("selected");
        circle.removeAttribute("selected");
        break;
      }
      case "circle": {
        append = "-circle";
        circle.setAttribute("selected", "");
        original.removeAttribute("selected");
        square.removeAttribute("selected");
        break;
      }
    }
    draw(who);
  };

  const upload = (e) => {
    if (e && e.target.files && e.target.files[0]) {
      const reader = new FileReader();
      reader.onload = (event) => {
        const img = new Image();
        img.onload = () => {
          image = img;
          draw(who);
        };
        img.src = event.target.result;
      };
      reader.readAsDataURL(e.target.files[0]);
    }
  };

  const draw = (who) => {
    banner = new Image();
    banner.src = "./" + who + append + ".png";
    banner.onload = () => {
      if (image) {
        switch (shape) {
          // case "original": {
          //   canvas.width = image.width;
          //   canvas.height = image.height;
          //   ctx.drawImage(image, 0, 0);
          //   break;
          // }
          default: {
            const size = Math.min(image.width, image.height);
            canvas.width = 500;
            canvas.height = 500;
            const hRatio = canvas.width / image.width;
            const vRatio = canvas.height / image.height;
            const ratio = Math.max(hRatio, vRatio);
            const x = (canvas.width - image.width * ratio) / 2;
            const y = (canvas.height - image.height * ratio) / 2;
            ctx.drawImage(
              image,
              0,
              0,
              image.width,
              image.height,
              x,
              y,
              image.width * ratio,
              image.height * ratio
            );
            break;
          }
        }
      } else {
        ctx.canvas.width = 500;
        ctx.canvas.height = 500;
        ctx.fillStyle = "#ffffff";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
      }

      const height = (banner.height / banner.width) * canvas.width;
      const y = canvas.height - height;
      const fontSize = canvas.width / 17.2;
      const fontY = y + height * 0.7;
      ctx.drawImage(
        banner,
        0,
        0,
        banner.width,
        banner.height,
        0,
        y,
        canvas.width,
        height
      );

      ctx.fillStyle = "#757575";
      ctx.textAlign = "center";
      ctx.textBaseline = "middle";
      ctx.font = `${fontSize}px Google Sans, sans-serif`;
      // ctx.fillText(category, canvas.width / 2, fontY)

      if (shape === "circle") {
        ctx.globalCompositeOperation = "destination-in";
        ctx.beginPath();
        ctx.arc(
          canvas.width / 2,
          canvas.height / 2,
          canvas.height / 2,
          0,
          Math.PI * 2
        );
        ctx.closePath();
        ctx.fill();
      }
    };
  };

  const download = () => {
    const a = document.createElement("a");
    const url = canvas.toDataURL("image/png;base64");
    a.download = "badge.png";
    a.href = url;
    a.click();
  };

  draw(who);
</script>

</html>