Create Onedrive-dev.html
This commit is contained in:
qkqpttgf
GitHub
parent
f018448441
commit
acdb4640bd
|
|
@ -0,0 +1,584 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="<!--constStr@language-->">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title><!--Title--></title>
|
||||
<link rel="shortcut icon" href="<!--base_path-->favicon.ico" type="image/x-icon">
|
||||
<!--https://p.sfx.ms/images/favicon.ico-->
|
||||
<style>
|
||||
/* 通用样式 */
|
||||
/* 用于消除默认自带样式 */
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #333;
|
||||
font-family: "Segoe UI", Tahoma, Arial, sans-serif;
|
||||
overflow: hidden;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
input[type="radio"] {
|
||||
margin: 0;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* 兼容样式 */
|
||||
body {
|
||||
-webkit-user-select:none;
|
||||
-moz-user-select:none;
|
||||
-ms-user-select:none;
|
||||
user-select:none;
|
||||
}
|
||||
select:-moz-focusring {
|
||||
color: transparent;
|
||||
text-shadow: 0 0 0 #000;
|
||||
}
|
||||
|
||||
/* 自定义样式 */
|
||||
.container {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 1100px;
|
||||
}
|
||||
.pull-left {
|
||||
float: left;
|
||||
}
|
||||
.pull-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* 字体外部引用 */
|
||||
@font-face {
|
||||
font-family: 'iconfont'; /* project id 1634400 */
|
||||
src: url('//at.alicdn.com/t/font_1634400_9yg8f5s278.eot');
|
||||
src: url('//at.alicdn.com/t/font_1634400_9yg8f5s278.eot?#iefix') format('embedded-opentype'),
|
||||
url('//at.alicdn.com/t/font_1634400_9yg8f5s278.woff2') format('woff2'),
|
||||
url('//at.alicdn.com/t/font_1634400_9yg8f5s278.woff') format('woff'),
|
||||
url('//at.alicdn.com/t/font_1634400_9yg8f5s278.ttf') format('truetype'),
|
||||
url('//at.alicdn.com/t/font_1634400_9yg8f5s278.svg#iconfont') format('svg');
|
||||
}
|
||||
.iconfont {
|
||||
font-family:"iconfont" !important;
|
||||
font-size:16px;font-style:normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-text-stroke-width: 0.2px;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* header */
|
||||
header {
|
||||
width: 100%;
|
||||
/*height: 88px;*/
|
||||
line-height: 48px;
|
||||
font-size: 16px;
|
||||
background-color: #0078D4;
|
||||
}
|
||||
header nav {
|
||||
margin: 0 auto;
|
||||
padding: 0 10px;
|
||||
height: 48px;
|
||||
color: #FFF;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
header nav a {
|
||||
color: #FFF;
|
||||
font-weight: 600;
|
||||
}
|
||||
header nav .lang .language { outline: none; }
|
||||
header .control {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
header .control .control-item {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
/* main */
|
||||
main {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
main .scroll {
|
||||
overflow-y: scroll;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
main .main-item-list {
|
||||
padding-left: 32px;
|
||||
padding-right: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
font-size: 12px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
main .main-title h1 {
|
||||
margin: 0;
|
||||
padding: 32px;
|
||||
font-size: 20px;
|
||||
font-weight: 100;
|
||||
}
|
||||
main .main-items:hover {
|
||||
background-color: #F4F4F4;
|
||||
}
|
||||
main .main-items:hover .main-items-radio {
|
||||
display: inline-block!important;
|
||||
}
|
||||
main .main-item-list .inner-container {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
border-bottom: 1px solid #FFF;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
main .main-item-list .inner-container > div {
|
||||
padding-left: 12px;
|
||||
padding-right: 8px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
main .main-item-list .main-item-title {
|
||||
border-bottom: 1px solid #EAEAEA;
|
||||
}
|
||||
main .main-item-list .main-items-radio-box {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
main .main-item-list .main-items-radio-box .main-items-radio {
|
||||
display: none;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
main .main-item-list .main-items-radio-box .main-items-radio[currstatus=true] {
|
||||
display: block;
|
||||
}
|
||||
main .main-item-list .main-items-icon {
|
||||
min-width: 38px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
}
|
||||
main .main-item-title .main-items-icon {
|
||||
height: 32px!important;
|
||||
line-height: 9px!important;
|
||||
}
|
||||
main .main-item-title .main-items-icon:hover,
|
||||
main .main-item-list .main-items-displayName:hover,
|
||||
main .main-item-list .main-items-dateModified:hover,
|
||||
main .main-item-list .main-items-size:hover {
|
||||
background-color: #EAEAEA;
|
||||
}
|
||||
main .main-item-list .main-items-icon .iconfont {
|
||||
font-size: 20px;
|
||||
}
|
||||
main .main-item-list .main-items-icon img {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
main .main-items {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
border-bottom: 1px solid #F4F4F4;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
main .main-item-list .main-items-displayName,
|
||||
main .main-item-list .main-items-fileName {
|
||||
width: 520px;
|
||||
}
|
||||
main .main-item-list .main-items-dateModified,
|
||||
main .main-item-list .main-items-dateTime {
|
||||
width: 250px;
|
||||
}
|
||||
main .main-item-list .main-items-size,
|
||||
main .main-item-list .main-items-fileSize {
|
||||
width: 180px;
|
||||
}
|
||||
main .main-item-list .main-items-radio-box,
|
||||
main .main-item-list .main-items-icon,
|
||||
main .main-item-list .main-items-fileName,
|
||||
main .main-item-list .main-items-dateTime,
|
||||
main .main-item-list .main-items-fileSize {
|
||||
padding: 11px 8px 11px 12px;
|
||||
height: 42px;
|
||||
line-height: 22px;
|
||||
font-family: "Microsoft Yahei UI", Verdana, Simsun, "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
box-sizing: border-box;
|
||||
/*overflow: hidden;*/
|
||||
}
|
||||
main .main-item-list .main-items-fileName a {
|
||||
color: inherit;
|
||||
}
|
||||
main .main-item-list .main-items-fileName a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.main-title-path a{vertical-align: middle;}
|
||||
.more-disk{
|
||||
vertical-align: middle;
|
||||
overflow: hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
max-width: 100px;
|
||||
}
|
||||
.more-disk div{
|
||||
list-style:none;
|
||||
position:absolute;
|
||||
display:none;background:#ffffff;border-radius:5px;margin:0 0 0 -10px;/*padding:0 7px;*/color:#205D67;z-index:1;
|
||||
box-shadow: 0 0.5em 3em rgba(161,177,204,.4);
|
||||
}
|
||||
.more-disk:hover div{display:block}
|
||||
.more-disk div li{line-height:normal;padding: 3px 10px;}
|
||||
.more-disk div li a{text-decoration: none; color:rgba(0,0,0,.3);}
|
||||
.more-disk div li a:hover{color:rgba(0,0,0,.87);}
|
||||
.more-disk div li a[now]{color:rgba(0,0,0,1);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav class="container">
|
||||
<div class="title pull-left">
|
||||
<a href="<!--base_path-->"><!--Sitename--></a>
|
||||
</div>
|
||||
<div class="pull-right">
|
||||
<!--LoginStart-->
|
||||
<a class="pull-left" onclick="/*login();*/"><!--constStr@Login--></a>
|
||||
<!--LoginEnd-->
|
||||
<!--AdminStart-->
|
||||
<a class="pull-left" onclick="logout();"><!--constStr@Logout--></a>
|
||||
<!--AdminEnd-->
|
||||
|
|
||||
<div class="pull-right lang">
|
||||
<select name="language" id="language" class="language" onchange="changelanguage(this.options[this.options.selectedIndex].value)">
|
||||
<option value="">Language</option>
|
||||
<!--SelectLanguageStart-->
|
||||
<option value="<!--SelectLanguageKey-->" <!--SelectLanguageSelected-->><!--SelectLanguageValue--></option>
|
||||
<!--SelectLanguageEnd-->
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!--AdminStart-->
|
||||
<div class="control">
|
||||
<div class="container">
|
||||
<div class="control-item">
|
||||
<button class="control-items">
|
||||
<i class="iconfont control-items-icon"></i>
|
||||
<span class="control-items-content"><!--constStr@Create--></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--AdminEnd-->
|
||||
</header>
|
||||
<main>
|
||||
<!--ListStart-->
|
||||
<div class="scroll">
|
||||
<div class="container">
|
||||
<div class="main-title">
|
||||
<h1 class="main-title-path">
|
||||
<!--MultiDiskAreaStart-->
|
||||
<div class="more-disk">
|
||||
<span><!--DiskNameNow--></span>
|
||||
<div>
|
||||
<!--MultiDisksStart-->
|
||||
<li><a href="<!--MultiDisksUrl-->" <!--MultiDisksNow-->><!--MultiDisksName--></a></li>
|
||||
<!--MultiDisksEnd-->
|
||||
</div>
|
||||
</div>
|
||||
>
|
||||
<!--MultiDiskAreaEnd-->
|
||||
<a href="<!--base_disk_path-->/"><!--constStr@Home--></a>
|
||||
<!--PathArrayStart-->
|
||||
>
|
||||
<a href="<!--PathArrayLink-->"><!--PathArrayName--></a>
|
||||
<!--PathArrayEnd-->
|
||||
</h1>
|
||||
</div>
|
||||
<!--IsFileStart-->
|
||||
<div class="main-item-list">
|
||||
<div class="main-items main-item-title">
|
||||
<div class="inner-container">
|
||||
<div>
|
||||
<div style="margin: 24px">
|
||||
<textarea id="url" title="url" rows="1" style="width: 100%; margin-top: 2px;" readonly><!--FileEncodeUrl--></textarea>
|
||||
<a href="<!--FileUrl-->"><ion-icon name="download" style="line-height: 16px;vertical-align: middle;"></ion-icon> <!--constStr@Download--></a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<!--IsimgFileStart-->
|
||||
<img src="<!--FileDownUrl-->" alt="<!--FileName-->" onload="if (this.offsetWidth>document.getElementById('url').offsetWidth) this.style.width='100%';" />
|
||||
<!--IsimgFileEnd-->
|
||||
<!--IsvideoFileStart-->
|
||||
<div id="video-a0"></div>
|
||||
<!--IsvideoFileEnd-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--IsFileEnd-->
|
||||
<!--IsFolderStart-->
|
||||
<div class="main-item-list">
|
||||
<div class="main-items main-item-title">
|
||||
<div class="inner-container">
|
||||
<!--AdminStart-->
|
||||
<div class="main-items-radio-box">
|
||||
<!-- <input class="main-items-radio main-items-check-all" type="radio" name="" id=""> -->
|
||||
</div>
|
||||
<!--AdminEnd-->
|
||||
<div class="main-items-icon">
|
||||
<i class="iconfont"></i>
|
||||
</div>
|
||||
<div class="main-items-displayName"><!--constStr@File--></div>
|
||||
<div class="main-items-dateModified"><!--constStr@EditTime--></div>
|
||||
<div class="main-items-size"><!--constStr@Size--></div>
|
||||
</div>
|
||||
</div>
|
||||
<!--FolderListStart-->
|
||||
<div class="main-items">
|
||||
<!--AdminStart-->
|
||||
<div class="main-items-radio-box">
|
||||
<input class="main-items-radio" type="radio" checked name="file" id="">
|
||||
</div>
|
||||
<!--AdminEnd-->
|
||||
<div class="main-items-icon">
|
||||
<img src="https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/20/folder.svg" alt="folder icon">
|
||||
</div>
|
||||
<div class="main-items-fileName">
|
||||
<a href="<!--FileEncodeReplaceUrl-->/"><!--FileEncodeReplaceName--></a>
|
||||
</div>
|
||||
<div class="main-items-dateTime" ><!--lastModifiedDateTime--></div>
|
||||
<div class="main-items-fileSize" ><!--size--></div>
|
||||
</div>
|
||||
<!--FolderListEnd-->
|
||||
<!--FileListStart-->
|
||||
<div class="main-items">
|
||||
<!--AdminStart-->
|
||||
<div class="main-items-radio-box">
|
||||
<input class="main-items-radio" type="radio" checked name="file" id="">
|
||||
</div>
|
||||
<!--AdminEnd-->
|
||||
<div class="main-items-icon">
|
||||
<i class="iconfont"></i>
|
||||
</div>
|
||||
<div class="main-items-fileName">
|
||||
<a href="<!--FileEncodeReplaceUrl-->?preview" target="_blank"><!--FileEncodeReplaceName--></a>
|
||||
</div>
|
||||
<div class="main-items-dateTime" ><!--lastModifiedDateTime--></div>
|
||||
<div class="main-items-fileSize" ><!--size--></div>
|
||||
</div>
|
||||
<!--FileListEnd-->
|
||||
</div>
|
||||
<!--IsFolderEnd-->
|
||||
</div>
|
||||
</div>
|
||||
<!--ListEnd-->
|
||||
</main>
|
||||
<footer>
|
||||
<!-- OneDrive程序 -->
|
||||
</footer>
|
||||
<div id="mask" class="mask" style="display:none;"></div>
|
||||
<!--LoginStart-->
|
||||
<div id="login_div" class="operatediv" style="display:none">
|
||||
<div style="margin:50px">
|
||||
<a onclick="operatediv_close('login')" class="operatediv_close"><!--constStr@Close--></a>
|
||||
<center>
|
||||
<form action="<!--IsPreview?-->admin" method="post">
|
||||
<input id="login_input" name="password1" type="password" placeholder="<!--constStr@InputPassword-->">
|
||||
<input type="submit" value="<!--constStr@Login-->">
|
||||
</form>
|
||||
</center>
|
||||
</div>
|
||||
</div>
|
||||
<!--LoginEnd-->
|
||||
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
|
||||
<script>
|
||||
window.onload = function ()
|
||||
{
|
||||
// 获取所有radios元素
|
||||
var allRadios = document.getElementsByClassName("main-items-radio");
|
||||
RegisterRadioClick(allRadios);
|
||||
}
|
||||
|
||||
// 为所有radio注册点击事件
|
||||
function RegisterRadioClick(radios)
|
||||
{
|
||||
if (radios != null)
|
||||
{
|
||||
var radio;
|
||||
for (var i = 0; i < radios.length ; i++)
|
||||
{
|
||||
// 获取单个radio元素
|
||||
radio = radios[i];
|
||||
// 为每个radio元素设置当前状态为：False
|
||||
//radio.setAttribute("currStatus", "false");
|
||||
// 页面刚加载后，取消因缓存的checked属性
|
||||
radio.checked = false;
|
||||
// 为页面中每个radio元素注册点击事件
|
||||
radio.onclick = function()
|
||||
{
|
||||
// 获取当前点击对象的自定义属性
|
||||
var currStatus = this.getAttribute("currStatus");
|
||||
AllRadioCurrentStatus2False(radios);
|
||||
if (currStatus === "true")
|
||||
{
|
||||
AllRadioCurrentStatus2False(radios);
|
||||
this.setAttribute("currStatus", false);
|
||||
this.checked = false;
|
||||
}
|
||||
else
|
||||
{
|
||||
this.setAttribute("currStatus", true);
|
||||
this.checked = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 把页面里所有radio元素自定义属性变成为false
|
||||
// 不然会出现需要点击两次才会被选中
|
||||
function AllRadioCurrentStatus2False(radios)
|
||||
{
|
||||
for (var i = 0; i < radios.length; i++)
|
||||
{
|
||||
radios[i].setAttribute("currStatus", false);
|
||||
}
|
||||
}
|
||||
function changelanguage(str)
|
||||
{
|
||||
if (str=='Language') str = '';
|
||||
document.cookie='language='+str+'; path=/';
|
||||
location.href = location.href;
|
||||
}
|
||||
<!--ListStart-->
|
||||
/*var root = '<!--base_disk_path-->';
|
||||
function path_format(path) {
|
||||
path = '/' + path + '/';
|
||||
while (path.indexOf('//') !== -1) {
|
||||
path = path.replace('//', '/')
|
||||
}
|
||||
return path
|
||||
}
|
||||
document.querySelectorAll('.main-title-path').forEach(function (e) {
|
||||
var path = e.innerText;
|
||||
if (path.substr(path.length-1)=='/') path = path.substr(0, path.length-1);
|
||||
var paths = path.split('/');
|
||||
e.innerHTML = '<a href="' + root + '"><!--constStr@Home--></a> > ';
|
||||
if (paths <= 2) return;
|
||||
for (var i = 1; i < paths.length - 1; i++) {
|
||||
var to = path_format(root + paths.slice(0, i + 1).join('/'));
|
||||
e.innerHTML += '<a href="' + to + '">' + paths[i] + '</a> > '
|
||||
}
|
||||
e.innerHTML += paths[paths.length - 1];
|
||||
e.innerHTML = e.innerHTML.replace(/\s\/\s$/, '')
|
||||
});*/
|
||||
<!--IsFileStart-->
|
||||
var $url = document.getElementById('url');
|
||||
if ($url) {
|
||||
$url.innerHTML = location.protocol + '//' + location.host + $url.innerHTML;
|
||||
$url.style.height = $url.scrollHeight + 'px';
|
||||
}
|
||||
<!--IsvideoFileStart-->
|
||||
function loadResources(type, src, callback) {
|
||||
let script = document.createElement(type);
|
||||
let loaded = false;
|
||||
if (typeof callback === 'function') {
|
||||
script.onload = script.onreadystatechange = () => {
|
||||
if (!loaded && (!script.readyState || /loaded|complete/.test(script.readyState))) {
|
||||
script.onload = script.onreadystatechange = null;
|
||||
loaded = true;
|
||||
callback();
|
||||
}
|
||||
}
|
||||
}
|
||||
if (type === 'link') {
|
||||
script.href = src;
|
||||
script.rel = 'stylesheet';
|
||||
} else {
|
||||
script.src = src;
|
||||
}
|
||||
document.getElementsByTagName('head')[0].appendChild(script);
|
||||
}
|
||||
function addVideos(videos) {
|
||||
let host = 'https://s0.pstatp.com/cdn/expire-1-M';
|
||||
let unloadedResourceCount = 4;
|
||||
let callback = (() => {
|
||||
return () => {
|
||||
if (!--unloadedResourceCount) {
|
||||
createDplayers(videos);
|
||||
}
|
||||
};
|
||||
})(unloadedResourceCount, videos);
|
||||
loadResources(
|
||||
'link',
|
||||
host + '/dplayer/1.25.0/DPlayer.min.css',
|
||||
callback
|
||||
);
|
||||
loadResources(
|
||||
'script',
|
||||
host + '/dplayer/1.25.0/DPlayer.min.js',
|
||||
callback
|
||||
);
|
||||
loadResources(
|
||||
'script',
|
||||
host + '/hls.js/0.12.4/hls.light.min.js',
|
||||
callback
|
||||
);
|
||||
loadResources(
|
||||
'script',
|
||||
host + '/flv.js/1.5.0/flv.min.js',
|
||||
callback
|
||||
);
|
||||
}
|
||||
function createDplayers(videos) {
|
||||
for (i = 0; i < videos.length; i++) {
|
||||
console.log(videos[i]);
|
||||
new DPlayer({
|
||||
container: document.getElementById('video-a' + i),
|
||||
screenshot: true,
|
||||
video: {
|
||||
url: videos[i]
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
addVideos(['<!--FileDownUrl-->']);
|
||||
<!--IsvideoFileEnd-->
|
||||
<!--IsFileEnd-->
|
||||
<!--ListEnd-->
|
||||
<!--AdminStart-->
|
||||
function logout() {
|
||||
document.cookie = "admin=; path=/";
|
||||
location.href = location.href;
|
||||
}
|
||||
<!--AdminEnd-->
|
||||
<!--LoginStart-->
|
||||
function login() {
|
||||
document.getElementById('mask').style.display='';
|
||||
//document.getElementById('mask').style.width=document.documentElement.scrollWidth+'px';
|
||||
document.getElementById('mask').style.height=document.documentElement.scrollHeight<window.innerHeight?window.innerHeight:document.documentElement.scrollHeight+'px';
|
||||
document.getElementById('login_div').style.display='';
|
||||
document.getElementById('login_div').style.left=(document.body.clientWidth-document.getElementById('login_div').offsetWidth)/2 +'px';
|
||||
document.getElementById('login_div').style.top=(window.innerHeight-document.getElementById('login_div').offsetHeight)/2+document.body.scrollTop +'px';
|
||||
document.getElementById('login_input').focus();
|
||||
}
|
||||
<!--LoginEnd-->
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue