luci-app-vssr: sync with upstream source

2020-03-11 21:35:26 +08:00 · 2020-03-11 21:35:26 +08:00 · 0f55b30e7c
commit 0f55b30e7c
parent c317bca259
5 changed files with 249 additions and 256 deletions
--- a/package/ctcgfw/luci-app-vssr/luasrc/model/cbi/vssr/advanced.lua
+++ b/package/ctcgfw/luci-app-vssr/luasrc/model/cbi/vssr/advanced.lua
@ -78,6 +78,7 @@ o.rmempty = false

 o = s:option(Value, "adblock_url", translate("adblock_url"))
 o.default = "https://gitee.com/privacy-protection-tools/anti-ad/raw/master/anti-ad-for-dnsmasq.conf"
+o.description = translate("Support AdGuardHome and DNSMASQ format list")

 -- [[ chnroute ]]
 s = m:section(TypedSection, "global", translate("Chnroute Setting"))
--- a/package/ctcgfw/luci-app-vssr/luasrc/view/vssr/status.htm
+++ b/package/ctcgfw/luci-app-vssr/luasrc/view/vssr/status.htm
@ -16,7 +16,7 @@ math.randomseed(os.time())
        <div class="pure-u-1-6">
            <div class="block pure-g">
                <div class="pure-u-3-5">
-                    <h4 id="vssr_status"><%:Client%><br /><span class="red"><%:Not Running%></span></h4>
+                    <h4 id="vssr_status"><%:Client%><br /><span class="red"><%:Not Running%>✘</span></h4>
                </div>
                <div class="pure-u-2-5">
                    <div class="img-con">
@ -29,7 +29,7 @@ math.randomseed(os.time())
      <div class="pure-u-1-6">
            <div class="block pure-g">
                <div class="pure-u-3-5">
-                    <h4 id="google_status"><%:foreign websites%><br /><span class="red"><%:Problem detected%></span></h4>
+                    <h4 id="google_status"><%:foreign websites%><br /><span class="red"><%:Problem detected%>✘</span></h4>
                </div>
                <div class="pure-u-2-5">
                    <div class="img-con">
@ -42,7 +42,7 @@ math.randomseed(os.time())
      <div class="pure-u-1-6">
            <div class="block pure-g">
                <div class="pure-u-3-5">
-                    <h4 id="baidu_status"><%:domestic website%><br /><span class="red"><%:Problem detected%></span></h4>
+                    <h4 id="baidu_status"><%:domestic website%><br /><span class="red"><%:Problem detected%>✘</span></h4>
                </div>
                <div class="pure-u-2-5">
                    <div class="img-con">
@ -56,7 +56,7 @@ math.randomseed(os.time())
        <div class="pure-u-1-6">
            <div class="block pure-g">
                <div class="pure-u-3-5">
-                    <h4 id="game_status"><%:Game Mode%><br /><span class="red"><%:Not Running%></span></h4>
+                    <h4 id="game_status"><%:Game Mode%><br /><span class="red"><%:Not Running%>✘</span></h4>
                </div>
                <div class="pure-u-2-5">
                    <div class="img-con">
@ -68,7 +68,7 @@ math.randomseed(os.time())
        <div class="pure-u-1-6">
            <div class="block pure-g">
                <div class="pure-u-3-5">
-                    <h4 id="chinadns_status">𝐂𝐡𝐢𝐧𝐚𝐃𝐍𝐒<br /><span class="red"><%:Not Running%></span></h4>
+                    <h4 id="chinadns_status">𝐂𝐡𝐢𝐧𝐚𝐃𝐍𝐒<br /><span class="red"><%:Not Running%>✘</span></h4>
                </div>
                <div class="pure-u-2-5">
                    <div class="img-con">
@ -80,7 +80,7 @@ math.randomseed(os.time())
        <div class="pure-u-1-6">
            <div class="block pure-g">
                <div class="pure-u-3-5">
-                    <h4 id="socks5_status">𝙎𝙊𝘾𝙆𝙎5<br /><span class="red"><%:Not Running%></span></h4>
+                    <h4 id="socks5_status">𝙎𝙊𝘾𝙆𝙎5<br /><span class="red"><%:Not Running%>✘</span></h4>
                </div>
                <div class="pure-u-2-5">
                    <div class="img-con">
