redesigned index.html

apps/main/static/Skeleton-2.0.4/css/normalize.css

@@ -0,0 +1,427 @@
+/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+  font-family: sans-serif; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+  margin: 0;
+}
+
+/* HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11
+ * and Firefox.
+ * Correct `block` display not defined for `main` in IE 11.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+
+/**
+ * 1. Correct `inline-block` display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ */
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
+ */
+
+[hidden],
+template {
+  display: none;
+}
+
+/* Links
+   ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+ */
+
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+ */
+
+b,
+strong {
+  font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari and Chrome.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari, and Chrome.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+  background: #ff0;
+  color: #000;
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9/10.
+ */
+
+img {
+  border: 0;
+}
+
+/**
+ * Correct overflow not hidden in IE 9/10/11.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari.
+ */
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  height: 0;
+}
+
+/**
+ * Contain overflow in all browsers.
+ */
+
+pre {
+  overflow: auto;
+}
+
+/**
+ * Address odd `em`-unit font size rendering in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+
+/**
+ * 1. Correct color not being inherited.
+ *    Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit; /* 1 */
+  font: inherit; /* 2 */
+  margin: 0; /* 3 */
+}
+
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
+
+button {
+  overflow: visible;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
+
+button,
+select {
+  text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+  cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+input {
+  line-height: normal;
+}
+
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box; /* 2 */
+  box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+  border: 0; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Remove default vertical scrollbar in IE 8/9/10/11.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
+
+optgroup {
+  font-weight: bold;
+}
+
+/* Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}

apps/main/static/Skeleton-2.0.4/css/skeleton.css

@@ -0,0 +1,418 @@
+/*
+* Skeleton V2.0.4
+* Copyright 2014, Dave Gamache
+* www.getskeleton.com
+* Free to use under the MIT license.
+* http://www.opensource.org/licenses/mit-license.php
+* 12/29/2014
+*/
+
+
+/* Table of contents
+––––––––––––––––––––––––––––––––––––––––––––––––––
+- Grid
+- Base Styles
+- Typography
+- Links
+- Buttons
+- Forms
+- Lists
+- Code
+- Tables
+- Spacing
+- Utilities
+- Clearing
+- Media Queries
+*/
+
+
+/* Grid
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.container {
+  position: relative;
+  width: 100%;
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 0 20px;
+  box-sizing: border-box; }
+.column,
+.columns {
+  width: 100%;
+  float: left;
+  box-sizing: border-box; }
+
+/* For devices larger than 400px */
+@media (min-width: 400px) {
+  .container {
+    width: 85%;
+    padding: 0; }
+}
+
+/* For devices larger than 550px */
+@media (min-width: 550px) {
+  .container {
+    width: 80%; }
+  .column,
+  .columns {
+    margin-left: 4%; }
+  .column:first-child,
+  .columns:first-child {
+    margin-left: 0; }
+
+  .one.column,
+  .one.columns                    { width: 4.66666666667%; }
+  .two.columns                    { width: 13.3333333333%; }
+  .three.columns                  { width: 22%;            }
+  .four.columns                   { width: 30.6666666667%; }
+  .five.columns                   { width: 39.3333333333%; }
+  .six.columns                    { width: 48%;            }
+  .seven.columns                  { width: 56.6666666667%; }
+  .eight.columns                  { width: 65.3333333333%; }
+  .nine.columns                   { width: 74.0%;          }
+  .ten.columns                    { width: 82.6666666667%; }
+  .eleven.columns                 { width: 91.3333333333%; }
+  .twelve.columns                 { width: 100%; margin-left: 0; }
+
+  .one-third.column               { width: 30.6666666667%; }
+  .two-thirds.column              { width: 65.3333333333%; }
+
+  .one-half.column                { width: 48%; }
+
+  /* Offsets */
+  .offset-by-one.column,
+  .offset-by-one.columns          { margin-left: 8.66666666667%; }
+  .offset-by-two.column,
+  .offset-by-two.columns          { margin-left: 17.3333333333%; }
+  .offset-by-three.column,
+  .offset-by-three.columns        { margin-left: 26%;            }
+  .offset-by-four.column,
+  .offset-by-four.columns         { margin-left: 34.6666666667%; }
+  .offset-by-five.column,
+  .offset-by-five.columns         { margin-left: 43.3333333333%; }
+  .offset-by-six.column,
+  .offset-by-six.columns          { margin-left: 52%;            }
+  .offset-by-seven.column,
+  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
+  .offset-by-eight.column,
+  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
+  .offset-by-nine.column,
+  .offset-by-nine.columns         { margin-left: 78.0%;          }
+  .offset-by-ten.column,
+  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
+  .offset-by-eleven.column,
+  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }
+
+  .offset-by-one-third.column,
+  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
+  .offset-by-two-thirds.column,
+  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }
+
+  .offset-by-one-half.column,
+  .offset-by-one-half.columns     { margin-left: 52%; }
+
+}
+
+
+/* Base Styles
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+/* NOTE
+html is set to 62.5% so that all the REM measurements throughout Skeleton
+are based on 10px sizing. So basically 1.5rem = 15px :) */
+html {
+  font-size: 62.5%; }
+body {
+  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
+  line-height: 1.6;
+  font-weight: 400;
+  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: #222; }
+
+
+/* Typography
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: 2rem;
+  font-weight: 300; }
+h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
+h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
+h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
+h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
+h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
+h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }
+
+/* Larger than phablet */
+@media (min-width: 550px) {
+  h1 { font-size: 5.0rem; }
+  h2 { font-size: 4.2rem; }
+  h3 { font-size: 3.6rem; }
+  h4 { font-size: 3.0rem; }
+  h5 { font-size: 2.4rem; }
+  h6 { font-size: 1.5rem; }
+}
+
+p {
+  margin-top: 0; }
+
+
+/* Links
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+a {
+  color: #1EAEDB; }
+a:hover {
+  color: #0FA0CE; }
+
+
+/* Buttons
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.button,
+button,
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+  display: inline-block;
+  height: 38px;
+  padding: 0 30px;
+  color: #555;
+  text-align: center;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 38px;
+  letter-spacing: .1rem;
+  text-transform: uppercase;
+  text-decoration: none;
+  white-space: nowrap;
+  background-color: transparent;
+  border-radius: 4px;
+  border: 1px solid #bbb;
+  cursor: pointer;
+  box-sizing: border-box; }
+.button:hover,
+button:hover,
+input[type="submit"]:hover,
+input[type="reset"]:hover,
+input[type="button"]:hover,
+.button:focus,
+button:focus,
+input[type="submit"]:focus,
+input[type="reset"]:focus,
+input[type="button"]:focus {
+  color: #333;
+  border-color: #888;
+  outline: 0; }
+.button.button-primary,
+button.button-primary,
+input[type="submit"].button-primary,
+input[type="reset"].button-primary,
+input[type="button"].button-primary {
+  color: #FFF;
+  background-color: #33C3F0;
+  border-color: #33C3F0; }
+.button.button-primary:hover,
+button.button-primary:hover,
+input[type="submit"].button-primary:hover,
+input[type="reset"].button-primary:hover,
+input[type="button"].button-primary:hover,
+.button.button-primary:focus,
+button.button-primary:focus,
+input[type="submit"].button-primary:focus,
+input[type="reset"].button-primary:focus,
+input[type="button"].button-primary:focus {
+  color: #FFF;
+  background-color: #1EAEDB;
+  border-color: #1EAEDB; }
+
+
+/* Forms
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+input[type="email"],
+input[type="number"],
+input[type="search"],
+input[type="text"],
+input[type="tel"],
+input[type="url"],
+input[type="password"],
+textarea,
+select {
+  height: 38px;
+  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
+  background-color: #fff;
+  border: 1px solid #D1D1D1;
+  border-radius: 4px;
+  box-shadow: none;
+  box-sizing: border-box; }
+/* Removes awkward default styles on some inputs for iOS */
+input[type="email"],
+input[type="number"],
+input[type="search"],
+input[type="text"],
+input[type="tel"],
+input[type="url"],
+input[type="password"],
+textarea {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none; }
+textarea {
+  min-height: 65px;
+  padding-top: 6px;
+  padding-bottom: 6px; }
+input[type="email"]:focus,
+input[type="number"]:focus,
+input[type="search"]:focus,
+input[type="text"]:focus,
+input[type="tel"]:focus,
+input[type="url"]:focus,
+input[type="password"]:focus,
+textarea:focus,
+select:focus {
+  border: 1px solid #33C3F0;
+  outline: 0; }
+label,
+legend {
+  display: block;
+  margin-bottom: .5rem;
+  font-weight: 600; }
+fieldset {
+  padding: 0;
+  border-width: 0; }
+input[type="checkbox"],
+input[type="radio"] {
+  display: inline; }
+label > .label-body {
+  display: inline-block;
+  margin-left: .5rem;
+  font-weight: normal; }
+
+
+/* Lists
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+ul {
+  list-style: circle inside; }
+ol {
+  list-style: decimal inside; }
+ol, ul {
+  padding-left: 0;
+  margin-top: 0; }
+ul ul,
+ul ol,
+ol ol,
+ol ul {
+  margin: 1.5rem 0 1.5rem 3rem;
+  font-size: 90%; }
+li {
+  margin-bottom: 1rem; }
+
+
+/* Code
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+code {
+  padding: .2rem .5rem;
+  margin: 0 .2rem;
+  font-size: 90%;
+  white-space: nowrap;
+  background: #F1F1F1;
+  border: 1px solid #E1E1E1;
+  border-radius: 4px; }
+pre > code {
+  display: block;
+  padding: 1rem 1.5rem;
+  white-space: pre; }
+
+
+/* Tables
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+th,
+td {
+  padding: 12px 15px;
+  text-align: left;
+  border-bottom: 1px solid #E1E1E1; }
+th:first-child,
+td:first-child {
+  padding-left: 0; }
+th:last-child,
+td:last-child {
+  padding-right: 0; }
+
+
+/* Spacing
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+button,
+.button {
+  margin-bottom: 1rem; }
+input,
+textarea,
+select,
+fieldset {
+  margin-bottom: 1.5rem; }
+pre,
+blockquote,
+dl,
+figure,
+table,
+p,
+ul,
+ol,
+form {
+  margin-bottom: 2.5rem; }
+
+
+/* Utilities
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.u-full-width {
+  width: 100%;
+  box-sizing: border-box; }
+.u-max-full-width {
+  max-width: 100%;
+  box-sizing: border-box; }
+.u-pull-right {
+  float: right; }
+.u-pull-left {
+  float: left; }
+
+
+/* Misc
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+hr {
+  margin-top: 3rem;
+  margin-bottom: 3.5rem;
+  border-width: 0;
+  border-top: 1px solid #E1E1E1; }
+
+
+/* Clearing
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
+/* Self Clearing Goodness */
+.container:after,
+.row:after,
+.u-cf {
+  content: "";
+  display: table;
+  clear: both; }
+
+
+/* Media Queries
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+/*
+Note: The best way to structure the use of media queries is to create the queries
+near the relevant code. For example, if you wanted to change the styles for buttons
+on small devices, paste the mobile query code up in the buttons section and style it
+there.
+*/
+
+
+/* Larger than mobile */
+@media (min-width: 400px) {}
+
+/* Larger than phablet (also point when grid becomes active) */
+@media (min-width: 550px) {}
+
+/* Larger than tablet */
+@media (min-width: 750px) {}
+
+/* Larger than desktop */
+@media (min-width: 1000px) {}
+
+/* Larger than Desktop HD */
+@media (min-width: 1200px) {}

apps/main/static/css/carousel.css

@@ -0,0 +1,93 @@
+/* GLOBAL STYLES
+-------------------------------------------------- */
+/* Padding below the footer and lighter body text */
+
+body {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+  color: #5a5a5a;
+}
+
+
+/* CUSTOMIZE THE CAROUSEL
+-------------------------------------------------- */
+
+/* Carousel base class */
+.carousel {
+  margin-bottom: 4rem;
+}
+/* Since positioning the image, we need to help out the caption */
+.carousel-caption {
+  bottom: 3rem;
+  z-index: 10;
+}
+
+/* Declare heights because of positioning of img element */
+.carousel-item {
+  height: 32rem;
+}
+.carousel-item > img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  min-width: 100%;
+  height: 32rem;
+}
+
+
+/* MARKETING CONTENT
+-------------------------------------------------- */
+
+/* Center align the text within the three columns below the carousel */
+.marketing .col-lg-4 {
+  margin-bottom: 1.5rem;
+  text-align: center;
+}
+.marketing h2 {
+  font-weight: 400;
+}
+/* rtl:begin:ignore */
+.marketing .col-lg-4 p {
+  margin-right: .75rem;
+  margin-left: .75rem;
+}
+/* rtl:end:ignore */
+
+
+/* Featurettes
+------------------------- */
+
+.featurette-divider {
+  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
+}
+
+/* Thin out the marketing headings */
+.featurette-heading {
+  font-weight: 300;
+  line-height: 1;
+  /* rtl:remove */
+  letter-spacing: -.05rem;
+}
+
+
+/* RESPONSIVE CSS
+-------------------------------------------------- */
+
+@media (min-width: 40em) {
+  /* Bump up size of carousel content */
+  .carousel-caption p {
+    margin-bottom: 1.25rem;
+    font-size: 1.25rem;
+    line-height: 1.4;
+  }
+
+  .featurette-heading {
+    font-size: 50px;
+  }
+}
+
+@media (min-width: 62em) {
+  .featurette-heading {
+    margin-top: 7rem;
+  }
+}

