Skip to content

2
21_22-J-02
Commit a55c1994 authored by NaweenTharuka's avatar NaweenTharuka
Browse files
Options

fix: Resolve issues of color cube checker

parent d4769206
Hide whitespace changes
Inline Side-by-side
Showing with 355 additions and 189 deletions
Presently/presently/users/templates/users/base.html
View file @ a55c1994
...@@ -233,26 +233,7 @@ ...@@ -233,26 +233,7 @@
clickable: ".dropzone-attach-files" clickable: ".dropzone-attach-files"
}); });
</script> </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> </body>
</html> </html>
\ No newline at end of file
Presently/presently/users/templates/users/colourcube.html
View file @ a55c1994
{% extends 'users/base.html' %} <!DOCTYPE html>
{% load static %} {% load static %}
{% block content %} <html xmlns="http://www.w3.org/1999/xhtml">
<link rel="stylesheet" href="{% static 'users/assets/css/main.css' %}" type="text/css"> <head>
<nav aria-label="breadcrumb mt-4">
<ol class="breadcrumb"> <meta name="viewport" content="width=device-width, initial-scale=1" />
<li class="breadcrumb-item"><a href="{% url 'home' %}">Home</a></li> <meta http-equiv="content-type" content="text/html; charset=utf-8" />
<li class="breadcrumb-item"><a href="{% url 'feedback' %}">Dashboard</a></li> <meta name="author" content="INSPIRO" />
<li class="breadcrumb-item active" aria-current="page">Color Cube Accuracy</li> <meta name="description" content="Themeforest Template Polo" />
</ol> <link href="{% static 'users/assets/css/plugins.css' %}" rel="stylesheet" />
</nav> <link href="{% static 'users/assets/css/style.css' %}" rel="stylesheet" />
<main class="l__main p__main container">
<article class="l__max u__space__outer"> <meta charset="UTF-8">
<title>ColorCube </title>
<form action="/" class="u__space__outer u__space__vertical cc__form" method="post"> <link rel="stylesheet" href="{% static 'users/assets/css/styles.css' %}" type="text/css">
<div class="g__row">
<div class="g__col g--three rhythm"> <meta name="twitter:card" content="summary">
<h2>Step 1:</h2> <meta name="twitter:site" content="@oomphinc">
<p>Detect HEX colors from the input image. </p> <meta name="og:title" content="ColorCube: Evaluate Accessible Color Palettes">
<meta name="twitter:title" content="ColorCube: Evaluate Accessible Color Palettes">
<!--Here is where the user uploads--> <meta name="og:description"
<div> content="Adjust color values to meet WCAG Level AA or AAA standards for legible color combinations.">
Upload as many images as you would like. <meta name="twitter:description"
</div> content="Adjust color values to meet WCAG Level AA or AAA standards for legible color combinations.">
<br> <meta name="og:image" content="assets/img/ColorCube-screenshot.png">
<meta name="twitter:image" content="assets/img/ColorCube-screenshot.png">
<input type="file" id="files" name="files[]" multiple /> <meta name="twitter:image:alt" content="We are sorry, but this tool is not optimized for the visually impaired.">
<br>
<output id="list"></output> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="{% static 'users/assets/js/detection.js' %}"></script>
<!--This script has to be called after the file input is initialized--> <link rel="stylesheet" type="text/css" media="screen" href="{% static 'users/assets/css/main.css' %}" />
<script> </head>
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script> <body>
<!--This is where the image will technically go when we're taking color information from it (standard HTML5)--> <!-- <header id="header" class="lite">
<canvas id="canvas" style="display: none;" width="150" height="150"></canvas> <div class="header-inner">
<div class="container">
<!--This is where the colors will show up--> <div id="logo">
<div id="theme"> <img src="{% static 'users/assets/images/logo.png' %}" class="img-fluid" style="width: 300px;">
<p id="message"></p> </div>
<!--Something curious about this is if you keep clicking on the image, <div id="search">
you'll get the same colors, but sometimes in a different order.--> <a
<div id="pickedColor" class="colorResults"></div> id="btn-search-close"
<div id="color1" class="colorResults"></div> class="btn-search-close"
<div id="color2" class="colorResults"></div> aria-label="Close search form"
<div id="color3" class="colorResults"></div> ><i class="icon-x"></i
></a>
</div> <form
<br> class="search-form"
<br> action="https://inspirothemes.com/polo/search-results-page.html"
<div id="scheme"> method="get"
<br> >
<br> <input
<br> class="form-control"
<br> name="q"
<p> type="search"
Generated Mono Color Scheme placeholder="Type & Search..."
</p> />
<div class="swatches"> <span class="text-muted"
<div class="swatch" id="s0"></div> >Start typing & press "Enter" or "ESC" to close</span
<div class="swatch" id="s1"></div> >
<div class="swatch" id="s2"></div> </form>
<div class="swatch" id="s3"></div> </div>
<div class="swatch" id="s4"></div>
<div class="swatch" id="s5"></div> <div class="header-extras">
<div class="swatch" id="s6"></div> <ul>
<div class="swatch" id="s7"></div> <li>
<div class="swatch" id="s8"></div> <a id="btn-search" href="#"> <i class="icon-search"></i></a>
<div class="swatch" id="s9"></div> </li>
<li>
<input type="text" id="ts3" class="inputField"> <div class="p-dropdown">
<input type="text" id="ts0" class="inputField"> <a href="#"><i class="icon-globe"></i><span>EN</span></a>
<input type="text" id="ts1" class="inputField"> <ul class="p-dropdown-content">
<input type="text" id="ts2" class="inputField"> <li><a href="#">French</a></li>
<textarea style="display: none;" name="" id="txtArea" cols="10" rows="5"></textarea> <li><a href="#">Spanish</a></li>
<li><a href="#">English</a></li>
</ul>
</div> </div>
</li>
</ul>
</div> </div>
<div>
<div class="g__col g--three"> <div id="mainMenu-trigger">
<div class="cc__form__row"> <a class="lines-button x"><span class="lines"></span></a>
<label class="cc__form__label" for="white-value">Light</label> </div>
<input class="cc__form__input" type="text" id="white-value" name="white-value"
value="#FFFFFF" required /> <div id="mainMenu">
</div> <div class="container">
<div class="cc__form__row"> <nav>
<label class="cc__form__label" for="black-value">Dark</label> <ul>
<input class="cc__form__input" type="text" id="black-value" name="black-value" <li><a href="index-2.html">Home</a></li>
value="#101010" required /> <li><a href="index-2.html">Contact Us</a></li>
</div> <li><a href="index-2.html">About Us</a></li>
</div> <li><a href="index-2.html">Profile</a></li>
</ul>
</div> </nav>
</div>
<!-- Submit Button --> </div>
<div class="cc__form__submit g--wide text-align-center"> </div>
<input id="brand-color-button" name="brand-color-button" type="submit" class="cc__form__button" </div>
value="Get Ratios"> </header> -->
</div>
<div class="l__max u__space__outer cc__brand">
</div> <h2 class="cc__brand__title"> </h2>
</form>
</div>
<div id="results-content" class="u__space__vertical--bottom cc__results">
<div class="u__space__outer cc__results__description"> <main class="l__main p__main">
<h2 class="cc__results__title u__space__vertical--bottom">Step 2: Review colors!</h2> <article class="l__max u__space__outer">
<div class="g__row">
<div class="g__col g--two rhythm"> <form action="/" class="u__space__outer u__space__vertical cc__form" method="post">
<h3>Criteria</h3> {% csrf_token %}
<p>This tool shows three different ratio targets and how your color performs with each — white, <div class="g__row">
black, or other colors in your palette:</p> {{form.as_p}}
<ul> <div class="g__col g--three rhythm">
<li><strong class="text-light">WCAG Level AAA:</strong> a contrast ratio equal or greater <h2>Step 1:</h2>
than <strong>7.0</strong>. For large-scale text, a ratio equal or greater than <p>Detect HEX colors from the input image. </p>
<strong>4.5</strong>.</li>
<li><strong class="text-light">WCAG Level AA:</strong> a contrast ratio equal or greater <!--Here is where the user uploads-->
than <strong>4.5</strong>. For large-scale text, a ratio equal or greater than <div>
<strong>3.0</strong>.</li> Upload as many images as you would like.
<li>Text that is considered “Large-scale” is <strong>18 points (24px)</strong> or larger or </div>
<strong>14 points (19px) and bold</strong> or larger.</li> <br>
</ul>
</div> <input type="file" id="files" name="files[]" multiple />
<div class="g__col g--two rhythm"> <br>
<p>For more details about success criteria, see the <a title="Go to w3 website in a new window" <output id="list"></output>
target="_blank" href="https://www.w3.org/TR/WCAG21/#contrast-minimum">WCAG 2.1 minimum
contrast ratios</a> page.</p> <!--This script has to be called after the file input is initialized-->
<script>
<h3>Modify with HSL</h3> document.getElementById('files').addEventListener('change', handleFileSelect, false);
<p><strong>Why HSL?</strong> By modifying primarily the saturation and/or lightness, the </script>
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 <!--This is where the image will technically go when we're taking color information from it (standard HTML5)-->
you wish as well, but our intention is to show how small movements to the saturation and <canvas id="canvas" style="display: none;" width="150" height="150"></canvas>
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 <!--This is where the colors will show up-->
works</a>.</p> <div id="theme">
</div> <p id="message"></p>
</div>
</div> <!--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="results-output" class="u__space__vertical--top cc__results__content"></div> <div id="pickedColor" class="colorResults"></div>
<div id="color1" class="colorResults"></div>
<div class="l__max--text u__space__outer u__space__vertical--top rhythm cc__results__description"> <div id="color2" class="colorResults"></div>
<h3>Edge values</h3> <div id="color3" class="colorResults"></div>
<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> </div>
<br>
<h3>Most legible Pair</h3> <br>
<p>From the given list of colors, which color combination is the <em>most legible</em>? This does not <div id="scheme">
mean that the color pair will pass minimum requirements, but it has the best chance of passing. </p> <br>
<p><strong class="text-light">Custom:</strong> Use the text input to change the color pairing.</p> <br>
<br>
<h3>Check your hover text color vs. your body text color</h3> <br>
<p>If <a title="Go to Webaim.org, link opens in a new window." target="_blank" <p>
href="http://webaim.org/techniques/hypertext/link_text#appearance">links are not underlined</a>, Generated Mono Color Scheme
there must be 3:1 contrast between link text and body text and also an additional change (e.g., </p>
underlining) on mouse hover and keyboard focus. Use the tool to compare your link color against your <div class="swatches">
body text color to see how they pair in the Most Legible column.</p> <div class="swatch" id="s0"></div>
</div> <div class="swatch" id="s1"></div>
</div> <div class="swatch" id="s2"></div>
<div class="swatch" id="s3"></div>
</article> <div class="swatch" id="s4"></div>
</main> <div class="swatch" id="s5"></div>
<div class="swatch" id="s6"></div>
{% endblock content %} <div class="swatch" id="s7"></div>
\ No newline at end of file <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>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script type="text/javascript" src="assets/js/tinycolor.js"></script>
<script type="text/javascript" src="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>
<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>
</html>
\ No newline at end of file
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