update demo

Adrianotiger · Dec 7, 2023 · 60c1367 · 60c1367
1 parent 6b083d7
commit 60c1367
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 11 deletions.
diff --git a/demos/example3.html b/demos/example3.html
@@ -16,6 +16,10 @@ <h2>{{ page.title }}</h2>
 
   <form id="form">
       <table>
+          <tr>
+              <td>Select app version:</td>
+              <td><select id="appver"><option value="2">2.x</option><option value="3" selected>3.x</option></select></td>
+          </tr>
           <tr>
               <td>Webpage:</td>
               <td><input type="url" name="webpage" value="https://adrianotiger.github.io/qr2web/scan.html" style="min-width:60vw" /></td>
@@ -34,16 +38,24 @@ <h2>{{ page.title }}</h2>
           </tr>
       </table>
   </form>
-  <div id="link" style="width: 90vw;overflow-wrap: break-word;white-space: normal;margin: 0 auto;"></div>
+  <div id="link" style="width: 80vmin;overflow-wrap: break-word;white-space: normal;margin: 0 auto;"></div>
   <br><hr>
   Or pack it in a QR code:<br>
-  <img style="width:80vw;max-width:400px;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADIBAMAAABfdrOtAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAGUExURf///wAAAFXC034AAAAJcEhZcwAADsMAAA7DAcdvqGQAAAKHSURBVHja7ZZrbgMxCITNDez7X7ZqapkZYNOnVLYdfqwSFvgsZTJmKBSKRmErxMTsLnpkd8JOWXqEEKQ5BHWwISN207jXLi8jZj1XkKYQFxPqZJ73LhYUYfHwQYLcGrJJZ/RCdWFiCPInIHQ9cNmEvvEtdQny6xAPnz8ojBsN7g7C1XMF+SyE4xuQEO9BwgMh+1GVCfIzkCoSzntQQqvw+4+HIL8LIavH8kIloSxUwMslSHvIOIrBG3yw3yf+jM3hc5abIM0gxrKyt9HGsklnQR3ZEZuPvFwkBGkESaQgt9SDJ3D+ac8hSF/IIc3jKAYSIvQ5ATVgXKhLkD6QEW8LQ3vAbJrpaFTlhcQEaQYh8y8E8nhgt6O9DBM4QZCvQ6rfmS/69MPP4kbw0YK0hxAJy3ci+cCAP/iK98SqXF6QppD0DmWzjq3wPjDRbLhsVH4vSD8IOopFdS2WDdoKCguz49JWBGkGCaQ0OHSflwOliQoV5B6QSjbsLcFAwkxOWH2pCNIK4huA3wBJTGggWzZhs1i1YgXpDEm4xWtCsWpYVNrVWQT5AmRw8aR/f7Z6PFzYAZMFCHIHyFXH45F2OT8G9rFCBWkNMX43I3WA32NQy+kLdiRIfwj2euKpnxzMGvw1nUqQppARFRXQIcHXTq0uQe4Awa2A5LQ7/PNpoPukEJYJ0htSBXZviBXjQu05wSjtSJBeENr5oBxeFZvFhIpwFkcL8oOQXeJ/2pBNwA/88PhVkC4Q1FG+oZNznyv9SQhyV8hOoJiollVp3HK5SAjSG4JWEVS0DzFxNOJWcQhBmkKwJCwSE7KGJJ45o/uYIO0hpXqCgGbcJmato0t1CdIMolAo/kWM8QISGUEBCW0fmwAAAABJRU5ErkJggg==" />
+  <img style="width:75vmin;max-width:400px;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADIBAMAAABfdrOtAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAGUExURf///wAAAFXC034AAAAJcEhZcwAADsMAAA7DAcdvqGQAAAKHSURBVHja7ZZrbgMxCITNDez7X7ZqapkZYNOnVLYdfqwSFvgsZTJmKBSKRmErxMTsLnpkd8JOWXqEEKQ5BHWwISN207jXLi8jZj1XkKYQFxPqZJ73LhYUYfHwQYLcGrJJZ/RCdWFiCPInIHQ9cNmEvvEtdQny6xAPnz8ojBsN7g7C1XMF+SyE4xuQEO9BwgMh+1GVCfIzkCoSzntQQqvw+4+HIL8LIavH8kIloSxUwMslSHvIOIrBG3yw3yf+jM3hc5abIM0gxrKyt9HGsklnQR3ZEZuPvFwkBGkESaQgt9SDJ3D+ac8hSF/IIc3jKAYSIvQ5ATVgXKhLkD6QEW8LQ3vAbJrpaFTlhcQEaQYh8y8E8nhgt6O9DBM4QZCvQ6rfmS/69MPP4kbw0YK0hxAJy3ci+cCAP/iK98SqXF6QppD0DmWzjq3wPjDRbLhsVH4vSD8IOopFdS2WDdoKCguz49JWBGkGCaQ0OHSflwOliQoV5B6QSjbsLcFAwkxOWH2pCNIK4huA3wBJTGggWzZhs1i1YgXpDEm4xWtCsWpYVNrVWQT5AmRw8aR/f7Z6PFzYAZMFCHIHyFXH45F2OT8G9rFCBWkNMX43I3WA32NQy+kLdiRIfwj2euKpnxzMGvw1nUqQppARFRXQIcHXTq0uQe4Awa2A5LQ7/PNpoPukEJYJ0htSBXZviBXjQu05wSjtSJBeENr5oBxeFZvFhIpwFkcL8oOQXeJ/2pBNwA/88PhVkC4Q1FG+oZNznyv9SQhyV8hOoJiollVp3HK5SAjSG4JWEVS0DzFxNOJWcQhBmkKwJCwSE7KGJJ45o/uYIO0hpXqCgGbcJmato0t1CdIMolAo/kWM8QISGUEBCW0fmwAAAABJRU5ErkJggg==" />
   <script>
       function createLink()
       {
           var inps = document.getElementById("form");
-          var link = "qr2web:/parameters/webpage=" + inps["webpage"].value + "&portrait=" + inps["portrait"].value + "&language=" + inps["language"].value;
+          var link = (document.getElementById("appver").value==2 ? createForVer2(inps) : createForVer3(inps)); 
           document.getElementById("link").innerHTML = "<hr><a href='" + link + "'>" + link + "</a>";
       }