apps/main/templates/home.html

@@ -115,7 +115,7 @@
                 <div class="col">
                     <div class="row">
                         <div class="col">
-                            <div class="card" style="background: linear-gradient(-45deg, #aaae6b, #7b8eab, #bc8a9a, #d69aa1); background-size: 400% 400%; animation: gradient 7s ease infinite;">
+                            <div class="card" style="background: linear-gradient(-45deg, #aaae6b, #7b8eab, #8abc97, #e666f5); background-size: 400% 400%; animation: gradient 7s ease infinite;">
                                 <a href="#" class="list-group-item bg-transparent list-group-item-action" aria-current="true">
                                     <div class="card-body">
                                         <div class="d-flex justify-content-center h1">

apps/main/templates/intercooler/manage_playlists_import_results.html

@@ -1,5 +1,5 @@
 {% if new_playlists %}
-<h4 class="text-white align-content-center">Successfully imported the following {{ num_playlists_initialized_in_db }} playlists into your collection:</h4>
+<h4 class="text-dark align-content-center">Successfully imported the following {{ num_playlists_initialized_in_db }} playlists into your collection:</h4>
 <div class="row row-cols-1 row-cols-md-3 g-4">
     {% for playlist in new_playlists %}
     <div class="col">

apps/main/templates/manage_playlists_import.html