@ -112,34 +112,34 @@ math.randomseed(os.time())
                var tb5 = document.getElementById('socks5_status');
                if (data && tb) {
                    if (data.global) {
-                        tb.innerHTML = '<%:Client%><br><span class="green"><%:Running%></span>';
+                        tb.innerHTML = '<%:Client%><br><span class="green"><%:Running%>✔</span>';
                    } else {
-                        tb.innerHTML = '<%:Client%><br><span class="red"><%:Not Running%></span>';
+                        tb.innerHTML = '<%:Client%><br><span class="red"><%:Not Running%>✘</span>';
                                 }
                    if (data.google) {
-                        tb1.innerHTML = '<%:foreign websites%><br><span class="green"><%:Connect OK%></span>';
+                        tb1.innerHTML = '<%:foreign websites%><br><span class="green"><%:Connect OK%>✔</span>';
                    } else {
-                        tb1.innerHTML = '<%:foreign websites%><br><span class="red"><%:Problem detected%></span>';
+                        tb1.innerHTML = '<%:foreign websites%><br><span class="red"><%:Problem detected%>✘</span>';
                    }
                    if (data.baidu) {
-                        tb2.innerHTML = '<%:domestic website%><br><span class="green"><%:Connect OK%></span>';
+                        tb2.innerHTML = '<%:domestic website%><br><span class="green"><%:Connect OK%>✔</span>';
                    } else {
-                        tb2.innerHTML = '<%:domestic website%><br><span class="red"><%:Problem detected%></span>';
+                        tb2.innerHTML = '<%:domestic website%><br><span class="red"><%:Problem detected%>✘</span>';
                    }
                    if (data.game) {
-                        tb3.innerHTML = '<%:Game Mode%><br><span class="green"><%:Running%></span>';
+                        tb3.innerHTML = '<%:Game Mode%><br><span class="green"><%:Running%>✔</span>';
                    } else {
-                        tb3.innerHTML = '<%:Game Mode%><br><span class="red"><%:Not Running%></span>';
+                        tb3.innerHTML = '<%:Game Mode%><br><span class="red"><%:Not Running%>✘</span>';
                    }
                    if (data.chinadns) {
-                        tb4.innerHTML = '𝐂𝐡𝐢𝐧𝐚𝐃𝐍𝐒<br><span class="green"><%:Running%></span>';
+                        tb4.innerHTML = '𝐂𝐡𝐢𝐧𝐚𝐃𝐍𝐒<br><span class="green"><%:Running%>✔</span>';
                    } else {
-                        tb4.innerHTML = '𝐂𝐡𝐢𝐧𝐚𝐃𝐍𝐒<br><span class="red"><%:Not Running%></span>';
+                        tb4.innerHTML = '𝐂𝐡𝐢𝐧𝐚𝐃𝐍𝐒<br><span class="red"><%:Not Running%>✘</span>';
                    }
                    if (data.socks5) {
-                        tb5.innerHTML = '𝙎𝙊𝘾𝙆𝙎5<br><span class="green"><%:Running%></span>';
+                        tb5.innerHTML = '𝙎𝙊𝘾𝙆𝙎5<br><span class="green"><%:Running%>✔</span>';
                    } else {
-                        tb5.innerHTML = '𝙎𝙊𝘾𝙆𝙎5<br><span class="red"><%:Not Running%></span>';
+                        tb5.innerHTML = '𝙎𝙊𝘾𝙆𝙎5<br><span class="red"><%:Not Running%>✘</span>';
                    }
                }
            }
--- a/package/ctcgfw/luci-app-vssr/luasrc/view/vssr/status3.htm
+++ b/package/ctcgfw/luci-app-vssr/luasrc/view/vssr/status3.htm
@ -3,89 +3,21 @@
 		<%:Running Status%>	
 	</legend>

