MarkEEaton
/
ar-scavenger-hunt
mirror of https://github.com/MarkEEaton/ar-scavenger-hunt.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

improvements to landscape

This commit is contained in:
Mark Eaton 2023-07-26 21:05:22 -04:00
parent 91f742f3b4
commit 625c6c7fb4
2 changed files with 16 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
index.html
View File

@ -2,7 +2,7 @@
<!-- Group homepage -->
<body style="overflow: hidden; width: 100vw;">
<a-scene style="max-height: 100vh; max-width: 100vw; border: 3px solid red" embedded markerhandler arjs="detectionMode: mono_and_matrix; matrixCodeType: 3x3_HAMMING63;" device-orientation-permission-ui="enabled: false">
<a-scene style="max-height: 100vh; max-width: 100vw;" embedded markerhandler arjs="detectionMode: mono_and_matrix; matrixCodeType: 3x3_HAMMING63;" device-orientation-permission-ui="enabled: false">
<div id="header-container" style="position: fixed;">
<div id="header">
@ -17,15 +17,17 @@
</ul>
</div>
</div>
<div id="starter" class="startend">
<p>Welcome to the Library's <strong>Scavenger Hunt</strong>!</span></p>
<p>Find the items listed under "Check your progress"</p>
<p>Tap on the shapes when you find the items!</p>
<button type="button" class="btn btn-success btn-lg" id="startbutton">Start!</button>
</div>
<div id="ender" class="startend">
<p><strong>🎉 Congratulations! 🎉</strong> You've found all of the items!</p>
<p>Show this screen to the librarians at the reference desk to claim your prize!</p>
<div id="startend-container">
<div id="starter" class="startend">
<p>Welcome to the Library's <strong>Scavenger Hunt</strong>!</span></p>
<p>Find the items listed under "Check your progress"</p>
<p>Tap on the shapes when you find the items!</p>
<button type="button" class="btn btn-success btn-lg" id="startbutton">Start!</button>
</div>
<div id="ender" class="startend">
<p><strong>🎉 Congratulations! 🎉</strong> You've found all of the items!</p>
<p>Show this screen to the librarians at the reference desk to claim your prize!</p>
</div>
</div>
</div>

8
js-css.html
View File

@ -12,12 +12,12 @@ body { display: flex; justify-content: center; align-items: center; }
}
#ender { display: none; background-color: #ccc; border-radius: 5px; padding: 30px; font-size: 2em; text-align: center; position: relative; }
#header-container { z-index: 45; width: 100vw; padding: 20px; }
#header-container { z-index: 45; width: 100%; padding: 20px; }
#header { padding: 5px; }
@media screen and (orientation: landscape) {
#header-container { max-height: 100vh; max-width: 100vw; }
#header { text-align: left; margin: auto auto; }
body { margin-top: 0 !important; }
#header-container { max-height: 100vh; width: 100vw; margin-top: 5px; }
#header { text-align: center; }
#startend-container { width: 100%; display: flex; justify-content: center; }
}
.dropdown { z-index: 50; }
.dropdown-menu li { font-size: 2em; padding: 2px 20px; white-space: nowrap; }