picimo.old/index.html at master · spearwolf/picimo.old · 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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>picimo repository</title>
    <link href='https://fonts.googleapis.com/css?family=Bangers' rel='stylesheet' type='text/css'>
    <style>
        h3, h4, a    { font-weight: normal; }
        h3           {   font-size: 21px;   }
        h4           {   font-size: 32px;   }
        a, a:visited {   font-size: 24px;   }

        body             { background-color: #fff; }
        h3, h4                      { color: #555;    }
        a, a:visited                { color: #68c;    }
        a:hover                     { color: #8af; background-color: #fffff0; }
        a.offline, a.offline:hover  { color: #ccc;    }

        body > ul > li {
            padding-top: 1em;
            padding-bottom: 1em;
        }

        body, h3 {
            font-family: 'Bangers', sans-serif;
        }
        h3, h4 {
            margin: 0;
            padding: 0;
            text-transform: uppercase;
        }
        h4 {
            margin-top: 1em;
        }
        a, a:visited {
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
            cursor: pointer;
        }
        a.offline, a.offline:hover {
            text-decoration: line-through;
            cursor: default;
        }
        ul {
            list-style-type: none;
            line-height: 2em;
            padding: 0;
        }
        h3, h4, li {
            text-align: center;
        }
    </style>
</head>
<body>
    <h4>Welcome to the picimo repository!</h4>
    <ul>
        <li><a href="api-docs/" target="blank">api-docs</a></li>
        <li class='examples'><h3>Examples (local)</h3>
            <ul>
                <li><a href="examples/hello-world/">hello-world</a></li>
                <li><a href="examples/nobinger/">nobinger</a></li>
                <li><a href="examples/canvas/">canvas</a></li>
            </ul>
        </li>
        <li class='examples'><h3>Examples (picimo-examples)</h3>
            <ul>
                <li><a data-customize-url='{ "port": 3000 }' href="examples/benchy/">benchy</a></li>
                <li><a data-customize-url='{ "port": 3000 }' href="examples/picture/">picture</a></li>
                <li><a data-customize-url='{ "port": 3000 }' href="examples/legendary-mazes/">legendary-mazes</a></li>
            </ul>
        </li>
        <li class='examples'><h3>Examples (unfinished)</h3>
            <ul>
                <li><a href="examples/scroll/">scroll</a></li>
                <li><a href="examples/kastani/">kastani</a></li>
            </ul>
        </li>
    </ul>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
    <script>
        $('a[data-customize-url]').each(function () {
            var el = $(this);
            var props = el.data('customize-url');
            var url;
            if (props) {
                url = new URL(window.location);
                Object.keys(props).forEach(function (propKey) {
                    url[propKey] = props[propKey];
                })
                url.pathname += el.attr('href');
                el.attr('href', url.toString());
                // FIXME crossdomain panic
                //$.ajax({ url: url, method: 'GET', timeout: 1600 })
                //    .catch(function () { el.addClass('offline') });
            }
        })
    </script>
</body>
</html>