-  <style>
-	.pure-g{letter-spacing:-.31em;text-rendering:optimizespeed;font-family:FreeSans,Arimo,"Droid Sans",Helvetica,Arial,sans-serif;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){table .pure-g{display:block}}.opera-only :-o-prefocus,.pure-g{word-spacing:-.43em}.pure-u,.pure-u-1,.pure-u-1-1,.pure-u-1-12,.pure-u-1-2,.pure-u-1-24,.pure-u-1-3,.pure-u-1-4,.pure-u-1-5,.pure-u-1-6,.pure-u-1-8,.pure-u-10-24,.pure-u-11-12,.pure-u-11-24,.pure-u-12-24,.pure-u-13-24,.pure-u-14-24,.pure-u-15-24,.pure-u-16-24,.pure-u-17-24,.pure-u-18-24,.pure-u-19-24,.pure-u-2-24,.pure-u-2-3,.pure-u-2-5,.pure-u-20-24,.pure-u-21-24,.pure-u-22-24,.pure-u-23-24,.pure-u-24-24,.pure-u-3-24,.pure-u-3-4,.pure-u-3-5,.pure-u-3-8,.pure-u-4-24,.pure-u-4-5,.pure-u-5-12,.pure-u-5-24,.pure-u-5-5,.pure-u-5-6,.pure-u-5-8,.pure-u-6-24,.pure-u-7-12,.pure-u-7-24,.pure-u-7-8,.pure-u-8-24,.pure-u-9-24{display:inline-block;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto}.pure-g [class*=pure-u]{font-family:sans-serif}.pure-u-1-24{width:4.1667%}.pure-u-1-12,.pure-u-2-24{width:8.3333%}.pure-u-1-8,.pure-u-3-24{width:12.5%}.pure-u-1-6,.pure-u-4-24{width:16.6667%}.pure-u-1-5{width:20%}.pure-u-5-24{width:20.8333%}.pure-u-1-4,.pure-u-6-24{width:25%}.pure-u-7-24{width:29.1667%}.pure-u-1-3,.pure-u-8-24{width:33.3333%}.pure-u-3-8,.pure-u-9-24{width:37.5%}.pure-u-2-5{width:40%}.pure-u-10-24,.pure-u-5-12{width:41.6667%}.pure-u-11-24{width:45.8333%}.pure-u-1-2,.pure-u-12-24{width:50%}.pure-u-13-24{width:54.1667%}.pure-u-14-24,.pure-u-7-12{width:58.3333%}.pure-u-3-5{width:60%}.pure-u-15-24,.pure-u-5-8{width:62.5%}.pure-u-16-24,.pure-u-2-3{width:66.6667%}.pure-u-17-24{width:70.8333%}.pure-u-18-24,.pure-u-3-4{width:75%}.pure-u-19-24{width:79.1667%}.pure-u-4-5{width:80%}.pure-u-20-24,.pure-u-5-6{width:83.3333%}.pure-u-21-24,.pure-u-7-8{width:87.5%}.pure-u-11-12,.pure-u-22-24{width:91.6667%}.pure-u-23-24{width:95.8333%}.pure-u-1,.pure-u-1-1,.pure-u-24-24,.pure-u-6-6{width:100%}
-    .status{
-        margin: 0rem -0.5rem -0.7rem -0.5rem;
-    }
-    .block{
-        margin: 0.5rem 0.5rem;
-        padding: 0;
-        font-weight: normal;
-        font-style: normal;
-        line-height: 1;
-        font-family: inherit;
-        min-width: inherit;
-        overflow-x: auto;
-        overflow-y: hidden;
-        padding: 6px 10px 7px 8px;
-        border: 1px solid rgba(0,0,0,.05);
-        border-radius: .375rem;
-        background-color: #f4;
-        box-shadow: 0 0 2rem 0 rgba(136,152,170,.15);
-	
-    }
-    .img-con{
-        margin: 1rem;

-    }
-    .green{
-		font-size:1.25rem;
-        color: #2dce89;
-    }
-    .red{
-		font-size:1.25rem;
-        color: #fb6340;
-    }
-	
-	.sk-text-success{
-        color: #2dce89;
-    }
-	.sk-text-error{
-        color: #fb6340;
-    }
-	.gap{
-	margin-right:0.5rem;
-	}
-    .block img{
-        width: 48px;
-        height: auto;
-		float:right;
-    }
-    .pure-u-5-8{
-        display:flex;
-        align-items:center;
+<%
+math.randomseed(os.time())
+-%>
+<html>

-    }
-
- .block h4{
-        font-size: .8125rem;
-        font-weight: 600;
-        margin: 1rem;
-		color:#8898aa!important;
-        line-height: 1.8em;
-    }
-
-    @media screen and (max-width: 720px) {
-        .pure-u-1-6{
-            width:50%;
-        }
-		.pure-u-1-2{
-            width:100%;
-        }
-    }
-
-</style> 
-
-
-  <style>.mar-10 {margin-left: 50px; margin-right: 10px;}</style> 
+<head>
+    <link rel="stylesheet" href="/luci-static/vssr/css/vssr.css??v=<%=math.random(1,100000)%>">
 </head>
 <body>
  <div class="pure-g status"> 
   <div class="pure-u-1-6"> 
    <div class="block pure-g"> 
     <div class="pure-u-3-5"> 
