Updated settings and added profile page

UnTube/settings.py

@@ -49,7 +49,7 @@ INSTALLED_APPS = [
     'allauth.socialaccount.providers.google',  # specifies google as OAuth provider
 
     'crispy_forms',
-    'apps.users',  # has stuff related to user management in it (login, signup, show homepage, pass reset)
+    'apps.users',  # has stuff related to user management in it (login, signup, show homepage, import)
     'apps.main',  # main app, shows user their homepage
 ]
 

apps/main/models.py

@@ -1062,7 +1062,7 @@ class Playlist(models.Model):
 
     # for updates
     last_full_scan_at = models.DateTimeField(auto_now_add=True)
-    has_new_updates = models.BooleanField(default=False)
+    has_new_updates = models.BooleanField(default=False)  # meant to keep track of newly added/unavailable videos
 
     def __str__(self):
         return "Playlist Len " + str(self.video_count)

apps/main/templates/all_playlists.html

@@ -31,7 +31,7 @@
         {% if playlists %}
 
         <div class="">
-            <input   class="form-control border border-secondary bg-dark text-white-50" type="text"
+            <input   class="form-control border border-secondary" type="text"
        name="search" placeholder="Begin to search playlists..."
        hx-post="{% url 'search_playlists' playlist_type %}"
        hx-trigger="keyup changed delay:500ms"

apps/main/templates/home.html

@@ -31,6 +31,8 @@
                 </div>
 
             {% else %}
+
+            <!--
             <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
 
                 <h1 class="h2">Dashboard</h1>
@@ -38,6 +40,7 @@
                 <span><small>Logged in as <b>{{ user.username }}</b></small></span>
 
             </div>
+            -->
 
             <div hx-get="{% url 'user_playlists_updates' 'check-for-updates' %}" hx-trigger="load" hx-swap="outerHTML">
 
@@ -46,70 +49,10 @@
 
 
 
-            <div class="accordion" id="accordionExample">
-                <div class="accordion-item bg-dark text-white">
-                    <h2 class="accordion-header" id="headingTwo">
-                      <button style="background-color: #cdc6e2" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
-                        Statistics
-                      </button>
-                    </h2>
-                    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
-                      <div class="accordion-body d-flex justify-content-evenly">
-                          <div class="card" style="width: 18rem;">
-                              <div class="card-body text-black-50">
-                                <h5 class="card-title">25 total playlists</h5>
-                                  <ul>
-                                <h5 class="card-title">24 owned</h5>
-                                      <ul>
-                                          <h5 class="card-title">4 private</h5>
-                                        <h5 class="card-title">24 public</h5>
-
-                                      </ul>
-                                 <h5 class="card-title">36 Imported</h5>
-                                      <ul>
-                                          <h5 class="card-title">24 mixes</h5>
-                                        <h5 class="card-title">12 others</h5>
-
-                                      </ul>
-                                  </ul>
-                              </div>
-                        </div>
-                          <div class="card" style="width: 18rem;">
-                              <div class="card-body">
-                                <h5 class="card-title">Card title</h5>
-                                <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
-                                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-                                <a href="#" class="card-link">Card link</a>
-                                <a href="#" class="card-link">Another link</a>
-                              </div>
-                        </div>
-                                                    <div class="card" style="width: 18rem;">
-                              <div class="card-body">
-                                <h5 class="card-title">Card title</h5>
-                                <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
-                                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-                                <a href="#" class="card-link">Card link</a>
-                                <a href="#" class="card-link">Another link</a>
-                              </div>
-                        </div>
-                          <div class="card" style="width: 18rem;">
-                              <div class="card-body">
-                                <h5 class="card-title">Card title</h5>
-                                <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
-                                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-                                <a href="#" class="card-link">Card link</a>
-                                <a href="#" class="card-link">Another link</a>
-                              </div>
-                        </div>
-
-                      </div>
-                    </div>
-                  </div>
-            </div>
             {% if watching %}
                 <br>
                 <div class="border border-5 rounded-3 border-primary p-3">
-            <h3>Continue Watching</h3>
+                    <h3><span style="border-bottom: 3px #ffffff dashed;">Continue Watching</span></h3>
            <div class="row row-cols-1 row-cols-md-4 g-4 text-dark mt-0">
                 {% for playlist in watching|slice:"0:3" %}
                 <div class="col">
@@ -158,7 +101,7 @@
                 {% endif %}
 
             <br>
-            <h3>Most viewed playlists <a href="{% url 'all_playlists' 'all' %}" class="btn btn-sm btn-info">View All</a></h3>
+            <h3><span style="border-bottom: 3px #ffffff dashed;">Most viewed playlists</span> <a href="{% url 'all_playlists' 'all' %}" class="btn btn-sm btn-info">View All</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" %}
@@ -198,7 +141,7 @@
 
 
         <br>
-            <h3>Recently Accessed</h3>
+            <h3><span style="border-bottom: 3px #ffffff dashed;">Recently Accessed</span></h3>
 
             {% if recently_accessed_playlists %}
             <div class="row row-cols-1 row-cols-md-3 g-4 text-dark mt-0">
@@ -236,7 +179,7 @@
             {% endif %}
 
         <br>
-            <h3>Recently Added</h3>
+            <h3><span style="border-bottom: 3px #ffffff dashed;">Recently Added</span></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 %}

apps/main/templates/intercooler/messages.html

@@ -1,4 +1,7 @@
 <div class="alert alert-{{ message_type }} alert-dismissible fade show" role="alert">
   {{ message_content }}
   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-</div>
+</div>
+{% if refresh_page %}
+      <meta http-equiv="refresh" content="1" />
+{% endif %}

apps/main/templates/intercooler/playlist_updates.html

@@ -0,0 +1,15 @@
+
+{% load humanize %}
+{% load static %}
+    <br>
+    <div class="alert alert-success alert-dismissible fade show" role="alert">
+      <h4 class="alert-heading">Updates</h4>
+      <p>{{ playlist_changed_text|linebreaksbr }}</p>
+      <hr>
+      <p class="mb-0">Tip: Sort By Updates to see what changed in this playlist. Deleted videos will not show up there. Updates can be seen for 12 hrs.</p>
+    </div>
+
+    <div class="d-flex justify-content-center">
+        <a class="btn btn-primary" href="{% url 'playlist' playlist_id %}">Back</a>
+    </div>
+      <meta http-equiv="refresh" content="100" />

apps/main/templates/intercooler/playlists.html

@@ -16,7 +16,7 @@
         </div>
 
         <div class="">
