speech_recognition_vosk

README.md

@@ -1,60 +1,2 @@
-<h1 align="centre">
-    <b>General Projects</b>
-</h1>
-
-<a href="https://github.com/codemistic/General-Projects/graphs/contributors"><img alt="GitHub contributors" src="https://img.shields.io/github/contributors/codemistic/General-Projects?color=2b9348"></a>
-<a href="https://github.com/codemistic/General-Projects/blob/master/LICENSE"><img src="https://img.shields.io/github/license/codemistic/General-Projects?color=2b9348" alt="License Badge"/></a>
-<a hreaf="https://github.com/codemistic/General-Projects/issues"><img src="https://img.shields.io/github/issues/codemistic/General-Projects?color=pink&logo=github"/></a>
-[![GitHub PRs](https://img.shields.io/github/issues-pr/codemistic/General-Projects?style=social&logo=github)](https://github.com/codemistic/General-Projects/pulls)           [![GitHub forks](https://img.shields.io/github/forks/codemistic/General-Projects?logo=git)](https://github.com/codemistic/General-Projects/network)                        
-
-
-Steps to contribute in this repository
-
-    1. Fork this repo
-    2. Create a new folder/directory for your projects
-    3. Add useful code for the open-source community
-    4. Make pull request
-    5. Now, it time for review (Don't worry, our team we will review your Pull Request(PR) within 6 hours.
-
-## Maintainers (Our Team for HacktoberFest)
-
-<table>
-<tr>
-    <td align="center" style="word-wrap: break-word; width: 200.0; height: 200.0">
-        <a href=https://linktr.ee/gantavyamalviya>
-            <img src=https://avatars.githubusercontent.com/u/39916680?v=4 width="200;"  style="border-radius:50%;align-items:center;justify-content:center;overflow:hidden;padding-top:10px" alt=Gantavya Malviya/>
-            <br />
-            <sub style="font-size:14px"><b>Gantavya Malviya</b></sub>
-        </a>
-    </td>
-    <td align="center" style="word-wrap: break-word; width: 150.0; height: 150.0">
-        <a href=https://github.com/TKirtan>
-            <img src=https://avatars.githubusercontent.com/u/38884247?v=4 width="200;"  style="border-radius:50%;align-items:center;justify-content:center;overflow:hidden;padding-top:10px" />
-            <br />
-            <sub style="font-size:14px"><b>Kirtan</b></sub>
-        </a>
-    </td>
-    <td align="center" style="word-wrap: break-word; width: 150.0; height: 150.0">
-        <a href=https://github.com/Adarsh-jaiss>
-            <img src=https://avatars.githubusercontent.com/u/96974600?v=4 width="200;"  style="border-radius:50%;align-items:center;justify-content:center;overflow:hidden;padding-top:10px" alt=Adarsh jaiswal/>
-            <br />
-            <sub style="font-size:14px"><b>Adarsh jaiswal</b></sub>
-        </a>
-    </td>
-
-</tr>
-</table>
-
-## Top Contributors
-Update in progress....
-
-### Thanks for visiting!
-### Regards,
-### Team CodeMistic
-[![Linkedin](https://img.shields.io/badge/-LinkedIn-blue?style=flat-square&logo=Linkedin&logoColor=white&link=https://www.linkedin.com/company/codemistic/)](https://www.linkedin.com/company/codemistic/)
-[![Twitter](https://img.shields.io/badge/-Twitter-%231DA1F2.svg?style=flat-square&logo=twitter&logoColor=white&link=https://www.twitter.com/codemistic/)](https://www.twitter.com/codemistic/)
-[![Instagram](https://img.shields.io/badge/-Instagram-red?style=flat-square&logo=Instagram&logoColor=white&link=https://www.instagram.com/codemistic.in/)](https://www.instagram.com/codemistic.in/)
-[![GitHub](https://img.shields.io/badge/-Github-%23100000.svg?&style=flat-square&logo=github&logoColor=white&link=https://www.github.com/codemistic/)](https://www.github.com/codemistic/)
-[![views](https://komarev.com/ghpvc/?username=codemistic&label=Profile%20views&color=0e75b6&style=flat)](https://github.com/codemistic)
-
-<a href="https://telegram.me/codemistic"><img alt="Custom badge for codemistic Group" src="https://img.shields.io/endpoint?style=for-the-badge&amp;url=https%3A%2F%2Frunkit.io%2Fdamiankrawczyk%2Ftelegram-badge%2Fbranches%2Fmaster%3Furl%3Dhttps%3A%2F%2Ft.me%2Fcodemistic"></a>
+###
+Simple webpage that allows the user whatever they feel like.

drawAI/README.md

@@ -0,0 +1,2 @@
+###
+Simple webpage that allows the user whatever they feel like.

drawAI/index.html

@@ -0,0 +1,34 @@
+<!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">
+    <title>DrawAI</title>
+    <script src="./script.js" defer></script>
+    <link rel="stylesheet" href="./style.css">
+    <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=Luckiest+Guy&display=swap" rel="stylesheet">
+
+</head>
+<body>
+  <h1>DrawAI</h1>
+  <div class="content">
+
+    <div class="options">
+      <input type="color" id="colorPicker" value="#658CE6">
+      <div class="sizeSelector">
+        <div class="sideSize">
+          16
+        </div>
+        <input type="range" min="4" max="64" value="16" class="slider" id="sizeSlider">
+      </div>
+    </div>
+      <div class="grid">
+      </div>
+  </div>
+
+</body>
+</html>
+<!-- initial commit -->

drawAI/script.js

@@ -0,0 +1,46 @@
+let side = 16;
+let grid = document.querySelector(".grid");
+let sideSize = document.querySelector(".sideSize");
+let drawing = true;
+let color = "#658CE6";
+function createGrid(){
+    for(let i=0; i<side; i++){
+        let row = document.createElement('div');
+        row.classList.add('row');
+        for(let j=0; j<side; j++){
+            let pixel = document.createElement('div');
+            pixel.classList.add('pixel');
+            pixel.addEventListener('click',()=>{
+                drawing =  drawing==false? true: false;
+                console.log(drawing);
+            });
+            pixel.addEventListener('mouseover',()=>{
+                if(drawing){
+                    pixel.style.backgroundColor = color;
+                }
+            })
+            row.appendChild(pixel)
+        }
+        grid.appendChild(row);
+    }
+    // document.body.appendChild(grid);
+}
+function resetGrid(){
+    grid.textContent=""
+    createGrid();
+}
+createGrid();
+
+let slider = document.querySelector("#sizeSlider");
+slider.addEventListener('change',()=>{
+    side = slider.value;
+    if(side>100 || side<0) side = 100;
+    sideSize.innerText = side;
+    resetGrid();
+});
+slider.addEventListener('input',()=>{
+    sideSize.innerText = slider.value;
+});
+
+let colorPicker = document.querySelector("#colorPicker");
+colorPicker.addEventListener('input',()=>{color=colorPicker.value;});

drawAI/style.css

@@ -0,0 +1,53 @@
+body{
+    /* display: flex; */
+    /* justify-content: center; */
+    /* align-items: center; */
+
+    background-color: #F8F0E3;
+    font-family: 'Luckiest Guy', cursive;
+}
+h1{
+    display: flex;
+    justify-content: center;
+    font-size: xx-large;
+}
+.content{
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: center;
+}
+.options{
+    display: flex;
+    padding-top: 30px;
+    align-items: center;
+    gap: 12px;
+}
+.sizeSelector{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.gridContainer{
+    display: flex;
+    justify-content: center;
+}
+.grid{
+    justify-self: end;
+    display: flex;
+    flex-direction: column;
+    justify-content: stretch;
+    height: 500px;
+    width: 500px;
+    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+    background-color: white;
+}
+.row{
+    flex-grow: 1;
+    display: flex;
+    justify-content: stretch;
+}
+
+.pixel{
+    /* border: 1px solid black; */
+    flex-grow: 1;
+}