Hugging Face's logo

Spaces:
Unicone-Studio
/
instance1
Paused

App Files Community
ChandimaPrabath commited on
Commit
632ec73
·
1 Parent(s): 5c6ae28

UI fix

Browse files
Files changed (3) hide show
  1. app.py +1 -1
  2. templates/films.html +58 -16
  3. templates/tvshows.html +57 -15
app.py CHANGED
@@ -19,7 +19,7 @@ CACHE_DIR = os.getenv("CACHE_DIR")
19
  if not os.path.exists(CACHE_DIR):
20
  os.makedirs(CACHE_DIR)
21
 
22
- #indexer()
23
 
24
  if not os.path.exists(INDEX_FILE):
25
  raise FileNotFoundError(f"{INDEX_FILE} not found. Please make sure the file exists.")
 
19
  if not os.path.exists(CACHE_DIR):
20
  os.makedirs(CACHE_DIR)
21
 
22
+ indexer()
23
 
24
  if not os.path.exists(INDEX_FILE):
25
  raise FileNotFoundError(f"{INDEX_FILE} not found. Please make sure the file exists.")
templates/films.html CHANGED
@@ -1,62 +1,104 @@
1
  <!DOCTYPE html>
2
- <html>
3
  <head>
4
- <title>All Films</title>
 
 
5
  <style>
6
  body {
7
- font-family: Arial, sans-serif;
8
- background-color: #141414;
9
- color: #fff;
10
  margin: 0;
11
  padding: 0;
 
12
  }
13
  .header {
14
- background-color: #000;
15
- padding: 20px;
 
16
  text-align: center;
 
 
 
17
  }
18
  .header h1 {
19
  margin: 0;
20
- font-size: 24px;
 
 
21
  }
22
  .content {
23
  padding: 20px;
 
 
24
  }
25
  .section {
26
- margin-bottom: 40px;
27
  }
28
  .section h2 {
29
  margin-bottom: 20px;
 
 
 
 
 
30
  }
31
  .grid {
32
  display: grid;
33
- grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
34
  gap: 20px;
 
35
  }
36
  .card {
37
- background-color: #333;
38
- border-radius: 10px;
 
39
  overflow: hidden;
40
  text-align: center;
41
- transition: transform 0.2s;
42
  cursor: pointer;
 
43
  }
44
  .card:hover {
45
  transform: scale(1.05);
 
46
  }
47
  .card img {
48
  width: 100%;
49
- height: 300px;
50
  object-fit: cover;
 
51
  }
52
  .card h3 {
53
  margin: 0;
54
  padding: 10px;
55
- font-size: 18px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
56
  }
57
  .card p {
58
  margin: 0;
59
  padding: 10px;
 
 
60
  }
61
  </style>
62
  </head>
@@ -103,7 +145,7 @@
103
  card.className = 'card';
104
  const title = item.path.split('/').pop();
105
  card.innerHTML = `
106
- <img src="https://via.placeholder.com/340x500.png" alt="${title}">
107
  <h3>${title}</h3>
108
  `;
109
  // Redirect to the appropriate page on card click
 
1
  <!DOCTYPE html>
2
+ <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Films</title>
7
  <style>
8
  body {
9
+ font-family: 'Roboto', sans-serif;
10
+ background: #0f0f0f;
11
+ color: #e0e0e0;
12
  margin: 0;
13
  padding: 0;
14
+ overflow-x: hidden;
15
  }
16
  .header {
17
+ background: linear-gradient(to right, #ff2c20, #ef8b81);
18
+ color: #fff;
19
+ padding: 40px 20px;
20
  text-align: center;
21
+ border-bottom: 2px solid rgba(255, 255, 255, 0.2);
22
+ position: relative;
23
+ z-index: 1;
24
  }
25
  .header h1 {
26
  margin: 0;
27
+ font-size: 48px;
28
+ font-weight: bold;
29
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
30
  }
31
  .content {
32
  padding: 20px;
33
+ position: relative;
34
+ z-index: 1;
35
  }
36
  .section {
37
+ margin-bottom: 60px;
38
  }
39
  .section h2 {
40
  margin-bottom: 20px;
41
+ font-size: 36px;
42
+ font-weight: bold;
43
+ color: #fff;
44
+ border-bottom: 2px solid #ff1e1e;
45
+ padding-bottom: 10px;
46
  }
47
  .grid {
48
  display: grid;
49
+ grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
50
  gap: 20px;
51
+ margin-top: 20px;
52
  }
53
  .card {
54
+ position: relative;
55
+ background: #222;
56
+ border-radius: 15px;
57
  overflow: hidden;
58
  text-align: center;
59
+ transition: transform 0.3s, box-shadow 0.3s;
60
  cursor: pointer;
61
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.8);
62
  }
63
  .card:hover {
64
  transform: scale(1.05);
65
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.9);
66
  }
67
  .card img {
68
  width: 100%;
69
+ height: 330px;
70
  object-fit: cover;
71
+ transition: opacity 0.3s;
72
  }
73
  .card h3 {
74
  margin: 0;
75
  padding: 10px;
76
+ font-size: 22px;
77
+ font-weight: bold;
78
+ background: rgba(0, 0, 0, 0.6);
79
+ height: 100%;
80
+ }
81
+ .card::after {
82
+ content: '';
83
+ display: block;
84
+ position: absolute;
85
+ top: 0;
86
+ left: 0;
87
+ width: 100%;
88
+ height: 100%;
89
+ background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.7) 100%);
90
+ opacity: 0;
91
+ transition: opacity 0.3s;
92
+ z-index: 1;
93
+ }
94
+ .card:hover::after {
95
+ opacity: 1;
96
  }