-            <input class="form-control border border-secondary bg-dark text-white-50" type="text"
+            <input class="form-control border border-secondary" type="text"
        name="search" placeholder="Begin to search playlists..."
                    value="{{ search_query }}"
        hx-post="{% url 'search_playlists' playlist_type %}"

apps/main/templates/intercooler/search_untube.html

@@ -3,11 +3,13 @@
         <div>
             <div class="d-flex justify-content-center">
                <h1> Search all of UnTube
-                   <h6>Press <code>Esc</code> to close.</h6>
-                </h1>
+                {% if user.profile.open_search_new_tab %}
+                    <h6>Press <kbd>Esc</kbd> to close.</h6>
+                {% endif %}
+               </h1>
             </div>
 
-            <input class="form-control me-lg-2 bg-dark text-white" type="text"
+            <input class="form-control me-lg-2" type="text"
                 name="search" placeholder="Search UnTube"
                 value="{{ search_query }}"
                 hx-post="{% url 'search_UnTube' %}"

apps/main/templates/intercooler/videos.html

@@ -1,13 +1,11 @@
 {% load humanize %}
-<br>
 {% if videos_details and videos.count != 0 %}
-<h5>{{ videos_details }}, Results: {{ videos.count }}</h5>
-<br>
+    <h4 class="mt-3 mb-3"><span class="badge bg-dark text-white">{{ videos_details }}, Results: {{ videos.count }}</span></h4>
 {% endif %}
 <div class="list-group" id="video-checkboxes">
     {% if videos %}
       {% for video in videos %}
-                <li class="list-group-item d-flex justify-content-between align-items-center" style="background-color: #40B3A2">
+                <li class="list-group-item d-flex justify-content-between align-items-center bg-transparent" style="background-color: #40B3A2">
 
             {% if video.is_unavailable_on_yt and not video.was_deleted_on_yt %}
 
@@ -36,7 +34,7 @@
                       </div>
                         <div class="ms-4">
                             {{ video.video_position }}.
-                            <a class="link-dark" href="https://www.youtube.com/watch?v={{ video.videoid }}&list={{ video.playlist.playlist_id }}" target="_blank">
+                            <a class="link-dark" href="https://www.youtube.com/watch?v={{ video.video_id }}&list={{ video.playlist.playlist_id }}" target="_blank">
                                 {{ video.name|truncatewords:"16" }}
                             </a> by {{ video.channel_name }}<br>
                             <span class="badge bg-secondary">{{ video.duration }}</span>

apps/main/templates/manage_playlists.html

@@ -28,7 +28,6 @@
         </div>
         </a>
     </div>
-
     <div id="manage-untube-playlists-btn" class="col">
         <a  hx-get="{% url 'manage_view_page' 'untube' %}" hx-trigger="click" hx-target="#manage-pl-div" class="text-decoration-none text-white">
         <div class="card" style="background-color: #641a52;">

apps/main/templates/search_untube_page.html

@@ -15,10 +15,10 @@
 
     <div class="d-flex justify-content-center">
         <h1> Search all of UnTube
-            <h6>Press <code>Esc</code> to close.</h6>
+            {% if user.profile.open_search_new_tab %}<h6>Press <kbd>Esc</kbd> to close.</h6>{% endif %}
         </h1>
     </div>
-<input class="form-control me-lg-2 bg-dark text-white" type="text"
+<input class="form-control me-lg-2" type="text"
        id="untubeSearchBar"
         name="search" placeholder="Search UnTube"
         hx-post="{% url 'search_UnTube' %}"

apps/main/templates/intercooler/updated_playlist.html → apps/main/templates/temp.html

@@ -1,18 +1,4 @@
-
-{% load humanize %}
-{% load static %}
-    <div id="view_playlist">
-    <br>
-    <div class="alert alert-success alert-dismissible fade show" role="alert">
-      <h4 class="alert-heading">Updates</h4>
-      <p>{{ playlist_changed_text|linebreaksbr }}</p>
-      <hr>
-      <p class="mb-0">Tip: Sort By Updates to see what changed in this playlist. Deleted videos will not show up there. Updates can be seen for 12 hrs.</p>
-        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-
-    </div>
-
-    <div class="list-group-item list-group-item-action active">
+<div class="list-group-item list-group-item-action active">
         <div class="d-flex w-100 justify-content-between">
             <span>
                 <h2 class="mb-1">{{ playlist.name }}
@@ -313,4 +299,4 @@
         </div>
     </div>
 
-    </div>
+    </div>

apps/main/templates/view_playlist.html

@@ -74,103 +74,105 @@
     <br>
 
     <div id="row1">
-        <div class="d-flex bd-highlight mb-1">
-            <div class="me-auto bd-highlight">
-                <div class="btn-toolbar mb-2 mb-md-0">
-                    <!--
-                    <div class="btn-group me-2">
-                        <button type="button" class="btn {% if playlist.view_in_grid_mode %}btn-info {% else %}btn-outline-info{% endif %}">Grid</button>
-                        <button type="button" class="btn {% if not playlist.view_in_grid_mode %}btn-info {% else %}btn-outline-info{% endif %}">List</button>
-                    </div>
-                    -->
+    <div class="d-flex bd-highlight mb-1">
+        <div class="me-auto bd-highlight">
+            <div class="btn-toolbar mb-2 mb-md-0">
+                <!--
+                <div class="btn-group me-2">
+                    <button type="button" class="btn {% if playlist.view_in_grid_mode %}btn-info {% else %}btn-outline-info{% endif %}">Grid</button>
+                    <button type="button" class="btn {% if not playlist.view_in_grid_mode %}btn-info {% else %}btn-outline-info{% endif %}">List</button>
+                </div>
+                -->
+                <div class="btn-group me-2">
+                    <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+                        Sort By
+                    </button>
+                    <ul class="dropdown-menu">
+                        <li><button class="dropdown-item" hx-get="{% url 'order_playlist_by' playlist.playlist_id 'all' %}" hx-trigger="click" hx-target="#videos-div">All</button></li>
+                        <li><button class="dropdown-item" hx-get="{% url 'order_playlist_by' playlist.playlist_id 'favorites' %}" hx-trigger="click" hx-target="#videos-div">Favorites</button></li>
+                        <li><button class="dropdown-item" hx-get="{% url 'order_playlist_by' playlist.playlist_id 'popularity' %}" hx-trigger="click" hx-target="#videos-div">Popularity</button></li>
+                        <li><button class="dropdown-item" hx-get="{% url 'order_playlist_by' playlist.playlist_id 'date-published' %}" hx-trigger="click" hx-target="#videos-div">Date Published</button></li>
+                        <li><button class="dropdown-item" hx-get="{% url 'order_playlist_by' playlist.playlist_id 'views' %}" hx-trigger="click" hx-target="#videos-div">Views</button></li>
+                        <li><button class="dropdown-item" hx-get="{% url 'order_playlist_by' playlist.playlist_id 'has-cc' %}" hx-trigger="click" hx-target="#videos-div">Has CC</button></li>
+                        <li><button class="dropdown-item" hx-get="{% url 'order_playlist_by' playlist.playlist_id 'duration' %}" hx-trigger="click" hx-target="#videos-div">Duration</button></li>
+                        <li><hr class="dropdown-divider"></li>
+                        <li><button class="dropdown-item" hx-get="{% url 'order_playlist_by' playlist.playlist_id 'new-updates' %}" hx-trigger="click" hx-target="#videos-div">Updates</button></li>
+                        <li><button class="dropdown-item" hx-get="{% url 'order_playlist_by' playlist.playlist_id 'unavailable-videos' %}" hx-trigger="click" hx-target="#videos-div">Unavailable</button></li>
+
+                    </ul>
+                </div>
+
+
                     <div class="btn-group me-2">
