Document to Handwritting Website

ClimbingGame/Document to Handwritting Website/README.md

@@ -0,0 +1,54 @@
+# Doc to Handwriting
+This is a **Document to Handwriting** a website using HTML, CSS, JS and Google font API. We type our work in the text box and our work will be converted to handwriting. On this site, we can change 10 different types of font. On this site we can change the font width On this site, we can upload our own font. our work will be downloaded into a png Format. This site also available in Dark Mode.
+
+
+## Functionalities:
+
+- Convert to Document to the handwriting
+- 10 different type of font
+- Dark mode
+- Download your work in png Format.
+- change font size, font width.
+
+
+## Setup instructions
+There are two ways to run it on your Linux,MAC or Windows
+
+- Run the executable(Home.html) file.
+- Run the program in your IDE or terminal/command line.
+
+
+## Requirements:
+-  Any Browser (Google Chrome,Microsoft Edge,Safari,Brave etc.)
+
+```bash
+live server Extension (only for Vs code)
+```
+
+Click on the **Click Here** to see the Document to Handwritting Demo on YouTube.
+
+| Name of Script | YouTube Link |  Author | Tools Used |
+| --- | --- | --- | --- 
+|Document to Handwritting| [Click Here](https://www.youtube.com/watch?v=mLCL7OZ4JFQ)| [Priyadarshan Ghosh](https://github.com/Priyadarshan2000) |HTML, CSS, JS,Google Font API
+
+## Output
+
+### Light Mode:
+
+![image](https://user-images.githubusercontent.com/62868878/109396018-7cecb200-7955-11eb-971c-b0bf6f15109d.png)
+
+### Dark Mode:
+
+![image](https://user-images.githubusercontent.com/62868878/109396022-883fdd80-7955-11eb-9dfc-ec0ad21e96f4.png)
+
+
+## Demo
+
+![20210408_181742](https://user-images.githubusercontent.com/62868878/114029232-ef2aad80-9896-11eb-9ad1-f6b5cb950759.gif)
+
+
+
+## Author(s)
+
+- Priyadarshan Ghosh (Priyadarshan2000)
+

ClimbingGame/Document to Handwritting Website/assets/css/custom.css

@@ -0,0 +1,116 @@
+#dataField{
+    height:300px;
+}
+
+.hidden{
+    display: none;
+}
+
+canvas{
+    width: 100% !important;
+    height: auto !important;
+}
+
+.inline-btn{
+    margin-right: 10px !important;
+    margin-left: 10px !important;
+}
+
+.slidecontainer {
+    width: 100%;
+  }
+
+  .slider {
+    -webkit-appearance: none;
+    width: 100%;
+    height: 25px;
+    background: #d3d3d3;
+    outline: none;
+    opacity: 0.7;
+    -webkit-transition: .2s;
+    transition: opacity .2s;
+    margin-top:10px;
+    margin-bottom:0px;
+  }
+
+  .slider:hover {
+    opacity: 1;
+  }
+
+  .slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 25px;
+    height: 25px;
+    background: #9b4dca;
+    cursor: pointer;
+  }
+
+  .slider::-moz-range-thumb {
+    width: 25px;
+    height: 25px;
+    background: #9b4dca;
+    cursor: pointer;
+  }
+
+
+
+  .switch {
+    position: relative;
+    display: inline-block;
+    width: 45px;
+    height: 34px;
+  }
+
+  .switch input { 
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  .switch .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    -webkit-transition: .4s;
+    transition: .4s;
+  }
+
+  .switch .slider:before {
+    position: absolute;
+    content: "";
+    height: 17px;
+    width: 17px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    -webkit-transition: .4s;
+    transition: .4s;
+  }
+
+  .switch input:checked + .slider {
+    background-color: rgb(71, 71, 71);
+  }
+
+  .switch input:focus + .slider {
+    box-shadow: 0 0 1px rgb(71, 71, 71);
+  }
+
+  .switch input:checked + .slider:before {
+    -webkit-transform: translateX(17px);
+    -ms-transform: translateX(17px);
+    transform: translateX(17px);
+  }
+
+  /* Rounded sliders */
+  .switch .slider.round {
+    border-radius: 34px;
+  }
+
+  .switch .slider.round:before {
+    border-radius: 50%;
+  }

ClimbingGame/Document to Handwritting Website/assets/css/dark.css

@@ -0,0 +1,27 @@
+.navigation {
+  background: rgb(36, 36, 36);
+  border-bottom: 0.1rem solid rgb(71, 71, 71);
+}
+
+body {
+  color: rgb(185, 192, 198);
+  background-color: #1f1f1f;
+  background-image: none !important;
+}
+.navigation .navigation-title,
+.navigation .title {
+  color: rgb(185, 192, 198);
+}
+
+a {
+  color: rgb(199, 157, 226);
+}
+
+a:focus,
+a:hover {
+  color: rgb(185, 192, 198);
+}
+
+.navigation .img {
+  fill: rgb(199, 157, 226);
+}

ClimbingGame/Document to Handwritting Website/assets/js/script.js

@@ -0,0 +1,62 @@
+window.onload = function () {
+    var fileupload = document.getElementById("pageUploader");
+    var button = document.getElementById("btnPageUpload");
+    button.onclick = function () {
+        fileupload.click();
+    };
+    fileupload.onchange = function () {
+        console.log("page Uploader Triggered.")
+        var reader = new FileReader();
+        reader.readAsDataURL(fileupload.files[0]);
+        reader.onload = function (e) {
+            img = loadImage(e.target.result);
+        }
+    };
+
+    var fontupload = document.getElementById("fontUploader");
+    button = document.getElementById("btnFontUpload");
+    button.onclick = function () {
+        fontupload.click();
+    };
+    fontupload.onchange = function () {
+        console.log("font Uploader Triggered.")
+        var reader = new FileReader();
+        reader.readAsDataURL(fontupload.files[0]);
+        reader.onload = function (e) {
+            myFont.push(loadFont(e.target.result))
+            myFonts += 1
+            fontNum = myFonts - 1
+        }
+    };
+
+
+    loadDarkModeFromLocalStorage();
+    darkLightToggle()
+};
+
+function loadDarkModeFromLocalStorage(){
+    isDark = boolean(localStorage.isDark)
+    document.getElementById('darkmode').checked = isDark
+}
+
+function darkLightToggle() {
+    saveLocalStorageDarkMode();
+    isDark = document.getElementById('darkmode').checked
+    if (isDark) {
+        var link = document.createElement('link');  
+        link.rel = 'stylesheet';  
+        link.type = 'text/css'; 
+        link.href = 'assets/css/dark.css';  
+        link.id = "darkcss";
+        document.getElementsByTagName('head')[0].appendChild(link)
+    } else {
+        if (document.contains(document.getElementById("darkcss"))) {
+            document.getElementById('darkcss').remove()
+        }
+    }
+ }
+
+ function saveLocalStorageDarkMode(){
+    isDark = document.getElementById('darkmode').checked
+    localStorage.isDark = isDark
+ }

ClimbingGame/Document to Handwritting Website/assets/js/sketch.js

@@ -0,0 +1,49 @@
+myData = `Hi! my name is Priyadarshan I develop this Site this Site Convert Doc To Handwritting..`
+let img, 
+myFont = [];
+myFonts = 7
+imgNum = 1
+fontNum = 0
+pageNum = 1
+xaxis=20
+yaxis=20
+fontsize=30
+w=700
+linespacing=false
+function preload() {
+    fontLoad();
+    loadPage();
+}
+
+function setup(){
+    canvas = createCanvas(750,1000)
+    canvas.parent('contributing')
+    rectMode(CORNER);
+}
+
+function draw(){
+    image(img, 0, 0, width, height)
+    textFont(myFont[fontNum]);
+    textSize(fontsize)
+    fill('#264180')
+    if(linespacing){
+        textLeading(linespacing);
+    }
+    data = "\n"+myData
+    text(data, xaxis, yaxis, w, 900);
+}
+
+function fontLoad(){
+    for(var i = 0; i < myFonts; i++){
+        myFont.push(loadFont('fonts/font ('+str(i)+').ttf'));
+    }
+}
+
+function changeFont(){
+    fontNum += 1;
+    fontNum %= myFonts
+}
+
+function loadPage(){
+    img = loadImage('pages/page (2).jpg');
+}