@@ -25,7 +25,7 @@
           <button type="button" hx-post="{% url 'manage_import_playlists' %}" hx-include="[id='import-playlists-from']" hx-target="#import-playlists-results" hx-indicator="#spinner" class="btn btn-success">Import!</button>
 
             <div id="spinner" class="htmx-indicator ms-3 mt-2">
-                <div class="spinner-border text-light" role="status">
+                <div class="spinner-border" role="status">
                 </div>
             </div>
       </div>

apps/main/templates/view_playlist.html

@@ -463,7 +463,7 @@
                     <i class="far fa-copy" aria-hidden="true"></i>
                 </button>
                 <button class="btn btn-sm  btn-primary mb-1" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasBottom" hx-get="{% url 'video_details' playlist.playlist_id video.video_id %}" hx-trigger="click" hx-target="#video-details"><i class="fas fa-info"></i></button>
-                <button class="btn btn-sm  btn-warning mb-1" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasForVideoNotes" aria-controls="offcanvasBottom" hx-get="{% url 'video_notes' playlist.playlist_id video.video_id %}" hx-trigger="click" hx-target="#video-notes">Notes</button>
+                <!-- <button class="btn btn-sm  btn-warning mb-1" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasForVideoNotes" aria-controls="offcanvasBottom" hx-get="{% url 'video_notes' playlist.playlist_id video.video_id %}" hx-trigger="click" hx-target="#video-notes">Notes</button> -->
                 <button class="btn btn-sm btn-dark mb-1" type="button" hx-get="{% url 'mark_video_favorite' playlist.playlist_id video.video_id %}" hx-target="#video-{{ forloop.counter }}-fav">
                     <div id="video-{{ forloop.counter }}-fav">
                         {% if video.is_favorite %}

