Skip to content

2
21_22-J-02
Commit 4fb74d9d authored by Wanigasinghe N.T. | IT18229912's avatar Wanigasinghe N.T. | IT18229912
Browse files
Options

Merge branch 'feat/it18229912' into 'develop' 

Feat/it18229912

See merge request !38
parents b6b38448 d59ae673
Hide whitespace changes
Inline Side-by-side
Showing with 5175 additions and 516 deletions
Presently/presently/users/audioemotiontest.py
View file @ 4fb74d9d
......@@ -18,18 +18,9 @@ import time
from os import path
from pydub import AudioSegment
#convert video files to .wav format
# src = input("In: ")
# dst = input("Out: ")
# src = input("F:\\CDAP-PRESENTLY\\21_22-j-02\\Presently\\presently\\users\\media\\video\\22")
# dst = input("F:\\CDAP-PRESENTLY\\21_22-j-02\\Presently\\presently\\users\\media\\audio")
# sound = AudioSegment.from_mp3(src)
# sound.export(dst, format="wav")
saved_model_path = "F:\\CDAP-PRESENTLY\\21_22-j-02\\Presently\\presently\\users\\models\\model8723.json"
saved_weights_path = "F:\\CDAP-PRESENTLY\\21_22-j-02\\Presently\\presently\\users\\models\\model8723_weights.h5"
audio_file = "F:\\CDAP-PRESENTLY\\21_22-j-02\\Presently\\presently\\media\\audio\\fearful.wav"
audio_file = "F:\\CDAP-PRESENTLY\\21_22-j-02\\Presently\\presently\\media\\audio\\publicspeech.wav"
with open(saved_model_path, 'r') as json_file:
json_savedModel = json_file.read()
......@@ -126,6 +117,7 @@ fig = plt.figure(figsize = (10, 2))
plt.bar(emo_list, pred_np, color = 'darkturquoise')
plt.ylabel("Probabilty (%)")
plt.show()
print(emo_list, pred_np)
max_emo = np.argmax(predictions)
print('max emotion:', emotions.get(max_emo,-1))
......@@ -145,5 +137,6 @@ plt.bar(emo_list, total_predictions_np, color = 'indigo')
plt.ylabel("Mean probabilty (%)")
plt.title("Session Summary")
plt.show()
print(emo_list, total_predictions)
print(f"Emotions analyzed for: {(toc - tic):0.4f} seconds")
Presently/presently/users/static/users/assets/css/main.css 0 → 100644
View file @ 4fb74d9d
body {
font-family: 'Arial', sans-serif;
background-image: url('gridme.png');
}
h1 {
text-align: center;
text-shadow: 0px 1px 3px black;
font-size: 80px;
}
p
{
text-shadow: 0px 1px 3px #999999;
}
div
{
font-size: 25px;
text-shadow: 0px 1px 3px #999999;
}
.colorResults {
width: 100px;
height: 100px;
float: left;
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
color: #ffffff;
text-shadow: 1px 1px 1px black;
}
.thumb {
height: 250px;
/*border: 1px solid #000;*/
margin: 10px 10px 10px 10px;
-moz-box-shadow: 0px 2px 8px 0px #555;
-webkit-box-shadow: 0px 2px 8px 0px #555;
box-shadow: 0px 2px 8px 0px #555;
}
.swatch
{
width: 50px;
height: 50px;
float: left;
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
color: #ffffff;
text-shadow: 1px 1px 1px black;
border: 1px solid #999999;
}
#scheme
{
display: none;
width: 400px;
}
Presently/presently/users/static/users/assets/css/scss/styles.scss 0 → 100644
View file @ 4fb74d9d
// The files that compile
@import 'abstracts/index';
@import 'base/index';
@import 'layout/index';
@import 'components/index';
Presently/presently/users/static/users/assets/css/styles.css 0 → 100644
View file @ 4fb74d9d
@import url("https://fonts.googleapis.com/css?family=Playfair+Display:400,400i|Source+Sans+Pro:300,500,700&display=swap");
*,
*::before,
*::after {
box-sizing: border-box; }
body,
h1,
h2,
h3,
h4,
p,
li,
figure,
figcaption,
blockquote,
dl,
dd {
margin: 0; }
body {
min-height: 100vh;
scroll-behavior: smooth;
text-rendering: optimizeSpeed;
font-family: "Source Sans Pro", "Healvetica Neue", sans-serif;
font-size: 100%;
font-weight: 300;
line-height: 1.5;
color: #aaa2a2;
text-align: left;
background-color: #0f0e0e; }
@media (max-width: 38.75em) {
body {
text-rendering: optimizeLegibility; } }
.list-unstyled {
margin: 0; }
a:not([class]) {
text-decoration-skip-ink: auto; }
img {
max-width: 100%;
display: block; }
.rhythm > * + * {
margin-top: 1.5rem; }
input,
button,
textarea,
select {
font: inherit; }
a {
color: #70BDC1;
text-decoration: underline;
-webkit-text-decoration-skip: objects;
transition: all 250ms ease; }
a:hover, a:focus {
color: #f8f2f2;
text-decoration: none; }
a:not([href]):not([tabindex]) {
color: inherit;
text-decoration: none; }
a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
color: inherit;
text-decoration: none;
outline: 0; }
[tabindex="-1"]:focus {
outline: 0 !important; }
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important; } }
pre {
line-height: 1.8;
padding: 1.5rem 1rem;
margin-bottom: 1.375rem; }
hr {
border: 0;
color: transparent;
height: 0px;
margin: 0;
padding: 0; }
img {
height: auto;
max-width: 100%; }
video {
height: auto;
max-width: 100%;
width: 100%; }
iframe {
max-width: 100%;
width: 100%; }
b,
strong,
th,
dt {
font-weight: 700;
letter-spacing: 0.03125em; }
.display-1 {
font-size: 2.3125rem;
line-height: 1.105;
margin-top: 2rem;
margin-bottom: 1rem; }
@media (min-width: 2.421875rem) {
.display-1 {
font-size: calc(2.3125rem + (5.75 - 2.3125) * ((100vw - 2.421875rem) / 2.265625)); } }
@media (min-width: 4.6875rem) {
.display-1 {
font-size: 5.75rem; } }
.display-2 {
font-size: 2.0625rem;
line-height: 1;
margin-top: 1.625rem;
margin-bottom: 1.5rem; }
@media (min-width: 2.421875rem) {
.display-2 {
font-size: calc(2.0625rem + (4.75 - 2.0625) * ((100vw - 2.421875rem) / 2.265625)); } }
@media (min-width: 4.6875rem) {
.display-2 {
font-size: 4.75rem; } }
.display-3 {
font-size: 1.875rem;
line-height: 1.1875;
margin-top: 2rem;
margin-bottom: 1.25rem; }
@media (min-width: 2.421875rem) {
.display-3 {
font-size: calc(1.875rem + (3.9375 - 1.875) * ((100vw - 2.421875rem) / 2.265625)); } }
@media (min-width: 4.6875rem) {
.display-3 {
font-size: 3.9375rem; } }
.display-4 {
font-size: 1.6875rem;
line-height: 1.375;
margin-top: -0.5rem;
margin-bottom: 0.875rem; }
@media (min-width: 2.421875rem) {
.display-4 {
font-size: calc(1.6875rem + (3.25 - 1.6875) * ((100vw - 2.421875rem) / 2.265625)); } }
@media (min-width: 4.6875rem) {
.display-4 {
font-size: 3.25rem; } }
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
font-family: "Playfair Display", serif;
font-weight: normal; }
h1,
.h1 {
font-size: 1.5rem; }
@media (min-width: 2.421875rem) {
h1,
.h1 {
font-size: calc(1.5rem + (2.6875 - 1.5) * ((100vw - 2.421875rem) / 2.265625)); } }
@media (min-width: 4.6875rem) {
h1,
.h1 {
font-size: 2.6875rem; } }
h2,
.h2 {
font-size: 1.375rem; }
@media (min-width: 2.421875rem) {
h2,
.h2 {
font-size: calc(1.375rem + (2.25 - 1.375) * ((100vw - 2.421875rem) / 2.265625)); } }
@media (min-width: 4.6875rem) {
h2,
.h2 {
font-size: 2.25rem; } }
h3,
.h3 {
font-size: 1.25rem; }
@media (min-width: 2.421875rem) {
h3,
.h3 {
font-size: calc(1.25rem + (1.875 - 1.25) * ((100vw - 2.421875rem) / 2.265625)); } }
@media (min-width: 4.6875rem) {
h3,
.h3 {
font-size: 1.875rem; } }
h4,
.h4 {
font-size: 1.125rem; }
@media (min-width: 2.421875rem) {
h4,
.h4 {
font-size: calc(1.125rem + (1.5625 - 1.125) * ((100vw - 2.421875rem) / 2.265625)); } }
@media (min-width: 4.6875rem) {
h4,
.h4 {
font-size: 1.5625rem; } }
h5,
.h5 {
font-size: 1rem;
font-weight: 700; }
@media (min-width: 2.421875rem) {
h5,
.h5 {
font-size: calc(1rem + (1.3125 - 1) * ((100vw - 2.421875rem) / 2.265625)); } }
@media (min-width: 4.6875rem) {
h5,
.h5 {
font-size: 1.3125rem; } }
h6,
.h6 {
font-size: 0.9375rem;
font-weight: 700;
letter-spacing: 0.03125em;
text-transform: uppercase; }
@media (min-width: 2.421875rem) {
h6,
.h6 {
font-size: calc(0.9375rem + (1.125 - 0.9375) * ((100vw - 2.421875rem) / 2.265625)); } }
@media (min-width: 4.6875rem) {
h6,
.h6 {
font-size: 1.125rem; } }
@media (min-width: 2.421875rem) {
p,
blockquote,
address,
li,
dt,
dd,
label,
input,
.text-size-normal {
font-size: calc(0.9375rem + (1.125 - 0.9375) * ((100vw - 2.421875rem) / 2.265625)); } }
@media (min-width: 4.6875rem) {
p,
blockquote,
address,
li,
dt,
dd,
label,
input,
.text-size-normal {
font-size: 1.125rem; } }
li {
padding-bottom: 0.125rem; }
details {
padding-bottom: 1rem;
margin-bottom: 0.5rem; }
summary > * {
display: inline-block; }
summary::-webkit-details-marker {
font-size: 1.75em; }
small,
.text-small {
font-size: 0.8125rem; }
@media (min-width: 2.421875rem) {
small,
.text-small {
font-size: calc(0.8125rem + (0.9375 - 0.8125) * ((100vw - 2.421875rem) / 2.265625)); } }
@media (min-width: 4.6875rem) {
small,
.text-small {
font-size: 0.9375rem; } }
.text-uppercase {
letter-spacing: 0.03125em;
text-transform: uppercase; }
.text-italic {
font-family: "Playfair Display", serif;
font-style: italic;
letter-spacing: 0.03125em; }
abbr,
.text-abbr {
font-size: 93.75%;
letter-spacing: 0.03125em;
text-transform: uppercase; }
.u__space__outer {
padding-left: 1rem;
padding-right: 1rem; }
@media (min-width: 1.71875rem) {
.u__space__outer {
padding-left: calc(1rem + (3 - 1) * ((100vw - 1.71875rem) / 2.03125));
padding-right: calc(1rem + (3 - 1) * ((100vw - 1.71875rem) / 2.03125)); } }
@media (min-width: 3.75rem) {
.u__space__outer {
padding-left: 3rem;
padding-right: 3rem; } }
.u__space__inner {
padding-left: 1rem;
padding-right: 1rem; }
@media (min-width: 1.71875rem) {
.u__space__inner {
padding-left: calc(1rem + (2 - 1) * ((100vw - 1.71875rem) / 2.03125));
padding-right: calc(1rem + (2 - 1) * ((100vw - 1.71875rem) / 2.03125)); } }
@media (min-width: 3.75rem) {
.u__space__inner {
padding-left: 2rem;
padding-right: 2rem; } }
.u__space__vertical {
padding-top: 1.5rem;
padding-bottom: 1.5rem; }
@media (min-width: 1.71875rem) {
.u__space__vertical {
padding-top: calc(1.5rem + (4.5 - 1.5) * ((100vw - 1.71875rem) / 2.03125));
padding-bottom: calc(1.5rem + (4.5 - 1.5) * ((100vw - 1.71875rem) / 2.03125)); } }
@media (min-width: 3.75rem) {
.u__space__vertical {
padding-top: 4.5rem;
padding-bottom: 4.5rem; } }
.u__space__vertical--top {
padding-top: 1.5rem; }
@media (min-width: 1.71875rem) {
.u__space__vertical--top {
padding-top: calc(1.5rem + (4.5 - 1.5) * ((100vw - 1.71875rem) / 2.03125)); } }
@media (min-width: 3.75rem) {
.u__space__vertical--top {
padding-top: 4.5rem; } }
.u__space__vertical--bottom {
padding-bottom: 1.5rem; }
@media (min-width: 1.71875rem) {
.u__space__vertical--bottom {
padding-bottom: calc(1.5rem + (4.5 - 1.5) * ((100vw - 1.71875rem) / 2.03125)); } }
@media (min-width: 3.75rem) {
.u__space__vertical--bottom {
padding-bottom: 4.5rem; } }
.text-align-left {
text-align: left; }
.text-align-center {
text-align: center; }
.text-align-right {
text-align: right; }
.l__max {
margin: 0 auto;
max-width: 86.25em; }
.l__max--text {
margin: 0 auto;
max-width: 50em; }
.g__row {
display: flex;
flex-flow: row wrap;
align-items: flex-start;
margin: -1rem; }
.g__col {
flex: 1 0 100%;
max-width: 100%;
padding: 0 1rem; }
.g--wide {
flex: 1 1 100%;
min-width: 100%; }
@media (min-width: 38.75em) {
.g--two {
flex: 1 0 50%;
max-width: 50%; } }
@media (min-width: 47.5em) {
.g--three {
flex: 1 0 33.3%;
max-width: 33.3%; } }
.p__header {
background-color: #0f0e0e; }
.p__main {
background-color: #1a1818; }
.p__footer {
background-color: #0f0e0e; }
.p__footer small {
color: #b8aeae; }
.p__footer__logo {
float: left;
margin-right: 1rem; }
.cc__brand {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: space-between; }
.cc__brand__title a {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: flex-start;
padding-top: 0.5rem;
text-decoration: none; }
.cc__brand__title a img {
margin: 0 1rem -0.625rem 0; }
.cc__form__textarea {
height: 10.5em;
width: 100%; }
.cc__form__input {
padding: 0.75rem; }
.cc__form__row .cc__form__label {
display: inline-block;
padding: 0.75rem;
width: 4em; }
.cc__form__row .cc__form__input {
width: 6em; }
.cc__form__button {
border: 0;
cursor: pointer;
display: inline-block;
font-weight: 700;
padding: 0.5rem 1.5rem;
text-transform: uppercase;
transition: all 250ms ease;
-webkit-appearance: none; }
.cc__results {
display: none;
visibility: hidden; }
.results__row {
display: flex;
flex-flow: row nowrap;
padding-top: 1rem; }
.results__col {
padding-bottom: 1rem;
flex: 1 0 auto; }
.results__row .results__row {
border: 0;
flex: 1 0 50%;
padding-top: 0; }
.ratios__original {
flex: 0 0 11.25rem; }
.ratios__custom input {
padding: 0.25rem 0.5rem;
width: 6em; }
.original__label {
padding-bottom: 0.5rem; }
.original__hsl {
float: left; }
.original__hsl p {
padding: 0.375rem 0 0.375rem; }
.original__swatch {
float: right;
height: 7.5rem;
width: 5.625rem; }
.mod__label {
padding-bottom: 0.5rem; }
.mod__swatch {
float: left;
margin-right: 0.5rem;
height: 7.5rem;
width: 5.625rem; }
.mod__controls label {
display: inline-block;
font-weight: 700;
width: 1em; }
.mod__controls input {
margin: 0 0 -1px;
padding: 0.375rem 0 0.375rem 0.5rem; }
.mod__controls input::-webkit-inner-spin-button {
opacity: 1; }
.color-ratio__wrapper .icon {
display: inline-block;
font-size: 1.5rem;
text-align: center;
width: 0.875em; }
.color-ratio__passfail b {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
clip-path: inset(50%);
border: 0; }
.color-ratio__wrapper + .color-ratio__wrapper {
margin-top: -5px; }
.color-ratio__label {
padding-bottom: 0.5rem; }
.target-45 .color-ratio__label, .target-3 .color-ratio__label {
display: none;
visibility: hidden; }
.ratios__on-light .color-ratio__label, .ratios__on-dark .color-ratio__label {
padding: 0.5rem 0 0.75rem; }
.color-ratio__swatch {
border-style: solid;
border-width: 5px;
display: inline-block;
font-weight: 500;
line-height: 1.25;
overflow: hidden;
padding: 0.625rem 0.5rem;
position: relative;
text-align: center;
vertical-align: middle;
width: 7rem; }
.fail .color-ratio__swatch::before {
border: 2px solid currentColor;
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 150%;
transform: translate(-50%, -50%) rotate(-33deg); }
.color-ratio__passfail {
text-transform: uppercase; }
.color-ratio__results {
display: inline-block;
padding-left: 0.5rem;
vertical-align: middle; }
.level--AAplus, .level--AAAplus {
font-size: 1.5rem; }
pre {
background-color: rgba(0, 138, 101, 0.1);
border-top: 3px solid rgba(0, 138, 101, 0.5);
border-bottom: 3px solid rgba(0, 138, 101, 0.5); }
hr {
background-color: transparent;
border-top: 1px solid rgba(255, 255, 255, 0.15); }
.text-light {
color: #f8f2f2; }
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
color: #f8f2f2; }
details {
border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
summary::-webkit-details-marker {
color: #fff; }
.cc__brand__title a {
color: #f8f2f2; }
.cc__form__label {
color: #f8f2f2; }
.cc__form__input {
color: #b8aeae;
background-color: #0f0e0e;
border: 1px solid rgba(255, 255, 255, 0.15); }
.cc__form__button {
background-color: #70BDC1;
color: #0f0e0e; }
.cc__form__button:hover, .cc__form__button:focus {
background-color: #4a7090;
color: #fff; }
.cc__form__button:active {
background-color: #d62901;
color: #fff; }
.results__row {
border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
.color-ratio__wrapper.pass .icon {
color: #14cc45; }
.color-ratio__wrapper.edge .icon {
color: #fe6; }
.color-ratio__wrapper.fail .icon {
color: #f23900; }
.color-ratio__label strong {
color: #fff; }
@media (prefers-color-scheme: light) {
body {
color: #333030;
background-color: #fff; }
a {
color: #4a7090; }
a:hover, a:focus {
color: #333030; }
.p__header {
background-color: #fff; }
.p__main {
background-color: #f8f2f2; }
.p__footer {
background-color: #fff; }
.p__footer small {
color: #474444; }
.text-light {
color: #474444; }
hr {
border-top: 1px solid rgba(26, 24, 24, 0.15); }
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
color: #474444; }
details {
border-bottom: 1px solid rgba(26, 24, 24, 0.15); }
summary::-webkit-details-marker {
color: #1a1818; }
.cc__brand__title a {
color: #333030; }
.cc__form__label {
color: #474444; }
.cc__form__input {
color: #474444;
background-color: #fff;
border: 1px solid rgba(26, 24, 24, 0.15); }
.cc__form__button {
background-color: #4a7090;
color: #fff; }
.cc__form__button:hover, .cc__form__button:focus {
background-color: #70BDC1;
color: #1a1818; }
.results__row {
border-bottom: 1px solid rgba(26, 24, 24, 0.15); }
.color-ratio__wrapper.pass .icon {
color: #0b8428; }
.color-ratio__wrapper.edge .icon {
color: #b45e09; }
.color-ratio__wrapper.fail .icon {
color: #c63606; }
.color-ratio__label strong {
color: #1a1818; } }
/*# sourceMappingURL=styles.css.map */
Presently/presently/users/static/users/assets/css/styles.css.map 0 → 100644
View file @ 4fb74d9d
{
"version": 3,
"mappings": "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",
"sources": ["../scss/abstracts/_fonts.scss","../scss/base/_reset.scss","../scss/abstracts/project-vars/_colors.scss","../scss/abstracts/project-vars/_spacing.scss","../scss/abstracts/project-vars/_vars.scss","../scss/base/_global.scss","../scss/base/_media.scss","../scss/base/_typography.scss","../scss/abstracts/mixins/_fluid-units.scss","../scss/base/_utilities.scss","../scss/layout/_layout.scss","../scss/abstracts/project-vars/_breakpoints.scss","../scss/layout/_grid.scss","../scss/components/_page.scss","../scss/components/_colorcube.scss","../scss/abstracts/mixins/_show-hide.scss","../scss/components/_results.scss","../scss/abstracts/mixins/_screen-reader.scss","../scss/components/_theme.scss"],
"names": [],
"file": "styles.css"
}
\ No newline at end of file
Presently/presently/users/static/users/assets/js/colorcube.js 0 → 100644
View file @ 4fb74d9d
const AAANORMALRATIO = 7.0;
const AANORMALRATIO = 4.5;
const AALARGERATIO = 3.0;
var colorArray = [];
(function() {
/**
* Decimal adjustment of a number.
*
* @param {String} type The type of adjustment.
* @param {Number} value The number.
* @param {Integer} exp The exponent (the 10 logarithm of the adjustment base).
* @returns {Number} The adjusted value.
*/
function decimalAdjust(type, value, exp) {
// If the exp is undefined or zero...
if (typeof exp === 'undefined' || +exp === 0) {
return Math[type](value);
}
value = +value;
exp = +exp;
// If the value is not a number or the exp is not an integer...
if (isNaN(value) || !(typeof exp === 'number' && exp % 1 === 0)) {
return NaN;
}
// If the value is negative...
if (value < 0) {
return -decimalAdjust(type, -value, exp);
}
// Shift
value = value.toString().split('e');
value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp)));
// Shift back
value = value.toString().split('e');
return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp));
}
// Decimal round
if (!Math.round10) {
Math.round10 = function(value, exp) {
return decimalAdjust('round', value, exp);
};
}
// Decimal floor
if (!Math.floor10) {
Math.floor10 = function(value, exp) {
return decimalAdjust('floor', value, exp);
};
}
// Decimal ceil
if (!Math.ceil10) {
Math.ceil10 = function(value, exp) {
return decimalAdjust('ceil', value, exp);
};
}
})();
function round(number) {
return Math.round(number);
}
// Preserves a place after the decimal
function round2places(number) {
return (Math.round(number * 100) / 100).toFixed(2);
}
function decimalToPercent(number) {
return Math.round(number * 100);
}
function getRoundedRatio(color1, color2) {
var ratio = tinycolor.readability(color1, color2);
return round2places(ratio);
}
function outputRatio(color, ratio, bg, target, editable, iterator) {
// Default values: AA normal and AAA large with failing grades
var color = tinycolor(color),
hex = color.toHexString(),
background = tinycolor(bg),
bghex = background.toHexString(),
passfail = 'fail',
output = '',
targetclass = 'target-45',
icontent = '&#x2718;', // x mark
swatchcontent = '<p class="level--AA">AA</p><span class="level--AAAplus">AAA</span> 24px',
difference = 0;
// Check for passing grades
if ( ratio >= (target + 0.5) ) {
// It passes if the ratio is greater than our constant plus 0.5 for gamma correction
passfail = 'pass';
icontent = '&#x2714;'; // check mark
} else if ( ratio <= (target + 0.5) && ratio > target ) {
// It barely passes if the ratio is less than our constant plus 0.5 for gamma correction
// AND greater than the constant. So, within 0.5.
passfail = 'edge';
icontent = '&#x2714;'; // &#x203C; double exclamation
}
// Check target ratios
if ( target == AAANORMALRATIO ) {
targetclass = 'target-7'
swatchcontent = '<p class="level--AAA">AAA</p>';
}
if ( target == AALARGERATIO ) {
targetclass = 'target-3'
swatchcontent = '<span class="level--AAplus">AA</span> 24px';
}
difference = round2places( (ratio - target), -1 );
if ( editable === true ) {
var output =
`<div class="color-ratio__wrapper ${targetclass} ${passfail}" title="Criteria needed minimum ${target}">
<p class="color-ratio__label"><strong>${ratio}</strong>: with <input class="cc__form__input adjust-custom" id="test-color-${iterator}" name="test-color-${iterator}" type="text" value="${hex}" data-target="${iterator}" data-color="${bghex}" /></p>
<div class="color-ratio__swatch color-ratio-swatch-${iterator}" style="color: ${bghex}; border-color: ${bghex}; background-color: ${hex};">${swatchcontent}</div>
<p class="color-ratio__results">
<span class="icon">${icontent}</span>
<span class="color-ratio__passfail">
<b>${passfail}</b> ${difference}
</span>
</p>
</div>`;
} else {
var output =
`<div class="color-ratio__wrapper ${targetclass} ${passfail}" title="Criteria needed minimum ${target}">
<p class="color-ratio__label"><strong>${ratio}</strong>: with ${bghex}</p>
<div class="color-ratio__swatch" style="color: ${bghex}; border-color: ${bghex}; background-color: ${hex};">${swatchcontent}</div>
<p class="color-ratio__results">
<span class="icon">${icontent}</span>
<span class="color-ratio__passfail">
<b>${passfail}</b> ${difference}
</span>
</p>
</div>`;
}
return output;
}
function outputAllRatios(color, light, dark) {
var ratio_onlight = getRoundedRatio(color, light),
ratio_ondark = getRoundedRatio(color, dark),
results = "";
results =
`<div class="results__col ratios__on-light">
${outputRatio(color, ratio_onlight, light, AAANORMALRATIO)}
${outputRatio(color, ratio_onlight, light, AANORMALRATIO)}
${outputRatio(color, ratio_onlight, light, AALARGERATIO)}
</div>
<div class="results__col ratios__on-dark">
${outputRatio(color, ratio_ondark, dark, AAANORMALRATIO)}
${outputRatio(color, ratio_ondark, dark, AANORMALRATIO)}
${outputRatio(color, ratio_ondark, dark, AALARGERATIO)}
</div>`;
return results;
}
function outputCustomRatios(color, ratio, bg, iterator) {
var results = outputRatio(color, ratio, bg, AAANORMALRATIO, true, iterator);
results = results + outputRatio(color, ratio, bg, AANORMALRATIO, true, iterator);
results = results + outputRatio(color, ratio, bg, AALARGERATIO, true, iterator);
return results;
}
var button = document.querySelector('#brand-color-button');
button.onclick = function(e) {
e.preventDefault();
var resultsBlock = document.getElementById('results-content'),
results = document.getElementById('results-output'),
white = tinycolor(document.querySelector('#white-value').value),
black = tinycolor(document.querySelector('#black-value').value);
// if there are already results displayed, clear them
if ( results.children.length > 1 ) {
results.innerHTML = '';
}
// Set the header row
results.innerHTML =
`<div class="results__row results__row__header">
<div class="results__col ratios__original">Original</div>
<div class="results__col ratios__mod"><b>Modify</b></div>
<div class="results__col ratios__on-light">With light</div>
<div class="results__col ratios__on-dark">With dark</div>
<div class="results__col ratios__custom">Most legible or Custom</div>
</div>`;
// var ids = ['ts0', 'ts1', 'ts2'];
// for(var i = 0; i < ids.length; i++) {
// document.getElementById(ids[i]).value = document.getElementById('merged').value;
// }
// get the colors inputted by the user
var stringInput = document.querySelector('#txtArea').value;
// if there's no input, get output here
if ( stringInput == '' ) {
return;
}
// turn it into an array
colorArray = stringInput.split("\n");
for (var i = 0; i < colorArray.length; i++) {
// get the color's contrast ratios
var most_legible = tinycolor.mostReadable(colorArray[i], colorArray),
ratio_mostlegible = getRoundedRatio(most_legible, colorArray[i]),
color = tinycolor(colorArray[i]),
hex = color.toHex(),
hashhex = color.toHexString(),
hslColor = color.toHsl();
// outputRatio( {color & border color}, ratio, {background color}, {ratio to test against} )
results.innerHTML +=
`<div class="results__row">
<div class="results__col ratios__original">
<p class="original__label">${hashhex}</p>
<div class="original__hsl">
<p title="Hue"><b>H:</b> ${round(hslColor.h)}</p>
<p title="Saturation"><b>S:</b> ${decimalToPercent(hslColor.s)}</p>
<p title="Lightness"><b>L:</b> ${decimalToPercent(hslColor.l)}</p>
</div>
<div class="original__swatch" style="background-color: ${hashhex};"></div>
</div>
<div class="results__col ratios__mod">
<p class="mod__label mod-label-${i}">${hashhex}</p>
<div class="mod__swatch mod-swatch-${i}" style="background-color: ${hashhex};"></div>
<div class="mod__controls">
<p class="mod__hue"><label for="adjust-hue-${i}">H</label><input type="number" class="cc__form__input adjust-hue" data-target="${i}" data-color="${hex}" id="adjust-hue-${i}" name="adjust-hue-${i}" value="${round(hslColor.h)}" min="0" max="360" /></p>
<p class="mod__saturation"><label for="adjust-sat-${i}">S</label><input type="number" class="cc__form__input adjust-sat" data-target="${i}" data-color="${hex}" id="adjust-sat-${i}" name="adjust-sat-${i}" value="${decimalToPercent(hslColor.s)}" min="0" max="100" /></p>
<p class="mod__lightness"><label for="adjust-lig-${i}">L</label><input type="number" class="cc__form__input adjust-lig" data-target="${i}" data-color="${hex}" id="adjust-lig-${i}" name="adjust-lig-${i}" value="${decimalToPercent(hslColor.l)}" min="0" max="100" /></p>
</div>
</div>
<div class="results__row">
<div id="row-${i}" class="results__row">
${outputAllRatios(colorArray[i], white, black)}
</div>
<div id="custom-pair-${i}" class="results__col ratios__custom">
${outputCustomRatios(most_legible, ratio_mostlegible, colorArray[i], i)}
</div>
</div>
</div>`;
}
// make the results content visible
resultsBlock.style.display = 'block';
resultsBlock.style.visibility = 'visible';
// jump to the results
window.location.href = '#results-content';
}
// Adjust Hue, Saturation, or Lightness
$(document).on("change paste keyup blur", ".adjust-hue, .adjust-sat, .adjust-lig", function() {
var target = $(this).data("target"),
color = $(this).data("color"),
newValue = $(this).val(),
originalColor = tinycolor(color).toHsl(),
newColorHSL = '';
// Adjust the color based on the class of the input
if ( $(this).hasClass('adjust-hue') ) {
newColorHSL = tinycolor("hsl(" + newValue + "," + originalColor.s + ", " + originalColor.l + ")");
} else if ( $(this).hasClass('adjust-sat') ) {
newColorHSL = tinycolor("hsl(" + originalColor.h + "," + newValue + ", " + originalColor.l + ")");
} else {
newColorHSL = tinycolor("hsl(" + originalColor.h + "," + originalColor.s + ", " + newValue + ")");
}
var newColorRAW = newColorHSL.toHex(),
newColor = newColorHSL.toHexString(),
targetSwatch = $('.mod-swatch-' + target),
targetContainer = $('#row-' + target),
customContainer = $('#custom-pair-' + target),
white = tinycolor(document.querySelector('#white-value').value),
black = tinycolor(document.querySelector('#black-value').value),
custom = tinycolor(document.querySelector('#test-color-' + target).value),
ratio_custom = getRoundedRatio(custom, newColor);
// Change the starting color on the inputs, stored in data-color
var inputs = $("input[data-target=" + target + "]");
inputs.each(function() {
$(this).data('color', newColorRAW);
});
$('.mod-label-' + target).html(newColor);
// Change the swatch
targetSwatch.css("background-color", newColor);
// Change the contents of the light/dark outputs
//console.log(newColor);
targetContainer.html('');
targetContainer.html(outputAllRatios(newColor, white, black));
// Change the contents of the Custom column
customContainer.html('');
customContainer.html(outputCustomRatios(custom, ratio_custom, newColor, target));
});
// If a custom color is supplied, redo the custom color test
$(document).on("blur", ".adjust-custom", function() {
var target = $(this).data("target"),
color = tinycolor($(this).data("color")),
newColor = tinycolor($(this).val()),
ratio_custom = getRoundedRatio(color, newColor),
customContainer = $('#custom-pair-' + target);
// Change the contents of the Custom column
customContainer.html('');
customContainer.html(outputCustomRatios(newColor, ratio_custom, color, target));
});
$(function () {
var arrInitial;
$(".inputField").on('focus', function () {
arrInitial = [];
$(".inputField").each(function () { arrInitial.push($(this).val()); })
});
$(".inputField").on('blur', function () {
//If text area is blank then update all input values
if ($.trim($("#txtArea").val()) === "") {
var inputValues = "";
$(".inputField").each(function () { inputValues += "\n" + $(this).val(); })
$("#txtArea").val($.trim(inputValues));
}
else {
//Get existing values from text area and split by " "
var arrData = $("#txtArea").val().split(" ");
var arr = arrData.filter(function(v){return v!==''});
var arrNew = [];
$(".inputField").each(function (i) {
if (arr[i] === arrInitial[i]) //Check against initial values in text fields
arrNew.push($.trim($(this).val()));
else
arrNew.push(arr[i]);
});
$("#txtArea").val(arrNew.join(" "));
}
})
});
Presently/presently/users/static/users/assets/js/detection.js 0 → 100644
View file @ 4fb74d9d
/*
*
* This is for uploading files to the page, standard HTML5 jazz.
*
* */
function handleFileSelect(evt)
{
var files = evt.target.files;
// Loop through the FileList and render image files as thumbnails
for (var i = 0, f; f = files[i]; i++)
{
// Only process image files
if (!f.type.match('image.*'))
{
continue;
}
var reader = new FileReader();
// Capture the file info
reader.onload = (function(theFile)
{
return function(e)
{
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML = ['<img class="thumb" onclick="javascript:analyze(this, event);" src="', e.target.result, '" title="', escape(theFile.name), '"/>'].join('');
document.getElementById('list').insertBefore(span, null);
};
})(f);
// Read the image file as data URL
reader.readAsDataURL(f);
}
var message = document.getElementById('message');
message.innerHTML = 'Click any image to get theme colors!';
}
/*
* This portion was created by referencing the article
* "Using python and k-means to find the dominant colors in images"
* By Charles Leifer
* */
// You can see the Python version of this in Charles Leifer's article
function euclidean(point1, point2)
{
var s = 0;
for (var i = 0, l = point1.length; i < l; i++)
{
s += Math.pow(point1[i] - point2[i], 2)
}
return Math.sqrt(s);
}
// There are various ways to convert rgb to hex, I found this on Stack Overflow.
function rgbToHex(rgb)
{
function toHex(c)
{
var hex = parseInt(c).toString(16);
return hex.length == 1 ? '0' + hex : hex;
}
return '#' + toHex(rgb[0]) + toHex(rgb[1]) + toHex(rgb[2]);
}
function calculateCenter(points, n)
{
var values = []
// Here we're populating the values array with 0s just so we know what size it should be (n)
for (var i = 0; i < n; i++)
{
values.push(0);
}
var plength = 0;
for (var i = 0, l = points.length; i < l; i++)
{
plength++;
for (var j = 0; j < n; j++)
{
values[j] += points[i][j];
}
}
// Using the average to get the centers
for (var i = 0; i < n; i++)
{
values[i] = values[i] / plength;
}
return values;
}
// I basically just took this from Charles Leifer.
function k_mean(points, k, min_diff)
{
plength = points.length;
colorGroup = [];
seen = [];
while (colorGroup.length < k)
{
idx = parseInt(Math.random() * plength);
found = false;
for (var i = 0; i < seen.length; i++)
{
if (idx === seen[i])
{
found = true;
break;
}
}
if (!found)
{
seen.push(idx);
colorGroup.push([points[idx], [points[idx]]]);
}
}
while (true)
{
plists = [];
for (var i = 0; i < k; i++)
{
plists.push([]);
}
for (var j = 0; j < plength; j++)
{
var p = points[j], smallest_distance = 10000000, idx = 0;
for (var i = 0; i < k; i++)
{
var distance = euclidean(p, colorGroup[i][0]);
if (distance < smallest_distance)
{
smallest_distance = distance;
idx = i;
}
}
plists[idx].push(p);
}
var diff = 0;
for (var i = 0; i < k; i++)
{
var old = colorGroup[i], list = plists[i], center = calculateCenter(plists[i], 3), new_cluster = [center, (plists[i])], dist = euclidean(old[0], center);
colorGroup[i] = new_cluster
diff = diff > dist ? diff : dist;
}
if (diff < min_diff)
{
break;
}
}
return colorGroup;
}
// Here's where we to actual interaction with the webpage
function processimg(img, canvaselement)
{
var points = [];
// Drawing the given image onto a canvas 250x250 in size
canvaselement.drawImage(img, 0, 0, 250, 250);
// Getting data from said canvas. This *DOES* get every pixel in the image.
// Luckily, it's fast.
dataCanvas = canvaselement.getImageData(0, 0, 250, 250).data;
// Populating the points array with colors from the image
for (var i = 0, l = dataCanvas.length; i < l; i += 4)
{
var r = dataCanvas[i], g = dataCanvas[i + 1], b = dataCanvas[i + 2];
points.push([r, g, b]);
}
var totals = k_mean(points, 3, 1), hex = [];
// If you try and convert the RGB to Hex directly here, it takes FOREVER,
// but if you have the helper method above, it works fast. Strange.
for (var i = 0; i < totals.length; i++)
{
hex.push(rgbToHex(totals[i][0]));
}
return hex;
}
function pick(img, canvaselement, x, y)
{
var pickedColor = "hay";
xx = x;
yy = y;
var imgData = canvaselement.getImageData(xx, yy, 1, 1).data;
pickedColor = rgbToHex(imgData);
return pickedColor;
}
// This is called when the user clicks an image.
function analyze(img_elem, event)
{
// This is getting the canvas from the page and the image in it
canvaselement = document.getElementById('canvas').getContext('2d'), img = new Image();
//var coords = relMouseCoords(document.getElementById('canvas'), event);
img.onload = function()
{
var message = document.getElementById('message');
//Hopefully we'll never see the "Loading..." message but it's here just in case
message.innerHTML = 'Loading...';
var colors = processimg(img, canvaselement);
// Showing the message of processing the image to the user
message.innerHTML = 'Theme Colors';
console.log(colors.length, 'length');
document.getElementById('ts0').value = colors[0];
document.getElementById('ts1').value = colors[1];
document.getElementById('ts2').value = colors[2];
document.getElementById('ts3').value = colorfun;
document.getElementById('color1').style.backgroundColor = colors[0];
document.getElementById('color1').innerHTML = colors[0];
document.getElementById('color2').style.backgroundColor = colors[1];
document.getElementById('color2').innerHTML = colors[1];
document.getElementById('color3').style.backgroundColor = colors[2];
document.getElementById('color3').innerHTML = colors[2];
var colorfun = pick(img, canvaselement, event.offsetX, event.offsetY);
// pass in coordinates
document.getElementById('pickedColor').style.backgroundColor = colorfun;
document.getElementById('pickedColor').innerHTML = colorfun;
document.getElementById('scheme').style.display="block";
createSwatches(colorfun);
}
img.src = img_elem.src;
}
// This is for the swatches that are generated from the picked color.
function createSwatches(hex)
{
nHex = hex;
// The light and dark values could potentially be changed so colors are changed based on these hues.
// It's this way just in case we expand it to include such functionality.
var lightRGB = new Array(255, 255, 255);
var darkRGB = new Array(0, 0, 0);
var colorValues = new Array();
var swatch = new Array();
baseColor = hexToRGB(nHex);
opArray = new Array(1.0, .75, .50, .25, .10, .85, .75, .50, .25, .10);
for ( i = 0; i < 10; i++)
{
nMask = i < 5 ? lightRGB : darkRGB;
nColor = setColorHue(baseColor, opArray[i], nMask);
nHex = toHex(nColor[0]) + toHex(nColor[1]) + toHex(nColor[2]);
colorValues[i] = new Array();
colorValues[i][0] = nHex;
colorValues[i][1] = nColor;
// Actually putting the swatches on the page
document.getElementById("s"+i).style.backgroundColor = "#" + nHex;
}
}
// Actually crating the hues with different lightness
function setColorHue(originColor, opacityPercent, maskRGB)
{
returnColor = new Array();
for ( w = 0; w < originColor.length; w++)
returnColor[w] = Math.round(originColor[w] * opacityPercent) + Math.round(maskRGB[w] * (1.0 - opacityPercent));
return returnColor;
}
// Helper method for sonverting to HEX
function toHex(dec) {
hex=dec.toString(16);
if(hex.length==1)hex="0"+hex;
if(hex==100)hex="FF";
return hex.toUpperCase();
}
//Converting HEX to RGB
function hexToRGB(hex)
{
var r = hexToR(hex);
var g = hexToG(hex);
var b = hexToB(hex);
function hexToR(h)
{
return parseInt((cutHex(h)).substring(0, 2), 16)
}
function hexToG(h)
{
return parseInt((cutHex(h)).substring(2, 4), 16)
}
function hexToB(h)
{
return parseInt((cutHex(h)).substring(4, 6), 16)
}
function cutHex(h)
{
return (h.charAt(0) == "#") ? h.substring(1, 7) : h
}
return new Array(r, g, b);
}
// This is currently not used. Maybe if we start playing with hues and everything, it'll be useful!
/*
function HueShift(h,s) {
h+=s;
while (h>=360.0) h-=360.0;
while (h<0.0) h+=360.0;
return h;
}
function convertToHSV(hex)
{
var r = hexToR(hex);
var g = hexToG(hex);
var b = hexToB(hex);
function hexToR(h)
{
return parseInt((cutHex(h)).substring(0, 2), 16)
}
function hexToG(h)
{
return parseInt((cutHex(h)).substring(2, 4), 16)
}
function hexToB(h)
{
return parseInt((cutHex(h)).substring(4, 6), 16)
}
function cutHex(h)
{
return (h.charAt(0) == "#") ? h.substring(1, 7) : h
}
var computedH = 0;
var computedS = 0;
var computedV = 0;
r = r / 255;
g = g / 255;
b = b / 255;
var minRGB = Math.min(r, Math.min(g, b));
var maxRGB = Math.max(r, Math.max(g, b));
// Black-gray-white
if (minRGB == maxRGB)
{
computedV = minRGB;
return [0, 0, computedV];
}
// Colors other than black-gray-white:
var d = (r == minRGB) ? g - b : ((b == minRGB) ? r - g : b - r);
var h = (r == minRGB) ? 3 : ((b == minRGB) ? 1 : 5);
computedH = 60 * (h - d / (maxRGB - minRGB));
computedS = (maxRGB - minRGB) / maxRGB;
computedV = maxRGB;
return [computedH, computedS, computedV];
}
*/
\ No newline at end of file
Presently/presently/users/static/users/assets/js/tinycolor.js 0 → 100644
View file @ 4fb74d9d
// TinyColor v1.4.1
// https://github.com/bgrins/TinyColor
// Brian Grinstead, MIT License
(function(Math) {
var trimLeft = /^\s+/,
trimRight = /\s+$/,
tinyCounter = 0,
mathRound = Math.round,
mathMin = Math.min,
mathMax = Math.max,
mathRandom = Math.random;
function tinycolor (color, opts) {
color = (color) ? color : '';
opts = opts || { };
// If input is already a tinycolor, return itself
if (color instanceof tinycolor) {
return color;
}
// If we are called as a function, call using new instead
if (!(this instanceof tinycolor)) {
return new tinycolor(color, opts);
}
var rgb = inputToRGB(color);
this._originalInput = color,
this._r = rgb.r,
this._g = rgb.g,
this._b = rgb.b,
this._a = rgb.a,
this._roundA = mathRound(100*this._a) / 100,
this._format = opts.format || rgb.format;
this._gradientType = opts.gradientType;
// Don't let the range of [0,255] come back in [0,1].
// Potentially lose a little bit of precision here, but will fix issues where
// .5 gets interpreted as half of the total, instead of half of 1
// If it was supposed to be 128, this was already taken care of by `inputToRgb`
if (this._r < 1) { this._r = mathRound(this._r); }
if (this._g < 1) { this._g = mathRound(this._g); }
if (this._b < 1) { this._b = mathRound(this._b); }
this._ok = rgb.ok;
this._tc_id = tinyCounter++;
}
tinycolor.prototype = {
isDark: function() {
return this.getBrightness() < 128;
},
isLight: function() {
return !this.isDark();
},
isValid: function() {
return this._ok;
},
getOriginalInput: function() {
return this._originalInput;
},
getFormat: function() {
return this._format;
},
getAlpha: function() {
return this._a;
},
getBrightness: function() {
//http://www.w3.org/TR/AERT#color-contrast
var rgb = this.toRgb();
return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
},
getLuminance: function() {
//http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
var rgb = this.toRgb();
var RsRGB, GsRGB, BsRGB, R, G, B;
RsRGB = rgb.r/255;
GsRGB = rgb.g/255;
BsRGB = rgb.b/255;
if (RsRGB <= 0.03928) {R = RsRGB / 12.92;} else {R = Math.pow(((RsRGB + 0.055) / 1.055), 2.4);}
if (GsRGB <= 0.03928) {G = GsRGB / 12.92;} else {G = Math.pow(((GsRGB + 0.055) / 1.055), 2.4);}
if (BsRGB <= 0.03928) {B = BsRGB / 12.92;} else {B = Math.pow(((BsRGB + 0.055) / 1.055), 2.4);}
return (0.2126 * R) + (0.7152 * G) + (0.0722 * B);
},
setAlpha: function(value) {
this._a = boundAlpha(value);
this._roundA = mathRound(100*this._a) / 100;
return this;
},
toHsv: function() {
var hsv = rgbToHsv(this._r, this._g, this._b);
return { h: hsv.h * 360, s: hsv.s, v: hsv.v, a: this._a };
},
toHsvString: function() {
var hsv = rgbToHsv(this._r, this._g, this._b);
var h = mathRound(hsv.h * 360), s = mathRound(hsv.s * 100), v = mathRound(hsv.v * 100);
return (this._a == 1) ?
"hsv(" + h + ", " + s + "%, " + v + "%)" :
"hsva(" + h + ", " + s + "%, " + v + "%, "+ this._roundA + ")";
},
toHsl: function() {
var hsl = rgbToHsl(this._r, this._g, this._b);
return { h: hsl.h * 360, s: hsl.s, l: hsl.l, a: this._a };
},
toHslString: function() {
var hsl = rgbToHsl(this._r, this._g, this._b);
var h = mathRound(hsl.h * 360), s = mathRound(hsl.s * 100), l = mathRound(hsl.l * 100);
return (this._a == 1) ?
"hsl(" + h + ", " + s + "%, " + l + "%)" :
"hsla(" + h + ", " + s + "%, " + l + "%, "+ this._roundA + ")";
},
toHex: function(allow3Char) {
return rgbToHex(this._r, this._g, this._b, allow3Char);
},
toHexString: function(allow3Char) {
return '#' + this.toHex(allow3Char);
},
toHex8: function(allow4Char) {
return rgbaToHex(this._r, this._g, this._b, this._a, allow4Char);
},
toHex8String: function(allow4Char) {
return '#' + this.toHex8(allow4Char);
},
toRgb: function() {
return { r: mathRound(this._r), g: mathRound(this._g), b: mathRound(this._b), a: this._a };
},
toRgbString: function() {
return (this._a == 1) ?
"rgb(" + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ")" :
"rgba(" + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ", " + this._roundA + ")";
},
toPercentageRgb: function() {
return { r: mathRound(bound01(this._r, 255) * 100) + "%", g: mathRound(bound01(this._g, 255) * 100) + "%", b: mathRound(bound01(this._b, 255) * 100) + "%", a: this._a };
},
toPercentageRgbString: function() {
return (this._a == 1) ?
"rgb(" + mathRound(bound01(this._r, 255) * 100) + "%, " + mathRound(bound01(this._g, 255) * 100) + "%, " + mathRound(bound01(this._b, 255) * 100) + "%)" :
"rgba(" + mathRound(bound01(this._r, 255) * 100) + "%, " + mathRound(bound01(this._g, 255) * 100) + "%, " + mathRound(bound01(this._b, 255) * 100) + "%, " + this._roundA + ")";
},
toName: function() {
if (this._a === 0) {
return "transparent";
}
if (this._a < 1) {
return false;
}
return hexNames[rgbToHex(this._r, this._g, this._b, true)] || false;
},
toFilter: function(secondColor) {
var hex8String = '#' + rgbaToArgbHex(this._r, this._g, this._b, this._a);
var secondHex8String = hex8String;
var gradientType = this._gradientType ? "GradientType = 1, " : "";
if (secondColor) {
var s = tinycolor(secondColor);
secondHex8String = '#' + rgbaToArgbHex(s._r, s._g, s._b, s._a);
}
return "progid:DXImageTransform.Microsoft.gradient("+gradientType+"startColorstr="+hex8String+",endColorstr="+secondHex8String+")";
},
toString: function(format) {
var formatSet = !!format;
format = format || this._format;
var formattedString = false;
var hasAlpha = this._a < 1 && this._a >= 0;
var needsAlphaFormat = !formatSet && hasAlpha && (format === "hex" || format === "hex6" || format === "hex3" || format === "hex4" || format === "hex8" || format === "name");
if (needsAlphaFormat) {
// Special case for "transparent", all other non-alpha formats
// will return rgba when there is transparency.
if (format === "name" && this._a === 0) {
return this.toName();
}
return this.toRgbString();
}
if (format === "rgb") {
formattedString = this.toRgbString();
}
if (format === "prgb") {
formattedString = this.toPercentageRgbString();
}
if (format === "hex" || format === "hex6") {
formattedString = this.toHexString();
}
if (format === "hex3") {
formattedString = this.toHexString(true);
}
if (format === "hex4") {
formattedString = this.toHex8String(true);
}
if (format === "hex8") {
formattedString = this.toHex8String();
}
if (format === "name") {
formattedString = this.toName();
}
if (format === "hsl") {
formattedString = this.toHslString();
}
if (format === "hsv") {
formattedString = this.toHsvString();
}
return formattedString || this.toHexString();
},
clone: function() {
return tinycolor(this.toString());
},
_applyModification: function(fn, args) {
var color = fn.apply(null, [this].concat([].slice.call(args)));
this._r = color._r;
this._g = color._g;
this._b = color._b;
this.setAlpha(color._a);
return this;
},
lighten: function() {
return this._applyModification(lighten, arguments);
},
brighten: function() {
return this._applyModification(brighten, arguments);
},
darken: function() {
return this._applyModification(darken, arguments);
},
desaturate: function() {
return this._applyModification(desaturate, arguments);
},
saturate: function() {
return this._applyModification(saturate, arguments);
},
greyscale: function() {
return this._applyModification(greyscale, arguments);
},
spin: function() {
return this._applyModification(spin, arguments);
},
_applyCombination: function(fn, args) {
return fn.apply(null, [this].concat([].slice.call(args)));
},
analogous: function() {
return this._applyCombination(analogous, arguments);
},
complement: function() {
return this._applyCombination(complement, arguments);
},
monochromatic: function() {
return this._applyCombination(monochromatic, arguments);
},
splitcomplement: function() {
return this._applyCombination(splitcomplement, arguments);
},
triad: function() {
return this._applyCombination(triad, arguments);
},
tetrad: function() {
return this._applyCombination(tetrad, arguments);
}
};
// If input is an object, force 1 into "1.0" to handle ratios properly
// String input requires "1.0" as input, so 1 will be treated as 1
tinycolor.fromRatio = function(color, opts) {
if (typeof color == "object") {
var newColor = {};
for (var i in color) {
if (color.hasOwnProperty(i)) {
if (i === "a") {
newColor[i] = color[i];
}
else {
newColor[i] = convertToPercentage(color[i]);
}
}
}
color = newColor;
}
return tinycolor(color, opts);
};
// Given a string or object, convert that input to RGB
// Possible string inputs:
//
// "red"
// "#f00" or "f00"
// "#ff0000" or "ff0000"
// "#ff000000" or "ff000000"
// "rgb 255 0 0" or "rgb (255, 0, 0)"
// "rgb 1.0 0 0" or "rgb (1, 0, 0)"
// "rgba (255, 0, 0, 1)" or "rgba 255, 0, 0, 1"
// "rgba (1.0, 0, 0, 1)" or "rgba 1.0, 0, 0, 1"
// "hsl(0, 100%, 50%)" or "hsl 0 100% 50%"
// "hsla(0, 100%, 50%, 1)" or "hsla 0 100% 50%, 1"
// "hsv(0, 100%, 100%)" or "hsv 0 100% 100%"
//
function inputToRGB(color) {
var rgb = { r: 0, g: 0, b: 0 };
var a = 1;
var s = null;
var v = null;
var l = null;
var ok = false;
var format = false;
if (typeof color == "string") {
color = stringInputToObject(color);
}
if (typeof color == "object") {
if (isValidCSSUnit(color.r) && isValidCSSUnit(color.g) && isValidCSSUnit(color.b)) {
rgb = rgbToRgb(color.r, color.g, color.b);
ok = true;
format = String(color.r).substr(-1) === "%" ? "prgb" : "rgb";
}
else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.v)) {
s = convertToPercentage(color.s);
v = convertToPercentage(color.v);
rgb = hsvToRgb(color.h, s, v);
ok = true;
format = "hsv";
}
else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.l)) {
s = convertToPercentage(color.s);
l = convertToPercentage(color.l);
rgb = hslToRgb(color.h, s, l);
ok = true;
format = "hsl";
}
if (color.hasOwnProperty("a")) {
a = color.a;
}
}
a = boundAlpha(a);
return {
ok: ok,
format: color.format || format,
r: mathMin(255, mathMax(rgb.r, 0)),
g: mathMin(255, mathMax(rgb.g, 0)),
b: mathMin(255, mathMax(rgb.b, 0)),
a: a
};
}
// Conversion Functions
// --------------------
// `rgbToHsl`, `rgbToHsv`, `hslToRgb`, `hsvToRgb` modified from:
// <http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript>
// `rgbToRgb`
// Handle bounds / percentage checking to conform to CSS color spec
// <http://www.w3.org/TR/css3-color/>
// *Assumes:* r, g, b in [0, 255] or [0, 1]
// *Returns:* { r, g, b } in [0, 255]
function rgbToRgb(r, g, b){
return {
r: bound01(r, 255) * 255,
g: bound01(g, 255) * 255,
b: bound01(b, 255) * 255
};
}
// `rgbToHsl`
// Converts an RGB color value to HSL.
// *Assumes:* r, g, and b are contained in [0, 255] or [0, 1]
// *Returns:* { h, s, l } in [0,1]
function rgbToHsl(r, g, b) {
r = bound01(r, 255);
g = bound01(g, 255);
b = bound01(b, 255);
var max = mathMax(r, g, b), min = mathMin(r, g, b);
var h, s, l = (max + min) / 2;
if(max == min) {
h = s = 0; // achromatic
}
else {
var d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch(max) {
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}
return { h: h, s: s, l: l };
}
// `hslToRgb`
// Converts an HSL color value to RGB.
// *Assumes:* h is contained in [0, 1] or [0, 360] and s and l are contained [0, 1] or [0, 100]
// *Returns:* { r, g, b } in the set [0, 255]
function hslToRgb(h, s, l) {
var r, g, b;
h = bound01(h, 360);
s = bound01(s, 100);
l = bound01(l, 100);
function hue2rgb(p, q, t) {
if(t < 0) t += 1;
if(t > 1) t -= 1;
if(t < 1/6) return p + (q - p) * 6 * t;
if(t < 1/2) return q;
if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
return p;
}
if(s === 0) {
r = g = b = l; // achromatic
}
else {
var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
var p = 2 * l - q;
r = hue2rgb(p, q, h + 1/3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1/3);
}
return { r: r * 255, g: g * 255, b: b * 255 };
}
// `rgbToHsv`
// Converts an RGB color value to HSV
// *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1]
// *Returns:* { h, s, v } in [0,1]
function rgbToHsv(r, g, b) {
r = bound01(r, 255);
g = bound01(g, 255);
b = bound01(b, 255);
var max = mathMax(r, g, b), min = mathMin(r, g, b);
var h, s, v = max;
var d = max - min;
s = max === 0 ? 0 : d / max;
if(max == min) {
h = 0; // achromatic
}
else {
switch(max) {
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}
return { h: h, s: s, v: v };
}
// `hsvToRgb`
// Converts an HSV color value to RGB.
// *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100]
// *Returns:* { r, g, b } in the set [0, 255]
function hsvToRgb(h, s, v) {
h = bound01(h, 360) * 6;
s = bound01(s, 100);
v = bound01(v, 100);
var i = Math.floor(h),
f = h - i,
p = v * (1 - s),
q = v * (1 - f * s),
t = v * (1 - (1 - f) * s),
mod = i % 6,
r = [v, q, p, p, t, v][mod],
g = [t, v, v, q, p, p][mod],
b = [p, p, t, v, v, q][mod];
return { r: r * 255, g: g * 255, b: b * 255 };
}
// `rgbToHex`
// Converts an RGB color to hex
// Assumes r, g, and b are contained in the set [0, 255]
// Returns a 3 or 6 character hex
function rgbToHex(r, g, b, allow3Char) {
var hex = [
pad2(mathRound(r).toString(16)),
pad2(mathRound(g).toString(16)),
pad2(mathRound(b).toString(16))
];
// Return a 3 character hex if possible
if (allow3Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1)) {
return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0);
}
return hex.join("");
}
// `rgbaToHex`
// Converts an RGBA color plus alpha transparency to hex
// Assumes r, g, b are contained in the set [0, 255] and
// a in [0, 1]. Returns a 4 or 8 character rgba hex
function rgbaToHex(r, g, b, a, allow4Char) {
var hex = [
pad2(mathRound(r).toString(16)),
pad2(mathRound(g).toString(16)),
pad2(mathRound(b).toString(16)),
pad2(convertDecimalToHex(a))
];
// Return a 4 character hex if possible
if (allow4Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1) && hex[3].charAt(0) == hex[3].charAt(1)) {
return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0) + hex[3].charAt(0);
}
return hex.join("");
}
// `rgbaToArgbHex`
// Converts an RGBA color to an ARGB Hex8 string
// Rarely used, but required for "toFilter()"
function rgbaToArgbHex(r, g, b, a) {
var hex = [
pad2(convertDecimalToHex(a)),
pad2(mathRound(r).toString(16)),
pad2(mathRound(g).toString(16)),
pad2(mathRound(b).toString(16))
];
return hex.join("");
}
// `equals`
// Can be called with any tinycolor input
tinycolor.equals = function (color1, color2) {
if (!color1 || !color2) { return false; }
return tinycolor(color1).toRgbString() == tinycolor(color2).toRgbString();
};
tinycolor.random = function() {
return tinycolor.fromRatio({
r: mathRandom(),
g: mathRandom(),
b: mathRandom()
});
};
// Modification Functions
// ----------------------
// Thanks to less.js for some of the basics here
// <https://github.com/cloudhead/less.js/blob/master/lib/less/functions.js>
function desaturate(color, amount) {
amount = (amount === 0) ? 0 : (amount || 10);
var hsl = tinycolor(color).toHsl();
hsl.s -= amount / 100;
hsl.s = clamp01(hsl.s);
return tinycolor(hsl);
}
function saturate(color, amount) {
amount = (amount === 0) ? 0 : (amount || 10);
var hsl = tinycolor(color).toHsl();
hsl.s += amount / 100;
hsl.s = clamp01(hsl.s);
return tinycolor(hsl);
}
function greyscale(color) {
return tinycolor(color).desaturate(100);
}
function lighten (color, amount) {
amount = (amount === 0) ? 0 : (amount || 10);
var hsl = tinycolor(color).toHsl();
hsl.l += amount / 100;
hsl.l = clamp01(hsl.l);
return tinycolor(hsl);
}
function brighten(color, amount) {
amount = (amount === 0) ? 0 : (amount || 10);
var rgb = tinycolor(color).toRgb();
rgb.r = mathMax(0, mathMin(255, rgb.r - mathRound(255 * - (amount / 100))));
rgb.g = mathMax(0, mathMin(255, rgb.g - mathRound(255 * - (amount / 100))));
rgb.b = mathMax(0, mathMin(255, rgb.b - mathRound(255 * - (amount / 100))));
return tinycolor(rgb);
}
function darken (color, amount) {
amount = (amount === 0) ? 0 : (amount || 10);
var hsl = tinycolor(color).toHsl();
hsl.l -= amount / 100;
hsl.l = clamp01(hsl.l);
return tinycolor(hsl);
}
// Spin takes a positive or negative amount within [-360, 360] indicating the change of hue.
// Values outside of this range will be wrapped into this range.
function spin(color, amount) {
var hsl = tinycolor(color).toHsl();
var hue = (hsl.h + amount) % 360;
hsl.h = hue < 0 ? 360 + hue : hue;
return tinycolor(hsl);
}
// Combination Functions
// ---------------------
// Thanks to jQuery xColor for some of the ideas behind these
// <https://github.com/infusion/jQuery-xcolor/blob/master/jquery.xcolor.js>
function complement(color) {
var hsl = tinycolor(color).toHsl();
hsl.h = (hsl.h + 180) % 360;
return tinycolor(hsl);
}
function triad(color) {
var hsl = tinycolor(color).toHsl();
var h = hsl.h;
return [
tinycolor(color),
tinycolor({ h: (h + 120) % 360, s: hsl.s, l: hsl.l }),
tinycolor({ h: (h + 240) % 360, s: hsl.s, l: hsl.l })
];
}
function tetrad(color) {
var hsl = tinycolor(color).toHsl();
var h = hsl.h;
return [
tinycolor(color),
tinycolor({ h: (h + 90) % 360, s: hsl.s, l: hsl.l }),
tinycolor({ h: (h + 180) % 360, s: hsl.s, l: hsl.l }),
tinycolor({ h: (h + 270) % 360, s: hsl.s, l: hsl.l })
];
}
function splitcomplement(color) {
var hsl = tinycolor(color).toHsl();
var h = hsl.h;
return [
tinycolor(color),
tinycolor({ h: (h + 72) % 360, s: hsl.s, l: hsl.l}),
tinycolor({ h: (h + 216) % 360, s: hsl.s, l: hsl.l})
];
}
function analogous(color, results, slices) {
results = results || 6;
slices = slices || 30;
var hsl = tinycolor(color).toHsl();
var part = 360 / slices;
var ret = [tinycolor(color)];
for (hsl.h = ((hsl.h - (part * results >> 1)) + 720) % 360; --results; ) {
hsl.h = (hsl.h + part) % 360;
ret.push(tinycolor(hsl));
}
return ret;
}
function monochromatic(color, results) {
results = results || 6;
var hsv = tinycolor(color).toHsv();
var h = hsv.h, s = hsv.s, v = hsv.v;
var ret = [];
var modification = 1 / results;
while (results--) {
ret.push(tinycolor({ h: h, s: s, v: v}));
v = (v + modification) % 1;
}
return ret;
}
// Utility Functions
// ---------------------
tinycolor.mix = function(color1, color2, amount) {
amount = (amount === 0) ? 0 : (amount || 50);
var rgb1 = tinycolor(color1).toRgb();
var rgb2 = tinycolor(color2).toRgb();
var p = amount / 100;
var rgba = {
r: ((rgb2.r - rgb1.r) * p) + rgb1.r,
g: ((rgb2.g - rgb1.g) * p) + rgb1.g,
b: ((rgb2.b - rgb1.b) * p) + rgb1.b,
a: ((rgb2.a - rgb1.a) * p) + rgb1.a
};
return tinycolor(rgba);
};
// Readability Functions
// ---------------------
// <http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef (WCAG Version 2)
// `contrast`
// Analyze the 2 colors and returns the color contrast defined by (WCAG Version 2)
tinycolor.readability = function(color1, color2) {
var c1 = tinycolor(color1);
var c2 = tinycolor(color2);
return (Math.max(c1.getLuminance(),c2.getLuminance())+0.05) / (Math.min(c1.getLuminance(),c2.getLuminance())+0.05);
};
// `isReadable`
// Ensure that foreground and background color combinations meet WCAG2 guidelines.
// The third argument is an optional Object.
// the 'level' property states 'AA' or 'AAA' - if missing or invalid, it defaults to 'AA';
// the 'size' property states 'large' or 'small' - if missing or invalid, it defaults to 'small'.
// If the entire object is absent, isReadable defaults to {level:"AA",size:"small"}.
// *Example*
// tinycolor.isReadable("#000", "#111") => false
// tinycolor.isReadable("#000", "#111",{level:"AA",size:"large"}) => false
tinycolor.isReadable = function(color1, color2, wcag2) {
var readability = tinycolor.readability(color1, color2);
var wcag2Parms, out;
out = false;
wcag2Parms = validateWCAG2Parms(wcag2);
switch (wcag2Parms.level + wcag2Parms.size) {
case "AAsmall":
case "AAAlarge":
out = readability >= 4.5;
break;
case "AAlarge":
out = readability >= 3;
break;
case "AAAsmall":
out = readability >= 7;
break;
}
return out;
};
// `mostReadable`
// Given a base color and a list of possible foreground or background
// colors for that base, returns the most readable color.
// Optionally returns Black or White if the most readable color is unreadable.
// *Example*
// tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:false}).toHexString(); // "#112255"
// tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:true}).toHexString(); // "#ffffff"
// tinycolor.mostReadable("#a8015a", ["#faf3f3"],{includeFallbackColors:true,level:"AAA",size:"large"}).toHexString(); // "#faf3f3"
// tinycolor.mostReadable("#a8015a", ["#faf3f3"],{includeFallbackColors:true,level:"AAA",size:"small"}).toHexString(); // "#ffffff"
tinycolor.mostReadable = function(baseColor, colorList, args) {
var bestColor = null;
var bestScore = 0;
var readability;
var includeFallbackColors, level, size ;
args = args || {};
includeFallbackColors = args.includeFallbackColors ;
level = args.level;
size = args.size;
for (var i= 0; i < colorList.length ; i++) {
readability = tinycolor.readability(baseColor, colorList[i]);
if (readability > bestScore) {
bestScore = readability;
bestColor = tinycolor(colorList[i]);
}
}
if (tinycolor.isReadable(baseColor, bestColor, {"level":level,"size":size}) || !includeFallbackColors) {
return bestColor;
}
else {
args.includeFallbackColors=false;
return tinycolor.mostReadable(baseColor,["#fff", "#000"],args);
}
};
// Big List of Colors
// ------------------
// <http://www.w3.org/TR/css3-color/#svg-color>
var names = tinycolor.names = {
aliceblue: "f0f8ff",
antiquewhite: "faebd7",
aqua: "0ff",
aquamarine: "7fffd4",
azure: "f0ffff",
beige: "f5f5dc",
bisque: "ffe4c4",
black: "000",
blanchedalmond: "ffebcd",
blue: "00f",
blueviolet: "8a2be2",
brown: "a52a2a",
burlywood: "deb887",
burntsienna: "ea7e5d",
cadetblue: "5f9ea0",
chartreuse: "7fff00",
chocolate: "d2691e",
coral: "ff7f50",
cornflowerblue: "6495ed",
cornsilk: "fff8dc",
crimson: "dc143c",
cyan: "0ff",
darkblue: "00008b",
darkcyan: "008b8b",
darkgoldenrod: "b8860b",
darkgray: "a9a9a9",
darkgreen: "006400",
darkgrey: "a9a9a9",
darkkhaki: "bdb76b",
darkmagenta: "8b008b",
darkolivegreen: "556b2f",
darkorange: "ff8c00",
darkorchid: "9932cc",
darkred: "8b0000",
darksalmon: "e9967a",
darkseagreen: "8fbc8f",
darkslateblue: "483d8b",
darkslategray: "2f4f4f",
darkslategrey: "2f4f4f",
darkturquoise: "00ced1",
darkviolet: "9400d3",
deeppink: "ff1493",
deepskyblue: "00bfff",
dimgray: "696969",
dimgrey: "696969",
dodgerblue: "1e90ff",
firebrick: "b22222",
floralwhite: "fffaf0",
forestgreen: "228b22",
fuchsia: "f0f",
gainsboro: "dcdcdc",
ghostwhite: "f8f8ff",
gold: "ffd700",
goldenrod: "daa520",
gray: "808080",
green: "008000",
greenyellow: "adff2f",
grey: "808080",
honeydew: "f0fff0",
hotpink: "ff69b4",
indianred: "cd5c5c",
indigo: "4b0082",
ivory: "fffff0",
khaki: "f0e68c",
lavender: "e6e6fa",
lavenderblush: "fff0f5",
lawngreen: "7cfc00",
lemonchiffon: "fffacd",
lightblue: "add8e6",
lightcoral: "f08080",
lightcyan: "e0ffff",
lightgoldenrodyellow: "fafad2",
lightgray: "d3d3d3",
lightgreen: "90ee90",
lightgrey: "d3d3d3",
lightpink: "ffb6c1",
lightsalmon: "ffa07a",
lightseagreen: "20b2aa",
lightskyblue: "87cefa",
lightslategray: "789",
lightslategrey: "789",
lightsteelblue: "b0c4de",
lightyellow: "ffffe0",
lime: "0f0",
limegreen: "32cd32",
linen: "faf0e6",
magenta: "f0f",
maroon: "800000",
mediumaquamarine: "66cdaa",
mediumblue: "0000cd",
mediumorchid: "ba55d3",
mediumpurple: "9370db",
mediumseagreen: "3cb371",
mediumslateblue: "7b68ee",
mediumspringgreen: "00fa9a",
mediumturquoise: "48d1cc",
mediumvioletred: "c71585",
midnightblue: "191970",
mintcream: "f5fffa",
mistyrose: "ffe4e1",
moccasin: "ffe4b5",
navajowhite: "ffdead",
navy: "000080",
oldlace: "fdf5e6",
olive: "808000",
olivedrab: "6b8e23",
orange: "ffa500",
orangered: "ff4500",
orchid: "da70d6",
palegoldenrod: "eee8aa",
palegreen: "98fb98",
paleturquoise: "afeeee",
palevioletred: "db7093",
papayawhip: "ffefd5",
peachpuff: "ffdab9",
peru: "cd853f",
pink: "ffc0cb",
plum: "dda0dd",
powderblue: "b0e0e6",
purple: "800080",
rebeccapurple: "663399",
red: "f00",
rosybrown: "bc8f8f",
royalblue: "4169e1",
saddlebrown: "8b4513",
salmon: "fa8072",
sandybrown: "f4a460",
seagreen: "2e8b57",
seashell: "fff5ee",
sienna: "a0522d",
silver: "c0c0c0",
skyblue: "87ceeb",
slateblue: "6a5acd",
slategray: "708090",
slategrey: "708090",
snow: "fffafa",
springgreen: "00ff7f",
steelblue: "4682b4",
tan: "d2b48c",
teal: "008080",
thistle: "d8bfd8",
tomato: "ff6347",
turquoise: "40e0d0",
violet: "ee82ee",
wheat: "f5deb3",
white: "fff",
whitesmoke: "f5f5f5",
yellow: "ff0",
yellowgreen: "9acd32"
};
// Make it easy to access colors via `hexNames[hex]`
var hexNames = tinycolor.hexNames = flip(names);
// Utilities
// ---------
// `{ 'name1': 'val1' }` becomes `{ 'val1': 'name1' }`
function flip(o) {
var flipped = { };
for (var i in o) {
if (o.hasOwnProperty(i)) {
flipped[o[i]] = i;
}
}
return flipped;
}
// Return a valid alpha value [0,1] with all invalid values being set to 1
function boundAlpha(a) {
a = parseFloat(a);
if (isNaN(a) || a < 0 || a > 1) {
a = 1;
}
return a;
}
// Take input from [0, n] and return it as [0, 1]
function bound01(n, max) {
if (isOnePointZero(n)) { n = "100%"; }
var processPercent = isPercentage(n);
n = mathMin(max, mathMax(0, parseFloat(n)));
// Automatically convert percentage into number
if (processPercent) {
n = parseInt(n * max, 10) / 100;
}
// Handle floating point rounding errors
if ((Math.abs(n - max) < 0.000001)) {
return 1;
}
// Convert into [0, 1] range if it isn't already
return (n % max) / parseFloat(max);
}
// Force a number between 0 and 1
function clamp01(val) {
return mathMin(1, mathMax(0, val));
}
// Parse a base-16 hex value into a base-10 integer
function parseIntFromHex(val) {
return parseInt(val, 16);
}
// Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1
// <http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0>
function isOnePointZero(n) {
return typeof n == "string" && n.indexOf('.') != -1 && parseFloat(n) === 1;
}
// Check to see if string passed in is a percentage
function isPercentage(n) {
return typeof n === "string" && n.indexOf('%') != -1;
}
// Force a hex value to have 2 characters
function pad2(c) {
return c.length == 1 ? '0' + c : '' + c;
}
// Replace a decimal with it's percentage value
function convertToPercentage(n) {
if (n <= 1) {
n = (n * 100) + "%";
}
return n;
}
// Converts a decimal to a hex value
function convertDecimalToHex(d) {
return Math.round(parseFloat(d) * 255).toString(16);
}
// Converts a hex value to a decimal
function convertHexToDecimal(h) {
return (parseIntFromHex(h) / 255);
}
var matchers = (function() {
// <http://www.w3.org/TR/css3-values/#integers>
var CSS_INTEGER = "[-\\+]?\\d+%?";
// <http://www.w3.org/TR/css3-values/#number-value>
var CSS_NUMBER = "[-\\+]?\\d*\\.\\d+%?";
// Allow positive/negative integer/number. Don't capture the either/or, just the entire outcome.
var CSS_UNIT = "(?:" + CSS_NUMBER + ")|(?:" + CSS_INTEGER + ")";
// Actual matching.
// Parentheses and commas are optional, but not required.
// Whitespace can take the place of commas or opening paren
var PERMISSIVE_MATCH3 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
var PERMISSIVE_MATCH4 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
return {
CSS_UNIT: new RegExp(CSS_UNIT),
rgb: new RegExp("rgb" + PERMISSIVE_MATCH3),
rgba: new RegExp("rgba" + PERMISSIVE_MATCH4),
hsl: new RegExp("hsl" + PERMISSIVE_MATCH3),
hsla: new RegExp("hsla" + PERMISSIVE_MATCH4),
hsv: new RegExp("hsv" + PERMISSIVE_MATCH3),
hsva: new RegExp("hsva" + PERMISSIVE_MATCH4),
hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
};
})();
// `isValidCSSUnit`
// Take in a single string / number and check to see if it looks like a CSS unit
// (see `matchers` above for definition).
function isValidCSSUnit(color) {
return !!matchers.CSS_UNIT.exec(color);
}
// `stringInputToObject`
// Permissive string parsing. Take in a number of formats, and output an object
// based on detected format. Returns `{ r, g, b }` or `{ h, s, l }` or `{ h, s, v}`
function stringInputToObject(color) {
color = color.replace(trimLeft,'').replace(trimRight, '').toLowerCase();
var named = false;
if (names[color]) {
color = names[color];
named = true;
}
else if (color == 'transparent') {
return { r: 0, g: 0, b: 0, a: 0, format: "name" };
}
// Try to match string input using regular expressions.
// Keep most of the number bounding out of this function - don't worry about [0,1] or [0,100] or [0,360]
// Just return an object and let the conversion functions handle that.
// This way the result will be the same whether the tinycolor is initialized with string or object.
var match;
if ((match = matchers.rgb.exec(color))) {
return { r: match[1], g: match[2], b: match[3] };
}
if ((match = matchers.rgba.exec(color))) {
return { r: match[1], g: match[2], b: match[3], a: match[4] };
}
if ((match = matchers.hsl.exec(color))) {
return { h: match[1], s: match[2], l: match[3] };
}
if ((match = matchers.hsla.exec(color))) {
return { h: match[1], s: match[2], l: match[3], a: match[4] };
}
if ((match = matchers.hsv.exec(color))) {
return { h: match[1], s: match[2], v: match[3] };
}
if ((match = matchers.hsva.exec(color))) {
return { h: match[1], s: match[2], v: match[3], a: match[4] };
}
if ((match = matchers.hex8.exec(color))) {
return {
r: parseIntFromHex(match[1]),
g: parseIntFromHex(match[2]),
b: parseIntFromHex(match[3]),
a: convertHexToDecimal(match[4]),
format: named ? "name" : "hex8"
};
}
if ((match = matchers.hex6.exec(color))) {
return {
r: parseIntFromHex(match[1]),
g: parseIntFromHex(match[2]),
b: parseIntFromHex(match[3]),
format: named ? "name" : "hex"
};
}
if ((match = matchers.hex4.exec(color))) {
return {
r: parseIntFromHex(match[1] + '' + match[1]),
g: parseIntFromHex(match[2] + '' + match[2]),
b: parseIntFromHex(match[3] + '' + match[3]),
a: convertHexToDecimal(match[4] + '' + match[4]),
format: named ? "name" : "hex8"
};
}
if ((match = matchers.hex3.exec(color))) {
return {
r: parseIntFromHex(match[1] + '' + match[1]),
g: parseIntFromHex(match[2] + '' + match[2]),
b: parseIntFromHex(match[3] + '' + match[3]),
format: named ? "name" : "hex"
};
}
return false;
}
function validateWCAG2Parms(parms) {
// return valid WCAG2 parms for isReadable.
// If input parms are invalid, return {"level":"AA", "size":"small"}
var level, size;
parms = parms || {"level":"AA", "size":"small"};
level = (parms.level || "AA").toUpperCase();
size = (parms.size || "small").toLowerCase();
if (level !== "AA" && level !== "AAA") {
level = "AA";
}
if (size !== "small" && size !== "large") {
size = "small";
}
return {"level":level, "size":size};
}
// Node: Export function
if (typeof module !== "undefined" && module.exports) {
module.exports = tinycolor;
}
// AMD/requirejs: Define the module
else if (typeof define === 'function' && define.amd) {
define(function () {return tinycolor;});
}
// Browser: Expose to window
else {
window.tinycolor = tinycolor;
}
})(Math);
Presently/presently/users/static/users/assets/scss/abstracts/_fonts.scss 0 → 100644
View file @ 4fb74d9d
// External or internally hosted fonts
// Two ways we can go about adding custom fonts:
// ## Hosted Google fonts
// Drop the @import tag here and define the font families
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i|Source+Sans+Pro:300,500,700&display=swap');
$font-serif-family: 'Playfair Display';
$font-serif-weight-normal: 400;
$font-serif-style-italic: 400i;
$font-sans-family: 'Source Sans Pro';
$font-sans-weight-normal: 300;
$font-sans-weight-semi: 500;
$font-sans-weight-bold: 700;
$project-lineheight-base: 1.5;
$project-lineheight-loose: 1.6875;
$project-lineheight-tight: 1.25;
// Set defaults
$font-family-base: $font-sans-family, 'Healvetica Neue', sans-serif;
$font-weight-base: $font-sans-weight-normal;
$font-weight-bold: $font-sans-weight-bold;
$font-family-serif: $font-serif-family, serif;
Presently/presently/users/static/users/assets/scss/abstracts/_functions.scss 0 → 100644
View file @ 4fb74d9d
////
/// Oomph Scaffold Functions
/// @access public
/// @group Oomph Functions
/// @author Oomph, Inc. UX Engineers
/// @parameter none
/// @require no 3rd party requirements
////
/// Remove (strip) Units
/// @author Bourbon / Thoughbot
/// @parameter {Value} $value -Value, assumed number with unit
/// @example scss - Usage
/// line-height: strip-unit(1.5em);
/// @example css - Output
/// line-height: 1.5;
@function strip-unit($value) {
@return ($value / ($value * 0 + 1));
}
/// px()
/// Change a unitless value to px
/// @author jhogue
/// @require strip-unit()
/// @param {float} $value - Numeric value assumed to be pixels
/// @example scss - Usage
/// width: px(48);
/// @example css - Output
/// width: 48px;
@function px($value) {
@if not unitless($value) {
$value: strip-unit($value);
}
@return ($value * 1px);
}
/// em()
/// Change a (assumed) pixel value to an em
/// @author Bourbon / Thoughbot
/// @require strip-unit()
/// @param {float} $value - Numeric value assumed to be pixels
/// @param {float} $base - (optional) Numeric value for the pixel multiplier
/// @example scss - Usage
/// font-size: em(24);
/// width: em(48, 24);
/// @example css - Output
/// font-size: 1.5em;
/// width: 2em;
@function em($value, $base: 16) {
@if not unitless($value) {
$value: strip-unit($value);
}
@if not unitless($base) {
$base: strip-unit($base);
}
@return ($value / $base) * 1em;
}
/// rem()
/// Change a (assumed) pixel value to an rem
/// @author Bourbon / Thoughbot
/// @require strip-unit()
/// @param {float} $value - Numeric value assumed to be pixels
/// @param {float} $base - (very optional) Numeric value for the pixel multiplier
/// @example scss - Usage
/// width: rem(48);
/// @example css - Output
/// width: 3rem;
@function rem($value, $base: 16px) {
@if not unitless($value) {
$value: strip-unit($value);
}
@if not unitless($base) {
$base: strip-unit($base);
}
@return ($value / $base) * 1rem;
}
/// clearfix()
/// Clearfix still useful, though less and less
/// @author Bourbon / Thoughbot
/// @require {None}
/// @param {None}
/// @example scss - Usage
/// .element {
/// @include clearfix;
/// }
/// @example css - Output
/// .element::after {
/// clear: both;
/// content: "";
/// display: block;
/// }
@mixin clearfix {
&::after {
clear: both;
content: "";
display: block;
}
}
/// percent-color() =
/// Emulate the way Adobe Illustrator allows percentages of defined global colors
/// @link http://thesassway.com/intermediate/mixins-for-semi-transparent-colors
/// @require Bourbon strip-units(), SASS opacify() and mix()
/// @param $color - A color as Hex, RGB or HSL. Percent as numeric
/// @param $percent - Optional background color for mixing function
/// @param $background [white]
/// @example scss - Usage
/// background-color: percent-color(#666, 50%);
/// @example css - Output
/// background-color: #ccc;
@function percent-color($color, $percent, $background: white) {
$percent: strip-unit($percent);
$opaque: opacify($color, 1);
$solid-color: mix($opaque, $background, $percent);
@return $solid-color;
}
Presently/presently/users/static/users/assets/scss/abstracts/_index.scss 0 → 100644
View file @ 4fb74d9d
// Import all Abstracts
// Helpful functions and mixins for every project
@import 'functions';
@import 'mixins/clamping';
@import 'mixins/fluid-units';
@import 'mixins/fluid-typography';
@import 'mixins/hacks';
@import 'mixins/maintain-ratio';
@import 'mixins/screen-reader';
@import 'mixins/show-hide';
// Fonts should load at the top of the CSS file
@import 'fonts';
// Project Variables — things that need to be defined before BS4
@import 'project-vars/breakpoints';
@import 'project-vars/colors';
@import 'project-vars/spacing';
@import 'project-vars/type-sizes';
@import 'project-vars/vars';
Presently/presently/users/static/users/assets/scss/abstracts/mixins/_clamping.scss 0 → 100644
View file @ 4fb74d9d
/// Various ways to do line clamping
/// @author jhogue
///
/// @param {String} Max-width value
///
/// @example scss - Usage
/// // .element {
/// // @include single-line-clamp(em(240));
/// // }
///
/// @example css - Output
/// // .element {
/// // max-width: 15em;
/// // overflow: hidden;
/// // text-overflow: ellipsis;
/// // white-space: nowrap;
/// // }
///
@mixin single-line-clamp($width) {
max-width: $width;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/// Simple approach for multi-lines
/// @author jhogue
///
/// @param {Numeric} Number of lines to clamp to
/// @param {String} Font-size
/// @param {String} Line-height
///
/// @example scss - Usage
/// // .element {
/// // @include multi-line-clamp(2);
/// // }
///
/// @example css - Output
/// // .element {
/// // position: relative;
/// // overflow: hidden;
/// // max-height: 3.125rem;
/// // padding-right: 1em;
/// // }
/// // .element::before,
/// // .element::after {
/// // position: absolute;
/// // bottom: 0;
/// // right: 0;
/// // }
/// // .element::before {
/// // z-index: 2;
/// // content: '\2026';
/// // }
/// // .element::after {
/// // content: "";
/// // z-index: 1;
/// // width: 1em;
/// // height: 1em;
/// // }
///
/// @example With more complicated $font-size declaration
/// // .element {
/// // @include multi-line-clamp(2, rem(map-get(map-get($type-sizes, x-large), h3)));
/// // }
///
@mixin multi-line-clamp($lines, $fs: $font-size-base, $lh: $line-height-base) {
// Set up the variables
$lines: $lines * 1rem;
$fs: strip-unit($fs);
$lh: strip-unit($lh);
position: relative;
overflow: hidden;
max-height: ($lh * $fs) * $lines;
padding-right: 1em; // space for ellipsis
&::before,
&::after {
position: absolute;
bottom: 0;
right: 0;
}
&::before {
z-index: 2;
content: '\2026';
}
&::after {
content: "";
z-index: 1;
width: 1em;
height: 1em;
}
}
Presently/presently/users/static/users/assets/scss/abstracts/mixins/_fluid-typography.scss 0 → 100644
View file @ 4fb74d9d
/// Deep getter to go into the $type-sizes array
/// @author jhogue
///
/// @require {map} $type-sizes
///
/// @require {function} type-of
/// @require {function} map-get
///
/// @param {String} Breakpoint map key name
/// @param {String} Element name [base]
///
/// @example scss - Usage
/// font-size: px(one-type-size('x-large', 'h1'));
///
/// @example css - Output
/// font-size: 31px;
///
@function one-type-size($element, $break: null, $unit: 1rem) {
@if $break == null {
// No breakpoint name is defined, so grab the first one
$keys: map-keys($type-sizes);
$break: nth($keys, 1);
}
@if type-of($type-sizes) != 'map' {
@error 'A list named $type-sizes is undefined. [Function one-type-size()]';
}
@if type-of(map-get($type-sizes, $break)) != 'map' {
@error 'Can’t reach into the $type-sizes map for another map. [Function one-type-size()]';
}
$elementsize: map-get(map-get($type-sizes, $break), $element);
// Not sure I like this. We assume pixels in and REM/EM out with this math
@return strip-unit(rem($elementsize)) * $unit;
}
/// Use fluid-units() to output all sizes for a typographic element
/// @author jhogue
///
/// @require {map} $type-sizes
/// @require {map} $project-breakpoints
///
/// @require {function} type-of
/// @require {function} map-keys
/// @require {function} map-has-key
/// @require {function} nth
/// @require {function} length
/// @require {function} em
///
/// @require {function} bp
///
/// @require {mixin} one-type-size
/// @require {mixin} fluid-units
///
/// @param {String} Element name [base]
/// @param {String} Render mobile values [true]
///
/// @example scss - Usage
/// @include one-element-size(h1);
///
/// @example css - Output
/// h1 {
/// font-size: 1.9375em;
/// }
/// @media (min-width: 30em) {
/// h1 {
/// font-size: calc(1.9375em + 0.8125 * (100vw - 30em) / 55);
/// }
/// }
/// @media (min-width: 85em) {
/// h1 {
/// font-size: calc(1.9375em + 0.8125 * 1em);
/// }
/// }
///
@mixin fluid-type-sizes($elem: 'base', $mobile: true) {
@if type-of($type-sizes) != 'map' {
@error 'A list named $type-sizes is undefined. [Mixin one-element-size()]';
}
// List only the keys from the $type-sizes list.
// Expects only two. Only uses the first and last
$keys: map-keys($type-sizes);
$first-key: nth($keys, 1);
$last-key: nth($keys, length($keys));
// Change these key values into a typographic value
// by getting the matching key/value pair from the $type-sizes array
$min-value: strip-unit((one-type-size($elem, $first-key)));
$max-value: strip-unit((one-type-size($elem, $last-key)));
// Use the same keys to grab the corresponding breakpoints
@if type-of($project-breakpoints) != 'map' {
@error 'A list named $project-breakpoints is undefined. [Mixin one-element-size()]';
}
@if not map-has-key($project-breakpoints, $first-key) {
@error 'Your $type-sizes map key "#{$first-key}" does not have a corresponding key in $project-breakpoints. [Mixin one-element-size()]';
}
@if not map-has-key($project-breakpoints, $last-key) {
@error 'Your $type-sizes map key "#{$last-key}" does not have a corresponding key in $project-breakpoints. [Mixin one-element-size()]';
}
$min-vw: strip-unit(rem(bp($first-key)));
$max-vw: strip-unit(rem(bp($last-key)));
// Finally, use this mixin to set the base size and max size within the viewport range
@if $min-value != $max-value {
// Min and Max are different, so output the crazy calc function
@include fluid-units('font-size', $min-value, $max-value, $min-vw, $max-vw, 1rem, $mobile);
} @else {
font-size: ($min-value * 1rem);
}
}
Presently/presently/users/static/users/assets/scss/abstracts/mixins/_fluid-units.scss 0 → 100644
View file @ 4fb74d9d
/// fluid-units() =
/// Set a minimum value, maximum value, and use calc() to fluidly go from one to the other in between
/// @author J. Hogue @artinruins
/// @link http://www.sassmeister.com/gist/7f22e44ace49b5124eec
/// @link Inspired by http://madebymike.com.au/writing/precise-control-responsive-typography/
///
/// @require All numbers passed must be the same unit and unitless. The last parameter is the unit of the output
///
/// @param {List} $properties
/// List one or multiple properties to assign values to
///
/// @param {String} $min-value
/// @param {String} $max-value
/// Min/Max values for the measurement. Both should be unitless values.
///
/// @param {String} $min-vw
/// @param {String} $max-vw
/// Min/Max viewport width. Which viewport "locks" should the fluid measurements start and end at?
///
/// @param {String} $unit
/// Assumes 1rem by default
///
/// @example scss - Usage with CSS vars
/// // .element {
/// // @include fluid-units('padding-top' 'padding-bottom', 1, 3, (480/16), (1200/16), 1rem);
/// // }
///
/// @example css - Output
/// // .element {
/// // padding-top: 1rem;
/// // padding-bottom: 1rem;
/// // }
/// // @media (min-width: 30rem) {
/// // .element {
/// // padding-top: calc(1rem + (3 - 1) * (100vw - 30rem) / 35);
/// // padding-bottom: calc(1rem + (3 - 1) * (100vw - 30rem) / 35);
/// // }
/// // }
/// // @media (min-width: 75rem) {
/// // .element {
/// // padding-top: 3rem;
/// // padding-bottom: 3rem;
/// // }
/// // }
///
/// Helper function
@function fluid-calc($min-value, $max-value, $min-vw, $max-vw, $unit: 1rem) {
@return calc(#{$min-value * $unit} + (#{$max-value} - #{$min-value}) * ((100vw - #{$min-vw * $unit}) / #{$max-vw - $min-vw}));
}
/// Actual mixin
@mixin fluid-units($properties, $min-value, $max-value, $min-vw, $max-vw, $unit: 1rem, $mobile: true) {
// Strip units if not unitless
$min-value: strip-unit($min-value);
$max-value: strip-unit($max-value);
$min-vw: strip-unit($min-vw);
$max-vw: strip-unit($max-vw);
// Mobile-first: declare the $min-value as the default for any property passed
@if ($mobile == true) {
@each $property in $properties {
#{$property}: #{$min-value * $unit};
}
}
// Now declare the creamy, fluid center using a media query at the min-width
@media (min-width: #{$min-vw * $unit}) {
@each $property in $properties {
#{$property}: fluid-calc($min-value, $max-value, $min-vw, $max-vw, $unit);
}
}
// Finally, stop the crazy fluidity and set the max value at the max viewport width
@media (min-width: #{$max-vw * $unit}) {
@each $property in $properties {
#{$property}: #{$max-value * $unit};
}
}
}
Presently/presently/users/static/users/assets/scss/abstracts/mixins/_hacks.scss 0 → 100644
View file @ 4fb74d9d
///
/// Store useful Browser Hacks here
/// Test them to pass the Linter and then document them for everyone else
///
/// See http://browserhacks.com/ for some inspiration when you encounter a browser that needs hacking
///
// Target old IE only — works for IE10 and 11, not newer
@mixin hack-for-old-ie() {
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
@content;
}
}
// Target ANY Firefox browser
@mixin hack-for-any-firefox() {
// stylelint-disable function-url-quotes
@-moz-document url-prefix() {
@content;
}
// stylelint-enable function-url-quotes
}
Presently/presently/users/static/users/assets/scss/abstracts/mixins/_maintain-ratio.scss 0 → 100644
View file @ 4fb74d9d
//// maintain-ratio(), proportional-container() and image-cover() =
///
/// Set a container to crop an element and maintain an aspect ratio
/// Use proportional-container() and image-cover() together:
///
/// @link https://gist.github.com/brianmcallister/2932463
///
/// @example scss - Usage
/// .container {
/// @include proportional-container(16 9);
///
/// .element {
/// @include image-cover();
/// }
/// }
///
/// @example css - Output
/// .container {
/// position: relative;
/// overflow: hidden;
/// z-index: 1;
/// width: 100%;
/// height: 0;
/// padding-bottom: 56.25%;
/// }
/// .container .element {
/// transform: translateX(-50%);
/// top: 0;
/// left: 50%;
/// width: auto;
/// max-width: none;
/// height: 100%;
/// }
////
/// maintain-ratio() =
/// Helper mixin that calculates a percentage padding value to "fix" the proportions of a container to an aspect ratio
/// @author jhogue
///
/// @param {list} Ratio [1 1]
///
/// @require {function} length
/// @require {function} percentage
/// @require {function} nth
///
/// @example scss - Usage
/// @include maintain-ratio(16 9)
///
/// @example css - Output
/// width: 100%;
/// height: 0;
/// padding-bottom: 56.25%;
///
@mixin maintain-ratio($ratio: 1 1) {
@if length($ratio) < 2 or length($ratio) > 2 {
@warn "$ratio must be a list with two values.";
}
width: 100%;
height: 0;
padding-bottom: percentage(nth($ratio, 2) / nth($ratio, 1));
}
/// proportional-container() =
/// Sets a container to "crop" an element to a fixed aspect ratio
/// @author jhogue
///
/// @param {list} Ratio [1 1]
///
/// @require {mixin} maintain-ratio
///
/// @example scss - Usage
/// @include proportional-container(16 9)
///
/// @example css - Output
/// position: relative;
/// overflow: hidden;
/// z-index: 1;
/// height: 0;
/// padding-bottom: 56.25%;
/// width: 100%
///
@mixin proportional-container($ratio: 1 1) {
@include maintain-ratio($ratio);
position: relative;
overflow: hidden;
z-index: 1;
}
/// image-cover() =
/// Sets a container to "crop" an element to a fixed aspect ratio
/// @author jhogue
///
/// @param {String} $center ['100% auto']
/// Accepts '100% auto' (width height), 'auto 100%' (width height), or 'contain'
///
/// @require {library} Bourbon
/// @require {mixin} transform
///
/// @example scss - Usage
/// @include image-cover(auto 100%)
///
@mixin image-cover($center: '100% auto') {
$allowed: ('100% auto','auto 100%','contain');
@if not index($allowed, $center) {
@error "Keyword `#{$center}` for mixin 'image-cover' is not allowed. `#{$allowed}` is expected.";
}
position: absolute;
z-index: 2;
@if ($center == 'contain') {
// Keep the entire element inside the container
@include transform(translate(-50%,-50%));
top: 50%;
left: 50%;
width: auto;
height: auto;
max-height: 100%;
} @else if ($center == '100% auto') {
// Fill the width, let the height be what it needs to be
@include transform(translateY(-50%));
top: 50%;
left: 0;
width: 100%;
height: auto;
} @else {
// Default: Fill the height, let the width be what it needs to be
@include transform(translateX(-50%));
top: 0;
left: 50%;
width: auto;
max-width: none;
height: 100%;
}
}
Presently/presently/users/static/users/assets/scss/abstracts/mixins/_screen-reader.scss 0 → 100644
View file @ 4fb74d9d
// Only display content to screen readers
//
// See: http://a11yproject.com/posts/how-to-hide-content/
// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
@mixin sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
clip-path: inset(50%);
border: 0;
}
// Use in conjunction with .sr-only to only display content when it's focused.
//
// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
//
// Credit: HTML5 Boilerplate
@mixin sr-only-focusable {
&:active,
&:focus {
position: static;
width: auto;
height: auto;
overflow: visible;
clip: auto;
white-space: normal;
clip-path: none;
}
}
Presently/presently/users/static/users/assets/scss/abstracts/mixins/_show-hide.scss 0 → 100644
View file @ 4fb74d9d
// Utilities to make hiding or showing an element quicker
@mixin hide {
display: none;
visibility: hidden;
}
@mixin show($d: block) {
display: $d;
visibility: visible;
}
Presently/presently/users/static/users/assets/scss/abstracts/project-vars/_breakpoints.scss 0 → 100644
View file @ 4fb74d9d
//
// Breakpoints
//
$project-breakpoints: (
// List as unitless pixels
base: 440, // 620-440= 180
small: 620, // 760-620= 140
medium: 760, // 960-760= 200
large: 960, // 1200-960= 240
x-large: 1200, // 1520-1200 = 320
xx-large: 1520 // 1520-1200 = 320
);
$project-maxwidths: (
base: 1380,
text: 800
);
// Helpers
@function bp($bp) {
@return em(map-get($project-breakpoints, $bp));
}
// For responsive typography
// Declare a minimum and maximum viewport size for fluidity to happen within
$min-vw: strip-unit(em(bp(base)));
$max-vw: strip-unit(em(bp(large)));
$maxwidth-container: em(map-get($project-maxwidths, base));
$maxwidth-text: em(map-get($project-maxwidths, text));
Presently/presently/users/static/users/assets/scss/abstracts/project-vars/_colors.scss 0 → 100644
View file @ 4fb74d9d
//
// Color system
//
$white: #fff;
$black: #1a1818; // slightly warm black h0 s5 b10
// Oomph color palette
$project-colors: (
red: #d62901,
teal: #70BDC1,
blue: #4a7090,
denim: #2d5070,
orange: #e89424,
green: #008a65,
white: $white,
grey-100: #f8f2f2, // h0 s2 b97
grey-300: #b8aeae, // h0 s5 b72
grey-400: #aaa2a2, // h0 s5 b65
grey-700: #474444, // h0 s5 b28
grey-800: #333030, // h0 s5 b20
black: $black,
blackest: #0f0e0e
);
// Helper
@function palette($color) {
@return map-get($project-colors, $color);
}
// Project colors
$project-color-body-bg__dark: palette(blackest);
$project-color-main-bg__dark: palette(black);
$project-color-body-fg__dark: palette(grey-400);
$project-color-body-bg__light: palette(white);
$project-color-main-bg__light: palette(grey-100);
$project-color-body-fg__light: palette(grey-800);
// Links
$link-color__dark: palette(teal);
$link-decoration: underline;
$link-hover-color__dark: palette(grey-100);
$link-hover-decoration: none;
$link-color__light: palette(blue);
$link-hover-color__light: palette(grey-800);
// Other
$code-color__dark: palette(green);
$border-color__dark: rgba($white, 0.15);
$border-color__light: rgba($black, 0.15);
$pass__dark: #14cc45;
$fail__dark: #f23900;
$edge__dark: #fe6;
$pass__light: #0b8428;
$fail__light: #c63606;
$edge__light: #b45e09;
Presently/presently/users/static/users/assets/scss/abstracts/project-vars/_spacing.scss 0 → 100644
View file @ 4fb74d9d
// Establishing some vertical rhythm for block elements
// We use em so that they scale based on the font size of the element and breakpoint
$project-vertical-rhythm: ($project-lineheight-base * 1rem);
// Horizontal spacing
$inside-min: 1rem;
$inside-max: 2rem;
$outside-min: 1rem;
$outside-max: 3rem;
$vertical-min: $project-vertical-rhythm;
$vertical-max: ($project-vertical-rhythm * 3);
Presently/presently/users/static/users/assets/scss/abstracts/project-vars/_type-sizes.scss 0 → 100644
View file @ 4fb74d9d
//
// Fluid Type-size system
//
////
/// Required list of sizes for typographics elements
/// 1) Decide which breakpoint that the fluidity will begin and end.
/// These should correspond to named keys in the $rpp-breakpoints map
/// 3) Set base font sizes for mobile first
/// 4) Set the desired sizes for desktop
/// Mixins will fluidly change between the two values
////
/// Typographic Scales Map
/// List as unitless pixels, use SASS function to convert to whatever you want
///
$type-sizes: (
// 1.125 typographic scale base 15
small: (
small: 13,
base: 15,
h6: 15,
h5: 16,
h4: 18,
h3: 20,
h2: 22,
h1: 24,
display-4: 27,
display-3: 30,
display-2: 33,
display-1: 37
),
// 1.22 typographic scale base 18
x-large: (
small: 15,
base: 18,
h6: 18,
h5: 21,
h4: 25,
h3: 30,
h2: 36,
h1: 43,
display-4: 52,
display-3: 63,
display-2: 76,
display-1: 92
),
);
Presently/presently/users/static/users/assets/scss/abstracts/project-vars/_vars.scss 0 → 100644
View file @ 4fb74d9d
//
// General variables
//
$transition: all 250ms ease;
$kerning: 0.03125em;
// Focus styles
$focus-outline-width: 0.125rem;
$focus-outline-style: solid;
// Z Indices
$z-indices: (
base: 1,
);
// Z-index helper
@function z($name: base) {
@return map-get($z-indices, $name);
}
Presently/presently/users/static/users/assets/scss/base/_global.scss 0 → 100644
View file @ 4fb74d9d
pre {
line-height: 1.8;
padding: $vertical-min $inside-min;
margin-bottom: 1.375rem;
}
hr {
border: 0;
color: transparent;
height: 0px;
margin: 0;
padding: 0;
}
Presently/presently/users/static/users/assets/scss/base/_index.scss 0 → 100644
View file @ 4fb74d9d
// Base Styles
@import 'reset';
@import 'global';
@import 'media';
@import 'typography';
@import 'utilities';
Presently/presently/users/static/users/assets/scss/base/_media.scss 0 → 100644
View file @ 4fb74d9d
// Default starting point for media.
img {
height: auto;
max-width: 100%;
}
video {
height: auto;
max-width: 100%;
width: 100%;
}
iframe {
max-width: 100%;
width: 100%;
}
Presently/presently/users/static/users/assets/scss/base/_reset.scss 0 → 100644
View file @ 4fb74d9d
// A simple, modern reset without a lot of opinions
// https://hankchizljaw.com/wrote/a-modern-css-reset/
// Box sizing rules
*,
*::before,
*::after {
box-sizing: border-box;
}
// Remove default margin
body,
h1,
h2,
h3,
h4,
p,
li,
figure,
figcaption,
blockquote,
dl,
dd {
margin: 0;
}
// Set core body defaults
body {
//line-height: 1.5;
min-height: 100vh;
scroll-behavior: smooth;
text-rendering: optimizeSpeed;
// Since we replaced BS4 Reboot, need to declare some things:
font-family: $font-family-base;
font-size: 100%;
font-weight: $font-weight-base;
line-height: $project-lineheight-base;
color: $project-color-body-fg__dark;
text-align: left;
background-color: $project-color-body-bg__dark;
@media (max-width: bp(small)) {
text-rendering: optimizeLegibility;
}
}
// Remove styles on ul, ol elements with a class attribute
//ul[class],
//ol[class] {
// list-style: none;
// margin: 0; // be careful, though, this can be have more specificity than we want
//}
.list-unstyled {
margin: 0;
}
// A elements that don't have a class get default styles
a:not([class]) {
text-decoration-skip-ink: auto;
}
// Make images easier to work with
img {
max-width: 100%;
display: block;
}
// Natural flow and rhythm in articles by default
.rhythm > * + * {
margin-top: $project-vertical-rhythm;
}
// Inherit fonts for inputs and buttons
input,
button,
textarea,
select {
font: inherit;
}
a {
color: $link-color__dark;
text-decoration: $link-decoration;
-webkit-text-decoration-skip: objects; // Remove gaps in links underline in iOS 8+ and Safari 8+
transition: $transition;
&:hover,
&:focus {
color: $link-hover-color__dark;
text-decoration: $link-hover-decoration;
}
}
// And undo these styles for placeholder links/named anchors (without href)
// which have not been made explicitly keyboard-focusable (without tabindex).
// See https://github.com/twbs/bootstrap/issues/19402
a:not([href]):not([tabindex]) {
color: inherit;
text-decoration: none;
&:hover,
&:focus {
color: inherit;
text-decoration: none;
outline: 0;
}
}
// Suppress the focus outline on elements that cannot be accessed via keyboard.
// This prevents an unwanted focus outline from appearing around elements that
// might still respond to pointer events.
// Credit: https://github.com/suitcss/base
[tabindex="-1"]:focus {
outline: 0 !important;
}
// Remove all animations and transitions for people that prefer not to see them
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
\ No newline at end of file
Presently/presently/users/static/users/assets/scss/base/_typography.scss 0 → 100644
View file @ 4fb74d9d
// Resets of Bootstrap
b,
strong,
th,
dt {
font-weight: $font-weight-bold;
letter-spacing: $kerning;
}
// All display and utility classes
//.display-1,
//.display-2,
//.display-3,
//.display-4 {}
.display-1 {
@include fluid-type-sizes('display-1');
line-height: 1.105;
margin-top: 2rem;
margin-bottom: 1rem;
}
.display-2 {
@include fluid-type-sizes('display-2');
line-height: 1;
margin-top: 1.625rem;
margin-bottom: 1.5rem;
}
.display-3 {
@include fluid-type-sizes('display-3');
line-height: 1.1875;
margin-top: 2rem;
margin-bottom: 1.25rem;
}
.display-4 {
@include fluid-type-sizes('display-4');
line-height: 1.375;
margin-top: -0.5rem;
margin-bottom: 0.875rem;
}
// All headers and utility classes
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
font-family: $font-family-serif;
font-weight: normal;
}
// Set Type fluidly
h1,
.h1 {
@include fluid-type-sizes('h1');
//margin-top: 1.875rem;
//margin-bottom: 1.625rem;
}
h2,
.h2 {
@include fluid-type-sizes('h2');
//line-height: 1.333;
//margin-top: 2.125rem;
//margin-bottom: 1.375rem;
}
h3,
.h3 {
@include fluid-type-sizes('h3');
//font-weight: $font-weight-bold;
//margin-top: 2.5rem;
//margin-bottom: 1.25rem;
}
h4,
.h4 {
@include fluid-type-sizes('h4');
//margin-top: -0.25rem;
//margin-bottom: 1.5rem;
}
h5,
.h5 {
@include fluid-type-sizes('h5');
font-weight: $font-weight-bold;
//margin-top: 1.625rem;
//margin-bottom: 0.25rem;
}
h6,
.h6 {
@include fluid-type-sizes('h6');
font-weight: $font-weight-bold;
letter-spacing: $kerning;
//line-height: 1.35;
//margin-top: 1.625rem;
//margin-bottom: 0.125rem;
text-transform: uppercase;
}
// Base size applied to elements (not containers)
p,
blockquote,
address,
li,
dt,
dd,
label,
input,
.text-size-normal {
@include fluid-type-sizes('base', false);
}
// Margin bottoms
// p already declared properly via BS4
//blockquote,
//address,
//ul,
//ol,
//dl {
// margin-bottom: $paragraph-margin-bottom;
//}
// A little more space after list-items
li {
padding-bottom: 0.125rem;
}
details {
padding-bottom: 1rem;
margin-bottom: 0.5rem;
}
summary {
> * {
display: inline-block;
}
&::-webkit-details-marker {
font-size: 1.75em;
}
}
// Type utilities
small,
.text-small {
@include fluid-type-sizes('small');
}
.text-uppercase {
letter-spacing: $kerning;
text-transform: uppercase;
}
.text-italic {
font-family: $font-family-serif;
font-style: italic;
letter-spacing: $kerning;
}
abbr,
.text-abbr {
font-size: 93.75%;
letter-spacing: $kerning;
text-transform: uppercase;
}
Presently/presently/users/static/users/assets/scss/base/_utilities.scss 0 → 100644
View file @ 4fb74d9d
// Spacing
.u__space__outer {
@include fluid-units (
'padding-left' 'padding-right',
$outside-min,
$outside-max,
$min-vw,
$max-vw,
1rem
);
}
.u__space__inner {
@include fluid-units (
'padding-left' 'padding-right',
$inside-min,
$inside-max,
$min-vw,
$max-vw,
1rem
);
}
.u__space__vertical {
@include fluid-units (
'padding-top' 'padding-bottom',
$vertical-min,
$vertical-max,
$min-vw,
$max-vw,
1rem
);
}
.u__space__vertical--top {
@include fluid-units (
'padding-top',
$vertical-min,
$vertical-max,
$min-vw,
$max-vw,
1rem
);
}
.u__space__vertical--bottom {
@include fluid-units (
'padding-bottom',
$vertical-min,
$vertical-max,
$min-vw,
$max-vw,
1rem
);
}
.text-align-left {
text-align: left;
}
.text-align-center {
text-align: center;
}
.text-align-right {
text-align: right;
}
Presently/presently/users/static/users/assets/scss/components/_colorcube.scss 0 → 100644
View file @ 4fb74d9d
.cc {
&__brand {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: space-between;
&__title {
a {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: flex-start;
padding-top: 0.5rem;
text-decoration: none;
img {
margin: 0 1rem -0.625rem 0;
}
}
}
&__subtitle {}
}
&__form {
&__textarea {
height: 10.5em;
width: 100%;
}
&__input {
padding: 0.75rem;
}
&__row &__label {
display: inline-block;
padding: 0.75rem;
width: 4em;
}
&__row &__input {
width: 6em;
}
&__button {
border: 0;
cursor: pointer;
display: inline-block;
font-weight: $font-sans-weight-bold;
padding: 0.5rem 1.5rem;
text-transform: uppercase;
transition: $transition;
-webkit-appearance: none;
}
}
&__results {
@include hide;
&__title {}
&__content {}
}
}
Presently/presently/users/static/users/assets/scss/components/_index.scss 0 → 100644
View file @ 4fb74d9d
// Component Styles: page sections
@import 'page';
@import 'colorcube';
@import 'results';
@import 'theme';
Presently/presently/users/static/users/assets/scss/components/_page.scss 0 → 100644
View file @ 4fb74d9d
.p {
&__header {
background-color: $project-color-body-bg__dark;
}
&__main {
background-color: $project-color-main-bg__dark;
}
&__footer {
background-color: $project-color-body-bg__dark;
small {
color: palette(grey-300);
}
&__logo {
float: left;
margin-right: $inside-min;
}
}
}
Presently/presently/users/static/users/assets/scss/components/_results.scss 0 → 100644
View file @ 4fb74d9d
$swatch-border-width: 5px;
$swatch-size: rem(120);
.results {
&__row {
display: flex;
flex-flow: row nowrap;
padding-top: 1rem;
&__header {}
}
&__col {
padding-bottom: 1rem;
flex: 1 0 auto;
}
&__row &__row {
border: 0;
flex: 1 0 50%;
padding-top: 0;
}
}
// Specific Columns
.ratios {
&__original {
flex: 0 0 ($swatch-size * 1.5);
}
&__on-light {}
&__on-dark {}
&__custom {
input {
padding: 0.25rem 0.5rem;
width: 6em;
}
}
}
// Original color
.original {
&__label {
padding-bottom: 0.5rem;
}
&__hsl {
float: left;
p {
padding: 0.375rem 0 0.375rem;
}
}
&__swatch {
float: right;
height: $swatch-size;
width: ($swatch-size * 0.75);
}
}
// Modifications column
.mod {
&__label {
padding-bottom: 0.5rem;
}
&__swatch {
float: left;
margin-right: 0.5rem;
height: $swatch-size;
width: ($swatch-size * 0.75);
}
&__controls {
label {
display: inline-block;
font-weight: $font-sans-weight-bold;
width: 1em;
}
input {
margin: 0 0 -1px;
padding: 0.375rem 0 0.375rem 0.5rem;
&::-webkit-inner-spin-button {
opacity: 1; // always show (negate autohide for Chrome)
}
}
}
}
.color-ratio {
&__wrapper {
.icon {
display: inline-block;
font-size: rem(24);
text-align: center;
width: 0.875em;
}
}
&__passfail {
b {
@include sr-only;
}
}
&__wrapper + &__wrapper {
margin-top: - $swatch-border-width;
}
&__label {
padding-bottom: 0.5rem;
.target-45 &,
.target-3 & {
@include hide;
}
.ratios__on-light &,
.ratios__on-dark & {
padding: 0.5rem 0 0.75rem;
}
}
&__swatch {
border-style: solid;
border-width: $swatch-border-width;
display: inline-block;
font-weight: $font-sans-weight-semi;
line-height: $project-lineheight-tight;
overflow: hidden;
padding: 0.625rem 0.5rem;
position: relative;
text-align: center;
vertical-align: middle;
width: 7rem;
}
.fail &__swatch::before {
border: 2px solid currentColor;
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 150%;
transform: translate(-50%, -50%) rotate(-33deg);
}
.target-7 &__swatch {}
.target-45 &__swatch {}
.target-3 &__swatch {}
&__passfail {
text-transform: uppercase;
}
&__results {
display: inline-block;
padding-left: 0.5rem;
vertical-align: middle;
}
}
.level {
&--AAplus,
&--AAAplus {
font-size: rem(24);
}
}
Presently/presently/users/static/users/assets/scss/components/_theme.scss 0 → 100644
View file @ 4fb74d9d
// All color applications stored here
// Default colors and scheme: "dark mode"
pre {
background-color: rgba($code-color__dark, 0.1);
border-top: 3px solid rgba($code-color__dark, 0.5);
border-bottom: 3px solid rgba($code-color__dark, 0.5);
}
hr {
background-color: transparent;
border-top: 1px solid $border-color__dark;
}
.text-light {
color: palette(grey-100);
}
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
color: palette(grey-100);
}
details {
border-bottom: 1px solid $border-color__dark;
}
summary {
&::-webkit-details-marker {
color: palette(white);
}
}
.cc {
&__brand {
&__title {
a {
color: palette(grey-100);
}
}
}
&__form {
&__label {
color: palette(grey-100);
}
&__input {
color: palette(grey-300);
background-color: $project-color-body-bg__dark;
border: 1px solid $border-color__dark;
}
&__button {
background-color: palette(teal);
color: palette(blackest);
&:hover,
&:focus {
background-color: palette(blue);
color: palette(white);
}
&:active {
background-color: palette(red);
color: palette(white);
}
}
}
}
.results {
&__row {
border-bottom: 1px solid $border-color__dark;
}
}
.color-ratio {
&__wrapper {
&.pass .icon { color: $pass__dark; }
&.edge .icon { color: $edge__dark; }
&.fail .icon { color: $fail__dark; }
}
&__label {
strong {
color: palette(white);
}
}
}
// Alternate theme: "light mode"
@media (prefers-color-scheme: light) {
body {
color: $project-color-body-fg__light;
background-color: $project-color-body-bg__light;
}
a {
color: $link-color__light;
&:hover,
&:focus {
color: $link-hover-color__light;
}
}
.p {
&__header {
background-color: $project-color-body-bg__light;
}
&__main {
background-color: $project-color-main-bg__light;
}
&__footer {
background-color: $project-color-body-bg__light;
small {
color: palette(grey-700);
}
}
}
.text-light {
color: palette(grey-700);
}
hr {
border-top: 1px solid $border-color__light;
}
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
color: palette(grey-700);
}
details {
border-bottom: 1px solid $border-color__light;
}
summary {
&::-webkit-details-marker {
color: palette(black);
}
}
.cc {
&__brand {
&__title {
a {
color: palette(grey-800);
}
}
}
&__form {
&__label {
color: palette(grey-700);
}
&__input {
color: palette(grey-700);
background-color: $project-color-body-bg__light;
border: 1px solid $border-color__light;
}
&__button {
background-color: palette(blue);
color: palette(white);
&:hover,
&:focus {
background-color: palette(teal);
color: palette(black);
}
}
}
}
.results {
&__row {
border-bottom: 1px solid $border-color__light;
}
}
.color-ratio {
&__wrapper {
&.pass .icon { color: $pass__light; }
&.edge .icon { color: $edge__light; }
&.fail .icon { color: $fail__light; }
}
&__label {
strong {
color: palette(black);
}
}
}
}
Presently/presently/users/static/users/assets/scss/layout/_grid.scss 0 → 100644
View file @ 4fb74d9d
//
// Grid
//
.g {
&__row {
display: flex;
flex-flow: row wrap;
align-items: flex-start;
margin: 0 - $inside-min;
}
&__col {
flex: 1 0 100%;
max-width: 100%;
padding: 0 $inside-min;
}
&--wide {
flex: 1 1 100%;
min-width: 100%;
}
&--two {
@media (min-width: bp(small)) {
flex: 1 0 50%;
max-width: 50%;
}
}
&--three {
@media (min-width: bp(medium)) {
flex: 1 0 33.3%;
max-width: 33.3%;
}
}
}
\ No newline at end of file
Presently/presently/users/static/users/assets/scss/layout/_index.scss 0 → 100644
View file @ 4fb74d9d
// Base Styles
@import 'layout';
@import 'grid';
Presently/presently/users/static/users/assets/scss/layout/_layout.scss 0 → 100644
View file @ 4fb74d9d
//
// Layout
//
.l {
&__max {
margin: 0 auto;
max-width: $maxwidth-container;
&--text {
margin: 0 auto;
max-width: $maxwidth-text;
}
}
&__header {}
&__main {}
&__foot {}
}
\ No newline at end of file
Presently/presently/users/static/users/assets/scss/styles.scss 0 → 100644
View file @ 4fb74d9d
// The files that compile
@import 'abstracts/index';
@import 'base/index';
@import 'layout/index';
@import 'components/index';
Presently/presently/users/templates/users/base.html
View file @ 4fb74d9d
<!doctype html>
{% load static %}
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{% static 'users/css/main.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'users/css/plugin.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'users/css/style.css' %}" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&family=Open+Sans:wght@800&display=swap" rel="stylesheet">
</head>
<!-- <body id="bg" style="background-image: url({% static 'users/images/bg.png' %});"> -->
<body>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{% static 'users/css/main.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'users/css/plugin.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'users/css/style.css' %}" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&family=Open+Sans:wght@800&display=swap"
rel="stylesheet">
</head>
<!-- <body id="bg" style="background-image: url({% static 'users/images/bg.png' %});"> -->
<body>
{% load static %}
<header id="header" class="lite">
<div class="header-inner">
<div class="container">
<div id="logo">
<img href="{% url 'home' %}" src="{% static 'users/images/logo.png' %}" class="img-fluid" style="width: 300px;">
</div>
<header id="header" class="lite">
<div class="header-inner">
<div class="container">
<div id="logo">
<img href="{% url 'home' %}" src="{% static 'users/images/logo.png' %}" class="img-fluid"
style="width: 300px;">
</div>
<div id="search">
<a
id="btn-search-close"
class="btn-search-close"
aria-label="Close search form"
><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
</svg></a>
<form
class="search-form"
action="https://inspirothemes.com/polo/search-results-page.html"
method="get"
>
<input
class="form-control"
name="q"
type="search"
placeholder="Type & Search..."
/>
<span class="text-muted"
>Start typing & press "Enter" or "ESC" to close</span
>
</form>
</div>
<div id="search">
<a id="btn-search-close" class="btn-search-close" aria-label="Close search form"><svg
xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-circle"
viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
<path
d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
</svg></a>
<form class="search-form" action="https://inspirothemes.com/polo/search-results-page.html" method="get">
<input class="form-control" name="q" type="search" placeholder="Type & Search..." />
<span class="text-muted">Start typing & press "Enter" or "ESC" to close</span>
</form>
</div>
<div class="header-extras">
<ul>
<li>
<a id="btn-search" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search mx-2" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg>
</a>
</li>
<li>
<div class="p-dropdown">
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-globe" viewBox="0 0 16 16">
<path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855A7.97 7.97 0 0 0 5.145 4H7.5V1.077zM4.09 4a9.267 9.267 0 0 1 .64-1.539 6.7 6.7 0 0 1 .597-.933A7.025 7.025 0 0 0 2.255 4H4.09zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a6.958 6.958 0 0 0-.656 2.5h2.49zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5H4.847zM8.5 5v2.5h2.99a12.495 12.495 0 0 0-.337-2.5H8.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5H4.51zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5H8.5zM5.145 12c.138.386.295.744.468 1.068.552 1.035 1.218 1.65 1.887 1.855V12H5.145zm.182 2.472a6.696 6.696 0 0 1-.597-.933A9.268 9.268 0 0 1 4.09 12H2.255a7.024 7.024 0 0 0 3.072 2.472zM3.82 11a13.652 13.652 0 0 1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5H3.82zm6.853 3.472A7.024 7.024 0 0 0 13.745 12H11.91a9.27 9.27 0 0 1-.64 1.539 6.688 6.688 0 0 1-.597.933zM8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855.173-.324.33-.682.468-1.068H8.5zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.65 13.65 0 0 1-.312 2.5zm2.802-3.5a6.959 6.959 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5h2.49zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7.024 7.024 0 0 0-3.072-2.472c.218.284.418.598.597.933zM10.855 4a7.966 7.966 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4h2.355z"/>
</svg>
<span>EN</span></a>
<ul class="p-dropdown-content">
<li><a href="#">French</a></li>
<li><a href="#">Spanish</a></li>
<li><a href="#">English</a></li>
</ul>
</div>
</li>
</ul>
</div>
<div class="header-extras">
<ul>
<li>
<a id="btn-search" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-search mx-2" viewBox="0 0 16 16">
<path
d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
</svg>
</a>
</li>
</ul>
</div>
<div id="mainMenu-trigger">
<a class="lines-button x"><span class="lines"></span></a>
</div>
<div id="mainMenu-trigger">
<a class="lines-button x"><span class="lines"></span></a>
</div>
<div id="mainMenu">
<div class="container">
<nav>
<ul>
<li><a href="{% url 'home' %}">Home</a></li>
<li><a href="{% url 'contactus' %}">Contact Us</a></li>
<li><a href="{% url 'aboutus' %}">About Us</a></li>
{% if user.is_authenticated %}
<li><a href="{% url 'profile' %}" type="submit"> Profile </a></li>
<li><a href="{% url 'logout' %}" type="submit"> Logout </a></li>
{% else %}
<li><a href="{% url 'register' %}" type="submit"> Create Account </a></li>
<li><a href="{% url 'login' %}" type="submit">Log In</a></li>
{% endif %}
</ul>
</nav>
</div>
<div id="mainMenu">
<div class="container">
<nav>
<ul>
<li><a href="{% url 'home' %}">Home</a></li>
<li><a href="{% url 'contactus' %}">Contact Us</a></li>
<li><a href="{% url 'aboutus' %}">About Us</a></li>
{% if user.is_authenticated %}
<li><a href="{% url 'profile' %}" type="submit"> Profile </a></li>
<li><a href="{% url 'logout' %}" type="submit"> Logout </a></li>
{% else %}
<li><a href="{% url 'register' %}" type="submit"> Create Account </a></li>
<li><a href="{% url 'login' %}" type="submit">Log In</a></li>
{% endif %}
</ul>
</nav>
</div>
</div>
</div>
</header>
</div>
</header>
<div>
<div class="container">
{% if messages %}
{% for message in messages %}
<div class="alert alert-{{message.tags}}">{{message}}</div>
{% endfor %}
{% endif %}
</div>
{% block content %}
{% endblock content %}
</div>
<div>
<div class="container">
{% if messages %}
{% for message in messages %}
<div class="alert alert-{{message.tags}}">{{message}}</div>
{% endfor %}
{% endif %}
</div>
{% block content %}
{% endblock content %}
</div>
<footer id="footer">
<div class="footer-content">
<div class="container">
<div class="row">
<div class="col-xl-2 col-lg-2 col-md-3">
<div class="widget">
<h4>PROJECT</h4>
<ul class="list p-0">
<li><a href="#">Latest Release</a></li>
<li><a href="#">Updates</a></li>
<li><a href="#">License</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Links</a></li>
</ul>
</div>
</div>
<div class="col-xl-2 col-lg-2 col-md-3">
<div class="widget">
<h4>SUPPORT</h4>
<ul class="list p-0">
<li><a href="#">Troubleshooting</a></li>
<li><a href="#">Common Questions</a></li>
<li><a href="#">Report a Bug</a></li>
<li><a href="#">Get Help</a></li>
<li><a href="#">FAQS</a></li>
</ul>
</div>
</div>
<div class="col-xl-2 col-lg-2 col-md-3">
<div class="widget">
<h4>TEAM</h4>
<ul class="list p-0">
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Portfolio</a></li>
</ul>
</div>
</div>
<div class="col-xl-2 col-lg-2 col-md-3">
<div class="widget">
<h4>INFO</h4>
<ul class="list p-0">
<li><a href="#">Get Directions</a></li>
<li><a href="#">Call Us</a></li>
<li><a href="#">Our Staff</a></li>
</ul>
</div>
</div>
<div class="col-xl-4 col-lg-4 col-md-12">
<div class="widget clearfix widget-newsletter">
<h4 class="widget-title">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope" viewBox="0 0 16 16">
<path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z"/>
</svg> Sign Up For a Newsletter
</h4>
<p>
Weekly breaking news, analysis and cutting edge advices on
job searching.
</p>
<form class="widget-subscribe-form p-r-40" action="https://inspirothemes.com/polo/include/subscribe-form.php" role="form" method="post" novalidate="novalidate">
<div class="input-group">
<input aria-required="true" name="widget-subscribe-form-email" class="form-control required email" placeholder="Enter your Email" type="email"/>
<span class="input-group-btn">
<button type="submit" id="widget-subscribe-submit-button" class="btn">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-send" viewBox="0 0 16 16">
<path d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576 6.636 10.07Zm6.787-8.201L1.591 6.602l4.339 2.76 7.494-7.493Z"/>
</svg>
</button>
</span>
</div>
</form>
<footer id="footer">
<div class="footer-content">
<div class="container">
<div class="row">
<div class="col-xl-2 col-lg-2 col-md-3">
<div class="widget">
<h4>PROJECT</h4>
<ul class="list p-0">
<li><a href="#">Latest Release</a></li>
<li><a href="#">Updates</a></li>
<li><a href="#">License</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Links</a></li>
</ul>
</div>
</div>
<div class="col-xl-2 col-lg-2 col-md-3">
<div class="widget">
<h4>SUPPORT</h4>
<ul class="list p-0">
<li><a href="#">Troubleshooting</a></li>
<li><a href="#">Common Questions</a></li>
<li><a href="#">Report a Bug</a></li>
<li><a href="#">Get Help</a></li>
<li><a href="#">FAQS</a></li>
</ul>
</div>
</div>
<div class="col-xl-2 col-lg-2 col-md-3">
<div class="widget">
<h4>TEAM</h4>
<ul class="list p-0">
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Portfolio</a></li>
</ul>
</div>
</div>
<div class="col-xl-2 col-lg-2 col-md-3">
<div class="widget">
<h4>INFO</h4>
<ul class="list p-0">
<li><a href="#">Get Directions</a></li>
<li><a href="#">Call Us</a></li>
<li><a href="#">Our Staff</a></li>
</ul>
</div>
</div>
<div class="col-xl-4 col-lg-4 col-md-12">
<div class="widget clearfix widget-newsletter">
<h4 class="widget-title">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-envelope" viewBox="0 0 16 16">
<path
d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z" />
</svg> Sign Up For a Newsletter
</h4>
<p>
Weekly breaking news, analysis and cutting edge advices on
job searching.
</p>
<form class="widget-subscribe-form p-r-40"
action="https://inspirothemes.com/polo/include/subscribe-form.php" role="form" method="post"
novalidate="novalidate">
<div class="input-group">
<input aria-required="true" name="widget-subscribe-form-email" class="form-control required email"
placeholder="Enter your Email" type="email" />
<span class="input-group-btn">
<button type="submit" id="widget-subscribe-submit-button" class="btn">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-send" viewBox="0 0 16 16">
<path
d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576 6.636 10.07Zm6.787-8.201L1.591 6.602l4.339 2.76 7.494-7.493Z" />
</svg>
</button>
</span>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="copyright-content">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="social-icons social-icons-colored float-left">
<ul>
<li class="social-facebook">
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"/>
</svg></a>
</li>
<li class="social-twitter">
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-twitter" viewBox="0 0 16 16">
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/>
</svg></a>
</li>
<li class="social-youtube">
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-youtube" viewBox="0 0 16 16">
<path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z"/>
</svg></a>
</li>
<li class="social-pinterest">
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pinterest" viewBox="0 0 16 16">
<path d="M8 0a8 8 0 0 0-2.915 15.452c-.07-.633-.134-1.606.027-2.297.146-.625.938-3.977.938-3.977s-.239-.479-.239-1.187c0-1.113.645-1.943 1.448-1.943.682 0 1.012.512 1.012 1.127 0 .686-.437 1.712-.663 2.663-.188.796.4 1.446 1.185 1.446 1.422 0 2.515-1.5 2.515-3.664 0-1.915-1.377-3.254-3.342-3.254-2.276 0-3.612 1.707-3.612 3.471 0 .688.265 1.425.595 1.826a.24.24 0 0 1 .056.23c-.061.252-.196.796-.222.907-.035.146-.116.177-.268.107-1-.465-1.624-1.926-1.624-3.1 0-2.523 1.834-4.84 5.286-4.84 2.775 0 4.932 1.977 4.932 4.62 0 2.757-1.739 4.976-4.151 4.976-.811 0-1.573-.421-1.834-.919l-.498 1.902c-.181.695-.669 1.566-.995 2.097A8 8 0 1 0 8 0z"/>
</svg></a>
</li>
</ul>
</div>
</div>
<div class="col-lg-6">
<div class="copyright-text text-center">
&copy; 2021 Presently - Personal Trainer App
All Rights Reserved.
</div>
</div>
</div>
</div>
<div class="copyright-content">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="social-icons social-icons-colored float-left">
<ul>
<li class="social-facebook">
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-facebook" viewBox="0 0 16 16">
<path
d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z" />
</svg></a>
</li>
<li class="social-twitter">
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-twitter" viewBox="0 0 16 16">
<path
d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
</svg></a>
</li>
<li class="social-youtube">
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-youtube" viewBox="0 0 16 16">
<path
d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z" />
</svg></a>
</li>
<li class="social-pinterest">
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-pinterest" viewBox="0 0 16 16">
<path
d="M8 0a8 8 0 0 0-2.915 15.452c-.07-.633-.134-1.606.027-2.297.146-.625.938-3.977.938-3.977s-.239-.479-.239-1.187c0-1.113.645-1.943 1.448-1.943.682 0 1.012.512 1.012 1.127 0 .686-.437 1.712-.663 2.663-.188.796.4 1.446 1.185 1.446 1.422 0 2.515-1.5 2.515-3.664 0-1.915-1.377-3.254-3.342-3.254-2.276 0-3.612 1.707-3.612 3.471 0 .688.265 1.425.595 1.826a.24.24 0 0 1 .056.23c-.061.252-.196.796-.222.907-.035.146-.116.177-.268.107-1-.465-1.624-1.926-1.624-3.1 0-2.523 1.834-4.84 5.286-4.84 2.775 0 4.932 1.977 4.932 4.62 0 2.757-1.739 4.976-4.151 4.976-.811 0-1.573-.421-1.834-.919l-.498 1.902c-.181.695-.669 1.566-.995 2.097A8 8 0 1 0 8 0z" />
</svg></a>
</li>
</ul>
</div>
</div>
<div class="col-lg-6">
<div class="copyright-text text-center">
&copy; 2021 Presently - Personal Trainer App
All Rights Reserved.
</div>
</div>
</div>
</footer>
</div>
</div>
</footer>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous">
</script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>
-->
<script src="{% static 'users/js/jquery.js' %}"></script>
<script src="{% static 'users/js/plugins.js' %}"></script>
<script src="{% static 'users/js/functions.js' %}"></script>
<link href="{% static 'users/css/dropzone.css' %}" rel="stylesheet">
<script src="{% static 'users/js/dropzone.js' %}"></script>
<script>
Dropzone.autoDiscover = false;
//Form 1
var form2 = $('#fileUpload1');
form2.dropzone({
url: "http://polo/files/post",
addRemoveLinks: true,
maxFiles: 1,
maxFilesize: 10,
acceptedFiles: "image/*",
});
//Form 2
var form2 = $('#fileUpload2');
form2.dropzone({
url: "http://polo/files/post",
addRemoveLinks: true,
maxFiles: 1,
maxFilesize: 10,
acceptedFiles: "image/*",
});
//Form 3
var form3 = $('#fileUpload3');
form3.dropzone({
url: "http://polo/files/post",
maxFilesize: 5,
acceptedFiles: "image/*",
previewsContainer: "#formFiles3",
previewTemplate: $("#formTemplate3").html(),
clickable: ".dropzone-attach-files"
});
</script>
</body>
<script src="{% static 'users/js/jquery.js' %}"></script>
<script src="{% static 'users/js/plugins.js' %}"></script>
<script src="{% static 'users/js/functions.js' %}"></script>
<link href="{% static 'users/css/dropzone.css' %}" rel="stylesheet">
<script src="{% static 'users/js/dropzone.js' %}"></script>
<script>
Dropzone.autoDiscover = false;
//Form 1
var form2 = $('#fileUpload1');
form2.dropzone({
url: "http://polo/files/post",
addRemoveLinks: true,
maxFiles: 1,
maxFilesize: 10,
acceptedFiles: "image/*",
});
//Form 2
var form2 = $('#fileUpload2');
form2.dropzone({
url: "http://polo/files/post",
addRemoveLinks: true,
maxFiles: 1,
maxFilesize: 10,
acceptedFiles: "image/*",
});
//Form 3
var form3 = $('#fileUpload3');
form3.dropzone({
url: "http://polo/files/post",
maxFilesize: 5,
acceptedFiles: "image/*",
previewsContainer: "#formFiles3",
previewTemplate: $("#formTemplate3").html(),
clickable: ".dropzone-attach-files"
});
</script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script type="text/javascript" src="{% static 'users/assets/js/tinycolor.js' %}"></script>
<script type="text/javascript" src="{% static 'users/assets/js/colorcube.js' %}"></script>
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-43388256-3', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>
\ No newline at end of file
Presently/presently/users/templates/users/colourcube.html 0 → 100644
View file @ 4fb74d9d
{% extends 'users/base.html' %}
{% load static %}
{% block content %}
<link rel="stylesheet" href="{% static 'users/assets/css/main.css' %}" type="text/css">
<main class="l__main p__main container">
<article class="l__max u__space__outer">
<form action="/" class="u__space__outer u__space__vertical cc__form" method="post">
<div class="g__row">
<div class="g__col g--three rhythm">
<h2>Step 1:</h2>
<p>Detect HEX colors from the input image. </p>
<!--Here is where the user uploads-->
<div>
Upload as many images as you would like.
</div>
<br>
<input type="file" id="files" name="files[]" multiple />
<br>
<output id="list"></output>
<!--This script has to be called after the file input is initialized-->
<script>
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
<!--This is where the image will technically go when we're taking color information from it (standard HTML5)-->
<canvas id="canvas" style="display: none;" width="150" height="150"></canvas>
<!--This is where the colors will show up-->
<div id="theme">
<p id="message"></p>
<!--Something curious about this is if you keep clicking on the image,
you'll get the same colors, but sometimes in a different order.-->
<div id="pickedColor" class="colorResults"></div>
<div id="color1" class="colorResults"></div>
<div id="color2" class="colorResults"></div>
<div id="color3" class="colorResults"></div>
</div>
<br>
<br>
<div id="scheme">
<br>
<br>
<br>
<br>
<p>
Generated Mono Color Scheme
</p>
<div class="swatches">
<div class="swatch" id="s0"></div>
<div class="swatch" id="s1"></div>
<div class="swatch" id="s2"></div>
<div class="swatch" id="s3"></div>
<div class="swatch" id="s4"></div>
<div class="swatch" id="s5"></div>
<div class="swatch" id="s6"></div>
<div class="swatch" id="s7"></div>
<div class="swatch" id="s8"></div>
<div class="swatch" id="s9"></div>
<input type="text" id="ts3" class="inputField">
<input type="text" id="ts0" class="inputField">
<input type="text" id="ts1" class="inputField">
<input type="text" id="ts2" class="inputField">
<textarea style="display: none;" name="" id="txtArea" cols="10" rows="5"></textarea>
</div>
</div>
<div>
<div class="g__col g--three">
<div class="cc__form__row">
<label class="cc__form__label" for="white-value">Light</label>
<input class="cc__form__input" type="text" id="white-value" name="white-value"
value="#FFFFFF" required />
</div>
<div class="cc__form__row">
<label class="cc__form__label" for="black-value">Dark</label>
<input class="cc__form__input" type="text" id="black-value" name="black-value"
value="#101010" required />
</div>
</div>
</div>
<!-- Submit Button -->
<div class="cc__form__submit g--wide text-align-center">
<input id="brand-color-button" name="brand-color-button" type="submit" class="cc__form__button"
value="Get Ratios">
</div>
</div>
</form>
<div id="results-content" class="u__space__vertical--bottom cc__results">
<div class="u__space__outer cc__results__description">
<h2 class="cc__results__title u__space__vertical--bottom">Step 2: Review colors!</h2>
<div class="g__row">
<div class="g__col g--two rhythm">
<h3>Criteria</h3>
<p>This tool shows three different ratio targets and how your color performs with each — white,
black, or other colors in your palette:</p>
<ul>
<li><strong class="text-light">WCAG Level AAA:</strong> a contrast ratio equal or greater
than <strong>7.0</strong>. For large-scale text, a ratio equal or greater than
<strong>4.5</strong>.</li>
<li><strong class="text-light">WCAG Level AA:</strong> a contrast ratio equal or greater
than <strong>4.5</strong>. For large-scale text, a ratio equal or greater than
<strong>3.0</strong>.</li>
<li>Text that is considered “Large-scale” is <strong>18 points (24px)</strong> or larger or
<strong>14 points (19px) and bold</strong> or larger.</li>
</ul>
</div>
<div class="g__col g--two rhythm">
<p>For more details about success criteria, see the <a title="Go to w3 website in a new window"
target="_blank" href="https://www.w3.org/TR/WCAG21/#contrast-minimum">WCAG 2.1 minimum
contrast ratios</a> page.</p>
<h3>Modify with HSL</h3>
<p><strong>Why HSL?</strong> By modifying primarily the saturation and/or lightness, the
original intention of the color is intact. To modify the Hue would be to start to modify the
color from a blue to a blue-green, or from a red to an orange. Of course, modify the Hue as
you wish as well, but our intention is to show how small movements to the saturation and
lightness can increase accessibility while retaining the intention of the brand color. <a
href="https://www.nixsensor.com/what-is-hsl-color/" target="_blank">More about how HSL
works</a>.</p>
</div>
</div>
</div>
<div id="results-output" class="u__space__vertical--top cc__results__content"></div>
<div class="l__max--text u__space__outer u__space__vertical--top rhythm cc__results__description">
<h3>Edge values</h3>
<p>Be careful with <strong class="text-light">EDGE</strong> values &mdash; the color passes validation,
but is within 0.5. It may still present a legibility issue even though it gets a passing grade. </p>
<h3>Most legible Pair</h3>
<p>From the given list of colors, which color combination is the <em>most legible</em>? This does not
mean that the color pair will pass minimum requirements, but it has the best chance of passing. </p>
<p><strong class="text-light">Custom:</strong> Use the text input to change the color pairing.</p>
<h3>Check your hover text color vs. your body text color</h3>
<p>If <a title="Go to Webaim.org, link opens in a new window." target="_blank"
href="http://webaim.org/techniques/hypertext/link_text#appearance">links are not underlined</a>,
there must be 3:1 contrast between link text and body text and also an additional change (e.g.,
underlining) on mouse hover and keyboard focus. Use the tool to compare your link color against your
body text color to see how they pair in the Most Legible column.</p>
</div>
</div>
</article>
</main>
{% endblock content %}
\ No newline at end of file
Presently/presently/users/templates/users/dashboardaesthatic.html deleted 100644 → 0
View file @ b6b38448
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="INSPIRO" />
<meta name="description" content="Themeforest Template Polo" />
<link rel="icon" type="image/png" href="FE-InHome/images/favicon.png" />
<link rel="stylesheet" href="FE-InHome/css/style.css" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
<!-- <link href="FE-InHome/css/plugins.css" rel="stylesheet" />
<link href="FE-InHome/css/style.css" rel="stylesheet" /> -->
<meta charset="UTF-8">
<title>PRESENTLY </title>
<!-- <meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@oomphinc">
<meta name="og:title" content="ColorCube: Evaluate Accessible Color Palettes">
<meta name="twitter:title" content="ColorCube: Evaluate Accessible Color Palettes">
<meta name="og:description" content="Adjust color values to meet WCAG Level AA or AAA standards for legible color combinations.">
<meta name="twitter:description" content="Adjust color values to meet WCAG Level AA or AAA standards for legible color combinations.">
<meta name="og:image" content="assets/img/ColorCube-screenshot.png">
<meta name="twitter:image" content="assets/img/ColorCube-screenshot.png">
<meta name="twitter:image:alt" content="We are sorry, but this tool is not optimized for the visually impaired.">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> -->
<script type="text/javascript" src="./assets/js/detection.js"></script>
<!-- <link rel="stylesheet" type="text/css" media="screen" href="./assets/css/main.css" /> -->
</head>
<body>
<div class="body-inner">
<header id="header" class="lite">
<div class="header-inner">
<div class="container">
<div id="logo">
<img src="FE-InHome/images/logo.png" class="img-fluid" style="width: 300px;">
</div>
<div id="search">
<a id="btn-search-close" class="btn-search-close" aria-label="Close search form"><i class="icon-x"></i></a>
<form class="search-form" action="https://inspirothemes.com/polo/search-results-page.html" method="get">
<input class="form-control" name="q" type="search" placeholder="Type & Search..." />
<span class="text-muted">Start typing & press "Enter" or "ESC" to close</span>
</form>
</div>
<div class="header-extras">
<ul>
<li>
<a id="btn-search" href="#"> <i class="icon-search"></i></a>
</li>
<li>
<div class="p-dropdown">
<a href="#"><i class="icon-globe"></i><span>EN</span></a>
<ul class="p-dropdown-content">
<li><a href="#">French</a></li>
<li><a href="#">Spanish</a></li>
<li><a href="#">English</a></li>
</ul>
</div>
</li>
</ul>
</div>
<div id="mainMenu-trigger">
<a class="lines-button x"><span class="lines"></span></a>
</div>
<div id="mainMenu">
<div class="container">
<nav>
<ul>
<li><a href="index-2.html">Home</a></li>
<li><a href="index-2.html">Contact Us</a></li>
<li><a href="index-2.html">About Us</a></li>
<li><a href="index-2.html">Profile</a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</header>
<!-- <div class="container">
<div class="l__max u__space__outer cc__brand">
<h3 class="cc__brand__title mb-5">
Slide Quality Checker
</h3>
</div>
</div> -->
<div class="cc__form__submit g--wide text-align-center">
<div class="row">
<div class="col-md-3" style="padding: 2rem;">
<div class="card" style="width: 100%;">
<img class="card-img-top" style="padding: 1rem;" src="/Users/chithuwedage/Documents/Presently/21_22-j-02/BE-Aeasthatic-Quality-Check/images/shutter.png" alt="Card image cap">
<div class="card-body text-center">
<h5 class="card-title">Color Accuracy</h5>
<p class="card-text">Color accuracy conveys the true meaning of a motion picture or image.</p>
<a href="colorCube.html" class="btn btn-primary">Click Here</a>
</div>
</div>
</div>
<div class="col-md-3" style="padding: 2rem;">
<div class=" card" style="width:100%;">
<img class="card-img-top" style="padding: 1rem;" src="/Users/chithuwedage/Documents/Presently/21_22-j-02/BE-Aeasthatic-Quality-Check/images/developer.png" alt="Card image cap">
<div class="card-body text-center">
<h5 class="card-title">Grammer Checker</h5>
<p class="card-text">Will find each sentence in a text, look up each word in the dictionary.</p>
<a href="file:///Users/chithuwedage/Documents/Presently/21_22-j-02/BE-Aeasthatic-Quality-Check/grammer%20checker/index.html" class="btn btn-primary">Click Here</a>
</div>
</div>
</div>
<div class="col-md-3" style="padding: 2rem;">
<div class=" card" style="width: 100%;">
<img class="card-img-top" style="padding: 1rem;" src="/Users/chithuwedage/Documents/Presently/21_22-j-02/BE-Aeasthatic-Quality-Check/images/camera.png" alt="Card image cap">
<div class="card-body text-center">
<h5 class="card-title">Accessibility Checker</h5>
<p class="card-text">Accessibility not check for poor color contrast or inappropriate use of color.</p>
<a href="http://localhost:3000/" class="btn btn-primary">Click Here</a>
</div>
</div>
</div>
<div class="col-md-3" style="padding: 2rem;">
<div class=" card" style="width: 100%;">
<img class="card-img-top" style="padding: 1rem;" src="/Users/chithuwedage/Documents/Presently/21_22-j-02/BE-Aeasthatic-Quality-Check/images/frame.png" alt="Card image cap">
<div class="card-body text-center">
<h5 class="card-title">Visibility Checker</h5>
<p class="card-text">Sharpness visibility is an image's overall clarity in terms of both focus and contrast.</p>
<a href="file:///Users/chithuwedage/Documents/Presently/21_22-j-02/BE-Aeasthatic-Quality-Check/sharpness%20checker/index.html" class="btn btn-primary">Click Here</a>
</div>
</div>
</div>
</div>
</div>
<!--
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="/Users/chithuwedage/Documents/Presently/21_22-j-02/BE-Aeasthatic-Quality-Check/images/shutter.png" alt="First slide" />
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/title-banner.png" alt="Second slide" />
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/audio-bg.jpg" alt="Third slide" />
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div> -->
<footer id="footer">
<div class="footer-content">
<div class="container">
<div class="row">
<div class="col-xl-2 col-lg-2 col-md-3">
<div class="widget">
</div>
</div>
</div>
</div>
</div>
<div class="copyright-content">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="social-icons social-icons-colored float-left">
<ul>
<li class="social-rss">
<a href="#"><i class="fa fa-rss"></i></a>
</li>
<li class="social-facebook">
<a href="#"><i class="fab fa-facebook-f"></i></a>
</li>
<li class="social-twitter">
<a href="#"><i class="fab fa-twitter"></i></a>
</li>
<li class="social-vimeo">
<a href="#"><i class="fab fa-vimeo"></i></a>
</li>
<li class="social-youtube">
<a href="#"><i class="fab fa-youtube"></i></a>
</li>
<li class="social-pinterest">
<a href="#"><i class="fab fa-pinterest"></i></a>
</li>
<li class="social-gplus">
<a href="#"><i class="fab fa-google-plus-g"></i></a>
</li>
</ul>
</div>
</div>
<div class="col-lg-6">
<div class="copyright-text text-center">
&copy; 2021 Presently - Personal Trainer App
All Rights Reserved.
</div>
</div>
</div>
</div>
</div>
</footer>
</div>
</div>
<a id="scrollTop"><i class="icon-chevron-up"></i><i class="icon-chevron-up"></i></a>
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"
></script>
</body>
</html>
\ No newline at end of file
Presently/presently/users/templates/users/home.html
View file @ 4fb74d9d
......@@ -108,7 +108,7 @@
</form>
<small id="dropzoneHelp" class="form-text text-muted">Max file size is 2MB and max number of files is 10.</small>
</div>
<a href="{% url 'feedback' %}" class="btn btn-light mt-3" id="" type="submit">Upload</a>
<a href="{% url 'slidecheckerdashboard' %}" class="btn btn-light mt-3" id="" type="submit">Upload</a>
</div>
</div>
......
Presently/presently/users/templates/users/profile.html
View file @ 4fb74d9d
......@@ -19,7 +19,7 @@
<h3><b>Email</b> : {{user.email}}</h3>
<div class="my-5">
<a class="btn btn-info" href="{% url 'feedback' %}" type="submit">Watch your Uploaded Videos</a>
<a class="btn btn-info" href="{% url 'test' %}" type="submit">TEST</a>
<!-- <a class="btn btn-info" href="{% url 'test' %}" type="submit">TEST</a> -->
</div>
</div>
</div>
......
Presently/presently/users/templates/users/slidecheckerdashboard.html 0 → 100644
View file @ 4fb74d9d
{% extends 'users/base.html' %}
{% load static %}
{% block content %}
<div class="container">
<nav aria-label="breadcrumb mt-4">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="{% url 'home' %}">Home</a></li>
<li class="breadcrumb-item"><a href="{% url 'feedback' %}">Dashboard</a></li>
<li class="breadcrumb-item active" aria-current="page">Emotion-predictions(Video)</li>
</ol>
</nav>
<div class="heading-text heading-line text-center mt-5">
<h4>Slide Quality Checker</h4>
</div>
<div class="carousel mt-4" data-items="3" data-dots="false" data-lightbox="gallery">
<div class="portfolio-item img-zoom ct-photography ct-media ct-branding ct-Media">
<div class="portfolio-item-wrap">
<div class="portfolio-image">
<a href="#"><img src="{% static 'users/images/1-1.jpg' %}" alt=""></a>
</div>
<div class="portfolio-description">
<a title="Paper Pouch!" data-lightbox="gallery-image" href="{% static 'users/images/1-1.jpg' %}"
class="btn btn-light btn-rounded">Zoom</a>
</div>
</div>
</div>
<div class="portfolio-item img-zoom ct-photography ct-media ct-branding ct-Media">
<div class="portfolio-item-wrap">
<div class="portfolio-image">
<a href="#"><img src="{% static 'users/images/2-3.jpg' %}" alt=""></a>
</div>
<div class="portfolio-description">
<a title="Paper Pouch!" data-lightbox="gallery-image" href="{% static 'users/images/2-3.jpg' %}"
class="btn btn-light btn-rounded">Zoom</a>
</div>
</div>
</div>
<div class="portfolio-item img-zoom ct-photography ct-media ct-branding ct-Media">
<div class="portfolio-item-wrap">
<div class="portfolio-image">
<a href="#"><img src="{% static 'users/images/3-4.jpg' %}" alt=""></a>
</div>
<div class="portfolio-description">
<a title="Paper Pouch!" data-lightbox="gallery-image" href="{% static 'users/images/3-4.jpg' %}"
class="btn btn-light btn-rounded">Zoom</a>
</div>
</div>
</div>
<div class="portfolio-item img-zoom ct-photography ct-media ct-branding ct-Media">
<div class="portfolio-item-wrap">
<div class="portfolio-image">
<a href="#"><img src="{% static 'users/images/4-4.jpg' %}" alt=""></a>
</div>
<div class="portfolio-description">
<a title="Paper Pouch!" data-lightbox="gallery-image" href="{% static 'users/images/4-4.jpg' %}"
class="btn btn-light btn-rounded">Zoom</a>
</div>
</div>
</div>
<div class="portfolio-item img-zoom ct-photography ct-media ct-branding ct-Media">
<div class="portfolio-item-wrap">
<div class="portfolio-image">
<a href="#"><img src="{% static 'users/images/5-8.jpg' %}" alt=""></a>
</div>
<div class="portfolio-description">
<a title="Paper Pouch!" data-lightbox="gallery-image" href="{% static 'users/images/5-8.jpg' %}"
class="btn btn-light btn-rounded">Zoom</a>
</div>
</div>
</div>
<div class="portfolio-item img-zoom ct-photography ct-media ct-branding ct-Media">
<div class="portfolio-item-wrap">
<div class="portfolio-image">
<a href="#"><img src="{% static 'users/images/6-7.jpg' %}" alt=""></a>
</div>
<div class="portfolio-description">
<a title="Paper Pouch!" data-lightbox="gallery-image" href="{% static 'users/images/6-7.jpg' %}"
class="btn btn-light btn-rounded">Zoom</a>
</div>
</div>
</div>
<div class="portfolio-item img-zoom ct-photography ct-media ct-branding ct-Media">
<div class="portfolio-item-wrap">
<div class="portfolio-image">
<a href="#"><img src="{% static 'users/images/7-2.jpg' %}" alt=""></a>
</div>
<div class="portfolio-description">
<a title="Paper Pouch!" data-lightbox="gallery-image" href="{% static 'users/images/7-2.jpg' %}"
class="btn btn-light btn-rounded">Zoom</a>
</div>
</div>
</div>
<div class="portfolio-item img-zoom ct-photography ct-media ct-branding ct-Media">
<div class="portfolio-item-wrap">
<div class="portfolio-image">
<a href="#"><img src="{% static 'users/images/8-4.jpg' %}" alt=""></a>
</div>
<div class="portfolio-description">
<a title="Paper Pouch!" data-lightbox="gallery-image" href="{% static 'users/images/8-4.jpg' %}"
class="btn btn-light btn-rounded">Zoom</a>
</div>
</div>
</div>
<div class="portfolio-item img-zoom ct-photography ct-media ct-branding ct-Media">
<div class="portfolio-item-wrap">
<div class="portfolio-image">
<a href="#"><img src="{% static 'users/images/9-4.jpg' %}" alt=""></a>
</div>
<div class="portfolio-description">
<a title="Paper Pouch!" data-lightbox="gallery-image" href="{% static 'users/images/9-4.jpg' %}"
class="btn btn-light btn-rounded">Zoom</a>
</div>
</div>
</div>
<div class="portfolio-item img-zoom ct-photography ct-media ct-branding ct-Media">
<div class="portfolio-item-wrap">
<div class="portfolio-image">
<a href="#"><img src="{% static 'users/images/10-4.jpg' %}" alt=""></a>
</div>
<div class="portfolio-description">
<a title="Paper Pouch!" data-lightbox="gallery-image" href="{% static 'users/images/10-4.jpg' %}"
class="btn btn-light btn-rounded">Zoom</a>
</div>
</div>
</div>
</div>
<div class="line"></div>
<div class="row team-members team-members-card m-b-40">
<div class="col-lg-3">
<div class="team-member">
<!-- <div class="team-image">
<img src="images/team/6.jpg">
</div> -->
<div class="team-desc my-3">
<h3>Color Accuracy</h3>
<p>Color accuracy conveys the true meaning of a motion picture or image</p>
<a href="{% url 'colorcube' %}" class="btn btn-outline btn-rounded">Check</a>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="team-member">
<!-- <div class="team-image">
<img src="images/team/6.jpg">
</div> -->
<div class="team-desc my-3">
<h3>Grammer Checker</h3>
<p>Will find each sentence in a text, look up each word in the dictionary</p>
<a href="" class="btn btn-outline btn-rounded">Check</a>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="team-member">
<!-- <div class="team-image">
<img src="images/team/6.jpg">
</div> -->
<div class="team-desc my-3">
<h3>Accessibility Checker</h3>
<p>Accessibility not check for poor color contrast or inappropriate use of color</p>
<a href="" class="btn btn-outline btn-rounded">Check</a>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="team-member">
<!-- <div class="team-image">
<img src="images/team/6.jpg">
</div> -->
<div class="team-desc my-3">
<h3>Visibility Checker</h3>
<p>This is an image's overall clarity in terms of both focus and contrast</p>
<a href="" class="btn btn-outline btn-rounded">Check</a>
</div>
</div>
</div>
</div>
</div>
{% endblock content %}
\ No newline at end of file
Presently/presently/users/urls.py
View file @ 4fb74d9d
......@@ -9,6 +9,8 @@ urlpatterns = [
path('register/', views.register, name='register'),
path('profile/', views.profile, name='profile'),
path('feedback/', views.feedback, name='feedback'),
path('feedback/slide-checker', views.slidecheckerdashboard, name='slidecheckerdashboard'),
path('feedback/slide-checker/color-cube', views.colorcubechecker, name='colorcube'),
path('feedback/summery', views.overallfeedback, name='overallfeedback'),
path('feedback/pronuciation-vocubalry-errors', views.pronuciation, name='pronuciation'),
path('feedback/emotion/audio', views.emotionaudio, name='emotionaudio'),
......
Presently/presently/users/views.py
View file @ 4fb74d9d
......@@ -50,6 +50,12 @@ def pronuciation(request):
def warningemotionsaudio(request):
return render(request, 'users/unusualemotionswarning.html')
def slidecheckerdashboard(request):
return render(request, 'users/slidecheckerdashboard.html')
def colorcubechecker(request):
return render(request, 'users/colourcube.html')
def feedback(request):
all_video=Video.objects.all()
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment