kon

agi.js

@@ -0,0 +1,8 @@
+//Main Logic
+if (requirelib("filelib")) {
+    if (action === 'listDir') {
+        sendJSONResp(filelib.readdir("dongwaa:\\" + (path ? ('' + path + '\\') : '') + "*"));
+    } else if (action === 'listFile') {
+        sendJSONResp(filelib.aglob("dongwaa:\\" + (path ? ('' + path + '\\') : '') + "*.*"));
+    }
+}

boot.js

@@ -0,0 +1,258 @@
+function renderTopBar(title = ' ', subtitle = '', buttonHTML = '', showSearch = false, additionalHTML = '') {
+    return `<style>@media (max-width:520px) {body{background:white} @media (prefers-color-scheme: dark) {body{background:black}}}</style><div class="topbar flx">
+    <button onclick="window.history.back();" class="acss aobh no_print" style="padding:0.5em;font-size:16px;white-space:pre;transition-duration:0s" id="btn_back" tabindex="0" title="back"><b>く<span class="no_mobile"> back</span></b></button>
+    <div id="topbar_loading"></div>
+    <div class="dwhdt flx dwhdto"><div class="dwhdt">
+        <b id="topbar_title_wrap">
+            <b id="topbar_title_inwrap_main">
+                <h4 id="topbar_title">` + title + '</h4><p4 id="topbar_subtitle">' + subtitle + `</p4>
+            </b>
+            <b id="topbar_title_inwrap_secondary">
+                <div id="topbar_title_inwarp_sec_buf"></div><h4 id="topbar_inwrap_title"></h4><p4 id="topbar_inwrap_subtitle"></p4>
+            </b>
+        </b>
+    </div></div>
+    <div class="flx dwhda">` + buttonHTML + `</div>` + ((showSearch) ? `
+    <div class="pgsbtn flx no_print">
+    <label for="search_box" id="topbtn_search" class="dwhdab" onclick="if (event.shiftKey) { window.open('/dongwaa/_dig/', '_blank') }" title="Search box\nHold shift to open in new tab">
+        <img alt="Search" src="` + resourceNETpath + `image/search.png" draggable="false">
+        <style>#topbtn_search{background-color:rgba(160,160,255,.1)} #topbtn_search:hover{background-color:rgba(160,160,255,.25)} #topbtn_search:hover:active > img{transform:rotate(6deg)}</style>
+    </label>
+    <form onsubmit="boot('/dongwaa/_dig/'.concat(document.getElementById('search_box').value));this.blur();return false"><input id="search_box" name="dw" type="search" placeholder="Search for something..." title="Search for something..."></form>
+    </div>` : ``) + additionalHTML + `</div>`
+}
+
+function renderBottomBar(path) {
+    return `<div class="bottom_wrp flx">` + renderBottomBarButtons(bottombarbuttons, path) + `</div><div id="divheadbuffer"></div>`
+}
+
+function renderBottomBarButtons(Buttons, path) {
+    var results = `<form class="tabview flx" tabindex="1002"><div class="tabview-wrp" tabindex="1001">`;
+    var btn = [];
+    var hit = false;
+    Buttons.forEach(btns => {
+        btn = btns.split(',');
+
+        try {
+
+            if (((path != '/dongwaa/') ? (btn[1] != '/dongwaa/') : (btn[1] === '/dongwaa/')) && path.startsWith(btn[1])) {
+
+                results += `
+                <button type="button" tabindex="1000" class="tabview-sel tabview-sel-s">
+                <img src="` + btn[2] + `" draggable="false" alt=""><p3>` + btn[0] + `</p3><div class="tabview-sel-tri"></div>
+                </button>
+                `
+                hit = true
+
+            } else {
+
+                results += `
+                <button onclick="boot('` + btn[1] + `')" class="tabview-sel tabview-sel-h">
+                <img src="` + btn[2] + `" draggable="false" alt=""><p3>` + btn[0] + `</p3>
+                </button>
+                `
+
+            }
+
+        } catch (error) { };
+    });
+
+    if (!hit) {
+        results += `
+        <button type="button" tabindex="1000" class="tabview-sel tabview-sel-s">
+        <img src="` + resourceNETpath + `image/nullicon.png" draggable="false" alt=""><p3>` + path + `</p3><div class="tabview-sel-tri"></div>
+        </button>
+        `
+    }
+
+    results += `</div><button type="button" tabindex="1000" class="tabview-close"><img alt="Close" draggable="false" src="` + resourceNETpath + `image/circle-cross.png"> <p3 style="opacity:0.8"><b>Close</b></p3></button></form><style>@media only screen and (max-width:520px) {.bottom_wrp > a > .ckimg{display:none!important}}</style>`
+
+    return results
+}
+
+var popArray = []
+
+var LoadingStatusQueue = 0;
+var errorLoadingCSS = ['<style>#topbar_loading::before{border-color:#FF4238!important;background-color:#FF4238;animation:none}</style>', '<style>#topbar_loading::before{border-color:#FF4238!important;background-color:#FF4238;color:white;animation:none;content:"✘"}</style>']
+
+function LoadingStatus(type, presistant = false, title = '', subtitle = '') {
+    if (type != 'hide' && LoadingStatusQueue > 0) {
+        //console.log('[LoadingStatus] ' + type + ' queued')
+        setTimeout(() => {LoadingStatus(type, presistant, title, subtitle)}, 500, type, presistant, title, subtitle);
+        return false;
+    }
+
+    var l = document.getElementById("topbar_loading");
+    var presistTime = 2850;
+    switch (type) {
+        case 'success':
+            LoadingStatus('show')
+            presistTime = 2850; LoadingStatusQueue += 1; setTimeout(() => {LoadingStatusQueue -= 1}, presistTime + 750)
+            l.innerHTML = '<style>#topbar_loading::before{border-color:#33ff99!important;background-color:#33ff99;color:green;animation:none;content:"✓"}</style>'
+            break
+        case 'warning':
+            LoadingStatus('show')
+            presistTime = 6350; LoadingStatusQueue += 1; setTimeout(() => {LoadingStatusQueue -= 1}, presistTime + 750)
+            l.innerHTML = '<style>#topbar_loading::before{border-color:#ffaa33!important;animation:none}</style>'
+            setTimeout(() => {l.style.opacity = 0.3}, 600)
+            setTimeout(() => {l.style.opacity = 1}, 1300)
+            setTimeout(() => {l.style.opacity = 0.3}, 2000)
+            setTimeout(() => {l.style.opacity = 1}, 2700)
+            break
+        case 'error':
+            LoadingStatus('show')
+            presistTime = 6850; LoadingStatusQueue += 1; setTimeout(() => {LoadingStatusQueue -= 1}, presistTime + 750)
+            l.innerHTML = errorLoadingCSS[1]
+            setTimeout(() => {l.innerHTML = errorLoadingCSS[0]}, 850)
+            setTimeout(() => {l.innerHTML = errorLoadingCSS[1]}, 1350)
+            setTimeout(() => {l.innerHTML = errorLoadingCSS[0]}, 1850)
+            setTimeout(() => {l.innerHTML = errorLoadingCSS[1]}, 2350)
+            setTimeout(() => {l.innerHTML = errorLoadingCSS[0]}, 2850)
+            setTimeout(() => {l.innerHTML = errorLoadingCSS[1]}, 3350)
+            break
+        case 'show':
+            LoadingStatusQueue += 1; setTimeout(() => {LoadingStatusQueue -= 1}, 50)
+            l.innerHTML = "";
+            l.style.display = 'unset';
+            setTimeout(() => {
+                l.style.opacity = 1;
+                l.style.transform = 'translateX(0)';
+                l.style.width = '2.25em';
+            }, 25)
+            presistant = true;
+            break
+        case 'hide':
+            LoadingStatusQueue += 1; setTimeout(() => {LoadingStatusQueue -= 1}, 700)
+            l.style.opacity = 0;
+            l.style.transform = 'translateX(-1.5em)';
+            setTimeout(() => {
+                l.style.width = '0';
+            }, 0) //50
+            setTimeout(() => {
+                l.style.display = 'none';
+                l.innerHTML = "";
+            }, 650) //700
+            presistant = true;
+            break
+    }
+    if (title) {
+        document.getElementById("topbar_title_inwarp_sec_buf").style.maxHeight = '0'
+        document.getElementById("topbar_title_inwrap_secondary").style.maxHeight = '0'
+        document.getElementById("topbar_title_inwrap_main").style.opacity = 0
+        document.getElementById("topbar_title_inwrap_secondary").style.opacity = 0
+        document.getElementById("topbar_inwrap_title").innerText = title
+        document.getElementById("topbar_inwrap_subtitle").innerText = subtitle
+        setTimeout(() => {
+            document.getElementById("topbar_title_inwrap_main").style.display = 'none'
+            document.getElementById("topbar_title_inwrap_secondary").style.opacity = 1
+            document.getElementById("topbar_title_inwrap_secondary").style.maxHeight = 'unset'
+            document.getElementById("topbar_title_inwarp_sec_buf").style.maxHeight = '3.5em'
+        }, 200)
+    }
+    if (!presistant) {
+        setTimeout(() => {
+            LoadingStatus('hide')
+        }, presistTime - 300)
+        setTimeout(() => {
+            document.getElementById("topbar_title_inwrap_secondary").style.opacity = 0
+            document.getElementById("topbar_title_inwarp_sec_buf").style.maxHeight = '0'
+        }, presistTime - 200)
+        setTimeout(() => {
+            document.getElementById("topbar_title_inwrap_main").style.display = 'block'
+            document.getElementById("topbar_inwrap_title").innerText = ''
+            document.getElementById("topbar_inwrap_subtitle").innerText = ''
+            setTimeout(() => {document.getElementById("topbar_title_inwrap_main").style.opacity = 1}, 200)
+        }, presistTime)
+    }
+}
+
+//make back button works
+window.onpopstate = function (event) {
+    popArray.pop()
+    boot(decodeURIComponent((event.state) ? event.state.plate : window.location.pathname), true)
+}
+
+//getting acc info in cookies
+function getCookie(name) {
+    let matches = document.cookie.match(new RegExp(
+        "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
+    ));
+    return matches ? decodeURIComponent(matches[1]) : undefined;
+}
+
+const authemail = getCookie('authemail');
+
+var signinlevel = (authemail != undefined) ? 1 : 0 ;
+
+//add css into html
+function installCSS(targetCSS) {
+    var stylesheet = document.createElement('link')
+    stylesheet.href = resourceNETpath.concat(targetCSS)
+    stylesheet.rel = 'stylesheet'
+    document.getElementsByTagName('head')[0].appendChild(stylesheet)
+}
+
+installCSS('webel.css');
+
+//<a href=""> -> <a onclick="boot()">
+function hrefInterrupt(event) {
+	if (!(event.target.getAttribute('href').startsWith('http://') || event.target.getAttribute('href').startsWith('https://'))) {
+		event.preventDefault();
+		boot(event.target.getAttribute('href'));
+	}
+}
+
+//list of post-script cleanup
+function postCleanup() {
+    document.querySelectorAll('a').forEach(link => link.addEventListener('mousedown', hrefInterrupt));
+    exe('cleanup')
+}
+
+//load new page
+var prev_boot_call = 'none';
+var isBootRunning = false;
+
+function boot(path, noHistory) {
+
+    //check if boot is already running, prevent accidental double-clicking and overwriting
+    if (isBootRunning) {
+        console.log('[boot] boot aready running! current process: '.concat(prev_boot_call).concat(', ').concat(path).concat(' will be skipped loading.'));
+        return false; //stop running boot
+    }
+
+    isBootRunning = true;
+
+    //check should add current URL into history, then change URL shown in browser
+    (noHistory) ? history.replaceState(null, window.title, path) : history.pushState({ plate: path }, window.title, path);
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+
+    //window.removeEventListener('scroll', dwLib_scrolling); //remove infinite scroll script from lib
+    //document.querySelectorAll('.lib_div').forEach(e => e.remove()); //remove lib div from body
+
+    if (path == '/' || path == '' || path == undefined) { //home page
+        path = '/';
+
+    } else if (path.startsWith('/!')) { //reserved for api call, invalid for HTML, no init and no script
+        path = undefined;
+
+    } else { //any other page
+        //path = path;
+
+    }
+
+    if (prev_boot_call != path) { //if already init page then don't init it again
+
+        prev_boot_call = path;
+        document.getElementById('core').innerHTML = init(path);
+        postCleanup();
+
+    }
+
+    exe(path); //execute scripts
+
+    isBootRunning = false;
+
+    return true;
+}
+
+boot(window.location.pathname, true)

