Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
89 lines (86 sloc) 3.42 KB
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>C-64 charset logo generator</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="styles/logogen.css">
<h1>C-64 charset logo generator</h1>
<div id="nav">
<h2><span>1</span> Choose your font:</h2>
<img class="current"
alt="3 colour font by Orc/Blackmail"
<div id="container">
<h2><span>2</span><label>Add your logo text: <input id="text" pattern="[a-z|\.|,|!|\s]*" value="excellent"></label></h2>
<div class="inputs">
<!-- <label>Background: <input type="color" id="colour" value="#000000"></label>
<label> Opacity: <input type="range" value="1" min="0" max="1" step="0.01" id="opacity"></label> -->
<label for="kerning">Space between chars: <input id="kerning" type="number" value="2"></label>
<label for="spacing">Space between words: <input id="spacing" type="number" value="15"></label>
<button id="zoombutton">2x</button>
<div id="save"></div>
<p class="instructions">Click on a colour in the logo and select from the palette below to change it. Double click or click the ✔ to finish changing colours.</p>
<div id="swab"></div>
<canvas id="zoom"></canvas>
<canvas id="main"></canvas>
<canvas id="display"></canvas>
<ul class="palette inactive" id="c64colours">
<li class="transparent row" title="transparent" data-col="000000"></li>
<li class="black" title="black" data-col="000000"></li>
<li class="brown" title="brown" data-col="433900"></li>
<li class="red" data-col="68372B"></li>
<li class="orange" data-col="6F4F25"></li>
<li class="grey" data-col="6C6C6C"></li>
<li class="lightred" data-col="9A6759"></li>
<li class="lightgrey" data-col="959595"></li>
<li class="yellow" data-col="B8C76F"></li>
<li class="white" data-col="FFFFFF"></li>
<li class="transparent row" title="transparent" data-col="000000"></li>
<li class="black" data-col="000000"></li>
<li class="blue" data-col="352879"></li>
<li class="darkgrey" data-col="444444"></li>
<li class="purple" data-col="6F3D86"></li>
<li class="lightblue" data-col="6C5EB5"></li>
<li class="green" data-col="588D43"></li>
<li class="cyan" data-col="70A4B2"></li>
<li class="lightgreen" data-col="9AD284"></li>
<li class="white" data-col="FFFFFF"></li>
<li><button id="colourbutton" title="done with colouring">✔</button></li>
<a href="#info">Info and Credits</a>
<aside id="info">
<h2>C64 Charset Logo Generator</h2>
<li>Idea and code by Chris 'Cupid' Heilmann (<a href="">@codepo8</a>) - ported from the original tool written in PHP using gd</li>
<li>Charset ripping and credit research by Dejan 'Nucleus' Petronijevic</li>
<li>Charset cleanup and transparency adding by Daniel 'Deekay' Kottmair</li>
<p>This is open source and you can <a href="">download and contribute on GitHub</a>.</p>
<p><a href="#top">Back to editor</a></p>
<img src="img/canvas.png" alt="" id="fonts">
<script src="js/fonts.js"></script>
<script src="js/logogen.js"></script>