-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
125 lines (116 loc) · 8.17 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<title>I have been to...</title>
<meta property="description" content="I have travelled to all these countries, what about you?" />
<meta property="og:title" content="I have been to..." />
<meta property="og:description" content="I have travelled to all these countries, what about you?" />
<meta property="og:image" content="https://suricactus.github.io/i-have-been-to/images/sharable.jpg" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
<script id="config" type="application/json">
{
"countries": {
"strings": {
"title": "I have been to...",
"description": "I have visited all these countries, how about you?",
"no_places": "Select the countries you have visited.",
"one_place": "I have been to a single country.",
"visited_many_places": "I have been to $COUNT$ countries.",
"search_placeholder": "Type to filter",
"share_title": "Share",
"share_body": "Share with your friends where you have travelled!",
"share_share_btn": "Share",
"share_copy_btn": "Copy",
"share_message": "Share which countries you have visited! I have been to $COUNT$ countries: $PLACES$"
}
},
"obstini": {
"strings": {
"title": "Бил съм в...",
"description": "Всички тези общини са посетени от мен, а твоите?",
"no_places": "Избери посетените от теб общини.",
"one_place": "Само 1 община е посетена от мен.",
"visited_many_places": "$COUNT$ общини са посетени от мен.",
"search_placeholder": "Пиши да търсиш",
"share_title": "Сподели",
"share_body": "Сподели с приятелите си кои общини са посетени от теб!",
"share_share_btn": "Сподели",
"share_copy_btn": "Копирай",
"share_message": "Сподели кои общини си посетил! Моите са $COUNT$ общини: $PLACES$"
}
}
}
</script>
</head>
<body>
<div id="map"></div>
<template id="tmpl-control-places">
<div id="cc">
<button type="button" id="cc-toggle-btn" class="btn" data-toggled="0">-</button>
<label id="cc-label">
<span id="cc-been-to"></span>
<input type="text" id="cc-search" placeholder="" />
</label>
<ul id="cc-list"></ul>
</div>
</template>
<dialog id="cc-dialog">
<form method="dialog">
<h3 id="cc-share-title"></h3>
<button type="button" id="cc-dialog-close-btn" class="btn" value="cancel">x</button>
<p id="cc-share-body"></p>
<div id="cc-share-copy">
<input type="text" id="cc-share-copy-input" />
<button type="button" id="cc-share-copy-btn" class="btn"></button>
</div>
<div id="cc-share-social">
<!-- credist go to: https://sharingbuttons.io/ -->
<!-- Sharingbutton Facebook -->
<a id="cc-share-facebook" class="resp-sharing-button__link" href="https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsuricactus.com" target="_blank" rel="noopener" aria-label="">
<div class="resp-sharing-button resp-sharing-button--facebook resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.77 7.46H14.5v-1.9c0-.9.6-1.1 1-1.1h3V.5h-4.33C10.24.5 9.5 3.44 9.5 5.32v2.15h-3v4h3v12h5v-12h3.85l.42-4z"/></svg>
</div>
</div>
</a>
<!-- Sharingbutton Twitter -->
<a id="cc-share-twitter" class="resp-sharing-button__link" href="https://twitter.com/intent/tweet/?text=Hello&url=http%3A%2F%2Fsuricactus.com" target="_blank" rel="noopener" aria-label="">
<div class="resp-sharing-button resp-sharing-button--twitter resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.44 4.83c-.8.37-1.5.38-2.22.02.93-.56.98-.96 1.32-2.02-.88.52-1.86.9-2.9 1.1-.82-.88-2-1.43-3.3-1.43-2.5 0-4.55 2.04-4.55 4.54 0 .36.03.7.1 1.04-3.77-.2-7.12-2-9.36-4.75-.4.67-.6 1.45-.6 2.3 0 1.56.8 2.95 2 3.77-.74-.03-1.44-.23-2.05-.57v.06c0 2.2 1.56 4.03 3.64 4.44-.67.2-1.37.2-2.06.08.58 1.8 2.26 3.12 4.25 3.16C5.78 18.1 3.37 18.74 1 18.46c2 1.3 4.4 2.04 6.97 2.04 8.35 0 12.92-6.92 12.92-12.93 0-.2 0-.4-.02-.6.9-.63 1.96-1.22 2.56-2.14z"/></svg>
</div>
</div>
</a>
<!-- Sharingbutton LinkedIn -->
<a id="cc-share-linkedin" class="resp-sharing-button__link" href="https://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Fsuricactus.com&title=Hello&summary=Hello&source=http%3A%2F%2Fsuricactus.com" target="_blank" rel="noopener" aria-label="">
<div class="resp-sharing-button resp-sharing-button--linkedin resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.5 21.5h-5v-13h5v13zM4 6.5C2.5 6.5 1.5 5.3 1.5 4s1-2.4 2.5-2.4c1.6 0 2.5 1 2.6 2.5 0 1.4-1 2.5-2.6 2.5zm11.5 6c-1 0-2 1-2 2v7h-5v-13h5V10s1.6-1.5 4-1.5c3 0 5 2.2 5 6.3v6.7h-5v-7c0-1-1-2-2-2z"/></svg>
</div>
</div>
</a>
<!-- Sharingbutton WhatsApp -->
<a id="cc-share-whatsapp" class="resp-sharing-button__link" href="whatsapp://send?text=Hello%20http%3A%2F%2Fsuricactus.com" target="_blank" rel="noopener" aria-label="">
<div class="resp-sharing-button resp-sharing-button--whatsapp resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.1 3.9C17.9 1.7 15 .5 12 .5 5.8.5.7 5.6.7 11.9c0 2 .5 3.9 1.5 5.6L.6 23.4l6-1.6c1.6.9 3.5 1.3 5.4 1.3 6.3 0 11.4-5.1 11.4-11.4-.1-2.8-1.2-5.7-3.3-7.8zM12 21.4c-1.7 0-3.3-.5-4.8-1.3l-.4-.2-3.5 1 1-3.4L4 17c-1-1.5-1.4-3.2-1.4-5.1 0-5.2 4.2-9.4 9.4-9.4 2.5 0 4.9 1 6.7 2.8 1.8 1.8 2.8 4.2 2.8 6.7-.1 5.2-4.3 9.4-9.5 9.4zm5.1-7.1c-.3-.1-1.7-.9-1.9-1-.3-.1-.5-.1-.7.1-.2.3-.8 1-.9 1.1-.2.2-.3.2-.6.1s-1.2-.5-2.3-1.4c-.9-.8-1.4-1.7-1.6-2-.2-.3 0-.5.1-.6s.3-.3.4-.5c.2-.1.3-.3.4-.5.1-.2 0-.4 0-.5C10 9 9.3 7.6 9 7c-.1-.4-.4-.3-.5-.3h-.6s-.4.1-.7.3c-.3.3-1 1-1 2.4s1 2.8 1.1 3c.1.2 2 3.1 4.9 4.3.7.3 1.2.5 1.6.6.7.2 1.3.2 1.8.1.6-.1 1.7-.7 1.9-1.3.2-.7.2-1.2.2-1.3-.1-.3-.3-.4-.6-.5z"/></svg>
</div>
</div>
</a>
<!-- Sharingbutton Telegram -->
<a id="cc-share-telegram" class="resp-sharing-button__link" href="https://telegram.me/share/url?text=Hello&url=http%3A%2F%2Fsuricactus.com" target="_blank" rel="noopener" aria-label="">
<div class="resp-sharing-button resp-sharing-button--telegram resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M.707 8.475C.275 8.64 0 9.508 0 9.508s.284.867.718 1.03l5.09 1.897 1.986 6.38a1.102 1.102 0 0 0 1.75.527l2.96-2.41a.405.405 0 0 1 .494-.013l5.34 3.87a1.1 1.1 0 0 0 1.046.135 1.1 1.1 0 0 0 .682-.803l3.91-18.795A1.102 1.102 0 0 0 22.5.075L.706 8.475z"/></svg>
</div>
</div>
</a>
</div>
</form>
</dialog>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<link rel="stylesheet" href="./css/main.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
crossorigin=""></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>