apps/main/util.py

@@ -12,7 +12,7 @@ def getHumanizedTimeString(seconds):
         datetime.timedelta(seconds=seconds)).upper(). \
         replace(" month".upper(), "m.").replace(" months".upper(), "m.").replace(" days".upper(), "d.").replace(
         " day".upper(), "d.").replace(" hours".upper(), "hrs.").replace(" hour".upper(), "hr.").replace(
-        " minutes".upper(), "mins.").replace(
+        " minutes".upper(), "mins.").replace(" minute".upper(), "min.").replace(
         "and".upper(), "").replace(" seconds".upper(), "secs.").replace(" second".upper(), "sec.").replace(",", "")
 
 

apps/users/migrations/0009_untube.py

@@ -0,0 +1,20 @@
+# Generated by Django 3.2.3 on 2021-07-14 01:25
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('users', '0008_auto_20210712_1246'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Untube',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('page_likes', models.IntegerField(default=0)),
+            ],
+        ),
+    ]

apps/users/models.py

@@ -13,6 +13,10 @@ class ProfileManager(models.Manager):
         pass
 
 
+class Untube(models.Model):
+    page_likes = models.IntegerField(default=0)
+
+
 # extension of the built in User model made by Django
 class Profile(models.Model):
     user = models.OneToOneField(User, on_delete=models.CASCADE)
