-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
819 lines (756 loc) · 46.9 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
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
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
<!DOCTYPE html>
<html lang="en-ZA">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1">
<title>NSPDR Ecosystem</title>
<!-- <title>National Spatial Planning Data Repository (NSPDR Ecosystem)</title> -->
<meta name="description" content="The National Spatial Planning Data Repository (NSPDR Ecosystem) - Enabling Integrated Spatial Planning and Land Use Management.">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="keywords" content="NSPDR, E-Lodgement, Ecosystem, Spatial Planning, Land Use Management, Rural Development, DRDLR, SPLUMA">
<meta name="author" content="Agizo Solutions, on behalf of the Department of Rural Development and Land Reform">
<script>
(function() {
// if firefox 3.5+, hide content till load (or 3 secs) to prevent FOUT
var d = document, e = d.documentElement, s = d.createElement('style');
if (e.style.MozTransform === '') { // gecko 1.9.1 inference
s.textContent = 'body{visibility:hidden}';
var r = document.getElementsByTagName('script')[0];
r.parentNode.insertBefore(s, r);
function f() { s.parentNode && s.parentNode.removeChild(s); }
addEventListener('load', f, false);
setTimeout(f, 3000);
}
})();
</script>
<link rel="icon" href="fluidicon.png">
<link rel="stylesheet" href="css/bootstraps.css">
<link rel="stylesheet" href="css/stylesheet.css">
<link rel="stylesheet" href="css/fa/css/all.css">
<!-- <script async src="https://www.googletagmanager.com/gtag/js?id=UA-123359766-1"></script>
<script>
// Google Analytics - site tag (gtag.js)
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-123359766-1');
</script> -->
</head>
<body id="top" class="bglinearX bg-grey pt5">
<!--[if lte IE 9]>
<p class="upgrade-browser">
You are using an <strong>outdated</strong> browser.
Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience.
</p>
<![endif]-->
<!-- LOADER -->
<div id="preloader"><div class="loader"><img src="img/preloader2.gif"></div></div>
<!-- NAVBAR -->
<!-- <nav class="navbar navbar-expand-md navbar-dark fixed-top scrolling scrolling--below" data-scrolling-offset="500"> -->
<!-- <nav id="navbar-main" class="navbar navbar-expand-md navbar-dark headroom scrolling" data-scrolling-offset="450"> -->
<nav id="navbar-main" class="navbar navbar-expand-md navbar-dark headroom">
<div class="container">
<a id="scrollContext" class="navbar-brand acronym-icon swing" href="#" title="National Spatial Planning Data Repository">
<img class="png-shadow pb-1" src="img/logos/acronym-256.png" alt="NSPDR Brand">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigator" aria-controls="navigator" aria-expanded="false" aria-label="Toggle Navigation" onclick="displayHamburger()">
<span class="navbar-toggler-icon override">
<div id="burgers" class="hamburger hamburger--spin"><div class="hamburger-box"><div class="hamburger-inner"></div></div></div>
</span>
</button>
<div class="collapse navbar-collapse" id="navigator">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link pr-md-3" href="#top" title="You are here!"><span class="fw-600">Home</span><span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle override" href="#" id="navDropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
About<i class="fa fa-sm fa-angle-down ml-2"></i>
</a>
<div class="dropdown-menu" aria-labelledby="navDropdown1">
<div class="dropdown-header d-none d-md-block"><small>Learn More ></small></div>
<div class="dropdown-divider d-none d-md-block"></div>
<a class="dropdown-item" href="docs/about.html"><i class="fa fa-sm fa-question-circle mr-3"></i>About <span class="fw-700">NSPDR</span></a>
<a class="dropdown-item" href="docs/publication.html"><i class="fa fa-sm fa-flag mr-3"></i>2018 Publication</a>
<div class="dropdown-divider --alt d-none d-md-block"></div><div class="dropdown-divider d-md-none d-block"></div>
<a class="dropdown-item" href="docs/news.html"><i class="fa fa-sm fa-rss mr-2"></i> News & Updates</a>
<a class="dropdown-item" href="docs/resources.html"><i class="fa fa-sm fa-link mr-3"></i>Additional Content</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle override" href="#" id="navDropdown2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Features<i class="fa fa-sm fa-angle-down ml-1"></i>
</a>
<div class="dropdown-menu" aria-labelledby="navDropdown2">
<div class="dropdown-header d-none d-md-block"><small>Ecosystem ></small></div>
<div class="dropdown-divider d-none d-md-block"></div>
<a class="dropdown-item" href="docs/ecosystem.html"><i class="fa fa-sm fa-database mr-3"></i>Data Repository</a>
<a class="dropdown-item" href="docs/elodgement.html"><i class="fa fa-sm fa-map-marker-alt mr-2"></i> E⁃Lodgement</a>
<a class="dropdown-item" href="docs/ecosystem.html#e-learning"><i class="fa fa-sm fa-user mr-3"></i>E⁃Learning <b>✓</b></a>
<div class="dropdown-divider --end d-none d-md-block"></div><div class="dropdown-divider d-md-none d-block"></div>
<a class="dropdown-item" href="docs/spluma.html"><i class="fa fa-sm fa-bullhorn mr-1"></i> Enabling SPLUMA</a>
</div>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<a class="btn btn-outline-warning opaque-85 my-2 my-md-0" href="docs/contact.html">GET IN TOUCH<i class="fa fa-sm fa-phone ml-2"></i></a>
</form>
</div>
</div>
</nav>
<!-- CAROUSEL -->
<section class="carousel-hero mask-10" style="z-index:1;position:relative;top:0px!important">
<div id="slideCarousel" class="carousel slide drop-shadow" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#slideCarousel" data-slide-to="0" class="active"></li>
<li data-target="#slideCarousel" data-slide-to="1"></li>
<li data-target="#slideCarousel" data-slide-to="2"></li>
<li data-target="#slideCarousel" data-slide-to="3"></li>
<li data-target="#slideCarousel" data-slide-to="4"></li>
<li data-target="#slideCarousel" data-slide-to="5"></li>
</ol>
<div class="carousel-inner slide-hero" style="background-image:url('img/nspdr-hero.jpg')">
<div class="carousel-item active">
<div class="slide-nspdr png-shadow pull-lg-up1" style="background-image:url('img/title-ecosystem.png')"></div>
<!-- <div class="hero-inner">
<div class="container">
<img class="img-fluid png-shadows" src="img/title-ecosystem.png" alt="NSPDR Ecosystem">
</div>
</div> -->
</div>
<div class="carousel-item">
<div class="container">
<div class="carousel-caption text-left">
<h1 class="display-4">Inclusive framework</h1>
<p>the <a class="pointer fw-700" role="button" data-toggle="modal" data-target="#modalCallout00">NSPDR</a> is a digital ecosystem for national spatial planning, that enables the sharing of spatial planning information and data across all spheres of government, as well as supporting key objectives of <a class="pointer fw-700" role="button" data-toggle="modal" data-target="#modalCallout01">SPLUMA</a> and the <a class="pointer fw-700" role="button" data-toggle="modal" data-target="#modalCallout02">NDP</a>.</p>
</div>
</div>
</div>
<div class="carousel-item">
<!-- <div class="slide-nspdr png-shadow" style="background-image:url('img/logos/inners-inline.png')"></div> -->
<div class="slide-nspdr png-shadow pull-lg-up1" style="background-image:url('img/logos/acronym-lite.png')"></div>
</div>
<div class="carousel-item">
<div class="container">
<div class="carousel-caption text-center">
<h1 class="display-4">Fulfilling commitments</h1>
<p>through the development of the <a class="pointer fw-700" role="button" data-toggle="modal" data-target="#modalCallout00">NSPDR</a>, the <a class="pointer fw-700" role="button" data-toggle="modal" data-target="#modalCallout03">DRDLR</a> proudly committed itself to the provision of <a class="pointer fw-700" role="button" data-toggle="modal" data-target="#modalCallout01">SPLUMA</a>’s core mandate, by developing mechanisms that support and strengthen the capability of our provinces and municipalities.</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="slide-nspdr png-shadow pull-lg-up1" style="background-image:url('img/title-elodgement.png')"></div>
</div>
<div class="carousel-item">
<div class="container">
<div class="carousel-caption text-right">
<h1 class="display-4">Empowering municipalities</h1>
<p>the ultimate objective of <strong>E⁠·⁠Lodgement</strong> is to honour the <a class="pointer fw-700" role="button" data-toggle="modal" data-target="#modalCallout03">DRDLR</a>’s responsibility in terms of <a class="pointer fw-700" role="button" data-toggle="modal" data-target="#modalCallout01">SPLUMA</a>, by automating the land development process and workflow through the online “electronic” lodgement of land use applications.</p>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#slideCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#slideCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
<!-- MAIN-CONTENT -->
<main class="nspdr-background --raised circular top-brown" style="margin-top:-60px!important">
<article class="bg-honeycomb">
<section class="segment --headers" draggable="true">
<div class="container pt-4 pt-sm-5">
<div class="row text-center text-lg-left align-items-center">
<div class="col-9 col-md-7 col-lg-5 col-xl-4 m-auto m-lg-0">
<!-- <img alt="NSPDR Ecosystem" class="img-fluid png-raised p-2" src="img/logos/nspdr-500x500.png"> -->
<img alt="NSPDR Ecosystem" class="img-fluid png-raised p-2" src="img/logos/nspdr-round.png">
</div>
<div class="col-12 col-lg-7 col-xl-8 pt-4 pt-lg-0">
<h1 class="condensed-1 fw-700 grey-77 mb-1">National Spatial Planning Data Repository</h1>
<h2 class="condensed-1 fw-600 grey-68 mt-1">Integrated Spatial Planning and Land Use Management</h2>
<div class="row text-left mt-3">
<div class="col-12 col-sm-6">
<h4 class="grey-85 mb-1"><strong>Data Repository</strong></h4>
<p class="">The NSPDR Ecosystem enables the sharing of spatial planning information across all spheres of government, as well as the private sector, and supports key objectives of the NDP, and most importantly, SPLUMA. <a href="docs/ecosystem.html">[Learn More]</a></p>
</div>
<div class="col-12 col-sm-6 pt-3 pt-sm-0">
<h4 class="grey-85 mb-1"><strong>E-Lodgement</strong></h4>
<p class="">From the very beginning, our application was developed with SPLUMA at the centre of the design process. Resulting in a workflow that’s completely aligned both with the act itself, but also its regulations. <a href="docs/elodgement.html">[Learn More]</a></p>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="container"><hr class="dark"></div>
<!-- MARKETING -->
<section class="segment --headers" draggable="true">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-lg-10">
<!-- <h2 class="section-title">New Paradigm In Planning</h2> -->
<h2 class="section-title">New Planning Paradigm</h2>
<div class="nspdr-divider1"></div>
<p class="lead grey-68">The CHALLENGE for any planning framework in South Africa, has always been the question of how to balance the technicality of spatial planning and land use management, with the broader issues of socio⁠-⁠economic development.</p>
</div>
</div>
<div class="row justify-content-center mt-5 no-gutters">
<div class="col-12 col-lg-11">
<div class="row align-items-center no-gutters">
<div class="col-11 col-sm-8 col-md-7 col-lg-4 mx-auto">
<div class="box-block top-brown pull-lg-right2 p4 pr-lg-5">
<img alt="NSPDR Icon" class="icon-150 mt-0 mt-lg-2" src="img/icons/icon4.png">
<h2 class="h1 condensed-1 text-trunc">Data Repository</h2>
<hr class="dark mx-4">
<p class="lead-1 px-4 px-lg-0">A digital and innovative ecosystem for national spatial planning, that will enable the sharing of spatial planning information and data across all three spheres of government.</p>
<p class="pt-3">
<a href="docs/ecosystem.html" class="btn btn-md btn-pill btn-nspdr2 btn-shadow --push px-4 py-1 m-4 my-lg-1">Read More</a>
</p>
</div>
</div>
<div class="col-11 col-xs-11 col-sm-8 col-md-7 col-lg-4 mx-auto mt-5 mt-lg-0 py-0 py-lg-3 box-block --main top-green">
<div class="p4">
<img alt="NSPDR Icon" class="icon-150 mt-0 mt-lg-2" src="img/icons/icon1.png">
<h2 class="h1">E⁠-Lodgement</h2>
<hr class="dark mx-4">
<p class="lead-1 px-4 px-lg-0">This application’s main objective is to honour the Department’s responsibility in terms of SPLUMA, by fully automating the land development application process.</p>
<p class="pt-3">
<a href="docs/elodgement.html" class="btn btn-md btn-pill btn-nspdr1 btn-shadow --pop px-4 py-1 m-4 my-lg-1">Learn More</a>
</p>
</div>
</div>
<div class="col-11 col-sm-8 col-md-7 col-lg-4 mx-auto mt-5 mt-lg-0">
<div class="box-block top-greyy pull-lg-left2 p4 pl-lg-5">
<img alt="NSPDR Icon" class="icon-150 mt-0 mt-lg-2" src="img/icons/icon2.png">
<h2 class="h1 condensed-1 text-trunc">Enable SPLUMA</h2>
<hr class="dark mx-4">
<p class="lead-1 px-4 px-lg-0">With mechanisms to support and strengthen provincial and municipal capacity to adopt and implement an effective spatial planning and land use management system.</p>
<p class="pt-3">
<a href="docs/spluma.html" class="btn btn-md btn-pill btn-nspdr4 btn-shadow --push px-4 py-1 m-4 my-lg-1">Know More</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="container"><hr class="space-4"><hr class="light"></div>
<section class="segment --headers" draggable="true">
<div class="container">
<div class="row justify-content-center pb-3 pb-lg-5">
<div class="col-12 col-lg-10 ml-md-3">
<!-- <h2 class="section-title">Framework Affirmation</h2> -->
<h2 class="section-title">Participatory Framework</h2>
<div class="nspdr-divider2"></div>
<p class="lead grey-68">The <strong>NSPDR</strong> Ecosystem will enable sharing of spatial planning information across all spheres of government and the private sector and will support key objectives of the NDP.</p>
</div>
</div>
<div class="row justify-content-center no-gutters">
<div class="col-12 col-lg-11">
<div class="row text-right align-items-center no-gutters">
<div class="col-10 col-sm-7 col-lg-4 m-auto">
<img alt="NSPDR" class="img-fluid png-raised" src="img/uiux/ipad2.png">
</div>
<div class="col-12 col-lg-6 col-xl-5 m-lg-auto text-left pt-5 pt-lg-0">
<h2 class="grey-68 fw-500">Implementing Policy</h2>
<p class="lead-1 pb-xl-2">The NSPDR Ecosystem will be a major enabler in the implementation of SPLUMA. Two ways this will be achieved is by <strong>providing</strong> provinces and municipalities with . . .</p>
<div class="row pt-4">
<div class="col-3">
<img alt="NDP" class="img-fluid img-raised icon-125 grow-large rounded-circle" src="img/logos/ndp-426x426.jpg">
</div>
<div class="col-9">
<p class="">... integrated development planning across the spheres of government as required by key planning policies and legislations such as the <strong>NDP</strong>.</p>
</div>
</div>
<div class="row pt-4">
<div class="col-9 text-right">
<p class="">... the necessary tools and capacity building to enable <strong>SPLUMA</strong>-compliant spatial planning and land use management practices.</p>
</div>
<div class="col-3">
<img alt="SPLUMA" class="img-fluid img-raised icon-125 grow-large rounded-circle" src="img/logos/spluma-200x198.png">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="container"><hr class="space-4"><hr class="light mb-0"></div>
<section class="segment --headers" draggable="true">
<div class="container">
<div class="row justify-content-center pb-4 pb-md-5">
<div class="col-12 col-lg-10">
<h2 class="section-title">Responsive Technology</h2>
<div class="nspdr-divider3"></div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-12 col-lg-10 text-left mb-2 mb-lg-5 d-none">
<h3 class="h2 condensed-1 text-nspdr11 ml-3">
Responsive Design <a href="docs/ecosystem.html#technology">>>></a>
</h3>
</div>
<div class="col-12 col-md-11 col-lg-10 mx-auto align-self-center">
<img class="img-fluid png-raised" src="img/uiux/responsive.png" alt="NSPDR Interfaces">
<!-- <img class="img-fluid png-raised" src="img/uiux/responsive2.png" alt="NSPDR Interfaces"> -->
</div>
<div class="col-12 col-lg-10 text-right mt-2 mt-lg-4">
<h4 class="h2 fw-500 grey-119 mr-3">
PCs, laptops, tablets and phones<br><span class="grey-153 fw-400">(basically any device)</span>
</h4>
</div>
</div>
</div>
</section>
<hr class="space-3">
<!-- <div class="container"><hr class="light"></div> -->
<section class="segment --headers" draggable="true">
<div class="container">
<div class="row justify-content-center no-gutters">
<div class="col-12 col-lg-10">
<div class="row align-items-center">
<div class="col-12 col-md-12 col-lg-6 col-xl-5">
<h2 class="section-title">Cross-browser compatibility:-</h2>
<!-- <p class="lead mb-5"> -->
<!-- Something that makes a website great is when it is compatible in multiple browsers regardless of version... Multi-browser means a website will work in several web browsers like Safari, Chrome, Firefox, Internet Explorer. While cross-browser means a website works in any browser, and any version of the browser being used. -->
<!-- The ecosystem is cross-browser compatibile; works in any browser, and any version of the browser being used. -->
<!-- </p> -->
<p class="lead-2 pl-2 mt-5">Works in all <strong>modern</strong> browsers . . .</p>
<div class="container">
<div class="row justify-content-around justify-content-lg-start">
<img alt="Chrome" title="Chrome" class="browser-icon grow-large" src="img/logos/browser-chrome-128x128.png"/>
<img alt="Firefox" title="Firefox" class="browser-icon grow-large ml-1 ml-sm-2" src="img/logos/browser-firefox-128x128.png"/>
<img alt="Opera" title="Opera" class="browser-icon grow-large ml-1 ml-sm-2" src="img/logos/browser-opera-128x128.png"/>
<img alt="Safari" title="Safari" class="browser-icon grow-large ml-1 ml-sm-2" src="img/logos/browser-safari-128x128.png"/>
<img alt="Edge" title="Edge" class="browser-icon grow-large ml-1 ml-sm-2" src="img/logos/browser-edge-128x128.png"/>
</div>
</div>
</div>
<div class="col-12 col-md-8 col-lg-6 m-auto ml-lg-auto mr-lg-0 pt-5 pt-lg-0">
<img alt="NSPDR Ecosystem" class="img-fluid png-raised" src="img/uiux/imacbook.png">
</div>
</div>
</div>
</div>
</div>
</section>
<hr class="space-1" id="nspdr-countdown">
<!-- CALL-TO-ACTION -->
<section class="d-none start-of-page mx-2 mx-sm-3 mx-md-4 mx-lg-5 rounded bg-background" draggable="true" style="background-image:url('img/theme/bg-greyy.svg')">
<a class="btn btn-md btn-outline-danger fill btn-shadow rounded-circle ml-5" href="docs/news.html" role="button" style="position:relative;top:0px!important;margin-top:-30px!important" title="This date has changed recently! Find out more..."><i class="fa fa-lg fa-question py-2"></i></a>
<div class="container">
<div class="row justify-content-center text-center mt2">
<div class="col-10 mx-auto">
<h2 id="countText" class="display-4 condensed-2 fw-700 text-secondary">COMING SOON !</h2>
<div class="col-md-6 mx-auto"><div class="special-divider m-4"></div></div>
</div>
</div>
<div class="row justify-content-center text-center">
<div class="col-12 col-lg-11 col-xl-10 mx-auto">
<table class="table table-borderless">
<tbody class="mini-shadow">
<tr id="circa" class="display-2 condensed-3">
<td id="countDays" class="grey-34 fw-700">00</td>
<td class="clock-splitter hue-red pl-sm-4">:</td>
<td id="countHour" class="grey-68 fw-600">00</td>
<td class="clock-splitter hide-on-mobile">:</td>
<td id="countMins" class="grey-102 hide-on-mobile fw-500">00</td>
<td class="clock-splitter hide-on-laptop pr-4">:</td>
<td id="countSecs" class="hide-on-laptop fw-300 hue-red text-left pl-4">00</td>
</tr>
</tbody>
<tbody class="text-center">
<tr class="h5 expanded-4 fw-300 text-dark">
<td class="px-sm-4"> DAYS</td>
<td class=""></td>
<td class="px-md-5"> HRS</td>
<td class="hide-on-mobile"></td>
<td class="hide-on-mobile px-md-5"> MIN</td>
<td class="hide-on-laptop"></td>
<td class="hide-on-laptop px-md-4"> SEC </td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row text-right">
<div class="col-12 mt-5">
<a class="btn btn-md btn-pill btn-outline-nspdr4 btn-shadow --wobbleX fw-700 mr-0 mr-md-1" href="docs/spluma.html#spluma-countdown" role="button">
and SPLUMA?<i class="fa fa-sm fa-angle-double-right ml-2"></i>
</a>
</div>
</div>
<hr class="space-2">
</div>
</section>
<hr class="space-8">
<section class="start-of-page mx-2 mx-sm-3 mx-md-5 rounded bg-background" draggable="true" style="background-image:url('img/theme/bg-greener.svg')">
<hr class="space-1">
<div class="container pb-3">
<div class="row justify-content-center no-gutters">
<div class="col-12 col-lg-11">
<div class="row justify-content-center align-items-center py-4">
<div class="col-10 col-sm-8 col-lg-9 text-center text-sm-left">
<h2 class="fw-600 text-light dark-shadow ml-sm-4 mb-1">Use the NSPDR for all your planning projects.</h2>
</div>
<div class="col-12 d-block d-sm-none"><hr class="space-6"></div>
<div class="col-12 col-sm-4 col-md-3 text-center mt-4 mt-sm-2">
<a class="btn btn-lg btn-pill btn-outline-nspdr2 btn-shadow --wobbleX fw-600" href="docs/ecosystem.html#technology"> Take a Tour </a>
</div>
</div>
</div>
</div>
</div>
<hr class="space-2">
</section>
<hr class="space-8">
<!-- <div class="container"><hr class="dark-divider"></div> -->
<hr class="space-6">
<!-- FEATURETTES -->
<section id="features" class="features" draggable="true">
<div class="container marketing">
<div class="row justify-content-center no-gutters">
<div class="col-12 col-lg-11">
<div class="row featurette">
<div class="col-lg-6">
<h2 class="featurette-heading with-image">
Enables sharing of<br><span class="text-muted">spatial planning data.</span>
</h2>
<p class="lead">
The <small class="fw-700">NSPDR</small> ecosystem will ensure the most up-to-date integration of government project data for <strong>efficient and effective</strong> spatial planning. It enables the sharing of spatial data throughout the country, across all spheres of government including the private sector, through and with the guidance of the <a class="pointer fat" role="button" data-toggle="modal" data-target="#modalCallout06">SDI</a> Act.
<!-- The development of the <small class="fw-700">NSPDR</small> ecosystem will enable sharing of spatial planning information across all spheres of government and the private sector and will support a key objective of the NDP. -->
</p>
</div>
<div class="col-lg-6 mx-auto align-self-center">
<!-- <img class="img-fluid img-shadow" src="img/uiux/front-end.jpg" alt="NSPDR Front-End"> -->
<div class="card img-shadow border-0 rounded-0 overflow-hidden">
<div class="card-img-bg" style="background-image:url('img/uiux/front-end.jpg')"></div>
<div class="card-body p-5"></div>
</div>
</div>
</div>
<hr class="featurette-divider light">
<div class="row featurette">
<div class="col-lg-7 order-lg-2">
<h2 class="featurette-heading with-image">
Capital expenditure<br><span class="text-muted">represented spatially.</span>
</h2>
<p class="lead">
The <small class="fw-700">NSPDR</small> ecosystem will support the monitoring of all capital and operational expenditure within the public sector (which currently is not done in a collaborative manner), through the digital <strong>representation</strong> of such projects <strong>spatially</strong>. Furthermore, the level and access to data will have modern encryption and security protocols to ensure sensitive data is protected where needed.
</p>
</div>
<div class="col-lg-5 mx-auto order-lg-1 align-self-center">
<img class="img-fluid img-shadow" src="img/uiux/ecosystem-1.png" alt="NSPDR User Interface">
<!-- <div class="card img-shadow border-0 rounded-0 overflow-hidden">
<div class="card-img-bg" style="background-image:url('img/uiux/ecosystem-1.png')"></div>
<div class="card-body p-5"></div>
</div> -->
</div>
</div>
<hr class="featurette-divider light">
<div class="row featurette">
<div class="col-lg-7">
<h2 class="featurette-heading with-image">
Visually monitored<br><span class="text-muted">decision-making tools.</span>
</h2>
<p class="lead">
The <small class="fw-700">NSPDR</small> ecosystem enables management to monitor contributions and data maintenance by all departments through a comprehensive, visual monitoring <strong>dashboard system</strong>.<br>
By indicating the status of the contribution, as well as the status of the individual projects themselves, the ecosystem ensures planning is done with the most recent information at hand.
</p>
</div>
<div class="col-lg-5 mx-auto align-self-center">
<img class="img-fluid img-shadow" src="img/uiux/ecosystem-2.png" alt="NSPDR User Interface">
<!-- <div class="card img-shadow border-0 rounded-0 overflow-hidden">
<div class="card-img-bg" style="background-image:url('img/uiux/ecosystem-2.png')"></div>
<div class="card-body p-5"></div>
</div> -->
</div>
</div>
<hr class="featurette-divider light">
<div class="row featurette">
<div class="col-lg-6 order-lg-2">
<h2 class="featurette-heading with-image">
Land use innovation<br><span class="text-muted">through automation.</span>
</h2>
<p class="lead">
Currently, there’s only one online portal which is accessible in just two provinces that can assist municipalities with spatial planning and land use management issues.<br>
Addressing this deficiency, the <small class="fw-700">NSPDR</small> ecosystem through it’s <strong>E⁠·⁠Lodgement</strong> application, provides a portal readily available to all municipalities in all provinces, thereby ensuring national coverage.
<a href="docs/elodgement.html#learn-more">[Learn More]</a>
</p>
</div>
<div class="col-lg-6 mx-auto order-lg-1 align-self-center">
<!-- <img class="img-fluid img-shadow" src="img/uiux/elodgement-1.jpg" alt="NSPDR E-Lodgement"> -->
<div class="card img-shadow border-0 rounded-0 overflow-hidden">
<div class="card-img-bg" style="background-image:url('img/uiux/elodgement-1.jpg')"></div>
<div class="card-body p-5"></div>
</div>
</div>
</div>
</div>
</div>
</div> <!-- /.container .marketing -->
</section>
<div class="container"><hr class="space-7"><hr class="dark-divider my-3"></div>
<section class="segment --headers" draggable="true">
<div class="container">
<!-- <div class="row justify-content-center">
<div class="col-12 col-sm-11 col-md-10"> -->
<div class="row justify-content-center pb-xl-3">
<div class="col-12 col-md-10 text-center">
<h2 class="display-4 condensed-2 fw-400 text-drdlr1">Data Driven <span class="fw-600">Spatial Planning</span></h2>
<div class="col-10 col-md-8 mx-auto">
<div class="nspdr-divider2 --extra mx-auto my-4"></div>
</div>
<p class="lead">The <span class="fw-700">NSPDR</span> Ecosystem will ensure up-to-date integration of most government project data for efficient and effective spatial planning. It will also enable sharing of spatial data throughout the country and across the public and private sectors.</p>
</div>
</div>
<div class="row text-right align-items-center-lg align-items-end pt-5">
<div class="col-8 col-md-6 col-lg-4 m-auto my-md-0m-lg-auto">
<img alt="NSPDR" class="img-fluid png-raised" src="img/uiux/iphone.png">
</div>
<div class="col-12 col-md-10 col-lg-6 col-xl-5 m-auto text-left pt-5 pt-lg-0">
<p class="mt-5 mt-lg-3"><img alt="NSPDR" height="40" src="img/logos/acronym-dark.png"></p>
<h3 class="fw-600 grey-68 mt-5">Spatial Data</h3>
<p class="mb-1">Source datasets and models derived from spatial data provided by base data custodians, SDF guidelines, as well as the E-Lodgement application layer, can be used to design customised data models, validations and a whole lot more.</p>
<p class="lead-1"><a href="docs/ecosystem.html#spatial-data">Available datasets ></a></p>
<h3 class="fw-600 grey-68 mt-5">Geo-Analytics</h3>
<p class="mb-1">The portal hosts and contains an amazing variety of advanced GIS tools and functions. The portal will be the main place where users can access various web maps, mapping services, metadata, and E-Lodgement amongst others.</p>
<p class="lead-1"><a href="docs/ecosystem.html#geo-tools">Tools and features ></a></p>
<h3 class="fw-600 grey-68 mt-5">E-Learning</h3>
<p class="mb-1">This easy to use platform is dedicated to help create and achieve an environment that appeals to everyone’s learning levels. It allows learners to acquire skills faster, retain knowledge longer, and apply these skills in the real world.</p>
<p class="lead-1"><a href="docs/ecosystem.html#e-learning">Training platform ></a></p>
</div>
</div>
</div>
<!-- </div>
</div> -->
</section>
<div class="container"><hr class="space-4"><hr class="dark"></div>
<section class="segment --headers" draggable="true">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-sm-11 col-md-10 text-left">
<h3 class="h2grey-51 text-black fw-400 no-spacing ml-sm-2">Proudly brought to you by ...</h3>
<!-- <a class="card-link" href="http://www.drdlr.gov.za" target="_blank"> -->
<img class="img-fluid p-sm-3 mt-5" alt="DRDLR Logo" src="img/logos/drdlr-layer.png">
<!-- </a> -->
</div>
</div>
</div>
</section>
<!-- <div class="container"><hr class="space-4"><hr class="light"><hr class="space-4"></div> -->
<div class="container"><hr class="dark mx-5 px-5"></div>
<!-- <hr class="space-4">
<section class="start-of-page mx-2 mx-sm-3 mx-md-5 rounded bg-background" draggable="true" style="background-image:url('img/theme/bg-greener.svg')">
<hr class="space-1">
<div class="container pb-3">
<div class="row justify-content-center no-gutters">
<div class="col-12 col-lg-11">
<div class="row align-items-center py-4">
<div class="col-12 col-sm-8 col-lg-9 text-center text-sm-left">
<h2 class="fw-600 text-light dark-shadow ml-4 mb-1">Use the NSPDR for all your planning projects.</h2>
</div>
<div class="col-12 d-block d-sm-none"><hr class="space-6"></div>
<div class="col-12 col-sm-4 col-md-3 text-center mt-4 mt-sm-2">
<a class="btn btn-lg btn-pill btn-outline-nspdr2 btn-shadow --wobbleY fw-600" href="docs/ecosystem.html#technology"> Take a Tour </a>
</div>
</div>
</div>
</div>
</div>
<hr class="space-2">
</section>
<hr class="space-4"> -->
<section class="segment --headers" draggable="true">
<div class="container pt-4 pt-lg-3">
<div class="row justify-content-center text-center">
<div class="col-12 col-lg pt-4 pt-lg-0 mx-auto">
<a class="fab fa-5x fa-internet-explorer mb-4 text-nspdr3 mini-shadow"></a>
<p class="lead-2 grey-68 leading-3">
<a class="texttertiary grey-68" href="mailto:support.nspdr@drdlr.gov.za">support.nspdr@drdlr.gov.za</a><br>
<a class="h3 fw-500 no-spacing" href="http://www.drdlr.gov.za" target="_blank">www.drdlr.gov.za</a>
</p>
</div>
<div class="col-12 col-lg pt-4 pt-lg-0 mx-auto">
<a class="fa fa-5x fa-map-marker-alt mb-4 text-nspdr2 mini-shadow"></a>
<p class="lead-2 grey-68 leading-3">
224 Helen Joseph Street
<br>Capitol Towers
<br>Pretoria
</p>
</div>
<div class="col-12 col-lg pt-4 pt-lg-0 mx-auto">
<a class="fa fa-5x fa-phone mb-4 text-nspdr1 mini-shadow"></a>
<p class="lead-2 grey-68 leading-3">
(012) 312-9665 /
<br>(012) 312-9852  
</p>
</div>
</div>
</div>
</section>
<hr class="space-2">
</article>
</main>
<!-- FOOTER -->
<footer class="nspdr-footer" id="end">
<div class="container-fluid">
<div class="row no-gutters justify-content-center">
<div class="col-12 col-sm-6 col-lg-4">
<div class="copyright float-sm-left text-sm-left">
© 2018 · Rural Development & Land Reform
</div>
</div>
<div class="col-auto col-sm-6 col-lg-4 order-lg-3">
<div class="float-sm-right text-sm-right">
<ul class="underline-on-hover sibling-fade">
<li><a href="#top">Home</a></li>
<li><a href="docs/news.html">News</a></li>
<li><a href="docs/about.html">About</a></li>
<li><a href="docs/privacy.html">Terms</a></li>
</ul>
</div>
</div>
<div class="col-12 col-md-8 col-lg-4 order-lg-2">
<div class="pt-3 pt-md-2 pt-lg-0">
<ul class="social-media">
<li class="--facebook"><a href="https://www.facebook.com/Department-of-Rural-Development-and-Land-Reform-279632028822386" target="_blank" class="fab fa-facebook-f" title="Facebook"></a></li>
<li class="--twitter"><a href="https://twitter.com/DRDLR_online" target="_blank" class="fab fa-twitter" title="Twitter"></a></li>
<li class="--instagram"><a href="https://www.instagram.com/drdlr_sa" target="_blank" class="fab fa-instagram" title="Instagram"></a></li>
<li class="--youtube"><a href="https://www.youtube.com/user/DRDLROnline" target="_blank" class="fab fa-youtube" title="YouTube"></a></li>
</ul>
</div>
</div>
</div>
</div>
<i id="scroll-to-top" title="Scroll Top" class="fa fa-2x fa-caret-square-up"></i>
<i id="debug-grid" title="Debugger" class="debug-icon visible fa fa-2x fa-bug"></i>
<i id="point-breaks" class="media-breakpoint swing d-none fa fa-sm fa-tv"> </i>
</footer>
<!-- MODALS -->
<div id="acronym-modals">
<div class="modal fade" id="modalCallout00" tabindex="-1" role="dialog" aria-labelledby="modalCalloutTitle00" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title text-nspdr11 fat" id="modalCalloutTitle00">NSPDR</h3>
<button type="button" class="close --bigger" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body text-black mx-1 lead-2">National Spatial Planning Data Repository</div>
</div>
</div>
</div>
<div class="modal fade" id="modalCallout01" tabindex="-1" role="dialog" aria-labelledby="modalCalloutTitle01" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title text-nspdr11 fat" id="modalCalloutTitle01">SPLUMA</h3>
<button type="button" class="close --bigger" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body text-black mx-1">
<p class="lead-2 mb-1">Spatial Planning and Land Use Management Act</p>
<p class="lead">(Act <small>№</small> 16 of 2013)</p>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modalCallout02" tabindex="-1" role="dialog" aria-labelledby="modalCalloutTitle02" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title text-nspdr11 fat" id="modalCalloutTitle02">NDP</h3>
<button type="button" class="close --bigger" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body text-black mx-1 lead-2">National Development Plan</div>
</div>
</div>
</div>
<div class="modal fade" id="modalCallout03" tabindex="-1" role="dialog" aria-labelledby="modalCalloutTitle03" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title text-nspdr11 fat" id="modalCalloutTitle03">DRDLR</h3>
<button type="button" class="close --bigger" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body text-black mx-1 lead-2">Department of Rural Development and Land Reform</div>
</div>
</div>
</div>
<div class="modal fade" id="modalCallout04" tabindex="-1" role="dialog" aria-labelledby="modalCalloutTitle04" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title text-nspdr11 fat" id="modalCalloutTitle04">SDF</h3>
<button type="button" class="close --bigger" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body text-black mx-1 lead-2">Spatial Development Framework</div>
</div>
</div>
</div>
<div class="modal fade" id="modalCallout05" tabindex="-1" role="dialog" aria-labelledby="modalCalloutTitle05" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title text-nspdr11 fat" id="modalCalloutTitle05">GIS</h3>
<button type="button" class="close --bigger" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body text-black mx-1 lead-2">Geo-Informatic Science(s)</div>
</div>
</div>
</div>
<div class="modal fade" id="modalCallout06" tabindex="-1" role="dialog" aria-labelledby="modalCalloutTitle06" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title text-nspdr11 fat" id="modalCalloutTitle06">SDI</h3>
<button type="button" class="close --bigger" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body text-black mx-1">
<p class="lead-2 mb-1">Spatial Data Infrastructure Act</p>
<p class="lead">(Act <small>№</small> 54 of 2003)</p>
</div>
</div>
</div>
</div>
</div>
<!-- ========== JavaScript ========== -->
<!-- Placed here so pages load faster -->
<script src="js/modernizr.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/twbsmd.min.js"></script>
<!-- <script src="js/vendor/scrollstyler.js"></script> -->
<script src="js/vendor/headroom.min.js"></script>
<script src="js/nspdr-scripts.js"></script>
<!-- <script>
$(document).ready(function() {
// var dueDate = new Date('Nov 05, 2018 08:00:00').getTime();
var dueDate = new Date('2019-03-01 08:00:00').getTime();
var chronograph = setInterval(function() {
var now = new Date().getTime();
if (dueDate > now) {
var diff = dueDate - now;
} else {
var diff = now - dueDate;
$('#countText').html('LIVE! FOR THE PAST');
}
var dd = Math.floor(diff / (1000 * 3600 * 24)),
hh = Math.floor((diff % (1000 * 3600 * 24)) / (1000 * 3600)),
mm = Math.floor((diff % (1000 * 3600)) / (1000 * 60)),
ss = Math.floor((diff % (1000 * 60)) / 1000);
var times = [dd, hh, mm, ss];
for (var i = 0; i < times.length; i++) {
times[i] = (times[i] < 10 ? '0' : '') + times[i];
$('#circa td:eq(' + (i * 2) + ')').html(times[i]);
}
}, 1000);
});
</script> -->
</body>
</html>