Merge pull request #3 from TiagoDGomes/v2.1

V2.1
TiagoDGomes · Oct 8, 2024 · ff3c451 · ff3c451
2 parents 5a8c795 + f89f73b
commit ff3c451
Show file tree

Hide file tree

Showing 9 changed files with 1,586 additions and 78 deletions.
diff --git a/classes/AccessCheck.php b/classes/AccessCheck.php
@@ -1,6 +1,9 @@
 <?php
 
 class AccessCheck {
+    public static function hasQRCode(){
+        return @$_GET['qrcode'] == '1';
+    }
     public static function isSystemMessageActive(){
         return FALSE;
     }

diff --git a/core/init.php b/core/init.php
@@ -25,4 +25,4 @@
     require_once 'core/info.php';
 }
 
-$body_admin_class = AccessCheck::isValidAdminPage() ? 'admin' : 'user';
+$flag_access = AccessCheck::isValidAdminPage() ? 'admin' : 'user';
diff --git a/index.php b/index.php
@@ -3,29 +3,30 @@
 <html>
 <head>
     <meta charset="UTF-8">
+
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title><?= @$APP_TITLE ?></title>
     <link rel="stylesheet" href="media/default.css?v=<?= @$APP_VERSION ?>">
     <link rel="stylesheet" href="media/button.css?v=<?= @$APP_VERSION ?>"> 
     <script>
         var GLOBAL_ID = '<?= $_GET['i'] ?>';
-        var SYNC_PING_COUNT = <?= $SYNC_PING_COUNT * 1 ?>;
+        var SYNC_PING_COUNT = <?= $SYNC_PING_COUNT * 1 ?>;    
+        var CURRENT_URL = window.location.href;
+    </script>
     </script>
     <script src="scripts/default.js?v=<?= @$APP_VERSION ?>"></script>
     <script src="scripts/classes.js?v=<?= @$APP_VERSION ?>"></script>
-    <?php if (AccessCheck::isValidAdminPage()): ?>
-
-    <link rel="stylesheet" href="media/admin.css?v=<?= @$APP_VERSION ?>"> 
-
-    <?php else: ?>
-
-    <link rel="stylesheet" href="media/user.css?v=<?= @$APP_VERSION ?>"> 
+    <link rel="stylesheet" href="media/<?= $flag_access ?>.css?v=<?= @$APP_VERSION ?>">  
+    <meta name="theme-color" content="var(--timer-default-color)">
 
-    <?php endif; ?>     
+    <?php if (AccessCheck::hasQRCode()): ?>
+    <script src="scripts/qrcode.js?v=<?= @$APP_VERSION ?>"></script>
+    <?php endif; ?>
 </head>
-<body class="<?= $body_admin_class ?>">
+<body class="<?= $flag_access ?>">
     <div id="main">        
         <div id="visible" style="display:none">
+
             <div class="container-timer">
                 <div id="timer"></div>
             </div>
@@ -44,70 +45,60 @@
             <!--<admin>--> 
                 <div class="container-admin">
                     <p>
-                    <!--<button onclick="Timer.syncTicTac()" class="red" role="button">
-                        <span class="shadow"></span>
-                        <span class="edge"></span>
-                        <span class="front text">Sync</span>
-                    </button>
-                    <button onclick="Timer.prepareTime(11)" class="blue">
-                        <span class="shadow"></span>
-                        <span class="edge"></span>
-                        <span class="front text">0:11</span>                        
-                    </button>-->
                     <div class="timer-buttons command-buttons">
                         <button onclick="Timer.start()" class="big green start">
                             <span class="shadow"></span>
                             <span class="edge"></span>
                             <span class="front text">▶️</span>   
                         </button>
-                        <button onclick="index_prepareTime(Timer.getRemainingSeconds())" class="big pause">
+                        <button onclick="Timer.prepareTime(Timer.getRemainingSeconds())" class="big pause">
                             <span class="shadow"></span>
                             <span class="edge"></span>
                             <span class="front text">⏸️</span>      
                         </button>
                     </div>
                     <div class="timer-buttons prepare-buttons">
-                        <button onclick="index_prepareTime(30)" class="big">
+                        <button onclick="Timer.prepareTime(30)" class="big">
                             <span class="shadow"></span>
                             <span class="edge"></span>
                             <span class="front text">0:30</span>    
                         </button>
-                        <button onclick="index_prepareTime(60)" class="big">
+                        <button onclick="Timer.prepareTime(60)" class="big">
                             <span class="shadow"></span>
                             <span class="edge"></span>
                             <span class="front text">1:00</span>
                         </button>
-                        <button onclick="index_prepareTime(90)" class="big">
+                        <button onclick="Timer.prepareTime(90)" class="big">
                             <span class="shadow"></span>
                             <span class="edge"></span>
                             <span class="front text">1:30</span>                        
                         </button>
-                        <button onclick="index_prepareTime(120)" class="big">
+                        <button onclick="Timer.prepareTime(120)" class="big">
                             <span class="shadow"></span>
                             <span class="edge"></span>
                             <span class="front text">2:00</span>                        
                         </button>
