From 551308e11aeff868eadf5b905ce06329bb27e76d Mon Sep 17 00:00:00 2001
From: vrijraj <vrijraj2396@gmail.com>
Date: Fri, 1 Sep 2023 23:18:45 +0530
Subject: [PATCH] ui fixed

---
 public/index.html                  |   8 +-
 src/assets/logo.png                | Bin 6849 -> 0 bytes
 src/assets/logo.svg                |   1 -
 src/components/core/appDrawer.vue  |   7 +
 src/components/core/appToolbar.vue |  10 +
 src/router/index.js                |   5 +
 src/views/BadgePage.vue            | 353 +++++++++++++++++++++++++++++
 7 files changed, 379 insertions(+), 5 deletions(-)
 delete mode 100644 src/assets/logo.png
 delete mode 100644 src/assets/logo.svg
 create mode 100644 src/views/BadgePage.vue

diff --git a/public/index.html b/public/index.html
index 3346da0..95ad896 100644
--- a/public/index.html
+++ b/public/index.html
@@ -27,11 +27,11 @@
     content="An annual event hosted by the Google Developers Group across the world to bring the technology closer to the developers." />
   <meta name="author" content="DevFest India Team" />
   <meta property="keywords"
-    content="DevFest India, DevFest, DevFest 2022, DevFest India, DevFest India 2021, GDG India, GDG DevFest, GDG DevFest India, GDG, Google DevFest, wtm, WomenTeckmakers, Women Teckmakers, Google Developer Groups,Google Developer Group, Google Developers,Google Developer,developer community, developer communities,developer, developers,programmer, programmers, programming, software engineering, software engineer, software engineers, coding, Developer meetup,Developer meetups, developer meetup, hackathons,codelabs, study jam, study jams, devmelas,Developer event, Developer events, Virtual developer event, Virtual developer events" />
+    content="DevFest India, DevFest, DevFest 2023, DevFest 2022, DevFest India, DevFest India 2021, GDG India, GDG DevFest, GDG DevFest India, GDG, Google DevFest, wtm, WomenTeckmakers, Women Teckmakers, Google Developer Groups,Google Developer Group, Google Developers,Google Developer,developer community, developer communities,developer, developers,programmer, programmers, programming, software engineering, software engineer, software engineers, coding, Developer meetup,Developer meetups, developer meetup, hackathons,codelabs, study jam, study jams, devmelas,Developer event, Developer events, Virtual developer event, Virtual developer events" />
   <!-- SEO Tags -->
 
   <!-- SEO Facebook Tags -->
-  <meta property="og:title" content="DevFest India 2022" />
+  <meta property="og:title" content="DevFest India 2023" />
   <meta property="og:type" content="website" />
   <meta property="og:image"
     content="https://raw.githubusercontent.com/DevFest-India/website-data-2021/main/devfestindia.jpg" />
@@ -45,13 +45,13 @@
 
   <meta name="twitter:card" content="summary_large_image" />
   <meta name="twitter:url" content="https://devfestindia.com/" />
-  <meta name="twitter:title" content="DevFest India 2022" />
+  <meta name="twitter:title" content="DevFest India 2023" />
   <meta name="twitter:description"
     content="An annual event hosted by the Google Developers Group across the world to bring the technology closer to the developers." />
   <meta name="twitter:image:src"
     content="https://raw.githubusercontent.com/DevFest-India/website-data-2021/main/devfestindia.jpg"
     data-react-helmet="true" />
-  <meta name="twitter:tags" content="DevFest India, DevFest, DevFest 2022, DevFest India, DevFest Indi" />
+  <meta name="twitter:tags" content="DevFest India, DevFest, DevFest 2023, DevFest India, DevFest Indi" />
   <!-- SEO Twitter Tags -->
 
 
diff --git a/src/assets/logo.png b/src/assets/logo.png
deleted file mode 100644
index f3d2503fc2a44b5053b0837ebea6e87a2d339a43..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6849
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

diff --git a/src/assets/logo.svg b/src/assets/logo.svg
deleted file mode 100644
index 145b6d1..0000000
--- a/src/assets/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>
diff --git a/src/components/core/appDrawer.vue b/src/components/core/appDrawer.vue
index 94a77f4..6503fe5 100644
--- a/src/components/core/appDrawer.vue
+++ b/src/components/core/appDrawer.vue
@@ -29,6 +29,13 @@
           <v-list-item-title>Find An Event</v-list-item-title>
         </v-list-item-content>
       </v-list-item>
+
+      <v-list-item to="/badge" class="google-font my-0 py-0" color="blue">
+        <v-list-item-content>
+          <v-list-item-title>Badge</v-list-item-title>
+        </v-list-item-content>
+      </v-list-item>
+
       <v-list-item to="/faq" class="google-font my-0 py-0" color="blue">
         <v-list-item-content>
           <v-list-item-title>FAQ</v-list-item-title>
