Hugging Face's logo

Spaces:
awacke1
/
WebCopyYoutube
Running

App Files Community
WebCopyYoutube
File size: 2,931 Bytes 
1bd85ef
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
a01a642
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Aaron Wacker's Channel</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  <style>
    body {
      font-family: 'Roboto', sans-serif;
    }
  </style>
</head>
<body class="bg-gray-900 text-white">

  <!-- Channel Header -->
  <header class="bg-red-600">
    <div class="max-w-6xl mx-auto px-4 py-5">
      <div class="flex justify-between items-center">
        <div class="flex space-x-4 items-center">
          <img src="https://placehold.co/80x80" alt="Channel logo" class="rounded-full">
          <div>
            <h1 class="text-4xl font-bold">Aaron Wacker</h1>
            <p class="text-sm">@AaronWacker - 141 subscribers - 176 videos</p>
            <p class="text-sm mt-1">Artificial Intelligence and Machine Learning</p>
            <a href="#" class="text-sm text-blue-300">soundcloud.com/aaron-wacker-941812969</a>
          </div>
        </div>
        <div>
          <button class="bg-gray-800 text-white px-4 py-2 rounded hover:bg-gray-700">Customize channel</button>
          <button class="bg-gray-800 text-white px-4 py-2 rounded hover:bg-gray-700 ml-2">Manage videos</button>
        </div>
      </div>
      <!-- Navigation -->
      <nav class="flex space-x-4 mt-4 border-b border-gray-700">
        <a href="#" class="text-white py-2 border-b-4 border-red-500">Home</a>
        <a href="#" class="text-gray-300 py-2 hover:text-white">Videos</a>
        <a href="#" class="text-gray-300 py-2 hover:text-white">Shorts</a>
        <a href="#" class="text-gray-300 py-2 hover:text-white">Live</a>
        <a href="#" class="text-gray-300 py-2 hover:text-white">Releases</a>
        <a href="#" class="text-gray-300 py-2 hover:text-white">Playlists</a>
        <a href="#" class="text-gray-300 py-2 hover:text-white">Community</a>
      </nav>
    </div>
  </header>

  <!-- Main Content -->
  <main class="max-w-6xl mx-auto px-4 py-5">
    <!-- Playlist Section -->
    <section>
      <h2 class="text-2xl font-bold mb-4">Created playlists</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <!-- Playlist Item -->
        <div class="bg-gray-800 rounded-lg p-4">
          <img src="https://placehold.co/300x200" alt="Playlist thumbnail image" class="rounded mb-2">
          <h3 class="text-lg font-semibold">Music in You</h3>
          <p class="text-sm text-gray-400">17 views • 1 month ago</p>
          <p class="text-sm text-gray-400">Art Video by Aaron Wacker</p>
        </div>
        <!-- Repeat for other playlist items -->
      </div>
    </section>
  </main>

</body>
</html>