index.html

@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta charset="utf-8">
+	<title>dongwaa</title>
+	<meta name="viewport" content="minimal-ui, width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<meta name="twitter:card" content="summary_large_image">
+	<meta name="HandheldFriendly" content="True">
+	<script src="../script/jquery.min.js"></script>
+	<script src="../script/ao_module.js"></script>
+	<script>
+		const resourceNETpath = `/dongwaa/`
+	</script>
+	<style>
+		:root{--bgcolor:#eeeeff}
+	</style>
+</head>
+
+<body>
+
+	<div class="no_css">
+		<div id="no_css_x"></div>
+		<style>body{margin:0} .no_css{display:flex;flex-flow:column;justify-content:center;align-items:center;width:100%;height:100vh} #no_css_x{border-radius:50%;animation:1.25s linear infinite spinner;border:solid 0.25em rgba(128,128,128,.5);border-top-color:#888;height:1em;width:1em;will-change:transform} @keyframes spinner { 0% {transform:rotate(0deg)} 100% {transform:rotate(360deg)}} @media (prefers-color-scheme: dark) {body{background-color:#0f0c09}}</style>
+		<script>document.getElementsByClassName("no_css")[0].id = "no_css";setTimeout(function() {document.getElementById("no_css_x").style.borderTopColor = 'red';document.getElementById("no_css").innerHTML += `<div style="margin:1em 0.5em;background-color:rgba(128,128,128,.2);color:grey;padding:1em;border-radius:1em;text-align:center;font-family: AppleSDGothicNeo-Regular, PingFangHK-Regular, Calibri, Microsoft JhengHei, verdana">some components are still loading<br>ignore them and show the page first?</div><button onclick="document.getElementById('no_css').innerHTML = '<style>.content{opacity:1!important;height:auto!important;overflow:unset!important}</style>';document.getElementById('no_css').style.display = 'none!important'">ignore</button>`}, 6000)</script>
+	</div>
+	
+	<div class="content" tabindex="-1" id="core" style="opacity:0;height:0;overflow:hidden">
+
+		<div class="b flx">
+			<div class="x flx">
+				<div class="p">
+					<h1><b>Unable to load content</b></h1><br>
+					<p1 style="opacity:0.8"><b>Your browser is too old to display this page.</b></p1>
+				</div>
+				<img alt="Unable to load content" class="i" src="image/nojs.png">
+			</div>
+		</div>
+
+		<style>
+			body{overflow-y:hidden;background-color:black;font-family:AppleSDGothicNeo-Regular, PingFangHK-Regular, Calibri, Microsoft JhengHei, verdana}
+			h1{font-size:1.375em;margin:0;vertical-align:middle;display:inline} p1{font-size:0.975em}
+			.b{color:white;justify-content:space-between;position:fixed;bottom:0;left:0;right:0;border-top:0.15em solid #3f3c39;padding:0.75em;padding:0.75em calc(0.75em + env(safe-area-inset-right)) calc(0.75em + env(safe-area-inset-bottom)) calc(0.75em + env(safe-area-inset-left))}
+			.i{object-fit:contain;height:3.25em} .p, .i, .aobh{margin:0.25em} .x, .i{order:1} .y, .p{order:2}
+			.s{display:inline;border-radius:0.25em;background-color:#008000;padding:0.1em 0.25em;margin:0.25em 0.375em 0.25em 0}
+			.flx{flex-flow:wrap;display:flex;align-items:center} .flx div{vertical-align:middle}
+			a{text-decoration:none;color:#3993ff} a:hover{color:#5bb5ff}
+			.aobh{transition-duration:0.1s;border-radius:0.5em;padding:0.5em;user-select:none;cursor:pointer}
+			.aobh:hover{background:rgba(255,255,255,.05)}
+			.aobh:active{background:rgba(255,255,255,.1)}
+			.aobh:hover:active{transform:scale(0.95)}
+			@media print{.no_print{display:none!important} body, .s{background-color:white} .s{border:1px solid black} .b{color:black} .i{filter:brightness(0.2)}}
+		</style>
+
+	</div>
+
+	<div id="kbShortcutMenuWrp" style="display:none"><div id="kbShortcutMenubg"></div><div id="kbShortcutMenu" tabindex="-1"></div></div>
+
+	<script src="init.js"></script>
+	<script src="boot.js"></script>
+
+	<noscript>
+		<div class="b flx">
+			<a href="" class="y aobh no_print"><p1><b>Reload</b></p1></a>
+			<div class="x flx">
+				<div class="p">
+					<h1><b>Unable to load content</b></h1><br>
+					<p1 style="opacity:0.8"><b>Please enable Javascript and reload the page.</b></p1>
+				</div>
+				<img alt="Unable to load content" class="i" src="image/nojs.png">
+			</div>
+		</div>
+		<style>.no_css{display:none!important}</style>
+	</noscript>
+
+</body>
+
+</html>

init.agi

@@ -0,0 +1,14 @@
+//Define the launchInfo for the module
+var moduleLaunchInfo = {
+    Name: "dongwaa",
+	Group: "Files",
+	IconPath: "dongwaa/image/small_icon.png",
+	Version: "0.0",
+	StartDir: "dongwaa/index.html",
+	SupportFW: true,
+	LaunchFWDir: "dongwaa/index.html",
+	InitFWSize: [1024, 768]
+}
+
+registerModule(JSON.stringify(moduleLaunchInfo));
+

init.js

@@ -0,0 +1,235 @@
+const dongwaa_webDB_URL = 'https://dongwaa.cakko.ml/'
+
+const bottombarbuttons = [
+  'Browse,/dongwaa/_browse/,' + resourceNETpath + 'image/browse.png',
+  'Today,/dongwaa/,' + resourceNETpath + 'image/dongwaa.png',
+  'Library,/dongwaa/_library/,' + resourceNETpath + 'image/dig.png',
+  'Search,/dongwaa/_dig/,' + resourceNETpath + 'image/search.png',
+  'Settings,/dongwaa/_setting/,' + resourceNETpath + 'image/settings.png'
+]
+
+function init(path) {
+  if (path == undefined || path === '/') {
+    return `<meta http-equiv="refresh" content="0;URL=/dongwaa/">`
+
+  } else if (path === '/dongwaa/' || path.startsWith('/dongwaa/_')) { 
+    if (path === '/dongwaa/') {
+      return `<div class="edge2edge card">[home] /dongwaa/</div>` + renderBottomBar(path)
+
+    } else if (path.startsWith('/dongwaa/_dig/')) {
+      return `<div class="edge2edge card">` + path + '</div>' + renderBottomBar(path)
+      
+    } else if (path.startsWith('/dongwaa/_browse/')) {
+      return `<div class="edge2edge card" id="dump">` + path + '</div>' + renderBottomBar(path)
+
+    } else if (path.startsWith('/dongwaa/_library/')) {
+      return `<div class="edge2edge card">` + path + '</div>' + renderBottomBar(path)
+
+    } else if (path.startsWith('/dongwaa/_setting/')) {
+      return `<div class="edge2edge card">` + path + '</div>' + renderBottomBar(path)
+
+    } else {
+      return `<meta http-equiv="refresh" content="0;URL=/dongwaa/">`
+
+    }
+
+  } else if (path.startsWith('/dongwaa/')) { 
+    return `` + renderTopBar('...', '', '', true) + `<div id="content"></div>
+<!-- <button type="button" onclick="LoadingStatus('show')">show load</button> 
+<button type="button" onclick="LoadingStatus('hide')">hide load</button> 
+<button type="button" onclick="LoadingStatus('success')">success load</button> 
+<button type="button" onclick="LoadingStatus('warning', false, 'Warning')">warning load</button> 
+<button type="button" onclick="LoadingStatus('error', false, 'Error', 'Sorewa error message desu')">error load</button> -->`
+}
+}
+
+function exe(path) {
+    if (!path.startsWith('/dongwaa/_') && path != '/dongwaa/' && path.startsWith('/dongwaa/')) { //dongwaa pages
+
+      LoadingStatus("show")
+
+      var dwid_url = path.substring(9)
+
+      fetch(dongwaa_webDB_URL + '!dwfs/' + path.split('/')[2])
+        .then(r => r.json())
+        .then(dwfs_resp => {
+    
+          if (dwfs_resp.status == 200) {
+    
+            init_data(dwfs_resp)
+    
+          } else {
+    
+            var dwid_guess = decodeURI(dwid_url).split('/')[0].substring(decodeURI(dwid_url).split('/')[0].split(' ')[0].length + 1)
+            var guess = dwid_guess.split(' ')[0]
+            var guess_dwss = ""
+            try { guess_dwss = dwid_guess.split(' ')[1] } catch (error) { guess_dwss = undefined }
+    
+            if (guess == '') {on9jai()} else {
+    
+            fetch(dongwaa_webDB_URL + '!dwfs/' + guess)
+              .then(response => response.json())
+              .then(dwfs_resp => {
+                if (dwfs_resp.status == 200 && (dwfs_resp.dwfs == decodeURI(dwid_url).split('/')[0] || dwfs_resp.dwfs.indexOf(decodeURI(dwid_url).split('/')[0]) > -1)) {
+    
+                  history.replaceState(null, null, '/dongwaa/'.concat(guess).concat((guess_dwss != undefined) ? '/'.concat(guess_dwss) : ''))
+                  dwid_url = (guess_dwss != undefined) ? guess.concat('/').concat(guess_dwss) : guess ;
+                  init_data(dwfs_resp)
+    
+                } else {
+                
+                  on9jai()
+    
+                }
+              })
+    
+            }
+    
+          }
+    
+        })
+        .catch(function (err) {
+          console.log('[!dwfs] error: ' + err)
+          setTimeout(() => {
+            LoadingStatus("error", true, "Failed to load", err)
+          }, 1000)
+        });
+
+        function init_data(dwfs_resp) {
+          var target_dw = '';
+          var noSeasonOne = false;
+          var dwss_in_dwfs_pos = 0;
+      
+          var url_dwss = decodeURI(dwid_url.split('/')[0]);
+          if (dwid_url.split('/')[1] != undefined) { url_dwss += ' '.concat(dwid_url.split('/')[1]) };
+      
+          if (Array.isArray(dwfs_resp.dwfs)) { //returned array
+            dwfs_resp.dwfs.sort();
+            if (dwid_url.split('/')[1] == '') {
+              target_dw = dwfs_resp.dwfs[0];
+              dwss_in_dwfs_pos = 0;
+            } else {
+              target_dw = dwfs_resp.dwfs.find(l => l.endsWith(url_dwss));
+              dwss_in_dwfs_pos = dwfs_resp.dwfs.findIndex(dwfsX => dwfsX === target_dw);
+            };
+          } else { //returned single
+            target_dw = dwfs_resp.dwfs;
+            if (target_dw.split(' ')[2] != undefined) { noSeasonOne = true } //check should expect season 1
+          }
+      
+          download_data(target_dw, dwfs_resp, dwss_in_dwfs_pos, noSeasonOne, false)
+        }
+
+        function download_data(target_dw, dwfs_resp, dwss_in_dwfs_pos, noSeasonOne, try_direct) {
+          fetch(dongwaa_webDB_URL + '!dw/' + target_dw)
+            .then(r => r.json())
+            .then(dw_resp => {
+              if (dw_resp.status == 200) {
+                document.getElementById('topbar_title').innerText = popArray[popArray.length - 1].split('/')[0]
+
+                document.getElementById('content').innerHTML = '<div class="edge2edge card">' + JSON.stringify(dw_resp) + '</div><div class="edge2edge card" id="dump"></div>'
+
+      fetch("/system/ajgi/interface?script=dongwaa/agi.js", {method: 'POST', body: 'action=listDir&path=' + popArray[popArray.length - 1], headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}})
+        .then(r => r.json())
+        .then(data => {
+        if (data.length > 0) {
+          data.forEach(dwid => {
+            document.getElementById('dump').innerHTML += '<br><a class="aobh" href="/dongwaa/_browse/' + dwid.substring(9) + '">' + dwid + '</a>'
+          });
+          postCleanup();
+        } else {
+          document.getElementById('dump').innerHTML += '<br><i>no more subfolders</i>'
+        }
+
+        fetch("/system/ajgi/interface?script=dongwaa/agi.js", {method: 'POST', body: 'action=listFile&path=' + popArray[popArray.length - 1], headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}})
+          .then(r => r.json())
+          .then(r => r.filter(v => !data.includes(v)))
+          .then(datax => {
+            if (datax.length > 0) {
+              document.getElementById('dump').innerHTML += '<hr><ui>'
+              datax.forEach(dwid => {
+                document.getElementById('dump').innerHTML += '<li>' + dwid + '</li>'
+              });
+              document.getElementById('dump').innerHTML += '</ui>'
+            } else {
+              document.getElementById('dump').innerHTML += '<br><i>no files inside</i>'
+            }
+            postCleanup();
+          })
+
+        })
+                LoadingStatus("hide")
+              } else { on9jai() }
+            })
+            .catch(function (err) {
+              console.log('[!dwpage] error: ' + err)
+              LoadingStatus("error", true, "Failed to load", err)
+            });
+        }
+
+
+
+
+
+
+
+
+
+
+    } else if (path.startsWith('/dongwaa/_browse/')) { //dongwaa browse
+      path.split('/').forEach(path_dwid => {
+        path_dwid = path_dwid.split('{')[0].split('[')[0]
+        console.log(path_dwid)
+        if (!!path_dwid && path_dwid != 'dongwaa' && path_dwid != '_browse') {
+          try {
+            fetch(dongwaa_webDB_URL + "!dwdig/" + path_dwid)
+            .then(r => r.json())
+            .then(data => {
+              if (data.status === 200) {
+                if (data.result.length > 1) {
+  
+                } else {
+                  popArray.push(path.substring(17))
+                  boot('/dongwaa/' + data.result, true)
+                  return
+                }
+              } else {return}
+            })
+          } catch (error) {return}
+        }
+      });
+
+      document.getElementById('dump').innerHTML += (path === '/dongwaa/_browse/') ? '<br>' : '<br><button onclick="window.history.back();" class="acss aobh no_print" style="padding:0.5em;font-size:16px;white-space:pre;transition-duration:0s" id="btn_back" tabindex="0" title="back"><b>く back</b></button>'
+
+      fetch("/system/ajgi/interface?script=dongwaa/agi.js", {method: 'POST', body: 'action=listDir&path=' + path.substring(17), headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}})
+        .then(r => r.json())
+        .then(data => {
+        if (data.length > 0) {
+          data.forEach(dwid => {
+            document.getElementById('dump').innerHTML += '<br><a class="aobh" href="/dongwaa/_browse/' + dwid.substring(9) + '">' + dwid + '</a>'
+          });
+          postCleanup();
+        } else {
+          document.getElementById('dump').innerHTML += '<br><i>no more subfolders</i>'
+        }
+
+        fetch("/system/ajgi/interface?script=dongwaa/agi.js", {method: 'POST', body: 'action=listFile&path=' + path.substring(17), headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}})
+          .then(r => r.json())
+          .then(r => r.filter(v => !data.includes(v)))
+          .then(datax => {
+            if (datax.length > 0) {
+              document.getElementById('dump').innerHTML += '<hr><ui>'
+              datax.forEach(dwid => {
+                document.getElementById('dump').innerHTML += '<li>' + dwid + '</li>'
+              });
+              document.getElementById('dump').innerHTML += '</ui>'
+            } else {
+              document.getElementById('dump').innerHTML += '<br><i>no files inside</i>'
+            }
+            postCleanup();
+          })
+
+        })
+
+  }
+}