@@ -36,7 +40,8 @@ class Profile(models.Model):
     objects = ProfileManager()
     show_import_page = models.BooleanField(default=True)  # shows the user tips for a week
     yt_channel_id = models.CharField(max_length=420, default='')
-    import_in_progress = models.BooleanField(default=False)  # if True, will not let the user access main site until they import their YT playlists
+    import_in_progress = models.BooleanField(
+        default=False)  # if True, will not let the user access main site until they import their YT playlists
     imported_yt_playlists = models.BooleanField(default=False)  # True if user imported all their YT playlists
 
     # google api token details
@@ -55,7 +60,6 @@ class Profile(models.Model):
     create_playlist_add_vids_from_links = models.CharField(max_length=50, default="")
 
 
-
 # as soon as one User object is created, create an associated profile object
 @receiver(post_save, sender=User)
 def create_user_profile(sender, instance, created, **kwargs):

apps/users/templates/index.html

@@ -1,13 +1,9 @@
-{% load crispy_forms_tags %}
 {% load socialaccount %}
 {% load static %}
 
 <!doctype html>
 <html lang="en">
   <head>
-    <!-- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes"> -->
-    <link rel="icon" href="{% static 'fontawesome-free-5.15.3-web/svgs/solid/underline.svg' %}">
-
     <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">
