macUI/demo.html

234 lines
13 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<title>macOS</title>
<meta name="description" content="mac桌面">
<meta name="keywords" content="mac桌面">
<link rel='Shortcut Icon' type='image/x-icon' href='./img/favicon.ico'>
<link href="./css/animate.css" rel="stylesheet">
<link rel="stylesheet" href="./component/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./plugins/shortcut-drawer/shortcut-drawer.min.css">
</head>
<body>
<div id="win10">
<div id="win10_task_bar" class="backgroud_blur">
<div id="win10_btn_group_left" class="btn_group">
<div id="win10_btn_win" class="btn"><span class="fa fa-apple"></span></div>
<div class="btn"
onclick="Win10.openUrl('./app/safari','<span class=\'icon fa fa-safari\'></span>','safari')"><span
class="fa fa-safari"></span></div>
</div>
<div id="win10_btn_group_middle" class="btn_group"></div>
<div id="win10_btn_group_right" class="btn_group">
<div class="btn" id="win10_btn_time"></div>
<div class="btn" id="win10_btn_command"><span id="win10-msg-nof" class="fa fa-list-ul"></span></div>
<div class="btn" id="win10_btn_show_desktop"></div>
</div>
</div>
<div class="desktop">
<div id="win10-shortcuts" class="shortcuts-hidden">
<div class="shortcut"
onclick="Win10.openUrl('http://mac.apecloud.cn','<img class=\'icon\' src=\'./img/icon/computer.png\'/>','OS官网')">
<img class="icon" src="./img/icon/computer.png" />
<div class="title">OS官网</div>
</div>
<div class="shortcut"
onclick="Win10.openUrl('http://win10ui.yuri2.cn','<img class=\'icon\' src=\'./img/icon/trashicon.png\'/>','回收站')">
<img class="icon" src="./img/icon/trashicon.png" />
<div class="title">回收站</div>
</div>
<div class="shortcut"
onclick="Win10.openUrl('https://developer.apple.com/game-center','<img class=\'icon\' src=\'./img/icon/gamecenter.png\'/>','GameCenter')">
<img class="icon" src="./img/icon/gamecenter.png" />
<div class="title">GameCenter</div>
</div>
<div class="shortcut"
onclick="Win10.openUrl('./app/calendar','<img class=\'icon\' src=\'./img/icon/calendar.png\'/>','Calendar',[['910px','675px'],'auto'])">
<img class="icon" src="./img/icon/calendar.png" />
<div class="title">Calendar</div>
</div>
<div class="shortcut" onclick="window.open('https://www.icloud.com/')">
<img class="icon" src="./img/icon/icloud.png" />
<div class="title">iCloud</div>
</div>
<div class="shortcut"
onclick="Win10.openUrl('https://map.baidu.com','<img class=\'icon\' src=\'./img/icon/maps.png\'/>','Map')">
<img class="icon" src="./img/icon/maps.png" />
<div class="title">地图</div>
</div>
<div class="shortcut"
onclick="window.open('https://github.com/yuri2peter/win10-ui/archive/master.zip')">
<img class="icon" src="./img/icon/prefapp.png" />
<div class="title">设置</div>
</div>
<div class="shortcut"
onclick="window.open('./login.html','<i class=\'fa fa-user icon black-green\'></i>','登录页')">
<i class="fa fa-user icon black-green"></i>
<div class="title">登录页</div>
</div>
<div class="shortcut win10-open-window flipInX animated"
data-url="./plugins/theme_switcher/theme_switcher.html" style="left: 92px; top: 510px;">
<img class="icon" src="./img/icon/DesktopScreenEffectsPref.png" />
<div class="title">切换壁纸</div>
</div>
<div class="shortcut win10-drawer">
<img class="icon" src="./img/icon/folder.png" />
<div class="title">新建文件夹</div>
<div class="win10-drawer-box">
<div class="shortcut-drawer win10-drawer">
<img class="icon" src="./img/icon/folder.png" />
<div class="title">新建文件夹</div>
<div class="win10-drawer-box">
<div class="shortcut-drawer win10-open-window" data-url="www.baidu.com">
<i class="icon fa fa-fw fa-th-list orange"></i>
<div class="title">子项1</div>
</div>
</div>
</div>
<div class="shortcut-drawer win10-open-window" data-url="www.baidu.com">
<i class="icon fa fa-fw fa-th-list orange"></i>
<div class="title">子项1</div>
</div>
<div class="shortcut-drawer">
<i class="icon fa fa-fw fa-th-list orange"></i>
<div class="title">子项2</div>
</div>
</div>
</div>
</div>
<div class="background blur"></div>
</div>
<div id="win10-menu" class="hidden backgroud_blur">
<div class="list win10-menu-hidden animated animated-slideOutLeft">
<div class="item"><i class="icon fa fa-wrench fa-fw"></i><span>API测试</span></div>
<div class="sub-item"
onclick="Win10.openUrl('./child.html','<span class=\'icon fa fa-cubes\'></span>','子页')">父子页沟通</div>
<div class="sub-item" onclick="Win10.commandCenterOpen()">打开消息中心</div>
<div class="sub-item"
onclick="Win10.newMsg('API测试','通过API可以发送消息至消息中心自定义标题与内容(点击我试试)',function() {alert('click')})">
发送带回调的消息</div>
<div class="sub-item" onclick="Win10.menuClose()">关闭菜单</div>
<div class="item"><i class="icon fa fa-gavel fa-fw"></i>辅助工具</div>
<div class="sub-item"
onclick="Win10.openUrl('win10ui.yuri2.cn/src/tools/builder-shortcut.html','<span class=\'icon fa fa-cubes\'></span>','图标代码生成器')">
桌面图标代码生成器</div>
<div class="sub-item"
onclick="Win10.openUrl('win10ui.yuri2.cn/src/tools/builder-tile.html','<span class=\'icon fa fa-cubes\'></span>','磁贴代码生成器')">
磁贴代码生成器</div>
<div class="sub-item"
onclick="Win10.openUrl('win10ui.yuri2.cn/src/tools/builder-menu.html','<span class=\'icon fa fa-cubes\'></span>','菜单代码生成器')">
菜单代码生成器</div>
<div class="item" onclick="Win10.aboutUs()"><i class="icon fa fa-star fa-fw"></i>关于</div>
<div class="item" onclick=" Win10.exit();"><i class="icon fa fa-power-off fa-fw"></i>关闭</div>
</div>
</div>
<div id="win10_command_center" class="hidden_right backgroud_blur">
<div class="command-header">
<div class="tab-today active">今天</div>
<div class="tab-msg">通知</div>
</div>
<div class="command-body today"></div>
<!-- <span id="win10_btn_command_center_clean_all">全部清除</span> -->
<div class="command-body msgs"></div>
</div>
<div id="footer">
<div class="dock backgroud_blur">
<ul>
<li><span class="dock-tips">finder<span class="arrow"></span></span><a
onclick="Win10.openUrl('./app/finder','<img class=\'icon\' src=\'./img/icon/finder.png\'/>','finder')">
<img src="./img/icon/finder.png"></a></li>
<li><span class="dock-tips">computer<span class="arrow"></span></span><a
onclick="Win10.openUrl('http://mac.apecloud.cn','<img class=\'icon\' src=\'./img/icon/computer.png\'/>','我的电脑')">
<img src="./img/icon/computer.png"></a></li>
<li><span class="dock-tips">gamecenter<span class="arrow"></span></span><a href="#"> <img
src="./img/icon/gamecenter.png"></a></li>
<li><span class="dock-tips">icloud<span class="arrow"></span></span><a href="#"> <img
src="./img/icon/icloud.png"></a></li>
<li><span class="dock-tips">prefapp<span class="arrow"></span></span><a href="#"> <img
src="./img/icon/prefapp.png"></a></li>
<li><span class="dock-tips">trashicon<span class="arrow"></span></span><a href="#"> <img
src="./img/icon/trashicon.png"></a></li>
<li><span class="dock-tips">appstore<span class="arrow"></span></span><a href="#"> <img
src="./img/icon/appstore.png"></a></li>
<li><span class="dock-tips">iTunes<span class="arrow"></span></span><a href="#"> <img
src="./img/icon/iTunes.png"></a></li>
<li><span class="dock-tips">imusic<span class="arrow"></span></span><a href="#"> <img
src="./img/icon/imusic.png"></a></li>
<li><span class="dock-tips">preview<span class="arrow"></span></span><a href="#"> <img
src="./img/icon/preview.png"></a></li>
<li><span class="dock-tips">mail<span class="arrow"></span></span><a href="#"> <img
src="./img/icon/mail.png"></a></li>
<li><span class="dock-tips">notes.png<span class="arrow"></span></span><a href="#"> <img
src="./img/icon/notes.png"></a></li>
<li><span class="dock-tips">messages<span class="arrow"></span></span><a href="#"> <img
src="./img/icon/messages.png"></a></li>
<li><span class="dock-tips">maps<span class="arrow"></span></span><a href="#"> <img
src="./img/icon/maps.png"></a></li>
<li><span class="dock-tips">ibooks<span class="arrow"></span></span><a href="#"> <img
src="./img/icon/ibooks.png"></a></li>
<li><span class="dock-tips">facetime<span class="arrow"></span></span><a href="#"> <img
src="./img/icon/facetime.png"></a></li>
<li><span class="dock-tips">launchpad<span class="arrow"></span></span><a href="#"> <img
src="./img/icon/launchpad.png"></a></li>
</ul>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="./js/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="./component/layer-v3.1.1/layer/layer.js"></script>
<script type="text/javascript" src="./js/mac.min.js"></script>
<link rel="stylesheet" href="./plugins/shortcut-drawer/shortcut-drawer.min.css">
<script type="text/javascript" src="./plugins/shortcut-drawer/shortcut-drawer.min.js"></script>
<script>
Win10.onReady(function () {
//设置壁纸
Win10.setBgUrl({
main: './img/wallpapers/main.jpg',
mobile: './img/wallpapers/mobile.jpg',
});
Win10.setAnimated([
'animated flip',
'animated bounceIn',
], 0.01);
setTimeout(function () {
Win10.newMsg('推荐全屏', '按下F11全屏以达到最佳视觉效果(点击进入)', function () {
Win10.enableFullScreen();
});
Win10.newMsg('最新资讯', '最新资讯信息', function () {
layer.open({
type: 2,
title: '最新资讯',
area: ['300px', '380px'],
shade: 0,
skin: 'win10-open-iframe',
offset: 'rb',
content: './broadcast.html'
});
});
}, 1500);
setTimeout(function () {
layer.open({
type: 2,
title: '最新资讯',
area: ['300px', '380px'],
shade: 0,
skin: 'win10-open-iframe',
offset: 'rb',
content: 'broadcast.html'
})
}, 2000);
});
</script>
</html>