Hugging Face's logo

Spaces:
thejagstudio
/
CloudStorage
Runtime error

App Files Community
thejagstudio commited on
Commit
a8df994
•
1 Parent(s): bc76f09

Update templates/movieDetail.html

Browse files
Files changed (1) hide show
  1. templates/movieDetail.html +156 -101
templates/movieDetail.html CHANGED
@@ -1,101 +1,156 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8" />
5
- <title>List</title>
6
- <script src="https://cdn.tailwindcss.com"></script>
7
- <style>
8
- .issuu-embed-container {
9
- position: relative;
10
- padding-bottom: 56.25%; /* set the aspect ratio here as (height / width) * 100% */
11
- height: 0;
12
- overflow: hidden;
13
- max-width: 100%;
14
- }
15
- .issuu-embed-container iframe {
16
- position: absolute;
17
- top: 0;
18
- left: 0;
19
- width: 100%;
20
- height: 100%;
21
- }
22
- </style>
23
- </head>
24
- <body>
25
- <div class="bg-white relative">
26
- <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">
27
- <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">
28
- <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" />
29
- </svg>
30
-
31
- <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>
32
- </div>
33
- <header class="h-20 flex m-4 justify-between items-center mb-4">
34
- <!-- logo - start -->
35
- <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">
36
- <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">
37
- <g id="l5TLm6F9JGem8YOQ8A41YML" fill="rgb(100,103,241)" style="transform: none">
38
- <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>
39
- </g>
40
- </svg>
41
- Cloud Storage
42
- </a>
43
- <!-- logo - end -->
44
-
45
- <!-- nav - start -->
46
- <nav class="hidden lg:flex gap-12">
47
- <a href="/" class="text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Home</a>
48
- <a href="/list" class="text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">List</a>
49
- <a href="/upload" class="text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Upload</a>
50
- <a href="/movie" class="text-indigo-500 text-lg font-semibold">Movie</a>
51
- <a href="/logout" class="text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Logout</a>
52
- </nav>
53
- <!-- nav - end -->
54
-
55
- <!-- buttons - start -->
56
- <div id="nav" onmouseout="outB()" onmouseover="inB()" class="overflow-visible z-10 mt-[150px] grid grid-cols-1 grid-rows-5">
57
- <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">
58
- <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
59
- <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" />
60
- </svg>
61
- Menu
62
- </button>
63
- <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>
64
- <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>
65
- <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>
66
- <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>
67
- <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>
68
- </div>
69
- <!-- buttons - end -->
70
- </header>
71
- <div class="grid-cols-6 grid gap-5 px-20">
72
- {% for movie in movies %}
73
- <div onclick="openMovie('{{movie.driveLink}}')" class="h-fit w-full rounded-lg overflow-hidden shadow-xl">
74
- <img class="h-auto w-full object-cover" src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/{{movie.poster}}" />
75
- <p class="px-1 mt-2 font-bold">{{movie.movie}}</p>
76
- <p class="px-1 mb-2 opacity-80">{{movie.Released}}</p>
77
- </div>
78
- {% endfor %}
79
- </div>
80
- <video id="moviePlayer" controls></video>
81
- </div>
82
- <script>
83
- function inB(event) {
84
- ass = document.getElementById("nav").getElementsByTagName("a");
85
- for (let i = 0; i < ass.length; i++) {
86
- ass[i].classList.remove("hidden");
87
- }
88
- }
89
- function outB(event) {
90
- ass = document.getElementById("nav").getElementsByTagName("a");
91
- for (let i = 0; i < ass.length; i++) {
92
- ass[i].classList.add("hidden");
93
- }
94
- }
95
- function openMovie(id) {
96
- let videoLink = "https://drive.google.com/uc?export=download&id=" + id;
97
- document.getElementById("moviePlayer").src = videoLink;
98
- }
99
- </script>
100
- </body>
101
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <title>{{data.title}}</title>
6
+ <script src="https://cdn.tailwindcss.com"></script>
7
+ </head>
8
+ <body>
9
+ <div class="bg-white relative overflow-x-hidden h-full min-h-screen">
10
+ <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">
11
+ <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">
12
+ <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" />
13
+ </svg>
14
+
15
+ <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>
16
+ </div>
17
+ <header class="h-20 flex m-4 justify-between items-center mb-4">
18
+ <!-- logo - start -->
19
+ <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">
20
+ <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">
21
+ <g id="l5TLm6F9JGem8YOQ8A41YML" fill="rgb(100,103,241)" style="transform: none">
22
+ <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>
23
+ </g>
24
+ </svg>
25
+ Cloud Storage
26
+ </a>
27
+ <!-- logo - end -->
28
+
29
+ <!-- nav - start -->
30
+ <nav class="hidden lg:flex gap-12">
31
+ <a href="/" class="text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Home</a>
32
+ <a href="/list" class="text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">List</a>
33
+ <a href="/upload" class="text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Upload</a>
34
+ <a href="/movie" class="text-indigo-500 text-lg font-semibold">Movie</a>
35
+ <a href="/logout" class="text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Logout</a>
36
+ </nav>
37
+ <!-- nav - end -->
38
+
39
+ <!-- buttons - start -->
40
+ <div id="nav" onmouseout="outB()" onmouseover="inB()" class="overflow-visible z-10 mt-[150px] grid grid-cols-1 grid-rows-5">
41
+ <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">
42
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
43
+ <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" />
44
+ </svg>
45
+ Menu
46
+ </button>
47
+ <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>
48
+ <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>
49
+ <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>
50
+ <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>
51
+ <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>
52
+ </div>
53
+ <!-- buttons - end -->
54
+ </header>
55
+ <section class="relative">
56
+ <div class="absolute h-full w-full bg-cover bg-[top_center] bg-no-repeat">
57
+ <img src="https://image.tmdb.org/t/p/w1280{{data.backdrop_path}}" class="w-full opacity-50 object-cover h-full blur-2xl scale-110 translate-y-16" />
58
+ </div>
59
+
60
+ <div class="mx-auto w-[80%] h-full py-10">
61
+ <div class="flex flex-col gap-10">
62
+ <div class="z-[2] flex flex-col items-start gap-10 lg:flex-row">
63
+ <div class="flex w-full flex-col items-center justify-center rounded-xl lg:block lg:w-auto">
64
+ <div class="group relative flex w-full items-center justify-center hover:cursor-pointer">
65
+ <a target="_blank" class="absolute inset-x-0 mx-auto flex h-full w-full items-center justify-center opacity-0 transition-opacity group-hover:opacity-100 md:hidden" href="https://youtube.com/watch?v=Y0ZsLudtfjI">
66
+ <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="lucide lucide-circle-play h-20 w-20 text-white">
67
+ <circle cx="12" cy="12" r="10"></circle>
68
+ <polygon points="10 8 16 12 10 16 10 8"></polygon>
69
+ </svg>
70
+ </a>
71
+ <button type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="radix-:Rid7rrqja:" data-state="closed" class="absolute inset-x-0 mx-auto hidden h-full w-full items-center justify-center opacity-0 transition-opacity group-hover:opacity-100 md:flex">
72
+ <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="lucide lucide-circle-play h-20 w-20 text-white">
73
+ <circle cx="12" cy="12" r="10"></circle>
74
+ <polygon points="10 8 16 12 10 16 10 8"></polygon>
75
+ </svg>
76
+ </button>
77
+ <img loading="lazy" width="300" height="400" decoding="async" data-nimg="1" class="rounded-xl border-[3px] border-white" style="color: transparent" src="https://image.tmdb.org/t/p/w1280{{data.poster_path}}" />
78
+ </div>
79
+ </div>
80
+ <div class="flex-1 space-y-5">
81
+ <div class="space-y-3">
82
+ <h1 class="text-3xl font-bold tracking-wide">{{data.title}}</h1>
83
+ <div class="flex flex-col items-start gap-2 md:flex-row md:items-center">
84
+ <p>{{data.release_date }}</p>
85
+ <span class="hidden md:inline-block">•</span>
86
+ <div class="space-x-2">
87
+ {% for genre in data.genres %}
88
+ <span class="underline underline-offset-4">{{genre.name}}</span>
89
+ {% endfor %}
90
+ </div>
91
+ <span class="hidden md:inline-block">•</span>
92
+ <p>{{data.runtime}}<!-- -->min</p>
93
+ </div>
94
+ </div>
95
+ <div class="flex flex-col gap-2">
96
+ <div class="flex items-center gap-2">
97
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#FF9900" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star text-[#FF9900]"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
98
+ <p class="text-lg capitalize">{{data.vote_average}} / 10</p>
99
+ </div>
100
+ <div class="flex items-center gap-2">
101
+ <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="lucide lucide-thumbs-up">
102
+ <path d="M7 10v12"></path>
103
+ <path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z"></path>
104
+ </svg>
105
+ <p class="text-lg capitalize">{{data.vote_count}}</p>
106
+ </div>
107
+ </div>
108
+ <div class="flex w-full flex-col gap-3">
109
+ <h1 class="text-xl font-semibold">Plot Summary</h1>
110
+ <p class="line-clamp-4">{{data.overview}}</p>
111
+ </div>
112
+ <div class="space-y-5">
113
+ <h1 class="text-xl font-semibold">Top Casts</h1>
114
+ <div class="flex overflow-x-scroll w-[50rem] flex-row items-center gap-10">
115
+ {% for cast in data.credits.cast %}
116
+ <div class="flex items-center gap-2 w-fit mr-5">
117
+ <img alt="{{cast.name}}" loading="lazy" width="50" height="50" decoding="async" data-nimg="1" class="rounded-full border-2 border-white aspect-square object-cover" src="https://media.themoviedb.org/t/p/w138_and_h175_face/{{cast.profile_path}}" />
118
+ <div class="flex flex-col w-full">
119
+ <p class="font-semibold whitespace-nowrap">{{cast.name}}</p>
120
+ <p class="text-sm text-foreground/50 whitespace-nowrap">{{cast.character}}</p>
121
+ </div>
122
+ </div>
123
+ {% endfor %}
124
+ </div>
125
+ </div>
126
+ </div>
127
+ </div>
128
+ </div>
129
+ </div>
130
+ <video controls="controls" id="moviePlayer" class="absolute inset-0 z-50 w-full h-full object-cover">
131
+ {% for link in data.watchLink.streamingData.adaptiveFormats %}
132
+ <source src="{{link.url}}" type="video/mp4" />
133
+ {% endfor %}
134
+ </video>
135
+ </section>
136
+ </div>
137
+ <script>
138
+ function inB(event) {
139
+ ass = document.getElementById("nav").getElementsByTagName("a");
140
+ for (let i = 0; i < ass.length; i++) {
141
+ ass[i].classList.remove("hidden");
142
+ }
143
+ }
144
+ function outB(event) {
145
+ ass = document.getElementById("nav").getElementsByTagName("a");
146
+ for (let i = 0; i < ass.length; i++) {
147
+ ass[i].classList.add("hidden");
148
+ }
149
+ }
150
+ function openMovie(id) {
151
+ let videoLink = "https://drive.google.com/uc?export=download&id=" + id;
152
+ document.getElementById("moviePlayer").src = videoLink;
153
+ }
154
+ </script>
155
+ </body>
156
+ </html>