-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdetail.html
129 lines (118 loc) · 9.62 KB
/
detail.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>another travel blog</title>
<link rel="icon" type="image/png" sizes="96x96" href="images/favicon/favicon-96x96.png">
<meta name="author" content="Florian Liesenfeld">
<meta name="description" content="Another travel blog is a time travel blog. Suggest a new spacetime-coordinate and I will have been travelled to the future for you.">
<meta name="keywords" content="travel,blog,future,climate crisis, air pollution, weather isn't climate">
<meta property="og:title" content="another travel blog">
<meta property="og:type" content="website">
<link rel="stylesheet" href="css/reset.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script type="text/javascript" src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header class="navbar">
<a class="navbar__logo" href="index.html">
<div id="logo__img"></div>
<!-- <img id="logo__img" src="images/logo/atb_logo_13_dark.png" alt=""> -->
</a>
<nav>
<ul>
<li><a id="navbar__nav__suggest" href="suggestlocation.html">n+1</a></li>
<li><a id="navbar__nav__coords" href="coords.html">xyzt</a></li>
<li><a id="navbar__nav__about" href="about.html">about</a></li>
</ul>
</nav>
</header>
<main class="main__space__before">
<section class="vert-spacing--medium">
<h1 id="heading__main" class="heading__center spacing-below">location</h1>
<h2 id="heading__sub" class="horizontal-align"></h2>
<p id="heading__date" class="horizontal-align vert-spacing">date</p>
</section>
<section>
<!-- <div class="carousel" data-flickity='{ "wrapAround": true }'></div> -->
<div class="carousel">
<!-- <div class="carousel-cell"><img class="carousel__img" src="images/atb_placeholder.jpg" alt=""></div>
<div class="carousel-cell"><img class="carousel__img" src="images/atb_placeholder.jpg" alt=""></div>
<div class="carousel-cell"><img class="carousel__img" src="images/atb_placeholder.jpg" alt=""></div>
<div class="carousel-cell"><img class="carousel__img" src="images/atb_placeholder.jpg" alt=""></div> -->
</div>
</section>
<section id="map" class="map map--height-medium vert-spacing"></section>
<section class="grid__container__row container__medium">
<article class="grid__element">
<h2 id="text__heading" class="bold spacing-below">location <span id="text__heading__country"> | country</span></h2>
<p class="spacing-below" id="text__reason"></p>
<p id="text__body" class="paragraph">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maiores a qui exercitationem velit omnis ullam nemo? Corporis modi eum non culpa deserunt, animi tenetur perspiciatis eos unde similique qui sequi accusamus. Dolorem, eligendi molestiae. Aliquam, eum velit accusamus fuga aliquid et ex tenetur quisquam numquam labore soluta, deleniti aut necessitatibus impedit dolorem! Debitis nulla harum dolorem animi? Repellendus architecto sapiente ex deserunt ea quia nobis quos cum. Ducimus aspernatur ab dignissimos soluta alias reiciendis eius enim ipsum earum provident distinctio incidunt, pariatur qui odit voluptate quidem ipsam, error magni vel. Debitis deleniti asperiores quasi harum unde optio, facere eum quaerat.</p>
<p id="text-credits" class="vert-spacing bold"></p>
</article>
<section class="grid__element">
<h2 class="heading__secondary">current weather</h2>
<section class="weather__container">
<img src="" alt="" id="weather__icon" class="img__weather-thumbnail">
<section class="weather__data">
<p id="weather__temp"></p>
<p id="weather__description">description</p>
</section>
</section>
<section>
<h2 class="heading__secondary vert-spacing--medium">air pollution</h2>
<section class="weather__container">
<section class="weather__data">
<p class="pollution__label">air quality index <span id="pollution__aqi" class="pollution__data"></span></p>
<p class="pollution__label">pm2.5 <span id="pollution__component" class="pollution__data"></span></p>
</section>
</section>
</section>
</section>
</section>
<section class="location__navigation container__medium">
<nav class="flex__space__between">
<a id="location__previous" href="jacscript:void(0)">⟵ previous location</a>
<a id="location__next" href="jacscript:void(0)">next location ⟶</a>
</nav>
</section>
</main>
<footer>
<p>©<span class="current-year">2024</span></p>
<ul class="socials">
<li>
<a href="https://bsky.app/profile/maccaroni.bsky.social" target="_blank">
<svg class="social-card__icon" height="1.5rem" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 576 512"><path d="M407.8 294.7c-3.3-.4-6.7-.8-10-1.3c3.4 .4 6.7 .9 10 1.3zM288 227.1C261.9 176.4 190.9 81.9 124.9 35.3C61.6-9.4 37.5-1.7 21.6 5.5C3.3 13.8 0 41.9 0 58.4S9.1 194 15 213.9c19.5 65.7 89.1 87.9 153.2 80.7c3.3-.5 6.6-.9 10-1.4c-3.3 .5-6.6 1-10 1.4C74.3 308.6-9.1 342.8 100.3 464.5C220.6 589.1 265.1 437.8 288 361.1c22.9 76.7 49.2 222.5 185.6 103.4c102.4-103.4 28.1-156-65.8-169.9c-3.3-.4-6.7-.8-10-1.3c3.4 .4 6.7 .9 10 1.3c64.1 7.1 133.6-15.1 153.2-80.7C566.9 194 576 75 576 58.4s-3.3-44.7-21.6-52.9c-15.8-7.1-40-14.9-103.2 29.8C385.1 81.9 314.1 176.4 288 227.1z"/></svg>
</a>
</li>
<li>
<a href="https://www.instagram.com/florianliesenfeld/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16"><path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334"/></svg>
</a>
</li>
<li>
<a href="https://github.com/florianliesenfeld" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/></svg>
</a>
</li>
</ul>
<a href="about.html">imprint</a>
</footer>
<script src="js/locations.js"></script>
<script src="js/script.js"></script>
<script src="js/serialization.js"></script>
<script src="js/keys.js"></script>
<script src="js/weatherApi.js"></script>
<script src="js/detail.js"></script>
<script src="js/carousel.js"></script>
<script src="js/map.js"></script>
<script src="js/imagesApi.js"></script>
</body>
</html>