Skip to content

Commit

Permalink
Add footer
Browse files Browse the repository at this point in the history
  • Loading branch information
@Axorax
Axorax committed Dec 8, 2024
1 parent de46ecc commit ff87bcd
Show file tree
Hide file tree
Showing 2 changed files with 157 additions and 87 deletions.
114 changes: 49 additions & 65 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,14 @@
<meta name="keywords" content="draw, canvas, javascript, mouse, pointer, no-code, HTML, Canvascript" />
<meta name="author" content="Viraj Bijpuria" />
<meta property="og:title" content="CanvaScript - Draw on the HTML canvas without writing code" />
<meta property="og:description"
content="Draw with your pointer on the HTML canvas, then get the code to render it." />
<meta property="og:description" content="Draw with your pointer on the HTML canvas, then get the code to render it." />
<meta property="og:image" content="https://vbprodev.github.io/Canvascript/CanvaScript.png" />
<meta property="og:url" content="https://vbprodev.github.io/Canvascript/" />
<meta property="og:type" content="website" />
<meta name="google-site-verification" content="2nZEIGfRoHGC-BS3L-BIv6bkhVUZDpoGNgUK9Z4Pub8" />
<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" />
<link rel="canonical" href="https://github.com/VBproDev/Canvascript">
<link rel="canonical" href="https://github.com/VBproDev/Canvascript" />
<link href="./stylesheet.css" rel="stylesheet" />
<title>CanvaScript - Draw on the HTML canvas without writing code</title>
<script type="application/ld+json">
Expand Down Expand Up @@ -59,12 +58,11 @@
"https://discord.gg/ZXMEkzfZXx"
]
}
</script>
<script src="./script.js" defer></script>
</script>
<script src="./script.js" defer></script>
</head>

<body>
<!-- Schema.org structured data -->
<div itemscope itemtype="https://schema.org/SoftwareApplication">
<meta itemprop="name" content="Canvascript" />
<meta itemprop="url" content="https://vbprodev.github.io/Canvascript/" />
Expand All @@ -73,90 +71,71 @@
<meta itemprop="applicationCategory" content="DeveloperApplication" />
<meta itemprop="operatingSystem" content="Web" />
<meta itemprop="softwareVersion" content="1.0" />

<div itemprop="author" itemscope itemtype="https://schema.org/Person">
<meta itemprop="name" content="Viraj Bijpuria" />
<meta itemprop="name" content="Viraj Bijpuria" />
</div>

<div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
<meta itemprop="name" content="VBproDev" />
<meta itemprop="url" content="https://github.com/VBproDev" />
<meta itemprop="name" content="VBproDev" />
<meta itemprop="url" content="https://github.com/VBproDev" />
</div>

<meta itemprop="image" content="assets/CanvaScript.png" />

<div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
<meta itemprop="price" content="0" />
<meta itemprop="priceCurrency" content="USD" />
<meta itemprop="category" content="Open Source" />
<meta itemprop="price" content="0" />
<meta itemprop="priceCurrency" content="USD" />
<meta itemprop="category" content="Open Source" />
</div>

<div itemprop="potentialAction" itemscope itemtype="https://schema.org/UseAction">
<meta itemprop="target" content="https://vbprodev.github.io/Canvascript/" />
<meta itemprop="target" content="https://vbprodev.github.io/Canvascript/" />
</div>

<meta itemprop="keywords" content="javascript, performance, html5, canvas-api, no-code, web-game-dev, draw, mouse, pointer" />

<div itemprop="featureList" itemscope itemtype="https://schema.org/ItemList">
<div itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<meta itemprop="name" content="Free-hand drawing on HTML canvas" />
</div>
<div itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<meta itemprop="name" content="Automatic code generation" />
</div>
<div itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<meta itemprop="name" content="Curved line support" />
</div>
<div itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<meta itemprop="name" content="Design import/export" />
</div>
<div itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<meta itemprop="name" content="Preview modes" />
</div>
<div itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<meta itemprop="name" content="Free-hand drawing on HTML canvas" />
</div>
<div itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<meta itemprop="name" content="Automatic code generation" />
</div>
<div itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<meta itemprop="name" content="Curved line support" />
</div>
<div itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<meta itemprop="name" content="Design import/export" />
</div>
<div itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<meta itemprop="name" content="Preview modes" />
</div>
</div>

<div itemprop="mainEntityOfPage" itemscope itemtype="https://schema.org/WebPage">
<meta itemprop="@id" content="https://vbprodev.github.io/Canvascript/" />
<meta itemprop="@id" content="https://vbprodev.github.io/Canvascript/" />
</div>

<meta itemprop="sameAs" content="https://github.com/VBproDev/Canvascript" />
<meta itemprop="sameAs" content="https://discord.gg/ZXMEkzfZXx" />

<div itemprop="applicationSuite" itemscope itemtype="https://schema.org/CreativeWorkSeries">
<meta itemprop="name" content="Web Game Development Tools" />
<meta itemprop="name" content="Web Game Development Tools" />
</div>

<meta itemprop="requirements" content="Modern web browser with HTML5 Canvas support" />
<meta itemprop="installUrl" content="https://vbprodev.github.io/Canvascript/" />
</div>

