CloudStorage / templates /movie.html
thejagstudio's picture
Upload 70 files
b7dc0a0 verified
raw
history blame
11.2 kB
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>List</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
.issuu-embed-container {
position: relative;
padding-bottom: 56.25%; /* set the aspect ratio here as (height / width) * 100% */
height: 0;
overflow: hidden;
max-width: 100%;
}
.issuu-embed-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="bg-white relative">
<div id="previewContainer" class="bg-[#313131] origin-center absolute flex flex-col scale-0 top-0 left-0 h-full w-full transition-all duration-500 z-50">
<svg onclick="preview('{{ file.2 }}')" width="32" height="32" class="top-5 right-20 fixed top-0 bg-red-500 p-1 hover:scale-110 transition-all cursor-pointer z-50 rounded-full" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M11.293 3.293a1 1 0 1 1 1.414 1.414L9.414 8l3.293 3.293a1 1 0 0 1-1.414 1.414L8 9.414l-3.293 3.293a1 1 0 0 1-1.414-1.414L6.586 8 3.293 4.707a1 1 0 0 1 1.414-1.414L8 6.586z" />
</svg>
<iframe id="previewIframe" src="" frameborder="0" seamless="" draggable="false" loading="lazy" decoding="async" data-nimg="1" class="fixed top-0 h-[100vh] w-full z-10 rounded-sm object-cover object-center" style="color: transparent"></iframe>
</div>
<header class="h-20 flex m-4 justify-between items-center mb-4">
<!-- logo - start -->
<a href="/" class="my-5 inline-flex items-center text-black-800 text-2xl md:text-3xl font-bold gap-2.5" aria-label="logo">
<svg class="w-[10%] text-indigo-500" id="outputsvg" xmlns="http://www.w3.org/2000/svg" style="transform: none; transform-origin: 50% 50%; cursor: move; transition: none 0s ease 0s" viewBox="0 0 3500 3500">
<g id="l5TLm6F9JGem8YOQ8A41YML" fill="rgb(100,103,241)" style="transform: none">
<g><path id="pulsHdoRs" d="M1455 3470 c-164 -30 -323 -83 -480 -160 -487 -242 -829 -689 -935 -1226 -28 -139 -37 -389 -21 -534 64 -550 390 -1040 879 -1319 170 -98 440 -186 642 -211 203 -24 460 -7 658 45 609 160 1093 651 1246 1263 120 479 34 978 -238 1387 -258 387 -641 646 -1101 745 -149 33 -495 38 -650 10z m488 -574 c37 -7 70 -15 72 -18 3 -3 -39 -24 -92 -48 -214 -94 -369 -196 -520 -343 -336 -327 -433 -761 -242 -1084 19 -31 67 -89 107 -130 40 -40 70 -73 67 -73 -15 0 -143 54 -225 95 -221 111 -505 336 -517 410 -9 55 17 270 43 362 121 418 441 719 869 818 117 28 326 33 438 11z m360 -132 c271 -152 315 -279 149 -436 -70 -67 -94 -78 -165 -78 -46 0 -61 6 -127 51 -90 62 -156 92 -258 121 -65 17 -95 20 -187 15 -153 -7 -269 -48 -381 -133 -27 -21 -44 -31 -38 -23 110 147 205 237 364 343 100 67 296 166 395 199 l70 24 55 -23 c30 -12 85 -39 123 -60z m-1463 -1370 c262 -187 520 -287 807 -314 125 -12 210 -3 313 31 81 26 86 29 188 96 128 86 196 84 296 -8 59 -54 106 -135 106 -183 -1 -41 -30 -104 -66 -139 -47 -47 -187 -136 -271 -172 -299 -129 -612 -133 -916 -10 -250 102 -488 336 -599 590 -42 96 -74 194 -83 254 l-7 44 73 -64 c41 -36 112 -92 159 -125z"></path></g>
</g>
</svg>
Cloud Storage
</a>
<!-- logo - end -->
<!-- nav - start -->
<nav class="hidden lg:flex gap-12">
<a href="/" class="text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Home</a>
<a href="/list" class="text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">List</a>
<a href="/upload" class="text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Upload</a>
<a href="/movie" class="text-indigo-500 text-lg font-semibold">Movie</a>
<a href="/logout" class="text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Logout</a>
</nav>
<!-- nav - end -->
<!-- buttons - start -->
<div id="nav" onmouseout="outB()" onmouseover="inB()" class="overflow-visible z-10 mt-[150px] grid grid-cols-1 grid-rows-5">
<button type="button" class="shadow-xl inline-flex items-center lg:hidden bg-gray-200 hover:bg-gray-300 focus-visible:ring ring-indigo-300 text-gray-500 active:text-gray-700 text-sm md:text-base font-semibold rounded-lg gap-2 px-2.5 py-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
</svg>
Menu
</button>
<a href="../" class="mt-2 hidden bg-white rounded-t-lg px-2 text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Home</a>
<a href="../list" class="shadow-xl hidden bg-white px-2 text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">List</a>
<a href="../upload" class="shadow-xl hidden bg-white px-2 text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Upload</a>
<a href="../movie" class="shadow-xl hidden bg-white px-2 text-indigo-500 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Movie</a>
<a href="../logout" class="shadow-xl hidden bg-white px-2 text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100 rounded-b-lg">Logout</a>
</div>
<!-- buttons - end -->
</header>
<div class="grid-cols-6 grid gap-5 px-20">
{% for movie in movies %}
<a href="{{movie.tmdbId}}" class="h-fit w-full rounded-lg overflow-hidden shadow-xl">
<img class="h-auto w-full object-cover" src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/{{movie.poster}}" />
<p class="px-1 mt-2 font-bold">{{movie.movie}}</p>
<p class="px-1 mb-2 opacity-80">{{movie.Released}}</p>
</a>
{% endfor %}
</div>
<button class="demo-btn">Click Me</button>
</div>
<script>
function inB(event) {
ass = document.getElementById("nav").getElementsByTagName("a");
for (let i = 0; i < ass.length; i++) {
ass[i].classList.remove("hidden");
}
}
function outB(event) {
ass = document.getElementById("nav").getElementsByTagName("a");
for (let i = 0; i < ass.length; i++) {
ass[i].classList.add("hidden");
}
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- <script src="https://getcssscan.com/js/solid.min.js"></script>
<script src="https://getcssscan.com/js/lity.min.js"></script> -->
<!--!-->
<!-- <script src="https://getcssscan.com/js/jquery.countdown.min.js"></script> -->
<script>
const minWidthToRunDemo = 1024;
function canRunDemo() {
return window.innerWidth >= minWidthToRunDemo;
}
function loadDemoScript() {
const demo_script = document.querySelector("#cssscan-demo-script");
const demo_loading_warning = document.querySelector(".loading-demo");
if (!demo_script) {
const script = document.createElement("script");
script.setAttribute("src", "demo-build/main.js");
script.id = "cssscan-demo-script";
document.body.appendChild(script);
script.onload = () => {
script.dataset.loaded = true;
if (demo_loading_warning && demo_loading_warning.style.display !== "") {
window.cssScanReady();
try {
demo_loading_warning.remove();
} catch (e) {}
}
};
}
}
if (canRunDemo()) {
loadDemoScript();
}
window.onresize = function (e) {
const demo_script = document.querySelector("#cssscan-demo-script");
if (canRunDemo() && (!demo_script || (demo_script && !demo_script.dataset.loaded))) {
loadDemoScript();
}
};
const demo_btn = document.getElementsByClassName("demo-btn");
for (var i = 0; i < demo_btn.length; i++) {
demo_btn[i].addEventListener("click", function (e) {
const demo_script = document.querySelector("#cssscan-demo-script");
const demo_loading_warning = document.querySelector(".loading-demo");
if (demo_script && !demo_script.dataset.loaded) {
if (demo_loading_warning && demo_loading_warning.style.display === "") {
demo_loading_warning.style.display = "inline-block";
}
} else if (demo_script && demo_script.dataset.loaded) {
try {
demo_loading_warning.remove();
} catch (e) {}
}
});
}
</script>
<script src="{% static 'demo.js' %}"></script>
<!-- <script src="https://getcssscan.com/demo-build/main.js" id="cssscan-demo-script" data-loaded="true"></script> -->
</body>
</html>