index3d.html (6502B)
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml" lang="en-GB" xml:lang="en-GB"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 5 <title>Suzanne Soy’s page</title> 6 <script src="target-within-shim.js"></script> 7 <link rel="stylesheet" href="test.css"> 8 <link rel="stylesheet" href="3d.css"> 9 </head> 10 <body> 11 <h1>Suzanne Soy</h1> 12 <div id="temp-other-content" style="position: relative; z-index: 1;"> 13 <h2>Procedural Designer</h2> 14 <p>Latest version of my <a href="phc-thesis/">Ph.D draft</a></p> 15 <p><a href="git-tutorial/">GIT tutorial</a></p> 16 </div> 17 <div class="css3d" style="display: none;"> 18 <div id="detector"></div> 19 <div tabindex="0" id="a"> 20 A 21 <div tabindex="0" id="a1"> 22 A1 23 <iframe srcdoc="<h1>title</h1>"></iframe> 24 </div> 25 <div tabindex="0" id="a2"> 26 A2 27 </div> 28 </div> 29 <div tabindex="0" id="b"> 30 B<a href="#a">goto a</a><a href="#b">goto b</a> 31 </div> 32 </div> 33 <div class="view3d"> 34 <div class="scene" id="main"> 35 <a class="go" href="#main">→ Enter ←</a> 36 <div class="rest"></div> 37 <div tabindex="0" class="three-d room hover room-test"> 38 <div class="three-d object test" id="hello">Hello world 39 <a class="go" href="#hello">hello</a> 40 <div class="scene"> 41 <div class="rest"></div> 42 <div tabindex="0" class="three-d room hover room-test"> 43 <div class="three-d object test" id="turtles">It's turtles all the way down! 44 <a class="go" href="#turtles">turtles</a> 45 <div class="scene"> 46 <div class="rest"></div> 47 <div tabindex="0" class="three-d room hover room-test"> 48 <div class="three-d object test" id="table.js"> 49 <a class="go" href="#table.js">table editor</a> 50 <iframe 51 style="width:100%; height:90%;" 52 src="table.js"></iframe> 53 </div> 54 </div> 55 <div tabindex="0" class="three-d room hover room-test2"> 56 <div class="three-d object test2" id="css-only-virtual-world"> 57 <a class="go" href="#css-only-virtual-world">useful tip</a> 58 Don't use CSS to do this.</div> 59 </div> 60 <div class="three-d room"> 61 <div class="three-d wall wall-l"></div> 62 <div class="three-d wall wall-r"></div> 63 <div class="three-d wall wall-u"></div> 64 <div class="three-d wall wall-d"></div> 65 <div class="three-d wall wall-b"></div> 66 <div class="three-d wall wall-f"></div> 67 </div> 68 </div> 69 </div> 70 </div> 71 <div tabindex="0" class="three-d room hover room-test2"> 72 <div class="three-d object test2" id="nested-rooms"> 73 <a class="go" href="#nested-rooms">nested-rooms</a> 74 Nested rooms! 75 </div> 76 </div> 77 <div class="three-d room"> 78 <div class="three-d wall wall-l"></div> 79 <div class="three-d wall wall-r"></div> 80 <div class="three-d wall wall-u"></div> 81 <div class="three-d wall wall-d"></div> 82 <div class="three-d wall wall-b"></div> 83 <div class="three-d wall wall-f"></div> 84 </div> 85 </div> 86 </div> 87 </div> 88 <div tabindex="0" class="three-d room hover room-test2"> 89 <div class="three-d object test2" id="mental-palace">Mental palace 90 <a class="go" href="#mental-palace">mental-palace</a> 91 <div class="scene"> 92 <div tabindex="0" class="three-d room hover room-test"> 93 <div class="three-d object test" id="mental-palace-2001"> 94 <a class="go" href="#mental-palace-2001"></a> 95 Oh my… 96 </div> 97 </div> 98 <div tabindex="0" class="three-d room hover room-test2"> 99 <div class="three-d object test2" id="mental-palace-stars"> 100 <a class="go" href="#mental-palace-stars"></a> 101 It's full of <div>s 102 </div> 103 </div> 104 <div class="three-d room"> 105 <div class="three-d wall wall-l"></div> 106 <div class="three-d wall wall-r"></div> 107 <div class="three-d wall wall-u"></div> 108 <div class="three-d wall wall-d"></div> 109 <div class="three-d wall wall-b"></div> 110 <div class="three-d wall wall-f"></div> 111 </div> 112 </div> 113 </div> 114 </div> 115 <div class="three-d room"> 116 <div class="three-d wall wall-l"></div> 117 <div class="three-d wall wall-r"></div> 118 <div class="three-d wall wall-u"></div> 119 <div class="three-d wall wall-d"></div> 120 <div class="three-d wall wall-b"></div> 121 <div class="three-d wall wall-f"></div> 122 </div> 123 </div> 124 </div> 125 </body> 126 </html>