Skip to content

Commit fc5fbbe

Browse files
wheropwherop
authored
Merge branch 'main' into update-origins
2 parents 098e242 + 4803ca2 commit fc5fbbe

16 files changed

+224
-27
lines changed

‎frontend/src/App.vue‎

Lines changed: 12 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,25 @@
11
<template>
22
<h1 id="app">
3-
<NdviComparisonGraph />
4-
<NdviSelectMonthGraph />
5-
<NdviOverlayGraph />
6-
<MedianTempGraph />
7-
<MeanSoilTempGraph />
8-
<MeanSoilMoistureGraph />
9-
<AugustMeanSoilTempGraph />
10-
<SelectMonthMeanSoilTempGraph />
3+
<Header />
4+
<IntroSection />
5+
<MainSection />
6+
<Footer />
117
</h1>
128
</template>
139

1410
<script>
15-
import NdviComparisonGraph from "./components/NdviGraphs/NdviComparisonGraph.vue"
16-
import NdviSelectMonthGraph from "./components/NdviGraphs/NdviSelectMonthGraph.vue"
17-
import NdviOverlayGraph from "./components/NdviGraphs/NdviOverlayGraph.vue"
18-
import MedianTempGraph from "./components/MedianTempGraph.vue"
19-
import MeanSoilTempGraph from "./components/SoilTempGraph.vue"
20-
import MeanSoilMoistureGraph from "./components/SoilMoistureGraph.vue"
21-
import AugustMeanSoilTempGraph from "./components/AugustSoilTempGraph.vue"
22-
import SelectMonthMeanSoilTempGraph from "./components/SelectMonthSoilTempGraph.vue"
11+
import Header from "./components/Header.vue"
12+
import IntroSection from "./components/IntroSection.vue"
13+
import MainSection from "./components/MainSection.vue"
14+
import Footer from "./components/Footer.vue"
2315
2416
export default {
2517
name: 'App',
2618
components: {
27-
NdviComparisonGraph,
28-
NdviSelectMonthGraph,
29-
NdviOverlayGraph,
30-
MedianTempGraph,
31-
MeanSoilTempGraph,
32-
MeanSoilMoistureGraph,
33-
AugustMeanSoilTempGraph,
34-
SelectMonthMeanSoilTempGraph
19+
Header,
20+
IntroSection,
21+
MainSection,
22+
Footer
3523
}
3624
}
3725
</script>

‎frontend/src/assets/images/Berlin_Tempelhofer_Feld_UAV_05-2017.jpg‎

7.01 MB
Loading

‎frontend/src/assets/images/ndvi-thf-2022-05-08.png‎

1010 KB
Loading

‎frontend/src/assets/images/ndvi-thf-2023-05-08.png‎

1.27 MB
Loading

‎frontend/src/assets/images/sentinel-2-l2a-thf-2022-03-22.png‎

1.23 MB
Loading

‎frontend/src/assets/images/sentinel-2-l2a-thf-2023-05-08.png‎

1.21 MB
Loading

‎frontend/src/components/Footer.vue‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<template>
2+
<v-container class="footer-container" fluid>
3+
<p class="footer-text">CODE University of Applied Sciences, 2024</p>
4+
</v-container>
5+
</template>
6+
7+
<script>
8+
9+
</script>
10+
11+
<style scoped>
12+
.footer-container {
13+
margin: 50px 0 0 0;
14+
text-align: center;
15+
}
16+
17+
.footer-text {
18+
font-size: 0.7rem;
19+
font-weight: 300;
20+
}
21+
</style>

‎frontend/src/components/Header.vue‎

Lines changed: 50 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,56 @@
11
<template>
2-
2+
<v-container class="header-container pa-0" fluid>
3+
<img src="@/assets/images/Berlin_Tempelhofer_Feld_UAV_05-2017.jpg" class="header-image">
4+
<div class="overlay">
5+
<h1 class="title">Climates of Tempelhofer Feld</h1>
6+
<h2 class="subtitle">A data visualization project</h2>
7+
<v-btn icon density="comfortable">
8+
<v-icon>mdi-chevron-down</v-icon>
9+
</v-btn>
10+
</div>
11+
</img>
12+
</v-container>
313
</template>
414

