codenothing/CSSCompressor

View on GitHub
demo/index.html

Summary

Maintainability
Test Coverage
<!DOCTYPE html>
<html>
<head>
    <title>CSS Compressor</title>
    <link rel='stylesheet' href='css/home.css' />
    <link rel='stylesheet' href='css/rainbow-github.css' />
    <script type='text/javascript' src='js/CSSCompressor.js'></script>
    <script type='text/javascript' src='js/rules.js'></script>
    <script type='text/javascript' src='js/jquery.js'></script>
    <script type='text/javascript' src='js/rainbow.min.js'></script>
    <script type='text/javascript' src='js/textarea.js'></script>
    <script type='text/javascript' src='js/home.js'></script>
</head>
<body>
    <header>
        <h1>CSS Compressor</h1>
        <a href="https://github.com/codenothing/CSSCompressor"><img style="position: absolute; top: 0; right: 0; border: 0; height: 105px;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
    </header>
    <div class='content-wrapper'>
        <section class='options'>
            <div class='options-header'>
                <select name='modes'></select>
                <span class='mode-view'>[View]</span>
                <div class='format'>
                    Format:
                    <select name='format'></select>
                </div>
            </div>
            <ul></ul>
        </section>
        <section class='results'>
            <div class='separator'></div>
            <button class='run'>Run</button>
            <div class='results-section results-section-input'>
                <h4>Input CSS: <input type='file' name='files' multiple /></h4>
                <textarea class='input' placeholder='Input CSS Here...'></textarea>
            </div>
            <div class='results-section results-section-result'>
                <h4 class='result'>Result:</h4>
                <div class='stats-tab'>Savings: 24.6K (23%)</div>
                <div class='stats-results'><table></table><div class='stats-time'>10ms</div></div>
                <textarea class='output hidden' placeholder='Compression Result Here...'></textarea>
            </div>
            <div class='results-section results-section-logs'>
                <ul class='logs'></ul>
            </div>
        </section>
    </div>

    <div class='widget-mode hide'>
        <div class='widget-mode-content'>
            <h2>Current Settings</h2>
            <div class='close-button'>Close [X]</div>
            <textarea></textarea>
        </div>
    </div>

    <div class='widget-rules hide'>
        <div class='widget-rules-content'>
            <div class='close-button'>Close [X]</div>
            <div class='widget-rules-doc'></div>
        </div>
    </div>
</body>
</html>