55 lines
No EOL
3.6 KiB
HTML
55 lines
No EOL
3.6 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="floatBar top">
|
|
<div class="btn right" v-on:click="toggleCarousel()">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M2 6C2 5.44772 2.44772 5 3 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H3C2.44772 7 2 6.55228 2 6Z" fill="currentColor"/> <path d="M2 12.0322C2 11.4799 2.44772 11.0322 3 11.0322H21C21.5523 11.0322 22 11.4799 22 12.0322C22 12.5845 21.5523 13.0322 21 13.0322H3C2.44772 13.0322 2 12.5845 2 12.0322Z" fill="currentColor"/> <path d="M3 17.0645C2.44772 17.0645 2 17.5122 2 18.0645C2 18.6167 2.44772 19.0645 3 19.0645H21C21.5523 19.0645 22 18.6167 22 18.0645C22 17.5122 21.5523 17.0645 21 17.0645H3Z" fill="currentColor"/></svg>
|
|
</div>
|
|
</div>
|
|
<div class="btn 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="btn 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="floatBar bottom">
|
|
<div class="btn" 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>
|
|
</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> |