-                        <button type="button" class="btn btn-outline-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
-                            Sort By
+                        <button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+                            Mark As
                         </button>
                         <ul class="dropdown-menu">
-                            <li><button class="dropdown-item" hx-get="{% url 'order_playlist_by' playlist.playlist_id 'all' %}" hx-trigger="click" hx-target="#videos-div">All</button></li>
-                            <li><button class="dropdown-item" hx-get="{% url 'order_playlist_by' playlist.playlist_id 'favorites' %}" hx-trigger="click" hx-target="#videos-div">Favorites</button></li>
-                            <li><button class="dropdown-item" hx-get="{% url 'order_playlist_by' playlist.playlist_id 'popularity' %}" hx-trigger="click" hx-target="#videos-div">Popularity</button></li>
-                            <li><button class="dropdown-item" hx-get="{% url 'order_playlist_by' playlist.playlist_id 'date-published' %}" hx-trigger="click" hx-target="#videos-div">Date Published</button></li>
-                            <li><button class="dropdown-item" hx-get="{% url 'order_playlist_by' playlist.playlist_id 'views' %}" hx-trigger="click" hx-target="#videos-div">Views</button></li>
-                            <li><button class="dropdown-item" hx-get="{% url 'order_playlist_by' playlist.playlist_id 'has-cc' %}" hx-trigger="click" hx-target="#videos-div">Has CC</button></li>
-                            <li><button class="dropdown-item" hx-get="{% url 'order_playlist_by' playlist.playlist_id 'duration' %}" hx-trigger="click" hx-target="#videos-div">Duration</button></li>
-                            <li><hr class="dropdown-divider"></li>
-                            <li><button class="dropdown-item" hx-get="{% url 'order_playlist_by' playlist.playlist_id 'new-updates' %}" hx-trigger="click" hx-target="#videos-div">Updates</button></li>
-                            <li><button class="dropdown-item" hx-get="{% url 'order_playlist_by' playlist.playlist_id 'unavailable-videos' %}" hx-trigger="click" hx-target="#videos-div">Unavailable</button></li>
-
+                            <li><button class="dropdown-item" hx-get="{% url 'mark_playlist_as' playlist.playlist_id 'none' %}" hx-trigger="click" hx-target="#notice-div">None</button></li>
+                            <li><button class="dropdown-item" hx-get="{% url 'mark_playlist_as' playlist.playlist_id 'watching' %}" hx-trigger="click" hx-target="#notice-div">Watching</button></li>
+                            <li><button class="dropdown-item" hx-get="{% url 'mark_playlist_as' playlist.playlist_id 'plan-to-watch' %}" hx-trigger="click" hx-target="#notice-div">Plan to Watch</button></li>
                         </ul>
                     </div>
-
-
-                        <div class="btn-group me-2">
-                            <button type="button" class="btn btn-outline-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
-                                Mark As
-                            </button>
-                            <ul class="dropdown-menu">
-                                <li><button class="dropdown-item" hx-get="{% url 'mark_playlist_as' playlist.playlist_id 'none' %}" hx-trigger="click" hx-target="#notice-div">None</button></li>
-                                <li><button class="dropdown-item" hx-get="{% url 'mark_playlist_as' playlist.playlist_id 'watching' %}" hx-trigger="click" hx-target="#notice-div">Watching</button></li>
-                                <li><button class="dropdown-item" hx-get="{% url 'mark_playlist_as' playlist.playlist_id 'plan-to-watch' %}" hx-trigger="click" hx-target="#notice-div">Plan to Watch</button></li>
-                            </ul>
-                        </div>
-                </div>
             </div>
+        </div>
 
-            <div class="bd-highlight">
-                <div class="btn-toolbar mb-2 mb-md-0">
+        <div class="bd-highlight">
+            <div class="btn-toolbar mb-2 mb-md-0">
 
-                        <div class="btn-group me-2">
-                            <a hx-get="{% url 'update_playlist' playlist.playlist_id 'manual' %}" hx-target="#view_playlist" class="btn btn-secondary">
-                                <i class="fas fa-sync"></i>
-                            </a>
-                        </div>
+                    <div class="btn-group me-2">
+                        <a hx-get="{% url 'update_playlist' playlist.playlist_id 'manual' %}" hx-target="#view_playlist" class="btn btn-secondary">
+                            <i class="fas fa-sync"></i>
+                        </a>
+                    </div>
 
-                        <div class="btn-group me-2">
-                            <button type="button" class="btn btn-danger">
-                                <i class="fas fa-dumpster-fire"></i>
-                            </button>
-                        </div>
+                {% if playlist.is_user_owned %}
+                    <div class="btn-group me-2">
+                        <button type="button" class="btn btn-danger">
+                            <i class="fas fa-dumpster-fire"></i>
+                        </button>
+                    </div>
 
-                        <div class="btn-group me-2">
-                            <button type="button" class="btn btn-primary">
-                                <i class="fas fa-edit"></i>
-                            </button>
-                        </div>
+                    <div class="btn-group me-2">
+                        <button type="button" class="btn btn-primary">
+                            <i class="fas fa-edit"></i>
+                        </button>
+                    </div>
+                {% endif %}
 
