Skip to content

A
abook_check
Commit 2a9820a8 by Lee Munkyeong
Options

Modifying error page design

parent 5d03c9e5
Showing with 216 additions and 4 deletions
ABVJE_Launcher_Android/assets/chat/public/css/chat.css
...@@ -584,8 +584,49 @@ a.article:hover { ...@@ -584,8 +584,49 @@ a.article:hover {
z-index:10050; z-index:10050;
} }
/* --------------------------------------------------- */
/* ERROR PAGE STYLE */
/* --------------------------------------------------- */
.error-aria{
background: #DBDBDB;
text-align: center;
margin-top: 100px;
}
#errorImg{
width: 60%;
}
#errorTitle{
margin-top: 8%;
font-size: 1.6rem;
}
#errorMsg{ #errorMsg{
margin-top: 60px; margin-top: 8%;
margin-left: 30px;
margin-right: 30px;
font-size : 1.0rem;
}
.bg-footer {
background-color: #F2F2F2;
}
.talign-center{
text-align: center; text-align: center;
} }
.reload-button{
margin-top: 10%;
width: 50%;
height: 40px;
border: none;
color: white;
border-radius: 8px;
}
#errorEnd{
margin-top: 15vh;
}
ABVJE_Launcher_Android/assets/chat/public/icon/error_footer_img.svg 0 → 100644
<svg width="410" height="47" viewBox="0 0 410 47" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="246" y="5" width="16" height="21">
<path d="M247.183 9.14135L250.261 17.5986C250.45 18.1154 251.026 18.3844 251.543 18.1963L253.423 17.5122L255.868 24.231C256.042 24.7103 256.734 24.6503 256.827 24.1479L258.66 14.0095C258.798 13.2465 258.063 12.6308 257.339 12.8941L255.216 13.6671L255.281 6.56649C255.294 5.87019 254.603 5.37657 253.945 5.61599L247.781 7.85964C247.264 8.04775 246.995 8.62452 247.183 9.14135Z" fill="black"/>
</mask>
<g mask="url(#mask0)">
<rect x="239" y="8.2085" width="24" height="24" transform="rotate(-20 239 8.2085)" fill="#E1CE25"/>
</g>
</g>
<g filter="url(#filter1_d)">
<mask id="mask1" mask-type="alpha" maskUnits="userSpaceOnUse" x="262" y="6" width="16" height="21">
<path d="M268.878 6.97473L265.799 15.432C265.611 15.9488 265.88 16.5256 266.397 16.7137L268.277 17.3977L265.831 24.1165C265.657 24.5958 266.225 24.9941 266.619 24.6695L274.54 18.0813C275.136 17.5851 274.969 16.641 274.245 16.3777L272.122 15.6047L276.736 10.2074C277.193 9.68208 276.982 8.86012 276.324 8.62071L270.159 6.37705C269.643 6.18894 269.066 6.4579 268.878 6.97473Z" fill="black"/>
</mask>
<g mask="url(#mask1)">
<rect x="263.208" y="1" width="24" height="24" transform="rotate(20 263.208 1)" fill="#E1CE25"/>
</g>
</g>
<g filter="url(#filter2_d)">
<path d="M277 28L409 28M1 28H248.5" stroke="black" stroke-width="0.5"/>
<path d="M277 34L409 34M1 34H248.5" stroke="black" stroke-width="0.5"/>
<path d="M249.767 33.4422L249 34C245.422 33.5064 245.396 28.2485 249 28C251.343 28.8521 251.783 31.9757 249.767 33.4422Z" stroke="black" stroke-width="0.5"/>
<path d="M277.5 34V34C274.524 33.1072 274.524 28.8928 277.5 28V28" stroke="black" stroke-width="0.5"/>
<path d="M246.597 30.4597C248.144 30.4597 249.677 30.5821 251.219 30.7143C252.857 30.8547 254.562 30.9034 256.158 31.3245C257.581 31.7 258.618 33.231 259.387 34.385C259.61 34.72 260.175 35.4704 260.175 35.908" stroke="black" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M246.857 32.1893C248.365 32.1893 249.856 32.336 251.354 32.492C252.72 32.6343 253.949 32.9242 254.909 33.9862C255.736 34.9012 256.688 35.9178 257.182 37.0707C257.298 37.343 257.368 37.6446 257.494 37.897" stroke="black" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M247 29C248.995 29.315 250.996 29.452 253.001 29.6486C254.181 29.7643 255.812 29.7786 256.744 30.6239C257.249 31.0821 257.669 31.6014 258.199 32.0316C258.438 32.2251 258.65 32.4108 258.848 32.6322C259.133 32.9513 259.194 33.3494 259.194 33.7565" stroke="black" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M275.309 29.8543C273.746 30.0849 272.004 30.1682 270.774 31.2813C270.5 31.5284 270.222 31.7679 269.995 32.0596C269.858 32.2359 269.89 32.4476 269.774 32.6217" stroke="black" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M274.963 32.1028C273.793 32.2844 272.72 32.6457 271.763 33.352C271.3 33.6942 270.877 34.0742 270.418 34.4186C270.227 34.5621 270.109 34.6442 270.034 34.8702" stroke="black" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M276.087 33.4001C274.789 34.15 273.337 34.5885 272.167 35.5573C271.861 35.8103 271.331 36.3445 271.331 36.7728" stroke="black" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<filter id="filter0_d" x="235" y="0" width="38.7611" height="38.7611" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter1_d" x="251" y="1" width="38.7611" height="38.7611" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter2_d" x="-3" y="27.75" width="416" height="18.3971" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
</defs>
</svg>
ABVJE_Launcher_Android/assets/chat/public/icon/error_top_icon.svg 0 → 100644
<svg width="255" height="150" viewBox="0 0 255 150" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<path d="M221.081 134H76.1703H37.1488C26.8131 134 17.2504 128.527 12.0154 119.615C9.38623 115.139 8 110.042 8 104.851V102.237C8 90.4294 13.382 79.2658 22.6197 71.9118L29.419 66.499C40.6425 57.5642 55.9522 55.7406 68.9604 61.7892L70.3377 62.4296C71.4339 58.0115 73.0127 53.7213 75.0493 49.6375C96.9866 5.64741 161.109 9.95942 176.959 56.4906L183.474 75.6185C189.124 72.2491 195.704 70.3373 202.66 70.3373H203.763C214.684 70.3373 224.989 75.4016 231.661 84.0483L232.278 84.8487C236.636 90.4967 239 97.4295 239 104.563V110.135C239 121.19 231.697 130.916 221.081 134Z" fill="#C6C6C6"/>
</g>
<g filter="url(#filter1_i)">
<ellipse cx="103" cy="70.5" rx="9" ry="8.5" fill="#DBDBDB"/>
</g>
<g filter="url(#filter2_i)">
<ellipse cx="141" cy="70.5" rx="9" ry="8.5" fill="#DBDBDB"/>
</g>
<g filter="url(#filter3_i)">
<path d="M90.5 110.5V110.5C109.954 96.1337 136.375 95.6713 156.32 109.348L158 110.5" stroke="#DBDBDB" stroke-width="6"/>
</g>
<defs>
<filter id="filter0_d" x="0" y="10.9897" width="255" height="139.01" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dx="4" dy="4"/>
<feGaussianBlur stdDeviation="6"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter1_i" x="94" y="62" width="18" height="21" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="4"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow"/>
</filter>
<filter id="filter2_i" x="132" y="62" width="18" height="21" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="4"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow"/>
</filter>
<filter id="filter3_i" x="88.7179" y="96.3992" width="70.9787" height="18.575" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="2"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow"/>
</filter>
</defs>
</svg>
ABVJE_Launcher_Android/assets/chat/public/index.html
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en" style="background: #DBDBDB;">
<head> <head>
<!-- Required meta tags --> <!-- Required meta tags -->
<meta charset="utf-8"> <meta charset="utf-8">
...@@ -9,14 +9,31 @@ ...@@ -9,14 +9,31 @@
<link rel="stylesheet" href="./css/bootstrap.min.css"> <link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/lightbox.min.css"> <link rel="stylesheet" href="./css/lightbox.min.css">
<link rel="stylesheet" href="./css/chat.css"> <link rel="stylesheet" href="./css/chat.css">
<script>
const PLATFORM = 'android';
const IS_MOBILE = true;
</script>
</script>
</head> </head>
<body> <body>
<nav class="navbar navbar-expand navbar-dark bg-primary fixed-top flex-md-nowrap p-2 shadow"> <nav class="navbar navbar-expand navbar-dark bg-primary fixed-top flex-md-nowrap p-2 shadow">
<ul class="navbar-nav col-3" id="navbarLeft"></ul> <ul class="navbar-nav col-3" id="navbarLeft">
<button class="btn btn-primary" type="button" id="homeButton">
<i class="fa fa-home" style="font-size: 1.6rem;"></i>
</button>
</ul>
<a class="navbar-brand col-6 mr-0 text-truncate titleRoomName text-center" href="#">Error</a> <a class="navbar-brand col-6 mr-0 text-truncate titleRoomName text-center" href="#">Error</a>
</nav> </nav>
<div class="error-aria">
<img id="errorImg" src="./icon/error_top_icon.svg">
<div id="errorTitle">
<a>ネットワークエラー</a>
</div>
<div id="errorMsg"> <div id="errorMsg">
Please check the network connection. ネットワークに接続できませんでした。電波が良いところでもう一度接続してください。
</div>
<button class="bg-primary reload-button" id="reloadButton">更新</button>
<img id="errorEnd" src="./icon/error_footer_img.svg">
</div> </div>
</div> </div>
<script src="./js/libs/jquery-3.3.1.min.js"></script> <script src="./js/libs/jquery-3.3.1.min.js"></script>
...@@ -33,5 +50,7 @@ ...@@ -33,5 +50,7 @@
<script src="./js/language_ko.js" charset="UTF-8"></script> <script src="./js/language_ko.js" charset="UTF-8"></script>
<script src="./js/language_ja.js" charset="UTF-8"></script> <script src="./js/language_ja.js" charset="UTF-8"></script>
<script src="./js/language_en.js" charset="UTF-8"></script> <script src="./js/language_en.js" charset="UTF-8"></script>
<script src="./js/chat-util.js"></script>
<script src="./js/chat-error.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
ABVJE_Launcher_Android/assets/chat/public/js/chat-error.js 0 → 100644
jQuery('#homeButton').on('click', function(){
if (CHAT_UTIL.isIOS()) {
//TODO IOS処理追加必要。
} else if (CHAT_UTIL.isAndroid()) {
android.goHome();
}
});
jQuery('#reloadButton').on('click', function(){
if (CHAT_UTIL.isIOS()) {
//TODO IOS処理追加必要。
} else if (CHAT_UTIL.isAndroid()) {
android.reload();
}
});
\ No newline at end of file
ABVJE_UI_Android/src/jp/agentec/abook/abv/ui/home/activity/ChatWebviewActivity.java
...@@ -587,6 +587,27 @@ public class ChatWebviewActivity extends ParentWebViewActivity { ...@@ -587,6 +587,27 @@ public class ChatWebviewActivity extends ParentWebViewActivity {
}); });
} }
@JavascriptInterface
public void goHome() {
mChatWebView.post(new Runnable() {
@Override
public void run() {
backToHome();
}
});
}
@JavascriptInterface
public void reload() {
mChatWebView.post(new Runnable() {
@Override
public void run() {
ActivityHandlingHelper.getInstance().startChatWebviewActivity();
}
});
}
} }
/** /**
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment