<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/assets/css/main.css">
<link rel="stylesheet" href="/assets/css/product.css">
<title>CameraBuy - Produkt</title>
<link rel="stylesheet" href="https://use.typekit.net/mtk3vtw.css">
<script defer src="/assets/script/cart.js"></script>
</head>
<body>
<header>
<nav>
<div class="navigation_image" id="logo_container">
<a href="#"><img src="/assets/img/logo.svg" alt="CameraBuy Logo"></a>
</div>
<div id="navigation">
<a href="/">Neuigkeiten</a>
<a href="/shop" >Shop</a>
<a href="/contact" >Kontakt</a>
</div>
<div class="navigation_image" id="shopping_cart_container">
<a href="/cart"><img src="/assets/img/cart.svg" alt="Shopping Cart"></a>
</div>
</nav>
</header>
<main>
<script>
//this function is animating the cart
function updatecart() {
const cartImage = document.querySelector("#shopping_cart_container img");
cartImage.style.marginRight = '15vw';
cartImage.style.transform = 'scaleX(1)';
setTimeout(() => {
cartImage.style.marginRight = '0';
cartImage.style.transform = 'scaleX(-1)';
}, 500);
}
</script>
<div id="product_showroom">
<div class="image_gallery">
<div id="gallery">
{% set images = entry.productimg.kind('image').all() %}
{% for key, image in images %}
<img src="/assets/filesystem/productimg/{{ image.getUrl() }}" onclick="showPreview('/assets/filesystem/productimg/{{ image.getUrl() }}')" alt="{{ image.title }}">
{% endfor %}
</div>
<div id="preview">
{% set preview_image = entry.productimg.kind('image').one() %}
<img id="preview-img" src="/assets/filesystem/productimg/{{ preview_image.getUrl() }}" alt="{{ preview_image.title }}">
</div>
<script>
function showPreview(imageUrl) {
var previewImg = document.getElementById('preview-img');
previewImg.src = imageUrl;
}
</script>
</div>
<div id="product_keyinfos">
<div id="tag_title_description">
{% if entry.tags %}
<p class='tag'>{{entry.tags}}</p>
{% endif %}
<h3>{{entry.title}}</h3>
<p class='productdiscription'>{{entry.description}}</p>
</div>
<div id="warenkorb_preis">
<button class="buttonlarge" type="button" onclick="addtocart('{{entry.id}}')">Zum Warenkorb<br>hinzufügen</button>
<p class='price'>{{ entry.price|money}}</p>
</div>
<p class="service_info" >Camera Buy versendet alle Artikel kostenlos und innerhalb von 3 Werktagen. Bei Fragen wenden Sie sich bitte an unseren <a href="#">Support</a>.</p>
</div>
</div>
<section id="description">
<h2>Beschreibung</h2>
<p>{{entry.longtext}}</p>
</section>
<section id="specifications">
<div>
<h2>Technische Daten</h2>
<div class="specification">
<p class="specification_key" >Geräteklasse:</p>
<p>{{entry.geraeteklasse}}</p>
</div>
<div class="specification">
<p class="specification_key" >Kameraart:</p>
<p>{{entry.kameraart}}</p>
</div>
<div class="specification">
<p class="specification_key" >Maximale Auflösung (Video):</p>
<p>{{entry.maxVidRes}}</p>
</div>
<div class="specification">
<p class="specification_key" >Maximale Bildrate:</p>
<p>{{entry.fps}}</p>
</div>
<div class="specification">
<p class="specification_key" >Maximale Auflösung (Foto):</p>
<p>{{entry.maxFotoRes}}</p>
</div>
<div class="specification">
<p class="specification_key" >Fokussystem:</p>
<p>{{entry.fokussystem}}</p>
</div>
<div class="specification">
<p class="specification_key" >Sensorgröße:</p>
<p>{{entry.sensorgroesse}}</p>
</div>
<div class="specification">
<p class="specification_key" >Batterietyp:</p>
<p>{{entry.batterietyp}}</p>
</div>
<div class="specification">
<p class="specification_key" >Objektivbajonett:</p>
<p>{{entry.objektivbajonett}}</p>
</div>
<div class="specification">
<p class="specification_key" >Speicher:</p>
<p>{{entry.speicher}}</p>
</div>
<div class="specification">
<p class="specification_key" >Stabilisierter Sensor:</p>
<p>{{entry.sensorstabilisierung}}</p>
</div>
<div class="specification">
<p class="specification_key" >Besonderheit:</p>
<p>{{entry.besonderheit}}</p>
</div>
</div>
</section>
<section id="video">
{% set entry = craft.entries.section('start').one() %}
{% set image = entry.bild.kind('image').one() %}
{% if image %}
<img src="/assets/filesystem/img/{{ image.getUrl() }}" alt="{{ image.title }}">
{% endif %}
<div>
<h3>{{ craft.entries.section('start').one().headline }}</h3>
<p>
{{ craft.entries.section('start').one().longtext }}
</p>
<a href="{{ craft.entries.section('start').one().linkurl }}" class="buttonlarge darkbutton" >{{ craft.entries.section('start').one().buttonText }}</a>
</div>
</section>
</main>
{{ include ('footer.html') }}
</body>
</html>