Hugging Face's logo

Spaces:
jordonpeter01
/
sf-b5c
Running

App Files Community
jordonpeter01 commited on
Commit
5a34775
·
verified ·
1 Parent(s): 6d1c3c8

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +140 -55
index.html CHANGED
@@ -1,64 +1,149 @@
1
  <!DOCTYPE html>
2
- <html lang="en">
3
-
4
  <head>
5
- <meta charset="UTF-8">
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>TikTok Inspired App</title>
8
- <!-- Bootstrap CSS -->
9
- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
10
  </head>
11
-
12
  <body>
13
- <header class="bg-light p-4 text-center">
14
- <h1 class="h2">TikTok Inspired App</h1>
15
- </header>
16
-
17
- <main class="container mt-4">
18
- <div class="row">
19
- <div class="col-md-6">
20
- <video controls id="current-video" class="w-100">
21
- <source src="video1.mp4" type="video/mp4">
22
- </video>
23
- </div>
24
-
25
- <div class="col-md-6">
26
- <ul class="list-group" id="upcoming-videos">
27
- <li class="list-group-item" data-video-url="video2.mp4">Video 2</li>
28
- <li class="list-group-item" data-video-url="video3.mp4">Video 3</li>
29
- </ul>
30
- </div>
31
- </div>
32
- </main>
33
-
34
- <footer class="bg-light p-4 text-center">
35
- <!-- Footer content goes here -->
36
- </footer>
37
-
38
- <!-- Bootstrap JS and dependencies -->
39
- <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
40
- <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
41
- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
42
-
43
  <script>
44
- document.addEventListener('DOMContentLoaded', function () {
45
- const currentVideo = document.getElementById('current-video');
46
- const upcomingVideos = document.getElementById('upcoming-videos');
47
-
48
- upcomingVideos.addEventListener('click', function (event) {
49
- if (event.target.tagName === 'LI') {
50
- const videoUrl = event.target.getAttribute('data-video-url');
51
- switchVideo(videoUrl);
52
- }
53
- });
54
-
55
- function switchVideo(videoUrl) {
56
- currentVideo.src = videoUrl;
57
- currentVideo.load();
58
- currentVideo.play();
 
59
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
60
  });
61
  </script>
62
  </body>
63
-
64
- </html>
 
1
  <!DOCTYPE html>
2
+ <html>
 
3
  <head>
4
+ <title>TikTok-style App</title>
5
+ <style>
6
+ /* CSS code for styling the app */
7
+ body {
8
+ font-family: Arial, sans-serif;
9
+ }
10
+
11
+ .video-container {
12
+ display: flex;
13
+ flex-wrap: wrap;
14
+ justify-content: center;
15
+ }
16
+
17
+ .video {
18
+ width: 300px;
19
+ height: 300px;
20
+ margin: 10px;
21
+ background-color: #f0f0f0;
22
+ border-radius: 10px;
23
+ display: flex;
24
+ align-items: center;
25
+ justify-content: center;
26
+ font-size: 24px;
27
+ color: #333;
28
+ }
29
+
30
+ .video:hover {
31
+ background-color: #ccc;
32
+ }
33
+
34
+ .video .username {
35
+ font-size: 18px;
36
+ font-weight: bold;
37
+ margin-bottom: 10px;
38
+ }
39
+
40
+ .video .likes {
41
+ font-size: 14px;
42
+ color: #888;
43
+ }
44
+
45
+ .video .description {
46
+ font-size: 14px;
47
+ margin-top: 10px;
48
+ }
49
+
50
+ .video .actions {
51
+ display: flex;
52
+ justify-content: space-between;
53
+ margin-top: 10px;
54
+ }
55
+
56
+ .video .actions .like-button {
57
+ background-color: #f0f0f0;
58
+ border: none;
59
+ padding: 5px 10px;
60
+ border-radius: 5px;
61
+ cursor: pointer;
62
+ }
63
+
64
+ .video .actions .like-button:hover {
65
+ background-color: #ccc;
66
+ }
67
+
68
+ .video .actions .share-button {
69
+ background-color: #f0f0f0;
70
+ border: none;
71
+ padding: 5px 10px;
72
+ border-radius: 5px;
73
+ cursor: pointer;
74
+ }
75
+
76
+ .video .actions .share-button:hover {
77
+ background-color: #ccc;
78
+ }
79
+ </style>
80
  </head>
 
81
  <body>
82
+ <h1>TikTok-style App</h1>
83
+
84
+ <div class="video-container">
85
+ <!-- JavaScript code will dynamically generate video elements here -->
86
+ </div>
87
+
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
88
  <script>
89
+ // JavaScript code for generating video elements dynamically
90
+ const videos = [
91
+ {
92
+ username: "user1",
93
+ likes: 100,
94
+ description: "Video 1 description"
95
+ },
96
+ {
97
+ username: "user2",
98
+ likes: 200,
99
+ description: "Video 2 description"
100
+ },
101
+ {
102
+ username: "user3",
103
+ likes: 300,
104
+ description: "Video 3 description"
105
  }
106
+ ];
107
+
108
+ const videoContainer = document.querySelector(".video-container");
109
+
110
+ videos.forEach(video => {
111
+ const videoElement = document.createElement("div");
112
+ videoElement.classList.add("video");
113
+
114
+ const usernameElement = document.createElement("div");
115
+ usernameElement.classList.add("username");
116
+ usernameElement.textContent = video.username;
117
+
118
+ const likesElement = document.createElement("div");
119
+ likesElement.classList.add("likes");
120
+ likesElement.textContent = `Likes: ${video.likes}`;
121
+
122
+ const descriptionElement = document.createElement("div");
123
+ descriptionElement.classList.add("description");
124
+ descriptionElement.textContent = video.description;
125
+
126
+ const actionsElement = document.createElement("div");
127
+ actionsElement.classList.add("actions");
128
+
129
+ const likeButton = document.createElement("button");
130
+ likeButton.classList.add("like-button");
131
+ likeButton.textContent = "Like";
132
+
133
+ const shareButton = document.createElement("button");
134
+ shareButton.classList.add("share-button");
135
+ shareButton.textContent = "Share";
136
+
137
+ actionsElement.appendChild(likeButton);
138
+ actionsElement.appendChild(shareButton);
139
+
140
+ videoElement.appendChild(usernameElement);
141
+ videoElement.appendChild(likesElement);
142
+ videoElement.appendChild(descriptionElement);
143
+ videoElement.appendChild(actionsElement);
144
+
145
+ videoContainer.appendChild(videoElement);
146
  });
147
  </script>
148
  </body>
149
+ </html>