github-ribbons-collections/index.html at master · wilon/github-ribbons-collections · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html>
    <head>
        <title>Github ribbons collections</title>
        <meta charset="utf-8">
        <link href="https://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" media="screen">
        <style type="text/css">
            .col-md-2 {margin-bottom: 40px; margin-left: 20px; background-color: #FFF; border-radius: 5px; box-shadow: 0 1px 3px rgba(0,0,0,0.18); position: relative; overflow: hidden; padding: 0 0 0 0; } .col-md-3 a {display: block; } .col-md-3 img {width: 100%; border-top-left-radius: 5px; border-top-right-radius: 5px; } .input-group {display: table; }.input-group .form-control:first-child, .input-group-button:first-child .btn {border-top-right-radius: 0; border-bottom-right-radius: 0; }.input-group-button {width: 1%; vertical-align: middle; }.input-group-button:last-child .btn {margin-left: -1px; }.btn {color: #24292e; background-color: #eff3f6; background-image: -webkit-linear-gradient(270deg, #fafbfc 0%, #eff3f6 90%); background-image: linear-gradient(-180deg, #fafbfc 0%, #eff3f6 90%); }.input-group .form-control, .input-group-button {display: table-cell; }.btn:hover,.btn.hover {background-color: #e6ebf1; background-image: -webkit-linear-gradient(270deg, #f0f3f6 0%, #e6ebf1 90%); background-image: linear-gradient(-180deg, #f0f3f6 0%, #e6ebf1 90%); background-position: 0 -0.5em; border-color: rgba(27,31,35,0.35) } .input-group .form-control {position: relative; width: 100%; } .input-monospace {font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; } .input-sm {min-height: 28px; padding-top: 3px; padding-bottom: 3px; font-size: 12px; line-height: 20px; } .form-control, .form-select {min-height: 34px; padding: 6px 8px; font-size: 14px; line-height: 20px; color: #24292e; vertical-align: middle; background-color: #fff; background-repeat: no-repeat; background-position: right 8px center; border: 1px solid #d1d5da; border-radius: 3px; outline: none; box-shadow: inset 0 1px 2px rgba(27,31,35,0.075); } .cover-info {min-height: 133px; } .cover-stat {background-color: #f6f6f6; border-radius: 0 0 3px 3px; border-top: 1px solid #e7e7e7; box-shadow: 0 1px 0 0 #fff inset; padding: 1px 2px 1px 2px; color: #8B8B8C; position: relative; }
        </style>
    </head>
    <body>
        <div class="container-fluid">
            <div class="container" id="container">
                <ol class="breadcrumb jjk20 z16 top10">
                    <li><h3>Github Ribbons Collections</h3></li>
                </ol>
            </div>
        </div>
        <script type="text/javascript" src="./ribbons_config.js" charset="utf-8"></script>
        <script type="text/javascript">
            var html = '';
            for (var i = 0; i < ribbons.length; i++) {
                if (ribbons[i] == '') continue;
                html += ` <div class="col-lg-2 col-md-2 col-sm-2"> <div class="cover-info"> ${ribbons[i]} </div> <div class="cover-stat"> <div class="input-group js-zeroclipboard-container"> <input type="text" class="form-control input-monospace input-sm js-zeroclipboard-target js-url-field" value='${ribbons[i]}' readonly="" id="ribbon_${i}"> <div class="input-group-button" onclick="zeroclipboard(${i})"> <button aria-label="Copy to clipboard" class="js-zeroclipboard btn btn-sm zeroclipboard-button tooltipped tooltipped-s" data-copied-hint="Copied!" type="button"><svg aria-hidden="true" class="octicon octicon-clippy" height="16" version="1.1" viewBox="0 0 14 16" width="14"><path fill-rule="evenodd" d="M2 13h4v1H2v-1zm5-6H2v1h5V7zm2 3V8l-3 3 3 3v-2h5v-2H9zM4.5 9H2v1h2.5V9zM2 12h2.5v-1H2v1zm9 1h1v2c-.02.28-.11.52-.3.7-.19.18-.42.28-.7.3H1c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c0-1.11.89-2 2-2 1.11 0 2 .89 2 2h3c.55 0 1 .45 1 1v5h-1V6H1v9h10v-2zM2 5h8c0-.55-.45-1-1-1H8c-.55 0-1-.45-1-1s-.45-1-1-1-1 .45-1 1-.45 1-1 1H3c-.55 0-1 .45-1 1z"></path></svg> </button> </div> </div> </div> </div>`;
            }
            document.getElementById('container').innerHTML += html;

            function zeroclipboard(i) {
                try {
                    document.getElementById("ribbon_"+i).select();
                    var result = document.execCommand('copy');
                } catch (e) {
                    var result = false;
                }
                if (result != false) {
                    alert('Copied!')
                } else {
                    alert('var')
                }
                return result;
            }
        </script>
    </body>
</html>