102 lines
No EOL
8.7 KiB
HTML
102 lines
No EOL
8.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="floatBar top">
|
|
<div class="btn right" v-on:click="toggleMenu();interfaceClick()">
|
|
<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();interfaceClick()">
|
|
<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();interfaceClick()">
|
|
<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();interfaceClick()">
|
|
<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>
|
|
<!-- menu -->
|
|
<div class="fullScreenMenu" style="display: none;">
|
|
<!-- close btn -->
|
|
<div class="closeBtn">
|
|
<div class="btn" v-on:click="toggleMenu()">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M6.2253 4.81108C5.83477 4.42056 5.20161 4.42056 4.81108 4.81108C4.42056 5.20161 4.42056 5.83477 4.81108 6.2253L10.5858 12L4.81114 17.7747C4.42062 18.1652 4.42062 18.7984 4.81114 19.1889C5.20167 19.5794 5.83483 19.5794 6.22535 19.1889L12 13.4142L17.7747 19.1889C18.1652 19.5794 18.7984 19.5794 19.1889 19.1889C19.5794 18.7984 19.5794 18.1652 19.1889 17.7747L13.4142 12L19.189 6.2253C19.5795 5.83477 19.5795 5.20161 19.189 4.81108C18.7985 4.42056 18.1653 4.42056 17.7748 4.81108L12 10.5858L6.2253 4.81108Z" fill="currentColor" /> </svg>
|
|
</div>
|
|
</div>
|
|
<!-- content -->
|
|
<div v-if="menuVisible" class="container">
|
|
<h3 style="text-align: center;">Images</h3>
|
|
<ul>
|
|
<li v-for="file in files">
|
|
<img v-if="file.mime.includes('image')" v-bind:src="'/files/'+file.basename">
|
|
<video v-if="file.mime.includes('video')" autoplay muted loop>
|
|
<source v-bind:src="'/files/'+file.basename" v-bind:type="file.mime">
|
|
</video>
|
|
{{file.filename}}
|
|
<span class="btn" v-on:click="moveToBlacklist(file)">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <path fill-rule="evenodd" clip-rule="evenodd" d="M17 5V4C17 2.89543 16.1046 2 15 2H9C7.89543 2 7 2.89543 7 4V5H4C3.44772 5 3 5.44772 3 6C3 6.55228 3.44772 7 4 7H5V18C5 19.6569 6.34315 21 8 21H16C17.6569 21 19 19.6569 19 18V7H20C20.5523 7 21 6.55228 21 6C21 5.44772 20.5523 5 20 5H17ZM15 4H9V5H15V4ZM17 7H7V18C7 18.5523 7.44772 19 8 19H16C16.5523 19 17 18.5523 17 18V7Z" fill="currentColor" /> <path d="M9 9H11V17H9V9Z" fill="currentColor" /> <path d="M13 9H15V17H13V9Z" fill="currentColor" /> </svg>
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
<h3 style="text-align: center;">Settings</h3>
|
|
<p class="pRow">
|
|
<label for="carouselTimeout">carouselTimeout</label>
|
|
<input type="number" name="carouselTimeout" v-model="carouselTimeout">
|
|
<span style="display:flex;">
|
|
<span class="btn" title="reset" v-on:click="carouselTimeout=20000;startCarousel()" style="margin-right: 5px;">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M13.1459 11.0499L12.9716 9.05752L15.3462 8.84977C14.4471 7.98322 13.2242 7.4503 11.8769 7.4503C9.11547 7.4503 6.87689 9.68888 6.87689 12.4503C6.87689 15.2117 9.11547 17.4503 11.8769 17.4503C13.6977 17.4503 15.2911 16.4771 16.1654 15.0224L18.1682 15.5231C17.0301 17.8487 14.6405 19.4503 11.8769 19.4503C8.0109 19.4503 4.87689 16.3163 4.87689 12.4503C4.87689 8.58431 8.0109 5.4503 11.8769 5.4503C13.8233 5.4503 15.5842 6.24474 16.853 7.52706L16.6078 4.72412L18.6002 4.5498L19.1231 10.527L13.1459 11.0499Z" fill="currentColor"/></svg>
|
|
</span>
|
|
<span class="btn" title="apply" v-on:click="startCarousel()">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M10.5858 13.4142L7.75735 10.5858L6.34314 12L10.5858 16.2427L17.6568 9.1716L16.2426 7.75739L10.5858 13.4142Z" fill="currentColor"/></svg>
|
|
</span>
|
|
</span>
|
|
</p>
|
|
<p class="pRow">
|
|
Imagelist
|
|
<span class="btn" title="refresh" v-on:click="loadData()">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M4.56079 10.6418L6.35394 3.94971L8.25402 5.84979C11.7312 3.6588 16.3814 4.07764 19.41 7.1063L17.9958 8.52052C15.7536 6.27827 12.3686 5.87519 9.71551 7.31128L11.2529 8.84869L4.56079 10.6418Z" fill="currentColor"/> <path d="M19.4392 13.3581L17.646 20.0502L15.7459 18.1501C12.2688 20.3411 7.61857 19.9223 4.58991 16.8936L6.00413 15.4794C8.24638 17.7217 11.6313 18.1247 14.2844 16.6887L12.747 15.1512L19.4392 13.3581Z" fill="currentColor"/></svg>
|
|
</span>
|
|
</p>
|
|
<p style="text-align:center;margin-top:30px;">
|
|
<span>Made with ❤ by <a href="https://jgerstbe.github.io" target="_blank" style="text-decoration: none;">@jgerstbe</a> on <a target="_blank" href="https://jgeb.ddns.net:3000/jan/webframe" style="text-decoration: none;">gogs</a></span>
|
|
</p>
|
|
</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> |