Merge pull request #380 from abhirk247/main

Added File converter website
codemistic · Oct 11, 2022 · 7779d9b · 7779d9b
2 parents 667e7e1 + a89d50b
commit 7779d9b
Show file tree

Hide file tree

Showing 7 changed files with 276 additions and 0 deletions.
diff --git a/File converter/README.md b/File converter/README.md
@@ -0,0 +1,8 @@
+# Image_Into_pdf-Converter
+
+You can Convert any jpg,jpeg, png image file into Pdf. 
+Visit [site](https://fileconverterpdf.netlify.app/)
+
+
+![update_filecon](https://user-images.githubusercontent.com/41264611/191050487-edcc0808-fa4f-4acd-801a-7392543e0565.png)
+
diff --git a/File converter/img/github.svg b/File converter/img/github.svg
diff --git a/File converter/img/image-regular.svg b/File converter/img/image-regular.svg
diff --git a/File converter/img/newFavicon.png b/File converter/img/newFavicon.png
diff --git a/File converter/index.html b/File converter/index.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="style.css">
+  <!-- CSS only -->
+<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
+<link rel="icon" type="image/x-icon" href="./img/newFavicon.png">
+  <title>File Converter</title>
+</head>
+<body>
+
+  <nav class="navbar bg-light">
+    <div class="container-fluid">
+      <a class="navbar-brand" href="#">
+        <img src="./img/newFavicon.png" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
+       File Converter
+      </a>
+      <h3>Convert any image into pdf</h3>
+      <a class="navbar-brand" href="https://github.com/abhirk247/Image_Into_pdf-Converter.git" target="_blank">
+        <img src="./img/github.svg" alt="Logo" width="50" height="34" class="d-inline-block align-text-top">
+
+      </a>
+    </div>
+  </nav>
+
+  <div class="container">
+
+
+  <div class="card" style="width: auto;">
+
+    <img src="./img/image-regular.svg"  id="showImg" class="card-img-top" alt="...">
+    <div class="card-body">
+
+       <div class="file-input">
+      <input type="file" id="file" class="file" onchange="loadImg(event)" accept=".png, .jpg, .jpeg">
+      <label for="file">
+        Select file
+        <p class="file-name"></p>
+      </label>
+    </div>
+      <h3 class="card-text">Upload your photo here</h3>
+
+       <button class="bn30" onclick="pdfDown()">Image to Pdf</button> 
+    </div>
+  </div>
+</div>
+
+
+
+
+
+
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha512-cLuyDTDg9CSseBSFWNd4wkEaZ0TBEpclX0zD3D6HjI19pO39M58AgJ1SjHp6c7ZOp0/OCRcC2BCvvySU9KJaGw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
+  <script src="script.js"></script>
+  <!-- JavaScript Bundle with Popper -->
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
+</body>
+</html>
diff --git a/File converter/script.js b/File converter/script.js
@@ -0,0 +1,28 @@
+let newImg, showImg;
+
+function loadImg(event){
+  showImg=document.getElementById('showImg')
+  showImg.src=URL.createObjectURL(event.target.files[0]);
+
+  newImg=document.createElement('img')
+  newImg.src=URL.createObjectURL(event.target.files[0]);
+
+
+  showImg.onload=function(){
+    URL.revokeObjectURL(showImg.src);
+  }
+}
+
+function pdfDown(){
+
+
+  const doc = new jsPDF();
+
+  // doc.setFontSize(40);
+  // doc.text("www.abhirk.me", 35, 25);
+  doc.addImage(newImg, 15, 40, 180, 180);
+
+  doc.save('imgintoPdf.pdf');
+
+
+}
diff --git a/File converter/style.css b/File converter/style.css
@@ -0,0 +1,175 @@
+*,
+*:before,
+*:after {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+
+
+body{
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 16px;
+  margin: 0;
+  padding: 0;
+  background: rgb(238,174,202); 
+   background: linear-gradient(315deg, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
+
+
+
+}
+
+.header{
+  display: flex;
+  margin: 30px;
+  padding: 20px;
+  line-height: 150px;
+  font-size: 25px;
+  font-weight: 700;
+
+  text-align: center;
+}
+.upload-img{
+  width: 100%;
+  height: 100%;
+  margin: 0 auto 30px;
+  text-align: center;
+  position: relative;
+  padding: 3px;
+  font-size: 22px;
+  color: #fff;
+  background-color: #000;
+  border-radius: 25px;
+  line-height: 20px;
+
+}
+
+
+
+.bn30 {
+  border: 5em;
+  cursor: pointer;
+  outline: none;
+  font-size: 16px;
+  -webkit-transform: translate(0);
+  transform: translate(0);
+  background-image: linear-gradient(45deg, #4568dc, #b06ab3);
+  padding: 0.7em 2em;
+  border-radius: 65px;
+  box-shadow: 1px 1px 10px rgba(255, 255, 255, 0.438);
+  -webkit-transition: box-shadow 0.25s;
+  transition: box-shadow 0.25s;
+  color: white;
+
+}
+
+.bn30 .text {
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-image: linear-gradient(45deg, #4568dc, #b06ab3);
+}
+
+.bn30:after {
+  content: "";
+  border-radius: 18px;
+  position: absolute;
+  margin: 4px;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: -1;
+  background: #0e0e10;
+}
+
+.bn30:hover {
+  background-image: linear-gradient(-45deg, #4568dc, #b06ab3);
+  box-shadow: 0 12px 24px rgba(128, 128, 128, 0.1);
+}
+
+.bn30:hover .text {
+  background-image: linear-gradient(-45deg, #4568dc, #b06ab3);
+}
+
+.upload-img input{
+  padding: 5px;
+  margin: 5px;
+  position: relative;
+  left: 0;
+  top: 0;
+  cursor: pointer;
+  width: 55px;
+  height: 25px;
+  z-index: 1;
+  opacity: 0;
+}
+
+#showImg{
+  display: block;
+  margin: 0 auto;
+  width: 300px;
+  border-radius: 25px;
+}
+
+
+/* input file */
+
+.file {
+  opacity: 0;
+  width: 0.1px;
+  height: 0.1px;
+  position: absolute;
+}
+
+.file-input label {
+  display: block;
+  position: relative;
+  width: 200px;
+  height: 50px;
+  border-radius: 25px;
+  background: linear-gradient(40deg,#ff6ec4,#7873f5);
+  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-weight: bold;
+  cursor: pointer;
+  transition: transform .2s ease-out;
+}
+
+.file-name {
+  position: absolute;
+  bottom: -35px;
+  left: 10px;
+  font-size: 0.85rem;
+  color: #555;
+}
+
+input:hover + label,
+input:focus + label {
+  transform: scale(1.02);
+}
+
+/* Adding an outline to the label on focus */
+input:focus + label {
+  outline: 1px solid #000;
+  outline: -webkit-focus-ring-color auto 2px;
+}
+
+.container{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+}
+.card-text{
+  margin-bottom: 3rem;
+}
+
+.navbar-brand{
+  font-weight: bolder;
+
+}