Source

unicode-symbols-dashboard / scripts / templates / chrome_popup_template.html

<html>
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link type="text/css" rel="stylesheet" href="css/blueprint/screen.css"  media="screen, projection"/>
    <link type="text/css" rel="stylesheet" href="css/blueprint/plugins/buttons/screen.css" media="screen, projection"/>

    <link type="text/css" href="css/smoothness/jquery-ui-1.8.14.custom.css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script>
    <script type="text/javascript" src="js/jquery.client.js"></script>

    <script type="text/javascript">

        $(document).ready(main);

        function main(){
            // jQuery UI magic
            $('#tabs').tabs();
            $("#clear_text").click(function() {$(".textbox").val(""); });
            $('ul.icons li').hover(
					function() { $(this).addClass('ui-state-hover'); },
					function() { $(this).removeClass('ui-state-hover'); }
				);

            // register handler to every 'button'
            $(".icons .unicode-symbol").click(reply_click);
            $(".icons .unicode-symbol-combo").click(reply_click);

            // platform-dependent copy instructions
            if ($.client.os == "Mac"){
                $('label').html("Select all and hit &#x2318;-C to copy")
            }
            else {
               $('label').html("Select all and hit CTRL-C to copy")
            }

        }

        // callback func
        function reply_click(icon_button){
            current_val =  $(".textbox").val();
            $('.textbox').val(current_val + this.innerHTML);
        }

    </script>



        <style type="text/css">
            body
            {
                background-image: url(images/whitey.png);
                font-family: "Gill Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
            }


			ul.icons {margin: 0; padding: 0;}
			ul.icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
			ul.icons span.unicode-symbol {float: left; margin: 0 2px; width: 32px; height: 32px; text-align: center; font-size: x-large;}
            ul.icons span.unicode-symbol-combo {float: left; margin: 0 2px; height: 32px; text-align: center; font-size: x-large;}
		</style>	

</head>


<body>
<div class="span-16" style="padding-left: 15px; padding-top: 15px;">
    <div style="text-align: center;">
        <h1 style="color: #666; font-weight: bold;">Unicode Symbols</h1>
    </div>
    
        <div id="tabs" class="span-16">
            <ul>
                {% for name, symbols in all_symbols %}
                    <li><a href="#tabs-{{ name }}"> {{ name|replace("-", " ")|capitalize }} </a></li>
                {% endfor %}
                <li><a href="#tabs-combos">Combos</a></li>
            </ul>


            {% for name, symbols in all_symbols %}
                <div id="tabs-{{ name }}" style="height: 350px; overflow-y: auto;">
                    <ul class="icons ui-widget ui-helper-clearfix">
                        {% for title, decimal_value in symbols %}
                        <li class="ui-state-default ui-corner-all" title="{{ title  }}">
                            <span class="unicode-symbol">&#{{decimal_value}};</span>
                        </li>
                        {% endfor %}

                    </ul>
                </div>
            {% endfor %}


            <div id="tabs-combos" style="height: 350px; overflow-y: auto;">

                <ul class="icons ui-widget ui-helper-clearfix">
                    {% for title, html_string in combos %}
                        <li class="ui-state-default ui-corner-all" title="{{ title  }}">
                            <span class="unicode-symbol-combo">{{ html_string }}</span>
                        </li>

                    {% endfor %}
                </ul>
            </div>

        </div>

        <br/>
        <div style="width: 100%; text-align: center; ">
            <input name="to_copy_box" type="text" class="textbox" style="font-size: x-large; width: 100%; height: 36px; "/>
            <br/>
            <label class="quiet" style="font-size: large;width: 100%; "></label>
        </div>
</div>

</body>
</html>