-                        <div class="btn-group me-2">
+                    <div class="btn-group me-2">
 
-                            <button class="btn btn-warning" type="button" hx-get="{% url 'mark_playlist_as' playlist.playlist_id 'favorite' %}" hx-target="#playlist-fav">
-                                <div id="playlist-fav">
-                                    {% if playlist.is_favorite %}
-                                        <i class="fas fa-star"></i>
-                                    {% else %}
-                                        <i class="far fa-star"></i>
-                                    {% endif %}
-                                </div>
-                            </button>
-                        </div>
+                        <button class="btn btn-warning" type="button" hx-get="{% url 'mark_playlist_as' playlist.playlist_id 'favorite' %}" hx-target="#playlist-fav">
+                            <div id="playlist-fav">
+                                {% if playlist.is_favorite %}
+                                    <i class="fas fa-star"></i>
+                                {% else %}
+                                    <i class="far fa-star"></i>
+                                {% endif %}
+                            </div>
+                        </button>
+                    </div>
 
 
 
-                        <div class="btn-group me-2">
-                            <button type="button" class="btn btn-outline-light" onclick="row1_hide()">Manage</button>
-                        </div>
-                </div>
+                    <div class="btn-group me-2">
+                        <button type="button" class="btn btn-light" onclick="row1_hide()">Manage</button>
+                    </div>
             </div>
         </div>
     </div>
+</div>
     <div id="row2" style="display: none">
         <div class="d-flex bd-highlight mb-1">
             <div class="me-auto bd-highlight">
                 <div class="btn-toolbar mb-2 mb-md-0">
                     <div id="select-all-btn">
                         <div class="btn-group me-2">
-                        <button type="button" class="btn btn-outline-info" id="select-all-btn">Select All</button>
+                        <button type="button" class="btn btn-info" id="select-all-btn">Select All</button>
                     </div>
                     </div>
                     <div id="deselect-all-btn" style="display: none">
                         <div class="btn-group me-2">
-                        <button type="button" class="btn btn-outline-info" id="select-all-btn">De-select All</button>
+                        <button type="button" class="btn btn-info" id="select-all-btn">De-select All</button>
                         </div>
                     </div>
 
@@ -178,7 +180,7 @@
                         <!-- <button type="submit" form="my-form" class="btn btn-outline-success" data-bs-toggle="dropdown" aria-expanded="false">
                             Move
                         </button> -->
-                           <button class="btn btn-outline-success" id="move-copy-vids-btn" type="button" data-bs-toggle="collapse" data-bs-target="#moveItemsToCollapse" aria-expanded="false" aria-controls="moveItemsToCollapse">
+                           <button class="btn btn-success" id="move-copy-vids-btn" type="button" data-bs-toggle="collapse" data-bs-target="#moveItemsToCollapse" aria-expanded="false" aria-controls="moveItemsToCollapse">
                                 Move/Copy Videos
                            </button>
                     </div>
@@ -192,7 +194,7 @@
                     </div>
                     -->
                     <div class="btn-group me-2">
-                        <button hx-post="{% url 'delete_videos' playlist.playlist_id 'confirm' %}" hx-include="[id='video-checkboxes']" hx-target="#delete-videos-confirm-box" type="button" id="delete-vids-btn" class="btn btn-outline-danger" data-bs-toggle="collapse" data-bs-target="#deleteItemsCollapse" aria-expanded="false" aria-controls="deleteItemsCollapse">
+                        <button hx-post="{% url 'delete_videos' playlist.playlist_id 'confirm' %}" hx-include="[id='video-checkboxes']" hx-target="#delete-videos-confirm-box" type="button" id="delete-vids-btn" class="btn btn-danger" data-bs-toggle="collapse" data-bs-target="#deleteItemsCollapse" aria-expanded="false" aria-controls="deleteItemsCollapse">
                             Delete Selected
                         </button>
                     </div>
@@ -213,33 +215,33 @@
 
         </div>
     </div>
-        <div id="row3" style="background-color: #0f5132">
-          <div class="collapse border-danger" id="moveItemsToCollapse">
-              <div class="card card-body bg-dark text-white-50">
+    <div id="row3" style="background-color: #0f5132">
+    <div class="collapse border-danger" id="moveItemsToCollapse">
+    <div class="card card-body bg-dark text-white-50">
 
-                  <h5>Move or Copy videos to another playlist!</h5>
+      <h5>Move or Copy videos to another playlist!</h5>
 
-                  <div class="d-flex justify-content-start">
-                      <input class="form-control w-50 bg-dark text-white border border-secondary" placeholder="Enter playlist ID here">
-                      <div class="btn-group ms-2">
-                        <button type="button" class="btn btn-info" id="select-all-btn">Move!</button>
-                      </div>
-                      <div class="btn-group ms-2">
-                        <button type="button" class="btn btn-info" id="select-all-btn">Copy!</button>
-                      </div>
-                  </div>
+      <div class="d-flex justify-content-start">
+          <input class="form-control w-50 bg-dark text-white border border-secondary" placeholder="Enter playlist ID here">
+          <div class="btn-group ms-2">
+            <button type="button" class="btn btn-info" id="select-all-btn">Move!</button>
+          </div>
+          <div class="btn-group ms-2">
+            <button type="button" class="btn btn-info" id="select-all-btn">Copy!</button>
+          </div>
 
-                  <div class="d-flex justify-content-start mt-3">
-                      <div class="btn-group">
-                          <a href="{% url 'all_playlists' 'all' %}" target="_blank" class="btn btn-sm btn-success" id="select-all-btn">Search for Playlists <i class="fas fa-external-link-alt" aria-hidden="true"></i></a>
-                      </div>
-                  </div>
+      </div>
 
-              </div>
-            </div>
-        </div>
+      <div class="d-flex justify-content-start mt-3">
+          <div class="btn-group">
+              <a href="{% url 'all_playlists' 'all' %}" target="_blank" class="btn btn-sm btn-success" id="select-all-btn">Search for Playlists <i class="fas fa-external-link-alt" aria-hidden="true"></i></a>
+          </div>
+      </div>
 
-        <div id="row4" style="background-color: #0f5132">
+    </div>
+    </div>
+    </div>
+    <div id="row4" style="background-color: #0f5132">
           <div class="collapse border-danger" id="deleteItemsCollapse">
               <div class="card card-body bg-dark text-white-50">
 
@@ -264,12 +266,14 @@
             </div>
         </div>
 
