Fixed UI for captcha page
authorRemixDev <deezloaderremix@gmail.com>
Wed, 10 Apr 2019 19:44:42 +0000 (21:44 +0200)
committerRemixDev <deezloaderremix@gmail.com>
Wed, 10 Apr 2019 19:44:42 +0000 (21:44 +0200)
app/public/html/captcha.html
app/public/js/frontend.js

index bd28d9c50206f42e8e55c459d3fc3a2bfb43b17c..2258e3fc29c2228997b4391353f6d5b5c1fe44f6 100644 (file)
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <title>captcha</title>
+  <meta charset="UTF-8">
+  <title>captcha</title>
+  <style>
+html{
+  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
+}
+.resize-padding{
+       -webkit-app-region: no-drag !important;
+       margin:0px;
+}
+
+.btn-input{
+       height: 43px;
+       line-height: 43px;
+       font-size: 15px;
+       padding: 0 28px;
+       margin: 0px;
+}
+
+#title-bar {
+       -webkit-user-select: none;
+       -webkit-app-region: drag;
+       overflow: hidden !important;
+       position: fixed;
+       width: 100%;
+       left: 0;
+       top: 0;
+       right: 0;
+       z-index: 99;
+       height: 32px;
+       line-height: 32px;
+       padding: 0;
+       margin: 0;
+       -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  color: white;
+}
+
+#title-bar #title {
+       position: absolute;
+       top: 0px;
+       left: 6px;
+       color: #fff;
+}
+
+#title-bar #title-bar-btns {
+       -webkit-user-select: none;
+       -webkit-app-region: no-drag;
+       position: absolute;
+       top: 0px;
+       right: 6px;
+}
+
+#title-bar #title-bar-btns button {
+       line-height: 0px;
+       height: 32px;
+       background-color: transparent;
+       border: none;
+       color: #F1F1F1;
+       font-size: 14px;
+       padding: 0 3px;
+       -webkit-transition: 0.2s;
+       -o-transition: 0.2s;
+       transition: 0.2s;
+}
+
+#title-bar #title-bar-btns button:hover {
+       background: rgba(255, 255, 255, 0.1);
+}
+
+#title-bar #title-bar-btns {
+       right: 0px !important;
+}
+#title-bar #title-bar-btns span{
+  font-size: 20px;
+  padding: 0 10px;
+}
+#container{
+  margin-top: 32px;
+  padding-top: 16px
+}
+  </style>
 </head>
 <body>
+  <div id="title-bar" class="deezloader-black">
+       <div class="resize-padding" style="width: 100%; height: 3px;"></div>
+       <div class="resize-padding" style="width: 3px; height: 31px;"></div>
+       <div id="title">Complete the captcha</div>
+
+       <div id="title-bar-btns">
+               <button id="close-btn"><span>&#x2715;</span></button>
+       </div>
+
+       <div class="resize-padding" style="position: absolute; top:0; right:0px; width: 3px; height: 31px;"></div>
+  </div>
+  <div id="container">
     <form id="modal_captcha_form" action="/submit" method="get">
-        <div class="g-recaptcha" data-sitekey="6Lf4g34UAAAAAF2O2sScZKutelN7GM1FYVBmMom4" data-callback="onCaptchaSolved"></div>
-        <script type="text/javascript" src="https://www.google.com/recaptcha/api.js"></script>
+      <div class="g-recaptcha" data-sitekey="6Lf4g34UAAAAAF2O2sScZKutelN7GM1FYVBmMom4" data-callback="onCaptchaSolved"></div>
+      <script type="text/javascript" src="https://www.google.com/recaptcha/api.js"></script>
     </form>
-    <!-- the following src ends in cap://deezer.com/js/jquery-3.3.1.min.js -->
-    <!--<script type="text/javascript" src="./../js/jquery-3.3.1.min.js"></script>-->
-    <!-- therefore we use the http protocol, possible fix: https://github.com/electron/electron/issues/4506#issuecomment-299645031 -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
-    <script>
-        function onCaptchaSolved() {
-            $.get("/submit", $("#modal_captcha_form").serialize());
-            window.close()
-        }
-    </script>
+  </div>
+  <!-- the following src ends in cap://deezer.com/js/jquery-3.3.1.min.js -->
+  <!--<script type="text/javascript" src="./../js/jquery-3.3.1.min.js"></script>-->
+  <!-- therefore we use the http protocol, possible fix: https://github.com/electron/electron/issues/4506#issuecomment-299645031 -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
+  <script>
+    function onCaptchaSolved() {
+      $.get("/submit", $("#modal_captcha_form").serialize());
+      window.close()
+    }
+    $("#close-btn").click(()=>{
+      window.close()
+    })
+  </script>
 </body>
 </html>
index 8a01a5c406894c93f9ec1609b397388d7b4ace3a..7759448668321cd1ff47076617041f598883737d 100644 (file)
@@ -102,7 +102,7 @@ socket.on("login", function (data) {
                setTimeout(function(){$('#login-res-text').text("")},3000)
        }
        $('#modal_login_btn_login').attr("disabled", false)
-       $('#modal_login_btn_login').html("Login")
+       $('#modal_login_btn_login').html("Log in")
 })
 
 // Open downloads folder