Download raw (5.4 KB)

<form autocomplete="off">
<div id="col1">

    <div id="menu">
        <h2><span>Modulator</span></h2>
        <div class="box-content">
            <fieldset>
                <legend class="first">
                    <div class="clearfix">
                        <label>Font</label>
                        <select id="param-fontface">
                            {{#fontfaces}}
                            <option value="{{name}}"{{#active}} selected="selected"{{/active}}>{{name}}</option>
                            {{/fontfaces}}
                        </select>
                    </div>
                </legend>
                <div class="clearfix inputblock">
                    <label>anatomy</label>
                    <div class="static-value">
                        <a href="#" class="toggle-info-panel">on</a>
                        <a href="#" class="toggle-info-panel active">off</a>
                    </div>
                </div>
                <div class="clearfix inputblock">
                    <label>mode</label>
                    <div class="static-value">
                        <a href="#" class="parameter-panel-mode-toggle sliders active">dummy</a>
                        <a href="#" class="parameter-panel-mode-toggle adjusters">nerd</a>
                    </div>
                </div>
                <div class="clearfix inputblock">
                    <label>setting</label>
                    <div class="static-value">
                        <a href="#" class="action" id="action-reset-values">reset</a>
                        <a href="#" class="action" id="action-randomize-values">flop it!</a>
                    </div>
                </div>
                <div class="clearfix inputblock">
                    <label>share</label>
                    <div class="static-value" id="action-share-url">
                        <a href="#" data-type="twitter"><i class="icon-twitter"></i></a>
                        <a href="#" data-type="facebook"><i class="icon-facebook"></i></a>
                        <a href="#" data-type="email"><i class="icon-envelope"></i></a>
<object width="14" height="20" id="clippy" class="clippy" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" title="copy to clipboard">
                    <param value="/flash/clippy.swf" name="movie">
                    <param value="always" name="allowScriptAccess">
                    <param value="high" name="quality">
                    <param value="noscale" name="scale">
                    <param value="text=asdfasdf" name="FlashVars">
                    <param value="#FFFFFF" name="bgcolor">
                    <param value="opaque" name="wmode">
                    <embed width="14" height="20" wmode="opaque" bgcolor="#FFFFFF" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allowscriptaccess="always" quality="high" name="clippy" src="/flash/clippy.swf">
                </object>
                    </div>
                </div>
                <div class="clearfix inputblock"> <label>download</label>
                    <div class="static-value">
                        <a href="#" class="export-font" data-type="otf">open type font</a>
                        <a href="#" class="export-font" data-type="web">webfont</a>
                    </div>
                </div>
            </fieldset>
        </div>
    </div>

    <div id="parameter-panel">
        {{> parameter_panel}}
    </div>

</div>

<div id="col2">

    <div id="info-panel">
        <img src="/img/typoglossary.png" />
    </div>

    <div id="preview-panel">
        <div id="preview-single" class="box active">
            <h2><span>Glyph</span></h2>
            <div class="preview-loading-text">server action! updating glyph...</div>

            <div class="box-content">
                <div class="preview-loading"></div>
                <img src="/img/blank.png" class="preview-image" />
                <img src="/img/blank.png" class="preview-image" style="display: none;" />
                <a href="#" class="char-chooser left">&lt;</a>
                <div class="char-chooser">
                    {{> char_chooser}}
                </div>
                <a href="#" class="char-chooser right">&gt;</a>
            </div>
        </div>
        <div id="preview-chart" class="box">
            <h2><span>Chart</span></h2>
            <div class="preview-loading-text">server action! updating chart...</div>

            <div class="box-content">
                <div class="preview-loading"></div>
                <img src="/img/blank.png" class="preview-image" />
                <img src="/img/blank.png" class="preview-image" style="display: none;" />
            </div>
        </div>
        <div id="preview-typewriter" class="box box-doublewidth">
            <h2><span>Typewriter</span></h2>
            <div class="preview-loading-text">server action! updating text...</div>

            <div class="box-content">
                <div class="preview-loading"></div>
                <textarea id="param-text">Font design is in fact lots of fun, especially when you make mistakes.</textarea>
                <a href="#" class="toggle-mode" title="enter edit mode">&nbsp;</a>
                <img src="/img/blank.png" class="preview-image" />
                <img src="/img/blank.png" class="preview-image" style="display: none;" />
            </div>
        </div>
    </div>
</div>
</form>