+
+
     <div class="table-responsive" id="videos-div">
         <br>
         <div class="list-group" id="video-checkboxes">
           {% for video in videos %}
 
-            <li class="list-group-item d-flex justify-content-between align-items-center" style="background-color: #40B3A2">
+            <li class="list-group-item d-flex justify-content-between align-items-center bg-transparent" style="background-color: #40B3A2">
 
         {% if video.is_unavailable_on_yt and not video.was_deleted_on_yt %}
 
@@ -350,9 +354,9 @@
     </div>
 
 
-
     </div>
 
+
     <!--
       <script src="{% static 'youtube-audio-player/iframe-api.js' %}"></script>
   <script src="{% static 'youtube-audio-player/yt.min.js' %}"></script>

apps/main/views.py

@@ -107,6 +107,19 @@ def view_playlist(request, playlist_id):
         messages.error(request, "No such playlist found!")
         return redirect('home')
 
+    if playlist.has_new_updates:
+        recently_updated_videos = playlist.videos.filter(video_details_modified=True)
+
+        for video in recently_updated_videos:
+            if video.video_details_modified_at + datetime.timedelta(hours=12) < datetime.datetime.now(
+                    pytz.utc):  # expired
+                video.video_details_modified = False
+                video.save()
+
+        if recently_updated_videos.count() == 0:
+            playlist.has_new_updates = False
+            playlist.save()
+
     videos = playlist.videos.order_by("video_position")
 
     return render(request, 'view_playlist.html', {"playlist": playlist,
@@ -588,11 +601,11 @@ def update_playlist(request, playlist_id, type):
 
     if len(added_videos) != 0:
         playlist_changed_text.append(f"{len(added_videos)} added")
-        for video in added_videos[:3]:
+        for video in added_videos:
             playlist_changed_text.append(f"--> {video.name}")
 
-        if len(added_videos) > 3:
-            playlist_changed_text.append(f"+ {len(added_videos) - 3} more")
+        #if len(added_videos) > 3:
+        #    playlist_changed_text.append(f"+ {len(added_videos) - 3} more")
 
     if len(unavailable_videos) != 0:
         if len(playlist_changed_text) == 0:
@@ -615,8 +628,8 @@ def update_playlist(request, playlist_id, type):
     if len(playlist_changed_text) == 0:
         playlist_changed_text = ["Successfully refreshed playlist! No new changes found!"]
 
-    return HttpResponse(loader.get_template("intercooler/updated_playlist.html")
+    # return HttpResponse
+    return HttpResponse(loader.get_template("intercooler/playlist_updates.html")
         .render(
         {"playlist_changed_text": "\n".join(playlist_changed_text),
-         "playlist": playlist,
-         "videos": playlist.videos.order_by("video_position")}))
+         "playlist_id": playlist_id}))

apps/users/models.py

@@ -20,6 +20,15 @@ class Profile(models.Model):
     created_at = models.DateTimeField(auto_now_add=True)
     updated_at = models.DateTimeField(auto_now=True)
 
+    # settings
+    robohash_set = models.IntegerField(default=3)  # determines profile picture from https://robohash.org/
+    user_summary = models.CharField(max_length=300, default="I think my arm is on backward.")
+    user_location = models.CharField(max_length=100, default="Hell, Earth")
+
+    # preferences
+    open_search_new_tab = models.BooleanField(default=True)  # open search page in new tab by default
+    hide_deleted_private_videos = models.BooleanField(default=False)
+
     # manage user
     objects = ProfileManager()
     just_joined = models.BooleanField(default=True)

apps/users/templates/profile.html