-     <h4 id="vssr_status"><%:Client%><br /><span class="red"><%:Not Running%></span></h4>
+     <h4 id="vssr_status"><%:Client%><br /><span class="red"><%:Not Running%>✘</span></h4>
     </div> 
     <div class="pure-u-2-5"> 
      <div class="img-con"> 
@ -98,7 +30,7 @@
    <div class="block pure-g"> 
     <div class="pure-u-3-5">  
     
-         <h4 id="baidu_status"><%:domestic website%><br><span class="red"><%:Problem detected%></span></h4>
+         <h4 id="baidu_status"><%:domestic website%><br><span class="red"><%:Problem detected%>✘</span></h4>
     </div> 
     <div class="pure-u-2-5"> 
      <div class="img-con"> 
@ -110,7 +42,7 @@
    <div class="pure-u-1-6"> 
    <div class="block pure-g"> 
     <div class="pure-u-3-5"> 
-<h4 id="google_status"><%:foreign websites%><br><span class="red"><%:Problem detected%></span></h4>
+<h4 id="google_status"><%:foreign websites%><br><span class="red"><%:Problem detected%>✘</span></h4>
     </div> 
     <div class="pure-u-2-5"> 
      <div class="img-con"> 
@ -123,7 +55,7 @@
   <div class="pure-u-1-6"> 
    <div class="block pure-g"> 
     <div class="pure-u-3-5"> 
-     <h4 id="ss_server_status"><%:SS Servers%><br><span class="red"><%:Not Running%></span></h4>
+     <h4 id="ss_server_status"><%:SS Servers%><br><span class="red"><%:Not Running%>✘</span></h4>
     </div> 
     <div class="pure-u-2-5"> 
      <div class="img-con"> 
@ -135,7 +67,7 @@
   <div class="pure-u-1-6"> 
    <div class="block pure-g"> 
     <div class="pure-u-3-5"> 
-            <h4 id="ssr_server_status"><%:SSR Servers%><br><span class="red"><%:Not Running%></span></h4>
+            <h4 id="ssr_server_status"><%:SSR Servers%><br><span class="red"><%:Not Running%>✘</span></h4>
     </div> 
     <div class="pure-u-2-5"> 
      <div class="img-con"> 
@ -148,7 +80,7 @@
   <div class="pure-u-1-6"> 
    <div class="block pure-g"> 
     <div class="pure-u-3-5"> 
-     <h4 id="v2_server_status"><%:V2 Servers%><br><span class="red"><%:Not Running%></span></h4>
+     <h4 id="v2_server_status"><%:V2 Servers%><br><span class="red"><%:Not Running%>✘</span></h4>
     </div> 
     <div class="pure-u-2-5"> 
      <div class="img-con"> 
