safe/index.html at main · 101cy/safe · 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
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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>SAFE.101.CY — Find Civil Defence Shelters in Cyprus</title>
  <meta name="description" content="Find your nearest civil defence shelter in the Republic of Cyprus. Use GPS or search by address. Interactive map with Civil Defence shelters. SafeCY app links.">
  <meta name="keywords" content="Cyprus shelters, civil defence Cyprus, emergency shelters Cyprus, SafeCY, shelter map Cyprus, nearest shelter, Cyprus safety">
  <meta name="robots" content="index, follow">
  <meta name="theme-color" content="#2d5a4a">
  <link rel="canonical" href="https://safe.101.cy/">
  <link rel="alternate" hreflang="en" href="https://safe.101.cy/">
  <link rel="alternate" hreflang="el" href="https://safe.101.cy/">
  <link rel="alternate" hreflang="tr" href="https://safe.101.cy/">
  <link rel="alternate" hreflang="x-default" href="https://safe.101.cy/">

  <!-- Open Graph -->
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://safe.101.cy/">
  <meta property="og:title" id="og-title" content="SAFE.101.CY — Find Civil Defence Shelters in Cyprus">
  <meta property="og:description" id="og-description" content="Find your nearest civil defence shelter in Cyprus. Use GPS or search by address.">
  <meta property="og:locale" id="og-locale" content="en_CY">
  <meta property="og:locale:alternate" content="el_CY">
  <meta property="og:locale:alternate" content="tr_CY">
  <meta property="og:site_name" content="SAFE.101.CY">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" id="twitter-title" content="SAFE.101.CY — Find Civil Defence Shelters in Cyprus">
  <meta name="twitter:description" id="twitter-description" content="Find your nearest civil defence shelter in Cyprus. GPS, address search, interactive map.">

  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "WebApplication",
    "name": "SAFE.101.CY",
    "description": "Find civil defence shelters in the Republic of Cyprus. Use GPS or search by address to see the nearest shelters on an interactive map.",
    "url": "https://safe.101.cy/",
    "applicationCategory": "UtilitiesApplication",
    "operatingSystem": "Any",
    "offers": { "@type": "Offer", "price": "0", "priceCurrency": "EUR" },
    "inLanguage": ["en", "el", "tr"],
    "featureList": ["GPS location", "Address search", "Interactive map", "Nearest shelter finder", "Official Cyprus Civil Defence data"]
  }
  </script>

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Source+Serif+4:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

  <!-- Full-screen map -->
  <div id="map" class="map" role="application" aria-label="Map of shelters in Cyprus"></div>

  <!-- Floating top bar -->
  <header class="topbar">
    <a href="/" class="logo">SAFE<span class="logo-dot">.101.CY</span></a>

    <div class="topbar-search">
      <div class="search-autocomplete-wrap">
        <input type="search" id="search-input" class="search-input"
               placeholder="e.g. Nicosia, Limassol, 1016" autocomplete="off"
               data-i18n-placeholder="action.search.placeholder"
               aria-label="Address or place search"
               aria-autocomplete="list" aria-expanded="false" aria-controls="search-suggestions">
        <ul class="search-suggestions" id="search-suggestions" role="listbox" aria-label="Address suggestions"></ul>
      </div>
      <button type="button" class="btn-topbar-icon btn-locate" id="btn-locate" aria-label="Use my location" title="GPS">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <circle cx="12" cy="12" r="3.5"/><path d="M12 2v4M12 18v4M2 12h4M18 12h4"/>
        </svg>
        <span class="btn-label">GPS</span>
      </button>
    </div>

    <div class="topbar-right">
      <button type="button" class="btn-topbar-icon" id="btn-info-toggle" aria-label="About &amp; official sources">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/>
        </svg>
        <span class="btn-label">Info</span>
      </button>
      <!-- Desktop-only language switcher; mobile users access via info drawer -->
      <nav class="lang-nav topbar-lang" aria-label="Language">
        <button type="button" class="lang-btn is-active" data-lang="en" aria-pressed="true">EN</button>
        <span class="lang-sep" aria-hidden="true">/</span>
        <button type="button" class="lang-btn" data-lang="el" aria-pressed="false">ΕΛ</button>
        <span class="lang-sep" aria-hidden="true">/</span>
        <button type="button" class="lang-btn" data-lang="tr" aria-pressed="false">TR</button>
      </nav>
    </div>
  </header>

  <!-- Emergency FAB -->
  <button type="button" class="btn-emergency" id="btn-panic" aria-label="Take me to the nearest shelter">
    <svg class="btn-emergency-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
      <line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/>
    </svg>
    <span data-i18n="panic.btn">Take me to nearest shelter</span>
  </button>

  <!-- Results panel (bottom sheet on mobile, side panel on desktop) -->
  <aside class="results-panel" id="results-panel" aria-label="Nearest shelters list">
    <div class="results-handle" aria-hidden="true"></div>
    <div class="results-header">
      <h3 id="results-title" data-i18n="results.title">Nearest shelters</h3>
      <button type="button" class="btn-close-panel" id="btn-close-panel" data-i18n-aria-label="results.close" aria-label="Close list">×</button>
    </div>
    <div class="results-body">
      <div class="results-nearest-block" id="results-nearest-block" aria-labelledby="results-nearest-title" style="display: none;">
        <h4 id="results-nearest-title" class="nearest-shelter-title" data-i18n="nearest.title">Your nearest shelter</h4>
        <p class="nearest-shelter-address" id="nearest-shelter-address"></p>
        <p class="nearest-shelter-meta" id="nearest-shelter-meta"></p>
        <a id="results-navigate-link" class="btn btn-navigate-walking" href="#" target="_blank" rel="noopener noreferrer" data-i18n="nearest.navigate_google">Open in Google Maps</a>
      </div>
      <div class="results-error-state" id="results-error-state" style="display: none;" aria-live="polite">
        <p class="results-error-message" id="results-error-message"></p>
        <div id="location-denied-help" class="location-denied-help"></div>
        <div class="results-error-actions">
          <button type="button" class="btn btn-primary btn-try-again" id="btn-try-again" data-i18n="location.try_again">Try again</button>
          <button type="button" class="btn btn-secondary btn-search-fallback" id="btn-search-fallback" data-i18n="location.fallback_search">Search by address</button>
        </div>
      </div>
      <ul class="results-list" id="results-list"></ul>
    </div>
  </aside>

  <!-- Info drawer backdrop -->
  <div class="info-overlay" id="info-overlay" aria-hidden="true"></div>

  <!-- Info drawer -->
  <aside class="info-drawer" id="info-drawer" role="complementary" aria-label="About and official sources">
    <div class="info-drawer-header">
      <h2 data-i18n="info.title">Info</h2>
      <button type="button" class="btn-close-panel" id="btn-close-info" aria-label="Close">×</button>
    </div>
    <div class="info-drawer-body">
      <!-- Language switcher -->
      <div class="drawer-section">
        <nav class="lang-nav drawer-lang" aria-label="Language">
          <button type="button" class="lang-btn is-active" data-lang="en" aria-pressed="true">English</button>
          <button type="button" class="lang-btn" data-lang="el" aria-pressed="false">Ελληνικά</button>
          <button type="button" class="lang-btn" data-lang="tr" aria-pressed="false">Türkçe</button>
        </nav>
      </div>

      <!-- Section 1: Map legend -->
      <div class="drawer-section">
        <h3 class="drawer-section-title" data-i18n="legend.title">Map legend</h3>
        <div class="map-legend drawer-legend">
          <div class="legend-row"><span class="legend-dot legend-dot-gps"></span><span class="legend-label" data-i18n="legend.gps">GPS location</span></div>
          <div class="legend-row"><span class="legend-dot legend-dot-shelter"></span><span class="legend-label" data-i18n="legend.shelter">Shelter</span></div>
          <div class="legend-row"><span class="legend-dot legend-dot-nearest"></span><span class="legend-label" data-i18n="legend.nearest">Nearest shelter</span></div>
          <div class="legend-row"><span class="legend-pin"><svg width="14" height="20" viewBox="0 0 28 40" fill="none"><path d="M14 2C8.5 2 4 6.5 4 12c0 3.5 2 7 5 9l5 14 5-14c3-2 5-5.5 5-9 0-5.5-4.5-10-10-10z" fill="white" stroke="#2d5a4a" stroke-width="2.5"/><circle cx="14" cy="12" r="3.5" fill="#2d5a4a"/></svg></span><span class="legend-label" data-i18n="legend.search">Searched location</span></div>
        </div>
      </div>

      <!-- Section 2: Official sources -->
      <div class="drawer-section">
        <h3 class="drawer-section-title" data-i18n="official.title">Official sources &amp; app</h3>
        <p data-i18n="official.intro">Shelter data is provided by the <strong>Cyprus Civil Defence</strong> under the Ministry of Interior. For the best experience on your phone, use the official app.</p>
        <ul class="official-links">
          <li><a href="https://www.gov.cy/moi/en/civil-defense/" target="_blank" rel="noopener noreferrer" data-i18n="official.link1">Civil Defence — Gov.cy</a></li>
          <li><a href="https://www.moi.gov.cy/moi/cd/cd.nsf/home_en/home_en?openform" target="_blank" rel="noopener noreferrer" data-i18n="official.link2">Civil Defence Department — Ministry of Interior</a></li>
        </ul>

        <div class="emergency-contact-inline">
          <p class="emergency-contact-label" data-i18n="contact.label">Emergency contact: Civil Defence</p>
          <div class="emergency-contact-phones">
            <svg class="phone-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
              <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
            </svg>
            <a href="tel:+35722403450" class="emergency-phone">22403450</a>
            <a href="tel:+35722403452" class="emergency-phone">22403452</a>
          </div>
        </div>

        <div class="app-download">
          <p class="app-title" data-i18n="app.title">SafeCY — Official app</p>
          <p class="app-desc" data-i18n="app.desc">Find shelters by GPS, address or postal code. Available in Greek and English. Free on Android and iOS.</p>
          <div class="app-badges">
            <a href="https://apps.apple.com/cy/app/safecy/id6746747464" target="_blank" rel="noopener noreferrer" class="app-badge app-badge-ios" data-i18n="app.ios" aria-label="Download SafeCY on the App Store">App Store</a>
            <a href="https://play.google.com/store/apps/details?id=com.moi.safecy" target="_blank" rel="noopener noreferrer" class="app-badge app-badge-android" data-i18n="app.android" aria-label="Get SafeCY on Google Play">Google Play</a>
          </div>
        </div>
      </div>

      <!-- Section 3: About -->
      <div class="drawer-section">
        <h3 class="drawer-section-title" data-i18n="about.title">About</h3>
        <p class="footer-peace" data-i18n="footer.peace">We stand for peace.</p>
        <p class="footer-brand"><a href="/">SAFE.101.CY</a> <span data-i18n="footer.tagline">— Shelter finder for the Republic of Cyprus. Not an official government site.</span></p>
        <p class="footer-meta">
          <span data-i18n="footer.privacy">This site does not use cookies and does not collect data.</span>
          <span class="footer-sep"> · </span>
          <span data-i18n="footer.updated">Shelter database last updated: March 2, 2026.</span>
        </p>
      </div>
    </div>
  </aside>

  <!-- Map legend — desktop floating (mobile: inside info drawer only) -->
  <div class="map-legend desktop-legend" aria-hidden="true">
    <div class="legend-row"><span class="legend-dot legend-dot-gps"></span><span class="legend-label" data-i18n="legend.gps">GPS location</span></div>
    <div class="legend-row"><span class="legend-dot legend-dot-shelter"></span><span class="legend-label" data-i18n="legend.shelter">Shelter</span></div>
    <div class="legend-row"><span class="legend-dot legend-dot-nearest"></span><span class="legend-label" data-i18n="legend.nearest">Nearest shelter</span></div>
    <div class="legend-row"><span class="legend-pin"><svg width="14" height="20" viewBox="0 0 28 40" fill="none"><path d="M14 2C8.5 2 4 6.5 4 12c0 3.5 2 7 5 9l5 14 5-14c3-2 5-5.5 5-9 0-5.5-4.5-10-10-10z" fill="white" stroke="#2d5a4a" stroke-width="2.5"/><circle cx="14" cy="12" r="3.5" fill="#2d5a4a"/></svg></span><span class="legend-label" data-i18n="legend.search">Searched location</span></div>
  </div>

  <!-- Accessibility live regions -->
  <p id="location-status" class="sr-only" aria-live="polite"></p>
  <p id="search-status" class="sr-only" aria-live="polite"></p>

  <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
  <script src="js/app.js"></script>
</body>
</html>