gh-pages

分支 (1)

管理

管理

gh-pages

shadow4android
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="description" content="Create ninepatch shadow for Android">
    <meta name="keywords" content="android,9patch,ninepatch,convert,drawable,shadow,box,shadow4android">
    <meta name="author" content="Juraj Novák">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Android Shadow Generator</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap-slider.min.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
    <link href="css/bootstrap-colorpicker.min.css" rel="stylesheet">
    <link rel="image_src" href="img/icon.png"/>
    <link rel="icon" type="image/png" href="img/icon.png"/>
</head>
<body>

<img src="img/icon.png" style="display: none;"/>

<div id="main-container" class="container">
    <div id="header">
        <img src="img/logo.svg" class="img-responsive pull-left" style="margin-right: 16px;"/>
        <h3>Android 9-patch shadow generator</h3>
        <p>fully customizable shadows</p>
    </div>
    <div class="row" id="mainrow">

        <div class="col-md-8" id="canvascol">
            <canvas width="1" height="1" id="shadow_image">
                Sorry, you have an outdated browser!
            </canvas>
        </div>

        <div class="col-md-4">
            <div class="panel">

                <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                    <div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="headingThree"
                             data-toggle="collapse" data-parent="#accordion" href="#collapseThree"
                             aria-expanded="true" aria-controls="collapseThree">
                            <h4 class="panel-title">
                                Basic
                            </h4>
                        </div>
                        <div id="collapseThree" class="panel-collapse collapse in" role="tabpanel"
                             aria-labelledby="headingThree">
                            <div class="panel-body">

                                <div class="form-group">
                                    <label class="control-label">Round <span
                                            style="font-weight: normal">[<a href="javascript:void(0)"
                                                                            id="round-toggle">advanced</a>]</span></label>

                                    <div class="form-group" id="round-simple">
                                        <input id="round-simple-input" class="form-control" type="number" min="0"
                                               max="999" value="12">
                                    </div>

                                    <div class="form-inline" id="round-advanced" style="display: none">
                                        <div class="input-group" style="width: 100%">
                                            <span class="input-group-addon"><img src="img/tl.png"
                                                                                 title="Top Left"></span>
                                            <input id="shadow-round-tl" class="form-control" type="number" min="-999"
                                                   max="999"
                                                   value="12">

                                            <span class="input-group-addon"><img src="img/tr.png"
                                                                                 title="Top Right"></span>
                                            <input id="shadow-round-tr" class="form-control" type="number" min="-999"
                                                   max="999"
                                                   value="12">
                                        </div>

                                        <div class="input-group" style="width: 100%">
                                            <span class="input-group-addon"><img src="img/bl.png"
                                                                                 title="Bottom Left"></span>
                                            <input id="shadow-round-bl" class="form-control" type="number" min="-999"
                                                   max="999"
                                                   value="12">

                                            <span class="input-group-addon"><img src="img/br.png" title="Bottom Right"></span>
                                            <input id="shadow-round-br" class="form-control" type="number" min="-999"
                                                   max="999"
                                                   value="12">
                                        </div>
                                    </div>
                                </div>


                                <div class="form-group">
                                    <label class="control-label" for="shadow-blur">Shadow blur</label>
                                    <input id="shadow-blur" class="form-control" type="number" min="0" max="999"
                                           value="20">
                                </div>

                                <div class="form-group">
                                    <label class="control-label" for="color-picker-shadow-input">Shadow color</label>

                                    <div class="input-group" id="color-picker-shadow">
                                        <input id="color-picker-shadow-input" type="text" value="#757575"
                                               class="form-control"/>
                                        <span class="input-group-addon"><i></i></span>
                                    </div>
                                </div>


                                <div class="form-group">
                                    <label class="control-label" for="shadow-offset-x">Shadow offset</label>

                                    <div class="form-inline">
                                        <div class="input-group" style="width: 100%">
                                            <span class="input-group-addon">X</span>
                                            <input id="shadow-offset-x" class="form-control" type="number" min="-999"
                                                   max="999"
                                                   value="0">

                                            <span class="input-group-addon">Y</span>
                                            <input id="shadow-offset-y" class="form-control" type="number" min="-999"
                                                   max="999"
                                                   value="0">
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>


                    <div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="headingTwo"
                             data-toggle="collapse" data-parent="#accordion"
                             href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
                            <h4 class="panel-title">
                                Fill &amp; Outline
                            </h4>
                        </div>
                        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel"
                             aria-labelledby="headingTwo">
                            <div class="panel-body">

                                <div class="form-group" id="background-fill-group">
                                    <label class="control-label" for="color-picker-background-fill-input">Background fill
                                        color</label>

                                    <div class="input-group" id="color-picker-background-fill">

                                        <input id="color-picker-background-fill-input" type="text" value="#00000000"
                                               class="form-control" />
                                        <span class="input-group-addon"><i></i></span>
                                    </div>
                                </div>

                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" id="fill-toggle">Enabled
                                    </label>
                                </div>

                                <div class="form-group" id="fill-group">
                                    <label class="control-label" for="color-picker-fill-input" disabled>Fill
                                        color</label>

                                    <div class="input-group" id="color-picker-fill">

                                        <input id="color-picker-fill-input" type="text" value="#ffffff"
                                               class="form-control" disabled/>
                                        <span class="input-group-addon"><i></i></span>
                                    </div>
                                </div>

                                <div class="form-group" id="outline-group">
                                    <label class="control-label" for="color-picker-outline-input"
                                           disabled>Outline</label>

                                    <div class="input-group" id="color-picker-outline">
                                        <input id="color-picker-outline-input" type="text" value="#000000"
                                               class="form-control" disabled/>
                                        <span class="input-group-addon"><i></i></span>
                                    </div>

                                    <div class="form-group input-group" id="outline-width">
                                        <span class="input-group-addon">Width</span>
                                        <input id="outline-width-input" class="form-control" type="number" min="0"
                                               max="999" value="0" disabled>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="headingOne"
                             data-toggle="collapse" data-parent="#accordion"
                             href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            <h4 class="panel-title">
                                Advanced
                            </h4>
                        </div>
                        <div id="collapseOne" class="panel-collapse collapse" role="tabpanel"
                             aria-labelledby="headingOne">
                            <div class="panel-body">
                                <div class="form-group">
                                    <label class="control-label" for="box-width">Box size</label>
                                    <div class="form-inline">
                                        <div class="input-group" style="width: 100%">
                                            <span class="input-group-addon">Width</span>
                                            <input id="box-width" class="form-control" type="number" min="0" max="2000"
                                                   value="0">
                                            <span class="input-group-addon">Height</span>
                                            <input id="box-height" class="form-control" type="number" min="0" max="2000"
                                                   value="0">
                                        </div>
                                    </div>
                                    <p class="small" style="color: gray;margin-top: 8px;">Drag right/bottom/corner to
                                        change minimum size of
                                        ninepatch.</p>
                                </div>
                                <div class="form-group">
                                    <label class="control-label">Padding lines</label>

                                    <div class="form-inline" id="padding-sliders">
                                        <div class="input-group" style="width: 100%;">
                                            <p style="margin-top: 15px;" id="padding-right-slider">
                                                <label for="padding-right" class="control-label">right:</label>
                                                <input style="width: 70%"
                                                       id="padding-right" type="text" data-slider-min="0"
                                                       data-slider-max="100"
                                                       data-slider-step="1" data-slider-value="[0,100]"/>
                                            </p>
                                            <p style="margin-top: 35px;" id="padding-bottom-slider">
                                                <label for="padding-bottom" class="control-label">bottom:</label>
                                                <input style="width: 70%"
                                                       id="padding-bottom" type="text" data-slider-min="0"
                                                       data-slider-max="100"
                                                       data-slider-step="1" data-slider-value="[0,100]"/>
                                            </p>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label">Side clipping</label>
                                    <div class="form-inline">
                                        <label class="checkbox-inline">
                                            <input type="checkbox" id="clip-left">Left
                                        </label>
                                        <label class="checkbox-inline">
                                            <input type="checkbox" id="clip-right">Right
                                        </label>
                                        <label class="checkbox-inline">
                                            <input type="checkbox" id="clip-top">Top
                                        </label>
                                        <label class="checkbox-inline">
                                            <input type="checkbox" id="clip-bottom">Bottom
                                        </label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label" for="box-width">Padding size</label>
                                    <div class="form-inline">
                                        <div class="input-group" style="width: 100%">
                                            <span class="input-group-addon" style="width: 25%">Left</span>
                                            <input id="padding-left-line" class="form-control" type="number" min="0" max="2000"
                                                   value="0">
                                            <span class="input-group-addon" style="width: 25%">Right</span>
                                            <input id="padding-right-line" class="form-control" type="number" min="0" max="2000"
                                                   value="0">
                                        </div>
                                        <div class="input-group" style="width: 100%">
                                            <span class="input-group-addon" style="width: 25%">Top</span>
                                            <input id="padding-top-line" class="form-control" type="number" min="0" max="2000"
                                                   value="0">
                                            <span class="input-group-addon" style="width: 25%">Bottom</span>
                                            <input id="padding-bottom-line" class="form-control" type="number" min="0" max="2000"
                                                   value="0">
                                        </div>
                                    </div>
                                    <p class="small" style="color: gray;margin-top: 8px;">change padding line position to content</p>
                                    <p id="actual-padding" class="small" style="color: gray;margin-top: 8px;">change padding line position to content</p>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="headingFour"
                             data-toggle="collapse" data-parent="#accordion" href="#collapseFour"
                             aria-expanded="true" aria-controls="collapseFour">
                            <h4 class="panel-title">
                                Preview
                            </h4>
                        </div>
                        <div id="collapseFour" class="panel-collapse collapse" role="tabpanel"
                             aria-labelledby="headingThree">
                            <div class="panel-body">

                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" id="show-content">Show content area in preview
                                    </label>
                                </div>

                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" id="hide-patches">Hide ninepatch lines in preview
                                    </label>
                                </div>

                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" id="bg-color-enable" value="silver">Set background color
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <button type="button" class="btn btn-primary btn-block" onclick="exportAsPng(this)">Download</button>
            </div>
        </div>
    </div>
</div>

<div class="container">
    <footer>
        <a href="https://yuraj11.github.io">&copy; 2024 Juraj Novák</a><br>
        <small>| <a href="https://github.com/inloop/shadow4android">Fork me on GitHub</a> |</small>
    </footer>
</div>

<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-slider.min.js"></script>
<script src="js/bootstrap-colorpicker.min.js"></script>
<script src="js/blob.js"></script>
<script src="js/canvas-toblob.js"></script>
<script src="js/filesaver.min.js"></script>
<script src="js/bootbox.min.js"></script>
<script src="js/main.js?v=11"></script>

<script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-57337915-1', 'auto');
    ga('send', 'pageview');

</script>

</body>
</html>