♻️ user journey paged part 2

custom-webpack.config.js

@@ -9,6 +9,11 @@ module.exports = {
       exclude: ['vendor.*.js'],
     })
   ],
+  output: {
+    path: path.resolve('dist'),
+    publicPath: '/',
+    filename: 'bundle.js'
+  },
   module: {
     rules: [
       {

package.json

@@ -2,6 +2,7 @@
   "name": "attractiveness-explorer-app",
   "version": "0.1.1",
   "private": true,
+  "homepage": "/",
   "scripts": {
     "ng": "ng",
     "build": "ng build --configuration production",

src/app/app-routing.module.ts

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router'; // CLI imports router
+import { AboutRuralAttractivenessExplorerComponent } from './pages/about-rural-attractiveness-explorer/about-rural-attractiveness-explorer.component';
 import { ComparingRuralAttractivenessComponent } from './pages/comparing-rural-attractiveness/comparing-rural-attractiveness.component';
 import { ExploringDynamicsComponent } from './pages/exploring-dynamics/exploring-dynamics.component';
 import { ExploringImpactComponent } from './pages/exploring-impact/exploring-impact.component';
@@ -15,17 +16,28 @@ const routes: Routes = [
     { path: 'text-mining', component: TextMiningComponent },
     { path: 'system-dynamics', component: SystemDynamicsModellingComponent },
     { path: 'policy-options-explorer', component: PolicyOptionsExplorerComponent },
-    { path: 'rural-attractiveness-explorer', component: RuralAttractivenessExplorerComponent },
-    { path: 'comparing-rural-attractiveness', component: ComparingRuralAttractivenessComponent },
-    { path: 'exploring-dynamics', component: ExploringDynamicsComponent },
-    { path: 'exploring-impact', component: ExploringImpactComponent },
+    {
+        path: 'rural-attractiveness-explorer',
+        component: RuralAttractivenessExplorerComponent,
+        children: [
+            {
+                path:'',
+                redirectTo: 'about',
+                pathMatch: 'full' 
+            },            
+            { path: 'about', component: AboutRuralAttractivenessExplorerComponent },
+            { path: 'comparing-rural-attractiveness', component: ComparingRuralAttractivenessComponent },
+            { path: 'exploring-dynamics', component: ExploringDynamicsComponent },
+            { path: 'exploring-impact', component: ExploringImpactComponent },
+        ]
+    },
     { path: '**', component: LandingPageComponent } // Default route
 
 ]; // sets up routes constant where you define your routes
 
 // configures NgModule imports and exports
 @NgModule({
-    imports: [RouterModule.forRoot(routes)],
+    imports: [RouterModule.forRoot(routes, {useHash: true})],
     exports: [RouterModule]
 })
 export class AppRoutingModule { }

src/app/app.component.html

@@ -1,34 +1,40 @@
 <main>
-<nav class="navbar fixed-top navbar-expand-lg bg-light">
-  <div class="container-fluid">
-    <a class="navbar-brand" routerLink="/" href="#">Polirural</a>
-    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
-      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-      <span class="navbar-toggler-icon"></span>
-    </button>
-    <div class="collapse navbar-collapse" id="navbarSupportedContent">
-      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
-        <li class="nav-item">
-          <a class="nav-link" routerLink="/regional-foresight" routerLinkActive="active"
-            ariaCurrentWhenActive="page">Regional foresight</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" routerLink="/text-mining" routerLinkActive="active" ariaCurrentWhenActive="page">Text
-            mining</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" routerLink="/system-dynamics" routerLinkActive="active"
-            ariaCurrentWhenActive="page">System dynamics</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" routerLink="/policy-options-explorer" routerLinkActive="active"
-            ariaCurrentWhenActive="page">Policy options explorer</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" routerLink="/rural-attractiveness-explorer" routerLinkActive="active"
-            ariaCurrentWhenActive="page">Rural attractiveness explorer</a>
-        </li>
-        <li class="nav-item">
+  <nav class="navbar navbar-dark fixed-top navbar-expand-lg bg-primary">
+    <div class="container-fluid">
+      <a class="navbar-brand" routerLink="/" href="#">
+        <img src="assets/fig/logo_polirural_white.png" alt="" height="48"/>
+      </a>
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
+        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+          <li class="nav-item">
+            <a class="nav-link" routerLink="/" routerLinkActive="active"
+              ariaCurrentWhenActive="page">Home</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" routerLink="/regional-foresight" routerLinkActive="active"
+              ariaCurrentWhenActive="page">Regional foresight</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" routerLink="/text-mining" routerLinkActive="active" ariaCurrentWhenActive="page">Text
+              mining</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" routerLink="/system-dynamics" routerLinkActive="active"
+              ariaCurrentWhenActive="page">System dynamics</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" routerLink="/policy-options-explorer" routerLinkActive="active"
+              ariaCurrentWhenActive="page">Policy options explorer</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" routerLink="/rural-attractiveness-explorer" routerLinkActive="active"
+              ariaCurrentWhenActive="page">Rural attractiveness explorer</a>
+          </li>
+          <!-- <li class="nav-item">
           <a class="nav-link" routerLink="/comparing-rural-attractiveness" routerLinkActive="active"
             ariaCurrentWhenActive="page">Comparing rural attractiveness</a>
         </li>
@@ -39,12 +45,10 @@
         <li class="nav-item">
           <a class="nav-link" routerLink="/exploring-impact" routerLinkActive="active"
             ariaCurrentWhenActive="page">Exploring impact</a>
-        </li>
-      </ul>
+        </li> -->
+        </ul>
+      </div>
     </div>
-  </div>
-</nav>
-</main>
-<div class="page-header">
+  </nav>
   <router-outlet></router-outlet>
-</div>
+</main>

src/app/app.module.ts

@@ -34,12 +34,12 @@ import {TextMiningComponent} from './pages/text-mining/text-mining.component';
     TextMiningComponent,
   ],
   imports: [
+    AppRoutingModule,
     BrowserModule,
     FormsModule,
     DiscsModule,
     DotsModule,
     MapModule,
-    AppRoutingModule
   ],
   providers: [],
   bootstrap: [AppComponent],

src/app/discs-chart/year-graph/year-graph.component.html

@@ -1,4 +1,4 @@
-<div class="card">
+<div>
   <h2>Rural attractiveness index of regions in {{yearGraphService.selectedYear}}</h2>
   <div *ngIf="sdmDihService.yearsLoaded; else loading" class="card-body">
     <div class="year-range">

src/app/pages/about-rural-attractiveness-explorer/about-rural-attractiveness-explorer.component.html

@@ -1,12 +1,99 @@
-  <!-- TODO: <div class="page">
-    <a name="1-foresight"></a><h1 class="pl-2">Regional Foresight</h1> -->
-  <!--
-A short note on the POLIRURAL project as a host for 12 regional Foresight initiatives. 
-
-Links to FS related project deliverables
-Links to newsletter and related articles
-Links to internal deliverables (inventories, guides, compendia etc.)
-Links to the 12 Foresight pages
-Links to external pages for FUP
-    -->
-  <!-- </div> -->
+<div class="container has-fixed-header has-2-fixed-headers">
+    <h2 class="my-5"> The Rural Attractiveness Explorer
+    </h2>
+    <p>The Rural Attractiveness Explorer is designed to help assess the impacts of different policy choices on the rural
+        attractiveness of the PoliRural pilot regions. It builds on the outputs of the Policy Options Explorer and
+        transforms them into an Index of Rural Attractiveness (IRA) which is also visualized in various ways. Thus, it
+        is
+        supposed to allow users to get insights into how rural attractiveness in a region is affected by different
+        policy
+        strategies. </p>
+
+    <p>Rural attractiveness is a rather complex concept - which renders its measurement anything but trivial. For
+        instance, in PoliRural, we observed that concepts of rural attractiveness differ significantly from region to
+        region, and are conditioned by developmental priorities such as the desire to attract investors, entrepreneurs,
+        or
+        tourists. Thus, what is understood as rural attractiveness may depend on where, when, and by whom attractiveness
+        is
+        determined Additionally, the attractiveness of a region is never absolute and can only be determined in
+        comparison
+        to other regions. This means that a region that is rather attractive compared to one set of regions can be
+        rather
+        unattractive compared to another set of regions.</p>
+
+    <p>Nevertheless, there is some common understanding of and agreement on the general issues that matter for rural
+        attractiveness. This minimum agreement provides the basis for the Index of Rural Attractiveness. The IRA is made
+        up
+        of 6 sub-indices, each of which corresponds to the areas generally considered relevant for rural attractiveness:
+    </p>
+
+    <ul>
+        <li>social,</li>
+        <li>natural environment,</li>
+        <li>human-made environment,</li>
+        <li>economic,</li>
+        <li>institutional, </li>
+        <li>cultural.</li>
+    </ul>
+
+
+    <p>Each of these 6 sub-indices in turn includes a number of sub-sub indices, e.g. the social sub-index can include
+        sub-sub indices measuring the age composition or unemployment rate of the population in a region. </p>
+
+    <p>The IRA reflects the characteristics of the concept of rural attractiveness: The values of the Index do not
+        represent absolute estimates of the attractiveness of a region but reflect how attractive the assessed regions
+        are
+        in comparison to each other. To account for the context dependency of rural attractiveness, the concrete choice
+        of
+        sub-sub indices needs to be determined in each individual situation in which rural attractiveness is supposed to
+        be
+        evaluated. </p>
+
+    <p>With the Rural Attractiveness Explorer, we want to enable users to explore the effects of different policy
+        choices
+        on the rural attractiveness of the PoliRural pilot regions. Thus, we transform the outputs of the Policy
+        Explorer
+        into a value of the IRA and visualise the results of that in different ways.</p>
+    <p>Notably, the Policy Explorer was initially not designed to have its outputs fit with the concept and Index of
+        Rural
+        Attractiveness. Thus, we use a version of the IRA here that represents a lowest common denominator between the
+        outputs of the Policy Explorer and the requirements of the Index of Rural Attractiveness. For this reason, the
+        adapted IRA we are currently using in the Rural Attractiveness Explorer consists of only 4 instead of 6
+        sub-indices.
+        In future versions, the aim is to identify and include more areas of overlap between the outputs of the Policy
+        Options Explorer and the IRA. For instance, future versions of this IRA will also consider total employment
+        among
+        the economic sub-sub indices, which is not included in the current version of the IRA.</p>
+
+    <div class="card col-8 mx-auto my-5">
+        <img class="card-img-top" src="assets/fig/fig-04-rurattridx.png" />
+        <div class="card-body">
+            <p class="card-text">Fig 3: Composition of the preliminary Index of Rural Attractiveness Index used in the
+                Rural Attractiveness Explorer</p>
+        </div>
+    </div>
+
+    <p>To find out more about rural attractiveness, consult these resources:
+    </p>
+    <ul>
+        <li><a href="https://polirural.eu/wp-content/uploads/2021/11/D1.1..pdf">D1.1 PoliRural Vision For Attractive
+                Rural
+                Places & Professions</a></li>
+        <li><a href="https://polirural.eu/wp-content/uploads/2021/11/D1.4..pdf">D1.4 Rural Attractiveness: Post-Needs
+                Gathering Update</a></li>
+        <li><a href="https://polirural.eu/wp-content/uploads/2021/11/D1.7..pdf">D1.7. Deliverable Rural Attractiveness:
+                ThePost-Evaluation Update</a></li>
+        <li><a href="https://polirural.eu/newsletter/5/">Newsletter No. 5 article “PoliRural consortium publishes 2
+                Scientific Publications”</a></li>
+    </ul>
+    <p>Or skip directly to the different tools of the Rural Attractiveness Explorer:
+    </p>
+    <ul>
+        <li><a [routerLink]="['/rural-attractiveness-explorer/comparing-rural-attractiveness']">Comparing Rural Attractiveness
+                across the regions of Europe”</a> (tbd.)</li>
+        <li><a routerLink="/rural-attractiveness-explorer/exploring-dynamics">Exploring the Dynamics of Rural
+                Attractiveness (tbd.)</a></li>
+        <li><a routerLink="/rural-attractiveness-explorer/exploring-impact">Exploring the Impact of Policy Options on
+                Rural Attractiveness (tbd.)</a></li>
+    </ul>
+</div>

src/app/pages/about-rural-attractiveness-explorer/about-rural-attractiveness-explorer.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AboutRuralAttractivenessExplorerComponent } from './about-rural-attractiveness-explorer.component';
+
+describe('AboutRuralAttractivenessExplorerComponent', () => {
+  let component: AboutRuralAttractivenessExplorerComponent;
+  let fixture: ComponentFixture<AboutRuralAttractivenessExplorerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AboutRuralAttractivenessExplorerComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AboutRuralAttractivenessExplorerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/about-rural-attractiveness-explorer/about-rural-attractiveness-explorer.component.ts

@@ -3,9 +3,10 @@ import {Component, OnInit} from '@angular/core';
 @Component({
   selector: 'about-rural-attractiveness-explorer',
   templateUrl: './about-rural-attractiveness-explorer.component.html',
+  styleUrls: ['./about-rural-attractiveness-explorer.component.scss'],
 })
 export class AboutRuralAttractivenessExplorerComponent implements OnInit {
   constructor() {}
 
-  ngOnInit() {}
+  ngOnInit(): void {}
 }

src/app/pages/comparing-rural-attractiveness/comparing-rural-attractiveness.component.html

@@ -1,26 +1,74 @@
-<div class="page">
-  <a name="6-comparing-europe"></a>
-  <h1 class="pl-2">Comparing Rural Attractiveness across the regions of Europe</h1>
-  <!--
-A short text introducing the idea of comparing rural attractiveness across the regions of Europe.
-  -->
+<div class="container has-fixed-header has-2-fixed-headers">
+        <h2 class="my-5">
+                Comparing Rural Attractiveness across the Regions of Europe
 
-  <p><a href="https://publish.lesprojekt.cz/attractiveness-clustering/" target="_blank">Map visualization for all
-      regions</a></p>
+        </h2>
+        <p>Comparing the rural attractiveness of different regions in Europe can provide various insights: Evidently, it
+                helps to get an impression on where a region stands compared to the rest of Europe. Additionally, by
+                looking at regions that fare especially well in terms of rural attractiveness, it is possible to find
+                out about best practices that may help other regions to improve their rural attractiveness, too. Also,
+                finding regions that are similar in their rural attractiveness characteristics can help to establish
+                cooperation between these similar regions so they can learn from each other and possibly work together
+                on strategies to advance in terms of rural attractiveness.
+        </p>
+        <p>In PoliRural, we have developed several tools that support the comparison of different European regions
+                regarding their rural attractiveness:
+        </p>
+        <p>Our Rural Attractiveness Map application shows the current values of the Index of Rural Attractiveness (IRA)
+                [link to page 5] for all regions in Europe. The Map application allows you to change the settings of the
+                IRA (Which aspects are to be included in the Index? What is the relative importance of the 6 sub-indices
+                to you?). Thus, the map can be adapted to your own preferences and needs. Additionally, the Map
+                application can also show groups of similar regions (so-called clusters).
+        </p>
+        <p>The visualizations below allow a comparison of a different kind: They show the IRA only for the PoliRural
+                pilot regions. In compensation, they do not only show current and past values of the Index but also
+                provide a projection into the future. That means they show how rural attractiveness could develop if
+                business-as-usual continues and no new policy measures are implemented.
+        </p>
+        <p>The so-called “dots visualization” shows on one sight the development of the IRA between 2015 and 2040.
+                Thereby, each dot stands for a time period of 3 months (or 0.25 years). The values of the IRA are
+                indicated by the colour of the dots: green hues mean a high IRA value, red hues indicate low IRA values.
+        </p>
+        <p>Please remember that the IRA values are not absolute but only show how the different assessed regions perform
+                relative to each other. Additionally, the way the IRA is made up here is rather imperfect as we have
+                included only a few sub-sub-indices and not all of the 6 IRA sub-indicators are represented here. This
+                is owed to the experimental stage of the Rural Attractiveness Explorer. Therefore, if a region displays
+                low IRA values here, this means that it is less attractive only compared to the other PoliRural pilot
+                regions and only regarding the aspects that have been considered here (consult the graphic here [link to
+                page 5] to see which aspects these are). If compared to other regions and considering different aspects
+                of rural attractiveness, the same region could present very different IRA values.</p>
+        <p><a href="https://publish.lesprojekt.cz/attractiveness-clustering/" target="_blank">Map visualization for all
+                regions</a></p>
+        <div class="card p-3 my-5">
+                <year-graph></year-graph>
+                <div class="card-body">
+                        <p class="card-text"> “Dots” visualization for the project regions and its evolution over time
+                        </p>
+                </div>
+        </div>
 
-  <!-- TODO: Link to map visualization for the project regions and its evolution over time
-  <div class="map-row">
-    <h2>Map-based comparison</h2>
-    <hslayers-map></hslayers-map>
-  </div>
-  -->
-  <p>A ‘dots’ visualization for the project regions and its evolution over time</p>
-  <all-in-one-graph></all-in-one-graph>
+        <p>In the so-called “disc visualization”, each disc represents one region. On the time slider, you can either
+                have the visualization run from 2015 to 2040 on its own or you can select specific time steps (one time
+                step = 3 months/0.25 years). Also here, the color of the disc represents the IRA value at each time
+                step. The direction of the arrow (up, straight, down) shows how the value of rural attractiveness has
+                changed compared to the previous time step.</p>
+        <div class="card p-3 my-5">
+                <all-in-one-graph></all-in-one-graph>
+                <div class="card-body">
+                        <p class="card-text">‘Disc’ visualization for the project regions and its evolution over time
+                        </p>
+                </div>
+        </div>
 
-  <p>A ‘disc’ visualization for the project regions and its evolution over time</p>
-  <year-graph></year-graph>
+        <p>The “data race visualization” runs from 2015 to 2040 (with the possibility to stop and continue the race at
+                any time), and the bars representing the different pilot regions change their length and order depending
+                on their “performance” at each time step.</p>
+
+        <div class="card p-3 my-5">
+                <iframe class="iframe-100" frameborder="0" scrolling="no" src="http://localhost:3000/?domain=baseline&scenario=baseline&showControls=true"></iframe>
+                <div class="card-body">
+                        <p class="card-text">‘Data race’ visualization for the project regions and its evolution over time</p>
+                </div>
+        </div>
 
-  <!--
-TODO: Link to ‘data race’ visualization for the project regions and its evolution over time
-  -->
 </div>

src/app/pages/exploring-dynamics/exploring-dynamics.component.html

@@ -1,11 +1,23 @@
-<div class="page">
-  <a name="7-dynamics"></a>
-  <h1 class="pl-2">Exploring the Dynamics of Rural Attractiveness</h1>
-  <!--
-A short text introducing the idea of exploring the dynamics of rural attractiveness by drilling into the sub-indices
-  -->
+<div class="container has-fixed-header has-2-fixed-headers">
+    <h2 class="my-5">
+        Exploring the Dynamics of Rural Attractiveness
 
-  <p>A ‘dots’ visualization of sub-indices for the regions and their evolution over time</p>
+    </h2>
+    <p>The Index of Rural Attractiveness (IRA) used here is made up of 4 sub-indices: social, natural environment,
+        human-made environment, and economic (read more about this here [link to page 5]). Having a look at these
+        sub-indices helps to get a more differentiated picture of the rural attractiveness in the different regions: In
+        which fields does a region perform well and in which fields does it lag behind? Drilling down deeper into the
+        IRA also helps to better understand where changes in the overall IRA come from, in which fields changes occur
+        that increase or decrease the overall value of the IRA.
+    </p>
+    <p>Thus, the visualizations below show the development of the 4 IRA sub-indices for the PoliRural pilot regions from
+        2015 to 2040 under a business-as-usual scenario, which means everything continues as is. See here [link to page
+        6] to find out more about the different visualization types:
+    </p>
+    <p>[Embed ‘dots’ visualization of sub-indices for the regions and their evolution over time]</p>
+    <p>[Embed ‘disc’ visualization of sub-indices for the regions and their evolution over time]</p>
+    <p>[Embed ‘data race’ visualization of sub-indices for the regions and their evolution over time]</p>
+    <p>A ‘dots’ visualization of sub-indices for the regions and their evolution over time</p>
   <div class="card">
     <h2>Detailed overview of individual regions</h2>
     <div class="card-body">

src/app/pages/exploring-impact/exploring-impact.component.html

@@ -1,17 +1,64 @@
-<div class="page">
-  <a name="8-impacts"></a>
-  <h1 class="pl-2">Exploring the Impact of Policy Option on Rural Attractiveness</h1>
-  <!--
-A short text introducing the idea of exploring the impact of policy options on rural attractiveness, based on comparing the impact of different scenarios in each of three domains, for a single region
-Infrastructure (roads and broadband coverage)
-Agricultural policy
-Support for Entrepreneurship
-  -->
-  <!-- Link to ‘disc’ visualization of impact of different options on RA for each domain -->
+<div class="container has-fixed-header has-2-fixed-headers">
+    <h2 class="my-5">
+        Exploring the Impact of different Policy Choices on the Rural Attractiveness of the PoliRural Pilot Regions
+
+    </h2>
+    <p> The ultimate purpose of the Rural Attractiveness Explorer is to support general groups of users in interpreting
+        the future impacts of different policy strategies on the rural attractiveness of a region. Knowing about likely
+        consequences of different policy interventions, stakeholders will be better equipped to make adequate decisions
+        on actual rural development policies.
+    </p>
+    <p> Ideally, the Rural Attractiveness Explorer would allow users to draft various so-called “scenarios”, which are
+        settings that simulate different policy measures, of their own choice and compare the development of rural
+        attractiveness under these different scenarios. However, the Rural Attractiveness Explorer is still at an
+        experimental stage and does not feature such an advanced functionality, yet.
+    </p>
+    <p> However, the team behind the Rural Attractiveness Explorer has developed a set of predefined policy scenarios to
+        allow users to already explore and compare the impact of a couple of policy options on the rural attractiveness
+        of the PoliRural pilot regions. Thus, the tools below allow the user to compare the impact of different
+        scenarios in each of three domains, for a single region, both on the overall Index of Rural Attractiveness and
+        on its sub-indices. The scenarios simulate the following policy options):
+    </p>
+    <ul>
+        <li>In the domain of infrastructure development:</li>
+        <ul>
+            <li>business as usual: no policy interventions happen, everything continues as is.</li>
+            <li>investment into broadband only: All investment is directed to improving broadband coverage.</li>
+            <li>investment into roads only: All investment is dedicated to constructing new roads.</li>
+            <li>investment into broadband & roads: 50% of investments are directed to improving broadband coverage and
+                50% are dedicated to constructing new roads.</li>
+        </ul>
+        <li>In the domain Agriculture policy:</li>
+        <ul>
+            <li>business as usual: no policy interventions happen, everything continues as is.</li>
+            <li>investment only into the agric. information & knowledge system (AKIS): …</li>
+            <li>investment only into eco-schemes: …</li>
+            <li>investment into AKIS & Eco-Schemes:...</li>
+        </ul>
+        <li>In the domain Support to Entrepreneurship:</li>
+        <ul>
+            <li> business as usual: no policy interventions happen, everything continues as is.
+                High rate of support to entrepreneurs: …
+                Medium rate of support to entrepreneurs: …
+                Low rate of support to entrepreneurs: …</li>
+        </ul>
+
+    </ul>
+
+    <p>These scenarios are designed for demonstration purposes as well as to allow users to understand how single policy
+    measures play out. They are not meant to reflect any realistic policy strategies, which would include packages of
+    different measures and more nuanced approaches.</p>
+
+
+    <p>[Embed ‘disc’ visualization of impact of different options on RA and its sub-indices for each domain]</p>
+    <p>[Embed ‘data-race’ visualization of impact of different options on RA and its sub-indices for each domain]</p>
+      <!-- Link to ‘disc’ visualization of impact of different options on RA for each domain -->
   <p>A ‘disc’ visualization of impact of different options on RAI and its sub-indices for each domain</p>
   <scenario-factor-year-graph></scenario-factor-year-graph>
   <!--
 TODO: Link to ‘data-race’ visualization of impact of different options on RA for each domain
 TODO: Link to ‘data-race’ visualization of impact of different options on sub-indices for each domain
   -->
+
+
 </div>

src/app/pages/landing-page/landing-page.component.html

@@ -60,12 +60,17 @@
     </div>
     <div class="col-6 p-3">
       <div class="card">
-        Test
+        <img class="card-image-top" src="assets/fig/ill-text-mining.jpeg" />
       </div>
     </div>
   </div>
   <div class="row mt-4">
-    <div class="col-6"></div>
+    <div class="col-6">
+      <div class="card">
+          <img class="card-image-top" src="assets/fig/ill-sdm.png" />
+      </div>
+  </div>
+
     <div class="col-6 p-5 bg-light">
       <p>
 
@@ -91,7 +96,12 @@
         impact on an
       </p>
     </div>
-    <div class="col-6"></div>
+    <div class="col-6">
+      <div class="card">
+          <img class="card-image-top" src="assets/fig/ill-rae.png" />
+      </div>
+  </div>
+
   </div>
   <div class="row mt-4 p-4">
     <p>
@@ -133,14 +143,14 @@
         or skip directly to
       </p>
       <ul>
-        <li>The SE tool (add link to the SE),</li>
+        <li><a href="https://semex.io/">The SE tool</a></li>
         <li>
           <a routerLink="/policy-options-explorer" routerLinkActive="active" ariaCurrentWhenActive="page">
             The Policy Options Explorer
           </a>
         </li>
         <li>
-          <a routerLink="/rural-attractiveness-explorer" routerLinkActive="active" ariaCurrentWhenActive="page">
+          <a routerLink="/rural-attractiveness-explorer">
             The Rural Attractiveness Explorer
           </a>
         </li>

src/app/pages/policy-options-explorer/policy-options-explorer.component.html

@@ -1,21 +1,53 @@
-<div class="page">
-  <a name="4-policy-options"></a>
-  <h1 class="pl-2">The Policy Options Explorer</h1>
-  <p>The starting point for all the pilot’s models was PoliRural SDM ed.3. Then, a series of meetings with those
-    responsible for the pilots were scheduled. The aim of the meetings was in the first place to fully explain the
-    model so that pilots could understand the dynamics explained and the assumptions made. In the second place, the
-    meetings were designed to best fit local dynamics into the template model.</p>
-  <p>After the first round of meetings, a period was open for pilots to gather data. This period was open to
-    clarification to find the best proxies, and discussion about qualitative data collection.</p>
-  <p>Finally, the calibration was intended with the available data.</p>
-  <figure>
-    <img src="assets/fig/policy-options-explorer.png" class="img-fluid">
-    <figcaption>Policy options explorer</figcaption>
-  </figure>
+<div class="container has-fixed-header">
+    <h2 class="my-5">The Policy Options Explorer</h2>
 
-  <!--
-Links to SDM related project deliverables
-Links to newsletter and related articles
-Link to the “The Policy Options Explorer” (pages of Runar and Antoni, or separate links for each region)
-  -->
+    <div class="row">
+        <div class="col-6">
+            <p>The purpose of the Policy Options Explorer is to allow users to explore how different policy choices and
+                strategies play out in their region in the future. The Policy Options Explorer builds on <a
+                    routerLink="/system-dynamics-modelling">PoliRural SDM ed.3</a>. However, this general model was
+                adapted to
+                represent the dynamics present in the PoliRural
+                pilot regions, resulting in 10 different models through which impacts of different policies in the
+                PoliRural
+                pilot regions can be simulated.
+            </p>
+        </div>
+        <div class="col-6 px-5 pb-5">
+            <div class="card">
+                <img src="assets/fig/fig-02-sdm.png" class="card-img-top">
+                <div class="card-body">
+                    <h5 class="card-title">Policy Options Explorer</h5>
+                    <p class="card-text">The Policy Options Explorer is a stand-alone tool. If you wish to test the
+                        tool, you may login with the credentials demo/demo</p>
+                </div>
+                <div class="card-body">
+                    <a href="https://polirural-sdm.avinet.no" class="card-link" target="_blank">Open the Policy Options
+                        Explorer (opens a new browser windows)</a>
+                </div>
+            </div>
+        </div>
+    </div>
+    <p>The model adaptation was realised through two series of meetings with the main responsible contacts of the
+        different pilots. In the first round of meetings, the model was fully explained so that pilots could understand
+        the dynamics explained and the assumptions made. Additionally, the meetings were designed to best fit local
+        dynamics into the template model. In the second round of meetings, a period was open for pilots to gather data.
+        This period was open to clarification to find the best proxies, and discussion about qualitative data
+        collection.</p>
+    <p>Finally, the calibration was intended with the available data. For more details, see:
+    </p>
+    <ul>
+        <li>deliverable 5.4 (tbd.)</li>
+        <li>links to newsletters (tbd.)</li>
+    </ul>
+    <p>Or continue to the <a routerLink="/rural-attractiveness-explorer">Rural Attractiveness Explorer</a>.</p>
+    <div class="card col-6 mx-auto my-5">
+        <figure>
+            <img class="card-img-top" src="assets/fig/fig-03-popt.png" />
+            <figcaption>Policy options explorer</figcaption>
+        </figure>
+        <div class="card-body">
+            <p class="card-text">Fig 3: Overview of available models in the Policy Options Explorer</p>
+        </div>
+    </div>
 </div>

src/app/pages/regional-foresight/regional-foresight.component.html

@@ -45,7 +45,7 @@
     <ul>
         <li>T<a href="https://youtu.be/m66wjhqLbg0?t=765" target="_blank" rel="noopener">raining session</a> by Patrick
             Crehan on Regional Foresight</li>
-        <li>D1.8 Future Outlooks Methodology (missing link, requested from SPI)</li>
+        <li><a href="https://polirural.eu/wp-content/uploads/2022/02/D1.8..pdf">D1.8 Future Outlooks Methodology</a></li>
         <li><a href="https://polirural.eu/resources/inventory-of-drivers-of-change/" target="_blank" rel="noopener">The
                 STEEPV Inventory of Drivers of Change</a></li>
         <li><a href="https://polirural.eu/wp-content/uploads/2021/11/PoliRural-Foresight-Guide-to-Deep-Dives.pdf"

src/app/pages/rural-attractiveness-explorer/rural-attractiveness-explorer.component.html

@@ -1,54 +1,49 @@
-<div class="page">
-  <a name="5-attractiveness"></a>
-  <h1 class="pl-2">The Rural Attractiveness Explorer</h1>
-  <p>In PoliRural, we observed that concepts of rural attractiveness often feature in regional development strategies,
-    that they differ significantly from region to region, and are conditioned by developmental priorities such as the
-    desire to attract investors, entrepreneurs, or tourists. Thus, what is understood as rural attractiveness may
-    depend on where, when, and by whom attractiveness is
-    determined Additionally, the attractiveness of a region can be determined only in comparison to other regions.
-    This means that a region that is rather attractive compared to one set of regions can be rather unattractive
-    compared to another set of regions. Due to this complexity, measuring and evaluating rural attractiveness is
-    challenging.</p>
-
-  <p>Nevertheless, there is some common understanding of and agreement on the general issues that matter for rural
-    attractiveness. These are aspects belonging to the following areas:</p>
-  <ul>
-    <li>social,</li>
-    <li>natural environment,</li>
-    <li>human-made environment,</li>
-    <li>economic,</li>
-    <li>institutional,</li>
-    <li>cultural.</li>
-  </ul>
-
-  <p>This minimum agreement provided the basis for the development of a <strong>Rural Attractiveness Index</strong>.
-    This index is made
-    up of 6 sub-indices - one sub-index for each of the generally relevant areas mentioned above. Each of the
-    sub-indices includes a number of sub-sub indices, e.g. the social sub-index could include sub-sub indices
-    measuring the age composition or unemployment rate of the population in a region.
-    The Rural Attractiveness Index reflects the characteristics of the concept of rural attractiveness: The values of
-    the Index do not represent absolute estimates of the attractiveness of a region but reflect how attractive the
-    assessed regions are in comparison to each other. To account for the context dependency of rural attractiveness,
-    the concrete choice of sub-sub indices needs to be determined in each individual situation in which rural
-    attractiveness is supposed to be evaluated.</p>
-
-  <p>With the Rural Attractiveness Explorer, we want to enable users to explore the effects of different policy
-    choices on the rural attractiveness of the PoliRural pilot regions. Thus, we represent the outputs of the Policy
-    Explorer as a value of the Rural Attractiveness Index and visualise the results of that in different ways. For
-    this purpose, we adapted the Rural Attractiveness Index to fit with the Policy Options Explorer as follows
-    (notably, the version of the Rural Attractiveness Index used here consists of only 4 instead of 6 sub-indices):
-  <figure>
-    <img src="assets/fig/rai-composition.png" class="img-fluid">
-    <figcaption>Composition of the Rural Attractiveness Index used in the Rural Attractiveness Explorer</figcaption>
-  </figure>
-  </p>
-  <!-- 
-Links to RA related project deliverables
-Links to relevant newsletter and related articles
-
-Link to page 6 entitled “Comparing Rural Attractiveness across the regions of Europe”
-Link to page 7 entitled “Exploring the Dynamics of Rural Attractiveness”
-Link to page 8 entitled “Exploring the Impact of Policy Option on Rural Attractiveness”
-
-  -->
+<nav class="navbar navbar-dark fixed-top navbar-expand-lg bg-secondary fixed-top-2">
+  <div class="container">
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
+      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarSupportedContent">
+      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+        <li class="nav-item">
+          <a class="nav-link" [routerLink]="['comparing-rural-attractiveness']" routerLinkActive="active">Comparing rural attractiveness</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" [routerLink]="['exploring-dynamics']" routerLinkActive="active">Exploring dynamics</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" [routerLink]="['exploring-impact']" routerLinkActive="active">Exploring impact</a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</nav>
+<router-outlet></router-outlet>
+<!--   <p>Attractiveness can be seen from the perspective of a farmer, a young man or woman, a businessman or a
+    sociologist. As there is no singular perception of attractiveness, there cannot be a singular value representing
+    it. In the Index of regional attractiveness, we emphasize the attractiveness of a region as a compound and
+    relative value. Based on available statistical data about a region, each region is then assessed by several
+    factors. In this showcase we differentiate social, anthropic, natural and economic factor.</p>
 </div>
+<div class="graph-row">
+  <year-graph></year-graph>
+</div>
+<div class="graph-row-plotly">
+  <all-in-one-graph></all-in-one-graph>
+</div>
+<div class="graph-row-plotly">
+  <ng-container *ngFor="let region of sdmDihService.regions">
+    <region-graph [region]="region"></region-graph>
+  </ng-container>
+</div>
+<div class="map-row">
+  <h2>Map-based comparison</h2>
+  <div class="hs-map">
+      <hslayers></hslayers>
+    </div>
+</div>
+<div class="graph-row">
+  race chart
+  #PLACEHOLDER
+</div> -->

src/app/pages/system-dynamics-modelling/system-dynamics-modelling.component.html

@@ -1,15 +1,93 @@
-  <!-- TODO: <div class="page">
-    <a name="3-sdm"></a><h1 class="pl-2">System Dynamic Modelling applied to Regional Foresight</h1> -->
-  <!--
-A short text explaining 
-SDM, Its application to Foresight, and the work done on TM in the POLIRURAL project.
-The 3-layer model
-The 8-module master model
+<div class="container has-fixed-header">
+    <h2 class="my-5"> System Dynamic Modelling applied to Regional Foresight</h2>
+    <p> System Dynamic Modelling has a long history. It was pioneered in the 1960s by Jay Forrester, an MIT computer
+        scientist and systems engineer. In 1961 he published a foundational work on System Dynamics in a book entitled
+        “Industrial Dynamics.” This was followed by “Urban Dynamics” in 1969 and “World Dynamics” in 1972.</p>
+    <p> His work demonstrated that our usual “models” for how the world works, fail to capture important aspects of
+        world dynamics, such as complex non-linear behaviours, which if left unchecked, could lead to the collapse of
+        entire earth systems and an end to ever increasing growth and prosperity. </p>
+    <p> The Club of Rome commissioned the system dynamics team at MIT to carry out a “Project on the Predicament of
+        Mankind.” This team included experts from the US, India, Germany, Norway, Turkey, and Iran, with expertise in
+        domains such as population, pollution, agriculture, and natural resources. A summary of its findings was
+        published in 1972 by the Club of Rome with the title “Limits to Growth.”</p>
+    <p>
+        This remains a very important work on the sustainability of human activity at planetary level. It has inspired a
+        great many actors who now work on sustainability and the challenge of living on an increasingly crowded planet
+        with limited natural resources. The
+        Club of Rome exists to this day and currently advises the cabinet of Ursula von der Leyen, the President of the
+        European Commission, on long-term strategy related to sustainability and the achievement of high-level goals
+        related to the climate, energy, and biodiversity.</p>
+    <p> The great advantage of SDM modelling, is its ability to capture real world complexity, and illustrate the
+        interactions between seemingly unrelated phenomena, in terms of feedback and in tells of how dynamics plays out
+        over time; how inevitable consequences of our choices today play out sometimes quickly, and sometimes much more
+        slowly over time. </p>
+    <p>
+        One of the goals of the POLIRURAL project has been to experiment with the use of SDM as a support for vision
+        building and policy co-design at local government level, as part of a regional or sub-regional Foresight
+        initiative. This presents many challenges for those who develop and implement SDM models which are rich enough
+        to address the issues that local policy designers might need to address, yet simple enough for use by
+        non-experts, the wide variety of stakeholders taking part in a typical local Foresight initiative.</p>
+    <p> POLIRURAL made significant progress on all of these issues. It first had to identify precise tasks of a
+        Foresight exercise, where SDM might be used. It had to develop a core model of rural regions and adapt this core
+        model to the specificities of each region of the project. It had to implement each of these regional models
+        using local data sets and make it available for use via an online tool, called the Policy Options Explorer.</p>
+    <p> The general approach is based on what we call “the three-layer model” or 3LM, where the user is presented with
+    </p>
+    <ul>
+        <li> the first layer consisting of a small set of input parameters, where the user can simulate different policy
+            options by choosing a different set of input parameters.</li>
+        <li> A middle layer which contains all of the complex dynamics of the local economy, its society, and its
+            environment, and</li>
+        <li> A third layer, which contains a small number of KPIs, reflecting the performance of the region. </li>
+    </ul>
+    <p> This tool allows a group of stakeholders individually, or working together, to compare the impact of different
+        policy choices such as investments in new experiences or infrastructure projects intended to facilitate access
+        for tourism, on performance indicators such as the number of visitors, nights stayed and jobs created, and see
+        how these play out over time. </p>
+    <p> By way of illustration, the 3LM for exploring tourism related policy options might look like this.</p>
+    <div class="card col-6 mx-auto my-5">
+        <img class="card-img-top" src="assets/fig/fig-01-sdm.png" />
+        <div class="card-body">
+            <p class="card-text">Fig 1: Sample 3LM for exploring tourism</p>
+        </div>
+    </div>
+    <p> The model itself can be improved. Just putting this diagram on a slide and projecting it on a wall as support
+        for a groupwork session, can already provide support to useful discussions on the subject. This possibility
+        is described in some detail in project deliverable D5.5 listed below. The project has developed two interactive
+        systems allowing groups of stakeholders to dig deeper into the exploration of policy options.
+    <p> One of these is called the POE or Policy Options Explorer. Its interface looks something like this.</p>
+    <div class="card col-6 mx-auto my-5">
+        <img class="card-img-top" src="assets/fig/fig-02-sdm.png" />
+        <div class="card-body">
+            <p class="card-text">Fig 2: Screenshot from the Polirural Policy Option Explorer</p>
+        </div>
+    </div>
+    <p> The other tool is called the RAE or Rural Attractiveness Explorer. It links the SDM models embedded in the POE
+        to a simplified version of an Index of Rural Attractiveness developed by the project. The main purpose of
+        this work is to explore the use of different ways for representing complex data and different types of user
+        interfaces, with a view to understanding how best to present complex issues related to rural development and
+        rural
+        attractiveness to a general group of users, such as stakeholders taking part in local Foresight initiatives.</p>
+    <p> To find out more the reader is invited to consult the following project resources: </p>
+    <ul>
+        <li><a href="">Article in Newsletter No. 10 entitled “Progress so far in the application of SDM to Regional
+                Foresight.”</a>
+        </li>
+        <li><a href="https://polirural.eu/resources/newsletters/">Article in Newsletter No. 12 entitled “A Second Set of Experiments for Exploring the Application of SDM to
+            Regional Foresight.”</a></li>
+        <li> Training on SDM applied to Foresight (link to be added when MOOC 3 is completed)</li>
+        <li>Project deliverable <a href="https://polirural.eu/wp-content/uploads/2021/11/D5.1..pdf">D5.1 “POLIRURAL Model ed 1”</a></li>
+        <li>Project deliverable <a href="https://polirural.eu/wp-content/uploads/2021/11/D5.2..pdf">D5.2 “Polirural Model ed 2”</a></li>
+        <li>Project deliverable <a href="https://polirural.eu/wp-content/uploads/2021/11/D5.3..pdf">D5.3 “Polirural Model ed 3”</a></li>
+        <li>Project deliverable <a href="https://polirural.eu/wp-content/uploads/2021/11/D3.3..pdf">D3.3 “System Dynamics Tool – Technical Specifications”</a></li>
+        <li>Project deliverable <a href="https://polirural.eu/wp-content/uploads/2021/11/D3.5..pdf">D3.5 “System Dynamics Tool – Initial Prototype”</a></li>
+        <li>Project deliverable <a href="https://polirural.eu/wp-content/uploads/2022/06/D5.4-PoliRural-Model-4_final.pdf">D5.4 “Polirural Model ed 4”</a></li>
+        <li>Project deliverable <a href="https://polirural.eu/wp-content/uploads/2022/06/D5.5-A-Dynamic-Rural-Development-Model_final.pdf">D5.5 “A Dynamic Rural Development Model”</a> </li>
+        </ul>
+<p>Or continue to either:</p>
+        <ul>
+        <li><a routerLink="/policy-options-explorer">The Policy Options Explorer</a></li>
+        <li><a routerLink="/rural-attractiveness-explorer">The Rural Attractiveness Explorer</a></li>
+    </ul>
 
-Links to TM related project deliverables
-Links to newsletter and related articles
-Links to POLIRURAL paper with Milos et al...
-Link to page 4 entitled “The Policy Options Explorer”
-Link to page 5 entitled “The Rural Attractiveness Explorer”
--->
-  <!-- </div> -->
+</div>

src/app/pages/text-mining/text-mining.component.html

@@ -1,12 +1,75 @@
-  <!-- TODO: <div class="page">
-    <a name="2-text-mining"></a><h1 class="pl-2">Text Mining applied to Regional Foresight</h1> -->
-  <!--
-A short text explaining TM, its application to Foresight, and the work done on TM in the POLIRURAL project.
+<div class="container has-fixed-header">
+    <h2 class="my-5">
+        Text Mining applied to Regional Foresight
+    </h2>
+    <p>The full and meaningful participation of stakeholders in policy co-design processes, cannot happen unless efforts
+        are made to make sure that the stakeholders are adequately informed about the complex challenges that the region
+        faces, or of the currently feasible policy options by which they may be addressed.
+    </p>
+    <p>The successful execution of a Foresight initiative therefore requires someone or preferably a small team of
+        people, to carry out lots of reading and lots of editing of short explanatory texts, intended to support the
+        specific stages and tasks that make up the overall Foresight process.
+    </p>
+    <p>Many different techniques are applied in the execution of such work. ‘Horizon scanning’ is one of those basic
+        tasks. This is an open and exploratory activity intended to understand what is happening in the world, in
+        society, in business, in technology, in the world of research and innovation, and then analyse what is happening
+        to understand what trends may have an impact on the region, and how these might play out over time.
+    </p>
+    <p>One way for organizing such work is to apply the principle, often attributed to the author William Gibson, that
+        “the future is now,” all around us, but unevenly distributed. In this way, part of the challenge of the reader
+        or researcher providing support to the Foresight process, is to read material from a wide variety of sources,
+        and ‘make sense’ of that material in the context of the purpose of the Foresight exercise, given the specificity
+        of the region and other policy initiatives that may already be in play. This work not only involves reading and
+        sense-making, but discovering new topics or issues that may lie ‘below the radar’ of local officials and local
+        citizens, but which may emerge to grow in importance, and have a significant impact on the region at some point
+        in the future. It also requires the writing of summary texts that explain the issue and its possible
+        significance for the reader in a language that is accessible to a general audience, which may or may not have
+        access to people who are experts in that domain.
+    </p>
+    <p>The POLIRURAL project was founded on the belief that Text mining or TM, could support the work of the reader or
+        researcher in the execution of high-level tasks such as horizon scanning, with the ultimate aim of improving the
+        completeness of the reader’s topic discovery, the quality of their summary texts and the overall efficiency and
+        productivity of their work.
+    </p>
+    <p>For these reasons, the POLIRURAL project developed a set of TM tools, intended to help the local Foresight teams
+        in their work of ‘topic discovery’ and ‘topic summarization.’ This work is finished now, and the lessons have
+        been learned.
+    </p>
+    <p>Anyone interested in knowing more is invited to inspect the related project deliverables
+    </p>
+    <ul>
+        <li><a href="https://www.youtube.com/watch?v=Y0YlBi6n2yM">Training Session on the use of Text Mining by KAJO</a>
+        </li>
+        <li><a href="https://polirural.eu/resources/semantic-explorer-users-guide/">The Semantic Explorer (SE) User Guide</a>
+        </li>
+        <li><a href="https://semex.io/">The SE Tool</a></li>
+    </ul>
+    <p>Related project deliverables such as</p>
+    <ul>
 
-Links to TM related project deliverables
-Links to newsletter and related articles
-Links to CKA paper and PPT for ISPIM Copenhagen meeting in June22 
-Link to the “The Semantic Explorer”
+        <li>
+            <a href="https://polirural.eu/wp-content/uploads/2021/11/D2.1..pdf">D2.1 Text Mining Technical Specifications</a>
+        </li>
+        <li>
+            <a href="https://polirural.eu/wp-content/uploads/2021/11/D2.2..pdf">D2.2 Prototype Text Mining Solution</a>
+        </li>
+        <li>
+            <a href="https://polirural.eu/wp-content/uploads/2021/11/D2.3..pdf">D2.3 Final text Mining Solution</a>
+        </li>
+    </ul>
+    <p>
+        Patrick Crehan of CKA presented a series of recommendations for further work based on our experience of using
+        Text Mining in Foresight in the POLIRURAL project, at The XXXIII ISPIM Innovation Conference "Innovating in a
+        Digital World", held in Copenhagen, Denmark on 05 June to 08 June 2022. Event Proceedings published by LUT
+        Scientific and Expertise Publications with ISBN 978-952-335-694-8.
+    </p>
+    <ul>
+        <li>
+            Text Mining for Effective Stakeholder Engagement in Foresight, (tbd.)
+        </li>
+        <li>
+            ISPIM conference presentation (tbd.)
+        </li>
+    </ul>
 
-    -->
-  <!-- </div> -->
+</div>

src/index.html

@@ -1,13 +1,17 @@
 <!doctype html>
 <html lang="en">
+
 <head>
   <meta charset="utf-8">
   <title>Rural attractiveness explorer</title>
   <base href="./">
+  <script>document.write('<base href="' + document.location + '"/>');</script>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
+
 <body style="margin: 0;">
   <application-root></application-root>
 </body>
+
 </html>

src/styles.scss

@@ -7,6 +7,23 @@
 @import "bootstrap/scss/close";
 @import "bootstrap/scss/images";
 
+$primary: #2B3948;
+$secondary: #818A91;
+// $success: #00ff00;
+// $info: #00ff00;
+// $warning: #00ff00;
+// $danger: #00ff00;
+// $light: #00ff00;
+// $dark: #00ff00;
+
+$theme-colors: (
+  "primary": $primary,
+  "danger": $danger
+);
+
+@import "~bootstrap/scss/bootstrap";
+
+
 html, body {
   position: relative;
   width: 100%;
@@ -78,18 +95,20 @@ main {
 }
 
 h1 {
-  color: #ff3e00;
+  color: $primary;
   text-transform: uppercase;
-  font-size: 2em;
-  font-weight: 100;
+  // font-size: 2em;
+  // font-weight: 100;
 }
 
 h2 {
-  color: #ff3e00;
+  color: $primary;
 }
 
-p {
+div.has-fixed-header p, div.has-fixed-header li {
   text-align: justify;
+  font-size: 1.2em;
+  font-weight: 150;
 }
 
 @media (min-width: 640px) {
@@ -98,10 +117,35 @@ p {
   }
 }
 
+.fixed-top-2 {
+  margin-top: 74px;
+}
+
 .has-fixed-header {
-  margin-top: 50px;
+  margin-top: 74px;
+}
+
+.has-2-fixed-headers {
+  margin-top: 148px;
+}
+
+.iframe-100 {
+  height: 100vh;
 }
 
+.navbar-dark .nav-item a.nav-link {
+  color: rgba( $light, .65 )
+} 
+
+.navbar-dark .nav-item a.nav-link.active {
+  color: $light;
+} 
+
+.navbar-dark .nav-item a.nav-link:hover {
+  color: rgba($light, .85);
+  text-decoration: none;
+} 
+
 .hsl {
   /*
     hs-sidebar, .hs-sidebar-list, .hs-sidebar-item {