97
  .card p {
98
  margin: 0;
99
  padding: 10px;
100
+ font-size: 16px;
101
+ color: #ccc;
102
  }
103
  </style>
104
  </head>
 
145
  card.className = 'card';
146
  const title = item.path.split('/').pop();
147
  card.innerHTML = `
148
+ <img src="https://via.placeholder.com/220x330.png" alt="${title}">
149
  <h3>${title}</h3>
150
  `;
151
  // Redirect to the appropriate page on card click
templates/tvshows.html CHANGED
@@ -1,62 +1,104 @@
1
  <!DOCTYPE html>
2
- <html>
3
  <head>
 
 
4
  <title>All TV Shows</title>
5
  <style>
6
  body {
7
- font-family: Arial, sans-serif;
8
- background-color: #141414;
9
- color: #fff;
10
  margin: 0;
11
  padding: 0;
 
12
  }
13
  .header {
14
- background-color: #000;
15
- padding: 20px;
 
16
  text-align: center;
 
 
 
17
  }
18
  .header h1 {
19
  margin: 0;
20
- font-size: 24px;
 
 
21
  }
22
  .content {
23
  padding: 20px;
 
 
24
  }
25
  .section {
26
- margin-bottom: 40px;
27
  }
28
  .section h2 {
29
  margin-bottom: 20px;
 
 
 
 
 
30
  }
31
  .grid {
32
  display: grid;
33
- grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
34
  gap: 20px;
 
35
  }
36
  .card {
37
- background-color: #333;
38
- border-radius: 10px;
 
39
  overflow: hidden;
40
  text-align: center;
41
- transition: transform 0.2s;
42
  cursor: pointer;
 
43
  }
44
  .card:hover {
45
  transform: scale(1.05);
 
46
  }
47
  .card img {
48
  width: 100%;
49
- height: 300px;
50
  object-fit: cover;
 
51
  }
52
  .card h3 {
53
  margin: 0;
54
  padding: 10px;
55
- font-size: 18px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
56
  }
57
  .card p {
58
  margin: 0;
59
  padding: 10px;
 
 
60
  }
61
  </style>
62
  </head>
@@ -103,7 +145,7 @@
103
  card.className = 'card';
104
  const title = item.path.split('/').pop();
105
  card.innerHTML = `
106
- <img src="https://via.placeholder.com/340x500.png" alt="${title}">
107
  <h3>${title}</h3>
108
  `;
109
  // Redirect to the appropriate page on card click
 
1
  <!DOCTYPE html>
2
+ <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>All TV Shows</title>
7
  <style>
8
  body {
9
+ font-family: 'Roboto', sans-serif;
10
+ background: #0f0f0f;
11
+ color: #e0e0e0;
12
  margin: 0;
13
  padding: 0;
14
+ overflow-x: hidden;
15
  }
16
  .header {
17
+ background: linear-gradient(to right, #ff2c20, #ef8b81);
18
+ color: #fff;
19
+ padding: 40px 20px;
20
  text-align: center;
21
+ border-bottom: 2px solid rgba(255, 255, 255, 0.2);
22
+ position: relative;
23
+ z-index: 1;
24
  }
25
  .header h1 {
26
  margin: 0;
27
+ font-size: 48px;
28
+ font-weight: bold;
29
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
30
  }
31
  .content {
32
  padding: 20px;
33
+ position: relative;
34
+ z-index: 1;
35
  }
36
  .section {
37
+ margin-bottom: 60px;
38
  }
39
  .section h2 {
40
  margin-bottom: 20px;
41
+ font-size: 36px;
42
+ font-weight: bold;
43
+ color: #fff;
44
+ border-bottom: 2px solid #ff1e1e;
45
+ padding-bottom: 10px;
46
  }
47
  .grid {
48
  display: grid;
49
+ grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
50
  gap: 20px;
51
+ margin-top: 20px;
52
  }
53
  .card {
54
+ position: relative;
55
+ background: #222;
56
+ border-radius: 15px;
57
  overflow: hidden;
58
  text-align: center;
59
+ transition: transform 0.3s, box-shadow 0.3s;
60
  cursor: pointer;
61
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.8);
62
  }
63
  .card:hover {
64
  transform: scale(1.05);
65
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.9);
66
  }
67
  .card img {
68
  width: 100%;
69
+ height: 330px;
70
  object-fit: cover;
71
+ transition: opacity 0.3s;
72
  }
73
  .card h3 {
74
  margin: 0;
75
  padding: 10px;
76
+ font-size: 22px;
77
+ font-weight: bold;
78
+ background: rgba(0, 0, 0, 0.6);
79
+ height: 100%;
80
+ }
81
+ .card::after {
82
+ content: '';
83
+ display: block;
84
+ position: absolute;
85
+ top: 0;
86
+ left: 0;
87
+ width: 100%;
88
+ height: 100%;
89
+ background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.7) 100%);
90
+ opacity: 0;
91
+ transition: opacity 0.3s;
92
+ z-index: 1;
93
+ }
94
+ .card:hover::after {
95
+ opacity: 1;
96
  }
97
  .card p {
98
  margin: 0;
99
  padding: 10px;
100
+ font-size: 16px;
101
+ color: #ccc;
102
  }
103
  </style>
104
  </head>
 
145
  card.className = 'card';
146
  const title = item.path.split('/').pop();
147
  card.innerHTML = `
148
+ <img src="https://via.placeholder.com/220x330.png" alt="${title}">
149
  <h3>${title}</h3>
150
  `;
151
  // Redirect to the appropriate page on card click