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'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.