forked from qkrehgns1/check
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
416 lines
24 KiB
416 lines
24 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<!-- Required meta tags -->
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
|
|
|
<!-- Bootstrap CSS -->
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
|
|
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
|
|
crossorigin="anonymous"
|
|
/>
|
|
|
|
<title>Personal-Color-Test</title>
|
|
<link rel="stylesheet" href="../css/style.css" />
|
|
</head>
|
|
|
|
<body>
|
|
<nav class="navbar navbar-expand-lg navbar-light nav-distance">
|
|
<a class="navbar-brand" href="#">Personal-Color-Test</a>
|
|
<button
|
|
class="navbar-toggler"
|
|
type="button"
|
|
data-toggle="collapse"
|
|
data-target="#navbarSupportedContent"
|
|
aria-controls="navbarSupportedContent"
|
|
aria-expanded="false"
|
|
aria-label="Toggle navigation"
|
|
>
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
|
<ul class="navbar-nav mr-auto">
|
|
<li class="nav-item active">
|
|
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Link</a>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a
|
|
class="nav-link dropdown-toggle"
|
|
href="#"
|
|
id="navbarDropdown"
|
|
role="button"
|
|
data-toggle="dropdown"
|
|
aria-haspopup="true"
|
|
aria-expanded="false"
|
|
>
|
|
</a>
|
|
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
|
|
<a class="dropdown-item" href="#">Action</a>
|
|
<a class="dropdown-item" href="#">Another action</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a class="dropdown-item" href="#">Something else here</a>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true"
|
|
>Disabled</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
<form class="form-inline my-2 my-lg-0">
|
|
<input
|
|
class="form-control mr-sm-2"
|
|
type="search"
|
|
placeholder="Search"
|
|
aria-label="Search"
|
|
/>
|
|
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">
|
|
Search
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</nav>
|
|
<section class="sectiion">
|
|
<h1 class="title">Personal Color Test</h1>
|
|
<h3 class="subtitle">What is my Color?</h3>
|
|
</section>
|
|
<section class="youtube-cover">
|
|
<div class="container mt-5 youtube-cover d-flex flex-row-reverse">
|
|
<img src="img/youtubecopy.jpg" alt="" class="youtube-icon" /><a
|
|
href=""
|
|
class="youtube-link"
|
|
></a>
|
|
</div>
|
|
</section>
|
|
|
|
<script
|
|
class="jsbin"
|
|
src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"
|
|
></script>
|
|
<div class="container file-upload">
|
|
<div id="sel2" class="image-upload-wrap">
|
|
<input
|
|
class="file-upload-input"
|
|
type="file"
|
|
onchange="readURL(this);"
|
|
accept="image/*"
|
|
/>
|
|
<div class="drag-text">
|
|
<img src="" class="mt-5 pt-5 upload" />
|
|
|
|
<h3 id="sel1" class="mb-5 pb-5 pt-4 upload-text"></h3>
|
|
</div>
|
|
</div>
|
|
<div class="file-upload-content">
|
|
<img class="file-upload-image" id="Personal-Color" src="#" alt="your image" />
|
|
<p class="result-Message"></p>
|
|
<p class="result-Message2"></p>
|
|
<p class="result-Message3"></p>
|
|
<p class="result-Message4"></p>
|
|
<p class="result-Message5"></p>
|
|
<div id="label-container"></div>
|
|
<div class="image-title-wrap">
|
|
<button type="button" onclick="removeUpload()" class="remove-image">
|
|
Remove <span class="image-title">Uploaded Image</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="webcam-container"></div>
|
|
<div id="label-container"></div>
|
|
<div id="disqus_thread"></div>
|
|
<script>
|
|
// 0524 수정 부분..
|
|
const sel2 = document.getElementById('sel2');
|
|
const sel1 = document.getElementById('sel1');
|
|
|
|
sel2.addEventListener('mouseout', HovOut);
|
|
sel2.addEventListener('mouseover', Hov);
|
|
|
|
sel1.innerText = '사진을 선택해 업로드해주세요!';
|
|
|
|
function Hov() {
|
|
sel1.innerText = 'Click!';
|
|
}
|
|
|
|
function HovOut() {
|
|
sel1.innerText = '사진을 선택해 업로드해주세요!';
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
|
|
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
|
|
/*
|
|
var disqus_config = function () {
|
|
this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable
|
|
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
|
|
};
|
|
*/
|
|
(function () {
|
|
// DON'T EDIT BELOW THIS LINE
|
|
var d = document,
|
|
s = d.createElement('script');
|
|
s.src = 'https://personalcolor-1.disqus.com/embed.js';
|
|
s.setAttribute('data-timestamp', +new Date());
|
|
(d.head || d.body).appendChild(s);
|
|
})();
|
|
</script>
|
|
<noscript
|
|
>Please enable JavaScript to view the
|
|
<a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript
|
|
>
|
|
|
|
<!-- Optional JavaScript -->
|
|
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
|
|
<script
|
|
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
|
|
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
|
|
crossorigin="anonymous"
|
|
></script>
|
|
<script
|
|
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
|
|
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
|
|
crossorigin="anonymous"
|
|
></script>
|
|
<script
|
|
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
|
|
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
|
|
crossorigin="anonymous"
|
|
></script>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@0.8/dist/teachablemachine-image.min.js"></script>
|
|
<script>
|
|
function readURL(input) {
|
|
if (input.files && input.files[0]) {
|
|
var reader = new FileReader();
|
|
|
|
reader.onload = function (e) {
|
|
$('.image-upload-wrap').hide();
|
|
|
|
$('.file-upload-image').attr('src', e.target.result);
|
|
$('.file-upload-content').show();
|
|
|
|
$('.image-title').html(input.files[0].name);
|
|
};
|
|
|
|
reader.readAsDataURL(input.files[0]);
|
|
init().then(() => {
|
|
console.log('hello');
|
|
predict();
|
|
});
|
|
} else {
|
|
removeUpload();
|
|
}
|
|
}
|
|
|
|
function removeUpload() {
|
|
$('.file-upload-input').replaceWith($('.file-upload-input').clone());
|
|
$('.file-upload-content').hide();
|
|
$('.image-upload-wrap').show();
|
|
}
|
|
$('.image-upload-wrap').bind('dragover', function () {
|
|
$('.image-upload-wrap').addClass('image-dropping');
|
|
});
|
|
$('.image-upload-wrap').bind('dragleave', function () {
|
|
$('.image-upload-wrap').removeClass('image-dropping');
|
|
});
|
|
</script>
|
|
<script type="text/javascript">
|
|
// More API functions here:
|
|
// https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/image
|
|
|
|
// the link to your model provided by Teachable Machine export panel
|
|
const URL = 'https://teachablemachine.withgoogle.com/models/Ywsq9e5YP/';
|
|
|
|
let model, webcam, labelContainer, maxPredictions;
|
|
|
|
// Load the image model and setup the webcam
|
|
async function init() {
|
|
const modelURL = URL + 'model.json';
|
|
const metadataURL = URL + 'metadata.json';
|
|
|
|
// load the model and metadata
|
|
// Refer to tmImage.loadFromFiles() in the API to support files from a file picker
|
|
// or files from your local hard drive
|
|
// Note: the pose library adds "tmImage" object to your window (window.tmImage)
|
|
model = await tmImage.load(modelURL, metadataURL);
|
|
maxPredictions = model.getTotalClasses();
|
|
|
|
labelContainer = document.getElementById('label-container');
|
|
for (let i = 0; i < maxPredictions; i++) {
|
|
// and class labels
|
|
labelContainer.appendChild(document.createElement('div'));
|
|
}
|
|
}
|
|
|
|
// run the webcam image through the image model
|
|
async function predict() {
|
|
// predict can take in an image, video or canvas html element
|
|
var image = document.getElementById('Personal-Color');
|
|
const prediction = await model.predict(image, false);
|
|
prediction.sort((a,b) => parseFloat(b.probability)-parseFloat(a.probability));
|
|
console.log(prediction[0].className);
|
|
var resultMessege, resultMessege2, resultMessege3,resultMessege4,resultMessege5;
|
|
|
|
switch(prediction[0].className){
|
|
case "Spring" :
|
|
resultMessege ="봄 웜톤"
|
|
resultMessege2="밝고 화사한 생동감 넘치는 컬러"
|
|
resultMessege3="봄 웜톤에 해당하는 연에인은 수지, 박보영, 아이유, 송중기, 강다니엘 등이 해당되어 있어요"
|
|
resultMessege4="<br>봄 유형은 대부분 온화하고 부드러운 것이 특징이며, 따뜻한 톤을 지니고 있다. 얼굴색은 맑은 노란빛을 띄고 있다. 어울리는 색상은 명도는 높고 채도는 낮은 밝고 생기있는 톤으로,아이보리, 애프리컷, 파스텔 옐로 그린, 피치, 라이트 웜 아쿠아 등의 기본적으로 노란색이 가미된 컬러이다. 흰 빛과 푸른 빛이 감도는 색상과 찬 느낌의 무겁고 칙칙한 색, 한색 계열, 무채색, 은색, 와인색 등은 피해야 한다."
|
|
// resultMessege5='<br><br><img src= "봄.jpg" width=105%>'
|
|
|
|
resultMessege5 = "<br><br><div class='colorWeight' style='background: rgb(49, 251, 211);'></div>"
|
|
+ "<div class='colorWeight' style='background: rgb(61, 201, 217);'></div>"
|
|
+ "<div class='colorWeight' style='background: rgb(152, 51, 153);'></div>"
|
|
+ "<div class='colorWeight' style='background: rgb(55, 155, 103);'></div>"
|
|
+ "<div class='colorWeight' style='background: rgb(255, 203, 122);'></div>"
|
|
+ "<div class='colorWeight' style='background: rgb(58, 253, 255);'></div>"
|
|
+ "<div class='colorWeight' style='background: rgb(52, 153, 225);'></div>"
|
|
+ "<div class='colorWeight' style='background: rgb(58, 110, 243);'></div>"
|
|
+ "<div class='colorWeight' style='background: rgb(249, 154, 56);'></div>"
|
|
+ "<div class='colorWeight' style='background: rgb(254, 108, 111);'></div>"
|
|
+ "<div class='colorWeight' style='background: rgb(3, 255, 0);'></div>"
|
|
+ "<div class='colorWeight' style='background: rgb(52, 153, 225);'></div>"
|
|
|
|
break;
|
|
case "Summer" :
|
|
resultMessege ="여름 쿨톤"
|
|
resultMessege2="부드럽고 은은한 느낌의 컬러"
|
|
resultMessege3="여름 쿨톤에 해당하는 연에인은 이영애, 아이린, 손예진, 김사랑, 박보검, 차은우 등이 해당되어 있어요"
|
|
resultMessege4="<br>여름 유형은 흰색이 기본 색상이라고 할 수 있다. 이미지는 차가우면서도 부드러운 느낌을 겸비한 이지적인 분위기로 친근감을 준다. 계절적으로 시각적인 시원함을 가지고 있다. 얼굴색은 기본적으로 흰 빛과 푸른빛이 감도는 색이거나 노르스름한 피부에 흰 빛이 감도는 색, 희고 붉은 톤에 푸른빛이 감도는 색이다. 눈동자 색은 부드럽고 흐린 블루나 회색빛 블루, 부드러운 브라운 계열이다. 머리카락 색은 기본적으로 회색기미를 지니며 검은 빛을 떠나 강하기보다는 부드러운 검은색에 속하며, 청초하고 신선한 차가운 이미지를 지니고 있다. 어울리는 색상은 명도는 높고 채도는 낮은 톤이며 흰색과 파랑 톤의 기운이 느껴지는 색이다. 소프트 화이트, 라이트 블루 그레이, 파스텔 아쿠아, 파스텔 핑크, 라벤더, 부드럽고 차가운 느낌의 핑크, 연보라 등 색상이 튀지 않는 파스텔 계열로 전체적으로 흰 빛을 지닌 색상이 잘 어울린다. 검정색과 너무 어두운색, 금속성의 반사적인 색, 노란기미가 있는 색은 피해야한다."
|
|
// resultMessege5='<br><br><img src= "여름.jpg" width=105%>'
|
|
|
|
resultMessege5 = "<br><br><div class='colorWeight' style='background: rgb(253, 210, 255);'></div>"
|
|
+ "<div class='colorWeight' style='background: rgb(250, 160, 255);'></div>"
|
|
+ "<div class='colorWeight' style='background: rgb(56, 54, 255);'></div>"
|
|
+ "<div class='colorWeight' style='background: rgb(205, 162, 252);'></div>"
|
|
+ "<div class='colorWeight' style='background: rgb(170, 13, 170);'></div>"
|
|
+ "<div class='colorWeight' style='background: rgb(254, 208, 210);'></div>"
|
|
+ "<div class='colorWeight' style='background: rgb(208, 162, 156);'></div>"
|
|
+ "<div class='colorWeight' style='background: rgb(253, 254, 159);'></div>"
|
|
+ "<div class='colorWeight' style='background: rgb(54, 158, 253);'></div>"
|
|
+ "<div class='colorWeight' style='background: rgb(160, 107, 109);'></div>"
|
|
+ "<div class='colorWeight' style='background: rgb(57, 59, 152);'></div>"
|
|
+ "<div class='colorWeight' style='background: rgb(201, 200, 196);'></div>"
|
|
break;
|
|
|
|
case "Autumn" :
|
|
resultMessege ="가을 웜톤"
|
|
resultMessege2="차분하면서 따뜻한 분위기 있는 컬러"
|
|
resultMessege3="가을 웜톤에 해당하는 연에인은 블랙핑크 제니, 이효리, 박신혜, 전지현, 박서준, 공유 등이 해당되어 있어요"
|
|
resultMessege4="<br>가을 색상은 황색 빛을 띠면서 차분하고 부드러운 느낌을 준다. 노란빛이 감돌기는 하지만 황색빛이 주를 이루기에 가라앉는 느낌을 준다. 얼굴색은 탁하고 노란 기를 띠고 있으며, 상아색인 경우가 많다. 눈동자 색은 황갈색이나 어두운 갈색이며 그린 빛이 감도는 깊고 어두운 색이 많다. 머리카락 색은 대부분 밝은 갈색이나 오렌지색을 띄는 붉은 갈색을 갖고 있다. 어울리는 색상은 명도와 채도가 낮은 진하고 탁한 톤이다. 모든 색에 노랑과 검정이 섞여있는 오이스트 화이트, 웜 베이지, 마호가니, 오렌지, 모스그린, 틸블루 등이 해당된다. 불투명하거나 파스텔 톤의 옅은색, 찬계열의 색, 선명한 원색 등은 피해야한다."
|
|
// resultMessege5='<br><br><img src= "가을.jpg" width=105%>'
|
|
|
|
resultMessege5 = "<br><br><div class='colorWeight' style='background: rgb(45, 156, 156);'></div>"
|
|
+ "<div class='colorWeight' style='background: rgb(7, 109, 115);'></div>"
|
|
+ "<div class='colorWeight' style='background: rgb(57, 0, 0);'></div>"
|
|
+ "<div class='colorWeight' style='background: rgb(0, 98, 146);'></div>"
|
|
+ "<div class='colorWeight' style='background: rgb(143, 48, 159);'></div>"
|
|
+ "<div class='colorWeight' style='background: rgb(157, 0, 100);'></div>"
|
|
+ "<div class='colorWeight' style='background: rgb(46, 3, 111);'></div>"
|
|
+ "<div class='colorWeight' style='background: rgb(147, 57, 5);'></div>"
|
|
+ "<div class='colorWeight' style='background: rgb(206, 151, 52);'></div>"
|
|
+ "<div class='colorWeight' style='background: rgb(212, 57, 4);'></div>"
|
|
+ "<div class='colorWeight' style='background: rgb(255, 205, 110);'></div>"
|
|
+ "<div class='colorWeight' style='background: rgb(216, 210, 107);'></div>"
|
|
break;
|
|
case "Winter" :
|
|
resultMessege ="겨울 쿨톤"
|
|
resultMessege2="극단적이고 선명한 느낌의 컬러"
|
|
resultMessege3="겨울 쿨톤에 해당하는 연에인은 블랙핑크 지수 고준희 치타 차승원 이수혁 등이 해당되어 있어요"
|
|
resultMessege4="<br>겨울 색상은 강하면서 선명하고 다소 날카로운 느낌을 준다. 푸른빛이 감도는 색 중에서도 강하고 가라앉는 느낌을 주는 색이 겨울 색이라고 할 수 있겠다. 얼굴색은 붉은 기가 비치며 투명하거나 누른 기를 띠고 있으며 전체적으로 푸른빛이 감돈다. 주로 창백하거나 핑크 톤을 가졌다. 눈동자색은 짙으며 홍채 주위에 회색이 가미되면서 청색이나 녹색이 혼합되어 있다. 겨울 유형은 눈동자색의 대비가 강해 뚜렷하고 선명하다. 머리카락은 선명한 검정색으로 푸른빛이 돈다. 어울리는 색상은 명도는 낮고 채도는 높은 톤이다. 푸르면서 흰색이 기본이 된다. 검정과 흰색, 흰 빛을 지닌 색과 푸른 빛을 지닌 원색, 레드나 와인, 자주계열, 청블루, 청보라 등의 강렬하면서 대조되는 색이 잘 어울린다. 퓨어 화이트, 라이트 트루 그레이, 블랙, 그린, 네이비, 블루, 레몬옐로, 마젠타, 블루 레드 등이 그 예이다. 황금색 계열의 색은 피해야한다."
|
|
// resultMessege5='<br><br><img src= "겨울.jpg" width=105%>'
|
|
resultMessege5 = "<br><br><div class='colorWeight' style='background: rgb(153, 255, 0);'></div>"
|
|
+ "<div class='colorWeight' style='background: rgb(253, 255, 6);'></div>"
|
|
+ "<div class='colorWeight' style='background: rgb(146, 203, 193);'></div>"
|
|
+ "<div class='colorWeight' style='background: rgb(106, 106, 106);'></div>"
|
|
+ "<div class='colorWeight' style='background: rgb(151, 148, 151);'></div>"
|
|
+ "<div class='colorWeight' style='background: rgb(107, 1, 107);'></div>"
|
|
+ "<div class='colorWeight' style='background: rgb(155, 2, 57);'></div>"
|
|
+ "<div class='colorWeight' style='background: rgb(0, 2, 90);'></div>"
|
|
+ "<div class='colorWeight' style='background: rgb(109, 0, 55);'></div>"
|
|
+ "<div class='colorWeight' style='background: rgb(56, 0, 106);'></div>"
|
|
+ "<div class='colorWeight' style='background: rgb(58, 0, 0);'></div>"
|
|
+ "<div class='colorWeight' style='background: rgb(4, 103, 96);'></div>"
|
|
|
|
// + "<canvas id='myColorPolygon'></canvas>"
|
|
// item = function() {
|
|
// var myColorPolygon = document.createElement('canvas');
|
|
// myColorPolygon.id = 'myColorPolygon';
|
|
// document.body.appendChild(myColorPolygon);
|
|
|
|
// var myColorPolygon = document.getElementById('myColorPolygon');
|
|
// var Context = myColorPolygon.getContext('2d');
|
|
|
|
// Context.beginPath();
|
|
// Context.arc(40, 40, 30, 0, Math.PI * 2, true);
|
|
// Context.strokeStyle = '#000';
|
|
// Context.fillStyle = '#ff0';
|
|
// Context.fill();
|
|
// }
|
|
|
|
break;
|
|
default:
|
|
resultMessege=""
|
|
resultMessege2=""
|
|
resultMessege3=""
|
|
}
|
|
var title = "<div class='" + prediction[0].className + "-animal-title'>" + resultMessege + "</div>"
|
|
var explain = "<div class='animal-explain pt-2'>" + resultMessege2 + "</div>"
|
|
var celeb = "<div class='" + prediction[0].className + "-animal-celeb pt-2 pb-2'>" + resultMessege3 + resultMessege4 + resultMessege5 + "</div>"
|
|
$('.result-Message').html(title+explain+celeb);
|
|
|
|
var barWidth;
|
|
for (let i = 0; i < maxPredictions; i++) {
|
|
if (prediction[i].probability.toFixed(2) > 0.1) {
|
|
barWidth = Math.round(prediction[i].probability.toFixed(2) * 100) + "%";
|
|
} else if (prediction[i].probability.toFixed(2) >= 0.01) {
|
|
barWidth = "4%"
|
|
} else {
|
|
barWidth = "2%"
|
|
}
|
|
var labelTitle;
|
|
switch (prediction[i].className) {
|
|
case "Spring":
|
|
labelTitle = "봄웜톤"
|
|
break;
|
|
case "Summer":
|
|
labelTitle = "여름쿨톤"
|
|
break;
|
|
case "Autumn":
|
|
labelTitle = "가을웜톤 "
|
|
break;
|
|
case "Winter":
|
|
labelTitle = "겨울쿨톤"
|
|
break;
|
|
default:
|
|
labelTitle = "알수없음"
|
|
}
|
|
var label = "<div class='bar-label d-flex align-items-center'>" + labelTitle + "</div>"
|
|
var bar = "<div class='bar-container position-relative container'><div class='" + prediction[i].className + "-box'></div><div class='d-flex justify-content-center align-items-center " + prediction[i].className + "-bar' style='width: " + barWidth + "'><span class='d-block percent-text'>" + Math.round(prediction[i].probability.toFixed(2) * 100) + "%</span></div></div>"
|
|
labelContainer.childNodes[i].innerHTML = label + bar;
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
<!-- Copyright (c) 2020 by Aaron Vanston (https://codepen.io/aaronvanston/pen/yNYOXR)
|
|
|
|
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
|
|
|
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
|
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
|
-->
|
|
|
|
</html>
|