@@ -15,76 +11,246 @@
     <meta name="author" content="Mohammed Abu Bakar Khan">
     <title>UnTube - A Youtube Playlist Manager</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%;
-                }
-            }
-
-      </style>
+    <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">
+      <link href="{% static 'fontawesome-free-5.15.3-web/css/all.min.css' %}" rel="stylesheet">
+
 
     <!-- Bootstrap core CSS -->
-    <link href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="{% static 'bootstrap5.0.1/css/bootstrap.min.css' %}" rel="stylesheet">
 
-    <!-- Custom styles for this template -->
-    <link href="https://getbootstrap.com/docs/4.0/examples/cover/cover.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'">
-
-    <div class="cover-container d-flex h-100 p-3 mx-auto flex-column text-center">
-      <header class="masthead mb-auto">
-          {% for message in messages %}
-                  <div class="alert alert-success alert-success fade show" role="alert">
-                      {{ message }}
-                      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-                  </div>
-          {% endfor %}
-
-      </header>
-
-      <main role="main" class="inner cover">
-        <h1 class="cover-heading">UnTube</h1>
-        <p class="lead">UnTube is a simple Youtube playlist manager. Modify and keep track of your YouTube playlists with ease.</p>
-        <p class="lead">
-            <br>
-            <a class="btn btn-danger" href="{% provider_login_url 'google' %}">Login with Google</a>
+  <body style="font-family: 'Fredoka One',serif; background-color: #FDF4DC;">
+
+
+<main>
+
+
+      <div class="container py-4">
 
-        </p>
-      </main>
 
-      <footer class="mastfoot mt-auto">
-        <div class="inner text-white">
-          <h5>Made with <i class="fas fa-heart" style="color: #e25555;"></i> & <i class="fas fa-mug-hot" style="color: brown;"></i> in Django</h5>
+    <div class="p-5 mb-4 bg-light rounded-3">
+      <div class="container-fluid py-5">
+        <h1 class="display-5 fw-bold">UnTube: A YouTube Playlist Manager</h1>
+        <p class="col-md-8 fs-4">UnTube is a simple Youtube playlist manager to help you modify and keep track of your YouTube playlists with ease.</p>
+
+          <a class="btn btn-danger btn-lg" href="{% provider_login_url 'google' %}">Login with Google</a>
+          <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 every playlist.</h1>
+            <p class="lead">For every playlist, statistics like playlist duration, number of unavailable videos, or whether the playlist has any duplicate videos are automatically generated.</p>
+        </div>
+
+        <div class="col-md-5 order-md-1">
+            <div class="text-center">
+                <img src="{% static 'assets/imgs/playlist_stats.PNG' %}" 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>
 
-<!-- Bootstrap core JavaScript
-    ================================================== -->
-    <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
-    <script src="https://getbootstrap.com/docs/4.0/assets/js/vendor/popper.min.js"></script>
-    <script src="https://getbootstrap.com/docs/4.0/dist/js/bootstrap.min.js"></script>
 
+    <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="">
+            And lastly, you can import playlists you do not own into your collection.</h1>
+            <p class="lead">
+            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 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;">merging multiple playlists into one</span>,
+  </h3>
+<h3>
+      <span style="border-bottom: 4px #c2d56b dashed;">deleting multiple playlists at once</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>
+        <i class="fab fa-github fa-lg" style="color: black;"></i>
+          <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>
+</html>

apps/users/urls.py

