CityApper
/
UnTube
spegling av https://github.com/sleepytaco/UnTube


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
							{% load socialaccount %}
{% load static %}

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="keywords" content="youtube, playlists, videos, delete videos, delete playlists, delete multiple videos, move multiple videos, merge playlists, video manager, playlist manager, youtube playlists, untube, google">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="UnTube is a simple Youtube playlist manager. Modify and keep track of your YouTube playlists with ease.">
    <meta name="author" content="Mohammed Abu Bakar Khan">
    <title>UnTube - A Youtube Playlist Manager</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/carousel/">


      <link href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Open+Sans&display=swap" rel="stylesheet">
      <link href="{% static 'fontawesome-free-5.15.3-web/css/all.min.css' %}" rel="stylesheet">


    <!-- Bootstrap core CSS -->
    <link href="{% static 'bootstrap5.0.1/css/bootstrap.min.css' %}" rel="stylesheet">

    <style>

      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>

            <link href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Open+Sans&display=swap" rel="stylesheet">


    <!-- Custom styles for this template -->
    <link href="{% static 'css/carousel.css' %}" rel="stylesheet">
  </head>
  <body style="font-family: 'Fredoka One',serif; background-color: #FDF4DC;">


<main>


      <div class="container py-4">
            {% if messages %}
                {% for message in messages %}
                <div class="alert alert-dismissible bg-{% if message.tags == "error" %}danger{% else %}{{ message.tags }}{% endif %} text-white border-0 fade show" role="alert">
                    <strong>{{message|safe}}</strong>
                </div>
                {% endfor %}
            {% endif %}

    <div class="p-5 mb-4 bg-light rounded-3">
      <div class="container-fluid py-5">
        <h1 class="display-5 fw-bold">UnTube</h1>
        <p class="col-md-8 fs-4">A simple Youtube playlist manager to help you modify and keep track of your YouTube playlists with ease.</p>

          {% if user.is_authenticated %}
          <a class="btn btn-success btn-lg" href="{% url 'home' %}">Visit Dashboard</a>
          {% else %}
          <a class="btn btn-danger btn-lg" href="{% provider_login_url 'google' %}">Login with Google</a>
          {% endif %}
          <a class="btn btn-primary btn-lg" href="#more">Tell me more</a>
      </div>
    </div>

          <footer class="mastfoot mt-auto">
        <div class="d-flex justify-content-center text-dark">
            <h5>Made with <i class="fas fa-heart" style="color: #e25555;"></i> & <i class="fas fa-mug-hot" style="color: brown;"></i> by <a href="https://github.com/sleepytaco" target="_blank" style="text-decoration: none;"><span style="border-bottom: 3px #d56b6b dashed;">Mohammed Khan</span></a> </h5>
        </div>
      </footer>

      </div>

  <!-- Marketing messaging and featurettes
  ================================================== -->
  <!-- Wrap the rest of the page in another container to center all the content. -->

  <div class="container marketing">


    <!-- START THE FEATURETTES -->

    <hr class="featurette-divider" id="more">


    <div class="row featurette">
        <div class="col-md-7 order-md-2">
            <h1>UnTube automatically gets statistics for all your playlists when you first log in.</h1>
            <p class="lead">For all of your YouTube playlists, statistics like playlist duration, number of unavailable videos, or whether the playlist has any duplicate videos are automatically calculated.</p>
        </div>

        <div class="col-md-5 order-md-1">
            <div class="text-center">
                <img src="{% static 'assets/imgs/playlist_stats.gif' %}" class="rounded" style="max-width:100%; height: auto">
            </div>
        </div>
    </div>


    <hr class="featurette-divider">

    <div class="row featurette">
        <div class="col-md-7">
            <h1 class="">Ideal for people with a lot of playlists on YouTube.</h1>
            <p class="lead">UnTube offers features like bulk deletion as well as copying and moving videos from one playlist to multiple other playlists at once.</p>
        </div>
        <div class="col-md-5">
            <div class="text-center">
                <img src="{% static 'assets/imgs/features.gif' %}" class="rounded" style="max-width:100%; height: auto">
            </div>
        </div>
    </div>


    <hr class="featurette-divider">

      <div class="row featurette">
        <div class="col-md-7 order-md-2">
            <h1 class="">Organize and search for playlists and videos in your collection.</h1>
            <p class="lead">
                UnTube organizes your playlists into specific categories. Further, you can create your own categories by tagging playlists.
                Since UnTube stores a reference to all the videos in your playlists, you can easily search for the videos you want.
            </p>
        </div>

        <div class="col-md-5 order-md-1">
            <div class="text-center">
                <img src="{% static 'assets/imgs/organize.gif' %}" class="rounded" style="max-width:100%; height: auto">
            </div>
        </div>
    </div>


  <hr class="featurette-divider">

    <div class="row featurette">
      <div class="col-md-7">
        <h1 class="">Mark playlists as watching.</h1>
        <p class="lead">A small tool to keep track of the duration left for a playlist by letting you mark videos as watched.
            Might serve as a motivator to finish any kind of academic playlist <i class="far fa-smile-wink fa-lg"></i> </p>
      </div>
      <div class="col-md-5">
        <div class="text-center">
          <img src="{% static 'assets/imgs/watching.gif' %}" class="rounded" style="    max-width:100%; height: auto">
        </div>
      </div>
    </div>

    <hr class="featurette-divider">

      <div class="row featurette">
        <div class="col-md-7 order-md-2">
            <h1 class="">
            There's a public playlist you like?  Import them into your collection.</h1>
            <p class="lead">
            You can import playlists you do not own into your UnTube collection. All the features above would still apply to playlists you do not own.
            That means you can mark imported playlists as watching, tag them and also copy videos from imported playlists
            into your own playlists.
        </p>
        </div>

        <div class="col-md-5 order-md-1">
            <div class="text-center">
                <img src="{% static 'assets/imgs/import.gif' %}" class="rounded" style="max-width:100%; height: auto">
            </div>
        </div>
    </div>

          <hr class="featurette-divider">

      <div class="row featurette">
      <div class="col-md-7">
        <h1 class="">And lastly, a beautiful dashboard.</h1>
        <p class="lead">Get greeted by some beautiful charts, view your most popular tags, and see a progress list of playlist you've marked as watching. </p>
      </div>
      <div class="col-md-5">
        <div class="text-center">
          <img src="{% static 'assets/imgs/dashboard.gif' %}" class="rounded" style="    max-width:100%; height: auto">
        </div>
      </div>
    </div>

    <hr class="featurette-divider">


      <div class="row featurette justify-content-center">


        <div class="col-md d-flex flex-column justify-content-center">
