PageSourceSearch

https://sunbox.ps/impact.html

html sunbox.ps collected 2026-09-26 05:14:53 UTC 32,796 bytes, 685 lines download raw bytes

1<!DOCTYPE html>
2<!--  Last Published: Mon Sep 14 2020 12:37:29 GMT+0000 (Coordinated Universal Time)  -->
3<html data-wf-page="5eeb07020ba71dae56c31c80" data-wf-site="5ee9e59fbe923af1517e4058">
4<head>
5  <meta charset="utf-8">
6  <title>Impact</title>
7  <meta content="Impact" property="og:title">
8  <meta content="Impact" property="twitter:title">
9  <meta content="width=device-width, initial-scale=1" name="viewport">
10  <link href="css/normalize.css" rel="stylesheet" type="text/css">
11  <link href="css/components.css" rel="stylesheet" type="text/css">
12  <link href="css/sunboxps.css" rel="stylesheet" type="text/css">
13  
13<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>
13
14  
14<script type="text/javascript">WebFont.load({  google: {    families: ["Montserrat:100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic","Open Sans:300,300italic,400,400italic,600,600italic,700,700italic,800,800italic","Lato:100,100italic,300,300italic,400,400italic,700,700italic,900,900italic","Exo:100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic","Oswald:200,300,400,500,600,700","Merriweather:300,300italic,400,400italic,700,700italic,900,900italic","Oxygen:300,regular,700","Fanwood Text:regular,italic","Poppins:regular,italic,500,500italic,600,600italic,700","Poppins:regular,800,900:devanagari,latin,latin-ext"]  }});</script>
14
15  <!-- [if lt IE 9]>
15<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script>
15<![endif] -->
16  
16<script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>
16
17  <link href="images/favicon.png" rel="shortcut icon" type="image/x-icon">
18  <link href="images/webclip.png" rel="apple-touch-icon">
vendor: 69 bytes, lines 18-19
18
19  <script async="" src="https://www.googletagmanager.com/gtag/js?id=
19UA-177921229-1
vendor: 14 bytes, lines 19-20
19"></script>
20  
20<script type="text/javascript">
vendor: 124 bytes, line 20
20window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', '
20UA-177921229-1
vendor: 28 bytes, line 20
20', {'anonymize_ip': false});
20</script>
20
21  <style>
22.rangeslider,
23.rangeslider__fill {
24  background: #e6e6e6;
25  display: block;
26  height: 20px;
27  width: 100%;
28  -moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);
29  -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);
30  box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);
31  -moz-border-radius: 10px;
32  -webkit-border-radius: 10px;
33  border-radius: 10px;
34}
35.rangeslider {
36  position: relative;
37}
38.rangeslider--disabled {
39  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
40  opacity: 0.4;
41}
42.rangeslider__fill {
43  background: #00ff00;
44  position: absolute;
45  top: 0;
46}
47.rangeslider__handle {
48  background: white;
49  border: 1px solid #ccc;
50  cursor: pointer;
51  display: inline-block;
52  width: 40px;
53  height: 40px;
54  position: absolute;
55  top: -10px;
56  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
57  background-size: 100%;
58  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(0, 0, 0, 0.1)));
59  background-image: -moz-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
60  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
61  background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
62  -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
63  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
64  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
65  -moz-border-radius: 50%;
66  -webkit-border-radius: 50%;
67  border-radius: 50%;
68}
69.rangeslider__handle:after {
70  content: "";
71  display: block;
72  width: 18px;
73  height: 18px;
74  margin: auto;
75  position: absolute;
76  top: 0;
77  right: 0;
78  bottom: 0;
79  left: 0;
80  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjEzIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
81  background-size: 100%;
82  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.13)), color-stop(100%, rgba(255, 255, 255, 0)));
83  background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0));
84  background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0));
85  background-image: linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0));
86  -moz-border-radius: 50%;
87  -webkit-border-radius: 50%;
88  border-radius: 50%;
89}
90.rangeslider__handle:active {
91  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
92  background-size: 100%;
93  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, rgba(0, 0, 0, 0.12)));
94  background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12));
95  background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12));
96  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12));
97}
98input[type="range"]:focus + .rangeslider .rangeslider__handle {
99  -moz-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
100  -webkit-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
101  box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
102}
103.wrapper-rangeslider {
104  width: 500px;
105  margin: 50px auto 0;
106}
107.rangeslider,
108.rangeslider__fill {
109  height: 12px;
110  border-radius: 6px;
111  background-clip: padding-box;
112  background-color: #3b38ec;
113}
114.rangeslider__handle {
115  width: 22px;
116  height: 22px;
117  border: 0;
118  top: -5px;
119  border-radius: 11px;
120  background-clip: padding-box;
121  background-color: #f6f6f6;
122  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.44), inset 0 1px 0 #fff;
123  background-image: -webkit-linear-gradient(bottom, #dddddd 0%, #f9f9f9 100%);
124  background-image: linear-gradient(to top, #dddddd 0%, #f9f9f9 100%);
125}
126.rangeslider__handle::before {
127  display: block;
128  content: attr(data-content);
129  position: relative;
130  top: -30px;
131  left: -7px;
132  padding: 2px 5px;
133  width: 40px;
134  height: 25px;
135  border-radius: 5px;
136  line-height: 25px;
137  text-align: center;
138  color: #fff;
139  font-family: "Helvetica";
140  font-size: 12px;
141  background-color: #3b38ec;
142}
143#ruler {
144  position: relative;
145  height: 20px;
146}
147#ruler span {
148  position: absolute;
149  width: 10px;
150  top: 10px;
151  color: #f6f6f6;
152  font-size: 10px;
153  text-shadow: 0 1px 0 #9e2d04;
154}
155#ruler span:nth-child(1) { left: 0%; }
156#ruler span:nth-child(2) { left: 11%; }
157#ruler span:nth-child(3) { left: 22%; }
158#ruler span:nth-child(4) { left: 33%; }
159#ruler span:nth-child(5) { left: 44%; }
160#ruler span:nth-child(6) { left: 55%; }
161#ruler span:nth-child(7) { left: 66%; }
162#ruler span:nth-child(8) { left: 77%; }
163#ruler span:nth-child(9) { left: 88%; }
164#ruler span:nth-child(10) { left: 95%; }
165/* style 1 */
166.pricing-card.active-1 .card-1-heading {display: block} 
167.pricing-card.active-1 .card-2-heading,
168.pricing-card.active-1 .card-3-heading,
169.pricing-card.active-1 .card-4-heading {
170  display: none;
171}
172.pricing-card.active-1 .price-1 {display: block} 
173.pricing-card.active-1 .price-2,
174.pricing-card.active-1 .price-3,
175.pricing-card.active-1 .price-4{
176  display: none;
177}
178.pricing-card.active-1 .price-1 {display: block} 
179.pricing-card.active-1 .price-2,
180.pricing-card.active-1 .price-3,
181.pricing-card.active-1 .price-4 {
182  display: none;
183}
184.pricing-card.active-1 .card-1-small {display: block} 
185.pricing-card.active-1 .card-2-small,
186.pricing-card.active-1 .card-3-small,
187.pricing-card.active-1 .card-4-small {
188  display: none;
189}
190.pricing-card.active-1 .visits-1 {display: block} 
191.pricing-card.active-1 .visits-2,
192.pricing-card.active-1 .visits-3,
193.pricing-card.active-1 .visits-4 {
194  display: none;
195}
196/* style 2 */
197.pricing-card.active-2 .card-2-heading {display: block} 
198.pricing-card.active-2 .card-1-heading,
199.pricing-card.active-2 .card-3-heading,
200.pricing-card.active-2 .card-4-heading {
201  display: none;
202}
203.pricing-card.active-2 .price-2 {display: block} 
204.pricing-card.active-2 .price-1,
205.pricing-card.active-2 .price-3,
206.pricing-card.active-2 .price-4{
207  display: none;
208}
209.pricing-card.active-2 .price-2 {display: block} 
210.pricing-card.active-2 .price-1,
211.pricing-card.active-2 .price-3,
212.pricing-card.active-2 .price-4 {
213  display: none;
214}
215.pricing-card.active-2 .card-2-small {display: block} 
216.pricing-card.active-2 .card-1-small,
217.pricing-card.active-2 .card-3-small,
218.pricing-card.active-2 .card-4-small {
219  display: none;
220}
221.pricing-card.active-2 .visits-2 {display: block} 
222.pricing-card.active-2 .visits-1,
223.pricing-card.active-2 .visits-3,
224.pricing-card.active-2 .visits-4 {
225  display: none;
226}
227/* style 3 */
228.pricing-card.active-3 .card-3-heading {display: block} 
229.pricing-card.active-3 .card-2-heading,
230.pricing-card.active-3 .card-1-heading,
231.pricing-card.active-3 .card-4-heading {
232  display: none;
233}
234.pricing-card.active-3 .price-3 {display: block} 
235.pricing-card.active-3 .price-2,
236.pricing-card.active-3 .price-1,
237.pricing-card.active-3 .price-4{
238  display: none;
239}
240.pricing-card.active-3 .price-3 {display: block} 
241.pricing-card.active-3 .price-2,
242.pricing-card.active-3 .price-1,
243.pricing-card.active-3 .price-4 {
244  display: none;
245}
246.pricing-card.active-3 .card-3-small {display: block} 
247.pricing-card.active-3 .card-2-small,
248.pricing-card.active-3 .card-1-small,
249.pricing-card.active-3 .card-4-small {
250  display: none;
251}
252.pricing-card.active-3 .visits-3 {display: block} 
253.pricing-card.active-3 .visits-2,
254.pricing-card.active-3 .visits-1,
255.pricing-card.active-3 .visits-4 {
256  display: none;
257}
258/* style 4 */
259.pricing-card.active-4 .card-4-heading {display: block} 
260.pricing-card.active-4 .card-2-heading,
261.pricing-card.active-4 .card-3-heading,
262.pricing-card.active-4 .card-1-heading {
263  display: none;
264}
265.pricing-card.active-4 .price-4 {display: block} 
266.pricing-card.active-4 .price-2,
267.pricing-card.active-4 .price-3,
268.pricing-card.active-4 .price-1{
269  display: none;
270}
271.pricing-card.active-4 .price-4 {display: block} 
272.pricing-card.active-4 .price-2,
273.pricing-card.active-4 .price-3,
274.pricing-card.active-4 .price-1 {
275  display: none;
276}
277.pricing-card.active-4 .card-4-small {display: block} 
278.pricing-card.active-4 .card-2-small,
279.pricing-card.active-4 .card-3-small,
280.pricing-card.active-4 .card-1-small {
281  display: none;
282}
283.pricing-card.active-4 .visits-4 {display: block} 
284.pricing-card.active-4 .visits-2,
285.pricing-card.active-4 .visits-3,
286.pricing-card.active-4 .visits-1 {
287  display: none;
288}
289.pricing-card.active-4 .small-text {display: none}
290</style>
291  <link href="https://uploads-ssl.webflow.com/5d88f370c5599e348fb22cbe/5d8b9e9b916e2bac8bac604b_mapbox_gl.txt" rel="stylesheet">
292  <style>
293.mapboxgl-canvas {
294-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
295}
296.mapboxgl-canvas:focus {
297outline:none;
298}
299</style>
300</head>
301<body>
302  <div class="page-wrap">
303    <div id="map" class="map-2"></div>
304    <div id="features" class="features-2">
305      <div class="intro-section">
306        <h1 class="intro-title-3">How we make an impact</h1>
307        <p class="intro__sub-title-2">Scroll Down To Explore</p>
308      </div>
309      <div id="water-treatment" class="section active">
310        <div class="section__inner-wrap-2">
311          <div class="bg-2"></div>
312          <div class="div-block-6">
313            <h1 class="heading-6">clean energy means clean water </h1>
314            <h1 class="heading-8">20 installations in under 20 days</h1>
315            <p class="paragraph-5">The main causes of the water and sanitation crisis are the depletion and poor quality of Gaza’s single coastal aquifer, which is the source of most of the water in Gaza. Today 97 per cent of this water is unfit for human consumption based on World Health Organization (WHO) standards. To that end, we are powering water treatment and desalination plants across Gaza to provide people with drinkable water. </p>
316          </div>
317          <div class="div-block-49"></div>
318          <div style="padding-top:56.17021276595745%" class="video-2 w-video w-embed"><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2Fj29DylOIeB4%3Ffeature%3Doembed&display_name=YouTube&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dj29DylOIeB4&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2Fj29DylOIeB4%2Fhqdefault.jpg&key=96f1f04c5f4143bcb0f2e68c87d65feb&type=text%2Fhtml&schema=youtube" scrolling="no" title="YouTube embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe></div>
319        </div>
320      </div>
321      <div id="khuzaa" class="section">
322        <div class="section__inner-wrap-2">
323          <h1 class="heading-7"><span class="number">01</span> Khuzaa Desalination</h1>
324          <p class="paragraph-4">This plant serves a unique purpose. Located near the eastern borders of Khanyounis, more than ten farms depend on our system for irrigation.</p>
325        </div>
326      </div>
327      <div id="shajaret-dor" class="section">
328        <div class="section__inner-wrap-2">
329          <h1 class="heading-7"><span class="number">02</span>shajaret dor</h1>
330          <p class="paragraph-4">This desalination plant is located inside one of the main schools in Khanyounis, where almost 2000 children get their elementary education. The people of this area have no clean water to drink, and if it exists, it is very expensive for them.</p>
331        </div>
332      </div>
333      <div id="education" class="section">
334        <div class="section__inner-wrap-2">
335          <div class="bg-2 edu"></div>
336          <div class="div-block-6">
337            <h1 class="heading-6">access to energy = access to education</h1>
338            <h1 class="heading-8">edcuational facility in Shujaaya</h1>
339            <p class="paragraph-5">This centre is located in a very poor village Shujaaya. In 2014, this village was destroyed and thousands of families have lost their houses. This centre is benefiting more than 250 children with its activities and classes every month. The solar system provides this centre the power to run lights, computers, fans and other educational devices.</p>
340          </div>
341        </div>
342      </div>
343      <div id="medical" class="section">
344        <div class="section__inner-wrap-2">
345          <h1 class="heading-7"><span class="number">04</span> medical equipment</h1>
346          <p class="paragraph-4">The Tafesh family&#x27;s youngest son, Yousef, has kidney failure, and depends on a dialysis machine for more than 10 hours a day. While his home has only a few hours of electricity. Yousef had to go to the hospital everyday. Thus, he had no time to see his friends and family. SunBox provided him a solar system that provides him 24/7 electricity. Now he can run his machine home, and play with the kids.</p>
347        </div>
348      </div>
349      <div id="streets" class="section">
350        <div class="section__inner-wrap-2">
351          <div class="bg-2 street"></div>
352          <div class="div-block-6">
353            <h1 class="heading-6">street lights = less accidents</h1>
354            <h1 class="heading-8">driving at night</h1>
355            <p class="paragraph-5">What makes Sekka street links two large neighborhoods with 4 mosques, 2 clinics, 3 pharmacies, and 5 supermarkets. We worked with local community engineers to design a system to make it safe for the 4000+ residents to drive at night, especially in the rainy days, when the streets become muddy and full of puddles. </p>
356          </div>
357        </div>
358      </div>
359      <div id="jabalia" class="section">
360        <div class="section__inner-wrap-2">
361          <h1 class="heading-7"><span class="number">06</span> soccer at night</h1>
362          <p class="paragraph-4">Jablia is home to 350+ families who struggled during the war. The residents of this village try to stay indoors during the hot days they live near the beach and only 14 m above sea level. So during the night, when its cooler out, our solar powered street lights allow for the community to socialize. </p>
363        </div>
364      </div>
365      <div id="beauty" class="section">
366        <div class="section__inner-wrap-2">
367          <h1 class="heading-7"><span class="number">07</span> Beauty Center</h1>
368          <p class="paragraph-4">Yes, we also consider facilitating community spaces as impact. A salon is not just a place where a girl gets her hair done; its a safe space for her to vent about any emotional or domestic abuse she is undergoing; and a networking opportunity for some. </p>
369        </div>
370      </div>
371      <div class="footer-wrap"></div>
372    </div>
373    <div class="nav-wrap-3"><a href="index.html" class="link-block-4 w-inline-block"><img src="https://uploads-ssl.webflow.com/5f5cfe040c473a303d11cbab/5f5d0549415aec9947cec0f0_Logo.png" loading="lazy" data-w-id="d84914f8-f9e6-061b-9134-66fc0bfc393c" alt="" class="image-20 impact"></a>
374      <nav class="nav__inner-wrap-2"><a href="#water-treatment" class="nav-item w-inline-block"></a><a href="#khuzaa" class="nav-item w-inline-block"></a><a href="#shajaret-dor" class="nav-item w-inline-block"></a><a href="#education" class="nav-item w-inline-block"></a><a href="#medical" class="nav-item w-inline-block"></a><a href="#streets" class="nav-item w-inline-block"></a><a href="#jabalia" class="nav-item w-inline-block"></a><a href="#beauty" class="nav-item w-inline-block"></a></nav>
375    </div>
376  </div>
377  
377<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=5ee9e59fbe923af1517e4058" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
377
378  
378<script src="js/sunboxps.js" type="text/javascript"></script>
378
379  <!-- [if lte IE 9]>
379<script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script>
379<![endif] -->
380  
380<script>
381/*! rangeslider.js - v0.3.7 | (c) 2014 @andreruffert | MIT license | https://github.com/andreruffert/rangeslider.js */ ! function(a) {
382    "use strict";
383    "function" == typeof define && define.amd ? define(["jquery"], a) : a("object" == typeof exports ? require("jquery") : jQuery)
384}(function(a) {
385    "use strict";
386    function b() {
387        var a = document.createElement("input");
388        return a.setAttribute("type", "range"), "text" !== a.type
389    }
390    function c(a, b) {
391        var c = Array.prototype.slice.call(arguments, 2);
392        return setTimeout(function() {
393            return a.apply(null, c)
394        }, b)
395    }
396    function d(a, b) {
397        return b = b || 100,
398            function() {
399                if (!a.debouncing) {
400                    var c = Array.prototype.slice.apply(arguments);
401                    a.lastReturnVal = a.apply(window, c), a.debouncing = !0
402                }
403                return clearTimeout(a.debounceTimeout), a.debounceTimeout = setTimeout(function() {
404                    a.debouncing = !1
405                }, b), a.lastReturnVal
406            }
407    }
408    function e(a) {
409        return 0 !== a.offsetWidth || 0 !== a.offsetHeight ? !1 : !0
410    }
411    function f(a) {
412        for (var b = [], c = a.parentNode; e(c);) b.push(c), c = c.parentNode;
413        return b
414    }
415    function g(a, b) {
416        var c = f(a),
417            d = c.length,
418            e = [],
419            g = a[b];
420        if (d) {
421            for (var h = 0; d > h; h++) e[h] = c[h].style.display, c[h].style.display = "block", c[h].style.height = "0", c[h].style.overflow = "hidden", c[h].style.visibility = "hidden";
422            g = a[b];
423            for (var i = 0; d > i; i++) c[i].style.display = e[i], c[i].style.height = "", c[i].style.overflow = "", c[i].style.visibility = ""
424        }
425        return g
426    }
427    function h(b, e) {
428        if (this.$window = a(window), this.$document = a(document), this.$element = a(b), this.options = a.extend({}, m, e), this._defaults = m, this._name = i, this.startEvent = this.options.startEvent.join("." + i + " ") + "." + i, this.moveEvent = this.options.moveEvent.join("." + i + " ") + "." + i, this.endEvent = this.options.endEvent.join("." + i + " ") + "." + i, this.polyfill = this.options.polyfill, this.onInit = this.options.onInit, this.onSlide = this.options.onSlide, this.onSlideEnd = this.options.onSlideEnd, this.polyfill && l) return !1;
429        this.identifier = "js-" + i + "-" + k++, this.min = parseFloat(this.$element[0].getAttribute("min") || 0), this.max = parseFloat(this.$element[0].getAttribute("max") || 100), this.value = parseFloat(this.$element[0].value || this.min + (this.max - this.min) / 2), this.step = parseFloat(this.$element[0].getAttribute("step") || 1), this.toFixed = (this.step + "").replace(".", "").length - 1, this.$fill = a('<div class="' + this.options.fillClass + '" />'), this.$handle = a('<div class="' + this.options.handleClass + '" />'), this.$range = a('<div class="' + this.options.rangeClass + '" id="' + this.identifier + '" />').insertAfter(this.$element).prepend(this.$fill, this.$handle), this.$element.css({
430            position: "absolute",
431            width: "1px",
432            height: "1px",
433            overflow: "hidden",
434            opacity: "0"
435        }), this.handleDown = a.proxy(this.handleDown, this), this.handleMove = a.proxy(this.handleMove, this), this.handleEnd = a.proxy(this.handleEnd, this), this.init();
436        var f = this;
437        this.$window.on("resize." + i, d(function() {
438            c(function() {
439                f.update()
440            }, 300)
441        }, 20)), this.$document.on(this.startEvent, "#" + this.identifier + ":not(." + this.options.disabledClass + ")", this.handleDown), this.$element.on("change." + i, function(a, b) {
442            if (!b || b.origin !== i) {
443                var c = a.target.value,
444                    d = f.getPositionFromValue(c);
445                f.setPosition(d)
446            }
447        })
448    }
449    var i = "rangeslider",
450        j = [],
451        k = 0,
452        l = b(),
453        m = {
454            polyfill: !0,
455            rangeClass: "rangeslider",
456            disabledClass: "rangeslider--disabled",
457            fillClass: "rangeslider__fill",
458            handleClass: "rangeslider__handle",
459            startEvent: ["mousedown", "touchstart", "pointerdown"],
460            moveEvent: ["mousemove", "touchmove", "pointermove"],
461            endEvent: ["mouseup", "touchend", "pointerup"]
462        };
463    h.prototype.init = function() {
464        this.onInit && "function" == typeof this.onInit && this.onInit(), this.update()
465    }, h.prototype.update = function() {
466        this.handleWidth = g(this.$handle[0], "offsetWidth"), this.rangeWidth = g(this.$range[0], "offsetWidth"), this.maxHandleX = this.rangeWidth - this.handleWidth, this.grabX = this.handleWidth / 2, this.position = this.getPositionFromValue(this.value), this.$element[0].disabled ? this.$range.addClass(this.options.disabledClass) : this.$range.removeClass(this.options.disabledClass), this.setPosition(this.position)
467    }, h.prototype.handleDown = function(a) {
468        if (a.preventDefault(), this.$document.on(this.moveEvent, this.handleMove), this.$document.on(this.endEvent, this.handleEnd), !((" " + a.target.className + " ").replace(/[\n\t]/g, " ").indexOf(this.options.handleClass) > -1)) {
469            var b = this.getRelativePosition(a),
470                c = this.$range[0].getBoundingClientRect().left,
471                d = this.getPositionFromNode(this.$handle[0]) - c;
472            this.setPosition(b - this.grabX), b >= d && b < d + this.handleWidth && (this.grabX = b - d)
473        }
474    }, h.prototype.handleMove = function(a) {
475        a.preventDefault();
476        var b = this.getRelativePosition(a);
477        this.setPosition(b - this.grabX)
478    }, h.prototype.handleEnd = function(a) {
479        a.preventDefault(), this.$document.off(this.moveEvent, this.handleMove), this.$document.off(this.endEvent, this.handleEnd), this.onSlideEnd && "function" == typeof this.onSlideEnd && this.onSlideEnd(this.position, this.value)
480    }, h.prototype.cap = function(a, b, c) {
481        return b > a ? b : a > c ? c : a
482    }, h.prototype.setPosition = function(a) {
483        var b, c;
484        b = this.getValueFromPosition(this.cap(a, 0, this.maxHandleX)), c = this.getPositionFromValue(b), this.$fill[0].style.width = c + this.grabX + "px", this.$handle[0].style.left = c + "px", this.setValue(b), this.position = c, this.value = b, this.onSlide && "function" == typeof this.onSlide && this.onSlide(c, b)
485    }, h.prototype.getPositionFromNode = function(a) {
486        for (var b = 0; null !== a;) b += a.offsetLeft, a = a.offsetParent;
487        return b
488    }, h.prototype.getRelativePosition = function(a) {
489        var b = this.$range[0].getBoundingClientRect().left,
490            c = 0;
491        return "undefined" != typeof a.pageX ? c = a.pageX : "undefined" != typeof a.originalEvent.clientX ? c = a.originalEvent.clientX : a.originalEvent.touches && a.originalEvent.touches[0] && "undefined" != typeof a.originalEvent.touches[0].clientX ? c = a.originalEvent.touches[0].clientX : a.currentPoint && "undefined" != typeof a.currentPoint.x && (c = a.currentPoint.x), c - b
492    }, h.prototype.getPositionFromValue = function(a) {
493        var b, c;
494        return b = (a - this.min) / (this.max - this.min), c = b * this.maxHandleX
495    }, h.prototype.getValueFromPosition = function(a) {
496        var b, c;
497        return b = a / (this.maxHandleX || 1), c = this.step * Math.round(b * (this.max - this.min) / this.step) + this.min, Number(c.toFixed(this.toFixed))
498    }, h.prototype.setValue = function(a) {
499        a !== this.value && this.$element.val(a).trigger("change", {
500            origin: i
501        })
502    }, h.prototype.destroy = function() {
503        this.$document.off(this.startEvent, "#" + this.identifier, this.handleDown), this.$element.off("." + i).removeAttr("style").removeData("plugin_" + i), this.$range && this.$range.length && this.$range[0].parentNode.removeChild(this.$range[0]), j.splice(j.indexOf(this.$element[0]), 1), j.length || this.$window.off("." + i)
504    }, a.fn[i] = function(b) {
505        return this.each(function() {
506            var c = a(this),
507                d = c.data("plugin_" + i);
508            d || (c.data("plugin_" + i, d = new h(this, b)), j.push(this)), "string" == typeof b && d[b]()
509        })
510    }
511});
512</script>
512
513  
513<script>
514    $('#ranger').change(function(){
515      console.log($('#ranger').val())
516      if($('#ranger').val() < 100){
517        $('.pricing-card').removeClass('active-1 active-2 active-3 active-4');
518        $('.pricing-card').addClass('active-1');
519      }else if($('#ranger').val() > 101 && $('#ranger').val() < 500){
520        $('.pricing-card').removeClass('active-1 active-2 active-3 active-4');
521        $('.pricing-card').addClass('active-2');
522      }else if($('#ranger').val() > 501 && $('#ranger').val() < 1000){
523        $('.pricing-card').removeClass('active-1 active-2 active-3 active-4');
524        $('.pricing-card').addClass('active-3');
525      }else if ($('#ranger').val() > 1001){
526        $('.pricing-card').removeClass('active-1 active-2 active-3 active-4');
527        $('.pricing-card').addClass('active-4');
528      }
529    })
530  $( document ).ready(function() {
531  // Handler for .ready() called.
532    $('.slide').removeClass('active');
533  });
534  $('input[type="range"]').rangeslider({
535      polyfill: false,
536      rangeClass: 'rangeslider',
537      fillClass: 'rangeslider__fill',
538      handleClass: 'rangeslider__handle',
539      onInit: function() {
540      },
541      onSlide: function(position, value) {
542          $('.rangeslider__handle').attr('data-content', value);
543          $('.done').removeClass('active');
544          $('.slide').addClass('active');
545      },
546      onSlideEnd: function(position, value) {
547        $('.done').addClass('active');
548        $('.slide').removeClass('active');
549      }
550  });
551  </script>
551
552  
552<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.1/mapbox-gl.js"></script>
552
553  
553<script>
554mapboxgl.accessToken = 'pk.eyJ1Ijoia25hZmVoIiwiYSI6ImNqMDk4OTh2ajAwMmQyd25yaWZndzY5c3MifQ.EQtUfQQ2gT2-AQ4InBgtOg';
555var map = new mapboxgl.Map({
556    container: 'map',
557    style: 'mapbox://styles/mapbox/light-v10',
558center: [34.37015, 31.42054],
559zoom: 10.41,
560pitch: 60,
561bearing: 0,
562container: 'map',
563antialias: true,
564interactive: false
565});
566// The 'building' layer in the mapbox-streets vector source contains building-height
567// data from OpenStreetMap.
568map.on('load', function() {
569// Insert the layer beneath any symbol layer.
570var layers = map.getStyle().layers;
571var labelLayerId;
572for (var i = 0; i < layers.length; i++) {
573if (layers[i].type === 'symbol' && layers[i].layout['text-field']) {
574labelLayerId = layers[i].id;
575break;
576}
577}
578map.addLayer({
579'id': '3d-buildings',
580'source': 'composite',
581'source-layer': 'building',
582'filter': ['==', 'extrude', 'true'],
583'type': 'fill-extrusion',
584'minzoom': 15,
585'paint': {
586'fill-extrusion-color': '#aaa',
587// use an 'interpolate' expression to add a smooth transition effect to the
588// buildings as the user zooms in
589'fill-extrusion-height': [
590"interpolate", ["linear"], ["zoom"],
59115, 0,
59215.05, ["get", "height"]
593],
594'fill-extrusion-base': [
595"interpolate", ["linear"], ["zoom"],
59615, 0,
59715.05, ["get", "min_height"]
598],
599'fill-extrusion-opacity': .6
600}
601}, labelLayerId);
602});
603var chapters = {
604    'water-treatment': {
605        bearing: -17.6,
606        center: [34.349002,31.3254],
607        zoom: 15.5,
608        pitch: 45
609    },
610    'khuzaa': {
611        duration: 5000,
612        center: [34.362715,31.315663],
613        bearing: 27,
614        zoom: 17.5,
615        pitch: 90
616    },
617    'shajaret-dor': {
618        bearing: 27,
619        duration: 5000,
620        center: [34.319729,31.343305],
621        zoom: 16,
622        pitch: 40
623    },
624    'education': {
625        bearing: 90,
626        duration: 5000,
627        center: [34.47447288,31.49993718],
628        zoom: 16
629    },
630    'medical': {
631        bearing: 27,
632        duration: 5000,
633        center: [34.472159,31.535026],
634        zoom: 16,
635        pitch: 40,
636    },
637    'streets': {
638        bearing: 90,
639        duration: 5000,
640        center: [34.47065035,31.50754136],
641        zoom: 17,
642        pitch: 60
643    },
644    'jabalia': {
645        bearing: 120,
646        duration: 5000,
647        center: [34.49798995,31.51919664],
648        zoom: 17.3,
649        pitch: 60
650    },
651    'beauty': {
652        bearing: 90,
653        duration: 5000,
654        center: [34.44815731,31.51933119],
655        zoom: 14.3,
656        pitch: 20
657    }
658};
659// On every scroll event, check which element is on screen
660window.onscroll = function() {
661    var chapterNames = Object.keys(chapters);
662    for (var i = 0; i < chapterNames.length; i++) {
663        var chapterName = chapterNames[i];
664        if (isElementOnScreen(chapterName)) {
665            setActiveChapter(chapterName);
666            break;
667        }
668    }
669};
670var activeChapterName = 'water-treatment';
671function setActiveChapter(chapterName) {
672    if (chapterName === activeChapterName) return;
673    map.flyTo(chapters[chapterName]);
674    document.getElementById(chapterName).setAttribute('class', 'active');
675    document.getElementById(activeChapterName).setAttribute('class', '');
676    activeChapterName = chapterName;
677}
678function isElementOnScreen(id) {
679    var element = document.getElementById(id);
680    var bounds = element.getBoundingClientRect();
681    return bounds.top < window.innerHeight && bounds.bottom > 300;
682}
683</script>
683
684</body>
685</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.