webel.css

@@ -0,0 +1,309 @@
+@charset "utf-8";
+:root{
+    color-scheme: light dark;
+    --link-color: #1a73e8;
+    --link-color-hover: #0a56ca;
+}
+
+head, body, html{scroll-behavior:smooth;margin:0;-webkit-text-size-adjust:100%;background-color:var(--bgcolor)}
+*{color-adjust:exact!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;font-family: AppleSDGothicNeo-Regular, PingFangHK-Regular, Calibri, Microsoft JhengHei, verdana}
+button{color:black;border:none;padding:1em;border-radius:1em;margin:0;cursor:pointer;font-size:13.25px}
+a, .acss{text-decoration:none;color:var(--link-color);background-color:transparent} .acss{font-size:16px} a:hover, .acss:hover{color:var(--link-color-hover)}
+.aobh{transition-duration:0.1s!important;border-radius:0.5em;padding:0.5em;user-select:none;cursor:pointer}
+.aobh:hover{background-color:rgba(0,0,0,.05)}
+.aobh:active{background-color:rgba(0,0,0,.1)}
+.aobh:hover:active{transform:scale(0.95)}
+.gray_aobh{padding:0.5em;user-select:none;filter:grayscale(1)}
+.flx{flex-flow:wrap;display:flex;justify-content:space-between;align-items:center} .flx div{vertical-align:middle}
+.label{padding:0.25em 0.5em;border-radius:0.5em;white-space:nowrap;width:min-content}
+.content{flex: 1 0 auto;outline:none;opacity:1!important;height:auto!important;overflow:unset!important}
+.symbol{font-family: -apple-system, BlinkMacSystemFont, Calibri, Roboto, Ubuntu, verdana !important; font-weight: bold}
+#no_css, .no_desktop{display:none!important}
+.bufLR{padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left)}
+#divheadbuffer{height:calc(5vh + 4.5em)}
+img{object-fit:cover;opacity:1;transition-duration:.375s;transition-timing-function:cubic-bezier(.19,1,.22,1)}
+
+.smtbtn{white-space:pre;padding:1em;border-radius:1em;font-size:13.25px;margin:3px;text-align:center;transition-duration:.1s;display:inline-block;line-height:normal;user-select:none}
+.smtbtn > span{font-size:1em;color:#3f3c39;transition-duration:.1s;background-position-y:center;background-repeat:no-repeat;background-size:1.75em auto}
+.smtbtn:hover > span{padding:0 1em;background-image:none!important}
+.smtbtn:hover:active{transform:scale(0.97)}
+
+.edge2edge{padding:0.75em calc( 5% + 5em );padding:0.75em max(calc(env(safe-area-inset-right) + 5%), calc(5% + 5em)) 0.75em max(calc(env(safe-area-inset-left) + 5%), calc(5% + 5em))}
+.card{padding:2em calc( 5% + 5em );padding:2em max(calc(env(safe-area-inset-right) + 5%), calc(5% + 5em)) 2em max(calc(env(safe-area-inset-left) + 5%), calc(5% + 5em))}
+
+h1{margin:0;font-size:2.6rem}
+h2{margin:0;font-size:2.15rem;opacity:0.875}
+h3{margin:0;font-size:1.675rem;opacity:0.75}
+h4{margin:0;font-size:1.325rem;line-height:1.25}
+h5{margin:0;font-size:1rem}
+h6{margin:0;font-size:0.8rem}
+p1{font-size:1.175rem;font-weight:bolder}
+p2{font-size:1rem}
+p3{font-size:0.875rem;opacity:0.875;font-style:italic}
+p4{font-size:0.8rem;opacity:0.8}
+p5{font-size:0.625rem}
+p6{font-size:0.625rem;opacity:0.8}
+
+input:checked + .slider {background-color:var(--link-color)}
+input:checked + .slider:hover {background-color:var(--link-color-hover)}
+input:checked + .slider:before {-webkit-transform: translateX(1em);-ms-transform: translateX(1em);transform: translateX(1em)}
+.switch {position:relative;display:inline-block;width:2.25em;height:1.25em}
+.switch input {opacity:0;width:0;height:0}
+.slider {border-radius:5em;position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#d8d8d8}
+.slider:hover {background-color:#c8c8c8}
+.slider:before {position:absolute;content:"";border-radius:50%;height:0.75em;width:0.75em;left:0.25em;top:0.25em;box-shadow: 0 2px 2px rgba(0,0,0,.3);background-color:white;background:linear-gradient(180deg, #f8f8f8, #e8e8e8)}
+.slider:before, .slider {-webkit-transition:.1s;transition:.1s;transition-timing-function:cubic-bezier(.77,0,.18,1)}
+
+input:checked + .slipink {background-color:#e81973}
+input:checked + .slipink:hover {background-color:#d80963}
+input:checked + .sligreen {background-color:#73e819}
+input:checked + .sligreen:hover {background-color:#63d809}
+input:checked + .slipurple {background-color:#8e19e8}
+input:checked + .slipurple:hover {background-color:#7e09d8}
+input:checked + .sliorange {background-color:#e88e19}
+input:checked + .sliorange:hover {background-color:#d87e09}
+
+.checkmark {cursor:pointer;height:1.75em;width:1.75em;border-radius:50%;position:absolute;top:-0.4em;left:0;border:0.15em solid rgba(128,128,128,.5);transition-duration:.05s}
+.radiobt {padding-left:2.75em;user-select:none;position:relative;display:inline-block;margin:0.75em 0.25em;line-height:1.2em}
+.radiobt > input{display:none}
+.radiobt > input:checked ~ .checkmark, .radiobt:hover input:checked ~ .checkmark{cursor:default;background-color:var(--link-color);border:0.15em solid var(--link-color)}
+.radiobt > input:checked ~ .checkmark:after, .radiobt:hover input:checked ~ .checkmark:after{opacity:1;box-shadow:0 0.25em 0.25em rgba(0,0,0,.1)}
+.radiobt .checkmark:after {opacity:0;border-radius:50%;height:1em;width:1em;left:0.375em;top:0.375em;background-color:white;background:linear-gradient(180deg, #f8f8f8, #e8e8e8);position:absolute;content:"";transition-duration:.05s}
+input ~ .checkmark:hover {border:0.15em solid #1a73e8}
+input:disabled ~ .checkmark, input:disabled ~ .checkmark:hover{cursor:default!important;border:0.15em dotted rgba(128,128,128,.3)}
+.radiobt:hover:active > input ~ .checkmark {transform:scale(0.95)}
+.radiobt:hover:active > input:checked ~ .checkmark, input:disabled ~ .checkmark {transform:scale(1)!important}
+
+.pgsbtn{flex-shrink:0}
+.pgsbtn label{display:inherit}
+.pgsbtn img{object-fit:contain;width:2em;height:2em;cursor:pointer;user-select:none}
+.pgsbtn form{display:inline-block;width:10em;margin:0;transition-duration:.25s;transition-timing-function:cubic-bezier(.19,1,.22,1)}
+.pgsbtn form:focus-within{width:10em}
+.pgsbtn form input{outline:none!important;-webkit-appearance:none;padding:0;margin:0;background:none;border:none;height:2rem;margin-left:0.4em;width:calc(100% - 0.4em);font-size:0.85rem}
+
+.tabview{justify-content:center!important;margin:0.5em;position:fixed;bottom:5vh;left:calc(10vw + 13em);right:calc(10vw + 13em);z-index:10000;color:black}
+.tabview-wrp{overflow-x:auto;display:flex;scrollbar-width:thin}
+.tabview-sel{width:min-content;padding:0.4em 1em;border-radius:0.75em;margin:0 0.25em;background:none;vertical-align:middle;text-align:center;border:0}
+.tabview-sel-h{transition-duration:0.05s;cursor:pointer}
+.tabview-sel-h:hover:active{transform:scale(0.97)}
+.tabview-sel-s{cursor:default}
+.tabview-sel img{height:2em;min-width:2em;vertical-align:middle;user-select:none;display:block;width:100%;object-fit:contain;margin-bottom:0.2em;-webkit-touch-callout:none}
+.tabview-sel p3{line-height:1.1;vertical-align:middle;white-space:nowrap}
+.tabview-sel-s, .tabview-sel-h:hover{background-color:rgba(0,0,0,.1)}
+.tabview-sel-tri{display:none}
+.tabview:focus, .tabview-wrp:focus, .tabview-sel:focus{outline:none!important}
+.tabview-close{align-items:center;z-index:11000;display:none;background-color:rgba(32,32,32,.1);max-width:50vw;outline:none;border:0;padding:0.75em 1em;margin:0.25em 0.375em;border-radius:5em;width:100%;justify-content:center!important;box-shadow:0 0.5em 1em rgba(0,0,0,0);flex-flow:nowrap!important;white-space:nowrap}
+.tabview-close > img{height:2em;width:2em;object-fit:contain;margin-right:0.375em}
+.tabview-close > * {vertical-align:middle}
+
+.bottom_wrp{flex-flow:nowrap!important;scrollbar-width:thin;word-break:break-word;position:fixed;bottom:0;left:0;right:0;margin:0 calc( 10% + 3em ) 5vh calc( 10% + 3em );width:calc( 80% - 6em );height:4.5em;border-radius:2.25em;z-index:9999}
+.bottom_wrp > .tabview{margin:0.5em;position:unset;flex-grow:1;min-width:0}
+.bottom_wrp .ckimg{width:130px;height:52px;padding:0 0.5em;z-index:3}
+.bottom_wrp > a > .ckimg{object-fit:cover;filter:brightness(50%)}
+
+.dwhi{width:1.75em;height:1.75em;vertical-align:middle;margin-right:0.1em;pointer-events:none;object-fit:contain}
+.topbar{z-index:99999;min-height:45px;flex-flow:initial!important;border-bottom:0.16em solid rgba(128,128,128,.3);padding:2em calc( 5% + 5em ) calc( 0.5em - 0.08em ) calc( 5% + 5em - 0.5em );padding:max(calc(env(safe-area-inset-top) + 0.5em), 2em) calc( 5% + 5em + env(safe-area-inset-right)) calc( 0.5em - 0.08em ) calc( 5% + 5em - 0.5em + env(safe-area-inset-left));position:-webkit-sticky;position:sticky;top:calc( env(safe-area-inset-top) - 1.5em );box-shadow:0 0.75em 0.75em rgba(0,0,0,.15)}
+.dwhdt{flex-grow:2;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding:0 0.25em}
+/* .dwhdto{flex-flow:nowrap} */
+.dwhdt img{height:1.625rem;width:1.625rem;margin-right:0.375em;user-select:none}
+.dwhdb{border-bottom:2px solid rgba(0,0,0,0.2);transition-duration:0.05s;margin:0 0.5em;padding:0.25em}
+.dwhdb, .dwhdbtf{white-space:nowrap;width:min-content;color:#7f7c79}
+.dwhdbs{margin:0 0 0.75em 0!important;padding-top:0!important}
+.dwhdbtf{cursor:default;border-bottom:2px solid rgba(0,0,0,0.5);margin:0 0.25em;padding:0.25em 0.5em}
+.dwhdbt:hover{color:orange;border-bottom:2px solid orange;margin:0 0.25em;padding:0.25em 0.5em}
+.dwhdbt:hover:active{transform:scale(0.95)}
+.dwhdi{justify-content:flex-start;flex-flow:nowrap;overflow-x:auto;scrollbar-width:thin}
+.dwhda{flex-shrink:0}
+.dwhdab{border-radius:50%;margin:0.15625em 0.2375em;width:2.375em;height:2.375em;border:none;transition-duration:0.1s;cursor:pointer;padding:0;display:inherit;font-size:unset;outline:none}
+.dwhdab:hover:active{transform:scale(0.9)}
+.dwhdab > img {object-fit:cover;user-select:none;width:calc(100% - 0.5em);height:calc(100% - 0.5em);padding:0.25em;transition-duration:0.1s;-webkit-touch-callout:none}
+.dwhtdo{justify-content:flex-start}
+.jtx{display:inline-block;margin-right:0.35em;padding:calc(0.4em - 2px) 0.5em!important;color:#999999;border:2px solid rgba(128,128,128,.3);user-select:none}
+
+.ckusrico{justify-content:end!important;height:100%}
+.ckusrbtn{border-radius:3em;padding:0.3em;transition-timing-function:cubic-bezier(.2,.9,0,1.36);transition-duration:0s;aspect-ratio:1/1;z-index:11001;cursor:pointer;position:absolute;right:1em;outline:none;border:0;margin:0;background-color:rgba(0,0,0,0);border-color:rgba(128,128,128,.3)}
+.ckusrbtn:hover{background-color:rgba(32,32,32,.1)}
+.ckusrbtn > a {display:block;line-height:0}
+.ckusrbtn > a > img{border-radius:3em;height:3em;width:3em;min-height:3em;min-width:3em;object-fit:cover;border:0px solid rgba(128,128,128,.5);background-image: url(https://cakko.ml/hid/ico2/PPPlaceholder.png);background-repeat: no-repeat;background-position: center center;background-size: cover}
+.ckusrbtn > .ckusrwrp{display:none}
+.ckusrbtn:focus, .ckusrbtn:focus-within{border-radius:2.25em;box-shadow:0 1em 2em rgba(0,0,0,.3);border:0.2em solid rgba(128,128,128,.3);aspect-ratio:auto;width:max-content;transition-duration:.25s;cursor:default;position:absolute;bottom:calc(4.5em + 1em + env(safe-area-inset-bottom));right:0;margin:1em;padding:2.25em;background-repeat:no-repeat;background-size:cover;background-position:center center;/*background-image:url(https://cakko.ml/hid/u1.jpg)*/}
+.ckusrbtn:focus > a > img, .ckusrbtn:focus-within > a > img{display:none}
+.ckusrbtn:focus > .ckusrwrp, .ckusrbtn:focus-within > .ckusrwrp{display:block}
+.ckusrbtn:focus + .tabview-close, .ckusrbtn:focus-within + .tabview-close{display:flex}
+.pptpi{justify-content:flex-start!important}
+.ppimg, .ppimg_cover, .ppimg_cover_edit, .ppimg_cover_edit_img{border-radius:6.5em;transition-duration:0.2s;transition-timing-function:cubic-bezier(.08,.82,.17,1)}
+.ppimg{height:5.5em;width:5.5em;object-fit:cover;cursor:pointer}
+.ppimg_cover{margin-right:1em;border:2px solid rgba(128,128,128,.8);width:min-content}
+.ppimg_cover_edit{justify-content:center!important;background-color:rgba(0,0,0,.3);position:absolute;width:5.5em;height:5.5em;text-align:center;opacity:0;color:white;top:calc(2.25em + 2px)}
+.ppimg_cover_edit_img{width:calc(100% - 2em);height:calc(100% - 2em);margin:1em;opacity:0.9;transform:scale(0.7);border-radius:0}
+.ppimg_cover:hover{border:2px solid rgba(0,0,0,.3)}
+.ppimg_cover:hover > .ppimg{transform:scale(0.925)}
+.ppimg_cover:hover > .ppimg_cover_edit{opacity:1;transform:scale(1)}
+.ppimg_cover:hover > .ppimg_cover_edit > .ppimg_cover_edit_img{transform:scale(0.9)}
+.ppimg_cover:hover:active{border:2px solid rgba(0,0,0,.5)}
+.ppimg_cover:hover:active > .ppimg{transform:scale(1)}
+.ppimg_cover:hover:active > .ppimg_cover_edit{background-color:rgba(0,0,0,.5)}
+.ppimg_cover:hover:active > .ppimg_cover_edit > .ppimg_cover_edit_img{opacity:1;transform:scale(0.8)}
+
+.reqsignin_outer{justify-content:center!important;width:calc(100% - 2em);margin:1em}
+.reqsignin_inner{justify-content:unset!important;padding:2em;background-color:white;box-shadow:0 1em 2em rgba(0,0,0,.15);border-radius:2em;width:fit-content;width:-moz-fit-content;width:-webkit-fit-content}
+.reqsignin_switch{margin-bottom:1em;padding-bottom:0.75em;border-bottom:2px solid rgba(128,128,128,0.25);width:100%}
+.reqsignin_switch .switch{margin:0.5em}
+
+#kbShortcutMenuWrp{
+    display:none;
+    position:fixed;
+    width:100%;
+    height:100%;
+    top:0;
+    bottom:0;
+    left:0;
+    right:0;
+    z-index:9999;
+    background-color:rgba(0,0,0,.3);
+    align-items:center;
+    justify-content:center;
+    transition-delay:.05s;
+    transition-duration:.1s;
+    opacity:0;
+}
+#kbShortcutMenuWrp:focus-within{opacity:1!important;display:flex!important}
+#kbShortcutMenu{
+    min-width: 20em;
+    min-height: 10em;
+    width: min-content;
+    height: min-content;
+    max-width: 100vw;
+    max-height: 100vh;
+    overflow: auto;
+    border-radius: 1em;
+    box-shadow: 0 1em 2em rgba(0,0,0,.3);
+    transition-duration: .025s;
+    outline:none;
+    z-index:10000;
+    border:0.15em solid rgba(128,128,128,.1);
+}
+#kbShortcutMenu:focus{border:0.15em solid rgba(128,128,128,.3)}
+#kbShortcutMenubg{
+    position:absolute;
+    top:0;
+    bottom:0;
+    left:0;
+    right:0;
+    backdrop-filter: grayscale(.8);    
+    -webkit-backdrop-filter: grayscale(.8);
+}
+
+@keyframes spinner { 0% {transform:rotate(0deg)} 100% {transform:rotate(360deg)}}
+#topbar_loading::before {display: block!important;content: "";height: 1em;width: 1em;margin:0.375em;margin-right:0.125em;padding:0.125em;border-radius: 50%;animation: 1.25s linear infinite spinner;animation-play-state: running;animation-play-state: inherit;border: solid 0.25em rgba(128,128,128,.5);border-top-color: #1a73e8!important;will-change: transform;text-align:center;font-size:16px;line-height:16px;font-weight: bold}
+#topbar_loading, #topbar_title_inwrap_main, #topbar_title_inwrap_secondary, #topbar_title_inwarp_sec_buf{transition-delay:0.1s;transition-timing-function:ease}
+#topbar_loading{transition-duration:0.5s;display:unset;opacity:1;width:2.375em;transform:translateX(0)}
+#topbar_title_wrap, #topbar_title_inwrap_main, #topbar_title_inwrap_secondary{display:block;max-height:2.625em;overflow-y:hidden}
+#topbar_title_inwrap_main, #topbar_title_inwrap_secondary, #topbar_title_inwarp_sec_buf{transition-duration:0.3s}
+#topbar_title_inwrap_main > * {vertical-align:middle}
+#topbar_subtitle, #topbar_inwrap_subtitle{font-weight:normal;display:block/*;width:min-content;white-space:pre*/}
+#topbar_title_inwarp_sec_buf{height:0;max-height:0}
+.topbar, .bottom_wrp, .ckusrbtn:focus, .ckusrbtn:focus-within, #kbShortcutMenu{background-color:rgba(255,255,255,.95);backdrop-filter:blur(1em);-webkit-backdrop-filter:blur(1em)}
+.topbar, #kbShortcutMenu{background-color:rgba(255,255,255,.95)}
+@supports (backdrop-filter:blur(1em)) {.dwdt_top, .bottom_wrp, .ckusrbtn:focus, .ckusrbtn:focus-within{background-color:rgba(255,255,255,.8)} #kbShortcutMenu{background-color:rgba(255,255,255,.6)}}
+@supports (-webkit-backdrop-filter:blur(1em)) {.dwdt_top, .bottom_wrp, .ckusrbtn:focus, .ckusrbtn:focus-within{background-color:rgba(255,255,255,.8)} #kbShortcutMenu{background-color:rgba(255,255,255,.6)}}
+
+@media (prefers-color-scheme: dark) {
+body, head, html{background-color:#0f0c09;color:#eeeeee}
+button{color:#eee;background-color:#3f3c39}
+a, .acss{color:#3993ff} a:hover, .acss:hover{color:#5bb5ff}
+textarea{background:#3f3c39;color:#f0f0f0;border-color:#606060}
+.aobh:hover{background-color:rgba(255,255,255,.05);color:#5bb5ff}
+.aobh:active{background-color:rgba(255,255,255,.1)}
+.smtbtn > span, .ckusrwrp{color:white}
+.topbar{background-color:rgba(0,0,0,.95)}
+.dwhdb{border-bottom:2px solid rgba(255,255,255,.3)}
+.dwhdb, .dwhdbtf{color:#9f9c99}
+.dwhdbtf{border-bottom:2px solid rgba(255,255,255,.6)}
+.ppimg_cover:hover{border:2px solid rgba(132,132,132,1)}
+.ppimg_cover:hover:active{border:2px solid rgba(192,192,192,0.8)}
+input:checked + .slider:hover {background-color:#2a83f8}
+input:checked + .slipink:hover {background-color:#f82983}
+input:checked + .sligreen:hover {background-color:#73e819}
+input:checked + .sligreen {background-color:#63d809}
+input:checked + .slipurple:hover {background-color:#b441ff}
+input:checked + .slipurple {background-color:#9e29f8}
+input:checked + .sliorange:hover {background-color:#f89e29}
+.slider {background-color:#c8c8c8}
+.slider:hover {background-color:#d8d8d8}
+.pgsbtn form input, .tabview, .tabview-sel p3{color:white}
+.tabview-sel-s, .tabview-sel-h:hover{background-color:rgba(255,255,255,.15)}
+.tabview-close{background-color:rgba(255,255,255,.15)}
+.tabview-close > p5{color:#eeeeee}
+.bottom_wrp > a > .ckimg{filter: brightness(1)}
+.ckusrbtn:hover{background-color:rgba(255,255,255,.15)}
+.reqsignin_inner{background-color:#1f1c19}
+.bottom_wrp, .ckusrbtn:focus, .ckusrbtn:focus-within{background-color:#1f1c19}
+#kbShortcutMenu{background-color:rgba(24,24,24,.95)}
+@supports (backdrop-filter:blur(1em)) {.topbar, .bottom_wrp, .ckusrbtn:focus, .ckusrbtn:focus-within{background-color:rgba(0,0,0,.8)} #kbShortcutMenu{background-color:rgba(32,32,32,.75)}}
+@supports (-webkit-backdrop-filter:blur(1em)) {.topbar, .bottom_wrp, .ckusrbtn:focus, .ckusrbtn:focus-within{background-color:rgba(0,0,0,.8)} #kbShortcutMenu{background-color:rgba(32,32,32,.75)}}
+}
+
+@media (min-width:1280px) {.no_desktop{display:none!important}}
+@media (max-width:1280px) {
+.no_tablet{display:none!important}
+.edge2edge{padding:0.5em calc( 16px + 1em );padding:0.5em max(calc(env(safe-area-inset-right) + 0.5em), calc(16px + 1em)) 0.5em max(calc(env(safe-area-inset-left) + 0.5em), calc(16px + 1em))}
+.card{padding:2em calc( 16px + 1em );padding:2em max(calc(env(safe-area-inset-right) + 1em), calc(16px + 1em)) 2em max(calc(env(safe-area-inset-left) + 1em), calc(16px + 1em))}
+.topbar{padding:2em calc( 16px + 1em ) calc( 0.5em - 0.08em ) calc( 16px + 1em - 0.5em );padding:max(calc(env(safe-area-inset-top) + 0.5em), 2em) max(calc(env(safe-area-inset-right) + 0.5em), calc(16px + 1em)) calc( 0.5em - 0.08em ) max(calc(env(safe-area-inset-left) + 0.5em), calc(16px + 1em))}
+.tabview{margin:1em;bottom:calc(1.75em + env(safe-area-inset-bottom));left:10em;right:10em}
+}
+
+@media (max-width:950px) {
+#divheadbuffer{height:5.5em;height:calc(env(safe-area-inset-bottom) + 5.5em)}
+.bottom_wrp{width:calc(100% - 2em - env(safe-area-inset-right) - env(safe-area-inset-left));margin:0 calc(1em + env(safe-area-inset-right)) calc(1em + env(safe-area-inset-bottom)) calc(1em + env(safe-area-inset-left))}
+.no_mobile{display:none!important}
+.pgsbtn form{width:0}
+}
+
+@media (max-width:520px) {
+.edge2edge{padding:0.75em;padding:0.75em max(env(safe-area-inset-right) + 0.25em, 0.75em) 0.75em max(env(safe-area-inset-left) + 0.25em, 0.75em)}
+.card{padding:1em;padding:1em max(env(safe-area-inset-right) + 0.25em, 1em) 1em max(env(safe-area-inset-left) + 0.25em, 1em)}
+.topbar{min-height:0;top:-3.5em;top:calc(-3.5em - env(safe-area-inset-top));border-radius:1.5em;border-bottom:none;padding:8px;padding:calc(8px + env(safe-area-inset-top)) 8px 8px 8px;flex-flow:wrap!important;flex-padding:16px calc(16px + 0.5em);box-shadow:0 0.25em 0.5em rgba(0,0,0,0)}
+.topbar + .card{margin-top:0.5em; box-shadow: 0 -0.25em 0.25em rgba(0,0,0,0.15);border-radius:1.5em;background-color: var(--bgcolor)}
+.dwhdi{flex-flow:wrap;overflow-x:none}
+.dwhdt{white-space:normal;flex-flow:wrap;padding:0.25em}
+.dwhdt img{height:2.5em;width:2.5em;margin:0 calc(100% - 2.5em) 0.25em 0}
+.dwhdto{order:0;width:100%;min-height:3.125em;padding:0 0.25em 0.375em 0.25em;padding-bottom:calc(env(safe-area-inset-top) + 0.375em)} #btn_back{order:1} .dwhda{order:2} .pgsbtn{order:3}
+#topbar_loading:before{margin:0.125em}
+#topbar_title, #topbar_subtitle, #topbar_inwrap_title, #topbar_inwrap_subtitle{max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
+#topbar_title_wrap, #topbar_title_inwrap_secondary{max-height:unset}
+#topbar_loading{position:fixed;top:1em;right:0.5em;top:calc(env(safe-area-inset-top) + 1em);right:calc(env(safe-area-inset-right) + 0.5em);border-radius:50%;backdrop-filter:blur(1em);-webkit-backdrop-filter:blur(1em)}
+#topbar_title_inwarp_sec_buf{height:3.5em}
+.tabview, .bottom_wrp > .tabview{position:fixed;bottom:calc(env(safe-area-inset-bottom));left:0;right:unset;z-index:10000;margin:0.35em}
+.tabview:focus-within{z-index:10100}
+.tabview-wrp{transition-duration:0.05s;display:block;border-radius:1em;padding:0.5em 0.5em 0 0;max-height:calc(100vh - 6.5em);overflow-y:auto}
+.tabview-sel{white-space:nowrap;padding:0.5em;margin:0 0 0.5em 0.5em;width:calc(100% - 0.5em);background:none;vertical-align:middle;text-align:left}
+.tabview-sel-h{display:none}
+.tabview-sel-h:hover{background:transparent!important}
+.tabview-sel-s{background-color:rgba(0,0,0,.05);transition-duration:0s;padding:0.75em}
+.tabview-sel img{margin-right:0.6em;display:inline-block;width:auto;margin-bottom:0}
+.tabview-sel-tri{display:inline-block;width:0;height:0;border-left:0.4em solid rgba(0,0,0,0);border-right:0.4em solid rgba(0,0,0,0);border-top:0.4em solid black;margin-left:0.75em;opacity:0.8}
+.tabview-wrp:focus-within{background-color:white;width:auto;box-shadow:0 0.25em 0.5em rgba(0,0,0,.3);transform:scale(1.01);margin:0.65em;margin-bottom:1.5em}
+.tabview-wrp:focus-within .tabview-sel{padding:0.75em}
+.tabview-wrp:focus-within .tabview-sel-h{display:inline-block}
+.tabview-wrp:focus-within .tabview-sel-s{background-color:rgba(0,0,0,.1)}
+.tabview-wrp:focus-within .tabview-sel-tri{display:none}
+.tabview-wrp:focus-within + .tabview-close{display:flex;margin-bottom:0.5em}
+.ckusrbtn:focus, .ckusrbtn:focus-within{width:calc(100vw - 2em);padding:2em;border-radius:2em}
+#divheadbuffer{height:4.5em;height:calc(4.5em + env(safe-area-inset-bottom))}
+.bottom_wrp{padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);margin:0;width:100%;border-radius:0;width:calc(100% - env(safe-area-inset-right) - env(safe-area-inset-left))}
+.bottom_wrp > .ckimg{height:calc(100% - 1em);z-index:10050}
+@media (prefers-color-scheme: dark) {
+.tabview-sel-s{background-color:rgba(255,255,255,.1)}
+.tabview-sel-tri{border-top:0.4em solid white}
+.tabview-wrp:focus-within{background-color:#2f2c29}
+.tabview-wrp:focus-within .tabview-sel-s{background-color:rgba(255,255,255,.2)}
+.topbar + .card{background-color:#0f0c09}
+}
+}
+
+@media (max-height:520px) {.tabview{position:relative;left:0;right:0;margin:1em 0}}
+
+@media (max-height:380px) {.bottom_wrp{position:relative} #divheadbuffer{display:none}}
+
+@media print {body, .content, .footer{display:block!important} #divheadbuffer, .smtbtn, .no_print, #d_loading{display:none!important} .bottom_wrp{position:relative;margin-top:1em} .dwhda{padding:0}}