Added Web Tools Page:

- Added very basic bootstrap styling
- Added functioning QR Code Generator
- Formatted site.webmanifest
- Removed unused dependency injections from pages

WretchedMachines/Pages/Index.cshtml.cs

@@ -7,15 +7,13 @@ namespace WretchedMachines.Pages;
 
 public class IndexModel : PageModel
 {
-    public readonly ILogger<IndexModel> _logger;
 
-    public IndexModel(ILogger<IndexModel> logger)
+    public IndexModel()
     {
-        _logger = logger;
     }
 
     public void OnGet()
     {
-        Log.Information("Test");
+        Log.Information("Index");
     }
 }

WretchedMachines/Pages/Privacy.cshtml

@@ -7,7 +7,6 @@
 
 <p>Use this page to detail your site's privacy policy.</p>
 <div>
-    <div id="qrcode"></div>
     <ul>
     @foreach(var item in Model.Items)
     {

WretchedMachines/Pages/Shared/_Layout.cshtml

@@ -26,6 +26,9 @@
                         <li class="nav-item">
                             <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
                         </li>
+                        <li class="nav-item">
+                            <a class="nav-link text-dark" asp-area="" asp-page="/Webtools">Web Tools</a>
+                        </li>
                         <li class="nav-item">
                             <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
                         </li>

WretchedMachines/Pages/Webtools.cshtml

@@ -0,0 +1,20 @@
+@page
+@model WebtoolsModel
+@{
+    ViewData["Title"] = "Web Tools";
+}
+<div class="container" style="align-items:center">
+    <div class="row">
+        <h1>@ViewData["Title"]</h1>
+
+        <p>This page has a variety of web related tools.</p>
+    </div>
+    <div class="card" style="padding: 5rem; width: 50rem; align-items:center;">
+        <h2 class="card-title">QR Code Generator</h2>
+        <div class="card-body">
+            <div class="" id="qrcode"></div>
+            <br/>
+            <input class="input" id="qrcode-input" type="text" value="https://plugarii.com" style="width:100%"/>
+        </div>
+    </div>
+</div>

WretchedMachines/Pages/Webtools.cshtml.cs

@@ -0,0 +1,19 @@
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.RazorPages;
+using Serilog;
+using WretchedMachines.DataAccess;
+
+namespace WretchedMachines.Pages;
+
+public class WebtoolsModel : PageModel
+{
+
+    public WebtoolsModel()
+    {
+    }
+
+    public void OnGet()
+    {
+        Log.Information("Webtools");
+    }
+}

WretchedMachines/wwwroot/js/site.js

@@ -4,5 +4,31 @@
 // Write your JavaScript code.
 
 $(function(){
-    new QRCode(document.getElementById("qrcode"), "https://plugarii.com");
+
+    const qrCode = new QRCode(document.getElementById("qrcode"), "https://plugarii.com");
+    const input = document.getElementById("qrcode-input");
+
+    const remakeQRCode = (text)=>{
+        qrCode.clear();
+        qrCode.makeCode(text);
+    }
+
+    var text = input.value;
+
+    const processChanges = debounceLeading(() => {
+        text = input.value;
+        remakeQRCode(text)
     });
+    input.addEventListener("keydown",processChanges); 
+});
+
+function debounceLeading(func, timeout = 300){
+    let timer;
+    return (...args) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+        func.apply(this, args);
+        }, timeout);
+    };
+}
+    

WretchedMachines/wwwroot/site.webmanifest

@@ -1 +1,19 @@
-{"name":"Wretched Machines","short_name":"WretchedMachines","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
+{
+    "name": "Wretched Machines",
+    "short_name": "WretchedMachines",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}