Initial commit
This commit is contained in:
Lizandro Guarnizo
@@ -0,0 +1,294 @@
|
||||
<div class="float-right flex-row">
|
||||
<main class="max-w-screen-lg h-full">
|
||||
<!-- file upload modal -->
|
||||
<article aria-label="File Upload Modal" class="relative h-full flex flex-col bg-white shadow-xl rounded-md"
|
||||
ondrop="dropHandler(event);" ondragover="dragOverHandler(event);"
|
||||
ondragleave="dragLeaveHandler(event);" ondragenter="dragEnterHandler(event);">
|
||||
<!-- overlay -->
|
||||
<div id="overlay"
|
||||
class="w-full h-full absolute top-0 left-0 pointer-events-none z-50 flex flex-col items-center justify-center rounded-md">
|
||||
<i>
|
||||
<svg class="fill-current w-12 h-12 mb-3 text-blue-700" xmlns="http://www.w3.org/2000/svg" width="24"
|
||||
height="24" viewBox="0 0 24 24">
|
||||
<path d="M19.479 10.092c-.212-3.951-3.473-7.092-7.479-7.092-4.005 0-7.267 3.141-7.479 7.092-2.57.463-4.521 2.706-4.521 5.408 0 3.037 2.463 5.5 5.5 5.5h13c3.037 0 5.5-2.463 5.5-5.5 0-2.702-1.951-4.945-4.521-5.408zm-7.479-1.092l4 4h-3v4h-2v-4h-3l4-4z"/>
|
||||
</svg>
|
||||
</i>
|
||||
<p class="text-lg text-blue-700">Drop files to upload</p>
|
||||
</div>
|
||||
|
||||
<!-- scroll area -->
|
||||
<section class="h-full overflow-auto p-8 w-full h-full flex flex-col">
|
||||
<header class="border-dashed border-2 border-gray-400 py-12 flex flex-col justify-center items-center">
|
||||
<p class="mb-3 font-semibold text-gray-900 flex flex-wrap justify-center p-2">
|
||||
<span>Drag and drop your</span> <span>files anywhere or</span>
|
||||
</p>
|
||||
<input id="hidden-input" type="file" multiple class="hidden" accept=".csv"/>
|
||||
<button id="button"
|
||||
class="mt-2 rounded-sm px-3 py-1 bg-gray-200 hover:bg-gray-300 focus:shadow-outline focus:outline-none">
|
||||
Upload a file
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<h1 class="pt-8 pb-3 font-semibold sm:text-lg text-gray-900">
|
||||
To Upload
|
||||
</h1>
|
||||
|
||||
<ul id="gallery" class="flex flex-1 flex-wrap -m-1">
|
||||
<li id="empty"
|
||||
class="h-full w-full text-center flex flex-col items-center justify-center items-center">
|
||||
<img class="mx-auto w-32"
|
||||
src="https://user-images.githubusercontent.com/507615/54591670-ac0a0180-4a65-11e9-846c-e55ffce0fe7b.png"
|
||||
alt="no data"/>
|
||||
<span class="text-small text-gray-500">No files selected</span>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<!-- sticky footer -->
|
||||
<footer class="flex justify-end px-8 pb-8 pt-4">
|
||||
<button id="submit"
|
||||
class="rounded-sm px-3 py-1 bg-blue-700 hover:bg-blue-500 text-white focus:shadow-outline focus:outline-none">
|
||||
Upload now
|
||||
</button>
|
||||
<button id="cancel"
|
||||
class="ml-3 rounded-sm px-3 py-1 hover:bg-gray-300 focus:shadow-outline focus:outline-none">
|
||||
Cancel
|
||||
</button>
|
||||
</footer>
|
||||
</article>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- using two similar templates for simplicity in js code -->
|
||||
<template id="file-template">
|
||||
<li class="block p-1 w-full h-24">
|
||||
<article tabindex="0"
|
||||
class="group w-full h-full rounded-md focus:outline-none focus:shadow-outline elative bg-gray-100 cursor-pointer relative shadow-sm">
|
||||
<img alt="upload preview" class="img-preview hidden w-full h-full sticky object-cover rounded-md bg-fixed"/>
|
||||
|
||||
<section class="flex flex-col rounded-md text-xs break-words w-full h-full z-20 absolute top-0 py-2 px-3">
|
||||
<h1 class="flex-1 group-hover:text-blue-800"></h1>
|
||||
<div class="flex">
|
||||
<span class="p-1 text-blue-800">
|
||||
<i>
|
||||
<svg class="fill-current w-4 h-4 ml-auto pt-1" xmlns="http://www.w3.org/2000/svg" width="24"
|
||||
height="24" viewBox="0 0 24 24">
|
||||
<path d="M15 2v5h5v15h-16v-20h11zm1-2h-14v24h20v-18l-6-6z"/>
|
||||
</svg>
|
||||
</i>
|
||||
</span>
|
||||
<p class="p-1 size text-xs text-gray-700"></p>
|
||||
<button class="delete ml-auto focus:outline-none hover:bg-gray-300 p-1 rounded-md text-gray-800">
|
||||
<svg class="pointer-events-none fill-current w-4 h-4 ml-auto" xmlns="http://www.w3.org/2000/svg"
|
||||
width="24" height="24" viewBox="0 0 24 24">
|
||||
<path class="pointer-events-none"
|
||||
d="M3 6l3 18h12l3-18h-18zm19-4v2h-20v-2h5.711c.9 0 1.631-1.099 1.631-2h5.316c0 .901.73 2 1.631 2h5.711z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<template id="image-template">
|
||||
<li class="block p-1 w-full h-24">
|
||||
<article tabindex="0"
|
||||
class="group hasImage w-full h-full rounded-md focus:outline-none focus:shadow-outline bg-gray-100 cursor-pointer relative text-transparent hover:text-white shadow-sm">
|
||||
<img alt="upload preview" class="img-preview w-full h-full sticky object-cover rounded-md bg-fixed"/>
|
||||
|
||||
<section class="flex flex-col rounded-md text-xs break-words w-full h-full z-20 absolute top-0 py-2 px-3">
|
||||
<h1 class="flex-1"></h1>
|
||||
<div class="flex">
|
||||
<span class="p-1">
|
||||
<i>
|
||||
<svg class="fill-current w-4 h-4 ml-auto pt-" xmlns="http://www.w3.org/2000/svg" width="24"
|
||||
height="24" viewBox="0 0 24 24">
|
||||
<path d="M5 8.5c0-.828.672-1.5 1.5-1.5s1.5.672 1.5 1.5c0 .829-.672 1.5-1.5 1.5s-1.5-.671-1.5-1.5zm9 .5l-2.519 4-2.481-1.96-4 5.96h14l-5-8zm8-4v14h-20v-14h20zm2-2h-24v18h24v-18z"/>
|
||||
</svg>
|
||||
</i>
|
||||
</span>
|
||||
|
||||
<p class="p-1 size text-xs"></p>
|
||||
<button class="delete ml-auto focus:outline-none hover:bg-gray-300 p-1 rounded-md">
|
||||
<svg class="pointer-events-none fill-current w-4 h-4 ml-auto" xmlns="http://www.w3.org/2000/svg"
|
||||
width="24" height="24" viewBox="0 0 24 24">
|
||||
<path class="pointer-events-none"
|
||||
d="M3 6l3 18h12l3-18h-18zm19-4v2h-20v-2h5.711c.9 0 1.631-1.099 1.631-2h5.316c0 .901.73 2 1.631 2h5.711z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const fileTempl = document.getElementById("file-template"),
|
||||
imageTempl = document.getElementById("image-template"),
|
||||
empty = document.getElementById("empty");
|
||||
|
||||
// use to store pre selected files
|
||||
let FILES = {};
|
||||
|
||||
// check if file is of type image and prepend the initialied
|
||||
// template to the target element
|
||||
function addFile(target, file) {
|
||||
const isImage = file.type.match("image.*"),
|
||||
objectURL = URL.createObjectURL(file);
|
||||
|
||||
const clone = isImage
|
||||
? imageTempl.content.cloneNode(true)
|
||||
: fileTempl.content.cloneNode(true);
|
||||
|
||||
clone.querySelector("h1").textContent = file.name;
|
||||
clone.querySelector("li").id = objectURL;
|
||||
clone.querySelector(".delete").dataset.target = objectURL;
|
||||
clone.querySelector(".size").textContent =
|
||||
file.size > 1024
|
||||
? file.size > 1048576
|
||||
? Math.round(file.size / 1048576) + "mb"
|
||||
: Math.round(file.size / 1024) + "kb"
|
||||
: file.size + "b";
|
||||
|
||||
isImage &&
|
||||
Object.assign(clone.querySelector("img"), {
|
||||
src: objectURL,
|
||||
alt: file.name
|
||||
});
|
||||
|
||||
empty.classList.add("hidden");
|
||||
target.prepend(clone);
|
||||
|
||||
FILES[objectURL] = file;
|
||||
}
|
||||
|
||||
const gallery = document.getElementById("gallery"),
|
||||
overlay = document.getElementById("overlay");
|
||||
|
||||
// click the hidden input of type file if the visible button is clicked
|
||||
// and capture the selected files
|
||||
const hidden = document.getElementById("hidden-input");
|
||||
document.getElementById("button").onclick = () => hidden.click();
|
||||
hidden.onchange = (e) => {
|
||||
for (const file of e.target.files) {
|
||||
addFile(gallery, file);
|
||||
}
|
||||
};
|
||||
|
||||
// use to check if a file is being dragged
|
||||
const hasFiles = ({dataTransfer: {types = []}}) =>
|
||||
types.indexOf("Files") > -1;
|
||||
|
||||
// use to drag dragenter and dragleave events.
|
||||
// this is to know if the outermost parent is dragged over
|
||||
// without issues due to drag events on its children
|
||||
let counter = 0;
|
||||
|
||||
// reset counter and append file to gallery when file is dropped
|
||||
function dropHandler(ev) {
|
||||
ev.preventDefault();
|
||||
for (const file of ev.dataTransfer.files) {
|
||||
addFile(gallery, file);
|
||||
overlay.classList.remove("draggedover");
|
||||
counter = 0;
|
||||
}
|
||||
}
|
||||
|
||||
// only react to actual files being dragged
|
||||
function dragEnterHandler(e) {
|
||||
e.preventDefault();
|
||||
if (!hasFiles(e)) {
|
||||
return;
|
||||
}
|
||||
++counter && overlay.classList.add("draggedover");
|
||||
}
|
||||
|
||||
function dragLeaveHandler(e) {
|
||||
1 > --counter && overlay.classList.remove("draggedover");
|
||||
}
|
||||
|
||||
function dragOverHandler(e) {
|
||||
if (hasFiles(e)) {
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
// event delegation to caputre delete events
|
||||
// fron the waste buckets in the file preview cards
|
||||
gallery.onclick = ({target}) => {
|
||||
if (target.classList.contains("delete")) {
|
||||
const ou = target.dataset.target;
|
||||
document.getElementById(ou).remove(ou);
|
||||
gallery.children.length === 1 && empty.classList.remove("hidden");
|
||||
delete FILES[ou];
|
||||
}
|
||||
};
|
||||
|
||||
// print all selected files
|
||||
document.getElementById("submit").onclick = () => {
|
||||
var data = new FormData();
|
||||
let files = Object.values(FILES);
|
||||
for (var x = 0; x < files.length; x++) {
|
||||
|
||||
data.append('files', files[x], files[x].name);
|
||||
}
|
||||
var request = new XMLHttpRequest();
|
||||
request.open('post', '/account/file-manager/upload', true);
|
||||
// upload progress event
|
||||
request.upload.addEventListener('progress', function (e) {
|
||||
var percent_complete = (e.loaded / e.total) * 100;
|
||||
|
||||
// Percentage of upload completed
|
||||
console.log(percent_complete);
|
||||
});
|
||||
|
||||
// AJAX request finished event
|
||||
request.addEventListener('load', function (e) {
|
||||
clearUploads()
|
||||
});
|
||||
request.send(data);
|
||||
};
|
||||
|
||||
// clear entire selection
|
||||
document.getElementById("cancel").onclick = () => {
|
||||
clearUploads()
|
||||
};
|
||||
|
||||
function clearUploads() {
|
||||
while (gallery.children.length > 0) {
|
||||
gallery.lastChild.remove();
|
||||
}
|
||||
FILES = {};
|
||||
empty.classList.remove("hidden");
|
||||
gallery.append(empty);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.hasImage:hover section {
|
||||
background-color: rgba(5, 5, 5, 0.4);
|
||||
}
|
||||
|
||||
.hasImage:hover button:hover {
|
||||
background: rgba(5, 5, 5, 0.45);
|
||||
}
|
||||
|
||||
#overlay p,
|
||||
i {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#overlay.draggedover {
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
#overlay.draggedover p,
|
||||
#overlay.draggedover i {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.group:hover .group-hover\:text-blue-800 {
|
||||
color: #2b6cb0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,120 @@
|
||||
<!-- container -->
|
||||
<nav
|
||||
class="fixed bottom-0 w-full border bg-white hidden
|
||||
overflow-x-auto">
|
||||
<!-- Bottom Icon Navigation Menu -->
|
||||
|
||||
<a
|
||||
href="."
|
||||
class="flex flex-col flex-grow items-center justify-center
|
||||
overflow-hidden whitespace-no-wrap text-sm transition-colors
|
||||
duration-100 ease-in-out hover:bg-gray-200 focus:text-orange-500">
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline>
|
||||
<path
|
||||
d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0
|
||||
2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path>
|
||||
</svg>
|
||||
|
||||
<span class="hidden text-sm capitalize">Inbox</span>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="."
|
||||
class="flex flex-col flex-grow items-center justify-center
|
||||
overflow-hidden whitespace-no-wrap text-sm transition-colors
|
||||
duration-100 ease-in-out hover:bg-gray-200 text-orange-500">
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="feather feather-github">
|
||||
<path
|
||||
d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0
|
||||
0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77
|
||||
5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7
|
||||
0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0
|
||||
0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
|
||||
</svg>
|
||||
|
||||
<span class="text-sm capitalize">github</span>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="."
|
||||
class="flex flex-col flex-grow items-center justify-center
|
||||
overflow-hidden whitespace-no-wrap text-sm transition-colors
|
||||
duration-100 ease-in-out hover:bg-gray-200 focus:text-orange-500">
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="feather feather-bookmark">
|
||||
<path
|
||||
d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
|
||||
</svg>
|
||||
|
||||
<span class="hidden text-sm capitalize">bookmark</span>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="."
|
||||
class="flex flex-col flex-grow items-center justify-center
|
||||
overflow-hidden whitespace-no-wrap text-sm transition-colors
|
||||
duration-100 ease-in-out hover:bg-gray-200 focus:text-orange-500">
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="3"></circle>
|
||||
<path
|
||||
d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83
|
||||
2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65
|
||||
0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0
|
||||
0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2
|
||||
2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0
|
||||
0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0
|
||||
4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2
|
||||
0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0
|
||||
1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1
|
||||
1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0
|
||||
0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0
|
||||
1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0
|
||||
0-1.51 1z"></path>
|
||||
</svg>
|
||||
|
||||
<span class="hidden text-sm capitalize">Settings</span>
|
||||
</a>
|
||||
|
||||
</nav>
|
||||
@@ -0,0 +1,41 @@
|
||||
<nav class="px-1 md:px-4 flex justify-between bg-white h-16 border-b-2" x-data="{
|
||||
open: false,
|
||||
}">
|
||||
<!-- top bar -->
|
||||
|
||||
<ul class="flex items-center md:hidden">
|
||||
<!-- top bar left -->
|
||||
<div class="items-center justify-start h-16 md:px-10 py-2 object-cover">
|
||||
<img src="/img/logo.webp" alt="" class="w-20 ml-11 mt-1 md:mt-0 md:ml-0">
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
<ul class="flex items-center">
|
||||
<!-- top bar center -->
|
||||
<li>
|
||||
<h1 class="mx-2 lg:pl-0 text-gray-700 md:text-sm text-xs" >{{ .user.NombreUsuario }} - {{ .user.Role.Name }}</h1>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="flex items-center">
|
||||
<!-- top bar right -->
|
||||
<li class="h-8 w-8 relative profile-action">
|
||||
<button @click="open = !open" class="block h-8 w-8 rounded-full overflow-hidden border-1 border-gray-600 focus:outline-none focus:border-white">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-7 h-7">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- dropdown menu -->
|
||||
<div x-show="open" @click.outside="open = false" class="profile-action-dropdown absolute bg-gray-100 border border-t-0 shadow-xl text-gray-700 rounded-lg overflow-hidden w-48 top-10 right-0 mr-6 z-10">
|
||||
<a href="/app/profile" class="block px-4 py-2 hover:bg-gray-200">Mi cuenta</a>
|
||||
<a href="/do/logout" class="block px-4 py-2 hover:bg-gray-200"
|
||||
onclick="event.preventDefault(); document.getElementById('logout-form-profile').submit();">
|
||||
Cerrar sesión
|
||||
</a>
|
||||
<form id="logout-form-profile" action="/do/logout" method="POST" style="display: none;"></form>
|
||||
</div>
|
||||
<!-- dropdown menu end -->
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
@@ -0,0 +1,54 @@
|
||||
<footer class="text-gray-700 body-font bg-white absolute w-full bottom-0 left-0">
|
||||
<div class="container mx-auto flex items-center sm:flex-row flex-col">
|
||||
<a class="flex title-font font-medium items-center md:justify-start justify-center text-gray-900">
|
||||
<span class="ml-3 text-xl">Boilerplate</span>
|
||||
</a>
|
||||
<p class="text-sm text-gray-500 sm:ml-4 sm:pl-4 sm:border-l-2 sm:border-gray-200 sm:py-2 sm:mt-0 mt-4">© 2020
|
||||
Boilerplate —
|
||||
<a href="https://twitter.com/Company" class="text-gray-600 ml-1" rel="noopener noreferrer"
|
||||
target="_blank">@Company</a>
|
||||
</p>
|
||||
<p class="text-sm text-gray-500 sm:ml-4 sm:pl-4 sm:border-l-2 sm:border-gray-200 sm:py-2 sm:mt-0 mt-4">
|
||||
<a href="/faq" class="text-gray-600 ml-1" rel="noopener noreferrer">FAQ</a>
|
||||
</p>
|
||||
<p class="text-sm text-gray-500 sm:ml-4 sm:pl-4 sm:border-l-2 sm:border-gray-200 sm:py-2 sm:mt-0 mt-4">
|
||||
<a href="/contact-us" class="text-gray-600 ml-1" rel="noopener noreferrer" target="_blank">Contact Us</a>
|
||||
</p>
|
||||
<p class="text-sm text-gray-500 sm:ml-4 sm:pl-4 sm:border-l-2 sm:border-gray-200 sm:py-2 sm:mt-0 mt-4">
|
||||
<a href="/about-us" class="text-gray-600 ml-1" rel="noopener noreferrer" target="_blank">About Us</a>
|
||||
</p>
|
||||
<p class="text-sm text-gray-500 sm:ml-4 sm:pl-4 sm:border-l-2 sm:border-gray-200 sm:py-2 sm:mt-0 mt-4">
|
||||
<a href="/feature-request" class="text-gray-600 ml-1" rel="noopener noreferrer" target="_blank">Feature
|
||||
Request</a>
|
||||
</p>
|
||||
<span class="inline-flex sm:ml-auto sm:mt-0 mt-4 justify-center sm:justify-start">
|
||||
<a class="text-gray-500">
|
||||
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5"
|
||||
viewBox="0 0 24 24">
|
||||
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a class="ml-3 text-gray-500">
|
||||
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5"
|
||||
viewBox="0 0 24 24">
|
||||
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a class="ml-3 text-gray-500">
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
class="w-5 h-5" viewBox="0 0 24 24">
|
||||
<rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
|
||||
<path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a class="ml-3 text-gray-500">
|
||||
<svg fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"
|
||||
class="w-5 h-5" viewBox="0 0 24 24">
|
||||
<path stroke="none"
|
||||
d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"></path>
|
||||
<circle cx="4" cy="4" r="2" stroke="none"></circle>
|
||||
</svg>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</footer>
|
||||
@@ -0,0 +1,58 @@
|
||||
<nav class="p-6 flex justify-between bg-white h-16 border-b-2">
|
||||
<!-- top bar -->
|
||||
|
||||
<ul class="flex items-center lg:hidden">
|
||||
<!-- top bar left -->
|
||||
<li class="h-6 w-6">
|
||||
<img
|
||||
class="h-full w-full mx-auto"
|
||||
src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Svelte_Logo.svg/512px-Svelte_Logo.svg.png"
|
||||
alt="svelte logo"/>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="flex items-center">
|
||||
<!-- top bar center -->
|
||||
<li>
|
||||
<h1 class="pl-10 lg:pl-0 text-gray-700">
|
||||
<a href="/">Boilerplate</a>
|
||||
</h1>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="flex items-center">
|
||||
{{if .auth}}
|
||||
<li class="h-8 w-8 profile-action">
|
||||
<button class="block h-8 w-8 rounded-full overflow-hidden border-1 border-gray-600 focus:outline-none focus:border-white">
|
||||
<img class="h-full w-full object-cover"
|
||||
src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=256&q=80"
|
||||
alt="Your avatar">
|
||||
</button>
|
||||
<!-- dropdown menu -->
|
||||
<div class="profile-action-dropdown absolute bg-gray-100 border border-t-0 shadow-xl text-gray-700 rounded-b-lg w-48 z-10 right-0 mr-6 hidden">
|
||||
<a href="/app/files" class="block px-4 py-2 hover:bg-gray-200">Files</a>
|
||||
<a href="#" class="block px-4 py-2 hover:bg-gray-200">Settings</a>
|
||||
{{if .auth}}
|
||||
<a href="/do/logout" class="block px-4 py-2 hover:bg-gray-200"
|
||||
onclick="event.preventDefault(); document.getElementById('logout-form-profile').submit();">
|
||||
Logout
|
||||
</a>
|
||||
<form id="logout-form-profile" action="/do/logout" method="POST" style="display: none;"></form>
|
||||
{{end}}
|
||||
</div>
|
||||
<!-- dropdown menu end -->
|
||||
</li>
|
||||
{{else}}
|
||||
<li class="mr-2">
|
||||
<a href="/login">Login</a>
|
||||
<!-- dropdown menu end -->
|
||||
</li>
|
||||
<li>
|
||||
<a href="/register">Register</a>
|
||||
<!-- dropdown menu end -->
|
||||
</li>
|
||||
{{end}}
|
||||
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
@@ -0,0 +1,22 @@
|
||||
<!---Global Footer-->
|
||||
<footer class="text-black sm:content-center border-t border-gray-300">
|
||||
<div class="bg-white">
|
||||
<div class="container text-center lg:px-5 lg:py-6 mx-auto flex items-center sm:flex-row flex-col mb-2">
|
||||
<a href="https://verify.rest/login"
|
||||
class="flex title-font font-medium items-center md:justify-start justify-center text-gray-900">
|
||||
<img src="/img/logo.svg" style="height: 40px" alt="">
|
||||
</a>
|
||||
<nav class="md:ml-auto md:mr-auto flex flex-wrap items-center text-base justify-center hidden md:block">
|
||||
<a class="mr-5 hover:text-indigo font-mono" href="/about-us">About Us</a>
|
||||
<a href="/terms" class="mr-5 hover:text-indigo font-mono">Terms</a>
|
||||
<a href="/privacy-policy" class="mr-5 hover:text-indigo font-mono">Privacy Policy</a>
|
||||
<a href="/disclaimer" class="mr-5 hover:text-indigo font-mono">Disclaimer</a>
|
||||
</nav>
|
||||
<span
|
||||
class="text-sm text-gray-600 font-bold inline-flex sm:ml-auto sm:mt-0 mt-4 justify-center sm:justify-start">
|
||||
© Copyright 2020
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!--- End Global Footer-->
|
||||
@@ -0,0 +1,44 @@
|
||||
<!---Global Header-->
|
||||
<header class="text-gray-700 body-font border-b border-gray-300 fixed w-full z-10 bg-white">
|
||||
<div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
|
||||
<a href="/" class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
|
||||
<img src="/img/logo.svg" alt="" style="height:50px;">
|
||||
</a>
|
||||
<nav class="md:ml-auto md:mr-auto flex flex-wrap items-center text-base justify-center hidden md:block">
|
||||
<a class="mr-5 hover:text-indigo-700 font-mono" href="/#validate-block">Validate</a>
|
||||
<a class="mr-5 hover:text-indigo-700 font-mono" href="/#feature-block">Features</a>
|
||||
<a class="mr-5 hover:text-indigo-700 font-mono" href="/#price-block">Price</a>
|
||||
<a class="mr-5 hover:text-indigo-700 font-mono" href="/#contact-block">Contact Us</a>
|
||||
</nav>
|
||||
{{if not .auth}}
|
||||
<a href="/login">
|
||||
<button
|
||||
class="inline-flex hero_button items-center global-header border-0 py-1 px-3 focus:outline-none hover:bg-indigo-700 rounded text-white mt-4 md:mt-0">
|
||||
Login
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
class="w-4 h-4 ml-1" viewBox="0 0 24 24">
|
||||
<path d="M5 12h14M12 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</a>
|
||||
<a href="/register" class="ml-3">
|
||||
<button
|
||||
class="inline-flex hero_button items-center global-header border-0 py-1 px-3 focus:outline-none hover:bg-indigo-700 rounded text-white mt-4 md:mt-0">
|
||||
Register
|
||||
</button>
|
||||
</a>
|
||||
{{else}}
|
||||
<a href="/app" class="ml-3">
|
||||
<button
|
||||
class="inline-flex hero_button items-center global-header border-0 py-1 px-3 focus:outline-none hover:bg-indigo-700 rounded text-white mt-4 md:mt-0">
|
||||
Dashboard
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
class="w-4 h-4 ml-1" viewBox="0 0 24 24">
|
||||
<path d="M5 12h14M12 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</a>
|
||||
{{end}}
|
||||
</div>
|
||||
</header>
|
||||
<!---End Global Header-->
|
||||
@@ -0,0 +1,89 @@
|
||||
<div x-data="{
|
||||
isSidebarOpen: false,
|
||||
}" class="flex min-h-screen">
|
||||
|
||||
<!-- Botón de menú para dispositivos móviles -->
|
||||
<div class="md:hidden fixed top-4 left-4 z-50">
|
||||
<button @click="isSidebarOpen = !isSidebarOpen" class="text-black focus:outline-none">
|
||||
<svg x-show="!isSidebarOpen" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
|
||||
viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
<svg x-show="isSidebarOpen" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
|
||||
viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Overlay para dispositivos móviles -->
|
||||
<div x-show="isSidebarOpen" @click="isSidebarOpen = false"
|
||||
class="fixed inset-0 bg-black bg-opacity-50 z-40 md:hidden"></div>
|
||||
|
||||
<!-- Barra lateral -->
|
||||
<div :class="{'translate-x-0': isSidebarOpen, '-translate-x-full': !isSidebarOpen}"
|
||||
class="fixed z-50 md:relative transform md:translate-x-0 transition-transform duration-300 ease-in-out w-64 md:w-52 drop-shadow-md text-black shadow flex flex-col justify-between bg-white h-screen">
|
||||
|
||||
<!-- Encabezado de la barra lateral -->
|
||||
<div class="flex items-center justify-between h-16 px-10 py-2">
|
||||
<img src="/img/logo.webp" alt="Logo" class="w-36 mt-4 mb-2">
|
||||
<div class="md:hidden">
|
||||
<button @click="isSidebarOpen = false" class="text-black focus:outline-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contenido de la barra lateral -->
|
||||
<div class="overflow-y-auto h-full">
|
||||
<nav class="px-4 py-2">
|
||||
<ul>
|
||||
<!-- Recorrer módulos -->
|
||||
{{range $moduleName, $submodules := .modules}}
|
||||
<li class="my-1 cursor-pointer" x-data="{ showSubMenu: true }">
|
||||
<div class="flex items-center hover:bg-gray-200 px-2 rounded-lg py-2 font-semibold border" @click="showSubMenu = !showSubMenu">
|
||||
<div class="flex-shrink-0">
|
||||
<svg x-show="showSubMenu" xmlns="http://www.w3.org/2000/svg" fill="none"
|
||||
viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
|
||||
</svg>
|
||||
<svg x-show="!showSubMenu" xmlns="http://www.w3.org/2000/svg" fill="none"
|
||||
viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M8.25 4.5l7.5 7.5-7.5 7.5" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="ml-2 text-sm font-medium">
|
||||
{{ $moduleName }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Submenú -->
|
||||
<ul class="pl-6" x-show="showSubMenu" x-transition>
|
||||
{{range $submodule := $submodules}}
|
||||
<li>
|
||||
<a href="{{ $submodule.url }}"
|
||||
class="block hover:bg-gray-200 hover:font-semibold rounded-md px-3 py-2 text-sm text-black">
|
||||
{{ $submodule.title }}
|
||||
</a>
|
||||
</li>
|
||||
{{end}}
|
||||
</ul>
|
||||
</li>
|
||||
{{end}}
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contenido principal -->
|
||||
<div class="flex-1">
|
||||
<!-- Tu contenido principal aquí -->
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,135 @@
|
||||
<aside
|
||||
class="hidden lg:flex flex-col items-center bg-black text-gray-700 shadow
|
||||
h-full">
|
||||
<!-- Side Nav Bar-->
|
||||
|
||||
<div class="h-16 flex items-center w-full hover:bg-white">
|
||||
<!-- Logo Section -->
|
||||
<a class="h-6 w-6 mx-auto" href="/">
|
||||
<img
|
||||
class="h-6 w-6 mx-auto"
|
||||
src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Svelte_Logo.svg/512px-Svelte_Logo.svg.png"
|
||||
alt="svelte logo"/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<ul>
|
||||
<!-- Items Section -->
|
||||
<li class="hover:bg-gray-100">
|
||||
<a
|
||||
href="/account/file-manager"
|
||||
class="h-16 px-6 flex flex justify-center items-center w-full
|
||||
focus:text-orange-500">
|
||||
<svg
|
||||
class="h-5 w-5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<polyline
|
||||
points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline>
|
||||
<path
|
||||
d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0
|
||||
2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0
|
||||
0-1.79 1.11z"></path>
|
||||
</svg>
|
||||
<span class="text-sm capitalize menu-item-text hidden">File Manager</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="hover:bg-gray-100">
|
||||
<a
|
||||
href="."
|
||||
class="h-16 px-6 flex flex justify-center items-center w-full
|
||||
focus:text-orange-500">
|
||||
<svg
|
||||
class="h-5 w-5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<path
|
||||
d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
|
||||
</svg>
|
||||
<span class="text-sm capitalize menu-item-text hidden">Settings</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="hover:bg-gray-100">
|
||||
<a
|
||||
href="."
|
||||
class="h-16 px-6 flex flex justify-center items-center w-full
|
||||
focus:text-orange-500">
|
||||
<svg
|
||||
class="h-5 w-5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="3"></circle>
|
||||
<path
|
||||
d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1
|
||||
0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0
|
||||
0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2
|
||||
2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0
|
||||
0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1
|
||||
0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0
|
||||
0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65
|
||||
0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0
|
||||
1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0
|
||||
1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2
|
||||
0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0
|
||||
1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0
|
||||
2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0
|
||||
0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65
|
||||
1.65 0 0 0-1.51 1z"></path>
|
||||
</svg>
|
||||
<span class="text-sm capitalize menu-item-text hidden">Settings</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<div class="mt-auto h-16 flex items-center w-full">
|
||||
{{if .auth}}
|
||||
<a href="/do/logout"
|
||||
class="logout h-16 w-10 mx-auto flex flex justify-center items-center
|
||||
w-full text-white-500 bg-red-500 focus:outline-none"
|
||||
onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
|
||||
<svg
|
||||
class="h-5 w-5 text-white"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
|
||||
<polyline points="16 17 21 12 16 7"></polyline>
|
||||
<line x1="21" y1="12" x2="9" y2="12"></line>
|
||||
</svg>
|
||||
<span class="text-sm capitalize menu-item-text hidden bg-red-500 text-white">Logout</span>
|
||||
</a>
|
||||
<form id="logout-form" action="/do/logout" method="POST" style="display: none;"></form>
|
||||
{{end}}
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
@@ -0,0 +1,11 @@
|
||||
{{define "PrimaryButton"}}
|
||||
<button type="{{.Type}}" class="primary-button py-2 px-5 bg-[#284c91] text-white font-medium rounded shadow-sm">
|
||||
{{.Label}}
|
||||
</button>
|
||||
{{end}}
|
||||
|
||||
{{define "SecondaryButton"}}
|
||||
<button type="{{.Type}}" class="secondary-button w-full py-2 px-5 bg-[#beda75] text-[#284c91] font-medium rounded shadow-sm hover:bg-[#aecc5b] my-auto">
|
||||
{{.Label}}
|
||||
</button>
|
||||
{{end}}
|
||||
Reference in New Issue
Block a user