@@ -0,0 +1,211 @@
+{% extends 'base.html' %}
+
+{% block content %}
+
+    <!-- Template taken from https://www.bootdey.com/snippets/view/profile-with-data-and-skills#html -->
+
+<div class="container-fluid text-black">
+<div class="main-body" style="padding: 15px">
+
+      <div class="row g-5">
+        <div class="col-md-4 mb-3">
+          <div class="card bg-dark text-white">
+            <div class="card-body">
+              <div class="d-flex flex-column align-items-center text-center">
+                <img src="https://robohash.org/{{ user.username }}.png?set=set{{ user.profile.robohash_set }}" alt="{{ user.username }}" class="border border-5 border-primary rounded-circle" width="150">
+                <div class="mt-3">
+                  <h4>{{ user.get_full_name }}</h4>
+                  <p class="text-white-50 mb-1">{{ user.profile.user_summary }}</p>
+                  <p class="text-white-50 font-size-sm">{{ user.profile.user_location }}</p>
+                  <button class="btn btn-primary">Follow</button>
+                  <button class="btn btn-outline-primary">Message</button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="card mt-3 bg-dark ">
+            <ul class="list-group list-group-flush">
+              <li class="list-group-item bg-dark d-flex justify-content-between align-items-center flex-wrap">
+                <h6 class="mb-0 text-white">YouTube Channel ID</h6>
+                <span class="text-white-50">{{ user.profile.yt_channel_id }}</span>
+              </li>
+              <li class="list-group-item bg-dark d-flex justify-content-between align-items-center flex-wrap">
+                <h6 class="mb-0 text-white">
+                Followers</h6>
+                <span class="text-white-50">0</span>
+              </li>
+              <li class="list-group-item bg-dark d-flex justify-content-between align-items-center flex-wrap">
+                <h6 class="mb-0 text-white">Total Playlist Count</h6>
+                <span class="text-white-50">{{ user.profile.playlists.count }}</span>
+              </li>
+              <li class="list-group-item bg-dark d-flex justify-content-between align-items-center flex-wrap">
+                <h6 class="mb-0 text-white">Profile Views</h6>
+                <span class="text-white-50">0</span>
+              </li>
+              <li class="list-group-item bg-dark d-flex justify-content-between align-items-center flex-wrap">
+                <h6 class="mb-0 text-white">Imported YouTube Playlists</h6>
+                <span class="text-white-50">Yes</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div class="col-md-8">
+
+        <div id="settings-status-div" class="text-dark">
+
+        </div>
+
+
+          <div class="row gutters-sm">
+            <div class="col-sm-6 mb-3">
+              <div class="card h-100 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>Public</small>
+                  <div class="progress mb-3" style="height: 5px">
+                    <div class="progress-bar bg-primary" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
+                  </div>
+                  <small>Private</small>
+                  <div class="progress mb-3" style="height: 5px">
+                    <div class="progress-bar bg-primary" role="progressbar" style="width: 72%" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100"></div>
+                  </div>
+                  <small>Favorites</small>
+                  <div class="progress mb-3" style="height: 5px">
+                    <div class="progress-bar bg-primary" role="progressbar" style="width: 89%" aria-valuenow="89" aria-valuemin="0" aria-valuemax="100"></div>
+                  </div>
+                  <small>Watching</small>
+                  <div class="progress mb-3" style="height: 5px">
+                    <div class="progress-bar bg-primary" role="progressbar" style="width: 55%" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100"></div>
+                  </div>
+                  <small>Imported</small>
+                  <div class="progress mb-3" style="height: 5px">
+                    <div class="progress-bar bg-primary" role="progressbar" style="width: 66%" aria-valuenow="66" aria-valuemin="0" aria-valuemax="100"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm-6 mb-3">
+              <div class="card h-100 bg-dark text-white">
+                <div class="card-body">
+                  <h6 class="d-flex align-items-center mb-3"><span class="text-info me-2">23</span>Watching</h6>
+                  <small>Web Design</small>
+                  <div class="progress mb-3" style="height: 5px">
+                    <div class="progress-bar bg-primary" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
+                  </div>
+                  <small>Website Markup</small>
+                  <div class="progress mb-3" style="height: 5px">
+                    <div class="progress-bar bg-primary" role="progressbar" style="width: 72%" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100"></div>
+                  </div>
+                  <small>One Page</small>
+                  <div class="progress mb-3" style="height: 5px">
+                    <div class="progress-bar bg-primary" role="progressbar" style="width: 89%" aria-valuenow="89" aria-valuemin="0" aria-valuemax="100"></div>
+                  </div>
+                  <small>Mobile Template</small>
+                  <div class="progress mb-3" style="height: 5px">
+                    <div class="progress-bar bg-primary" role="progressbar" style="width: 55%" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100"></div>
+                  </div>
+                  <small>Backend API</small>
+                  <div class="progress mb-3" style="height: 5px">
+                    <div class="progress-bar bg-primary" role="progressbar" style="width: 66%" aria-valuenow="66" aria-valuemin="0" aria-valuemax="100"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="card bg-dark text-white mb-3">
+<div class="card-body">
+    <div class="d-flex justify-content-center">
+        No activity yet!
+    </div>
+
+
+</div>
+</div>
+
+
+
+        </div>
+      </div>
+
+    </div>
+</div>
+
+<!--
+<div class="container-fluid">
+
+    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
+
+        <h1 class="h2">Settings</h1>
+        <span><small>Logged in as <b>{{ user.username }}</b></small></span>
+
+    </div>
+
+        <div id="settings-status-div" class="text-dark">
+
+        </div>
+
+        <div id="settings-form">
+            <div class="mb-3">
+            <label for="username" class="form-label">Username</label>
+            <input type="text" class="form-control" name="username" id="username" value="{{ user.username }}">
+            </div>
+
+            <fieldset disabled>
+            <div class="mb-3">
+            <label for="email" class="form-label">Email Address</label>
+            <input type="email" class="form-control" id="email" aria-describedby="emailHelp" value="{{ user.email }}">
+            <div id="emailHelp" class="form-text">This is the google account you logged in with.</div>
+            </div>
+
+            <div class="mb-3">
+            <label for="fullname" class="form-label">Full Name</label>
+            <input type="text" class="form-control" id="fullname" value="{{ user.get_full_name }}">
+            </div>
+
+            <div class="mb-3">
+            <label for="ytchannelid" class="form-label">YouTube Channel ID</label>
+            <input type="text" class="form-control" id="ytchannelid" aria-describedby="emailHelp" value="{{ user.profile.yt_channel_id }}">
+            </div>
+
+            <div class="mb-3">
+            <label for="accesstoken" class="form-label">Access Token</label>
+            <input type="text" class="form-control" id="accesstoken" value="{{ user.profile.access_token }}">
+            </div>
+
+            <div class="mb-3">
+            <label for="refreshtoken" class="form-label">Refresh Token</label>
+            <input type="text" class="form-control" id="refreshtoken" value="{{ user.profile.refresh_token }}">
+            </div>
+
+            <div class="mb-3">
+            <label for="expiresat" class="form-label">Expires At</label>
+            <input type="datetime-local" class="form-control" id="expiresat" value="{{ user.profile.expires_at }}">
+            </div>
+            </fieldset>
+
+            <div class="mb-3 form-check form-switch">
+            <input class="form-check-input" name="auto refresh playlists" type="checkbox" id="flexSwitchCheckDefault">
+            <label class="form-check-label" for="flexSwitchCheckDefault">Automatically refresh playlists on visit</label>
+            </div>
+
+            <div class="mb-3 form-check form-switch">
+            <input class="form-check-input" name="hide videos" type="checkbox" id="flexSwitchCheckChecked" checked>
+            <label class="form-check-label" for="flexSwitchCheckChecked">Hide deleted/private videos</label>
+            </div>
+
+
+            <div class="mb-3 form-check form-switch">
+            <input class="form-check-input" name="confirm before deleting" type="checkbox" id="flexSwitchCheckChecked" checked>
+            <label class="form-check-label" for="flexSwitchCheckChecked">Confirm before deleting</label>
+            </div>
+            </div>
+
+        <div>
+            <a class="btn btn-outline-danger" href="{% url 'delete_account' %}">Delete account</a>
+            <button type="button" hx-post="{% url 'update_settings' %}" hx-include="[id='settings-form']" hx-target="#settings-status-div" class="btn btn-success">Save</button>
+        </div>
+
+</div>
+
+-->
+{% endblock %}

apps/users/templates/settings.html

@@ -2,6 +2,185 @@
 
 {% block content %}
 
