Hugging Face's logo

Spaces:
vericudebuget
/
ok4231
Running

App Files Community
vericudebuget commited on
Commit
288fdce
·
verified ·
1 Parent(s): 1425826

Update movie1.html

Browse files
Files changed (1) hide show
  1. movie1.html +51 -23
movie1.html CHANGED
@@ -3,67 +3,96 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Video Streaming Page</title>
7
  <style>
 
8
  body {
9
- font-family: Arial, sans-serif;
10
- background-color: #f0f0f0;
 
11
  margin: 0;
12
- padding: 20px;
13
  display: flex;
14
  justify-content: center;
15
  align-items: center;
16
  min-height: 100vh;
17
  }
 
 
18
  .video-container {
19
- background-color: #ffffff;
20
- border-radius: 10px;
21
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
22
  padding: 20px;
23
- max-width: 800px;
24
  width: 100%;
25
  }
 
 
26
  video {
27
  width: 100%;
28
- border-radius: 5px;
 
29
  }
 
 
30
  h1 {
31
- color: #333;
32
  text-align: center;
 
 
 
33
  }
 
 
34
  .controls {
35
  display: flex;
36
  justify-content: center;
37
- margin-top: 15px;
38
  }
 
39
  button {
40
- background-color: #4CAF50;
41
  border: none;
42
- color: white;
43
- padding: 10px 20px;
44
  text-align: center;
45
- text-decoration: none;
46
- display: inline-block;
47
  font-size: 16px;
48
- margin: 4px 2px;
49
  cursor: pointer;
50
  border-radius: 5px;
 
51
  }
 
52
  button:hover {
53
- background-color: #45a049;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
54
  }
55
  </style>
56
  </head>
57
  <body>
58
  <div class="video-container">
59
- <h1>Watch The Passion of The Christ.</h1>
60
  <video id="videoPlayer" controls>
61
  <source src="The Passion of the Christ [2004].mp4" type="video/mp4">
62
  Your browser does not support the video tag.
63
  </video>
64
  <div class="controls">
65
-
66
- <button onclick="loadProgress()"> Press here to resume to where you left off.</button>
67
  </div>
68
  </div>
69
 
@@ -72,7 +101,6 @@
72
 
73
  function saveProgress() {
74
  localStorage.setItem('videoProgress', video.currentTime);
75
- alert('Progress saved!');
76
  }
77
 
78
  function loadProgress() {
@@ -92,4 +120,4 @@
92
  window.onload = loadProgress;
93
  </script>
94
  </body>
95
- </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Video Streaming Platform</title>
7
  <style>
8
+ /* General Styling */
9
  body {
10
+ font-family: 'Arial', sans-serif;
11
+ background-color: #121212; /* Dark background */
12
+ color: #f0f0f0; /* Light text for contrast */
13
  margin: 0;
14
+ padding: 0;
15
  display: flex;
16
  justify-content: center;
17
  align-items: center;
18
  min-height: 100vh;
19
  }
20
+
21
+ /* Video Container Styling */
22
  .video-container {
23
+ background-color: #1e1e1e; /* Dark card background */
24
+ border-radius: 15px;
25
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6); /* Soft shadow for a modern look */
26
  padding: 20px;
27
+ max-width: 900px;
28
  width: 100%;
29
  }
30
+
31
+ /* Video Element Styling */
32
  video {
33
  width: 100%;
34
+ border-radius: 10px;
35
+ outline: none;
36
  }
37
+
38
+ /* Heading Styling */
39
  h1 {
40
+ color: #ff6e40; /* Accent color for heading */
41
  text-align: center;
42
+ font-weight: 700;
43
+ font-size: 2rem;
44
+ margin-bottom: 15px;
45
  }
46
+
47
+ /* Control Buttons Styling */
48
  .controls {
49
  display: flex;
50
  justify-content: center;
51
+ margin-top: 20px;
52
  }
53
+
54
  button {
55
+ background-color: #ff6e40; /* Button background */
56
  border: none;
57
+ color: #fff;
58
+ padding: 12px 24px;
59
  text-align: center;
 
 
60
  font-size: 16px;
 
61
  cursor: pointer;
62
  border-radius: 5px;
63
+ transition: background-color 0.3s ease;
64
  }
65
+
66
  button:hover {
67
+ background-color: #ff3d00; /* Darker shade on hover */
68
+ }
69
+
70
+ /* Responsive Design */
71
+ @media (max-width: 768px) {
72
+ .video-container {
73
+ padding: 15px;
74
+ }
75
+
76
+ h1 {
77
+ font-size: 1.5rem;
78
+ }
79
+
80
+ button {
81
+ padding: 10px 20px;
82
+ font-size: 14px;
83
+ }
84
  }
85
  </style>
86
  </head>
87
  <body>
88
  <div class="video-container">
89
+ <h1>Watch The Passion of The Christ</h1>
90
  <video id="videoPlayer" controls>
91
  <source src="The Passion of the Christ [2004].mp4" type="video/mp4">
92
  Your browser does not support the video tag.
93
  </video>
94
  <div class="controls">
95
+ <button onclick="loadProgress()">Resume from Last Watch</button>
 
96
  </div>
97
  </div>
98
 
 
101
 
102
  function saveProgress() {
103
  localStorage.setItem('videoProgress', video.currentTime);
 
104
  }
105
 
106
  function loadProgress() {
 
120
  window.onload = loadProgress;
121
  </script>
122
  </body>
123
+ </html>