From e8f8ff5f8df746e1ce9b9d21a9b20d49b3b05f87 Mon Sep 17 00:00:00 2001
From: fred <support@qo-op.com>
Date: Mon, 18 Dec 2023 19:07:21 +0100
Subject: [PATCH] LOGIN & SCAN

---
 earth/index.html       |   3 +-
 earth/login/index.html |   6 +-
 earth/scan/index.html  | 122 ++++++++++++++++++++++++++++-------------
 3 files changed, 86 insertions(+), 45 deletions(-)
diff --git a/earth/index.html b/earth/index.html
index aa107a3..2717252 100644
--- a/earth/index.html
+++ b/earth/index.html
@@ -23,7 +23,7 @@
     <script type="text/javascript">
     examples['simple_mars'] = function() {
     $('#sphere').earth3d({
-        texture: 'maps/mars1024x1024.jpg', // texture used by G1Wish planet
+        texture: 'maps/sector0_miz.jpg', // texture used on sphere
         dragElement: $('#locations') // where do we catch the mouse drag
     });
     };
@@ -118,6 +118,7 @@
   <body>
     <h1>♥ U Planet ♥</h1>
         <a href="scan/">SCAN</a>
+<br><a href="login/">LOGIN</a>
 
     <div id="container">
         <br><br>
diff --git a/earth/login/index.html b/earth/login/index.html
index cdbcee0..58feb58 100644
--- a/earth/login/index.html
+++ b/earth/login/index.html
@@ -149,17 +149,13 @@ a {
                     <p><input type="hidden" id="g1pub" value="2L8vaYixCf97DMT8SistvQFeBj7vb6RQL7tvwyiv1XVH"/></p>
                     <div id="appname">
                         <label>
-                            <input type="radio" id="q1" name="appname" value="login">
+                            <input type="radio" id="q1" name="appname" value="login" checked="checked">
                             <b>LOGIN</b>
                         </label>
                         <label>
                             <input type="radio" id="q2" name="appname" value="logout">
                             <b>LOGOUT</b>
                         </label>
-                        <label>
-                            <input type="radio" id="q2" name="appname" value="flipper" checked="checked">
-                            <b>FLIPPER</b>
-                        </label>
                     </div>
                     <strong><div id="resu"></div></strong>
                     <p> <h2>Scan AstroID</h2> </p>
diff --git a/earth/scan/index.html b/earth/scan/index.html
index ce71dca..40011b8 100644
--- a/earth/scan/index.html
+++ b/earth/scan/index.html
@@ -15,21 +15,27 @@ body { background-color: #fafafa; line-height:1.6;}
   -webkit-background-clip: text;
   -webkit-text-fill-color:transparent; }
 .container { margin: 10px auto; max-width: 960px; }
-.reset{ position: absolute; padding: 1.1rem; border:0; border-radius:35px; background-color:#4F46E5; color:#fff;cursor:pointer; text-decoration:none;}
+.reset{ top:50px; left:50px; position: absolute; padding: 1.1rem; border:0; border-radius:35px; background-color:#4F46E5; color:#fff;cursor:pointer; text-decoration:none;}
 .reset:hover{color: #fff}#carbonads{display:block;overflow:hidden;max-width:728px;position:relative;font-size:18px;box-sizing:content-box}
         #terminal {
             background-color: #746;
-            padding: 5px;
-            border-radius: 199px;
+            padding: 10px;
+            border-radius: 10px;
             box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+            width: fit-content;
         }
+        .flex-container {
+            display: flex;
+            justify-content: space-between; /* Adjust as needed */
+            align-items: center;
+       }
         #video-container {
             width: 100%;
             max-width: 180px;
             max-height: 180px;
-            margin: 0 auto 20px;
+            margin: auto 20px;
             border: 2px solid #ccc;
-            border-radius: 5px;
+            border-radius: 15px;
             overflow: hidden;
         }
         #preview {
@@ -45,7 +51,7 @@ body { background-color: #fafafa; line-height:1.6;}
             border: 1px solid #ccc;
             border-radius: 5px;
         }
-        #zenpub {
+        #astroid {
             margin-top: 20px;
             font-size: 18px;
         }
@@ -53,7 +59,7 @@ body { background-color: #fafafa; line-height:1.6;}
             margin-top: 20px;
             font-size: 8px;
         }
-        #zencard {
+        #zenpub {
             margin-top: 20px;
             font-size: 18px;
         }
@@ -62,50 +68,84 @@ body { background-color: #fafafa; line-height:1.6;}
             font-size: 18px;
         }
 </style>
-    <link rel="stylesheet" href="/ipfs/QmQdTMLX6xUXHYP9RHbkGf7v2jvn8JjwDSHnyKJqaVreQy/pinMeBB.css">
-    <script src="/ipfs/QmQdTMLX6xUXHYP9RHbkGf7v2jvn8JjwDSHnyKJqaVreQy/pinMeBB.js"></script>
+    <link rel="stylesheet" href="pinMeBB.css">
+    <script src="pinMeBB.js"></script>
     <script>
