<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="style.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="../translation.js" type="text/javascript"></script>
</head>
<body style="display:none">
<div class="background">
<div class="categories"></div>
<div class="header">
<p id="headerName"></p>
<p id="headerCategory"></p>
</div>
<div class="panel">
</div>
<div class="settings">
<div class="height">
<p class="height-title" id="height-text"></p>
<div class="height-radius">
<input type="range" value="0.0" step="0.1" min="-1.0" max="1.0" id="height-input" class="input-option-radius" oninput="changeHeight()">
</div>
</div>
<div class="rotate">
<p class="rotate-title" id="rotate-text"></p>
<div class="rotate-radius">
<input type="range" min="0" max="360" id="rotate-input" class="input-option-radius" oninput="changeRotate()">
</div>
</div>
<div class="distance">
<p class="distance-title" id="distance-text"></p>
<div class="distance-radius">
<input type="range" min="30" max="100" id="distance-input" class="input-option-radius" oninput="changeDistance()">
</div>
</div>
<div>
<div class="accept-skin">
<i class="fa-solid fa-check accept-icon"></i>
<p id="save"></p>
</div>
<div class="cancel-skin">
<i class="fa-solid fa-xmark accept-icon"></i>
<p id="cancel"></p>
</div>
<div class="hands-up">
<i class="fa-solid fa-hands-holding-circle"></i>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="script.js" type="text/javascript"></script>
</body>
</html>