+    <!-- Template taken from https://www.bootdey.com/snippets/view/profile-with-data-and-skills#html -->
+
+<div class="container-fluid text-black">
+<div class="main-body" style="padding: 15px">
+
+      <div class="row g-5">
+        <div class="col-md-4 mb-3">
+          <div class="card bg-dark text-white">
+            <div class="card-body">
+                <!--
+              <div class="d-flex flex-column align-items-center text-center">
+                <img src="https://robohash.org/{{ user.username }}.png?set=set3" alt="{{ user.username }}" class="border border-5 border-primary rounded-circle" width="150">
+                <div class="mt-3">
+                  <h4>{{ user.get_full_name }}</h4>
+                  <p class="text-white-50 mb-1">Full Stack Developer</p>
+                  <p class="text-white-50 font-size-sm">Bay Area, San Francisco, CA</p>
+                  <button class="btn btn-primary"><i class="fas fa-pencil-alt"></i></button>
+                </div>
+              </div>
+              -->
+            <div class="row">
+                <div class="col-sm-3">
+                  <h6 class="mb-0">Pick a picture:</h6>
+                </div>
+                <div class="col-sm-9 text-white-50">
+                    <img src="https://robohash.org/{{ user.username }}.png?set=set1" alt="{{ user.username }}" class="border border-3 {% if user.profile.robohash_set == 1 %}border-primary{% endif %} rounded-circle" width="65">
+                    <input class="form-check-input visually-hidden" type="radio" name="profilePicRadio" id="flexRadioDefault1">
+
+                    <img src="https://robohash.org/{{ user.username }}.png?set=set2" alt="{{ user.username }}" class="border border-3 {% if user.profile.robohash_set == 2 %}border-primary{% endif %} rounded-circle" width="65">
+                    <input class="form-check-input visually-hidden" type="radio" name="profilePicRadio" id="flexRadioDefault2">
+
+                    <img src="https://robohash.org/{{ user.username }}.png?set=set3" alt="{{ user.username }}" class="border border-3 {% if user.profile.robohash_set == 3 %}border-primary{% endif %} rounded-circle" width="65">
+                    <input class="form-check-input visually-hidden" type="radio" name="profilePicRadio" id="flexRadioDefault3">
+
+                    <img src="https://robohash.org/{{ user.username }}.png?set=set4" alt="{{ user.username }}" class="border border-3 {% if user.profile.robohash_set == 4 %}border-primary{% endif %} rounded-circle" width="65">
+                    <input class="form-check-input visually-hidden" type="radio" name="profilePicRadio" id="flexRadioDefault4">
+                </div>
+            </div>
+            <hr>
+              <div class="row">
+                <div class="col-sm-3">
+                  <h6 class="mb-0">Summary</h6>
+                </div>
+                <div class="col-sm-9 text-white-50">
+                    <textarea class="form-control form-text" id="summary">{{ user.profile.user_summary }}</textarea>
+                </div>
+              </div>
+            <hr>
+              <div class="row">
+                <div class="col-sm-3">
+                  <h6 class="mb-0">Location</h6>
+                </div>
+                <div class="col-sm-9 text-white-50">
+                    <input type="text" class="form-control" id="location" value="{{ user.profile.user_location }}">
+                </div>
+              </div>
+            <hr>
+                    <a href="#navbar" hx-post="{% url 'update_settings' %}" hx-include="[id='settings-form']" hx-target="#settings-status-div" class="btn btn-success">Update</a>
+
+            </div>
+          </div>
+        </div>
+        <div class="col-md-8">
+
+        <div id="settings-status-div" class="text-dark">
+
+        </div>
+
+          <div class="card bg-dark text-white mb-3">
+            <div class="card-body">
+                <div id="settings-form">
+
+                <div class="row">
+                <div class="col-sm-3">
+                  <h6 class="mb-0">Username</h6>
+                </div>
+                <div class="col-sm-9 text-white-50">
+                    <input type="text" class="form-control" name="username" id="username" value="{{ user.username }}">
+
+                </div>
+              </div>
+              <hr>
+              <div class="row">
+                <div class="col-sm-3">
+                  <h6 class="mb-0">Full Name</h6>
+                </div>
+                <div class="col-sm-9 text-white-50">
+                    <input type="text" class="form-control" id="fullname" value="{{ user.get_full_name }}" disabled>
+                </div>
+              </div>
+              <hr>
+              <div class="row">
+                <div class="col-sm-3">
+                  <h6 class="mb-0">Email</h6>
+                </div>
+                <div class="col-sm-9 text-white-50">
+                    <input type="email" class="form-control" id="email" aria-describedby="emailHelp" value="{{ user.email }}" disabled>
+                    <div id="emailHelp" class="form-text">This is the google account you logged in with.</div>                </div>
+                  </div>
+              <hr>
+
+              <div class="row">
+                <div class="col-sm-3">
+                  <h6 class="mb-0">Access Token</h6>
+                </div>
+                <div class="col-sm-9 text-white-50">
+                    {{ user.profile.access_token }}
+                </div>
+              </div>
+              <hr>
+              <div class="row">
+                <div class="col-sm-3">
+                  <h6 class="mb-0">Refresh Token</h6>
+                </div>
+                <div class="col-sm-9 text-white-50">
+                    {{ user.profile.refresh_token }}
+                </div>
+              </div>
+              <hr>
+            <div class="row">
+                <div class="col-sm-3">
+                  <h6 class="mb-0">Expires At</h6>
+                </div>
+                <div class="col-sm-9 text-white-50">
+                    {{ user.profile.expires_at }}
+                </div>
+              </div>
+              <hr>
+                <div class="row">
+                    <div class="col-sm-3">
+                        <h6 class="mb-0">Preferences</h6>
+                    </div>
+                    <div class="col-sm-9 text-white">
+                        <div class="mb-3 form-check form-switch">
+                        <input class="form-check-input" name="open search in new tab" type="checkbox" id="openSearchCheckDefault" {% if user.profile.open_search_new_tab %} checked {% endif %}>
+                        <label class="form-check-label" for="openSearchCheckDefault">Open Search in new tab</label>
+                        </div>
+
+                        <div class="mb-3 form-check form-switch">
+                        <input class="form-check-input" name="auto refresh playlists" type="checkbox" id="flexSwitchCheckDefault">
+                        <label class="form-check-label" for="flexSwitchCheckDefault">Automatically refresh playlists on visit</label>
+                        </div>
+
+                        <div class="mb-3 form-check form-switch">
+                        <input class="form-check-input" name="hide videos" type="checkbox" id="flexSwitchCheckChecked" checked>
+                        <label class="form-check-label" for="flexSwitchCheckChecked">Hide deleted/private videos</label>
+                        </div>
+
+
+                        <div class="mb-3 form-check form-switch">
+                        <input class="form-check-input" name="confirm before deleting" type="checkbox" id="flexSwitchCheckChecked" checked>
+                        <label class="form-check-label" for="flexSwitchCheckChecked">Confirm before deleting</label>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+
+
+              <div class="row">
+                <div class="col-sm-12">
+                    <a href="#navbar" hx-post="{% url 'update_settings' %}" hx-include="[id='settings-form']" hx-target="#settings-status-div" class="btn btn-success">Save</a>
+                    <a class="btn btn-outline-danger" href="{% url 'delete_account' %}">Delete account</a>
+
+                </div>
+              </div>
+
+            </div>
+          </div>
+
+
+
+        </div>
+      </div>
+
+    </div>
+</div>
+
+<!--
 <div class="container-fluid">
 
     <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
