The Perl Toolchain Summit 2025 Needs You: You can help 🙏 Learn more

NHORNE / Geo-Coder-Free-0.39 / templates / default / Geo / Coder / Free / Display / meta_data.tmpl 

            

              
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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149

              
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
        <head>
                <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
                <meta http-equiv="Content-Language" content="en">
                <meta name="robots" content="INDEX,FOLLOW">
                <meta name="language" content="ENGLISH">
                <meta name="object" content="Index">
                <meta name="owner" content="Nigel Horne">
                <meta name="Author" content="Nigel Horne">
                <meta name="Copyright" content="Copyright (C) 2025 Nigel Horne, all rights reserved">
                <title>[% SiteTitle %]: Meta Data</title>
                [% IF keywords %]
                        <meta name="keywords" content="[% keywords %]" />
                [% END %]
                <link rel="stylesheet" type="text/css" href="/css/style.css" />
                <!-- https://www.geeksforgeeks.org/how-to-create-three-boxes-in-the-same-div-using-html-and-css/ -->
                <style>
                        * {
                                margin: 0;
                                padding: 0;
                                box-sizing: border-box;
                        }
                        body {
                                margin: 2%;
                                // justify-content: center;
                                overflow: hidden;
                        }
                        .box-wrapper {
                                height: 95vh;
                                width: 100%;
                                display: flex;
                                flex-direction: column;
                                // text-align: center;
                        }
                        #box1 {
                                padding: 10px;
                                justify-content: center;
                                // border: solid 1px green
                        }
                        #box2 {
                                padding: 8px;
                                // border: solid 1px blue
                        }
                        #box3 {
                                padding: 10px;
                                flex-grow: 1;
                                display: flex;
                                flex-direction: row;
                                // border: solid 1px green
                        }
                        #box4 {
                                // flex-grow: 2;
                                flex-grow: 1;
                                // border: solid 1px orange
                        }
                        .middle-column {
                                // flex-grow: 1;
                                flex-grow: 2;
                                display: flex;
                                flex-direction: column;
                        }
                        .middle-column div {
                                flex-grow: 1;
                                margin: 0 8px;
                                // border: solid 1px red;
                        }
                        .middle-column div+div {
                                margin-top: 8px
                        }
                        #box8 {
                                flex-grow: 1;
                                // border: solid 1px black
                        }
                </style>
                [% IF datapoints %]
                        <script>
                        window.onload = function() {
                        var chart = new CanvasJS.Chart("chartContainer", {
                                animationEnabled: true,
                                title: {
                                        text: "Browser breakdown by type"
                                },
                                data: [{
                                        type: "pie",
                                        startAngle: 240,
                                        // yValueFormatString: "##0.00\"%\"",
                                         yValueFormatString: "##0",
                                        indexLabel: "{label} {y}",
                                        dataPoints: [
                                                [% datapoints %]
                                        ]
                                }]
                        });
                        chart.render();
                        }
                        </script>
                [% END %]
        </head>
        <body>
                <div class="box-wrapper">
                        <div id="box1">
                                <h1>[% SiteTitle %]: Meta Data</h1>
                        </div>
                        <!--
                                <div id="box2">
                                </div>
                        -->
                        <div id="box3">
                                <div id="box4">
                                        [% IF info %]
                                                <h2>Info</h2>
                                                domain_name: [% info.domain_name() %]<br>
                                                browser_type: [% info.browser_type() %]
                                        [% END %]
                                        [% IF lingua %]
                                                <h2>Lingua</h2>
                                                country: [% lingua.country() %]<br>
                                                requested_language: [% lingua.requested_language() %]<br>
                                                language_code_alpha2: [% lingua.language_code_alpha2() %]
                                        [% END %]
                                </div>
                                <div class="middle-column">
                                        <div id="box5">
                                                [% IF datapoints %]
                                                        <div id="chartContainer" style="height: 370px; width: 100%;"></div>
                                                        <script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
                                                [% END %]
                                        </div>
                                </div>
                        </div>
                </div>
        </body>
</html>