Skip to content

Commit 312ae2b

Browse files
KoberSaschaKoberSascha
committed
[ADD]- mockup-2
1 parent 6622563 commit 312ae2b

16 files changed

Lines changed: 2385 additions & 0 deletions

‎herkunftcheck/herkunftcheck2/img/example.jpg‎

15.5 MB
Loading

‎herkunftcheck/herkunftcheck2/img/logo_1.png‎

225 KB
Loading

‎herkunftcheck/herkunftcheck2/img/logo_2.png‎

75.6 KB
Loading

‎herkunftcheck/herkunftcheck2/img/logo_cropped.png‎

217 KB
Loading

‎herkunftcheck/herkunftcheck2/img/logo_icon.png‎

149 KB
Loading

‎herkunftcheck/herkunftcheck2/img/qr-code.png‎

212 KB
Loading

‎herkunftcheck/herkunftcheck2/img/tab_icon.png‎

138 KB
Loading

‎herkunftcheck/herkunftcheck2/index.html‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
<!DOCTYPE html>
2+
<html lang="de">
3+
4+
<head>
5+
6+
<meta charset="UTF-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<title>HerkunftCheck</title>
9+
10+
<link rel="stylesheet" href="style/style_v1.css" />
11+
<link rel="stylesheet" href="style/map.css" />
12+
13+
14+
15+
<!-- Leaflet CSS -->
16+
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
17+
<!-- Leaflet JS -->
18+
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
19+
20+
21+
<!-- Polyline Decorator (if needed) -->
22+
<script
23+
src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-polylinedecorator/1.6.0/leaflet.polylineDecorator.min.js"></script>
24+
25+
<!-- Working Leaflet.curve plugin -->
26+
<script src="https://rawcdn.githack.com/elfalem/Leaflet.curve/master/src/leaflet.curve.js"></script>
27+
28+
<!-- MarkerCluster CSS & JS -->
29+
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css" />
30+
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css" />
31+
<script src="https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js"></script>
32+
<script
33+
src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-polylinedecorator/0.7.3/leaflet.polylineDecorator.min.js"></script>
34+
35+
<script src="https://unpkg.com/leaflet-providers@latest/leaflet-providers.js"></script>
36+
37+
38+
<script src="script/map_1.1.2.js"></script>
39+
40+
41+
<script>
42+
43+
document.addEventListener("DOMContentLoaded", function () {
44+
InitializeMapAndData();
45+
});
46+
</script>
47+
48+
</head>
49+
50+
<body>
51+
<div class="copyright">
52+
<div class="copyright-container">
53+
<img src="img/logo_2.png" class="logo" /> <span class="copyright-title">HerkunftCheck</span>
54+
55+
</div>
56+
</div>
57+
58+
<div id="map"></div>
59+
60+
<div class="bottom-sheet" id="product-card">
61+
<div class="drag-handle" onclick="toggleSheet()"></div>
62+
<div class="sheet-content">
63+
64+
<div class="product-header">
65+
<h1 id="product-name" class="product-name">Apfel-Birnen-Saft</h1>
66+
67+
<div class="info-card">
68+
69+
<img id="product-image" src="https://source.unsplash.com/400x220/?juice,fruit" alt="Produktbild">
70+
</div>
71+
</div>
72+
73+
<div class="product-info">
74+
75+
<div class="info-card">
76+
<h3>Produktinformationen</h3>
77+
<p><strong>Hergestellt am:</strong> <span id="production-date">01.04.2025</span></p>
78+
<p><strong>MHD:</strong> <span id="best-before">01.10.2025</span></p>
79+
<p><strong>Kategorie:</strong> <span id="product-category">Fruchtsaft</span></p>
80+
<p><strong>Produzent:</strong> <span id="company-name">Obsthof Müller</span></p>
81+
</div>
82+
83+
<div class="info-card">
84+
<h3>Produktionsschritte</h3>
85+
<ul class="steps-list">
86+
<li>1. Ernte der Früchte</li>
87+
<li>2. Reinigung und Sortierung</li>
88+
<li>3. Pressung</li>
89+
<li>4. Pasteurisierung</li>
90+
<li>5. Abfüllung</li>
91+
<li>6. Etikettierung & Verpackung</li>
92+
</ul>
93+
</div>
94+
95+
<div class="info-card">
96+
<h3>Zutaten</h3>
97+
<p>Apfelsaft (60 %), Birnensaft (40 %), ohne Zuckerzusatz, naturtrüb</p>
98+
</div>
99+
100+
<div class="info-card">
101+
<h3>Zertifikate</h3>
102+
<div class="certificate-images" id="certificates">
103+
<img
104+
src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Organic_Logo_EU.svg/120px-Organic_Logo_EU.svg.png"
105+
alt="Bio" />
106+
<img
107+
src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Fairtrade-logo.svg/120px-Fairtrade-logo.svg.png"
108+
alt="Fairtrade" />
109+
</div>
110+
</div>
111+
112+
</div>
113+
114+
</div>
115+
</div>
116+
117+
<script>
118+
const sheet = document.getElementById("product-card");
119+
let startY, currentY, isDragging = false;
120+
121+
function toggleSheet() {
122+
sheet.classList.toggle("open");
123+
}
124+
125+
sheet.addEventListener("touchstart", e => {
126+
startY = e.touches[0].clientY;
127+
isDragging = true;
128+
});
129+
130+
sheet.addEventListener("touchmove", e => {
131+
if (!isDragging) return;
132+
currentY = e.touches[0].clientY;
133+
let deltaY = currentY - startY;
134+
if (deltaY > 0) {
135+
sheet.style.transform = `translateY(${deltaY}px)`;
136+
}
137+
});
138+
139+
sheet.addEventListener("touchend", () => {
140+
isDragging = false;
141+
if (currentY - startY > 100) {
142+
sheet.classList.remove("open");
143+
} else {
144+
sheet.classList.add("open");
145+
}
146+
sheet.style.transform = "";
147+
});
148+
</script>
149+
150+
</body>
151+
152+
</html>

0 commit comments

Comments
 (0)