107 lines
3.8 KiB
HTML
107 lines
3.8 KiB
HTML
<html>
|
|
|
|
<head>
|
|
<title>Galerie Dieter</title>
|
|
|
|
<!-- vue -->
|
|
<!--dev-->
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
|
|
<!--prod-->
|
|
<!--script src="https://cdn.jsdelivr.net/npm/vue@2"></script-->
|
|
|
|
<!-- bootstrap -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
|
|
<script src="https://code.jquery.com/jquery-3.6.1.slim.min.js" integrity="sha256-w8CvhFs7iHNVUtnSP0YKEg00p9Ih13rlL9zGqvLdePA=" crossorigin="anonymous"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
|
|
|
|
|
|
</head>
|
|
|
|
<body style="width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh">
|
|
<!-- templates -->
|
|
<div>
|
|
<!-- gallery-component -->
|
|
<script id="gallery-component" type="text/x-template">
|
|
<div class="container">
|
|
<div id="carouselExampleFade" class="carousel slide carousel-fade w-100 h-100" data-bs-ride="carousel">
|
|
<div class="carousel-indicators">
|
|
<button v-for="(item, index) in items" type="button" data-bs-target="#carouselExampleFade" :data-bs-slide-to="index"
|
|
:class="{'active': index === 0}" :aria-current="index === 0" :aria-label="'Slide ' + index"></button>
|
|
</div>
|
|
<div class="carousel-inner w-100 h-100">
|
|
<div v-for="(item, index) in items" class="carousel-item w-100 h-100" :class="{'active':index===0}">
|
|
<img :src="item" class="d-block w-100 h-100" style="object-fit: scale-down" :alt="item">
|
|
</div>
|
|
</div>
|
|
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
|
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Previous</span>
|
|
</button>
|
|
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
|
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Next</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
<script>
|
|
Vue.component('gallery-component', {
|
|
template: '#gallery-component',
|
|
data: () => {
|
|
return {
|
|
items: [
|
|
'1.jpg',
|
|
'2.jpg',
|
|
'3.jpg',
|
|
],
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<!-- main-component -->
|
|
<script id="main-component" type="text/x-template">
|
|
<div class="w-100 h-100 d-flex flex-column text-center">
|
|
<!-- header -->
|
|
<div>
|
|
<h1>Galerie Dieter</h1>
|
|
</div>
|
|
|
|
<!-- gallery -->
|
|
<gallery-component class="h-100" style="min-height: 0"/>
|
|
|
|
<!-- footer -->
|
|
<div>
|
|
<p>
|
|
GALERIE DIETER<br>
|
|
PFARRGASSE 18<br>
|
|
74354 BESIGHEIM<br>
|
|
TEL 07143/34293 FAX 07143/31130
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
<script>
|
|
Vue.component('main-component', {
|
|
template: '#main-component',
|
|
data: () => {
|
|
return {
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
</div>
|
|
|
|
<!-- app -->
|
|
<div id="app" class="w-100 h-100">
|
|
<main-component></main-component>
|
|
</div>
|
|
<script>
|
|
var app = new Vue({
|
|
el: '#app',
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |