-
Notifications
You must be signed in to change notification settings - Fork 12
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Solves #20 in linted file
- Loading branch information
Showing
1 changed file
with
74 additions
and
35 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,55 +1,97 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <html lang="en" itemscope itemtype="https://schema.org/SoftwareApplication"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <meta name="description" content="Draw on the canvas, then get the js script to render it on the HTML canvas"> | ||
| <meta name="keywords" content="draw, canvas, js, script, render, design, html, code, canvascript, graphic"> | ||
| <meta name="author" content="Viraj Bijpuria"> | ||
| <meta property="og:title" content="CanvaScript - Design for the canvas"> | ||
| <meta property="og:description" | ||
| content="Draw on the canvas, then get the js script to render it on the HTML canvas. A tool for graphic designers and developers."> | ||
| <meta property="og:image" content="https://vbprodev.github.io/Canvascript/CanvaScript.png"> | ||
| <meta property="og:url" content="https://vbprodev.github.io/Canvascript/"> | ||
| <meta name="description" content="Draw on the canvas, then get the js script to render it on the HTML canvas" itemprop="description"> | ||
| <meta name="keywords" content="draw, canvas, js, script, render, design, html, code, canvascript, graphic" itemprop="keywords"> | ||
| <meta name="author" content="Viraj Bijpuria" itemprop="author"> | ||
| <meta property="og:title" content="Canvascript - Design for the canvas" itemprop="name"> | ||
| <meta property="og:description" content="Draw on the canvas, then get the js script to render it on the HTML canvas. A tool for graphic designers and developers." itemprop="description"> | ||
| <meta property="og:image" content="https://vbprodev.github.io/Canvascript/CanvaScript.png" itemprop="image"> | ||
| <meta property="og:url" content="https://vbprodev.github.io/Canvascript/" itemprop="url"> | ||
| <meta property="og:type" content="website"> | ||
| <meta name="google-site-verification" content="2nZEIGfRoHGC-BS3L-BIv6bkhVUZDpoGNgUK9Z4Pub8" /> | ||
| <meta name="google-site-verification" content="2nZEIGfRoHGC-BS3L-BIv6bkhVUZDpoGNgUK9Z4Pub8"> | ||
| <link href="stylesheet.css" rel="stylesheet"> | ||
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> | ||
| <link rel="icon" href="assets/CanvaScript.png" type="image/icon type"> | ||
| <title>CanvaScript - Design for the canvas</title> | ||
| <title>Canvascript - Design for the canvas</title> | ||
|
|
||
| <script type="application/ld+json"> | ||
| { | ||
| "@context": "https://schema.org", | ||
| "@type": "SoftwareApplication", | ||
| "name": "Canvascript", | ||
| "url": "https://vbprodev.github.io/Canvascript/", | ||
| "description": "Canvascript is an open-source, no-code tool for drawing on the HTML canvas and generating JavaScript code to render designs.", | ||
| "applicationCategory": "DesignApplication", | ||
| "operatingSystem": "Web", | ||
| "author": { | ||
| "@type": "Person", | ||
| "name": "Viraj Bijpuria" | ||
| }, | ||
| "publisher": { | ||
| "@type": "Organization", | ||
| "name": "VBproDev", | ||
| "url": "https://github.com/VBproDev" | ||
| }, | ||
| "softwareVersion": "1.0", | ||
| "image": "https://vbprodev.github.io/Canvascript/CanvaScript.png", | ||
| "offers": { | ||
| "@type": "Offer", | ||
| "price": "0", | ||
| "priceCurrency": "USD", | ||
| "category": "Open Source" | ||
| }, | ||
| "potentialAction": { | ||
| "@type": "UseAction", | ||
| "target": "https://vbprodev.github.io/Canvascript/", | ||
| "query-input": "required" | ||
| }, | ||
| "keywords": "draw, canvas, JavaScript, graphic design, no-code, HTML, Canvascript", | ||
| "mainEntityOfPage": { | ||
| "@type": "WebPage", | ||
| "@id": "https://vbprodev.github.io/Canvascript/" | ||
| }, | ||
| "sameAs": [ | ||
| "https://github.com/VBproDev/Canvascript", | ||
| "https://discord.gg/ZXMEkzfZXx" | ||
| ] | ||
| } | ||
| </script> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div class="d-flex justify-content-center p-2"> | ||
| <h4 class="me-1">Pick Color:</h4> | ||
| <input class="color me-3" type="color"> | ||
| <input class="color me-3" type="color" itemprop="color"> | ||
|
|
||
| <h4 class="me-1">Pick width:</h4> | ||
| <input class="stroke-width" placeholder="1" min="1" type="number" id="stroke-width"> | ||
| <input class="stroke-width" placeholder="1" min="1" type="number" id="stroke-width" itemprop="width"> | ||
| </div> | ||
|
|
||
| <div class="d-flex justify-content-center"> | ||
| <canvas class="canvas"></canvas> | ||
| <canvas class="canvas" itemprop="softwareHelp"></canvas> | ||
| </div> | ||
|
|
||
| <div class="d-flex justify-content-center"> | ||
| <button class="redo btn btn-warning text-white m-3 mt-2">Redo</button> | ||
| <button class="reset btn btn-danger m-3 mt-2">Reset</button> | ||
| <button class="save btn btn-info text-white m-3 mt-2">Save</button> | ||
| <div class="d-flex justify-content-center" itemprop="potentialAction" itemscope itemtype="https://schema.org/Action"> | ||
| <button class="redo btn btn-warning text-white m-3 mt-2" itemprop="target">Redo</button> | ||
| <button class="reset btn btn-danger m-3 mt-2" itemprop="target">Reset</button> | ||
| <button class="save btn btn-info text-white m-3 mt-2" itemprop="target">Save</button> | ||
| </div> | ||
|
|
||
| <div class="d-flex justify-content-center"> | ||
| <button class="generate btn btn-success mb-3">Generate code</button> | ||
| <div class="d-flex justify-content-center" itemprop="potentialAction" itemscope itemtype="https://schema.org/Action"> | ||
| <button class="generate btn btn-success mb-3" itemprop="target">Generate code</button> | ||
| </div> | ||
|
|
||
| <code class="space"></code> | ||
| <code class="space" itemprop="programmingLanguage">JavaScript</code> | ||
|
|
||
| <div class="container"> | ||
| <div class="row justify-content-center align-items-center"> | ||
| <div class="col-sm-7 col-xl-4 mb-2"> | ||
| <div class="input-group"> | ||
| <input placeholder="width" id="width" class="width form-control"> | ||
| <input placeholder="width" id="width" class="width form-control" itemprop="width"> | ||
| <div class="input-group-append"> | ||
| <span class="input-group-text">px</span> | ||
| </div> | ||
|
|
@@ -62,23 +104,23 @@ <h4 class="me-1">Pick width:</h4> | |
|
|
||
| <div class="col-sm-7 col-xl-4 mb-2"> | ||
| <div class="input-group"> | ||
| <input placeholder="height" id="height" class="height form-control"> | ||
| <input placeholder="height" id="height" class="height form-control" itemprop="height"> | ||
| <div class="input-group-append"> | ||
| <span class="input-group-text">px</span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="col-md-2 col-xl-2 mb-2"> | ||
| <button class="btn btn-primary w-100 setBtn">Set</button> | ||
| <button class="btn btn-primary w-100 setBtn" itemprop="target">Set</button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="d-flex justify-content-center"> | ||
| <div class="col-sm-7 col-xl-5 mb-2"> | ||
| <div class="input-group"> | ||
| <input class="design form-control"> | ||
| <input class="design form-control" itemprop="description"> | ||
| <div class="input-group-append"> | ||
| <span class="input-group-text me-2 copy"> | ||
| <img class="copy-btn" src="assets/copy.png" alt="Copy to clipboard">Copy | ||
|
|
@@ -87,27 +129,24 @@ <h4 class="me-1">Pick width:</h4> | |
| </div> | ||
| <div class="d-flex justify-content-center"> | ||
| <small class="form-text text-center text-muted ms-1">This is your design, an array (a series of | ||
| numbers), to edit | ||
| some else's designs, paste his array here</small> | ||
| numbers), to edit someone else's designs, paste their array here</small> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="d-flex justify-content-center"> | ||
| <button class="user-design btn btn-success ms-2">Use design</button> | ||
| <button class="user-design btn btn-success ms-2" itemprop="target">Use design</button> | ||
| </div> | ||
|
|
||
| <a href="https://discord.gg/ZXMEkzfZXx" target="_blank"> | ||
| <p class="text-center">We have a Discord server <img class="discord" src="assets/discord.png" | ||
| alt="Discord server link"></p> | ||
| <a href="https://discord.gg/ZXMEkzfZXx" target="_blank" itemprop="sameAs"> | ||
| <p class="text-center">We have a Discord server <img class="discord" src="assets/discord.png" alt="Discord server link"></p> | ||
| </a> | ||
|
|
||
| <a href="https://github.com/vbprodev/Canvascript" target="_blank"> | ||
| <p class="text-center">We are open source! <img class="github" src="assets/github.png" alt="Github repo link"> | ||
| </p> | ||
| <a href="https://github.com/vbprodev/Canvascript" target="_blank" itemprop="sameAs"> | ||
| <p class="text-center">We are open source! <img class="github" src="assets/github.png" alt="Github repo link"></p> | ||
| </a> | ||
|
|
||
| <script src="script.js" defer></script> | ||
| </body> | ||
|
|
||
| </html> | ||
| </html> | ||