+      function createForVer2()
+      {
+        return "qr2web:/parameters/webpage=" + inps["webpage"].value + "&portrait=" + inps["portrait"].value + "&language=" + inps["language"].value;
+      }
+      function createForVer3()
+      {
+        return "qr2web:/parameters/homepage=" + encodeURIComponent(["webpage"].value) + "&forceportrait=" + inps["portrait"].value + "&language=" + inps["language"].value;
+      }
   </script>
 </div>
diff --git a/github.css b/github.css
@@ -1,20 +1,25 @@
+html
+{
+  width: 100vw;
+  height: 100vh;
+}
 body
 {
-  background: linear-gradient(135deg, #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%);
+  background: linear-gradient(135deg, #959595 0%,#4682B4 16%,#264264 60%,#2662A4 85%,#4682B4 95%,#B0C4DE 100%);
   color: #ffff88;
   margin:0px;
-  width:100vw;
-  height:100vh;
+  width:100%;
+  height:100%;
   overflow:hidden;
   text-align:center;
 }
 footer
 {
   position:absolute;
-  height:4vh;
+  height:4vmax;
   width:100vw;
   bottom:0px;
-  font-size:3vh;
+  font-size:3vmin;
 }  
 div.blurb
 {
@@ -40,7 +45,7 @@ div.blurb
     height:100%;
     margin:0 auto;
     text-align:center;
-    font-size:4vh;
+    font-size:4vmin;
   }
 }
 @media all and (orientation:portrait)
@@ -51,25 +56,30 @@ div.blurb
     height:100%;
     margin:0 auto;
     text-align:center;
-    font-size:4vw;
+    font-size:4vmin;
   }
 }
 td.nav
 {
   height:10vh;
   line-height:6vh;
-  font-size:2.5vh;
+  font-size:2.5vmin;
   vertical-align:top;
 }
 img.nav
 {
   height:4vh;
   vertical-align:middle;
+  filter: drop-shadow(1px 1px 3px #264264);
 }
 a
 {
   color:white;
 }
+.nav.a
+{
+  text-shadow: 1px 1px 2px #000;
+}
 h2
 {
   margin:0 auto;