<!-- Existing content -->
<div class="d-flex justify-content-center">
<div
class="popup_saved d-flex align-items-center bg-success text-white rounded-pill py-2 px-4 position-fixed top-0 mt-3 transition-opacity">
<div class="popup_saved d-flex align-items-center bg-success text-white rounded-pill py-2 px-4 position-fixed top-0 mt-3 transition-opacity">
<span>Design has been saved</span>
<button class="btn-close btn-close-white ms-2" aria-label="Close"></button>
</div>
</div>

<div class="d-flex justify-content-center p-2">
<h4 class="me-1">Line Color:</h4>
<input class="color me-3" type="color" />

<h4 class="me-1">Line width:</h4>
<input class="stroke-width" placeholder="1" min="1" type="number" id="stroke-width" />
</div>

<div class="d-flex justify-content-center">
<div class="form-check form-switch">
<input class="form-check-input isFreehand" type="checkbox" id="freehandSwitch"> Draw freehand?
</div>
</div>

<div class="d-flex justify-content-center">
<canvas class="canvas"></canvas>
</div>

<div class="actions">
<div>
<button class="undo">Undo</button>
Expand All @@ -167,9 +146,7 @@ <h4 class="me-1">Line width:</h4>
<button class="generate primary">Generate code</button>
</div>
</div>

<code class="space"></code>

<div class="container curve-input-container" id="0">
<div>
<div class="title">Line curvature</div>
Expand All @@ -185,13 +162,11 @@ <h4 class="me-1">Line width:</h4>
</div>
</div>
</div>

<div class="code">
<pre>
<code class="space"></code>
</pre>
<code class="space"></code>
</pre>
</div>

<div class="container">
<div>
<div class="title">Project resolution (in pixels)</div>
Expand All @@ -202,7 +177,6 @@ <h4 class="me-1">Line width:</h4>
</div>
</div>
</div>

<div class="design_code">
<div>
<div>
Expand All @@ -214,16 +188,26 @@ <h4 class="me-1">Line width:</h4>
</div>
</div>
</div>

<div class="use_design">
<button class="user-design success">Use design</button>
</div>

<footer>
<a href="https://discord.gg/ZXMEkzfZXx" target="_blank">Join us on Discord</a>
&nbsp; - &nbsp;
<a href="https://github.com/vbprodev/Canvascript" target="_blank">Star us on GitHub</a>
</footer>
<div class="footer_wrapper">
<footer class="footer">
<div class="waves">
<div class="wave" id="wave1"></div>
<div class="wave" id="wave2"></div>
<div class="wave" id="wave3"></div>
<div class="wave" id="wave4"></div>
</div>
<ul class="menu">
<li><a href="https://discord.gg/ZXMEkzfZXx">Discord</a></li>
<li><a href="https://github.com/vbprodev/Canvascript">GitHub</a></li>
<li><a href="https://github.com/VBproDev/Canvascript/graphs/contributors">Team</a></li>
<li><a href="https://github.com/VBproDev/Canvascript/issues">Support</a></li>
</ul>
<p>&copy;2024 Canvascript</p>
</footer>
</div>
</body>

</html>
</html>
130 changes: 108 additions & 22 deletions stylesheet.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,27 +180,6 @@ button.success:focus {
background-color: #218838;
}

footer {
display: flex;
justify-content: center;
text-align: center;
align-items: center;
padding: 0.5rem;
background: #1081f9;
margin: 3rem 1rem 1rem 1rem;
color: #fff;
border-radius: 1rem;
}

footer a {
color: #fff;
transition: 300ms ease;
}

footer a:hover {
text-decoration: underline !important;
}

.code {
display: flex;
justify-content: center;
Expand Down Expand Up @@ -254,4 +233,111 @@ footer a:hover {

.copy {
width: 10rem;
}
}

.footer_wrapper {
margin-top: 15rem;
display: flex;
justify-content: flex-end;
align-items: flex-end;
}

.footer {
position: relative;
width: 100%;
background: #3586ff;
min-height: 100px;
padding: 20px 50px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

.menu {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin: 10px 0;
flex-wrap: wrap;
list-style: none;

a {
font-size: 1.2rem;
color: #fff;
margin: 0 10px;
display: inline-block;
transition: 0.5s;
text-decoration: none;
opacity: 0.75;
font-weight: 300;

&:hover {
opacity: 1;
}
}
}

.footer p {
color: #fff;
margin: 15px 0 10px 0;
font-size: 1rem;
font-weight: 300;
}

.wave {
position: absolute;
top: -100px;
left: 0;
width: 100%;
height: 100px;
background: url("https://i.ibb.co/wQZVxxk/wave.png");
background-size: 1000px 100px;
}

.wave#wave1 {
z-index: 1000;
opacity: 1;
bottom: 0;
animation: animateWaves 4s linear infinite;
}

.wave#wave2 {
z-index: 999;
opacity: 0.5;
bottom: 10px;
animation: animate 4s linear infinite !important;
}

.wave#wave3 {
z-index: 1000;
opacity: 0.2;
bottom: 15px;
animation: animateWaves 3s linear infinite;
}

.wave#wave4 {
z-index: 999;
opacity: 0.7;
bottom: 20px;
animation: animate 3s linear infinite;
}

@keyframes animateWaves {
0% {
background-position-x: 1000px;
}
100% {
background-positon-x: 0px;
}
}

@keyframes animate {
0% {
background-position-x: -1000px;
}
100% {
background-positon-x: 0px;
}
}

0 comments on commit ff87bcd

Please sign in to comment.