-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
133 lines (112 loc) · 6.92 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
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-HG8M46V1SF"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-HG8M46V1SF');
</script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#CC3333">
<!-- Meta Tags Start =================================================================================-->
<meta name="title" content="Find a Helpline - CrisisHotlines">
<meta name="description" content="CrisisHotlines is a free service that helps you find a helpline in your country.">
<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:url" content="">
<meta property="og:title" content="Find a Helpline - CrisisHotlines">
<meta property="og:description" content="CrisisHotlines is a free service that helps you find a helpline in your country.">
<meta property="og:image" content="https://sandunwira.github.io/CrisisHotlines/preview.jpg">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="">
<meta name="twitter:title" content="Find a Helpline - CrisisHotlines">
<meta name="twitter:description" content="CrisisHotlines is a free service that helps you find a helpline in your country.">
<meta name="twitter:image" content="https://sandunwira.github.io/CrisisHotlines/preview.jpg">
<!--=================================================================================== Meta Tags End -->
<title>Find a helpline - CrisisHotlines</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
<link rel="icon" href="favicon.png">
<!-- Preload CSS/JS -->
<link rel="preload" href="style.css" as="style" type="text/css">
<link rel="preload" href="script.js" as="script" type="text/javascript">
<!-- Prefetch HTML / JSON -->
<link rel="prefetch" href="information.min.json" as="document">
<meta name="apple-mobile-web-app-status-bar" content="#CC3333">
<link rel="apple-touch-icon" href="https://sandunwira.github.io/CrisisHotlines/favicon.png">
<link rel="manifest" href="manifest.json">
<script src="service-register.js"></script>
</head>
<body>
<header>
<div class="containerBlock flex" style="border: none;" id="navbar">
<div class="container">
<nav class="flex flexRow" style="justify-content: space-between;">
<a href="" class="flex flexRow" style="gap: 5px;">
<img src="favicon.png" alt="CrisisHotlines">
<h1 id="navbarHeading">CrisisHotlines</h1>
</a>
<div class="flex flexRow" style="gap: 20px;">
<span class="flex flexRow" id="locatedCountryContainer" style="font-size: 12px; font-weight: 500; text-transform: uppercase; gap: 5px; user-select: none; padding: 5px 8px; background: #FFFFFF; border-radius: 6px;">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor" class="icon icon-tabler icons-tabler-filled icon-tabler-map-pin">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M18.364 4.636a9 9 0 0 1 .203 12.519l-.203 .21l-4.243 4.242a3 3 0 0 1 -4.097 .135l-.144 -.135l-4.244 -4.243a9 9 0 0 1 12.728 -12.728zm-6.364 3.364a3 3 0 1 0 0 6a3 3 0 0 0 0 -6z" />
</svg>
<span id="locatedCountry">Fetching ...</span>
</span>
<a href="https://github.com/sandunwira/CrisisHotlines" target="_blank" class="flex flexRow" style="gap: 5px;">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" class="icon icon-tabler icons-tabler-filled icon-tabler-brand-github">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M5.315 2.1c.791 -.113 1.9 .145 3.333 .966l.272 .161l.16 .1l.397 -.083a13.3 13.3 0 0 1 4.59 -.08l.456 .08l.396 .083l.161 -.1c1.385 -.84 2.487 -1.17 3.322 -1.148l.164 .008l.147 .017l.076 .014l.05 .011l.144 .047a1 1 0 0 1 .53 .514a5.2 5.2 0 0 1 .397 2.91l-.047 .267l-.046 .196l.123 .163c.574 .795 .93 1.728 1.03 2.707l.023 .295l.007 .272c0 3.855 -1.659 5.883 -4.644 6.68l-.245 .061l-.132 .029l.014 .161l.008 .157l.004 .365l-.002 .213l-.003 3.834a1 1 0 0 1 -.883 .993l-.117 .007h-6a1 1 0 0 1 -.993 -.883l-.007 -.117v-.734c-1.818 .26 -3.03 -.424 -4.11 -1.878l-.535 -.766c-.28 -.396 -.455 -.579 -.589 -.644l-.048 -.019a1 1 0 0 1 .564 -1.918c.642 .188 1.074 .568 1.57 1.239l.538 .769c.76 1.079 1.36 1.459 2.609 1.191l.001 -.678l-.018 -.168a5.03 5.03 0 0 1 -.021 -.824l.017 -.185l.019 -.12l-.108 -.024c-2.976 -.71 -4.703 -2.573 -4.875 -6.139l-.01 -.31l-.004 -.292a5.6 5.6 0 0 1 .908 -3.051l.152 -.222l.122 -.163l-.045 -.196a5.2 5.2 0 0 1 .145 -2.642l.1 -.282l.106 -.253a1 1 0 0 1 .529 -.514l.144 -.047l.154 -.03z" />
</svg>
</a>
</div>
</nav>
</div>
</div>
</header>
<div class="containerBlock flex">
<div class="container flex flexCol" style="gap: 50px;">
<div class="flex flexCol" style="gap: 15px;">
<h2 style="color: var(--black); font-size: 34px; text-align: center;">Find a helpline</h2>
<p style="color: var(--black);">Search for a helpline by country</p>
</div>
<div class="flex flexRow" id="searchContainer" style="gap: 15px;">
<input type="text" placeholder="Search by country" id="searchField">
<button type="button" id="searchBtn">Search</button>
</div>
</div>
</div>
<div class="containerBlock flex">
<div class="container flex flexCol" style="gap: 50px;">
<div class="flex flexCol" style="gap: 15px;">
<h2 style="color: var(--black);">Available helplines</h2>
<p style="color: var(--black);" id="resultsCount">Fetching helplines</p>
</div>
<div class="flex flexCol" style="gap: 10px; width: 100%;" id="hotlineCardsContainer">
<div class="flex flexRow" style="color: var(--gray); font-size: 18px; gap: 10px; align-items: center;">
Loading
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-loader-2 spinner">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M12 3a9 9 0 1 0 9 9" />
</svg>
</div>
</div>
</div>
</div>
<!-- SCROLL-TO-TOP START ===========================================================-->
<button id="toTopBtn" class="flex">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-up">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M6 15l6 -6l6 6" />
</svg>
</button>
<!--============================================================= SCROLL-TO-TOP END -->
</body>
</html>