Use_Grottocenter_API/Use_GC3_API_with_JAVASCRIPT_FR_V2.html at master · GrottoCenter/Use_Grottocenter_API · 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
102
103
104
105
106
107
108
<!--This file is part of GrottoCenter.

GrottoCenter is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

GrottoCenter is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with GrottoCenter.  If not, see <http://www.gnu.org/licenses/>.

@copyright Copyright (c) 2017 Alain Louage, Frédéric Urien, Clément Ronzon
@license http://www.gnu.org/licenses/agpl.txt-->

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>GC3 API Example</title>
        <style>
            .gc-widget {
                padding: 5px;
                background-color: #d7ccc8;
                border: 4px solid #795548;;
                border-radius: 9px;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: flex-start;
                align-content: stretch;
                align-items: flex-start;
            }

            .gc-widget header {
                flex: 0 1 auto;
                align-self: center;
            }

            .gc-widget article {
                padding: 5px;
                background-color: #d7ccc8;
                border: 0 solid #795548;
                border-radius: 9px;
                display: flex;
                flex-direction: column;
                flex-wrap: wrap;
                justify-content: flex-start;
                align-content: stretch;
                align-items: flex-start;
            }

            .gc-widget a {
                font-size: 1.5em;
                color: #795548;
            }

            .gc-widget h4 {
                flex: 0 1 auto;
                align-self: auto;
                font-size: 1.2em;
                color: #795548;
                margin: 0;
            }

            .gc-widget p {
                flex: 0 1 auto;
                align-self: auto;
                font-size: 1.2em;
                color: #795548;
                margin-top: 12px;
            }

            .gc-widget p > span {
                font-size: 1.2em;
                background: #795548;
                color: #d7ccc8;
                padding: 0 5px;
            }

        </style>
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                var xhr = new XMLHttpRequest();
                xhr.onload = function () {
                    document.getElementById('demo').innerHTML = JSON.parse(xhr.responseText).count.toLocaleString();
                };
                xhr.open('GET', 'http://beta.grottocenter.org/api/v1/entry/publicCount', true);
                xhr.setRequestHeader('Accept', 'application/json');
                xhr.send();
            });
        </script>
    </head>
    <body>
        <aside class="gc-widget">
            <header>
                <img alt="GrottoCenter" src="http://beta.grottocenter.org/images/logo.svg" height="80">
            </header>
            <article>
                <h4>Contribuez à <a href="http://beta.grottocenter.org">Grottocenter</a> la base de donnée spéléo mondiale !</h4>
                <p>Déjà <span id="demo"></span> cavités sont accessibles !</p>
            </article>
        </aside>
    </body>
</html>