@ -166,12 +98,12 @@
    XHR.poll(5, '<%=url([[admin]], [[vpn]], [[vssr]], [[run]])%>', null,
            function (x, data) {
                if (data) {
-					document.getElementById('vssr_status').innerHTML = data.global?'<%:Client%><br><span class="green"><%:Running%></span>':'<%:Client%><br><span class="red"><%:Not Running%></span>';
-                                                                                    document.getElementById('baidu_status').innerHTML = data.baidu?'<%:domestic website%><br><span class="green"><%:Connect OK%></span>':'<%:domestic website%><br><span class="red"><%:Problem detected%></span>';
-					document.getElementById('google_status').innerHTML = data.google?'<%:foreign websites%><br><span class="green"><%:Connect OK%></span>':'<%:foreign websites%><br><span class="red"><%:Problem detected%></span>';
-					document.getElementById('ss_server_status').innerHTML = data.ss_server?'<%:SS Servers%><br><span class="green"><%:Running%></span>':'<%:SS Servers%><br><span class="red"><%:Not Running%></span>';
-					document.getElementById('ssr_server_status').innerHTML = data.ssr_server?'<%:SSR Servers%><br><span class="green"><%:Running%></span>':'<%:SSR Servers%><br><span class="red"><%:Not Running%></span>';
-                                                                                       document.getElementById('v2_server_status').innerHTML = data.v2_server?'<%:V2 Servers%><br><span class="green"><%:Running%></span>':'<%:V2 Servers%><br><span class="red"><%:Not Running%></span>';					     
+					document.getElementById('vssr_status').innerHTML = data.global?'<%:Client%><br><span class="green"><%:Running%>✔</span>':'<%:Client%><br><span class="red"><%:Not Running%>✘</span>';
+                                                                                    document.getElementById('baidu_status').innerHTML = data.baidu?'<%:domestic website%><br><span class="green"><%:Connect OK%>✔</span>':'<%:domestic website%><br><span class="red"><%:Problem detected%>✘</span>';
+					document.getElementById('google_status').innerHTML = data.google?'<%:foreign websites%><br><span class="green"><%:Connect OK%>✔</span>':'<%:foreign websites%><br><span class="red"><%:Problem detected%>✘</span>';
+					document.getElementById('ss_server_status').innerHTML = data.ss_server?'<%:SS Servers%><br><span class="green"><%:Running%>✔</span>':'<%:SS Servers%><br><span class="red"><%:Not Running%>✘</span>';
+					document.getElementById('ssr_server_status').innerHTML = data.ssr_server?'<%:SSR Servers%><br><span class="green"><%:Running%>✔</span>':'<%:SSR Servers%><br><span class="red"><%:Not Running%>✘</span>';
+                                                                                       document.getElementById('v2_server_status').innerHTML = data.v2_server?'<%:V2 Servers%><br><span class="green"><%:Running%>✔</span>':'<%:V2 Servers%><br><span class="red"><%:Not Running%>✘</span>';					     
 							
            
                }
--- a/package/ctcgfw/luci-app-vssr/po/zh_Hans/vssr.po
+++ b/package/ctcgfw/luci-app-vssr/po/zh_Hans/vssr.po
@ -838,6 +838,11 @@ msgstr "mtu参数"
 msgid "SS Servers"
 msgstr "SS服务器"

+msgid "Support AdGuardHome and DNSMASQ format list"
+msgstr "同时支持 AdGuard Home 和 DNSMASQ 格式的过滤列表"
+
+msgid "Running"
+msgstr "运行正常"

 msgid "SSR Servers"
 msgstr "SSR服务器"
--- a/package/ctcgfw/luci-app-vssr/root/www/luci-static/vssr/css/vssr.css
+++ b/package/ctcgfw/luci-app-vssr/root/www/luci-static/vssr/css/vssr.css
@ -8,49 +8,36 @@ https://github.com/pure-css/pure/blob/master/LICENSE.md
 */


-.pure-g {
-    letter-spacing: -.31em;
-    text-rendering: optimizespeed;
-    font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-orient: horizontal;
-    -webkit-box-direction: normal;
-    -webkit-flex-flow: row wrap;
-    -ms-flex-flow: row wrap;
-    flex-flow: row wrap;
-    -webkit-align-content: flex-start;
-    -ms-flex-line-pack: start;
-    align-content: flex-start
+   .pure-g{
+          letter-spacing:-.31em;
+          text-rendering:optimizespeed;
+          font-family:FreeSans,Arimo,"Droid Sans",Helvetica,Arial,sans-serif;
+          display: -webkit-box;
+          display: -webkit-flex;
+          display: -ms-flexbox;
+          display: flex;
+          -webkit-box-orient: horizontal;
+          -webkit-box-direction: normal;
+          -webkit-flex-flow: row wrap;
+          -ms-flex-flow: row wrap;
+          flex-flow: row wrap;
+          -webkit-align-content: flex-start;
+          -ms-flex-line-pack: start;
+          align-content: flex-start
 }
-
@media all and (-ms-high-contrast:none),
-(-ms-high-contrast:active) {
-    table .pure-g {
-        display: block
-    }
-}
+(-ms-high-contrast:active){
+       table .pure-g{
+           display:block
+             }
+          }

-.opera-only :-o-prefocus,
-.pure-g {
-    word-spacing: -.43em
-}
-
-.pure-u {
-    display: inline-block;
-    zoom: 1;
-    letter-spacing: normal;
-    word-spacing: normal;
-    vertical-align: top;
-    text-rendering: auto
-}
-
-.pure-g [class*=pure-u] {
-    font-family: sans-serif
-}
+   .opera-only :-o-prefocus,
+   .pure-g{
+      word-spacing:-.43em
+      }

+.pure-u,
 .pure-u-1,
 .pure-u-1-1,
 .pure-u-1-12,
@ -96,148 +83,216 @@ https://github.com/pure-css/pure/blob/master/LICENSE.md
 .pure-u-7-24,
 .pure-u-7-8,
 .pure-u-8-24,
-.pure-u-9-24 {
-    display: inline-block;
-    zoom: 1;
-    letter-spacing: normal;
-    word-spacing: normal;
-    vertical-align: top;
-    text-rendering: auto
-}
+.pure-u-9-24{
+       display:inline-block;
+       zoom:1;
+       letter-spacing:normal;
+       word-spacing:normal;
+       vertical-align:top;
+       text-rendering:auto

-.pure-u-1-24 {
-    width: 4.1667%
-}
+   }

-.pure-u-1-12,
-.pure-u-2-24 {
-    width: 8.3333%
-}
+  .pure-g [class*=pure-u]   {
+      font-family:sans-serif
+  
+   }
+    .pure-u-1-24  {
+        width:   4.1667%

-.pure-u-1-8,
-.pure-u-3-24 {
-    width: 12.5%
-}
+   }
+    .pure-u-1-12,
+    .pure-u-2-24  {
+        width:   8.3333%

-.pure-u-1-6,
-.pure-u-4-24 {
-    width: 16.6667%
-}
+  }
+    .pure-u-1-8,
+    .pure-u-3-24  {
+         width:  12.5%  

-.pure-u-1-5 {
-    width: 20%
-}
+  }

-.pure-u-5-24 {
-    width: 20.8333%
-}
+   .pure-u-1-6,
+   .pure-u-4-24   {
+        width:   16.6667% 
+  }

-.pure-u-1-4,
-.pure-u-6-24 {
-    width: 25%
-}
+    .pure-u-1-5   {
+        width:   20% 

-.pure-u-7-24 {
-    width: 29.1667%
-}
+  }
+     .pure-u-5-24  {
+         width:   20.8333%
+          
+  }
+    .pure-u-1-4,
+    .pure-u-6-24  {
+         width:   25%

-.pure-u-1-3,
-.pure-u-8-24 {
-    width: 33.3333%
-}
+  }
+    .pure-u-7-24  {
+         width:   29.1667%

-.pure-u-3-8,
-.pure-u-9-24 {
-    width: 37.5%
-}
+  }.pure-u-1-3,
+    .pure-u-8-24  {
+         width:   33.3333%

-.pure-u-2-5 {
-    width: 40%
-}
+  }
+     .pure-u-3-8,
+     .pure-u-9-24  {
+           width:   37.5%

-.pure-u-10-24,
-.pure-u-5-12 {
-    width: 41.6667%
-}
+  }
+      .pure-u-2-5  {
+           width:   40%

-.pure-u-11-24 {
-    width: 45.8333%
-}
+   }
+      .pure-u-10-24,
+      .pure-u-5-12  {
+          width:   41.6667%  

-.pure-u-1-2,
-.pure-u-12-24 {
-    width: 50%
-}
+   }
+     .pure-u-11-24  {
+         width:  45.8333%

-.pure-u-13-24 {
-    width: 54.1667%
-}
+   }
+      .pure-u-1-2,
+      .pure-u-12-24  {
+         width:   50%

-.pure-u-14-24,
-.pure-u-7-12 {
-    width: 58.3333%
-}
+   }
+    .pure-u-13-24  {
+         width:   54.1667%  
+     
+  }
+     .pure-u-14-24,
+         .pure-u-7-12   {
+          width:   58.3333%  

-.pure-u-3-5 {
-    width: 60%
-}
+   }
+     .pure-u-3-5   {
+          width:   60%

-.pure-u-15-24,
-.pure-u-5-8 {
-    width: 62.5%
-}
+   }
+      .pure-u-15-24,
+       .pure-u-5-8  {
+        width:   62.5%

-.pure-u-16-24,
-.pure-u-2-3 {
-    width: 66.6667%
-}
+   }
+    .pure-u-16-24,
+    .pure-u-2-3  {
+        width:   66.6667%

-.pure-u-17-24 {
-    width: 70.8333%
-}
+   }
+    .pure-u-17-24  {
+        width:   70.8333% 
+   }

-.pure-u-18-24,
-.pure-u-3-4 {
-    width: 75%
-}
+   .pure-u-18-24,
+   .pure-u-3-4   {
+        width:   75%

-.pure-u-19-24 {
-    width: 79.1667%
-}
+   }
+   .pure-u-19-24 {
+         width:   79.1667%

-.pure-u-4-5 {
-    width: 80%
-}
+   }
+  .pure-u-4-5  {
+          width:   80%

-.pure-u-20-24,
-.pure-u-5-6 {
-    width: 83.3333%
-}
+     }
+     .pure-u-20-24,
+     .pure-u-5-6  {
+          width:   83.3333%

-.pure-u-21-24,
-.pure-u-7-8 {
-    width: 87.5%
-}
+     }
+     .pure-u-21-24,
+     .pure-u-7-8   {
+           width:   87.5%

-.pure-u-11-12,
-.pure-u-22-24 {
-    width: 91.6667%
-}
+     }
+    .pure-u-11-12,
+    .pure-u-22-24  {
+           width:   91.6667%

-.pure-u-23-24 {
-    width: 95.8333%
-}
+     }
+    .pure-u-23-24  {
+           width:  95.8333% 

-.pure-u-1,
-.pure-u-1-1,
-.pure-u-24-24,
-.pure-u-5-5 {
-    width: 100%
-}
+     }
+    .pure-u-1,
+    .pure-u-1-1,
+    .pure-u-24-24,
+    .pure-u-6-6  {
+    width:100%
+
+    }
+    .status{
+        margin: 1.5rem -0.5rem 0 -0.5rem;
+    }
+
+    .img-con{
+        margin: 1rem;
+
+    }
+    .green{
+        color: #2dce89;
+    }
+    .red{
+        color: #f5365c;
+    }
+    .block img{
+        max-width: 100%;
+        height: auto;
+    }
+    .pure-u-5-8{
+        display:flex;
+        align-items:center;
+
+    }
+
+    .block h4{
+        font-size: 1.3rem;
+        font-weight: bold;
+        margin: 0.75rem 0;
+
+        line-height: 1.8em;
+    }
+    @media screen and (max-width: 1920px) {
+        .block h4{
+            font-size: 1.2rem;
+
+        }
+    }
+    @media screen and (max-width: 1690px) {
+        .block h4{
+            font-size: 1rem;
+
+        }
+    }
+    @media screen and (max-width: 1290px) {
+        .block h4{
+            font-size: 0.8rem;
+        }
+        .pure-u-1-6{
+            width:33.333%;
+        }
+    }
+    @media screen and (max-width: 700px) {
+
+        .pure-u-1-6{
+            width:50%;
+        }
+        .img-con{
+            margin: 0.5rem;
+
+        }
+        .block h4{
+            font-size: 0.81rem;
+
+        }
+    }

-.status {
-    margin: 1rem -0.5rem 1rem -0.5rem;
-}

 .block {
    margin: 0.5rem 0.5rem;