Skip to content

Commit

Permalink
move vorher/nacher und KI zu lösungen
Browse files Browse the repository at this point in the history
  • Loading branch information
@thunfischtoast
thunfischtoast committed Sep 23, 2023
1 parent 0c45c6c commit 7e012d2
Show file tree
Hide file tree
Showing 3 changed files with 96 additions and 69 deletions.
33 changes: 33 additions & 0 deletions docs/css/styles_impressions.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,4 +48,37 @@

.imagesource{
font-size: 12pt;
}

/* For webkit-based browsers (Chrome, Safari) */
#slider::-webkit-slider-thumb {
background-color: #ba4c63; /* Change this to the desired color */
width: 20px; /* Adjust the width as needed */
height: 20px; /* Adjust the height as needed */
}

#slider::-webkit-slider-runnable-track {
background-color: #cccccc; /* Change this to the desired track color */
}

/* For Firefox */
#slider::-moz-range-thumb {
background-color: #ba4c63; /* Change this to the desired color */
width: 20px; /* Adjust the width as needed */
height: 20px; /* Adjust the height as needed */
}

#slider::-moz-range-track {
background-color: #cccccc; /* Change this to the desired track color */
}

/* For other browsers (may not work in all) */
#slider::-ms-thumb {
background-color: #ba4c63; /* Change this to the desired color */
width: 20px; /* Adjust the width as needed */
height: 20px; /* Adjust the height as needed */
}

#slider::-ms-track {
background-color: #cccccc; /* Change this to the desired track color */
}
68 changes: 0 additions & 68 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
<link href="css/styles_impressions.css" rel="stylesheet" />

<style type="text/css">

Expand Down Expand Up @@ -215,68 +214,6 @@ <h5>2033</h5>
</div>
</section>


<!-- VORHER NACHHER BEREICH -->

<section style="background-color:#ba4c63" class="text-white page-section" id="impressions">
<div class="container">
<h2 class="page-section-heading text-center text-uppercase mb-0">Vorher / Nachher</h2>
<div class="divider-custom divider-light">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
<div class="divider-custom-line"></div>
</div>
<div class="image-container">
<img id="image1" class="img-fluid img1" src="assets/img/street_1_0.jpg" alt="Image 1">
<img id="image2" class="img-fluid img2" src="assets/img/street_1_1.jpg" alt="Image 2">
<div class="spinner-border" id="loadingSpinner">
<span class="sr-only"></span>
</div>
</div>
<span class="imagesource" id="imagesource"></span>
<div class="container">
<div class="slider-container row">
<label for="imageSelect" class="col-sm-2">Wähle eine Straße:</label>
<select id="imageSelect" class="form-select col-sm-10">
<option value="pair1">Offenbergstraße - Münster</option>
<option value="pair2">Teichstraße - Münster</option>
<option value="pair3">Südstraße - Münster</option>
<option value="pair4">Scharnhorststraße - Münster</option>
<option value="pair5">Utrecht</option>
<option value="pair6">Zwierzyniecka - Poznan</option>
<option value="pair7">Düsseldorf</option>
<!-- Add more options as needed -->
</select>
</div>
<div class="mt-4 row">
<div class="col" align="center">
<div class="row">
<div class="col"><h5>Vorher</h5></div>
<div class="col">
<input type="range" class="form-range" id="slider" min="0" max="1" step="0.01" value="0">
</div>
<div class="col" ><h5>Nachher</h5></div>
</div>
</div>
</div>
<hr/>
<div class="mt-4 row">
<h4>Ich möchte sehen, wie meine Straße ohne Autos aussieht.</h4>
<label for="formFile" class="form-label">Klicke hier, um ein Foto von deiner Straße hochzuladen:</label>
<input class="form-control" type="file" id="fileInput">
<div style="position: relative;">
<img class="img-fluid" id="previewImage" style="display: none; margin: 10px;">
</div>
<button type="submit" class="btn btn-primary mb-3" id="detectSubmit" style="display: none; margin: 10px;">Los gehts</button>
<div class="spinner-border" id="loadingSpinner2" style="display: none;">
<span class="sr-only"></span>
</div>
<div>
<canvas id="output-canvas"></canvas>
</div>
</div>
</div>
</section>

