index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <title>RGC Website</title>
  <meta charset="utf-8">
  <meta name="generator" content="GitLab Pages">
  <link rel="stylesheet" href="./css/bootstrap.min.css">
  <link href="css/main.css" rel="stylesheet">
  <script src="https://kit.fontawesome.com/79b3e255a2.js" crossorigin="anonymous"></script>
  <link rel="shortcut icon" type="image/png" sizes="32x32" href="./imgs/icon.png">
  
</head>

<body>
  <!-- <div id="topbar">
        <div id="menu" class="navbar"></div>
    </div> -->

  <!-- <h1 id='projectname'></h1> Projektname kommt aus settings.js, hier nichts einfügen -->

  <!-- ÄNDERUNGEN NUR NACH DIESER ZEILE -->

  <header>
    <div class="collapse navbar-light" id="navbarHeader">
      <div class="container">
        <div class="row">
          <div class="col-sm-8 col-md-7 py-4">
            <h4 class="text-white">About</h4>
            <p class="text-white">Details about our group to be inserted here... </p>
          </div>
          <div class="col-sm-4 offset-md-1 py-4">
            <h4 class="text-white">Contact</h4>
            <ul class="list-unstyled">
              <!-- <li><a href="#" class="text-white">Follow on Twitter</a></li> -->
              <!-- <li><a href="#" class="text-white">Like on Facebook</a></li> -->
              <li><a href="mailto:sven.schneider[at]hft-stuttgart.de">Email me</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="navbar navbar-light shadow-sm" style="background-color: #cc3125;">
      <div class="container d-flex justify-content-between">
        <a href="https://www.hft-stuttgart.de" class="navbar-brand d-flex align-items-center">
          <img src="https://www.hft-stuttgart.de/typo3conf/ext/hft_sitepackage/Resources/Public/img/HFT_logo.svg"
            class="hftlogo" width="100px">
          <h1 id='projectname'></h1>
        </a>
        <select class="selectpicker" style="background-color: #cc3125; width: 8em; border-color:#cc3125;" data-width="fit">
          <option class="selectlang" style="background-color: white;">English</option>
          <option class="selectlang" style="background-color: white;">Deutsch</option>
      </select>
        <!-- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader"
          aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button> -->
      </div>
    </div>
  </header>

  <main role="main">

    <section class="jumbotron text-center hftBackground">
      <div class="container">
        <img src="imgs/database.svg" class="windSVG" width="100px" alt="wind">
        <h1> <b>3D Urban Analytics Lab </b> <br>@HFT Stuttgart </h1>
        <p class="lead text-muted"> (or Vote for new group name) <br>A research group introduction here ....</p>
        <p>The research projects at HFT Stuttgart (University of Applied Sciences Stuttgart).
      </div>
    </section>

    <div class="album py-5 bg-light topDownPadding">
      <div class="container">
        <div>
        <h2 ><i class="fas fa-laptop-code"></i> Our Applications</h2>
        <!-- Searchbar -->
        <!-- start -->
        <div class="search-wrapper">
          <div class="input-holder">
              <input type="text" id="search-input" class="search-input" placeholder="Type to search" />
              <button id="search-button" class="search-icon" onclick="searchToggle(this, event);"><span></span></button>
          </div>
          <span class="close" onclick="searchToggle(this, event);"></span>
        </div>
        <!-- end -->
        </div>
        <p class="grey-text w-responsive mx-auto mb-5">Research Short Introduction ....</p><br>

        <div class="row">
          <div class="col-lg-4">
            <div class="card mb-4 shadow-sm extension">
              <h5>Vision Zero <span class="lead text-muted"> Hackathon</span></h5>

              <img class="thumbimg" src="imgs/thumbnails/visionZero.jpeg" alt="">
              <div class="card-body">
                <p class="card-text-lg small">
                  The <b>VISION ZERO </b> is an application for safety routing with the
                  visualization of 3D grid and heatmap. Developed at hackathon event "Neue Wege für die Mobilität in
                  Augsburg". (24 hours time limited)
                  <br>
                  <b><i class="fas fa-user"></i> Contact Person</b>: <a
                    href="https://www.hft-stuttgart.de/p/thunyathep-santhanavanich">Joe
                    T.S.</a> <br>
                  <b><i class="fas fa-star"></i> Keywords</b>: CityGML, 3D GIS, GIS Analyst, Urban Analytics
                <form action="iStoeckHM.html" class="form-signin" method="GET">
                  <button type="submit" class="btn btn-sm btn-outline-secondary">Explore</button>
                </form>


                </p>
              </div>
              <!-- <div class="justify-content-between align-items-center btnGroupDiv">
                  <div class="btn-group">
                    <form action="iStoeckHM.html" class="form-signin" method="GET">
                      <button type="submit" class="btn btn-sm btn-outline-secondary">Explore</button>
                    </form>

                    
                  </div>
                  <br>
                  <p class="small"></p>
                </div> -->
            </div>
          </div>
          <div class="col-lg-4">
            <div class="card mb-4 shadow-sm extension">
              <h5>3D E-bike<span class="lead text-muted"> iCity Project</span></h5>
              <img class="thumbimg" src="imgs/thumbnails/i_cityEbikeSharing.png" alt="">
              <div class="card-body">
                <p class="card-text-xl small">
                  The <b>3D E-bike Tracking </b> is a 3D web-based visual analytics application designed showing
                  various parameters from sensor systems equipped on the E-bike sharing system in the study area of a
                  city of Stuttgart, Germany.
                  <br>
                  <b><i class="fas fa-user"></i> Contact Person</b>: <a
                    href="https://www.hft-stuttgart.de/p/thunyathep-santhanavanich">Joe
                    T.S.</a> <br>
                  <b><i class="fas fa-star"></i> Keywords </b>: SensorThings API, CityGML, 3D GIS, GIS Analyst, Urban
                  Analytics

                </p>
                <a href="http://81.169.187.7:8080/ebikesharing/" target="_blank">
                  <button class="btn btn-primary btn-sm"> <i class="fas fa-search"></i> Explore</button>
                </a>

                <!-- <form action="iStoeckHexgrid_2m.html" class="form-signin" method="GET"><button type="submit"
                    class="btn btn-sm btn-outline-secondary">Explore Application</button></form>

                  <form action="iStoeckHexgrid_2m.html" class="form-signin" method="GET"><button type="submit"
                    class="btn btn-sm btn-outline-secondary">Visit iCity project</button></form> -->
              </div>
            </div>
          </div>
          <div class="col-lg-4">
            <div class="card mb-4 shadow-sm extension">
              <h5>HFT Smart Platform<span class="lead text-muted"> iCity Project</span></h5>
              <img class="thumbimg" src="imgs/thumbnails/hftSmart.JPG" alt="">
              <div class="card-body">
                <p class="card-text-xl small">
                  The <b>HFT Smart Platform </b> is ...
                  <br>
                  <b><i class="fas fa-user"></i> Contact Person</b>: <a
                    href="https://www.hft-stuttgart.de/p/thunyathep-santhanavanich">Joe
                    T.S.</a> <br>
                  <b><i class="fas fa-star"></i> Keywords </b>: CityGML, 3D GIS, GIS Analyst, Urban Analytics
                </p>
                <a href="https://icity.hft-stuttgart.de/hftsmartplatform/" target="_blank">
                  <button class="btn btn-primary btn-sm"> <i class="fas fa-search"></i> Explore</button>
                </a>

                <!-- <form action="iStoeckHexgrid_2m.html" class="form-signin" method="GET"><button type="submit"
                    class="btn btn-sm btn-outline-secondary">Explore Application</button></form>

                  <form action="iStoeckHexgrid_2m.html" class="form-signin" method="GET"><button type="submit"
                    class="btn btn-sm btn-outline-secondary">Visit iCity project</button></form> -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <div class="album py-5 bg-light topDownPadding">
      <div class="container">

        <div class="row">
          <div class="col-lg-4">
            <div class="card mb-4 shadow-sm extension">
              <h5>3D Wind Simulation<span class="lead text-muted"> iCity Project</span></h5>
              <img class="thumbimg" src="imgs/thumbnails/StreamlinesMultipart.PNG" alt="">
              <div class="card-body">
                <p class="card-text-xl small">
                  The <b>HFT Smart Platform </b> is ...
                  <br>
                  <b><i class="fas fa-user"></i> Contact Person</b>: <a
                    href="https://www.hft-stuttgart.de/p/sven-schneider">Sven Schneider</a> <br>
                  <b><i class="fas fa-star"></i> Keywords </b>: CityGML, 3D GIS, GIS Analyst, Urban Analytics
                </p>
                <a href="https://transfer.hft-stuttgart.de/pages/urbanvis/" target="_blank">
                  <button class="btn btn-primary btn-sm"> <i class="fas fa-search"></i> Explore</button>
                </a>

                <!-- <form action="iStoeckHexgrid_2m.html" class="form-signin" method="GET"><button type="submit"
                    class="btn btn-sm btn-outline-secondary">Explore Application</button></form>

                  <form action="iStoeckHexgrid_2m.html" class="form-signin" method="GET"><button type="submit"
                    class="btn btn-sm btn-outline-secondary">Visit iCity project</button></form> -->
              </div>
            </div>
          </div>
          <div class="col-lg-4">
            <div class="card mb-4 shadow-sm extension">
              <h5>Project 5</h5>
              <!-- <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg> -->
              <img class="thumbimg" src="imgs/thumbnails/StreamLinesCesiumOverview.PNG" alt="">
              <div class="card-body">
                <p class="card-text">... description ...</p>
              </div>
              <div class="d-flex justify-content-between align-items-center btnGroupDiv">
                <div class="btn-group">
                  <form action="iStoeckStreams.html" class="form-signin" method="GET">
                    <button type="submit" class="btn btn-sm btn-outline-secondary">Explore</button>
                  </form>
                </div>
                <!-- <small class="text-muted">9 mins</small> -->
              </div>
            </div>
          </div>
          <div class="col-lg-4">

            <div class="card mb-4 shadow-sm extension">
              <h5>Project 6</h5>
              <!-- <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg> -->
              <img class="thumbimg" src="imgs/thumbnails/StreamlinesMultipart.PNG" alt="">
              <div class="card-body">
                <p class="card-text">... description ...</p>
              </div>
              <div class="d-flex justify-content-between align-items-center btnGroupDiv">
                <div class="btn-group">
                  <form action="StreamlinesMultipart.html" class="form-signin" method="GET">
                    <button type="submit" class="btn btn-sm btn-outline-secondary">Explore</button>
                  </form>
                </div>
              </div>


            </div>
          </div>
        </div>
      </div>


      <!-- Zeile 3 mit Album  -->

      <div class="album py-5 bg-light topDownPadding">
        <div class="container">

          <div class="row">
            <div class="col-lg-4">


              <div class="card mb-4 shadow-sm extension">
                <h5>Project 7</h5>
                <!-- <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg> -->
                <img class="thumbimg" src="imgs/thumbnails/EssenPC.PNG" alt="">
                <div class="card-body">
                  <p class="card-text">... description ...</p>
                  <!-- <small class="text-muted">9 mins</small> -->
                </div>
                <div class="d-flex justify-content-between align-items-center btnGroupDiv">
                  <div class="btn-group">
                    <form action="EssenPC.html" class="form-signin" method="GET">
                      <button type="submit" class="btn btn-sm btn-outline-secondary ">Explore</button>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>


      <!-- <br>
      <div class="d-flex justify-content-between align-items-center btnGroupDiv">
      <div class="btn-group">
        <form action="/debug" class="form-signin" method="GET">
          <button type="submit" class="btn btn-sm btn-outline-secondary ">DEBUG</button>
        </form>
      </div>
      </div> -->
      <hr>
      <div class="container">
        <h2><i class="fas fa-book"></i> Our Publication</h2>
        <p class="grey-text w-responsive mx-auto mb-5">Our Publication ...</p>

        <!-- <li> Silberer, J., Santhanavanich, T., Müller, P., & Bäumer, T. (2020). 
          Promoting Objective and Subjective Safety for Cyclists in Metropolitan Areas. In Innovations for Metropolitan Areas (pp. 273–284). Springer
          Berlin Heidelberg. https://doi.org/10.1007/978-3-662-60806-7_21
        </li> -->
        <h5>2020</h5>
        <li> 
          Santhanavanich, T., Wuerstle, P., Silberer, J., Loidl, V., Rodrigues, P., and Coors, V.: 
          <a href="https://doi.org/10.5194/isprs-annals-VI-4-W2-2020-143-2020">3D SAFE ROUTING NAVIGATION APPLICATION FOR PEDESTRIANS AND CYCLISTS BASED ON OPEN SOURCE TOOLS</a>, ISPRS Ann. Photogramm. Remote Sens. Spatial Inf. Sci., VI-4/W2-2020, 143–147, https://doi.org/10.5194/isprs-annals-VI-4-W2-2020-143-2020  
        </li>
        <li> 
          Schneider, S., Santhanavanich, T., Koukofikis, A., and Coors, V.: 
          <a href="https://doi.org/10.5194/isprs-annals-VI-4-W2-2020-157-2020">EXPLORING SCHEMES FOR VISUALIZING URBAN WIND FIELDS BASED ON CFD SIMULATIONS BY EMPLOYING OGC STANDARDS</a>, ISPRS Ann. Photogramm. Remote Sens. Spatial Inf. Sci., VI-4/W2-2020, 157–163, https://doi.org/10.5194/isprs-annals-VI-4-W2-2020-157-2020 
        </li>
        <li>...</li>
        <br>
        <h5>2019</h5>
        <li>...</li>

      </div>
      <hr>
      <div class="container">
        <h2><i class="fas fa-user-friends"></i> Our amazing team</h2>
        <!-- Section description -->
        <p class="grey-text w-responsive mx-auto mb-5">Team Description ....</p>
        <section class="team-section text-center my-5">

          <!-- Grid row -->
          <div class="row">

            <!-- Grid column -->
            <div class="col-lg-3 col-md-6 mb-lg-0 mb-5">
              <div class="avatar mx-auto">
                <img src="./imgs/avatar/volker.Coors.jpg" class="rounded-circle z-depth-1" width="150px">
              </div>
              <h5 class="font-weight-bold mt-4 mb-3">Prof. Dr. Volker Coors</h5>
              <p class="text-uppercase blue-text"><strong>Lab Leader</strong></p>
              <p class="grey-text">Profile Description....</p>
              <ul class="list-unstyled mb-0">
                <!-- Facebook -->
                <a class="p-2 fa-lg fb-ic">
                  <i class="fab fa-facebook-f blue-text"> </i>
                </a>
                <!-- Twitter -->
                <a class="p-2 fa-lg tw-ic">
                  <i class="fab fa-twitter blue-text"> </i>
                </a>
                <!-- Instagram -->
                <a class="p-2 fa-lg ins-ic">
                  <i class="fab fa-instagram blue-text"> </i>
                </a>
              </ul>
            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="col-lg-3 col-md-6 mb-lg-0 mb-5">
              <div class="avatar mx-auto">
                <img src="./imgs/avatar/JoeSquare.jpg" class="rounded-circle z-depth-1" width="150px">
              </div>
              <h5 class="font-weight-bold mt-4 mb-3">Joe T. Santhanavanich</h5>
              <p class="text-uppercase blue-text"><strong>Researcher</strong></p>
              <p class="grey-text">Profile Description....</p>
              <ul class="list-unstyled mb-0">
                <!-- Facebook -->
                <a class="p-2 fa-lg fb-ic">
                  <i class="fab fa-facebook-f blue-text"> </i>
                </a>
                <!-- Instagram -->
                <a class="p-2 fa-lg ins-ic">
                  <i class="fab fa-instagram blue-text"> </i>
                </a>
              </ul>
            </div>
            <!-- Grid column -->


            <!-- Grid column -->

            <!-- Grid column -->
            <div class="col-lg-3 col-md-6">
              <div class="avatar mx-auto">
                <img src="./imgs/avatar/rosanny.jpg" class="rounded-circle z-depth-1" width="150px">
              </div>
              <h5 class="font-weight-bold mt-4 mb-3">Rosanny S.</h5>
              <p class="text-uppercase blue-text"><strong>Researcher</strong></p>
              <p class="grey-text">Profile Description....</p>
              <ul class="list-unstyled mb-0">
                <!-- Facebook -->
                <a class="p-2 fa-lg fb-ic">
                  <i class="fab fa-facebook-f blue-text"> </i>
                </a>
                <!-- Github -->
                <a class="p-2 fa-lg ins-ic">
                  <i class="fab fa-github blue-text"> </i>
                </a>
              </ul>
            </div>
            <!-- Grid column -->
            <!-- Grid column -->
            <div class="col-lg-3 col-md-6 mb-md-0 mb-5">
              <div class="avatar mx-auto">
                <img src="./imgs/avatar/PatrickSquare.jpg" class="rounded-circle z-depth-1" width="150px">
              </div>
              <h5 class="font-weight-bold mt-4 mb-3">Patrick Wuerstle</h5>
              <p class="text-uppercase blue-text"><strong>Researcher</strong></p>
              <p class="grey-text">Profile Description....</p>
              <ul class="list-unstyled mb-0">
                <!-- Facebook -->
                <a class="p-2 fa-lg fb-ic">
                  <i class="fab fa-facebook-f blue-text"> </i>
                </a>
                <!-- Instagram -->
                <a class="p-2 fa-lg ins-ic">
                  <i class="fab fa-instagram blue-text"> </i>
                </a>
                <!-- Dribbble -->
                <a class="p-2 fa-lg ins-ic">
                  <i class="fab fa-dribbble blue-text"> </i>
                </a>
              </ul>
            </div>
          </div>
          <!-- Grid row -->

        </section>
        <!-- Section: Team v.1 -->
      </div>

  </main>
  <!-- Section: Team v.1 -->


  <footer class="text-white">
    <div class="container">
      <p class="float-right">
        <a href="#">Back to top</a>
      </p>
      <p>&copy; HFT Stuttgart, 2020.</p>
      <a href="https://www.hft-stuttgart.de/impressum" target="_blank">Impressum</a>
      <a href="https://www.hft-stuttgart.de/datenschutz" target="_blank">Datenschutz</a>
    </div>
  </footer>
  <!-- Test  -->
  <!-- /////////////////////////////////////// -->
  <!-- Language selector -->
  <!-- full jquery needed -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/js/bootstrap-select.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/0.8.2/css/flag-icon.min.css">
  <script src="js/language.js"></script>
  <!-- search library -->
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/fuse.js/dist/fuse.js"></script>
  <link rel="stylesheet" href="./css/search.css">
  <link rel="stylesheet" href="./css/language.css">
  <script src="js/search.js"></script>
  <!-- KEINE ÄNDERUNGEN NACH DIESER ZEILE -->
  <!-- <script src="settings.js"> </script> -->
  <!-- <script src="./js/jquery.slim.min.js"></script> -->
  <script src="./js/popper.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  
</body>

</html>