Add 'How to Use' entry to menu, linking to manual

adgt · Mar 25, 2019 · ab8fc9a · ab8fc9a
1 parent 5d45f2a
commit ab8fc9a
Show file tree

Hide file tree

Showing 12 changed files with 20 additions and 8 deletions.
diff --git a/doc/MANUAL_amp-display.png b/doc/MANUAL_amp-display.png
diff --git a/doc/MANUAL_bloch-display.png b/doc/MANUAL_bloch-display.png
diff --git a/doc/MANUAL_chance-display.png b/doc/MANUAL_chance-display.png
diff --git a/doc/MANUAL_circuit-editing-area.png b/doc/MANUAL_circuit-editing-area.png
diff --git a/doc/MANUAL_controlled-display.png b/doc/MANUAL_controlled-display.png
diff --git a/doc/MANUAL_controlled-epr-display.png b/doc/MANUAL_controlled-epr-display.png
diff --git a/doc/MANUAL_density-display.png b/doc/MANUAL_density-display.png
diff --git a/doc/MANUAL_measurement-types.png b/doc/MANUAL_measurement-types.png
diff --git a/doc/MANUAL_menu.png b/doc/MANUAL_menu.png
diff --git a/doc/MANUAL_state-channel-duality.png b/doc/MANUAL_state-channel-duality.png
diff --git a/doc/MANUAL_various-displays.png b/doc/MANUAL_various-displays.png
diff --git a/html/menu.partial.html b/html/menu.partial.html
@@ -1,5 +1,5 @@
 <div id="menu-div" style="display:block;">
-    <div id="menu-overlay" style="position:fixed; left: 0; top: 0; height: 100vh; width: 100vw; background: rgba(0, 0, 0, 0.7);">
+    <div id="menu-overlay" style="position:fixed; left: 0; top: 0; height: 100vh; width: 100vw; background: rgba(0, 0, 0, 0.8);">
     </div>
     <div style="position:absolute; top:20px; left:50px; margin:0;">
         <div style="display:inline-block; padding:20px; background-color:white; border:1px solid black; text-align:center;">
@@ -11,23 +11,35 @@
             A drag-and-drop quantum circuit simulator.
 
             <div style="margin:20px;">
-                <div id="loading-div" style="color:#D90; font-size:40px; display:block; height:120px; width:344px;">
+                <div id="loading-div" style="color:#D90; font-size:40px; display:block; height:120px; width:410px;">
                     Loading...
                 </div>
-                <button tabindex="50" id="close-menu-button" style="width:344px; height:120px; font-size:20px; display:none;">Edit Circuit</button>
+                <button tabindex="50" id="close-menu-button" style="width:410px; height:120px; font-size:20px; display:none;">Edit Circuit</button>
             </div>
 
-            <div style="display:inline-block; text-align:center; border:1px solid black; padding:4px; margin-right:64px;">
-                <a tabindex="51" href="https://www.youtube.com/watch?v=aloFwlBUwsQ">
+            <div style="display:inline-block; text-align:center; border:1px solid black; padding:2px;">
+                <a tabindex="51" href="https://github.com/Strilanc/Quirk/wiki/How-to-use-Quirk">
+                    <div style="width:128px;">
+                        <svg version="1.1" viewBox="0 0 20 25" width="48" height="48">
+                          <text x="5" y="9" style="font-size: 8px;">???</text>
+                          <path d="M0 0 h20 v25 h-20 v-25 M3 13 h14 M3 17 h14 M3 21 h14" stroke="black" fill="transparent"></path>
+                        </svg>
+                        <div>How to Use</div>
+                    </div>
+                </a>
+            </div>
+
+            <div style="display:inline-block; text-align:center; border:1px solid black; padding:2px;">
+                <a tabindex="52" href="https://www.youtube.com/watch?v=aloFwlBUwsQ">
                     <div style="width:128px;">
                         <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAACt0lEQVQoz+3SP09TYRQG8IOL4RsgSNvbv4C4uMAkLgbippEw6CKwqIuGwW/gZEI6kIiDo0MnEk1MmEBLRQFbCnJLa6WlFK6K2kKrBarH55p7TUWa1vgm8pqe5Jc0vbfneZ+8JWYmmUl9+FqBWoFagf+hwP5Jn/TUQw/cgmG4Dz54DH4IQQwSkIaMgf+Q+bu0sStm7PYbWT4je9g4i36meio3a+2eOrgBGeBDKmOcse63Aql29yiwJO79cvjVE+4+YMn0/SyQbHNPA0tm+sfhV9rcdmBJOehNq2sQWFKDFG91eYEl5aXXLS4fsKR8FPM4A8BCtLq3hO2qToCiHqcKLMJOKrW3NnTzZbTFlRO1swKVlt1ODViEr9ks65NPpQor/VeCyx5XQdTuMjSKuBw5YBHMAvoU9/Z4MxzejvdeDOJZUVTGPjlS8UGUYkkBc/JbW7weCGRi53rm8c43kXk6euV0sCgHFTBv46OmcXp8/F3kTNeCyExadDhYlHIFSm/jbTLJqbGx9aWOjoiITFpw2FmUSgXM2/iwscFaIsHRgf7I32ZS2G5nUaopoM+237+61Nm5JCKT5hU7i1LxLxQKaerprrDITAopCotSrsAXVX0f6e4OiswyUdCmsCj7C+wkk9no+QtzeFYUmVOK5qxKDlgEs8CupuWjly7P4LtdUbvLyNGsVdGARSisJArxq9dmZ232gqidFWg0Y7GpwEJYlbywXdVR6UWzbQpYUlP0vNnmA5aUj6aPW73AkvLSsybrALCkBijQZFWAJaWQPlONlgCwZAJkztNGSy+wZHqpdJ4cs4wAS2KEDprJBssgJIEPqU24DnVUbiYamo/AKeiH23AXHsAjmISQIQ4J0CBjyAJX4bPx/idjh27R2DsBD43MUbgDQ3AWjv52YGaWWq1ArUCtQK3Av/UdR/1BF+14cggAAAAASUVORK5CYII=">
                         <div>Tutorial Video</div>
                     </div>
                 </a>
             </div>
 
-            <div style="display:inline-block; text-align:center; border:1px solid black; padding:4px;">
-                <a tabindex="52" href="https://github.com/Strilanc/Quirk">
+            <div style="display:inline-block; text-align:center; border:1px solid black; padding:2px;">
+                <a tabindex="53" href="https://github.com/Strilanc/Quirk">
                     <div style="width:128px;">
                         <svg version="1.1" viewBox="0 0 16 16" width="48" height="48">
                             <path fill-rule="evenodd"
@@ -39,7 +51,7 @@
                 </a>
             </div>
         </div>
-        <div style="display:inline-block; vertical-align:top; line-height:1.8; padding:15px 15px 15px 5px; background-color:#DDD; border:1px solid gray; margin:0 0 0 -5px;">
+        <div style="display:inline-block; vertical-align:top; line-height:1.8; padding:13px 15px 13px 5px; background-color:#DDD; border:1px solid gray; margin:0 0 0 -5px;">
             Example Circuits<br>
             <a id="example-anchor-grover">Grover Search</a><br>
             <a id="example-anchor-shor">Shor Period Finding</a><br>