515
<script>
6-
16+
export default {
17+
name: 'Header',
18+
data() {
19+
return {
20+
//
21+
}
22+
}
23+
}
724
</script>
825

9-
<style scoped></style>
26+
<style scoped>
27+
.header-container {
28+
position: relative;
29+
}
30+
31+
.header-image {
32+
height: 100vh;
33+
width: 100%;
34+
object-fit: cover;
35+
object-position: center;
36+
}
37+
38+
.overlay {
39+
position: absolute;
40+
top: 50%;
41+
left: 50%;
42+
transform: translate(-50%, -50%);
43+
color: white;
44+
text-align: center;
45+
}
46+
47+
.title {
48+
font-weight: bold;
49+
}
50+
51+
.subtitle {
52+
padding: 20px 0;
53+
font-size: 1.5rem;
54+
font-weight: 300;
55+
}
56+
</style>

‎frontend/src/components/Images.vue‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<template>
2+
<v-container class="pb-16">
3+
<v-row justify="center">
4+
<v-col class="text-center">
5+
<img src="@/assets/images/sentinel-2-l2a-thf-2022-03-22.png" alt="">
6+
<p>Sentinel-2 image of Tempelhofer Feld taken on 2022-03-22.</p>
7+
</v-col>
8+
<v-col class="text-center">
9+
<img src="@/assets/images/sentinel-2-l2a-thf-2023-05-08.png" alt="">
10+
<p>Sentinel-2 image of Tempelhofer Feld taken on 2023-05-08.</p>
11+
</v-col>
12+
</v-row>
13+
<v-row justify="center">
14+
<v-col class="text-center">
15+
<img src="@/assets/images/ndvi-thf-2022-05-08.png" alt="">
16+
<p>NDVI of Tempelhofer Feld on 2022-05-08.</p>
17+
</v-col>
18+
<v-col class="text-center">
19+
<img src="@/assets/images/ndvi-thf-2023-05-08.png" alt="">
20+
<p>NDVI of Tempelhofer Feld on 2023-05-08.</p>
21+
</v-col>
22+
</v-row>
23+
</v-container>
24+
</template>
25+
26+
<script>
27+
28+
</script>
29+
30+
<style scoped>
31+
img {
32+
width: 450px;
33+
padding: 15px;
34+
}
35+
36+
p {
37+
margin: 0;
38+
font-size: 12px;
39+
font-weight: 300;
40+
color: #555;
41+
}
42+
</style>
43+

‎frontend/src/components/IntroSection.vue‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<template>
2+
<v-container class="introduction-section" fluid>
3+
<v-row justify="center">
4+
<v-col cols="12" md="10">
5+
<h3>Introduction</h3>
6+
<p class="intro-text pt-4">
7+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
8+
Suspendisse id suscipit nulla, ac commodo ex. Nunc finibus semper nulla a pharetra.
9+
Ut lobortis, mi sit amet eleifend iaculis, velit justo lobortis nisi, ac lobortis lacus ante nec nisi.
10+
Etiam pulvinar imperdiet quam. Pellentesque ipsum dolor, lobortis vel sapien id, tincidunt finibus massa.
11+
Vestibulum sollicitudin dictum lacus, non sagittis augue consectetur id.
12+
Nulla sed mauris gravida, mattis enim quis, aliquam lacus.
13+
Sed iaculis nunc dui, et rutrum erat pellentesque placerat.
14+
Integer eu nulla imperdiet, scelerisque odio at, interdum tellus.
15+
Sed porttitor odio in lacinia posuere.
16+
Quisque ultricies condimentum massa quis placerat.
17+
Nulla tempor nisi id odio convallis rutrum.
18+
Vestibulum felis ante, tincidunt et venenatis id, consectetur at quam.
19+
</p>
20+
</v-col>
21+
</v-row>
22+
</v-container>
23+
</template>
24+
25+
<script>
26+
export default {
27+
name: 'IntroSection',
28+
data() {
29+
return {
30+
//
31+
}
32+
}
33+
}
34+
</script>
35+
36+
<style scoped>
37+
.introduction-section {
38+
margin: 50px 0;
39+
text-align: center;
40+
}
41+
42+
.intro-text {
43+
font-size: 1.2rem;
44+
font-weight: 300;
45+
}
46+
</style>

0 commit comments

Comments
 (0)