@@ -4,6 +4,9 @@ from . import views
 
 urlpatterns = [
     path("", views.index, name='index'),
+    path("like-untube/", views.like_untube, name="like_untube"),
+    path("unlike-untube/", views.unlike_untube, name="unlike_untube"),
+
     path("profile/", views.profile, name='profile'),
     path("logout/", views.log_out, name='log_out'),
     path("update/settings", views.update_settings, name='update_settings'),

apps/users/views.py

@@ -8,13 +8,23 @@ from django.http import HttpResponse
 from django.contrib.auth.models import User
 from django.contrib import messages
 from apps.main.models import Playlist
+from .models import Untube
 from django.template import loader
 
 
 # Create your views here.
 def index(request):
+    if Untube.objects.all().count() == 0:
+        untube = Untube.objects.create()
+        untube.save()
+
+    if not request.session.exists(request.session.session_key):
+        request.session.create()
+        request.session['liked_untube'] = False
+
     if request.user.is_anonymous:
-        return render(request, 'index.html')
+        return render(request, 'index.html', {"likes": Untube.objects.all().first().page_likes,
+                                              "users_joined": User.objects.all().count()})
     else:
         return redirect('home')
 
@@ -276,3 +286,35 @@ def user_playlists_updates(request, action):
             <button type="button" class="btn-close" data-bs-dismiss="alert" aria-la bel="Close"></button>
         </div>
         """)
+
+
+### FOR INDEX.HTML
+@require_POST
+def like_untube(request):
+    untube = Untube.objects.all().first()
+    untube.page_likes += 1
+    untube.save()
+
+    request.session['liked_untube'] = True
+    request.session.save()
+
+    return HttpResponse(f"""
+            <a hx-post="/unlike-untube/" hx-swap="outerHTML" style="text-decoration: none; color: black">
+            <i class="fas fa-heart" style="color: #d02e2e"></i> {untube.page_likes} likes (p.s glad you liked it!)
+          </a>
+    """)
+
+@require_POST
+def unlike_untube(request):
+    untube = Untube.objects.all().first()
+    untube.page_likes -= 1
+    untube.save()
+
+    request.session['liked_untube'] = False
+    request.session.save()
+
+    return HttpResponse(f"""
+                <a hx-post="/like-untube/" hx-swap="outerHTML" style="text-decoration: none; color: black">
+                <i class="fas fa-heart"></i> {untube.page_likes} likes (p.s :/)
+              </a>
+        """)

templates/base.html

@@ -16,14 +16,15 @@
             html {
                 scroll-behavior: smooth;
             }
+
             body {
                 margin: 0;
-                background: linear-gradient(-45deg, #e2b968, #68af5b, #8a97bc, #d69ab2);
+                //background: linear-gradient(-45deg, #e2b968, #68af5b, #8a97bc, #d69ab2);
                 //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;
+                //background-size: 400% 400%;
+                //animation: gradient 10s ease infinite;
                 }
 
             @keyframes gradient {
@@ -107,7 +108,7 @@
         <script src="https://cdn.jsdelivr.net/gh/bbbootstrap/libraries@main/choices.min.js"></script>
         <script src="{% static 'htmx/extensions/class-tools.js' %}" type="application/javascript"></script>
     </head>
-    <body class="text-dark" style="font-family: 'Fredoka One', monospace; filter: contrast(80%);">
+    <body class="text-dark" style="font-family: 'Fredoka One', monospace; background-color: #FDF4DC;">
 
 
         {% if user.profile.show_import_page %}
@@ -174,7 +175,7 @@
                                 <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" width="42" height="42">
                             </a>
                             <ul class="dropdown-menu dropdown-menu-lg-end" aria-labelledby="quickViewDropdown" style="z-index: 1021;">
-                                <li class="dropdown-item overflow-auto">Welcome, <span style="border-bottom: 3px #020000 dashed;">{{ user.username }}</span></li>
+                                <li class="dropdown-item overflow-auto">Logged in as <span style="border-bottom: 3px #020000 dashed;">{{ user.username }}</span></li>
                                 <li><a class="dropdown-item" href="{% url 'profile' %}">Profile</a></li>
                                 <li><a class="dropdown-item" href="{% url 'settings' %}">Settings</a></li>