-                        <button onclick="index_prepareTime(180)" class="big">
+                        <button onclick="Timer.prepareTime(180)" class="big">
                             <span class="shadow"></span>
                             <span class="edge"></span>
                             <span class="front text">3:00</span>                        
                         </button>
-                        <button onclick="index_prepareTime(240)" class="big">
+                        <button onclick="Timer.prepareTime(240)" class="big">
                             <span class="shadow"></span>
                             <span class="edge"></span>
                             <span class="front text">4:00</span>                        
                         </button>
-                        <button onclick="index_prepareTime(300)" class="big">
+                        <button onclick="Timer.prepareTime(300)" class="big">
                             <span class="shadow"></span>
                             <span class="edge"></span>
                             <span class="front text">5:00</span>                        
                         </button>
-                        <button onclick="index_prepareTime(600)" class="big">
+                        <button onclick="Timer.prepareTime(600)" class="big">
                             <span class="shadow"></span>
                             <span class="edge"></span>
                             <span class="front text">10:00</span>                        
                         </button>
-                        <button onclick="index_prepareTime(900)" class="big">
+                        <button onclick="Timer.prepareTime(900)" class="big">
                             <span class="shadow"></span>
                             <span class="edge"></span>
                             <span class="front text">15:00</span>                        
@@ -121,26 +112,50 @@
                         </button>
                     </div>
                 </div>  
-                <script>
-                    function index_prepareTime(t){
-                        m = Math.floor(t / 60);
-                        s = t % 60; ss = s > 9 ? s : "0" + s;
-                        Timer.prepareTime(t);
-                        document.querySelectorAll("button.start .text")[0].innerHTML = m + ":" + ss;
-                    }
-                </script>
+
+
             <!--</admin>-->
 
             <?php endif; ?>         
-        </div>  
+        </div> 
+        <div id="qrcode"></div>   
         <div class="container-status">
             <div id="status"></div>
             <div id="status-basic"></div>
             <div id="status-error"><noscript>O Javascript está desativado.</noscript></div>
         </div>
         <div class="container-debug">
-            <pre id="debug"></pre>
-        </div>       
-    </div>    
+            <pre id="debug"><?php // var_dump($_SERVER); ?></pre>
+        </div>
+
+    </div>   
+    <?php if (AccessCheck::hasQRCode()): ?>
+
+    <script type="text/javascript">
+
+        var qrcode = new QRCode(document.getElementById("qrcode"), {
+            text: CURRENT_URL,
+            width: 128,
+            height: 128,
+            colorDark : "#000000",
+            colorLight : "#ffffff",
+            correctLevel : QRCode.CorrectLevel.H
+        });
+        document.getElementById("qrcode").title="";
+
+        <?php if (AccessCheck::isValidAdminPage()): ?>
+
+            document.getElementById("qrcode").addEventListener('mouseover', function(event){
+                this.style.filter = 'blur(0)';
+            });
+            document.getElementById("qrcode").addEventListener('mouseout', function(event){
+                this.style.filter = 'blur(4px)';
+            }); 
+        <?php endif; // (AccessCheck::isValidAdminPage()): ?>
+
+    </script>
+
+    <?php endif; // (AccessCheck::hasQRCode())?> 
+
 </body>
 </html>
diff --git a/media/admin.css b/media/admin.css
@@ -12,4 +12,8 @@ body.admin.timer-sync .timer-buttons,
 body.admin.timer-zero button.pause,
 body.admin.timer-ready button.pause {
     visibility: hidden;
+}
+
+body.admin #qrcode {
+    filter: blur(4px);
 }
diff --git a/media/default.css b/media/default.css
@@ -107,4 +107,37 @@ body .container-status .hidden {
 body .container-title h1 {
     margin: 0;
     padding: 0 5px 0 15px;
+}
+
+body.admin #qrcode {
+    bottom: 4em;
+}
+
+#qrcode {
+    position: fixed;
+    margin: 2px;
+    right: 2px;
+
+}
+
+body.user #qrcode {
+    bottom: 2px
+}
+
+
+@media (max-width: 300px) and (max-height: 650px) {
+    #qrcode {
+        display: none;
+    }
+}
+
+.container-debug {
+    position: fixed;
+    top: 0.02em;
+    left: .5em;
+}
+
+#debug {
+    color: #ffffff1a;
+    text-shadow: 1px 1px #00000021;
 }
diff --git a/media/user.css b/media/user.css
@@ -1,8 +1,26 @@
 body.user .container-timer {
-    font-size: 68vh;
     margin: 0 auto;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
+
+}
+
+@media (max-width: 400px) {
+    body.user #qrcode {
+        display: none;
+    }
+}
+
+@media (orientation: landscape) {
+    body.user .container-timer {
+        font-size: 60vh;
+    }
+}
+
+@media (orientation: portrait) {
+    body.user .container-timer {
+        font-size: 68pt;
+    }
 }