@@ -77,4 +256,6 @@
         </div>
 
 </div>
+
+-->
 {% endblock %}

apps/users/urls.py

@@ -4,6 +4,7 @@ from . import views
 
 urlpatterns = [
     path("", views.index, name='index'),
+    path("profile/", views.profile, name='profile'),
     path("logout/", views.log_out, name='log_out'),
     path("update/settings", views.update_settings, name='update_settings'),
     path('accounts/', include('allauth.urls')),

apps/users/views.py

@@ -19,12 +19,17 @@ def index(request):
         return redirect('home')
 
 
+@login_required
+def profile(request):
+    return render(request, 'profile.html')
+
+
 @require_POST
 def update_settings(request):
     print(request.POST)
     user = request.user
     username_input = request.POST['username'].strip()
-    message_content = "Saved! Refresh to see changes!"
+    message_content = "Saved!"
     message_type = "success"
     if username_input != user.username:
         if User.objects.filter(username__exact=username_input).count() != 0:
@@ -32,11 +37,18 @@ def update_settings(request):
             message_content = f"Username {request.POST['username'].strip()} already taken"
         else:
             user.username = request.POST['username'].strip()
-            user.save()
+            # user.save()
             message_content = f"Username updated to {username_input}!"
 
+    if 'open search in new tab' in request.POST:
+        user.profile.open_search_new_tab = True
+    else:
+        user.profile.open_search_new_tab = False
+
+    user.save()
+
     return HttpResponse(loader.get_template("intercooler/messages.html").render(
-        {"message_type": message_type, "message_content": message_content}))
+        {"message_type": message_type, "message_content": message_content, "refresh_page": True}))
 
 
 @login_required
@@ -179,7 +191,8 @@ def user_playlists_updates(request, action):
             playlists = []
         else:
             playlists = request.user.profile.playlists.filter(Q(is_user_owned=True) & Q(is_in_db=False))
-            print(f"New updates found! {playlists.count()} newly added and {len(deleted_playlist_ids)} playlists deleted!")
+            print(
+                f"New updates found! {playlists.count()} newly added and {len(deleted_playlist_ids)} playlists deleted!")
             print(deleted_playlist_names)
 
         return HttpResponse(loader.get_template('intercooler/user_playlist_updates.html').render(

templates/base.html

@@ -10,12 +10,33 @@
         <title>UnTube</title>
 
         <style type="text/css">
+
+            body {
+                background: linear-gradient(-45deg, #B2A3FF, #84bcf3, #AE876B, #B0E7AE);
+                //background: linear-gradient(-45deg, #0645a4, #2480cd, #84bcf3, #b7d6f7);
+                //background: linear-gradient(-45deg, #AE876B, #ABA27B, #A7BC8A, #A3D69A);
+                background-size: 400% 400%;
+                animation: gradient 10s ease infinite;
+                }
+
+            @keyframes gradient {
+                0% {
+                    background-position: 0% 50%;
+                }
+                50% {
+                    background-position: 100% 50%;
+                }
+                100% {
+                    background-position: 0% 50%;
+                }
+            }
+
+
             #btn-back-to-top {
               position: fixed;
               bottom: 20px;
               right: 20px;
               display: none;
-                z-index: 4;
             }
 
             .big-checkbox {width: 30px; height: 30px;}
@@ -29,7 +50,7 @@
 
     </head>
     <body class="bg-dark text-white"  style="font-family: 'Fredoka One',fantasy; filter: contrast(80%);">
-        <nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
+        <nav class="navbar navbar-expand-lg navbar-light" id="navbar">
             <div class="container-fluid">
                 <a class="navbar-brand" href="{% url 'home' %}"><h3>UnTube</h3></a>
                 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
@@ -73,10 +94,14 @@
                         <!--
                         <input class="form-control border border-secondary bg-dark text-white-50 me-lg-2 bg-dark mb-1" id="unTubeSearchBar" type="text" placeholder="Search UnTube">
                         -->
-                        <a class="nav-link btn-lg me-2" href="{% url 'search' %}" target="_blank">
+                        <a class="nav-link btn-lg me-1 mt-1" href="{% url 'search' %}" {% if user.profile.open_search_new_tab %}target="_blank"{% endif %}>
                             <i class="fas fa-search"></i>
                         </a>
 
+                        <a href="{% url 'profile' %}" class="mt-1">
+                        <img src="https://robohash.org/{{ user.username }}.png?set=set{{ user.profile.robohash_set }}" alt="{{ user.username }}" class="border border-3 border-primary rounded-circle me-2" width="42" height="42">
+                        </a>
+
                     </div>
                     <a class="btn btn-outline-danger" href="{% url 'log_out' %}">
                       Log out
@@ -85,15 +110,13 @@
             </div>
         </nav>
 
-        <div class="container-fluid">
+        <div class="container-fluid text-dark">
         <div class="row">
             <main class="ms-lg-auto px-lg-5">
     {% block content %}
     {% endblock %}
 
-
-
-        </main>
+            </main>
 
 
       </div>
@@ -102,13 +125,7 @@
     </div>
 
 
-        <button
-        type="button"
-        class="btn btn-danger btn-floating btn-lg"
-        id="btn-back-to-top"
-        >
-            ▲
-        </button>
+
 
         <br>
 
@@ -121,7 +138,9 @@
 
 
         <script type="application/javascript">
-
+            $(document).ready(function() {
+                $(".toast").toast('show');
+            });
             document.body.addEventListener('htmx:configRequest', (event) => {
             event.detail.headers['X-CSRFToken'] = '{{ csrf_token }}';
           })
@@ -225,8 +244,8 @@
 
             function scrollFunction() {
               if (
-                document.body.scrollTop > 550 ||
-                document.documentElement.scrollTop > 550
+                document.body.scrollTop > 150 ||
+                document.documentElement.scrollTop > 150
               ) {
                 mybutton.style.display = "block";
               } else {
@@ -249,5 +268,6 @@
         <script src="https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js" integrity="sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE" crossorigin="anonymous"></script>
         <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js" integrity="sha384-zNy6FEbO50N+Cg5wap8IKA4M/ZnLJgzc6w2NqACZaK0u0FXfOWRRJOnQtpZun8ha" crossorigin="anonymous"></script>
         -->
+
     </body>
 </html>