Permalink
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
413 lines (410 sloc) 18 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="fonts/material/iconfont/material-icons.css">
<link rel="stylesheet" href="css/retrotxt.css">
<link rel="stylesheet" href="css/options.css">
<link rel="stylesheet" href="css/text_colors.css">
<title>Options</title>
</head>
<body>
<div id="options-container">
<header>
<pre id="sample-dos-text">RetroTxt ▄█╔═╝▒▒<span id="sample-dos-ctrls">♪→⌂</span><span id="sample-cursor">_</span></pre>
<div id="status">&nbsp;</div>
<div id="error">Sorry, an error has occurred, please reload RetroTxt. For more information
<em>right-click</em> on this Options form and select
<strong>Inspect</strong> to view its
<strong>Console</strong> log</div>
<hr>
</header>
<nav class="tab">
<button class="tablinks" id="btnTab1">Fonts</button>
<button class="tablinks" id="btnTab2">Display</button>
<button class="tablinks" id="btnTab3">Config</button>
<button class="tablinks" id="btnTab4">About</button>
</nav>
<main>
<hr>
<section class="tabcontent" id="tab1">
<form name="fonts" class="flexed" id="font-form">
<div class="flexed-cols tab-pane-left">
<label>IBM PC</label>
<br>
<label for="rsfiso9">
<input type="radio" name="font" value="iso9" id="rsfiso9">
<strong>ISO 9</strong>px</label>
<label for="rsfiso8" title="Is a recommended font for viewing text art">
<input type="radio" name="font" value="iso8" id="rsfiso8">
<strong>8</strong>px
<i class="material-icons material-radio">color_lens</i>
</label>
<br>
<label for="rsfps24">
<input type="radio" name="font" value="ps24" id="rsfps24">
<strong>PS/2</strong> thin font 4</label>
<br>
<label for="rsf9">
<input type="radio" name="font" value="vga9" id="rsf9">
<strong>VGA 9</strong>px</label>
<label for="rwf6">
<input type="radio" name="font" value="vga9-2x" id="rwf6">
<i class="material-icons material-radio">swap_horiz</i>
</label>
<br>
<label for="rsf8" title="Is a recommended font for viewing text art">
<input type="radio" name="font" value="vga8" id="rsf8">
<strong>VGA 8</strong>px
<i class="material-icons material-radio">color_lens</i>
</label>
<label for="rwf5">
<input type="radio" name="font" value="vga8-2x" id="rwf5">
<i class="material-icons material-radio">swap_horiz</i>
</label>
<br>
<label for="rsf6">
<input type="radio" name="font" value="ega9" id="rsf6">
<strong>EGA 9</strong>px</label>
<label for="rwf4">
<input type="radio" name="font" value="ega9-2x" id="rwf4">
<i class="material-icons material-radio">swap_horiz</i>
</label>
<br>
<label for="rsf5">
<input type="radio" name="font" value="ega8" id="rsf5">
<strong>EGA 8</strong>px</label>
<label for="rwf3">
<input type="radio" name="font" value="ega8-2x" id="rwf3">
<i class="material-icons material-radio">swap_horiz</i>
</label>
<br>
<label for="rsf3">
<input type="radio" name="font" value="cga" id="rsf3">
<strong>CGA</strong>
</label>
<label for="rnf2">
<input type="radio" name="font" value="cga-2y" id="rnf2">
<i class="material-icons material-radio">swap_vert</i>
</label>
<br>
<label for="rsf4">
<input type="radio" name="font" value="cgathin" id="rsf4">
<strong>CGA</strong> Alternative</label>
<label for="rnf3">
<input type="radio" name="font" value="cgathin-2y" id="rnf3">
<i class="material-icons material-radio">swap_vert</i>
</label>
<br>
<label for="rsf7">
<input type="radio" name="font" value="mda" id="rsf7">
<strong>MDA</strong>
</label>
<br>
<label for="rsf3x">
<input type="radio" name="font" value="bios" id="rsf3x">
<strong>BIOS</strong>
</label>
<label for="rwf2">
<input type="radio" name="font" value="bios-2x" id="rwf2">
<i class="material-icons material-radio">swap_horiz</i>
</label>
<label for="rnf1">
<input type="radio" name="font" value="bios-2y" id="rnf1">
<i class="material-icons material-radio">swap_vert</i>
</label>
<br>
<br>
<label>MS-DOS</label>
<br>
<label for="rsf1">
<input type="radio" name="font" value="pc1512" id="rsf1">
<strong>Amstrad</strong> PC1512</label>
<label for="rnf6">
<input type="radio" name="font" value="pc1512-2y" id="rnf6">
<i class="material-icons material-radio">swap_vert</i>
</label>
<br>
<label for="rsf10">
<input type="radio" name="font" value="tandynewtv" id="rsf10">
<strong>Tandy 1000 CM-5</strong>
</label>
<label for="rnf4">
<input type="radio" name="font" value="tandynewtv-2y" id="rnf4">
<i class="material-icons material-radio">swap_vert</i>
</label>
<br>
<label for="rsf11">
<input type="radio" name="font" value="tandynew225" id="rsf11">
<strong>Tandy 1000 CM-11</strong>
</label>
<label for="rnf5">
<input type="radio" name="font" value="tandynew225-2y" id="rnf5">
<i class="material-icons material-radio">swap_vert</i>
</label>
<br>
<label for="rsf12">
<input type="radio" name="font" value="vgalcd" id="rsf12">
<strong>VGA LCD</strong> laptop</label>
</div>
<div class="flexed-cols tab-pane-right">
<label>Amiga &amp; Commodore</label>
<br>
<label for="rsft2">
<input type="radio" name="font" value="topazA1200" id="rsft2">
<strong>Kickstart 2</strong>
</label>
<label for="rsft2p" title="Is a recommended font for viewing text art">
<input type="radio" name="font" value="topazplusA1200" id="rsft2p"> Plus
<i class="material-icons material-radio">color_lens</i>
</label>
<br>
<label for="rsf13">
<input type="radio" name="font" value="topazA500" id="rsf13">
<strong>Kickstart 1</strong>
</label>
<label for="rsf13a" title="Is a recommended font for viewing text art">
<input type="radio" name="font" value="topazplusA500" id="rsf13a"> Plus
<i class="material-icons material-radio">color_lens</i>
</label>
<br>
<label for="rsftmk">
<input type="radio" name="font" value="microknight" id="rsftmk">
<strong>MicroKnight</strong>
</label>
<label for="rsftmkp" title="Is a recommended font for viewing text art">
<input type="radio" name="font" value="microknightplus" id="rsftmkp"> Plus
<i class="material-icons material-radio">color_lens</i>
</label>
<br>
<label for="rsftpn">
<input type="radio" name="font" value="p0tnoodle" id="rsftpn">
<strong>P0T-NOoDLE</strong>
</label>
<br>
<label for="rsftmOsOul">
<input type="radio" name="font" value="mosoul" id="rsftmOsOul">
<strong>mOsOul</strong>
</label>
<br>
<label for="rsf14">
<input type="radio" name="font" value="c64" id="rsf14">
<strong>PETSCII</strong> (VIC-20, C64...)</label>
<br>
<br>
<label>Apple</label>
<br>
<label for="rsf15">
<input type="radio" name="font" value="appleii" id="rsf15">
<strong>Apple II</strong>
</label>
<br>
<br>
<label>Atari</label>
<br>
<label for="rsf16">
<input type="radio" name="font" value="atarist" id="rsf16">
<strong>TOS</strong> (ST series, 16-bit)</label>
<br>
<label for="rsf8ata">
<input type="radio" name="font" value="atascii" id="rsf8ata">
<strong>ATASCII</strong> (8-bit)</label>
<br>
<br>
<label>Browser</label>
<br>
<label for="rsfmono">
<input type="radio" name="font" value="monospace" id="rsfmono">
<strong>Monospace</strong> fixed-width</label>
<br>
</div>
</form>
</section>
<section class="tabcontent" id="tab2">
<div class="flexed">
<div class="flexed-cols tab-pane-left" id="font-selects">
<div id="font-styles-colors">
<h1>
<i class="material-icons material-h1">format_color_fill</i>
<span class="msg-color">Color</span> pair</h1>
<select id="font-color">
<optgroup label="Systems">
<option value="theme-msdos" id="gray-black-option">MS-DOS</option>
<option value="theme-windows">Windows</option>
<option value="theme-appleii">Apple II</option>
<option value="theme-amiga">Amiga</option>
<option value="theme-atarist">Atari ST</option>
<option value="theme-c64">C-64</option>
</optgroup>
<optgroup label="Dark">
<option value="theme-white-on-black">White</option>
<option value="theme-green-on-black">Green</option>
<option value="theme-amber-on-black">Amber</option>
</optgroup>
<optgroup label="Light">
<option value="theme-gray-on-white" id="gray-white-option">DOS gray</option>
<option value="theme-green-on-white">Green</option>
<option value="theme-amber-on-white">Amber</option>
</optgroup>
</select>
</div>
<div id="font-styles-line-heights">
<h1>
<i class="material-icons material-h1">format_line_spacing</i>Line height</h1>
<select id="line-height">
<optgroup label="Default">
<option value="100%">Normal</option>
</optgroup>
<optgroup label="Increases">
<option value="1.1">+10%</option>
<option value="1.25">+25%</option>
<option value="1.5">+50%</option>
<option value="1.75">+75%</option>
<option value="2">x2</option>
<option value="3">x3</option>
<option value="4">x4</option>
</optgroup>
</select>
</div>
</div>
<div class="flexed-cols tab-pane-right" id="font-styles-effects">
<label>
<input type="checkbox" id="text-font-information">
<i class="material-icons material-check">info_outline</i>Information header</label>
<br>
<label>
<input type="checkbox" id="center-alignment">
<i class="material-icons material-check">format_align_center</i>
<span class="msg-center">Center</span> align text</label>
<br>
<label>
<input type="checkbox" id="background-scanlines">
<i class="material-icons material-check">texture</i>Background scan lines</label>
<br>
<br>
<label title="* Existing browser tabs will require a refresh for this to be applied">
<input type="checkbox" id="ansi-wrap-80c">
<i class="material-icons material-check">format_align_justify</i>ANSI 80 column wrap</label>
<br>
<label title="* Existing browser tabs will require a refresh for this to be applied">
<input type="checkbox" id="ansi-ice-colors">
<i class="material-icons material-check">format_color_fill</i>ANSI iCE colors</label>
<br>
<label title="* Existing browser tabs will require a refresh for this to be applied">
<input type="checkbox" id="dos-ctrl-codes">
<i class="material-icons material-check">format_textdirection_l_to_r</i>DOS control glyphs</label>
</div>
</div>
<br>
<form name="texteffects" id="effects-form">
<label>
<i class="material-icons material-check">font_download</i>Text render</label>
<label for="trclear" title="Suggested for small fonts and line art">
<input type="radio" name="effect" value="normal" id="trclear"> Normal</label>
<label for="trart" title="Suggested for ANSI and ASCII block art">
<input type="radio" name="effect" value="smeared" id="trart"> Smeared</label>
<label for="trds" title="Suggested for large fonts and line art">
<input type="radio" name="effect" value="shadowed" id="trds"> Shadowed</label>
<hr>
</form>
</section>
<section class="tabcontent" id="tab3">
<div id="advanced-options">
<label>
<input type="checkbox" id="run-web-urls">
<i class="material-icons material-check">web</i>Apply RetroTxt to any text files hosted on these websites</label>
<br>
<label>
<textarea id="run-web-urls-permitted" rows="6" disabled></textarea>
</label>
<!--<input type="text" id="run-web-urls-permitted" value="" disabled>-->
<br>
<div id="run-file-urls-div">
<label>
<input type="checkbox" id="run-file-urls">
<i class="material-icons material-check" id="run-file-urls-icon">folder_open</i>Apply RetroTxt to any local text files
<code><a href="file:///c:/" id="run-file-urls-link" target="_blank">file:///</a></code>
</label>
</div>
<div id="run-file-downloads-div">
<label>
<input type="checkbox" id="run-file-downloads">
<i class="material-icons material-check" id="run-file-downloads-icon">file_download</i>Apply RetroTxt to any downloaded text files</label>
</div>
<br>
<div id="updated-notice-div">
<label>
<input type="checkbox" id="updated-notice">
<i class="material-icons material-check" id="updated-notice-icon">system_update_alt</i>RetroTxt updated notices</label>
<br>
<em>Launches the
<strong>Welcome to RetroTxt</strong> tab when RetroTxt is updated to its newest version</em>
</div>
</div>
</section>
<section class="tabcontent" id="tab4">
<div id="technobable">
<span id="manifest">RetroTxt</span>
</div>
<div>
<a href="https://retrotxt.com">retrotxt.com</a>
</div>
<p>ANSI Logo</p>
<ul>
<li title="ANSI logo by Zeus II [Blocktronics] [FUEL]">
<a href="https://twitter.com/Zeus_II">Zeus II</a>
</li>
</ul>
<p>Code</p>
<ul>
<li title="Browser web-extension JavaScript and HTML">
<a href="https://about.me/bengarrett">Ben Garrett</a>
</li>
</ul>
<p>Fonts</p>
<ul>
<li>Apple II
<a href="http://www.kreativekorp.com/software/fonts/apple2.shtml">Kreative Korp</a>
</li>
<li>Atari ATASCII
<a href="http://members.bitstream.net/marksim/atarimac/fonts.html">Mark L. Simonson</a>
</li>
<li>Atari ST
<a href="http://www.dafont.com/atari-st-8x16-system-font.font">divVerent</a>
</li>
<li>Commodore Amiga
<a href="https://github.com/rewtnull/amigafonts">tRUEsCHOOL</a>
</li>
<li>Commodore PETSCII
<a href="http://style64.org/c64-truetype">Style</a>
</li>
<li>IBM PC & MS-DOS
<a href="http://int10h.org/oldschool-pc-fonts/">Viler</a>
</li>
<li>Mona Shift JIS
<a href="http://monafont.sourceforge.net/index-e.html">public domain</a>
</li>
</ul>
<p>Icons</p>
<ul>
<li>Material Design
<a href="http://google.github.io/material-design-icons/">Google</a>
</li>
</ul>
</section>
</main>
<footer>
<hr>
<div id="option-buttons">
<!-- there needs to be no spaces between <a> and icons -->
<a href="https://github.com/bengarrett/RetroTxt/blob/master/README.md" class="help-button" target="_blank" title="Help and readme"><i class="material-icons">help_outline</i></a>
<a href="welcome.html" class="link-button" target="_blank" title="Welcome"><i class="material-icons">info_outline</i></a>
<a href="https://github.com/bengarrett/RetroTxt" class="link-button" target="_blank" title="Get the source code hosted on GitHub"><i class="material-icons">code</i></a>
<a href="test/index.html" class="link-button" id="unittest" target="_blank" title="Unit tests (this will reset all changed Options!)"><i class="material-icons">bug_report</i></a>
</div>
</footer>
</div>
<script src="functions.js"></script>
<script src="options.js"></script>
</body>
</html>