diff --git a/src/components/core/appToolbar.vue b/src/components/core/appToolbar.vue
index d44e535..9d67395 100644
--- a/src/components/core/appToolbar.vue
+++ b/src/components/core/appToolbar.vue
@@ -32,6 +32,16 @@
         style="text-transform: none;font-size: 80%;font-weight: 500;"
         >Find An Event</v-btn
       >
+      <v-btn
+        rounded
+        text
+        small
+        class="mr-1"
+        color="primary"
+        to="/badge"
+        style="text-transform: none;font-size: 80%;font-weight: 500;"
+        >Badge</v-btn
+      >
       <v-btn
         rounded
         text
diff --git a/src/router/index.js b/src/router/index.js
index 230363a..c27af8c 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -40,6 +40,11 @@ const routes = [
     name: 'CodeofConduct',
     component: () => import(/* webpackChunkName: "coc" */ '../views/CoCPage.vue')
   },
+  {
+    path: '/badge',
+    name: 'badge',
+    component: () => import(/* webpackChunkName: "badge" */ '../views/BadgePage.vue')
+  },
 ]
 
 const router = new VueRouter({
diff --git a/src/views/BadgePage.vue b/src/views/BadgePage.vue
new file mode 100644
index 0000000..ecf5e30
--- /dev/null
+++ b/src/views/BadgePage.vue
@@ -0,0 +1,353 @@
+<template>
+  <v-main>
+    <v-container fluid>
+      <!-- Mobile -->
+      <v-row>
+        <v-col md="12" lg="12" class="d-block d-sm-block d-md-none px-0">
+          <p class="google-font gdg-heading mb-0 grey--text text--darken-4">
+            DevFest India Badge
+          </p>
+          <p class="my-0 mb-8 h1-subheading">
+            Now that you are here, how about personalising your DevFest India
+            2023 profile? Upload an image and generate a personalised badge with
+            the DevFest India 2023 frame. Also share your image using
+            #DevFestIndia on different social platforms.
+          </p>
+        </v-col>
+      </v-row>
+      <!-- Mobile -->
+
+      <!-- Desktop -->
+      <v-row class="mb-md-10">
+        <v-col
+          md="6"
+          class="order-md-1 order-sm-2 order-2 px-md-7 mt-3 px-0 mb-md-13"
+        >
+          <div class="d-none d-sm-none d-md-block mb-10">
+            <p class="google-font gdg-h1 mb-0 grey--text text--darken-4">
+              DevFest India Badge
+            </p>
+            <p class="google-font" style="font-size: 18px">
+              Now that you are here, how about personalising your DevFest India
+              2023 profile? Upload an image and generate a personalised badge
+              with the DevFest India 2023 frame. Also share your image using
+              #DevFestIndia on different social platforms.
+            </p>
+          </div>
+          <div class="input">
+            <label class="google-font mb-3" style="font-size: 110%"
+              >Select a Image</label
+            >
+            <br />
+            <v-btn
+              class="google-font mt-3"
+              depressed
+              color="#4285f4"
+              dark
+              large
+              @click="uploadImage()"
+              rounded
+              style="text-transform: capitalize"
+            >
+              Upload Image
+              <v-icon right>mdi-upload</v-icon>
+            </v-btn>
+            <input
+              class="profile-input"
+              type="file"
+              accept="image/*"
+              @change="upload"
+              hidden
+            />
+          </div>
+          <div class="mt-5">
+            <label class="google-font mb-5" style="font-size: 110%"
+              >Image Shape</label
+            >
+            <br />
+            <v-btn-toggle
+              class="mt-3"
+              rounded
+              v-model="shapeData"
+              color="#4285f4"
+            >
+              <v-btn
+                value="original"
+                class="mx-0 px-5 pb-0"
+                @click="changeShape('original')"
+                >Orignal</v-btn
+              >
+              <v-btn
+                class="mx-0 pb-0 px-5"
+                value="Square"
+                @click="changeShape('Square')"
+                >Square</v-btn
+              >
+              <v-btn
+                class="mx-0 pb-0 px-5"
+                value="circle"
+                @click="changeShape('circle')"
+                >Circle</v-btn
+              >
+            </v-btn-toggle>
+          </div>
+          <p class="mt-8 mb-15 mb-md-0">
+            <span
+              ><span style="color: red">*</span>&nbsp; We respect your privacy
+              and are not storing your pictures on our servers.</span
+            >
+          </p>
+        </v-col>
+        <v-col
+          md="6"
+          sm="12"
+          cols="12"
+          class="text-center py-md-10 py-5 order-md-2 order-sm-1 order-1"
+          style="
+            background: #fafafa;
+            border-radius: 18px;
+            border: 1px solid #e0e0e0;
+          "
+        >
+          <canvas class=""></canvas>
+          <br /><br />
+          <v-btn
+            class="pb-0 mb-0"
+            color="red"
+            dark
+            id="download"
+            @click="download()"
+            ><v-icon left>mdi-arrow-down-bold-circle-outline</v-icon
+            >Download</v-btn
+          >
+        </v-col>
+      </v-row>
+      <!-- Desktop -->
+    </v-container>
+  </v-main>
+</template>
+
+
+<script>
+import gdgImage from "@/assets/img/badge.png";
+export default {
+  name: "BadgeComponent",
+  data: () => ({
+    downloadbtn: false,
+    canvas: null,
+    shape: "original",
+    image: "",
+    shapeData: "original",
+    ctx: null,
+    banner: null,
+  }),
+  created() {
+    document.title = "Badges | DevFest India 2023";
+  },
+  methods: {
+    upload(e) {
+      if (e && e.target.files && e.target.files[0]) {
+        const reader = new FileReader();
+        reader.onload = (event) => {
+          const img = new Image();
+          img.onload = () => {
+            this.image = img;
+            this.draw();
+          };
+          img.src = event.target.result;
+        };
+        reader.readAsDataURL(e.target.files[0]);
+      }
+    },
+    uploadImage() {
+      document.querySelector("input.profile-input").click();
+      this.downloadbtn = true;
+      document.getElementById("download").style.visibility = "visible";
+    },
+    changeShape(type) {
+      this.shape = type;
+      this.draw();
+    },
+    draw() {
+      if (this.image) {
+        switch (this.shape) {
+          case "original": {
+            this.canvas.width = this.image.width;
+            this.canvas.height = this.image.height;
+            this.ctx.drawImage(this.image, 0, 0);
+            break;
+          }
+          default: {
+            this.canvas.width = 2500;
+            this.canvas.height = 2500;
+            const hRatio = this.canvas.width / this.image.width;
+            const vRatio = this.canvas.height / this.image.height;
+            const ratio = Math.max(hRatio, vRatio);
+            const x = (this.canvas.width - this.image.width * ratio) / 2;
+            const y = (this.canvas.height - this.image.height * ratio) / 2;
+            this.ctx.drawImage(
+              this.image,
+              0,
+              0,
+              this.image.width,
+              this.image.height,
+              x,
+              y,
+              this.image.width * ratio,
+              this.image.height * ratio
+            );
+            break;
+          }
+        }
+      } else {
+        this.ctx.canvas.width = 2500;
+        this.ctx.canvas.height = 2500;
+        this.ctx.fillStyle = "#fff";
+        this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+      }
+      const height =
+        (this.banner.height / this.banner.width) * this.canvas.width;
+      const y = this.canvas.height - height;
+      const fontSize = this.canvas.width / 17.2;
+      this.ctx.drawImage(
+        this.banner,
+        0,
+        0,
+        this.banner.width,
+        this.banner.height,
+        0,
+        y,
+        this.canvas.width,
+        height
+      );
+      this.ctx.fillStyle = "#757575";
+      this.ctx.textAlign = "center";
+      this.ctx.textBaseline = "middle";
+      this.ctx.font = `${fontSize}px Google Sans, sans-serif`;
+      // ctx.fillText(category, canvas.width / 2, fontY)
+      if (this.shape === "circle") {
+        this.ctx.globalCompositeOperation = "destination-in";
+        this.ctx.beginPath();
+        this.ctx.arc(
+          this.canvas.width / 2,
+          this.canvas.height / 2,
+          this.canvas.height / 2,
+          0,
+          Math.PI * 2
+        );
+        this.ctx.closePath();
+        this.ctx.fill();
+      }
+    },
+    download() {
+      const a = document.createElement("a");
+      const url = this.canvas.toDataURL("image/png;base64");
+      a.download = "#DevFestIndia_badge.png";
+      a.href = url;
+      a.click();
+    },
+  },
+  mounted() {
+    this.canvas = document.querySelector("canvas");
+    this.ctx = this.canvas.getContext("2d");
+    this.image = "";
+    this.shape = "original";
+    this.downloadbtn = false;
+    document.getElementById("download").style.visibility = "hidden";
+    this.banner = new Image();
+    this.banner.src = gdgImage;
+    // console.log(this.banner);
+    this.banner.onload = () => {
+      this.draw();
+    };
+  },
+};
+</script>
+<style scoped>
+* {
+  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: #4285f4;
+  --button-color-hover: #4285f4;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.select-container {
+  display: flex;
+  border-radius: 4px;
+  /* 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: 1500px;
+  max-width: 80%;
+}
+.blue-btn {
+  background-color: #4285f4;
+  border-color: #4285f4;
+  text-transform: capitalize;
+  border-radius: 5px;
+  color: #fff;
+  text-decoration: none;
+  font-size: 18px;
+  padding: 8px 20px;
+  box-shadow: 0px 3px 5px #f2f2f2;
+}
+.border-btn {
+  text-transform: capitalize;
+  border-radius: 50%;
+  border: 1px solid rgb(224, 224, 224);
+  color: #4285f4;
+  background-color: white;
+  text-decoration: none;
+  font-size: 18px;
+  padding: 8px 20px;
+}
+.border-btn:hover {
+  background-color: #f5f5f5;
+}
+@media screen and (max-width: 860px) {
+  .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;
+  }
+}
+</style>
+
+  
\ No newline at end of file