|
@@ -52,7 +52,61 @@
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
|
|
|
|
+ <div class="row row-cols-1 row-cols-md-4 g-4 text-dark d-flex justify-content-center">
|
|
|
|
+ <div class="col">
|
|
|
|
+ <div class="card">
|
|
|
|
+ <a style="background: linear-gradient(-45deg, #ae6ba3, #ab7b91, #bc8a9a, #d69aa1); background-size: 400% 400%; animation: gradient 7s ease infinite;" href="#" class="list-group-item list-group-item-action" aria-current="true">
|
|
|
|
+ <div class="card-body">
|
|
|
|
+ <div class="d-flex justify-content-center h1">
|
|
|
|
+ <i class="fas fa-map-pin"></i>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="d-flex justify-content-center h1">
|
|
|
|
+ YOUR
|
|
|
|
+ </div>
|
|
|
|
+ <div class="d-flex justify-content-center h1">
|
|
|
|
+ PINS
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </a>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="col">
|
|
|
|
+ <div class="card">
|
|
|
|
+ <a style="background: linear-gradient(-45deg, #0645a4, #2480cd, #84bcf3, #b7d6f7); background-size: 400% 400%; animation: gradient 7s ease infinite;" href="#" class="list-group-item list-group-item-action" aria-current="true">
|
|
|
|
+ <div class="card-body">
|
|
|
|
+ <div class="d-flex justify-content-center h1">
|
|
|
|
+ <i class="fas fa-thumbs-up"></i>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="d-flex justify-content-center h1">
|
|
|
|
+ LIKED
|
|
|
|
+ </div>
|
|
|
|
+ <div class="d-flex justify-content-center h1">
|
|
|
|
+ VIDEOS
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </a>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="col">
|
|
|
|
+ <div class="card">
|
|
|
|
+ <a style="background: linear-gradient(-45deg, #e2b968, #68af5b, #8a97bc, #d69ab2); background-size: 400% 400%; animation: gradient 7s ease infinite;" href="#" class="list-group-item list-group-item-action" aria-current="true">
|
|
|
|
+ <div class="card-body">
|
|
|
|
+ <div class="d-flex justify-content-center h1">
|
|
|
|
+ <i class="fas fa-history"></i>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="d-flex justify-content-center h1">
|
|
|
|
+ YOUR
|
|
|
|
+ </div>
|
|
|
|
+ <div class="d-flex justify-content-center h1">
|
|
|
|
+ ACTIVITY
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </a>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
|
|
|
|
+ </div>
|
|
|
|
+ <br>
|
|
|
|
|
|
{% if watching %}
|
|
{% if watching %}
|
|
<div class="border border-5 rounded-3 border-primary p-3">
|
|
<div class="border border-5 rounded-3 border-primary p-3">
|
|
@@ -107,127 +161,158 @@
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<br>
|
|
- {% endif %}
|
|
|
|
|
|
+ {% endif %}
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
|
|
- <h3><span style="border-bottom: 3px #ffffff dashed;">Most viewed playlists</span> <a href="{% url 'all_playlists' 'all' %}" class="pt-1"><i class="fas fa-binoculars"></i> </a></h3>
|
|
|
|
- {% if user_playlists %}
|
|
|
|
- <div class="row row-cols-1 row-cols-md-3 g-4 text-dark mt-0">
|
|
|
|
- {% for playlist in user_playlists|slice:"0:3" %}
|
|
|
|
|
|
+
|
|
|
|
+ <div class="row text-dark mt-0 d-flex justify-content-evenly">
|
|
<div class="col">
|
|
<div class="col">
|
|
- <div class="card">
|
|
|
|
- <a style="background-color: #35795b;" href="{% url 'playlist' playlist.playlist_id %}" class="list-group-item list-group-item-action" aria-current="true">
|
|
|
|
- <div class="card-body">
|
|
|
|
- <h5 class="card-title">
|
|
|
|
- #{{ forloop.counter }} <br><br>{{ playlist.name }}
|
|
|
|
- {% if playlist.is_private_on_yt %}<small><span class="badge bg-light text-dark">Private</span></small> {% endif %}
|
|
|
|
- {% if playlist.is_from_yt %}<small><span class="badge bg-danger text-dark">YT</span></small> {% endif %}
|
|
|
|
- </h5>
|
|
|
|
- <p class="card-text">
|
|
|
|
- {% if playlist.description %}
|
|
|
|
- {{ playlist.description|truncatewords:"15" }}
|
|
|
|
- {% else %}
|
|
|
|
- No description
|
|
|
|
- {% endif %}
|
|
|
|
- </p>
|
|
|
|
- <small>
|
|
|
|
- <span class="badge bg-primary rounded-pill">{{ playlist.video_count }} videos</span>
|
|
|
|
- <span class="badge bg-primary rounded-pill">{{ playlist.playlist_duration }} </span>
|
|
|
|
- <span class="badge bg-secondary rounded-pill">{{ playlist.num_of_accesses }} clicks </span>
|
|
|
|
|
|
+ <div class="card bg-dark text-white">
|
|
|
|
+ <div class="card-body">
|
|
|
|
+ <h6 class="d-flex align-items-center mb-3"><span class="text-info me-2">{{ user.profile.playlists.count }}</span>Playlists Statistics</h6>
|
|
|
|
|
|
- </small>
|
|
|
|
|
|
+ <small>Public <span class="text-warning ms-1">{{ statistics.public_x }}%</span></small>
|
|
|
|
+ <div class="progress mb-3" style="height: 5px">
|
|
|
|
+ <div class="progress-bar bg-primary" role="progressbar" style="width: {{ statistics.public_x }}%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <small>Private <span class="text-warning ms-1">{{ statistics.private_x }}%</span></small>
|
|
|
|
+ <div class="progress mb-3" style="height: 5px">
|
|
|
|
+ <div class="progress-bar bg-primary" role="progressbar" style="width: {{ statistics.private_x }}%" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100"></div>
|
|
|
|
+ </div>
|
|
|
|
+ <small>Favorites <span class="text-warning ms-1">{{ statistics.favorites_x }}%</span></small>
|
|
|
|
+ <div class="progress mb-3" style="height: 5px">
|
|
|
|
+ <div class="progress-bar bg-primary" role="progressbar" style="width: {{ statistics.favorites_x }}%" aria-valuenow="89" aria-valuemin="0" aria-valuemax="100"></div>
|
|
|
|
+ </div>
|
|
|
|
+ <small>Watching <span class="text-warning ms-1">{{ statistics.watching_x }}%</span></small>
|
|
|
|
+ <div class="progress mb-3" style="height: 5px">
|
|
|
|
+ <div class="progress-bar bg-primary" role="progressbar" style="width: {{ statistics.watching_x }}%" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100"></div>
|
|
|
|
+ </div>
|
|
|
|
+ <small>Imported <span class="text-warning ms-1">{{ statistics.imported_x }}%</span></small>
|
|
|
|
+ <div class="progress mb-3" style="height: 5px">
|
|
|
|
+ <div class="progress-bar bg-primary" role="progressbar" style="width: {{ statistics.imported_x }}%" aria-valuenow="66" aria-valuemin="0" aria-valuemax="100"></div>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
- </a>
|
|
|
|
- </div>
|
|
|
|
|
|
+ </div>
|
|
|
|
+
|
|
</div>
|
|
</div>
|
|
- {% endfor %}
|
|
|
|
|
|
+ <div class="col">
|
|
|
|
+ <div class="card bg-transparent text-black border border-5 rounded-3 border-success p-3">
|
|
|
|
+ <div class="card-body">
|
|
|
|
+ <h3><span style="border-bottom: 3px #ffffff dashed;">Most viewed playlists</span> <a href="{% url 'all_playlists' 'all' %}" class="pt-1"><i class="fas fa-binoculars"></i> </a></h3>
|
|
|
|
+ {% if user_playlists %}
|
|
|
|
+ <div class="row row-cols-1 row-cols-md-3 g-4 text-dark mt-0">
|
|
|
|
+ {% for playlist in user_playlists|slice:"0:3" %}
|
|
|
|
+ <div class="col">
|
|
|
|
+ <div class="card">
|
|
|
|
+ <a style="background-color: #4790c7;" href="{% url 'playlist' playlist.playlist_id %}" class="list-group-item list-group-item-action" aria-current="true">
|
|
|
|
+ <div class="card-body">
|
|
|
|
+ <h5 class="card-title">
|
|
|
|
+ #{{ forloop.counter }} <br><br>{{ playlist.name }}
|
|
|
|
+ {% if playlist.is_private_on_yt %}<small><span class="badge bg-light text-dark">Private</span></small> {% endif %}
|
|
|
|
+ {% if playlist.is_from_yt %}<small><span class="badge bg-danger text-dark">YT</span></small> {% endif %}
|
|
|
|
+ </h5>
|
|
|
|
+ <small>
|
|
|
|
+ <span class="badge bg-primary rounded-pill">{{ playlist.video_count }} videos</span>
|
|
|
|
+ <span class="badge bg-primary rounded-pill">{{ playlist.playlist_duration }} </span>
|
|
|
|
+ <span class="badge bg-secondary rounded-pill">{{ playlist.num_of_accesses }} clicks </span>
|
|
|
|
|
|
- </div>
|
|
|
|
|
|
+ </small>
|
|
|
|
+ </div>
|
|
|
|
+ </a>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ {% endfor %}
|
|
|
|
|
|
- {% else %}
|
|
|
|
- <br>
|
|
|
|
- <h5>Nothing to see here... yet.</h5>
|
|
|
|
- {% endif %}
|
|
|
|
|
|
+ </div>
|
|
|
|
|
|
|
|
+ {% else %}
|
|
|
|
+ <br>
|
|
|
|
+ <h5>Nothing to see here... yet.</h5>
|
|
|
|
+ {% endif %}
|
|
|
|
|
|
- <br>
|
|
|
|
- <h3><span style="border-bottom: 3px #ffffff dashed;">Recently Accessed</span> <i class="fas fa-redo fa-sm" style="color: #3c3fd2"></i></h3>
|
|
|
|
-
|
|
|
|
- {% if recently_accessed_playlists %}
|
|
|
|
- <div class="row row-cols-1 row-cols-md-3 g-4 text-dark mt-0">
|
|
|
|
- {% for playlist in recently_accessed_playlists %}
|
|
|
|
- <div class="col">
|
|
|
|
- <div class="card">
|
|
|
|
- <a style="background-color: #357779;" href="{% url 'playlist' playlist.playlist_id %}" class="list-group-item list-group-item-action" aria-current="true">
|
|
|
|
- <div class="card-body">
|
|
|
|
- <h5 class="card-title">
|
|
|
|
- {{ playlist.name }}
|
|
|
|
- {% if playlist.is_private_on_yt %}<small><span class="badge bg-light text-dark">Private</span></small> {% endif %}
|
|
|
|
- {% if playlist.is_from_yt %}<small><span class="badge bg-danger text-dark">YT</span></small> {% endif %}
|
|
|
|
- </h5>
|
|
|
|
- <p class="card-text">
|
|
|
|
- {% if playlist.description %}
|
|
|
|
- {{ playlist.description|truncatewords:"15" }}
|
|
|
|
- {% else %}
|
|
|
|
- No description
|
|
|
|
- {% endif %}
|
|
|
|
- </p>
|
|
|
|
- <small>
|
|
|
|
- <span class="badge bg-primary rounded-pill">{{ playlist.video_count }} videos</span>
|
|
|
|
- <span class="badge bg-primary rounded-pill">{{ playlist.playlist_duration }} </span>
|
|
|
|
- <span class="badge bg-secondary rounded-pill">{{ playlist.num_of_accesses }} clicks </span>
|
|
|
|
|
|
|
|
- </small>
|
|
|
|
</div>
|
|
</div>
|
|
- </a>
|
|
|
|
- </div>
|
|
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
- {% endfor %}
|
|
|
|
</div>
|
|
</div>
|
|
- {% else %}
|
|
|
|
|
|
+
|
|
<br>
|
|
<br>
|
|
- <h5>Nothing to see here... yet.</h5>
|
|
|
|
- {% endif %}
|
|
|
|
|
|
|
|
- <br>
|
|
|
|
- <h3><span style="border-bottom: 3px #ffffff dashed;">Recently Added</span> <i class="fas fa-plus-square" style="color:#972727;"></i></h3>
|
|
|
|
- {% if recently_added_playlists %}
|
|
|
|
- <div class="row row-cols-1 row-cols-md-3 g-4 text-dark mt-0">
|
|
|
|
- {% for playlist in recently_added_playlists %}
|
|
|
|
|
|
+ <div class="row text-dark mt-0 d-flex justify-content-evenly">
|
|
|
|
+ <div class="col">
|
|
|
|
+
|
|
|
|
+ <h3><span style="border-bottom: 3px #ffffff dashed;">Recently Added</span> <i class="fas fa-plus-square" style="color:#972727;"></i></h3>
|
|
|
|
+ {% if recently_added_playlists %}
|
|
|
|
+ <div class="row row-cols-1 row-cols-md-3 g-4 text-dark mt-0">
|
|
|
|
+ {% for playlist in recently_added_playlists %}
|
|
|
|
+ <div class="col">
|
|
|
|
+ <div class="card">
|
|
|
|
+ <a style="background-color: #958a44;" href="{% url 'playlist' playlist.playlist_id %}" class="list-group-item list-group-item-action" aria-current="true">
|
|
|
|
+ <div class="card-body">
|
|
|
|
+ <h5 class="card-title">
|
|
|
|
+ {{ playlist.name }}
|
|
|
|
+ {% if playlist.is_private_on_yt %}<small><span class="badge bg-light text-dark">Private</span></small> {% endif %}
|
|
|
|
+ {% if playlist.is_from_yt %}<small><span class="badge bg-danger text-dark">YT</span></small> {% endif %}
|
|
|
|
+ </h5>
|
|
|
|
+ <small>
|
|
|
|
+ <span class="badge bg-primary rounded-pill">{{ playlist.video_count }} videos</span>
|
|
|
|
+ <span class="badge bg-primary rounded-pill">{{ playlist.playlist_duration }} </span>
|
|
|
|
+ <span class="badge bg-secondary rounded-pill">{{ playlist.num_of_accesses }} clicks </span>
|
|
|
|
+
|
|
|
|
+ </small>
|
|
|
|
+ </div>
|
|
|
|
+ </a>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ {% endfor %}
|
|
|
|
+ </div>
|
|
|
|
+ {% else %}
|
|
|
|
+ <br>
|
|
|
|
+ <h5>You have no playlists ;-;</h5>
|
|
|
|
+ {% endif %}
|
|
|
|
+ </div>
|
|
|
|
+
|
|
<div class="col">
|
|
<div class="col">
|
|
- <div class="card">
|
|
|
|
- <a style="background-color: #958a44;" href="{% url 'playlist' playlist.playlist_id %}" class="list-group-item list-group-item-action" aria-current="true">
|
|
|
|
- <div class="card-body">
|
|
|
|
- <h5 class="card-title">
|
|
|
|
- {{ playlist.name }}
|
|
|
|
- {% if playlist.is_private_on_yt %}<small><span class="badge bg-light text-dark">Private</span></small> {% endif %}
|
|
|
|
- {% if playlist.is_from_yt %}<small><span class="badge bg-danger text-dark">YT</span></small> {% endif %}
|
|
|
|
- </h5>
|
|
|
|
- <p class="card-text">
|
|
|
|
- {% if playlist.description %}
|
|
|
|
- {{ playlist.description|truncatewords:"15" }}
|
|
|
|
- {% else %}
|
|
|
|
- No description
|
|
|
|
- {% endif %}
|
|
|
|
- </p>
|
|
|
|
- <small>
|
|
|
|
- <span class="badge bg-primary rounded-pill">{{ playlist.video_count }} videos</span>
|
|
|
|
- <span class="badge bg-primary rounded-pill">{{ playlist.playlist_duration }} </span>
|
|
|
|
- <span class="badge bg-secondary rounded-pill">{{ playlist.num_of_accesses }} clicks </span>
|
|
|
|
|
|
+ <h3><span style="border-bottom: 3px #ffffff dashed;">Recently Accessed</span> <i class="fas fa-redo fa-sm" style="color: #3c3fd2"></i></h3>
|
|
|
|
|
|
- </small>
|
|
|
|
|
|
+ {% if recently_accessed_playlists %}
|
|
|
|
+ <div class="row row-cols-1 row-cols-md-3 g-4 text-dark mt-0">
|
|
|
|
+ {% for playlist in recently_accessed_playlists %}
|
|
|
|
+ <div class="col">
|
|
|
|
+ <div class="card">
|
|
|
|
+ <a style="background-color: #357779;" href="{% url 'playlist' playlist.playlist_id %}" class="list-group-item list-group-item-action" aria-current="true">
|
|
|
|
+ <div class="card-body">
|
|
|
|
+ <h5 class="card-title">
|
|
|
|
+ {{ playlist.name }}
|
|
|
|
+ {% if playlist.is_private_on_yt %}<small><span class="badge bg-light text-dark">Private</span></small> {% endif %}
|
|
|
|
+ {% if playlist.is_from_yt %}<small><span class="badge bg-danger text-dark">YT</span></small> {% endif %}
|
|
|
|
+ </h5>
|
|
|
|
+ <small>
|
|
|
|
+ <span class="badge bg-primary rounded-pill">{{ playlist.video_count }} videos</span>
|
|
|
|
+ <span class="badge bg-primary rounded-pill">{{ playlist.playlist_duration }} </span>
|
|
|
|
+ <span class="badge bg-secondary rounded-pill">{{ playlist.num_of_accesses }} clicks </span>
|
|
|
|
+
|
|
|
|
+ </small>
|
|
|
|
+ </div>
|
|
|
|
+ </a>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
- </a>
|
|
|
|
|
|
+ {% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
+ {% else %}
|
|
|
|
+ <br>
|
|
|
|
+ <h5>Nothing to see here... yet.</h5>
|
|
|
|
+ {% endif %}
|
|
|
|
+
|
|
</div>
|
|
</div>
|
|
- {% endfor %}
|
|
|
|
</div>
|
|
</div>
|
|
- {% else %}
|
|
|
|
- <br>
|
|
|
|
- <h5>You have no playlists ;-;</h5>
|
|
|
|
- {% endif %}
|
|
|
|
- <br>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
+ <br>
|
|
|
|
+ <br>
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
|
|
|
|
|