157 lines
6.9 KiB
HTML
157 lines
6.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
|
<!-- libraries -->
|
|
<link type="text/css" rel="stylesheet" href="./lib/tachyons-4.9.1.min.css" />
|
|
<link type="text/css" rel="stylesheet" href="./lib/colors-2.2.0.min.css" />
|
|
<link type="text/css" rel="stylesheet" href="./lib/loading-animation.css" />
|
|
<script type="text/javascript" src="./lib/jquery-3.2.1.min.js"></script>
|
|
<script type="text/javascript" src="./lib/paper-full-v0.11.5.min.js"></script>
|
|
<script type="text/javascript" src="./lib/Tone-reserved.min.js"></script>
|
|
<!-- <script type="text/javascript" src="./lib/p5.min-v0.6.1.js"></script> -->
|
|
<!-- <script type="text/javascript" src="./lib/p5.sound.min-v0.3.7.js"></script> -->
|
|
<script type="text/javascript" src="./lib/socket.io-v2.1.1.slim.js"></script>
|
|
<!-- <script type="text/javascript" src="./lib/hammer-v2.0.8.min.js"></script> -->
|
|
<!-- <script type="text/javascript" src="./lib/lodash-full-v4.17.10.min.js"></script> -->
|
|
<script type="text/javascript" src="./lib/util.js"></script>
|
|
<!-- code -->
|
|
<script type="text/paperscript" src="./index.js" canvas="screen"></script>
|
|
<style>
|
|
html,
|
|
body {
|
|
/* height: 100%; */
|
|
}
|
|
|
|
/* Scale canvas with resize attribute to full size */
|
|
canvas[resize] {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
#wrapper {
|
|
height: 57vh;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="pa3">
|
|
|
|
<div id="wrapper" class="w-100 center">
|
|
<canvas id="screen" resize></canvas>
|
|
</div>
|
|
|
|
<div>
|
|
<p>
|
|
<!-- ####### YAY, I AM THE SOURCE EDITOR! #########-->
|
|
<h1 style="color: #5e9ca0;">You can edit <span style="color: #2b2301;">this demo</span> text!</h1>
|
|
<h2 style="color: #2e6c80;">How to use the editor:</h2>
|
|
<p>Paste your documents in the visual editor on the left or your HTML code in the source editor in the right. <br />Edit any of the two areas and see the other changing in real time. </p>
|
|
<p>Click the <span style="background-color: #2b2301; color: #fff; display: inline-block; padding: 3px 10px; font-weight: bold; border-radius: 5px;">Clean</span> button to clean your source code.</p>
|
|
<h2 style="color: #2e6c80;">Some useful features:</h2>
|
|
<ol style="list-style: none; font-size: 14px; line-height: 32px; font-weight: bold;">
|
|
<li style="clear: both;"><img style="float: left;" src="https://html-online.com/img/01-interactive-connection.png" alt="interactive connection" width="45" /> Interactive source editor</li>
|
|
<li style="clear: both;"><img style="float: left;" src="https://html-online.com/img/02-html-clean.png" alt="html cleaner" width="45" /> HTML Cleaning</li>
|
|
<li style="clear: both;"><img style="float: left;" src="https://html-online.com/img/03-docs-to-html.png" alt="Word to html" width="45" /> Word to HTML conversion</li>
|
|
<li style="clear: both;"><img style="float: left;" src="https://html-online.com/img/04-replace.png" alt="replace text" width="45" /> Find and Replace</li>
|
|
<li style="clear: both;"><img style="float: left;" src="https://html-online.com/img/05-gibberish.png" alt="gibberish" width="45" /> Lorem-Ipsum generator</li>
|
|
<li style="clear: both;"><img style="float: left;" src="https://html-online.com/img/6-table-div-html.png" alt="html table div" width="45" /> Table to DIV conversion</li>
|
|
</ol>
|
|
<p> </p>
|
|
<h2 style="color: #2e6c80;">Cleaning options:</h2>
|
|
<table class="editorDemoTable">
|
|
<thead>
|
|
<tr>
|
|
<td>Name of the feature</td>
|
|
<td>Example</td>
|
|
<td>Default</td>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Remove tag attributes</td>
|
|
<td><img style="margin: 1px 15px;" src="images/smiley.png" alt="laughing" width="40" height="16" /> (except <strong>img</strong>-<em>src</em> and <strong>a</strong>-<em>href</em>)</td>
|
|
<td> </td>
|
|
</tr>
|
|
<tr>
|
|
<td>Remove inline styles</td>
|
|
<td><span style="color: green; font-size: 13px;">You <strong style="color: blue; text-decoration: underline;">should never</strong> use inline styles!</span></td>
|
|
<td><strong style="font-size: 17px; color: #2b2301;">x</strong></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Remove classes and IDs</td>
|
|
<td><span id="demoId">Use classes to <strong class="demoClass">style everything</strong>.</span></td>
|
|
<td><strong style="font-size: 17px; color: #2b2301;">x</strong></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Remove all tags</td>
|
|
<td>This leaves <strong style="color: blue;">only the plain</strong> <em>text</em>. <img style="margin: 1px;" src="images/smiley.png" alt="laughing" width="16" height="16" /></td>
|
|
<td> </td>
|
|
</tr>
|
|
<tr>
|
|
<td>Remove successive &nbsp;s</td>
|
|
<td>Never use non-breaking spaces to set margins.</td>
|
|
<td><strong style="font-size: 17px; color: #2b2301;">x</strong></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Remove empty tags</td>
|
|
<td>Empty tags should go!</td>
|
|
<td> </td>
|
|
</tr>
|
|
<tr>
|
|
<td>Remove tags with one &nbsp;</td>
|
|
<td>This makes no sense!</td>
|
|
<td><strong style="font-size: 17px; color: #2b2301;">x</strong></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Remove span tags</td>
|
|
<td>Span tags with <span style="color: green; font-size: 13px;">all styles</span></td>
|
|
<td><strong style="font-size: 17px; color: #2b2301;">x</strong></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Remove images</td>
|
|
<td>I am an image: <img src="images/smiley.png" alt="laughing" /></td>
|
|
<td> </td>
|
|
</tr>
|
|
<tr>
|
|
<td>Remove links</td>
|
|
<td><a href="https://html-online.com">This is</a> a link.</td>
|
|
<td> </td>
|
|
</tr>
|
|
<tr>
|
|
<td>Remove tables</td>
|
|
<td>Takes everything out of the table.</td>
|
|
<td> </td>
|
|
</tr>
|
|
<tr>
|
|
<td>Replace table tags with structured divs</td>
|
|
<td>This text is inside a table.</td>
|
|
<td> </td>
|
|
</tr>
|
|
<tr>
|
|
<td>Remove comments</td>
|
|
<td>This is only visible in the source editor <!-- HELLO! --></td>
|
|
<td><strong style="font-size: 17px; color: #2b2301;">x</strong></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Encode special characters</td>
|
|
<td><span style="color: red; font-size: 17px;">♥</span> <strong style="font-size: 20px;">☺ ★</strong> ><</td>
|
|
<td><strong style="font-size: 17px; color: #2b2301;">x</strong></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Set new lines and text indents</td>
|
|
<td>Organize the tags in a nice tree view.</td>
|
|
<td> </td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<p><strong> </strong></p>
|
|
<p><strong>Save this link into your bookmarks and share it with your friends. It is all FREE! </strong><br /><strong>Enjoy!</strong></p>
|
|
<p><strong> </strong></p> </p>
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|