+        var pinPadVisible = true;
+        var ASTROID = "";
+        var CODE = "";
+        var MONTANT = "";
+        var ASTROID = "";
+
         $(document).ready(function () {
-        var pinform = pinMeBB("pinpad", { limit: 5, minChar: 4 });
-        pinform.addEventListener("onEnter", (e) => {
-            //    when pres enter
-            var pin = e.detail.password();
-            alert("Enter Pressed! \n Pin : "+pin);
-        });
-        pinform.addEventListener("onMaxChar", (e) => {
-            //when max length reached
-            var pin = e.detail.password();
-            alert("MAXED Char Reached! \n Pin : "+pin);
-        });
-        pinform.addEventListener("onEmpty", (e) => {
-            //when some pin still missing (default min Char is the same as limit)
-            alert("Pin Cant be Empty!");
-        });
+            createPinPad(0);
         });
+
+        function createPinPad(sec=0) {
+            const pinform = pinMeBB("pinpad", { limit: 4, minChar: 4, show: sec });
+            pinform.addEventListener("onEnter", (e) => {
+                // When Enter is pressed
+                var pin = e.detail.password();
+                CODE = pin;
+                alert("Enter Pressed!\nCODE: " + pin);
+            });
+            pinform.addEventListener("onMaxChar", (e) => {
+                // When max length is reached
+                var pin = e.detail.password();
+                alert("MAXED Char Reached!\nCODE: " + pin);
+            });
+            pinform.addEventListener("onEmpty", (e) => {
+                // When some pin is still missing
+                alert("CODE Can't be Empty!");
+            });
+        }
+
+        function togglePinPad() {
+            if (pinPadVisible) {
+                // If pin pad is visible, remove it
+                removePinPad();
+            } else {
+                // If pin pad is not visible, create it
+                createPinPad(1);
+            }
+            // Toggle the visibility status
+            pinPadVisible = !pinPadVisible;
+        }
+
+        function removePinPad() {
+            // Remove the existing pin pad
+            $("#pinpad").empty();
+        }
+
+        function RESET() {
+            // RESET ALL
+            console.log('RESET');
+            removePinPad();
+        }
     </script>
 </head>
     <body>
     <div class="container">
+    <button onclick="togglePinPad()">PAD</button>
 
-        <div id="terminal">
-            <p>
-                <a class="reset" href="#">RESET</a>
-            </p>
+        <div id="terminal" class="flex-container">
             <div id="video-container">
                 <video id="preview" style="transform: scaleX(-1);width: 180px;height: 180px;" autoplay="autoplay" class="active"></video>
-                <div id="message">Scan AstroID / ZenCard</div>
             </div>
+            <div id="pinpad">Scan ZenCard AstroID to activate Terminal</div>
         </div>
+        <p>
+            <a class="reset" onclick="RESET()">RESET</a>
+        </p>
 
-        <div id="pinpad"></div>
 
         <p class="lead">
-            Enter PIN code, after scanning your ZenCard AstroID to verify identity.
+           Scan ZenCard AstroID to activate Terminal.
         </p>
         <div id="password">PASS</div>
         <div id="received">CONTENT</div>
-        <div id="zenpub">ZENPUB</div>
-        <div id="zencard">ZENCARD</div>
+        <div id="astroid">ASTROID</div>
+        <div id="zenpub">ZENCARD</div>
 
     </div>
 <script>
@@ -118,25 +158,29 @@ body { background-color: #fafafa; line-height:1.6;}
             document.getElementById("received").innerText = content;
 
             if (content.startsWith('~~~~~')) {
-                // STORE ZENCARD
+                // STORE ASTROID
                 document.getElementById('received').innerText = "";
-                document.getElementById("zencard").innerText = content;
+                document.getElementById("astroid").innerText = content;
+                ASTROID = content;
 
-                var zenpub = document.getElementById("zenpub").innerText;
-
-                // Overlay BIG text: "PLEASE ENTER PASS" for 2 seconds
+                // "PLEASE ENTER PASS" for 2 seconds
                 document.getElementById('password').innerText = "PLEASE ENTER PASS";
                 setTimeout(() => {
                     document.getElementById('password').innerText = "";
                 }, 2000);
 
-                document.getElementById('keypad').style.visibility = 'visible'
+                document.getElementById('pinpad').style.visibility = 'visible'
             }
 
             if (content.endsWith(':ZEN')) {
 
                 document.getElementById('received').innerText = "";
                 document.getElementById("zenpub").innerText = content;
+                ZENPUB = content;
+
+            } else {
+
+                alert("??? : " + content);
 
             }
 
