An error occurred while loading the file. Please try again.
index.html 7.11 KiB
<!DOCTYPE html>
<html>
  <head>
    <title>Einleitung</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        background-color: #f0f0f0;
      .dropdown {
        position: relative;
        display: inline-block;
      .dropdown-content {
        display: none;
        position: absolute;
        min-width: 160px;
        z-index: 1;
      .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
      .dropdown:hover .dropdown-content {
        display: block;
      .dropbtn {
        background-color: #664caf;
        color: rgb(243, 235, 235); 
        padding: 8px; 
        font-size: 14px; 
        border: none; 
        cursor: pointer; 
        font-family: Optima, sans-serif; 
      .dropdown-content a {
        color: rgba(22, 24, 17, 0.76); 
        padding: 0px 0px;
        text-decoration: none;
        display: block;
        font-family: Optima, sans-serif; 
        font-size: 13px;
      .dropdown:hover .dropbtn {
        background-color: #3e8e41; 
      .container {
        width: 80%;
        margin: auto;
        overflow: hidden;
      .header {
        background: #50a3a2;
        color: white;
        padding-top: 30px; 
        min-height: 70px;
        border-bottom: #e8491d 3px solid;
      .header h1, .header h5{
        text-align: center;
        margin: 0;
.small-header { background-image: url("solar.jpg"); background-size: cover; background-repeat: no-repeat; padding-top: 20px; min-height: 30px; display: flex; justify-content: flex-start; align-items: center; } .content { padding: 16px; } .city-buttons { margin-left: auto; display: flex; background-size: cover; gap: 10px; } </style> </head> <body> <div class="container"> <div class="header"> <h1>Photovoltaikanlage für Baden-Württemberg</h1> <h5>Hochschule für Technik (Geo-visualisierung) Vorgelegt von: Leilani Riehmann</h5> </div> <div class="content"> <div class="small-header"> <p style="margin-right: 10px;"><h4 style="font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; color:#023d04">Baden-Württemberg und ausgewählte Ortsteile</h4</p> <div class="dropdown"> <button class="dropbtn">Baden-Württemberg</button> <div class="dropdown-content"> <a href="BW_map.html"><h3>interaktive Karte</h3></a> <a href="BWPopUp.html"><h3>Karte mit PopUp</h3></a> </div> </div> <div class="dropdown"> <button class="dropbtn">Stuttgart</button> <div class="dropdown-content"> <a href="Stuttgart_Map.html"><h3>Karte</h3></a> <a href="Stuggi.html"><h3>Karte mit PopUp</h3></a> <a href="MapChartStuttgart.html"><h3>Karte & Graph</h3></a> </div> </div> <div class="dropdown"> <button class="dropbtn">Freiburg</button> <div class="dropdown-content"> <a href="Freiburg_map.html"><h3>Karte</h3></a> <a href="FreiburgChart.html"><h3>Graph</h3></a> <a href="MapChartFreiburg.html"><h3>Karte & Graph</h3></a> </div> </div> <div class="dropdown"> <button class="dropbtn">Mannheim</button> <div class="dropdown-content"> <a href="Mannheim_Map.html"><h3>Karte</h3></a> <a href="MannheimChart.html"><h3>Graph</h3></a> <a href="MapChartMannheim.html"><h3>Karte & Graph</h3></a> </div> </div> <div class="dropdown"> <button class="dropbtn">Karlsruhe</button> <div class="dropdown-content"> <a href="Karlsruhe_Map.html"><h3>Karte</h3></a> <a href="KarlsruheChart.html"><h3>Graph</h3></a> <a href="MapChartKarlsruhe.html"><h3>Karte & Graph</h3></a>
</div> </div> </div> <br /> <br /> <h2 style="font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; color:#3e8e41">Choroplethenkarte</h2> <p> Dieses Projekt zielt darauf ab, die installierte PV-Leistung für <strong>Baden Württemberg</strong> <br />pro Postleitzahlregion als Choropletenkarte zu visualisieren. </p> <p> Eine <strong>Choroplethenkarte</strong> ist eine thematische Karte, bei der die Gebiete im Verhältnis zur <br />Verteilungsdichte des thematischen Objektes eingefärbt, schattiert, gepunktet oder schraffiert sind. <br />In diesem Projekt repräsentiert die Farbe der Karte die installierte PV-Leistung pro Postleitzahlregion. </p> <h2 style="font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; color:#3e8e41">Wie man die Karte verwendet</h2> <p> Um die Karte zu verwenden, fahren Sie mit der Maus über die verschiedenen Regionen. <br />Ein Popup-Fenster wird angezeigt, das Informationen über die installierte PV-Leistung <br /><strong>(Brutto und Netto)</strong> für die jeweilige Ortsteil enthält. Sie können auch auf die ausgewählte <br /> Ortsteile klicken, um die Karte und den Graph anzusehen auf diese Region zu zoomen. </p> <h2 style="font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; color:#3e8e41">kWp: Kilowatt-Peak</h2> <p> <strong>kWp</strong> steht für <strong>Kilowatt-Peak</strong> und ist ein Maß für die Spitzenleistung, die eine Photovoltaikanlage unter<br /> Standard-Testbedingungen erreichen kann. Es gibt an, welche Höchstleistung in Kilowatt (kW)<br /> eine Photovoltaikanlage erbringen kann, typischerweise gemessen unter festgelegten Bedingungen<br /> wie einer bestimmten Sonneneinstrahlung und Temperatur. Diese Bedingungen werden <br />als <strong>Standard-Testbedingungen (STC)</strong> bezeichnet. </p> <h2 style="font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; color:#3e8e41">Die Berechnung</h2> <p> Die Berechnung der kWp einer Photovoltaikanlage erfolgt:</br> Zum Beispiel: 12 Module mit einer Leistung von jeweils 400: <p> <strong>Anlagenleistung</strong> = Anzahl der Module * Leistung eines Moduls</br> <br /> <strong>Anlagenleistung</strong> = 12 * 400 Wp = 4800 Wp oder 4,8 kWp </p> </div> </div> </body> </html>