45 lines
1.9 KiB
HTML
45 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<link rel="stylesheet" href="w3.css">
|
|
<link rel="stylesheet" href="style.css">
|
|
<link href="fontawesome/5.3.1/css/all.css" rel="stylesheet">
|
|
</head>
|
|
<div id='iconpicker' style='width:200px;'>
|
|
</div>
|
|
|
|
<script>
|
|
const iconpicker = document.getElementById('iconpicker');
|
|
const icon = [0,0,0];
|
|
const icons = [['buche','eiche','fichte'],['gesund','krank','tot'],['portaledge','kuppel','haus']];
|
|
|
|
iconpicker.innerHTML=`
|
|
<div class='w3-container w3-row'>
|
|
<div class='w3-col s2 m2 l2'>
|
|
<div class='w3-row'><button id='species_left' onclick='rotate(0,-1)'><i class="fa fa-caret-left"></i></button></div>
|
|
<div class='w3-row'><button id='state_left' onclick='rotate(1,-1)'><i class="fa fa-caret-left"></i></button></div>
|
|
<div class='w3-row'><button id='plattform_left' onclick='rotate(2,-1)'><i class="fa fa-caret-left"></i></button></div>
|
|
</div>
|
|
<div class='w3-col s8 m8 l8'>
|
|
<img id='icon' src='images/${icons[0][0]}_${icons[1][0]}_${icons[2][0]}.png' width='90%'/>
|
|
</div>
|
|
<div class='w3-col s2 m2 l2'>
|
|
<div class='w3-row'><button id='species_right' onclick='rotate(0,1)'><i class="fa fa-caret-right"></i></button></div>
|
|
<div class='w3-row'><button id='state_right' onclick='rotate(1,1)'><i class="fa fa-caret-right"></i></button></div>
|
|
<div class='w3-row'><button id='plattform_right' onclick='rotate(2,1)'><i class="fa fa-caret-right"></i></button></div>
|
|
</div>
|
|
</div>`;
|
|
|
|
const icon_elem = document.getElementById('icon');
|
|
|
|
function rotate(pos,dir){
|
|
icon[pos] += dir;
|
|
if (icon[pos]<0) icon[pos]=icons[pos].length-1;
|
|
if (icon[pos]>=icons[pos].length) icon[pos]=0;
|
|
const image = 'images/'+icons[0][icon[0]]+'_'+icons[1][icon[1]]+'_'+icons[2][icon[2]]+'.png';
|
|
icon_elem.src=image;
|
|
}
|
|
</script>
|
|
</html>
|
|
|