199 lines
12 KiB
HTML
199 lines
12 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>HTML CSS Cube Test</title>
|
||
|
|
<link rel="stylesheet" href="../../main.css">
|
||
|
|
<link rel="stylesheet" href="cube.css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!-- States -->
|
||
|
|
<div id="cube-open"></div>
|
||
|
|
<div id="object-found"></div>
|
||
|
|
<!-- View mouse areas -->
|
||
|
|
<div class="view-section view-top-0 view-left-0"></div>
|
||
|
|
<div class="view-section view-top-0 view-left-1"></div>
|
||
|
|
<div class="view-section view-top-0 view-left-2"></div>
|
||
|
|
<div class="view-section view-top-0 view-left-3"></div>
|
||
|
|
<div class="view-section view-top-0 view-left-4"></div>
|
||
|
|
<div class="view-section view-top-0 view-left-5"></div>
|
||
|
|
<div class="view-section view-top-0 view-left-6"></div>
|
||
|
|
<div class="view-section view-top-0 view-left-7"></div>
|
||
|
|
<div class="view-section view-top-0 view-left-8"></div>
|
||
|
|
<div class="view-section view-top-1 view-left-0"></div>
|
||
|
|
<div class="view-section view-top-1 view-left-1"></div>
|
||
|
|
<div class="view-section view-top-1 view-left-2"></div>
|
||
|
|
<div class="view-section view-top-1 view-left-3"></div>
|
||
|
|
<div class="view-section view-top-1 view-left-4"></div>
|
||
|
|
<div class="view-section view-top-1 view-left-5"></div>
|
||
|
|
<div class="view-section view-top-1 view-left-6"></div>
|
||
|
|
<div class="view-section view-top-1 view-left-7"></div>
|
||
|
|
<div class="view-section view-top-1 view-left-8"></div>
|
||
|
|
<div class="view-section view-top-2 view-left-0"></div>
|
||
|
|
<div class="view-section view-top-2 view-left-1"></div>
|
||
|
|
<div class="view-section view-top-2 view-left-2"></div>
|
||
|
|
<div class="view-section view-top-2 view-left-3"></div>
|
||
|
|
<div class="view-section view-top-2 view-left-4"></div>
|
||
|
|
<div class="view-section view-top-2 view-left-5"></div>
|
||
|
|
<div class="view-section view-top-2 view-left-6"></div>
|
||
|
|
<div class="view-section view-top-2 view-left-7"></div>
|
||
|
|
<div class="view-section view-top-2 view-left-8"></div>
|
||
|
|
<div class="view-section view-top-3 view-left-0"></div>
|
||
|
|
<div class="view-section view-top-3 view-left-1"></div>
|
||
|
|
<div class="view-section view-top-3 view-left-2"></div>
|
||
|
|
<div class="view-section view-top-3 view-left-3"></div>
|
||
|
|
<div class="view-section view-top-3 view-left-4"></div>
|
||
|
|
<div class="view-section view-top-3 view-left-5"></div>
|
||
|
|
<div class="view-section view-top-3 view-left-6"></div>
|
||
|
|
<div class="view-section view-top-3 view-left-7"></div>
|
||
|
|
<div class="view-section view-top-3 view-left-8"></div>
|
||
|
|
<div class="view-section view-top-4 view-left-0"></div>
|
||
|
|
<div class="view-section view-top-4 view-left-1"></div>
|
||
|
|
<div class="view-section view-top-4 view-left-2"></div>
|
||
|
|
<div class="view-section view-top-4 view-left-3"></div>
|
||
|
|
<div class="view-section view-top-4 view-left-4"></div>
|
||
|
|
<div class="view-section view-top-4 view-left-5"></div>
|
||
|
|
<div class="view-section view-top-4 view-left-6"></div>
|
||
|
|
<div class="view-section view-top-4 view-left-7"></div>
|
||
|
|
<div class="view-section view-top-4 view-left-8"></div>
|
||
|
|
<div class="view-section view-top-5 view-left-0"></div>
|
||
|
|
<div class="view-section view-top-5 view-left-1"></div>
|
||
|
|
<div class="view-section view-top-5 view-left-2"></div>
|
||
|
|
<div class="view-section view-top-5 view-left-3"></div>
|
||
|
|
<div class="view-section view-top-5 view-left-4"></div>
|
||
|
|
<div class="view-section view-top-5 view-left-5"></div>
|
||
|
|
<div class="view-section view-top-5 view-left-6"></div>
|
||
|
|
<div class="view-section view-top-5 view-left-7"></div>
|
||
|
|
<div class="view-section view-top-5 view-left-8"></div>
|
||
|
|
<div class="view-section view-top-6 view-left-0"></div>
|
||
|
|
<div class="view-section view-top-6 view-left-1"></div>
|
||
|
|
<div class="view-section view-top-6 view-left-2"></div>
|
||
|
|
<div class="view-section view-top-6 view-left-3"></div>
|
||
|
|
<div class="view-section view-top-6 view-left-4"></div>
|
||
|
|
<div class="view-section view-top-6 view-left-5"></div>
|
||
|
|
<div class="view-section view-top-6 view-left-6"></div>
|
||
|
|
<div class="view-section view-top-6 view-left-7"></div>
|
||
|
|
<div class="view-section view-top-6 view-left-8"></div>
|
||
|
|
<div class="view-section view-top-7 view-left-0"></div>
|
||
|
|
<div class="view-section view-top-7 view-left-1"></div>
|
||
|
|
<div class="view-section view-top-7 view-left-2"></div>
|
||
|
|
<div class="view-section view-top-7 view-left-3"></div>
|
||
|
|
<div class="view-section view-top-7 view-left-4"></div>
|
||
|
|
<div class="view-section view-top-7 view-left-5"></div>
|
||
|
|
<div class="view-section view-top-7 view-left-6"></div>
|
||
|
|
<div class="view-section view-top-7 view-left-7"></div>
|
||
|
|
<div class="view-section view-top-7 view-left-8"></div>
|
||
|
|
<div class="view-section view-top-8 view-left-0"></div>
|
||
|
|
<div class="view-section view-top-8 view-left-1"></div>
|
||
|
|
<div class="view-section view-top-8 view-left-2"></div>
|
||
|
|
<div class="view-section view-top-8 view-left-3"></div>
|
||
|
|
<div class="view-section view-top-8 view-left-4"></div>
|
||
|
|
<div class="view-section view-top-8 view-left-5"></div>
|
||
|
|
<div class="view-section view-top-8 view-left-6"></div>
|
||
|
|
<div class="view-section view-top-8 view-left-7"></div>
|
||
|
|
<div class="view-section view-top-8 view-left-8"></div>
|
||
|
|
<div class="dialog">Congratulations! You found the object!</div>
|
||
|
|
<!-- Scene figure -->
|
||
|
|
<section class="scene">
|
||
|
|
<figure class="root" style='--width: 300px; --height: 300px;'>
|
||
|
|
|
||
|
|
<figure class="cube position-at-center" style='left: 50%; top: 50%; --size: 100px;'>
|
||
|
|
<svg class="face front interactive" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<path d="m0 0v24h24v-24h-24zm5.5 2a3.5 3.5 0 0 1 3.5 3.5 3.5 3.5 0 0 1-3.5 3.5 3.5 3.5 0 0 1-3.5-3.5 3.5 3.5 0 0 1 3.5-3.5zm13 0a3.5 3.5 0 0 1 3.5 3.5 3.5 3.5 0 0 1-3.5 3.5 3.5 3.5 0 0 1-3.5-3.5 3.5 3.5 0 0 1 3.5-3.5zm-6.5 6.5a3.5 3.5 0 0 1 3.5 3.5 3.5 3.5 0 0 1-3.5 3.5 3.5 3.5 0 0 1-3.5-3.5 3.5 3.5 0 0 1 3.5-3.5zm-6.5 6.5a3.5 3.5 0 0 1 3.5 3.5 3.5 3.5 0 0 1-3.5 3.5 3.5 3.5 0 0 1-3.5-3.5 3.5 3.5 0 0 1 3.5-3.5zm13 0a3.5 3.5 0 0 1 3.5 3.5 3.5 3.5 0 0 1-3.5 3.5 3.5 3.5 0 0 1-3.5-3.5 3.5 3.5 0 0 1 3.5-3.5z" fill="white" fill-rule="evenodd"/>
|
||
|
|
<g fill="none" stroke="#000" stroke-width=".3">
|
||
|
|
<ellipse cx="5.5" cy="5.5" rx="3.4812" ry="3.4812"/>
|
||
|
|
<ellipse cx="18.5" cy="5.5" rx="3.4812" ry="3.4812"/>
|
||
|
|
<ellipse cx="12" cy="12" rx="3.4812" ry="3.4812"/>
|
||
|
|
<ellipse cx="5.5" cy="18.5" rx="3.4812" ry="3.4812"/>
|
||
|
|
<ellipse cx="18.5" cy="18.5" rx="3.4812" ry="3.4812"/>
|
||
|
|
</g>
|
||
|
|
</svg>
|
||
|
|
<div class="interactive face back "></div>
|
||
|
|
<div class="interactive face right "></div>
|
||
|
|
<div class="interactive face left "></div>
|
||
|
|
<div class="interactive face top "></div>
|
||
|
|
<div class="interactive face bottom"></div>
|
||
|
|
|
||
|
|
<figure id="buttons">
|
||
|
|
<figure class="cuboid rectangular button button0">
|
||
|
|
<div class="face front "></div>
|
||
|
|
<div class="face back "></div>
|
||
|
|
<div class="face left "></div>
|
||
|
|
<div class="face right "></div>
|
||
|
|
<div class="face top "></div>
|
||
|
|
<div class="face bottom"></div>
|
||
|
|
</figure>
|
||
|
|
<figure class="cuboid rectangular button button1">
|
||
|
|
<div class="face front "></div>
|
||
|
|
<div class="face back "></div>
|
||
|
|
<div class="face left "></div>
|
||
|
|
<div class="face right "></div>
|
||
|
|
<div class="face top "></div>
|
||
|
|
<div class="face bottom"></div>
|
||
|
|
</figure>
|
||
|
|
<figure class="cuboid rectangular button button2">
|
||
|
|
<div class="face front "></div>
|
||
|
|
<div class="face back "></div>
|
||
|
|
<div class="face left "></div>
|
||
|
|
<div class="face right "></div>
|
||
|
|
<div class="face top "></div>
|
||
|
|
<div class="face bottom"></div>
|
||
|
|
</figure>
|
||
|
|
<figure class="cuboid rectangular button button3">
|
||
|
|
<div class="face front "></div>
|
||
|
|
<div class="face back "></div>
|
||
|
|
<div class="face left "></div>
|
||
|
|
<div class="face right "></div>
|
||
|
|
<div class="face top "></div>
|
||
|
|
<div class="face bottom"></div>
|
||
|
|
</figure>
|
||
|
|
<figure class="cuboid rectangular button button4">
|
||
|
|
<div class="face front "></div>
|
||
|
|
<div class="face back "></div>
|
||
|
|
<div class="face left "></div>
|
||
|
|
<div class="face right "></div>
|
||
|
|
<div class="face top "></div>
|
||
|
|
<div class="face bottom"></div>
|
||
|
|
</figure>
|
||
|
|
<figure class="cuboid rectangular button button5 interactive">
|
||
|
|
<a href="#cube-open" class="face front "></a>
|
||
|
|
<a href="#cube-open" class="face back "></a>
|
||
|
|
<a href="#cube-open" class="face left "></a>
|
||
|
|
<a href="#cube-open" class="face right "></a>
|
||
|
|
<a href="#cube-open" class="face top "></a>
|
||
|
|
<a href="#cube-open" class="face bottom"></a>
|
||
|
|
<div class="tooltip" style="transform: translateY(-30px) translateX(-20px) translateZ(50px) rotateX(-90deg);">Click me!</div>
|
||
|
|
</figure>
|
||
|
|
</figure>
|
||
|
|
|
||
|
|
<figure id="object-wires" class="cylinder textured">
|
||
|
|
<a href="#object-found" class="strip strip-1 "></a>
|
||
|
|
<a href="#object-found" class="strip strip-2 "></a>
|
||
|
|
<a href="#object-found" class="strip strip-3 "></a>
|
||
|
|
<a href="#object-found" class="strip strip-4 "></a>
|
||
|
|
<a href="#object-found" class="strip strip-5 "></a>
|
||
|
|
<a href="#object-found" class="strip strip-6 "></a>
|
||
|
|
<a href="#object-found" class="strip strip-7 "></a>
|
||
|
|
<a href="#object-found" class="strip strip-8 "></a>
|
||
|
|
<a href="#object-found" class="strip strip-9 "></a>
|
||
|
|
<a href="#object-found" class="strip strip-10"></a>
|
||
|
|
<a href="#object-found" class="strip strip-11"></a>
|
||
|
|
<a href="#object-found" class="strip strip-12"></a>
|
||
|
|
<a href="#object-found" class="strip strip-13"></a>
|
||
|
|
<a href="#object-found" class="strip strip-14"></a>
|
||
|
|
<a href="#object-found" class="strip strip-15"></a>
|
||
|
|
<a href="#object-found" class="strip strip-16"></a>
|
||
|
|
<a href="#object-found" class="strip strip-17"></a>
|
||
|
|
<a href="#object-found" class="strip strip-18"></a>
|
||
|
|
<a href="#object-found" class="strip strip-19"></a>
|
||
|
|
<a href="#object-found" class="strip strip-20"></a>
|
||
|
|
<a href="#object-found" class="strip strip-21"></a>
|
||
|
|
<a href="#object-found" class="strip strip-22"></a>
|
||
|
|
<a href="#object-found" class="strip strip-23"></a>
|
||
|
|
<a href="#object-found" class="strip strip-24"></a>
|
||
|
|
</figure>
|
||
|
|
</figure>
|
||
|
|
</figure>
|
||
|
|
</section>
|
||
|
|
</body>
|
||
|
|
</html>
|