uploaded site and api data
This commit is contained in:
Dumitrana-Mihnea
@@ -0,0 +1,80 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="icon" href="favicon.ico">
|
||||
<link rel="stylesheet" href="./control_utils3d.css">
|
||||
<link rel="stylesheet" href="./control_utils.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils@0.3/camera_utils.js" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils@0.6/control_utils.js" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils_3d@0.3/control_utils_3d.js" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils@0.3/drawing_utils.js" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands@0.4/hands.js" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!--div class="topnav">
|
||||
<img class = "Home-page-2" src ="./logoacasa.png">
|
||||
<a href="./index.html" cursor = "pointer"> </a>
|
||||
</img-->
|
||||
|
||||
<style>
|
||||
.landmark-grid-container {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
background-color: transparent;
|
||||
opacity: 75%;
|
||||
}
|
||||
</style>
|
||||
<div class="container">
|
||||
<div class="container-item-11">
|
||||
<div class="landmark-grid-container"> </div>
|
||||
</div>
|
||||
<div class="container-item-22">
|
||||
<video class="input_video"></video>
|
||||
<canvas class="output_canvas"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rezultat-cuvinte">
|
||||
<div class = "container-item-11">
|
||||
<div class = "p41" id = "p4">
|
||||
<a href="#" class="btn-neon">
|
||||
<div class="fade-out-image"></div>
|
||||
<svg height="50" width="180">
|
||||
<polyline points="0,0 180,0 180,50 0,50 0,00">
|
||||
</polyline>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class = "container-item-22">
|
||||
<div class ="buton-fill">
|
||||
<div class = "p31" id="p3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="loading">
|
||||
<div class="spinner"></div>
|
||||
<div class="message">
|
||||
Loading
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-panel">
|
||||
</div>
|
||||
|
||||
|
||||
<canvas id="background"></canvas>
|
||||
<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js'></script>
|
||||
<script src='https://cdnjs.cloudflare.com/ajax/libs/simplex-noise/2.4.0/simplex-noise.min.js'></script>
|
||||
<script src='https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.0.3/chroma.min.js'></script>
|
||||
<script type="module" src="./script.js"></script>
|
||||
<script src="./wave.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,339 @@
|
||||
.control-panel-shell {
|
||||
position: absolute;
|
||||
display: none;
|
||||
margin-left: 20px;
|
||||
margin-top: 20px;
|
||||
left: 0;
|
||||
transition: 150ms
|
||||
}
|
||||
|
||||
.control-panel {
|
||||
color: #fff;
|
||||
z-index: 100
|
||||
}
|
||||
|
||||
.control-panel.hide {
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
.control-panel-expander {
|
||||
position: relative;
|
||||
top: 30px;
|
||||
height: 14px;
|
||||
background-color: #5e5757;
|
||||
padding: 2px;
|
||||
border-radius: 0 3px 3px 0;
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.hamburger-menu {
|
||||
width: 12px;
|
||||
height: 2px;
|
||||
background-color: #111;
|
||||
margin: 2px
|
||||
}
|
||||
|
||||
.control-panel-entry {
|
||||
width: 250px;
|
||||
background-color: #222;
|
||||
border-radius: 0;
|
||||
box-sizing: content-box;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
font-family: "Google Sans", "Titillium Web", sans-serif;
|
||||
font-size: 15px;
|
||||
line-height: 25px;
|
||||
padding: 12px 16px;
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
border: none;
|
||||
border-bottom: 1px solid #333
|
||||
}
|
||||
|
||||
.control-panel-entry:first-child {
|
||||
border-radius: 28px 28px 0 0
|
||||
}
|
||||
|
||||
.control-panel-entry:last-child {
|
||||
border-radius: 0 0 28px 28px;
|
||||
border: none
|
||||
}
|
||||
|
||||
.control-panel-text {
|
||||
cursor: default;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.control-panel-toggle .label {
|
||||
position: relative
|
||||
}
|
||||
|
||||
.control-panel-toggle .value {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 15px;
|
||||
width: 80px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 40px;
|
||||
background: #000
|
||||
}
|
||||
|
||||
.control-panel-toggle.yes .value {
|
||||
background-color: #309f93;
|
||||
color: #a3faa3
|
||||
}
|
||||
|
||||
.control-panel-toggle.no .value {
|
||||
background-color: #d32f50;
|
||||
color: #f19e9e
|
||||
}
|
||||
|
||||
.control-panel-slider .value {
|
||||
position: relative;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.control-panel-slider .callout {
|
||||
position: absolute;
|
||||
right: 25px
|
||||
}
|
||||
|
||||
.control-panel-fps {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.control-panel-fps canvas {
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
background-color: #222;
|
||||
margin: 5px 0;
|
||||
z-index: 0
|
||||
}
|
||||
|
||||
.control-panel-fps .fps-text {
|
||||
position: absolute;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
backface-visibility: hidden
|
||||
}
|
||||
|
||||
.control-panel-source-picker {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.control-panel-source-picker .inputs {
|
||||
display: none
|
||||
}
|
||||
|
||||
.control-panel-source-picker .file-selection div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-items: center
|
||||
}
|
||||
|
||||
.control-panel-source-picker .file-selection div img {
|
||||
margin-left: 8px
|
||||
}
|
||||
|
||||
.source-selection {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.video-controls {
|
||||
width: 100%;
|
||||
display: none;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
margin: 12px 0 4px
|
||||
}
|
||||
|
||||
.video-controls * {
|
||||
display: inline-block
|
||||
}
|
||||
|
||||
.video-controls img {
|
||||
margin: 0 8px 0 -6px
|
||||
}
|
||||
|
||||
.pause-button {
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.video-track {
|
||||
height: 5px;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
flex-grow: 1;
|
||||
margin-right: 10px
|
||||
}
|
||||
|
||||
.video-slider-ball {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
display: none;
|
||||
border-radius: 50%
|
||||
}
|
||||
|
||||
.video-time {
|
||||
padding-left: .1rem
|
||||
}
|
||||
|
||||
.dropdown-wrapper {
|
||||
position: relative;
|
||||
user-select: none;
|
||||
width: calc(100% - 28px)
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.dropdown-trigger {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
justify-content: space-between;
|
||||
padding: 0 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
background: #333;
|
||||
color: #fff;
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.dropdown-trigger span {
|
||||
max-width: calc(100% - 30px);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap
|
||||
}
|
||||
|
||||
.dropdown-options {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
color: #fff;
|
||||
background: #333;
|
||||
transition: all .5s;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
z-index: 2
|
||||
}
|
||||
|
||||
.dropdown.open .dropdown-options {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
pointer-events: all
|
||||
}
|
||||
|
||||
.dropdown-option {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: left;
|
||||
padding: 0 5px;
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
transition: all .5s;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.dropdown-option * {
|
||||
padding-right: .5rem
|
||||
}
|
||||
|
||||
.dropdown-option:hover {
|
||||
cursor: pointer;
|
||||
background-color: #b2b2b2
|
||||
}
|
||||
|
||||
.dropdown-option.selected {
|
||||
color: #fff;
|
||||
background-color: #305c91
|
||||
}
|
||||
|
||||
.arrow {
|
||||
position: relative;
|
||||
height: 15px;
|
||||
width: 10.6066017178px;
|
||||
margin-left: 10.6066017178px;
|
||||
transform: scale(0.8)
|
||||
}
|
||||
|
||||
.arrow::before,
|
||||
.arrow::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
width: .15rem;
|
||||
height: 100%;
|
||||
transition: all .5s;
|
||||
backface-visibility: hidden
|
||||
}
|
||||
|
||||
.arrow::before {
|
||||
left: -5px;
|
||||
transform: rotate(135deg);
|
||||
background-color: #fff
|
||||
}
|
||||
|
||||
.arrow::after {
|
||||
left: 5px;
|
||||
transform: rotate(-135deg);
|
||||
background-color: #fff
|
||||
}
|
||||
|
||||
.open .arrow::before {
|
||||
left: -5px;
|
||||
transform: rotate(45deg)
|
||||
}
|
||||
|
||||
.open .arrow::after {
|
||||
left: 5px;
|
||||
transform: rotate(-45deg);
|
||||
backface-visibility: hidden
|
||||
}
|
||||
|
||||
.fps-30 {
|
||||
position: absolute;
|
||||
font-size: 8px;
|
||||
top: 45%;
|
||||
left: 10px
|
||||
}
|
||||
|
||||
.fps-60 {
|
||||
position: absolute;
|
||||
font-size: 8px;
|
||||
top: 15%;
|
||||
left: 10px
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
.viewer-widget-js {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.viewer-widget-js .controls {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.viewer-widget-js .landmark-label-js {
|
||||
font-size: 0%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0
|
||||
}
|
||||
|
||||
.viewer-widget-js * {
|
||||
user-select: none
|
||||
}
|
||||
|
||||
.viewer-widget-js:active {
|
||||
cursor: grabbing
|
||||
}
|
||||
@@ -0,0 +1,221 @@
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "Poppins", serif;
|
||||
}
|
||||
|
||||
#background {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
html
|
||||
{
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-size: 1.2em
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(-45deg, #2a5596, #cf8fa7, #23a6d5, #23d5ab);
|
||||
background-size: 400% 400%;
|
||||
animation: gradient 14s ease infinite;
|
||||
height: 100vh;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
@keyframes gradient {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
h2{
|
||||
font-size: 2.4rem;
|
||||
font-family: "Lexend Deca Light", serif;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p,a{
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
|
||||
.feedback-section{
|
||||
box-shadow: 0 0 10rem #fff,
|
||||
0 0 15rem #fff,
|
||||
0 0 12rem #b05af7,
|
||||
0 0 15rem #d99ef0,
|
||||
0 0 15rem #7305f9,
|
||||
inset 0 0 12rem #2f0a6c;
|
||||
padding: 5rem;
|
||||
}
|
||||
|
||||
.rating{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 3.2rem;
|
||||
margin: 4.8rem 0 3.2rem 0;
|
||||
}
|
||||
|
||||
/*.child p:first-child{}*/
|
||||
|
||||
/*.unhappy p, .happy p, .satisfied p{}*/
|
||||
:is(.unhappy, .happy, .satisfied) h3{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
:is(.unhappy, .happy, .satisfied, .response-screen) p:first-child{
|
||||
background-color: #2f0a6c;
|
||||
border-radius: 1rem;
|
||||
font-size: 5.6rem;
|
||||
padding: 1.6rem 2.4rem;
|
||||
cursor: pointer;
|
||||
margin-bottom: 1.2rem;
|
||||
transition: all .3s linear;
|
||||
}
|
||||
|
||||
|
||||
:is(.unhappy, .happy, .satisfied) p:first-child:hover{
|
||||
scale: 1.05;
|
||||
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px;
|
||||
}
|
||||
|
||||
.feedback-btn{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a{
|
||||
padding: 1.2rem 3.2rem;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
background-color: #20262E;
|
||||
color: #fff;
|
||||
font-size: 1.8rem;
|
||||
border-radius: .5rem;
|
||||
/*display: inline-block;*/
|
||||
font-family: "Lexend Deca Light", serif;
|
||||
}
|
||||
|
||||
.active{
|
||||
scale: 1.05;
|
||||
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 2px, rgb(51, 51, 51) 0px 0px 0px 2px;
|
||||
border-radius: .6rem;
|
||||
}
|
||||
.response-screen {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.response-screen h3{
|
||||
margin: 1.2rem 0 3.2rem 0;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.response-screen .feedback-button{
|
||||
margin-top: 3.2rem;
|
||||
}
|
||||
|
||||
.glow-on-hover {
|
||||
width: 220px;
|
||||
height: 46px;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: #fff;
|
||||
background: #111;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
border-radius: 10px;
|
||||
font-size: 22px;
|
||||
bottom: -12px;
|
||||
text-align: center;
|
||||
color:white;
|
||||
letter-spacing: .2rem;
|
||||
padding: 5px;
|
||||
font-family: 'Montserrat',sans-serif;
|
||||
|
||||
}
|
||||
|
||||
.glow-on-hover:before {
|
||||
content: '';
|
||||
background: linear-gradient(45deg, #1e0e85, #00ffd5, #002bff, #7a00ff, #ff00c8);
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left:-2px;
|
||||
background-size: 400%;
|
||||
z-index: -1;
|
||||
filter: blur(5px);
|
||||
width: calc(100% + 4px);
|
||||
height: calc(100% + 4px);
|
||||
animation: glowing 20s linear infinite;
|
||||
opacity: 0;
|
||||
transition: opacity .3s ease-in-out;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.glow-on-hover:active {
|
||||
color: #000
|
||||
}
|
||||
|
||||
.glow-on-hover:active:after {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.glow-on-hover:hover:before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.glow-on-hover:after {
|
||||
z-index: -1;
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #290760;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
@keyframes glowing {
|
||||
0% { background-position: 0 0; }
|
||||
50% { background-position: 400% 0; }
|
||||
100% { background-position: 0 0; }
|
||||
}
|
||||
|
||||
.input1
|
||||
{
|
||||
width: 100%;
|
||||
height: 4rem;
|
||||
background-color: #290760;
|
||||
|
||||
display: flex;
|
||||
font-size: 28px;
|
||||
color:white;
|
||||
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
text-align: center;
|
||||
|
||||
border-style: solid;
|
||||
border-width: 3px;
|
||||
border-color: #140760;
|
||||
|
||||
|
||||
}
|
||||
|
||||
::placeholder
|
||||
{
|
||||
color: white;
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="icon" href="favicon.ico">
|
||||
<link rel="stylesheet" href="./control_utils3d.css">
|
||||
<link rel="stylesheet" href="./control_utils.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils@0.3/camera_utils.js" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils@0.6/control_utils.js" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils_3d@0.3/control_utils_3d.js" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils@0.3/drawing_utils.js" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands@0.4/hands.js" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="./feedback.css">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<section class="feedback-section">
|
||||
<h2>How satisfied are you <br> with our services?</h2>
|
||||
<div class="rating">
|
||||
<div class="child unhappy">
|
||||
<p>👎</p>
|
||||
<h3>Unhappy</h3>
|
||||
</div>
|
||||
<div class="child happy ">
|
||||
<p>👍</p>
|
||||
<h3>Happy</h3>
|
||||
</div>
|
||||
<div class="child satisfied">
|
||||
<p>😁</p>
|
||||
<h3>Satisfied</h3>
|
||||
</div>
|
||||
</div>
|
||||
<form action="https://formspree.io/medeleanrafael@yahoo.com" method="POST">
|
||||
<input class = "input1" id = "text" placeholder = "Give us ur honest opinion!">
|
||||
<div class="feedback-btn">
|
||||
<button class="glow-on-hover"id="btn" type="button">Send Review</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<canvas id="background"></canvas>
|
||||
|
||||
</body>
|
||||
|
||||
<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js'></script>
|
||||
<script src='https://cdnjs.cloudflare.com/ajax/libs/simplex-noise/2.4.0/simplex-noise.min.js'></script>
|
||||
<script src='https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.0.3/chroma.min.js'></script>
|
||||
<script type="module" src="./feedback.jss"></script>
|
||||
<script src="./wave.js"></script>
|
||||
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,52 @@
|
||||
const rating = document.querySelector('.rating');
|
||||
const child = document.querySelectorAll('.child');
|
||||
const feedback_section = document.querySelector('.feedback-section');
|
||||
const btn = document.querySelector('#btn');
|
||||
|
||||
let icon;
|
||||
rating.addEventListener('click', (event) => {
|
||||
|
||||
icon = event.target.parentNode;
|
||||
|
||||
for(let i=0; i<child.length; i++){
|
||||
console.log(child[i])
|
||||
child[i].classList.remove('active');
|
||||
}
|
||||
|
||||
if(!icon.classList.contains('active')){
|
||||
icon.classList.add('active');
|
||||
}
|
||||
// console.log(event.target.parentNode);
|
||||
})
|
||||
|
||||
btn.addEventListener('click', () => {
|
||||
console.log(icon);
|
||||
|
||||
let user_feedback;
|
||||
let user_feedback_icon;
|
||||
|
||||
if(icon === undefined){
|
||||
user_feedback = "";
|
||||
}else{
|
||||
user_feedback = icon.children[1].innerText;
|
||||
user_feedback_icon = icon.children[0].innerText;
|
||||
}
|
||||
|
||||
if(user_feedback !== ""){
|
||||
// console.log(user_feedback_icon)
|
||||
feedback_section.innerHTML = `
|
||||
<div class="response-screen ">
|
||||
<p>${user_feedback_icon}</p>
|
||||
<h3>your Feedback: ${user_feedback}</h3>
|
||||
<p>💖 Thank You for your response</p>
|
||||
|
||||
<div class="feedback-button">
|
||||
<a href="index.html">Back</a>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
|
||||
|
||||
})
|
||||
@@ -0,0 +1,63 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title></title>
|
||||
<link rel="icon" href="favicon.ico">
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="topnav">
|
||||
<img class = "logo1" src="./logo.png"></img>
|
||||
<div class="dropdown">
|
||||
<button class="dropbtn"><img class = "linkedin" src="./linkedin.png"></img>
|
||||
<i class="fa fa-caret-down"></i>
|
||||
</button>
|
||||
<div class="dropdown-content">
|
||||
<a href="https://www.linkedin.com/in/mihnea-dumitrana-7b9a68244/">Dumitrana Mihnea</a>
|
||||
<a href="https://www.linkedin.com/in/daniel-cujba-23aba0201/">Cujba Daniel</a>
|
||||
<a href="https://www.linkedin.com/in/rafael-catalin-medelean-052771268/">Medelean Rafael</a>
|
||||
<a href="https://www.linkedin.com/in/dinu-teodor-gabriel-57361a276/">Dinu Gabriel</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class = "tabel-mijloc">
|
||||
|
||||
<div class = "coloana-stanga">
|
||||
|
||||
<div>
|
||||
<h1>UnMute-IT ->Reach as far as you can see.</h1>
|
||||
<h1>UnMute-IT ->Reach as far as you can see.</h1>
|
||||
</div>
|
||||
|
||||
<h3> We have an innovative project powered by Mediapipe AI technology, by connecting with those who use American Sign Language, regardless of hearing ability.The combination of real-time hand gesture recognition and machine learning algorithms, enables users to effortlessly translate ASL signs into written text or even speech.
|
||||
Our goal aims to empower individuals with hearing impairments and a reliable, intuitive tool.
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class = "coloana-dreapta">
|
||||
</div>
|
||||
<div class = "buton">
|
||||
<div class = "mijloc">
|
||||
<a class="glow-on-hover" type="button" href="./app.html">Sign-Text</a>
|
||||
<a class="glow-on-hover" type="button" href="./reverse.html">Text-Sign</a>
|
||||
<a class="glow-on-hover" type="button" href="./feedback.html">Feedback</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
<canvas id="background"></canvas>
|
||||
|
||||
|
||||
<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js'></script>
|
||||
<script src='https://cdnjs.cloudflare.com/ajax/libs/simplex-noise/2.4.0/simplex-noise.min.js'></script>
|
||||
<script src='https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.0.3/chroma.min.js'></script>
|
||||
<script src="./wave.js"></script>
|
||||
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
@@ -0,0 +1,58 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="icon" href="favicon.ico">
|
||||
<link rel="stylesheet" href="./control_utils3d.css">
|
||||
<link rel="stylesheet" href="./control_utils.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils@0.3/camera_utils.js" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils@0.6/control_utils.js" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils_3d@0.3/control_utils_3d.js" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils@0.3/drawing_utils.js" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands@0.4/hands.js" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="./style-reverse.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
|
||||
</style>
|
||||
<div class="container">
|
||||
|
||||
<div class="container-item-1">
|
||||
<div class="landmark-grid-container"> </div>
|
||||
</div>
|
||||
|
||||
<div class = "container-item-2">
|
||||
<div class = "input1">
|
||||
<input class = "btn-neon" id = "text" placeholder="Scrie aici mesajul pentru text-to-sign" >
|
||||
</input>
|
||||
</div>
|
||||
<div class = "reguli">
|
||||
<div class = "scriere-reguli">
|
||||
<div class = "btn-neon1">
|
||||
Press for Speech-to-Sign
|
||||
</div>
|
||||
<div class = "btn-neon2">
|
||||
Enter
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<canvas id="background"></canvas>
|
||||
|
||||
</body>
|
||||
|
||||
<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js'></script>
|
||||
<script src='https://cdnjs.cloudflare.com/ajax/libs/simplex-noise/2.4.0/simplex-noise.min.js'></script>
|
||||
<script src='https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.0.3/chroma.min.js'></script>
|
||||
<script type="module" src="./reverse.js"></script>
|
||||
<script src="./wave.js"></script>
|
||||
|
||||
|
||||
</html>
|
||||
+477
@@ -0,0 +1,477 @@
|
||||
import DeviceDetector from "https://cdn.skypack.dev/device-detector-js@2.2.10";
|
||||
import ungapstructuredClone from 'https://cdn.jsdelivr.net/npm/@ungap/structured-clone@1.2.0/+esm'
|
||||
const mpHands = window;
|
||||
const drawingUtils = window;
|
||||
const controls = window;
|
||||
const controls3d = window;
|
||||
|
||||
let dict;
|
||||
|
||||
await fetch("./reverse_data.json").then(response => response.text()).then((text) => {dict = JSON.parse(text);});
|
||||
|
||||
let connections_one_hand=[
|
||||
[
|
||||
0,
|
||||
1
|
||||
],
|
||||
[
|
||||
1,
|
||||
2
|
||||
],
|
||||
[
|
||||
2,
|
||||
3
|
||||
],
|
||||
[
|
||||
3,
|
||||
4
|
||||
],
|
||||
[
|
||||
0,
|
||||
5
|
||||
],
|
||||
[
|
||||
5,
|
||||
6
|
||||
],
|
||||
[
|
||||
6,
|
||||
7
|
||||
],
|
||||
[
|
||||
7,
|
||||
8
|
||||
],
|
||||
[
|
||||
5,
|
||||
9
|
||||
],
|
||||
[
|
||||
9,
|
||||
10
|
||||
],
|
||||
[
|
||||
10,
|
||||
11
|
||||
],
|
||||
[
|
||||
11,
|
||||
12
|
||||
],
|
||||
[
|
||||
9,
|
||||
13
|
||||
],
|
||||
[
|
||||
13,
|
||||
14
|
||||
],
|
||||
[
|
||||
14,
|
||||
15
|
||||
],
|
||||
[
|
||||
15,
|
||||
16
|
||||
],
|
||||
[
|
||||
13,
|
||||
17
|
||||
],
|
||||
[
|
||||
0,
|
||||
17
|
||||
],
|
||||
[
|
||||
17,
|
||||
18
|
||||
],
|
||||
[
|
||||
18,
|
||||
19
|
||||
],
|
||||
[
|
||||
19,
|
||||
20
|
||||
]
|
||||
]
|
||||
|
||||
let connections_two_hands=[
|
||||
[
|
||||
0,
|
||||
1
|
||||
],
|
||||
[
|
||||
1,
|
||||
2
|
||||
],
|
||||
[
|
||||
2,
|
||||
3
|
||||
],
|
||||
[
|
||||
3,
|
||||
4
|
||||
],
|
||||
[
|
||||
0,
|
||||
5
|
||||
],
|
||||
[
|
||||
5,
|
||||
6
|
||||
],
|
||||
[
|
||||
6,
|
||||
7
|
||||
],
|
||||
[
|
||||
7,
|
||||
8
|
||||
],
|
||||
[
|
||||
5,
|
||||
9
|
||||
],
|
||||
[
|
||||
9,
|
||||
10
|
||||
],
|
||||
[
|
||||
10,
|
||||
11
|
||||
],
|
||||
[
|
||||
11,
|
||||
12
|
||||
],
|
||||
[
|
||||
9,
|
||||
13
|
||||
],
|
||||
[
|
||||
13,
|
||||
14
|
||||
],
|
||||
[
|
||||
14,
|
||||
15
|
||||
],
|
||||
[
|
||||
15,
|
||||
16
|
||||
],
|
||||
[
|
||||
13,
|
||||
17
|
||||
],
|
||||
[
|
||||
0,
|
||||
17
|
||||
],
|
||||
[
|
||||
17,
|
||||
18
|
||||
],
|
||||
[
|
||||
18,
|
||||
19
|
||||
],
|
||||
[
|
||||
19,
|
||||
20
|
||||
],
|
||||
[
|
||||
21,
|
||||
22
|
||||
],
|
||||
[
|
||||
22,
|
||||
23
|
||||
],
|
||||
[
|
||||
23,
|
||||
24
|
||||
],
|
||||
[
|
||||
24,
|
||||
25
|
||||
],
|
||||
[
|
||||
21,
|
||||
26
|
||||
],
|
||||
[
|
||||
26,
|
||||
27
|
||||
],
|
||||
[
|
||||
27,
|
||||
28
|
||||
],
|
||||
[
|
||||
28,
|
||||
29
|
||||
],
|
||||
[
|
||||
26,
|
||||
30
|
||||
],
|
||||
[
|
||||
30,
|
||||
31
|
||||
],
|
||||
[
|
||||
31,
|
||||
32
|
||||
],
|
||||
[
|
||||
32,
|
||||
33
|
||||
],
|
||||
[
|
||||
30,
|
||||
34
|
||||
],
|
||||
[
|
||||
34,
|
||||
35
|
||||
],
|
||||
[
|
||||
35,
|
||||
36
|
||||
],
|
||||
[
|
||||
36,
|
||||
37
|
||||
],
|
||||
[
|
||||
34,
|
||||
38
|
||||
],
|
||||
[
|
||||
21,
|
||||
38
|
||||
],
|
||||
[
|
||||
38,
|
||||
39
|
||||
],
|
||||
[
|
||||
39,
|
||||
40
|
||||
],
|
||||
[
|
||||
40,
|
||||
41
|
||||
]
|
||||
]
|
||||
|
||||
|
||||
let colors=[
|
||||
{
|
||||
"list": [
|
||||
0,
|
||||
1,
|
||||
2,
|
||||
3,
|
||||
4,
|
||||
5,
|
||||
6,
|
||||
7,
|
||||
8,
|
||||
9,
|
||||
10,
|
||||
11,
|
||||
12,
|
||||
13,
|
||||
14,
|
||||
15,
|
||||
16,
|
||||
17,
|
||||
18,
|
||||
19,
|
||||
20
|
||||
],
|
||||
"color": "Left"
|
||||
}
|
||||
]
|
||||
|
||||
let colors_two_hands=[
|
||||
{
|
||||
"list": [
|
||||
0,
|
||||
1,
|
||||
2,
|
||||
3,
|
||||
4,
|
||||
5,
|
||||
6,
|
||||
7,
|
||||
8,
|
||||
9,
|
||||
10,
|
||||
11,
|
||||
12,
|
||||
13,
|
||||
14,
|
||||
15,
|
||||
16,
|
||||
17,
|
||||
18,
|
||||
19,
|
||||
20,
|
||||
21,
|
||||
22,
|
||||
23,
|
||||
24,
|
||||
25,
|
||||
26,
|
||||
27,
|
||||
28,
|
||||
29,
|
||||
30,
|
||||
31,
|
||||
32,
|
||||
33,
|
||||
34,
|
||||
35,
|
||||
36,
|
||||
37,
|
||||
38,
|
||||
39,
|
||||
40,
|
||||
41
|
||||
],
|
||||
"color": "Left"
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
|
||||
const landmarkContainer = document.getElementsByClassName('landmark-grid-container')[0];
|
||||
const buton1 = document.getElementsByClassName("btn-neon1")[0];
|
||||
const buton2 = document.getElementsByClassName("btn-neon2")[0];
|
||||
|
||||
|
||||
const grid = new controls3d.LandmarkGrid(landmarkContainer, {
|
||||
connectionColor: 0xCCCCCC,
|
||||
definedColors: [{ name: 'Left', value: 0xffa500 }, { name: 'Right', value: 0x00ffff }],
|
||||
range: 0.2,
|
||||
fitToGrid: false,
|
||||
labelSuffix: 'm',
|
||||
landmarkSize: 2.4,
|
||||
numCellsPerAxis: 0,
|
||||
showHidden: false,
|
||||
centered: false,
|
||||
isRotating: false,
|
||||
connectionWidth: 6.5,
|
||||
});
|
||||
grid.axesMaterial.visible = false;
|
||||
grid.gridMaterial.visible = false;
|
||||
grid.updateLandmarks([{"x":0,"y":0,"z":0},{"x":0.1,"y":0.1,"z":0.1}]);
|
||||
|
||||
document.body.classList.add('loaded');
|
||||
|
||||
let text = "";
|
||||
|
||||
function update() {
|
||||
if (dict[text] != undefined){
|
||||
if(dict[text].length == 21)
|
||||
grid.updateLandmarks(dict[text],connections_one_hand,colors);
|
||||
else{
|
||||
let landmarkTwoHands = structuredClone(dict[text]);
|
||||
for(let i = 0; i < landmarkTwoHands.length/2; i++){
|
||||
landmarkTwoHands[i].x = landmarkTwoHands[i].x + 0.07;
|
||||
landmarkTwoHands[i+21].x = landmarkTwoHands[i+21].x - 0.07;
|
||||
}
|
||||
grid.updateLandmarks(landmarkTwoHands,connections_two_hands,colors_two_hands);
|
||||
}
|
||||
}
|
||||
else{
|
||||
grid.updateLandmarks([{}]);
|
||||
}
|
||||
}
|
||||
|
||||
async function main() {
|
||||
setInterval(update, 50);
|
||||
}
|
||||
main();
|
||||
|
||||
async function translate(){
|
||||
let words_a = [];
|
||||
text = document.getElementById("text").value.toLowerCase();
|
||||
text = text.replace(/[^a-zA-Z ']/g, "");
|
||||
text = text.replace(/\s+/g, ' ').trim();
|
||||
let words = text.split(" ");
|
||||
for (let i = 0; i < words.length; i++) {
|
||||
text = words[i];
|
||||
if(dict[text] == undefined)
|
||||
continue;
|
||||
words_a.push(text);
|
||||
await new Promise(r => setTimeout(r, 1000));
|
||||
}
|
||||
text = "";
|
||||
}
|
||||
|
||||
let isRecording = false;
|
||||
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
|
||||
const recognition = new SpeechRecognition();
|
||||
recognition.lang = 'en-US';
|
||||
recognition.interimResults = true;
|
||||
recognition.continuous = true;
|
||||
recognition.maxAlternatives = 1;
|
||||
|
||||
recognition.onstart = (event) => {
|
||||
document.getElementById("text").value = "Listening...";
|
||||
}
|
||||
|
||||
recognition.onresult = (event) => {
|
||||
const speechToText = event.results[0][0].transcript;
|
||||
document.getElementById("text").value = speechToText;
|
||||
}
|
||||
|
||||
recognition.onend = (event) => {
|
||||
translate();
|
||||
}
|
||||
|
||||
|
||||
document.addEventListener('keydown', (event) => {
|
||||
const keyName = event.key;
|
||||
if (keyName === 'Enter') {
|
||||
translate();
|
||||
return;
|
||||
}
|
||||
if(event.target.localName!="input"&&keyName === ' ' && isRecording){
|
||||
recognition.stop();
|
||||
isRecording = false;
|
||||
return;
|
||||
}
|
||||
if(event.target.localName!="input" && keyName === ' ' && !isRecording){
|
||||
recognition.start();
|
||||
isRecording = true;
|
||||
return;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
buton1.addEventListener("click" ,(event)=>{
|
||||
console.log("ads")
|
||||
if(isRecording){
|
||||
recognition.stop();
|
||||
isRecording = false;
|
||||
return;
|
||||
}
|
||||
if(!isRecording){
|
||||
recognition.start();
|
||||
isRecording = true;
|
||||
return;
|
||||
}
|
||||
})
|
||||
|
||||
buton2.addEventListener("click" ,(event)=>{
|
||||
translate();
|
||||
})
|
||||
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
+286
@@ -0,0 +1,286 @@
|
||||
import DeviceDetector from "https://cdn.skypack.dev/device-detector-js@2.2.10";
|
||||
const mpHands = window;
|
||||
const drawingUtils = window;
|
||||
const controls = window;
|
||||
const controls3d = window;
|
||||
|
||||
// Usage: testSupport({client?: string, os?: string}[])
|
||||
// Client and os are regular expressions.
|
||||
// See: https://cdn.jsdelivr.net/npm/device-detector-js@2.2.10/README.md for
|
||||
// legal values for client and os
|
||||
testSupport([
|
||||
{ client: 'Chrome' },
|
||||
]);
|
||||
|
||||
const utterThis = new SpeechSynthesisUtterance();
|
||||
const synth = window.speechSynthesis;
|
||||
let ourText = "";
|
||||
|
||||
let j = 0, res = "", diff_res = "", contor = 0,inauntru = 0;
|
||||
function changeInHtml(data){
|
||||
if(res == data.result)
|
||||
j++;
|
||||
else{
|
||||
j = 1;
|
||||
res = data.result;
|
||||
}
|
||||
if(j == 3 && (diff_res != res || res == "")){
|
||||
console.log(data.result)
|
||||
console.log(inauntru)
|
||||
if(data.result == "greeting" && contor == 0)
|
||||
{
|
||||
addBuffer("Hi everyone,so nice to see you all here today!");
|
||||
ourText = "Hi everyone,so nice to see you all here today!";
|
||||
utterThis.text = ourText
|
||||
synth.speak(utterThis)
|
||||
contor++;
|
||||
}
|
||||
if(data.result == "how" && contor == 1)
|
||||
{
|
||||
document.getElementById("p3").innerHTML = " ";
|
||||
addBuffer("How are you all feeling today?");
|
||||
ourText = "How are you all feeling today?";
|
||||
utterThis.text = ourText
|
||||
synth.speak(utterThis)
|
||||
contor++;
|
||||
}
|
||||
if(data.result == "custom2" && contor == 2)
|
||||
{
|
||||
document.getElementById("p3").innerHTML = " ";
|
||||
addBuffer("Our inability to form deep connections in a world where we are more connected than ever!");
|
||||
ourText = "Today I wanted to come here and raise some awareness about a big problem everyone encounters. Our inability to form deep connections in a world where we are more connected than ever!";
|
||||
utterThis.text = ourText
|
||||
synth.speak(utterThis)
|
||||
contor++;
|
||||
}
|
||||
if(contor > 2)
|
||||
{
|
||||
if(data.result != "custom1")
|
||||
{
|
||||
if(data.result == "okay" && inauntru == 0)
|
||||
{
|
||||
|
||||
ourText = document.getElementById("p3").innerHTML;
|
||||
utterThis.text = ourText
|
||||
synth.speak(utterThis)
|
||||
|
||||
document.getElementById("p3").innerHTML = " ";
|
||||
return;
|
||||
}
|
||||
if(data.result == "custom2")
|
||||
{
|
||||
addBuffer("Together we can change the world!This is only the beginning!");
|
||||
}
|
||||
else
|
||||
{
|
||||
addBuffer(data.result);
|
||||
}
|
||||
|
||||
}
|
||||
if(data.result == "custom1" && inauntru == 0)
|
||||
{
|
||||
document.getElementById("p3").innerHTML = " ";
|
||||
inauntru = 1;
|
||||
}
|
||||
else if(data.result == "custom1" && inauntru == 1)
|
||||
{
|
||||
ourText = document.getElementById("p3").innerHTML;
|
||||
utterThis.text = ourText
|
||||
synth.speak(utterThis)
|
||||
|
||||
document.getElementById("p3").innerHTML = " ";
|
||||
inauntru = 0;
|
||||
}
|
||||
}
|
||||
|
||||
diff_res = res;
|
||||
j = 0;
|
||||
}
|
||||
}
|
||||
function addBuffer(data){
|
||||
|
||||
document.getElementById("p3").innerHTML += " " + data;
|
||||
}
|
||||
function isCorrectData(data){
|
||||
if(data.result != "no data"){
|
||||
|
||||
changeInHtml(data);
|
||||
document.getElementById("p4").innerHTML = '<a href="#" class="btn-neon_a"><div class="fade-out-image"> </div><svg height="50" width="180"><div id="p2"> </div><polyline points="0,0 180,0 180,50 0,50 0,00"></polyline></svg></a>';
|
||||
document.getElementById("p2").innerHTML = data.result;
|
||||
}
|
||||
else{
|
||||
document.getElementById("p4").innerHTML = '<a href="#" class="btn-neon"><div class="fade-out-image"> </div><svg height="50" width="180"><div id="p2"> </div><polyline points="0,0 180,0 180,50 0,50 0,00"></polyline></svg></a>';
|
||||
}
|
||||
|
||||
}
|
||||
function exportToJsonFile(jsonData) {
|
||||
if(jsonData != []){
|
||||
let dataStr = JSON.stringify(jsonData);
|
||||
if(dataStr != []){
|
||||
fetch('http://10.10.11.2:8000/', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(jsonData)
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
// Handle the response data
|
||||
if(data != [])
|
||||
isCorrectData(data);
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function testSupport(supportedDevices) {
|
||||
const deviceDetector = new DeviceDetector();
|
||||
const detectedDevice = deviceDetector.parse(navigator.userAgent);
|
||||
let isSupported = false;
|
||||
for (const device of supportedDevices) {
|
||||
if (device.client !== undefined) {
|
||||
const re = new RegExp(`^${device.client}$`);
|
||||
if (!re.test(detectedDevice.client.name)) {
|
||||
continue;
|
||||
}
|
||||
}
|
||||
if (device.os !== undefined) {
|
||||
const re = new RegExp(`^${device.os}$`);
|
||||
if (!re.test(detectedDevice.os.name)) {
|
||||
continue;
|
||||
}
|
||||
}
|
||||
isSupported = true;
|
||||
break;
|
||||
}
|
||||
if (!isSupported) {
|
||||
alert(`This demo, running on ${detectedDevice.client.name}/${detectedDevice.os.name}, ` +
|
||||
`is not well supported at this time, continue at your own risk.`);
|
||||
}
|
||||
}
|
||||
// Our input frames will come from here.
|
||||
const videoElement = document.getElementsByClassName('input_video')[0];
|
||||
const canvasElement = document.getElementsByClassName('output_canvas')[0];
|
||||
const controlsElement = document.getElementsByClassName('control-panel')[0];
|
||||
const canvasCtx = canvasElement.getContext('2d');
|
||||
const config = { locateFile: (file) => {
|
||||
return `https://cdn.jsdelivr.net/npm/@mediapipe/hands@${mpHands.VERSION}/${file}`;
|
||||
} };
|
||||
// We'll add this to our control panel later, but we'll save it here so we can
|
||||
// call tick() each time the graph runs.
|
||||
// Optimization: Turn off animated spinner after its hiding animation is done.
|
||||
const spinner = document.querySelector('.loading');
|
||||
spinner.ontransitionend = () => {
|
||||
spinner.style.display = 'none';
|
||||
};
|
||||
const landmarkContainer = document.getElementsByClassName('landmark-grid-container')[0];
|
||||
const grid = new controls3d.LandmarkGrid(landmarkContainer, {
|
||||
connectionColor: 0x23a6d5,
|
||||
definedColors: [{ name: 'Left', value: 0x23d5ab }, { name: 'Right', value: 0xcf8fa7 }],
|
||||
range: 0.2,
|
||||
fitToGrid: false,
|
||||
labelSuffix: 'm',
|
||||
landmarkSize: 2.4,
|
||||
numCellsPerAxis: 0,
|
||||
showHidden: false,
|
||||
centered: false,
|
||||
isRotating: false,
|
||||
connectionWidth: 6.5,
|
||||
});
|
||||
grid.axesMaterial.visible = false;
|
||||
grid.gridMaterial.visible = false;
|
||||
let i = 0;
|
||||
function onResults(results) {
|
||||
// Hide the spinner.
|
||||
document.body.classList.add('loaded');
|
||||
// Draw the overlays.
|
||||
canvasCtx.save();
|
||||
canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);
|
||||
canvasCtx.drawImage(results.image, 0, 0, canvasElement.width, canvasElement.height);
|
||||
if (results.multiHandLandmarks && results.multiHandedness) {
|
||||
for (let index = 0; index < results.multiHandLandmarks.length; index++) {
|
||||
const classification = results.multiHandedness[index];
|
||||
const isRightHand = classification.label === 'Right';
|
||||
const landmarks = results.multiHandLandmarks[index];
|
||||
drawingUtils.drawConnectors(canvasCtx, landmarks, mpHands.HAND_CONNECTIONS, { color: isRightHand ? '#00FF00' : '#FF0000' });
|
||||
drawingUtils.drawLandmarks(canvasCtx, landmarks, {
|
||||
color: isRightHand ? '#00FF00' : '#FF0000',
|
||||
fillColor: isRightHand ? '#FF0000' : '#00FF00',
|
||||
radius: (data) => {
|
||||
return drawingUtils.lerp(data.from.z, -0.15, .1, 10, 1);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
canvasCtx.restore();
|
||||
if (results.multiHandWorldLandmarks) {
|
||||
// We only get to call updateLandmarks once, so we need to cook the data to
|
||||
// fit. The landmarks just merge, but the connections need to be offset.
|
||||
const landmarks = results.multiHandWorldLandmarks.reduce((prev, current) => [...prev, ...current], []);
|
||||
const colors = [];
|
||||
let connections = [];
|
||||
for (let loop = 0; loop < results.multiHandWorldLandmarks.length; ++loop) {
|
||||
const offset = loop * mpHands.HAND_CONNECTIONS.length;
|
||||
const offsetConnections = mpHands.HAND_CONNECTIONS.map((connection) => [connection[0] + offset, connection[1] + offset]);
|
||||
connections = connections.concat(offsetConnections);
|
||||
const classification = results.multiHandedness[loop];
|
||||
for(let i = loop*21; i < (loop+1)*21; i++){
|
||||
if(classification.label === 'Right'){
|
||||
landmarks[i].x = landmarks[i].x+0.1;
|
||||
}
|
||||
else{
|
||||
landmarks[i].x = landmarks[i].x-0.1;
|
||||
}
|
||||
}
|
||||
colors.push({
|
||||
list: offsetConnections.map((unused, i) => i + offset),
|
||||
color: classification.label,
|
||||
});
|
||||
}
|
||||
grid.updateLandmarks(landmarks, connections, colors);
|
||||
}
|
||||
else {
|
||||
grid.updateLandmarks([]);
|
||||
}
|
||||
i += 1;
|
||||
if(i == 20){
|
||||
exportToJsonFile(results.multiHandLandmarks.reduce((prev, current) => [...prev, ...current], []));
|
||||
i = 0
|
||||
}
|
||||
}
|
||||
const hands = new mpHands.Hands(config);
|
||||
hands.onResults(onResults);
|
||||
// Present a control panel through which the user can manipulate the solution
|
||||
// options.
|
||||
new controls
|
||||
.ControlPanel(controlsElement, {
|
||||
maxNumHands: 2,
|
||||
modelComplexity: 1,
|
||||
minDetectionConfidence: 0.5,
|
||||
minTrackingConfidence: 0.5
|
||||
})
|
||||
.add([
|
||||
new controls.StaticText({ title: 'Sign language recognition' }),
|
||||
new controls.SourcePicker({
|
||||
onFrame: async (input, size) => {
|
||||
const aspect = size.height / size.width;
|
||||
let width, height;
|
||||
if (window.innerWidth > window.innerHeight) {
|
||||
height = window.innerHeight;
|
||||
width = height / aspect;
|
||||
}
|
||||
else {
|
||||
width = window.innerWidth;
|
||||
height = width * aspect;
|
||||
}
|
||||
canvasElement.width = width;
|
||||
canvasElement.height = height;
|
||||
await hands.send({ image: input });
|
||||
},
|
||||
}),
|
||||
])
|
||||
.on(x => {
|
||||
const options = x;
|
||||
hands.setOptions(options);
|
||||
});
|
||||
@@ -0,0 +1,285 @@
|
||||
|
||||
#background {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
html
|
||||
{
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-size: 1.2em
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(-45deg, #2a5596, #cf8fa7, #23a6d5, #23d5ab);
|
||||
background-size: 400% 400%;
|
||||
animation: gradient 14s ease infinite;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
@keyframes gradient {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.container
|
||||
{
|
||||
position: absolute;
|
||||
top: 5vh;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
.container-item-1
|
||||
{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
float: left;
|
||||
justify-content: center;
|
||||
}
|
||||
.landmark-grid-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
background-color: transparent;
|
||||
opacity: 50%;
|
||||
}
|
||||
.container-item-2
|
||||
{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
float: right;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
}
|
||||
.input1
|
||||
{
|
||||
position: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
width: 80%;
|
||||
height: 50%;
|
||||
float: top;
|
||||
background-color: transparent;
|
||||
}
|
||||
.reguli
|
||||
{
|
||||
position: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
width: 45%;
|
||||
height: 50%;
|
||||
top: 30vh;
|
||||
float: bottom;
|
||||
position: absolute;
|
||||
background-color: transparent;
|
||||
}
|
||||
.scriere-reguli
|
||||
{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
height: 20%;
|
||||
float: top;
|
||||
padding: 60px;
|
||||
}
|
||||
|
||||
|
||||
.btn-neon{
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
line-height: 50px;
|
||||
border-style: solid;
|
||||
border-width: 3px;
|
||||
border-color: white;
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: 1s;
|
||||
transition-delay: .9s;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
box-shadow: 0 0 2rem #cf8fa7,
|
||||
0 0 5rem #623ac8,
|
||||
0 0 2rem #cf8fa7,
|
||||
0 0 5rem #623ac8,
|
||||
0 0 5rem #cf8fa7,
|
||||
inset 0 0 2rem #623ac8;
|
||||
|
||||
}
|
||||
|
||||
::placeholder
|
||||
{
|
||||
color:white
|
||||
}
|
||||
|
||||
.btn-neon:hover{
|
||||
box-shadow: 0 0 10px #cf8fa7,
|
||||
0 0 40px #cf8fa7,
|
||||
0 0 80px #cf8fa7;
|
||||
background-color: #cf8fa7;
|
||||
}
|
||||
|
||||
.btn-neon:hover polyline{
|
||||
stroke-dashoffset: -460;
|
||||
}
|
||||
|
||||
.btn-neon svg{
|
||||
position: absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.btn-neon svg polyline{
|
||||
fill: transparent;
|
||||
stroke: #ff6f61;
|
||||
stroke-width: 0px;
|
||||
stroke-dasharray: 40 460;
|
||||
stroke-dashoffset: 40;
|
||||
transition: .8s ease-in-out;
|
||||
}
|
||||
|
||||
|
||||
.regulament
|
||||
{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
height: 80%;
|
||||
float: bottom;
|
||||
}
|
||||
|
||||
.btn-neon1{
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
line-height: 50px;
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
width: 70%;
|
||||
height: 100%;
|
||||
border-style: solid;
|
||||
border-width: 3px;
|
||||
border-color: white;
|
||||
padding: 90px;
|
||||
transition: 1s;
|
||||
transition-delay: .9s;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
box-shadow: 0 0 2rem #623ac8,
|
||||
0 0 2rem #603be7,
|
||||
0 0 2rem #623ac8,
|
||||
0 0 2rem #603be7,
|
||||
0 0 2rem #623ac8,
|
||||
inset 0 0 3rem #603be7;
|
||||
|
||||
}
|
||||
|
||||
.btn-neon1:hover{
|
||||
box-shadow: 0 0 10px #2a5596,
|
||||
0 0 40px #2a5596,
|
||||
0 0 80px #2a5596;
|
||||
background-color: #2a5596;
|
||||
}
|
||||
|
||||
.btn-neon1:hover polyline{
|
||||
stroke-dashoffset: -460;
|
||||
}
|
||||
|
||||
.btn-neon1 svg{
|
||||
position: absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.btn-neon1 svg polyline{
|
||||
fill: transparent;
|
||||
stroke: #ff6f61;
|
||||
stroke-width: 0px;
|
||||
stroke-dasharray: 40 460;
|
||||
stroke-dashoffset: 40;
|
||||
transition: .8s ease-in-out;
|
||||
}
|
||||
|
||||
.btn-neon2{
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
line-height: 50px;
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
border-style: solid;
|
||||
border-width: 3px;
|
||||
border-color: white;
|
||||
padding: 90px;
|
||||
transition: 1s;
|
||||
transition-delay: .9s;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
box-shadow: 0 0 2rem #623ac8,
|
||||
0 0 2rem #603be7,
|
||||
0 0 2rem #623ac8,
|
||||
0 0 2rem #603be7,
|
||||
0 0 2rem #623ac8,
|
||||
inset 0 0 3rem #603be7;
|
||||
|
||||
}
|
||||
|
||||
.btn-neon2:hover{
|
||||
box-shadow: 0 0 10px #2a5596,
|
||||
0 0 40px #2a5596,
|
||||
0 0 80px #2a5596;
|
||||
background-color: #2a5596;
|
||||
}
|
||||
|
||||
.btn-neon2:hover polyline{
|
||||
stroke-dashoffset: -460;
|
||||
}
|
||||
|
||||
.btn-neon2 svg{
|
||||
position: absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.btn-neon2 svg polyline{
|
||||
fill: transparent;
|
||||
stroke: #ff6f61;
|
||||
stroke-width: 0px;
|
||||
stroke-dasharray: 40 460;
|
||||
stroke-dashoffset: 40;
|
||||
transition: .8s ease-in-out;
|
||||
}
|
||||
|
||||
+754
@@ -0,0 +1,754 @@
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
.abs {
|
||||
position: absolute;
|
||||
}
|
||||
a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
color: lightblue;
|
||||
}
|
||||
html
|
||||
{
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
font-size: 1.2em
|
||||
}
|
||||
body {
|
||||
background: linear-gradient(-45deg, #2a5596, #cf8fa7, #23a6d5, #23d5ab);
|
||||
background-size: 400% 400%;
|
||||
animation: gradient 14s ease infinite;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.topnav {
|
||||
background-color: transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.topnav a {
|
||||
color: black;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
word-spacing: 3px;
|
||||
}
|
||||
|
||||
.topnav a:hover {
|
||||
background-color: transparent;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.topnav a.active {
|
||||
float: left;
|
||||
background-color: transparent;
|
||||
color: black;
|
||||
}
|
||||
.logo1
|
||||
{
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
position: absolute;
|
||||
}
|
||||
a.dreapta{
|
||||
float: right;
|
||||
text-align: center;
|
||||
}
|
||||
.dropdown {
|
||||
padding: 5.5px 25px;
|
||||
float: right;
|
||||
}
|
||||
.linkedin{
|
||||
width: 100px;
|
||||
height: 28px;
|
||||
}
|
||||
.mana{
|
||||
width: 800px;
|
||||
height: 580px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 8px 8px white inset;
|
||||
}
|
||||
.dropdown .dropbtn {
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: inherit;
|
||||
background-color: inherit;
|
||||
font-family: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.navbar a:hover, .dropdown:hover .dropbtn {
|
||||
background-color: transparent;
|
||||
}
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: transparent;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dropdown-content a {
|
||||
float: none;
|
||||
color:black;
|
||||
font-family: 'Montserrat',sans-serif;
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.dropdown-content a:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.dropdown:hover .dropdown-content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tabel-mijloc
|
||||
{
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
position: absolute;
|
||||
bottom: 25vh;
|
||||
color:white;
|
||||
font-family: 'Montserrat',sans-serif;
|
||||
}
|
||||
|
||||
.buton
|
||||
{
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
position: absolute;
|
||||
bottom: -30vh;
|
||||
color:white;
|
||||
|
||||
font-size: 1.5rem;
|
||||
letter-spacing: .2rem;
|
||||
font-family: 'Montserrat',sans-serif;
|
||||
}
|
||||
.mijloc
|
||||
{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
.mijloc > a{
|
||||
margin: 20px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.coloana-stanga
|
||||
{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 3x black;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
float:left;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.coloana-dreapta
|
||||
{
|
||||
width: 40%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
float: right;
|
||||
}
|
||||
|
||||
h3 {
|
||||
clear: left;
|
||||
opacity: 0;
|
||||
filter: blur(4px);
|
||||
letter-spacing: .1rem;
|
||||
line-height: 1.2cm;
|
||||
padding: 1px;
|
||||
font-size: 1.2vw;
|
||||
}
|
||||
|
||||
h3:nth-child(1) {
|
||||
animation: fade-in 0.8s 0.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
|
||||
}
|
||||
|
||||
h3:nth-child(2) {
|
||||
animation: fade-in 0.8s 0.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
|
||||
}
|
||||
|
||||
.waviy {
|
||||
position: relative;
|
||||
font-size: 60px;
|
||||
color: #480777;
|
||||
}
|
||||
.waviy span {
|
||||
font-family: 'Alfa Slab One', cursive;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
text-transform: uppercase;
|
||||
animation: waviy 1s infinite;
|
||||
animation-delay: calc(.1s * var(--i));
|
||||
|
||||
}
|
||||
@keyframes waviy {
|
||||
0%,40%,100% {
|
||||
transform: translateY(0)
|
||||
}
|
||||
20% {
|
||||
transform: translateY(-20px)
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #fff;
|
||||
font-size: 2vw;
|
||||
letter-spacing: .2rem;
|
||||
position: absolute;
|
||||
top: 0.5px;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
h1:nth-child(2) {
|
||||
color: transparent;
|
||||
-webkit-text-stroke: 2px #161622;
|
||||
}
|
||||
|
||||
h1:nth-child(1) {
|
||||
color: #541184;
|
||||
animation: animate 5s ease-in-out infinite;
|
||||
}
|
||||
@media(max-width: 767px){
|
||||
h1{
|
||||
display: none;
|
||||
}
|
||||
.logo1{
|
||||
width: 40%;
|
||||
height: 20%;
|
||||
}
|
||||
h3{
|
||||
font-size: 3.6vw;
|
||||
line-height: 1cm;
|
||||
}
|
||||
.dropdown{
|
||||
padding: 25.5px 10px;
|
||||
}
|
||||
.glow-on-hover{
|
||||
display: flex;
|
||||
cursor:none;
|
||||
}
|
||||
}
|
||||
@keyframes animate {
|
||||
100%,
|
||||
0% {
|
||||
clip-path: polygon(
|
||||
45% 0%,
|
||||
44% 16%,
|
||||
50% 33%,
|
||||
60% 54%,
|
||||
59% 65%,
|
||||
89% 95%,
|
||||
95% 97%,
|
||||
98% 99%,
|
||||
100% 0%
|
||||
);
|
||||
}
|
||||
|
||||
50% {
|
||||
clip-path: polygon(
|
||||
0% 60%,
|
||||
15% 65%,
|
||||
34% 66%,
|
||||
51% 62%,
|
||||
67% 50%,
|
||||
84% 45%,
|
||||
100% 46%,
|
||||
100% 100%,
|
||||
0% 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
100% {
|
||||
opacity: 1;
|
||||
filter: blur(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scale {
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes gradient {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
.cover-container {
|
||||
max-width: 42em;
|
||||
}
|
||||
|
||||
.masthead {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.masthead-brand {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.fade-out-image { animation: fadeout 5s; }
|
||||
@keyframes fadeout {
|
||||
0% { opacity: 1; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
.nav-masthead .nav-link {
|
||||
padding: .25rem 0;
|
||||
font-weight: 700;
|
||||
color: #212529;
|
||||
background-color: transparent;
|
||||
border-bottom: .25rem solid transparent;
|
||||
}
|
||||
|
||||
.nav-masthead .nav-link:hover,
|
||||
.nav-masthead .nav-link:focus {
|
||||
border-bottom-color: rgba(0, 0, 0, .25);
|
||||
}
|
||||
|
||||
.nav-masthead .nav-link+.nav-link {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 48em) {
|
||||
.masthead-brand {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.nav-masthead {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.cover {
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
#background {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.logo {
|
||||
bottom: 10px;
|
||||
right: 20px;
|
||||
}
|
||||
.logo .title {
|
||||
color: white;
|
||||
}
|
||||
.logo .subtitle {
|
||||
position: relative;
|
||||
color: white;
|
||||
left: -30px;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.control-panel {
|
||||
position: absolute;
|
||||
float: left;
|
||||
background-color: transparent;
|
||||
height: 25%;
|
||||
width: 25%;
|
||||
top: 500vh;
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
align-items: center;
|
||||
backface-visibility: hidden;
|
||||
justify-content: center;
|
||||
opacity: 1;
|
||||
transition: opacity 1s;
|
||||
}
|
||||
.loading .message {
|
||||
font-size: x-large;
|
||||
}
|
||||
.loading .spinner {
|
||||
position: absolute;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
animation: spin 1s linear infinite;
|
||||
border: 32px solid #bebebe;
|
||||
border-top: 32px solid #3498db;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.loaded .loading {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.shoutout {
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 40px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
||||
.glow-on-hover {
|
||||
width: 220px;
|
||||
height: 25px;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: #fff;
|
||||
background: #111;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
border-radius: 10px;
|
||||
font-size: 22px;
|
||||
text-align: center;
|
||||
color:white;
|
||||
font-family: 'Montserrat',sans-serif;
|
||||
|
||||
}
|
||||
|
||||
.glow-on-hover:before {
|
||||
content: '';
|
||||
background: linear-gradient(45deg, #31074e, #00ffd5, #002bff, #7a00ff, #ff00c8);
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left:-2px;
|
||||
background-size: 400%;
|
||||
z-index: -1;
|
||||
filter: blur(5px);
|
||||
width: calc(100% + 4px);
|
||||
height: calc(100% + 4px);
|
||||
animation: glowing 20s linear infinite;
|
||||
opacity: 0;
|
||||
transition: opacity .3s ease-in-out;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.glow-on-hover:active {
|
||||
color: #000
|
||||
}
|
||||
|
||||
.glow-on-hover:active:after {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.glow-on-hover:hover:before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.glow-on-hover:after {
|
||||
z-index: -1;
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #290760;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
@keyframes glowing {
|
||||
0% { background-position: 0 0; }
|
||||
50% { background-position: 400% 0; }
|
||||
100% { background-position: 0 0; }
|
||||
}
|
||||
|
||||
.container {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
bottom: 45vh;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.container-item-1{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
float: left;
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
}
|
||||
.container-item-11{
|
||||
width: 45%;
|
||||
height: 100%;
|
||||
}
|
||||
.p41
|
||||
{
|
||||
height: 100%;
|
||||
}
|
||||
.container-item-2{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
float: left;
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
border-radius: 10%;
|
||||
}
|
||||
.container-item-22{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
border-radius: 10%;
|
||||
}
|
||||
|
||||
.input_video {
|
||||
display: none;
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
justify-content: center;
|
||||
align-items: start;
|
||||
|
||||
}
|
||||
.input_video.selfie {
|
||||
transform: scale(-1, 1);
|
||||
}
|
||||
|
||||
.input_image {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.canvas-container {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
align-items: start;
|
||||
|
||||
}
|
||||
|
||||
.output_canvas {
|
||||
width: 55%;
|
||||
height: 85%;
|
||||
position: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
bottom: 49vh;
|
||||
border-radius: 10%;
|
||||
}
|
||||
|
||||
.rezultat-cuvinte
|
||||
{
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
float: left;
|
||||
align-content: left;
|
||||
top: 50vh;
|
||||
}
|
||||
|
||||
.ultimu
|
||||
{
|
||||
width: 100%;
|
||||
height: 3%;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
align-content: right;
|
||||
bottom: 25vh;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.buton-fill2
|
||||
{
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
text-align: right;
|
||||
|
||||
font-size: 20px;
|
||||
color: #f5f5f5;
|
||||
background-color: #2e2e38;
|
||||
opacity: 50%;
|
||||
|
||||
width: 150px;
|
||||
height: 70px;
|
||||
|
||||
box-shadow: 0 0 10rem #fff,
|
||||
0 0 15rem #fff,
|
||||
0 0 12rem #b05af7,
|
||||
0 0 15rem #d99ef0,
|
||||
0 0 15rem #7305f9,
|
||||
inset 0 0 12rem #2f0a6c;
|
||||
|
||||
position: flex;
|
||||
justify-content: right;
|
||||
float: right;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.btn-neon{
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
|
||||
font-size: 20px;
|
||||
color: #f5f5f5;
|
||||
background-color: palevioletred;
|
||||
opacity: 10%;
|
||||
|
||||
box-shadow: 0 0 4rem #b411ef,
|
||||
0 0 12rem #691ad0,
|
||||
0 0 12rem #b05af7,
|
||||
0 0 18rem #d99ef0,
|
||||
0 0 28rem #7305f9,
|
||||
inset 0 0 20rem #2f0a6c;
|
||||
|
||||
width: 100%;
|
||||
height: 450px;
|
||||
|
||||
transition: 1s;
|
||||
transition-delay: .9s;
|
||||
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
.btn-neon_a{
|
||||
display: hidden;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
|
||||
font-size: 45px;
|
||||
align-items: center;
|
||||
color: #f5f5f5;
|
||||
background-color: #2e2e38;
|
||||
opacity: 50%;
|
||||
|
||||
width: 100%;
|
||||
height: 450px;
|
||||
|
||||
transition: 1s;
|
||||
transition-delay: .9s;
|
||||
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
box-shadow: 0 0 50px #17b25d,
|
||||
0 0 100px #17b25d,
|
||||
0 0 150px #17b25d;
|
||||
background-color: #17b25d;
|
||||
}
|
||||
|
||||
.btn-neon_a polyline{
|
||||
stroke-dashoffset: -460;
|
||||
}
|
||||
svg
|
||||
{
|
||||
left: 50%;
|
||||
height:50;
|
||||
width:180;
|
||||
}
|
||||
.btn-neon svg{
|
||||
position: flex;
|
||||
top:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.btn-neon svg polyline{
|
||||
fill: transparent;
|
||||
stroke: #17b25d;
|
||||
stroke-width: 1px;
|
||||
stroke-dasharray: 40 460;
|
||||
stroke-dashoffset: 60;
|
||||
transition: .8s ease-in-out;
|
||||
}
|
||||
|
||||
.p31
|
||||
{
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.buton-fill
|
||||
{
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
|
||||
font-size: 39px;
|
||||
color: #f5f5f5;
|
||||
background-color: #1387a4;
|
||||
opacity: 50%;
|
||||
|
||||
width: 90%;
|
||||
height: 450px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.clear
|
||||
{
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
|
||||
font-size: 20px;
|
||||
color: #f5f5f5;
|
||||
background-color: #2e2e38;
|
||||
opacity: 50%;
|
||||
|
||||
width: 650px;
|
||||
height: 70px;
|
||||
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.Home-page-2
|
||||
{
|
||||
padding: 0px;
|
||||
position: absolute;
|
||||
display: absolute;
|
||||
margin: 0px;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background-color: transparent;
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
body {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #000;
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.progress {
|
||||
background: white;
|
||||
justify-content: flex-start;
|
||||
border-radius: 100px;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
padding: 0 5px;
|
||||
display: flex;
|
||||
height: 40px;
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.progress-value {
|
||||
animation: load 3s normal forwards;
|
||||
box-shadow: 0 10px 40px -10px #2a5596;
|
||||
border-radius: 100px;
|
||||
background: #2a5596;
|
||||
height: 30px;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
@keyframes load {
|
||||
0% { width: 0; }
|
||||
100% { width: 100%; }
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
<html>
|
||||
<body>
|
||||
<link rel="stylesheet" href="./test.css">
|
||||
<div class="progress">
|
||||
<div class="progress-value"></div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="./test.js"></script>
|
||||
</html>
|
||||
+159
@@ -0,0 +1,159 @@
|
||||
|
||||
App({ el: 'background' });
|
||||
|
||||
function App(conf) {
|
||||
conf = {
|
||||
fov: 70,
|
||||
cameraZ: 75,
|
||||
xyCoef: 50,
|
||||
zCoef: 10,
|
||||
lightIntensity: 0.7,
|
||||
ambientColor: 0x000000,
|
||||
light1Color: 0x0E09DC,
|
||||
light2Color: 0x1CD1E1,
|
||||
light3Color: 0x18C02C,
|
||||
light4Color: 0xee3bcf,
|
||||
...conf };
|
||||
|
||||
|
||||
let renderer, scene, camera, cameraCtrl;
|
||||
let width, height, cx, cy, wWidth, wHeight;
|
||||
const TMath = THREE.Math;
|
||||
const waveHeight = document.getElementsByClassName('landmark-grid-container')[0];
|
||||
console.log(waveHeight);
|
||||
let plane;
|
||||
const simplex = new SimplexNoise();
|
||||
|
||||
|
||||
|
||||
const mouse = new THREE.Vector2();
|
||||
const mousePlane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
|
||||
const mousePosition = new THREE.Vector3();
|
||||
const raycaster = new THREE.Raycaster();
|
||||
|
||||
conf.xyCoef = 6;
|
||||
conf.zCoef = 7;
|
||||
|
||||
|
||||
init();
|
||||
|
||||
function init() {
|
||||
renderer = new THREE.WebGLRenderer({ canvas: document.getElementById(conf.el), antialias: true, alpha: true });
|
||||
camera = new THREE.PerspectiveCamera(conf.fov);
|
||||
camera.position.z = conf.cameraZ;
|
||||
|
||||
updateSize();
|
||||
window.addEventListener('resize', updateSize, false);
|
||||
|
||||
initScene();
|
||||
animate();
|
||||
}
|
||||
|
||||
function initScene() {
|
||||
scene = new THREE.Scene();
|
||||
initLights();
|
||||
|
||||
let mat = new THREE.MeshLambertMaterial({ color: 0xffffff, side: THREE.DoubleSide });
|
||||
// let mat = new THREE.MeshPhongMaterial({ color: 0xffffff });
|
||||
// let mat = new THREE.MeshStandardMaterial({ color: 0x808080, roughness: 0.5, metalness: 0.8 });
|
||||
let geo = new THREE.PlaneBufferGeometry(wWidth, wHeight, wWidth / 2, wHeight / 2);
|
||||
plane = new THREE.Mesh(geo, mat);
|
||||
scene.add(plane);
|
||||
|
||||
plane.rotation.x = -Math.PI / 2 - 0.2;
|
||||
plane.position.y = -25;
|
||||
camera.position.z = 60;
|
||||
}
|
||||
|
||||
function initLights() {
|
||||
const r = 30;
|
||||
const y = 10;
|
||||
const lightDistance = 500;
|
||||
|
||||
// light = new THREE.AmbientLight(conf.ambientColor);
|
||||
// scene.add(light);
|
||||
|
||||
light1 = new THREE.PointLight(conf.light1Color, conf.lightIntensity, lightDistance);
|
||||
light1.position.set(0, y, r);
|
||||
scene.add(light1);
|
||||
light2 = new THREE.PointLight(conf.light2Color, conf.lightIntensity, lightDistance);
|
||||
light2.position.set(0, -y, -r);
|
||||
scene.add(light2);
|
||||
light3 = new THREE.PointLight(conf.light3Color, conf.lightIntensity, lightDistance);
|
||||
light3.position.set(r, y, 0);
|
||||
scene.add(light3);
|
||||
light4 = new THREE.PointLight(conf.light4Color, conf.lightIntensity, lightDistance);
|
||||
light4.position.set(-r, y, 0);
|
||||
scene.add(light4);
|
||||
}
|
||||
|
||||
function animate() {
|
||||
requestAnimationFrame(animate);
|
||||
|
||||
animatePlane();
|
||||
animateLights();
|
||||
|
||||
renderer.render(scene, camera);
|
||||
};
|
||||
|
||||
function animatePlane() {
|
||||
gArray = plane.geometry.attributes.position.array;
|
||||
const time = Date.now() * 0.0002;
|
||||
|
||||
for (let i = 0; i < gArray.length; i += 3) {
|
||||
if(!waveHeight)
|
||||
gArray[i + 2] = simplex.noise4D(gArray[i] / conf.xyCoef, gArray[i + 1] / conf.xyCoef, time, 5) * conf.zCoef;
|
||||
else
|
||||
gArray[i + 2] = simplex.noise4D(gArray[i] / conf.xyCoef, gArray[i + 1] / conf.xyCoef, time, 100) * conf.zCoef;
|
||||
|
||||
}
|
||||
plane.geometry.attributes.position.needsUpdate = true;
|
||||
// plane.geometry.computeBoundingSphere();
|
||||
}
|
||||
|
||||
function animateLights() {
|
||||
const time = Date.now() * 0.001;
|
||||
const d = 50;
|
||||
light1.position.x = Math.sin(time * 0.1) * d;
|
||||
light1.position.z = Math.cos(time * 0.2) * d;
|
||||
light2.position.x = Math.cos(time * 0.3) * d;
|
||||
light2.position.z = Math.sin(time * 0.4) * d;
|
||||
light3.position.x = Math.sin(time * 0.5) * d;
|
||||
light3.position.z = Math.sin(time * 0.6) * d;
|
||||
light4.position.x = Math.sin(time * 0.7) * d;
|
||||
light4.position.z = Math.cos(time * 0.8) * d;
|
||||
}
|
||||
|
||||
function updateLightsColors() {
|
||||
conf.light1Color = chroma.random().hex();
|
||||
conf.light2Color = chroma.random().hex();
|
||||
conf.light3Color = chroma.random().hex();
|
||||
conf.light4Color = chroma.random().hex();
|
||||
light1.color = new THREE.Color(conf.light1Color);
|
||||
light2.color = new THREE.Color(conf.light2Color);
|
||||
light3.color = new THREE.Color(conf.light3Color);
|
||||
light4.color = new THREE.Color(conf.light4Color);
|
||||
// console.log(conf);
|
||||
}
|
||||
|
||||
function updateSize() {
|
||||
width = window.innerWidth;cx = width / 2;
|
||||
height = window.innerHeight;cy = height / 2;
|
||||
if (renderer && camera) {
|
||||
renderer.setSize(width, height);
|
||||
camera.aspect = width / height;
|
||||
camera.updateProjectionMatrix();
|
||||
const wsize = getRendererSize();
|
||||
wWidth = wsize[0];
|
||||
wHeight = wsize[1];
|
||||
}
|
||||
}
|
||||
|
||||
function getRendererSize() {
|
||||
const cam = new THREE.PerspectiveCamera(camera.fov, camera.aspect);
|
||||
const vFOV = cam.fov * Math.PI / 180;
|
||||
const height = 2 * Math.tan(vFOV / 2) * Math.abs(conf.cameraZ);
|
||||
const width = height * cam.aspect;
|
||||
return [width, height];
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user