48 lines
No EOL
2.7 KiB
HTML
48 lines
No EOL
2.7 KiB
HTML
<html>
|
|
|
|
<head>
|
|
<title>WebFrame</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="icon" type="image/png" href="https://dummyimage.com/92x92/52d0dc/475b5a.png&text=+WF">
|
|
<link rel="manifest" href="/manifest.webmanifest">
|
|
<link rel="stylesheet" type="text/css" href="index.css">
|
|
<script src="vue.js"></script>
|
|
<link rel="stylesheet" href="animate.min.css" />
|
|
</head>
|
|
|
|
<body>
|
|
<div id="app">
|
|
<div v-if="files && files.length > 0">
|
|
<!-- controls -->
|
|
<div class="controls">
|
|
<div class="floatBtn left" v-on:click="prevClick()">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M4 12C4 11.4477 4.44772 11 5 11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H5C4.44772 13 4 12.5523 4 12Z" fill="currentColor"/></svg>
|
|
</div>
|
|
<div class="floatBtn right" v-on:click="nextClick()">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 4C11.4477 4 11 4.44772 11 5V11H5C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13H11V19C11 19.5523 11.4477 20 12 20C12.5523 20 13 19.5523 13 19V13H19C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11H13V5C13 4.44772 12.5523 4 12 4Z" fill="currentColor"/></svg>
|
|
</div>
|
|
<div class="floatBtn bottom" v-on:click="toggleCarousel()">
|
|
<svg v-if="!carouselActive" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M15 12.3301L9 16.6603L9 8L15 12.3301Z" fill="currentColor"/></svg>
|
|
<svg v-if="carouselActive" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M11 7H8V17H11V7Z" fill="currentColor"/> <path d="M13 17H16V7H13V17Z" fill="currentColor"/></svg>
|
|
</div>
|
|
</div>
|
|
<!-- touch canvas -->
|
|
<div class="touchCanvas" v-on:click="toggleControls()"></div>
|
|
<!-- content -->
|
|
<div class="content">
|
|
<img v-if="files[index].mime.includes('image')" v-bind:src="'/files/'+files[index].basename" alt="">
|
|
<video v-if="videoSrc" autoplay muted loop>
|
|
<source v-bind:src="videoSrc" v-bind:type="files[index].mime">
|
|
</video>
|
|
</div>
|
|
</div>
|
|
<div class="loading" v-else class="empty">
|
|
<span v-if="!isDownloading">No images.</span>
|
|
<span v-if="!isDownloading">Downloading images...</span>
|
|
|
|
</div>
|
|
</div>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
|
|
</html> |