<!-- About Section-->
<section class="page-section bg-primary text-white mb-0" id="about">
Expand Down Expand Up @@ -610,11 +547,6 @@ <h2 class="portfolio-modal-title text-secondary text-uppercase mb-0">Submarine</
<!-- Core theme JS-->
<script src="js/scripts.js"></script>


<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/denoise.js"></script> -->
<script type="module" src="js/scripts_impressions.js"></script>


<script>
document.querySelectorAll('.markdown').forEach(function(markdown) {
markdown.innerHTML = marked.parse(markdown.textContent);
Expand Down
64 changes: 63 additions & 1 deletion docs/loesung.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -175,6 +175,68 @@ <h2 class="page-section-heading text-center text-uppercase text-secondary mb-0">
</div>
</section>

<!-- VORHER NACHHER BEREICH -->

<section style="background-color:#1abc9c" class="text-white page-section" id="impressions">
<div class="container">
<h2 class="page-section-heading text-center text-uppercase mb-0">Vorher / Nachher</h2>
<div class="divider-custom divider-light">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
<div class="divider-custom-line"></div>
</div>
<div class="image-container">
<img id="image1" class="img-fluid img1" src="assets/img/street_1_0.jpg" alt="Image 1">
<img id="image2" class="img-fluid img2" src="assets/img/street_1_1.jpg" alt="Image 2">
<div class="spinner-border" id="loadingSpinner">
<span class="sr-only"></span>
</div>
</div>
<span class="imagesource" id="imagesource"></span>
<div class="container">
<div class="slider-container row">
<label for="imageSelect" class="col-sm-3">Wähle eine Straße:</label>
<select id="imageSelect" class="form-select col-sm-9">
<option value="pair1">Offenbergstraße - Münster</option>
<option value="pair2">Teichstraße - Münster</option>
<option value="pair3">Südstraße - Münster</option>
<option value="pair4">Scharnhorststraße - Münster</option>
<option value="pair5">Utrecht</option>
<option value="pair6">Zwierzyniecka - Poznan</option>
<option value="pair7">Düsseldorf</option>
<!-- Add more options as needed -->
</select>
</div>
<div class="mt-4 row">
<div class="col" align="center">
<div class="row">
<div class="col"><h5>Vorher</h5></div>
<div class="col">
<input type="range" class="form-range" id="slider" min="0" max="1" step="0.01" value="0" style="color: red;">
</div>
<div class="col" ><h5>Nachher</h5></div>
</div>
</div>
</div>
<hr/>
<div class="mt-4 row">
<h4>Ich möchte sehen, wie meine Straße ohne Autos aussieht.</h4>
<label for="formFile" class="form-label">Klicke hier, um ein Foto von deiner Straße hochzuladen:</label>
<input class="form-control" type="file" id="fileInput">
<div style="position: relative;">
<img class="img-fluid" id="previewImage" style="display: none; margin: 10px;">
</div>
<button type="submit" class="btn btn-secondary mb-3" id="detectSubmit" style="display: none; margin: 10px;">Los gehts</button>
<div class="spinner-border" id="loadingSpinner2" style="display: none;">
<span class="sr-only"></span>
</div>
<div>
<canvas id="output-canvas"></canvas>
</div>
</div>
</div>
</section>

<section class="page-section portfolio" id="portfolio">
<div class="container">

Expand Down Expand Up @@ -507,7 +569,7 @@ <h2 class="portfolio-modal-title text-secondary text-uppercase mb-0">PrioBike</h
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
<script src="js/scripts_impressions.js"></script>
<script type="module" src="js/scripts_impressions.js"></script>


<script>
Expand Down

0 comments on commit 7e012d2

Please sign in to comment.