<h1>
    Some more features:
</h1>
  <h3>
      <span style="border-bottom: 4px #c2d56b dashed;">take notes on videos</span>,
  </h3>
<h3>
      <span style="border-bottom: 4px #c2d56b dashed;">filter and sort playlists/videos</span>,
  </h3>
    <h3>
      <span style="border-bottom: 4px #c2d56b dashed;">auto-update your playlists with YouTube</span>,
  </h3>
    <h3>
      <span style="border-bottom: 4px #c2d56b dashed;">pin and like playlists/videos</span>,
  </h3>
    <h3>
      <span style="border-bottom: 4px #c2d56b dashed;">storing names of videos that go unavailable</span>
  </h3>
</div>
        <div class="col-md d-flex flex-column justify-content-center">
            <h1>About:</h1>
            <h3>
                This app was made possible because of the <a href="https://developers.google.com/youtube/v3/" target="_blank" style="text-decoration: none;"><span style="border-bottom: 4px #d56b80 dashed;">YouTube Data API</span></a>. By logging in with Google I get access to your
                public Google account information <i class="fa fa-plus"></i> the permission to modify your YouTube data. That means you can manage
                your private playlists on UnTube.
            </h3>
                </div>
    </div>

    <hr class="featurette-divider">


    <!-- /END THE FEATURETTES -->

  </div><!-- /.container -->


  <!-- FOOTER -->
  <footer class="container">
    <p class="float-end h4 text-dark"><a href="#" style="color: black"><i class="fas fa-angle-double-up fa-lg"></i></a></p>
      <p class="text-dark">
          <i class="far fa-copyright"></i> 2021–2022
          <a href="https://github.com/sleepytaco" target="_blank" style="text-decoration: none; color: black">
              Mohammed Khan
          </a>
          <!--
          <small><i class="fas fa-circle fa-sm"></i></small>
          Loved what I made?
          <a href="https://www.buymeacoffee.com/mohammedabkhan" style="text-decoration: none" target="_blank">
              <span style="border-bottom: 3px #d56b6b dashed;">You can support me by buying me some coffee <i class="far fa-smile"></i> </span>
          </a>
          -->
                    <small><i class="fas fa-circle fa-sm"></i></small>
        <a style="text-decoration: none; color: black" href="https://github.com/sleepytaco/UnTube" target="_blank"><i class="fab fa-github fa-lg" style="color: black;"></i></a>
          <small><i class="fas fa-circle fa-sm"></i></small>
          <a {% if request.session.liked_untube %}hx-post="{% url 'unlike_untube' %}"{% else %}hx-post="{% url 'like_untube' %}"{% endif %} hx-trigger="click" hx-swap="outerHTML" style="text-decoration: none; color: black">
            <i class="fas fa-heart" {% if request.session.liked_untube %}style="color: #d02e2e"{% endif %}></i> {{ likes }} likes {% if not request.session.liked_untube %}(click it){% endif %}
          </a>
                          <small><i class="fas fa-circle fa-sm"></i></small>

                <a href="#" style="text-decoration: none; color: black">
                <i class="fas fa-users"></i> {{ users_joined }} users joined
                    </a>

      </p>
  </footer>
</main>

    <script src="{% static 'htmx/htmx.min.js' %}" type="application/javascript"></script>
    <script src="{% static 'bootstrap5.0.1/js/bootstrap.bundle.min.js' %}" type="application/javascript"></script>

    <script type="application/javascript">
        // send csrf_token when htmx does a post request
        document.body.addEventListener('htmx:configRequest', (event) => {
            event.detail.headers['X-CSRFToken'] = '{{ csrf_token }}';
          })
    </script>
  </body>
</html>