indexadd.txt

          <div id="story-box" class="ui-scroll-content">
              <!--div id="story-scroll"-->
              <!-- <div id="story-scroll" class="scroll-container"> -->
              <div id="mystory" class="story-content">
                  <h1>Smart Villages</h1>
                  <h2>Energielehrpfad Wüstenrot</h2>
                  <p><span>Für die Gemeinde Wüstenrot</span></p>
                  <div style="height:100px"></div>
                  <div class="divider"></div>
              </div>
             <!-- Demo Elke -->
              <div id="energiefahrrad" class="story-content">
                  <h2>Energiefahrrad</h2>
                  <p><p><span>
					Viele Sportbegeisterte kennen das Radfahren auf der Stelle von Spinning auf dem Fahrradergometer.
					Weniger viele Menschen wissen hierbei, wieviel Energie Sie aufwänden müssen, um beispielsweise
					eine konventionelle Glühleuchte zum Leuchten zu bringen. Die Station des Energiefahrrads soll genau
					hierfür sensibilisieren und aufzeigen,
					Der Vergleich zu dem Energieaufwand auf dem Energiefahrrad wird sich durch alle weiteren Stationen des Energieerlebnispfads ziehen, so dass später auch die Brücke zu Windenergie und PV gebaut wird, um zu zeigen, wie vielfach das Leistungsvermögen solcher Anlage im Verhältnis zur Energieerzeugung eines Menschen auf dem Energiefahrrad ist.
					Dies ermöglicht es, diese großen Mengen an Energie aus den unterschiedlichen Erzeugern greifbar zu
					machen und in Relation zu setzen.
					</span></p></p>
                  <p>
                  </p>
                      <iframe class="movie-wrap" src="https://www.youtube.com/watch?v=OQEtXgS-fg0&t=42s?fs=0&enablejsapi=1" frameborder="0"></iframe>
                  <div class="divider"></div>
              </div>
			     <div id="wea" class="story-content">
                  <h2>Windenergieanlagen (Gemarkung Löwenstein)</h2>
                  <p><p><span>
					Windenergieanlagen sind imposante Riesen, deren beachtliche Größe erst klar wird, wenn man sich in nächster Nähe zu den Anlagen befindet. 
					Welche Technologien sich in den Anlagen befinden, ist auf den ersten Blick jedoch nicht ersichtlich. 
					Auch hier kommt wieder die Augmented Reality zum Einsatz, bei welcher mit Hilfe eines Smart Phones oder Tablet PCs das virtuelle Bild vor der realen Welt das Innenleben einer Windenergieanlage sichtbar macht. Generator, Rotor, Stator, Umrichter und alle weiteren Komponenten, die für eine Netzeinspeisung der Energie benötigt werden, werden nicht nur bildlich, sondern auch mit Textbeschreibung und momentanen Daten ergänzt.
					</span></p></p>
                  <p>
                      <img src="datasource-data/Docs/img/Lehrpfad.png"  class="scale"><br>
                  </p>
                  <p><p><span>ClickInteractions: Interaction Chaining, jump to three viewpoints </span></p></p>
                  <p class="button-line">
                      <button id="demo-viewpointbutton" class="story-btn buttonset one">
                          <i class="fa fa-landmark"></i>
                          <span class="i18n_btn_science">Viewpoint Chaining on ButtonClick</span>
                      </button>
                  </p>
                  <div style="height:100px"></div>
                  <div class="divider"></div>
              </div>
			  

			  
			<!-- Demo Viewpoint -->
              <div id="demo-viewpoint" class="story-content">
                  <h2>Jump to viewpoint</h2>
                  <p><p><span>ScrollInteraction: Jump To Viewpoint</span></p></p>
                  <p>
                      <img src="images/backgrd.png" width="850" height="669" class="scale"><br>
                  </p>
                  <p><p><span>ClickInteractions: Interaction Chaining, jump to three viewpoints </span></p></p>
                  <p class="button-line">
                      <button id="demo-viewpointbutton" class="story-btn buttonset one">
                          <i class="fa fa-landmark"></i>
                          <span class="i18n_btn_science">Viewpoint Chaining on ButtonClick</span>
                      </button>
                  </p>
                  <div style="height:100px"></div>
                  <div class="divider"></div>
              </div>
              <!-- Demo hide buildings -->
              <div id="demo-hiding" class="story-content">
                  <h2>Hiding Buildings</h2>
                  <p>text text text</p>
                  <p>
                      <img src="images/backgrd.png" width="850" height="669" class="scale"><br>
                  </p>
                  <p class="button-line">
                      <button class="story-btn buttonset one" id="hideMyBuildingsButton">
                          <i class="far fa-eye-slash"></i>
                          <span>Hide my Buildings</span>
                      </button>
                  </p>
                  <div style="height:100px"></div>
                  <div class="divider"></div>
              </div>
              <!-- Demo highlight Builings -->
              <div id="demo-highlight" class="story-content">
                  <h2>Highlight Buildings</h2>
                  <p>text text text</p>
                  <p>
                      <img src="images/backgrd.png" width="850" height="669"
                           class="scale"><br>
                  </p>
                  <p class="button-line">
                      <button class="story-btn buttonset two" id="highlightMyBuildingButton">
                          <i class="far fa-building"></i>
                          <span class="i18n_btn_science">Highlight my Buildings</span>
                      </button>
                  </p>
                  <div style="height:100px"></div>
                  <div class="divider"></div>
              </div>
              <!-- Demo switch Layer -->
              <div id="demo-layer" class="story-content">
                  <h2>Show my Layer</h2>
                  <p>text text text</p>
                  <p>
                      <img src="images/backgrd.png" width="850" height="669" class="scale"><br>
                  </p>
                  <p class="button-line">
                      <button class="story-btn buttonset one" id="hidActivateLayerButton">
                          <i class="fa fa-exchange"></i>
                          <span>buildings</span>
                      </button>
                      <button class="story-btn buttonset one" id="hidActivateLayerButton2">
                          <i class="fa fa-exchange"></i>
                          <span>lehrpfad</span>
                      </button>
                  </p>
                  <div style="height:100px"></div>
                  <div class="divider"></div>
              </div>
              <!-- Demo show Planning -->
              <div id="demo-planning" class="story-content">
                  <h2>Show my Plannings</h2>
                  <p>text text text</p>
                  <p>
                      <img src="images/backgrd.png" width="850" height="669"
                           class="scale"><br>
                  </p>
                  <div style="height:100px"></div>
                  <div class="divider"></div>
              </div>
              <!-- Demo Rotate -->
              <div id="demo-rotate" class="story-content">
                  <h2>Rotate around a viewpoint</h2>
                  <p>text text text</p>
                  <p>
                      <img src="images/backgrd.png" width="850" height="669"
                           class="scale"><br>
                  </p>
                  <p class="button-line" id="rotateButton">
                      <button class="story-btn  buttonset one">
                          <i class="fa fa-repeat"></i>
                          <span>Rotate</span>
                      </button>
                  </p>
                  <div style="height:100px"></div>
                  <div class="divider"></div>
              </div>
              <!--/div-->
          </div>