mirror of
https://github.com/hanzoai/jube-fork.git
synced 2026-11-02 14:29:36 +00:00
373 lines
12 KiB
HTML
Executable File
373 lines
12 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Overview</title>
|
|
<meta charset="utf-8">
|
|
<link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
|
|
<link href="../../styles/kendo.common.min.css" rel="stylesheet">
|
|
<link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
|
|
<link href="../../styles/kendo.default.min.css" rel="stylesheet">
|
|
<link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
|
|
<script src="../../js/jquery.min.js"></script>
|
|
<script src="../../js/jszip.min.js"></script>
|
|
<script src="../../js/kendo.all.min.js"></script>
|
|
<script src="../content/shared/js/console.js"></script>
|
|
<script>
|
|
|
|
</script>
|
|
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<a class="offline-button" href="../index.html">Back</a>
|
|
|
|
<div id="example">
|
|
<div class="demo-section k-content wide">
|
|
<div class="demo-app" style="position:relative">
|
|
<div id="inbox" class="demo-view" style="position:absolute">
|
|
<div class="title" style="padding-bottom:48px">
|
|
<h3>Mail Inbox</h3>
|
|
</div>
|
|
<div class="inbox-content">
|
|
<div class="content-wrap">
|
|
<div class="names-ab-wrapper" style="background: #21CA9C 0% 0% no-repeat padding-box;">
|
|
<span class="names-ab">AB</span>
|
|
</div>
|
|
<div class="p-main">
|
|
Hi Tom, Since Monday I'll be out of office, I'm rescheduling the meeting for Tuesday.
|
|
</div>
|
|
</div>
|
|
<hr style="margin:30px 0">
|
|
<div class="time-heading">
|
|
Last Week
|
|
</div>
|
|
<div class="content-wrap">
|
|
|
|
<div class="names-ab-wrapper" style="background: #00AEEF 0% 0% no-repeat padding-box;">
|
|
<span class="names-ab">TY</span>
|
|
</div>
|
|
<div class="p-main">
|
|
Hi Tom, my aunt comes for a visit this Saturday, so I can't come back to St. Pete...
|
|
</div>
|
|
</div>
|
|
<div class="content-wrap" style="padding-top:33px">
|
|
|
|
<div class="names-ab-wrapper" style="background: #AA46BE 0% 0% no-repeat padding-box;">
|
|
<span class="names-ab">IH</span>
|
|
</div>
|
|
<div class="p-main">
|
|
Dear All, <br>We would like to inform you that IT will be doing planned upgrades...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="calendar" class="demo-view" style="display:none">
|
|
<div id="calendar-content">
|
|
<div class="title" style="padding-bottom:48px">
|
|
<h3>Calendar</h3>
|
|
</div>
|
|
<div id="calendar-days-content">
|
|
<div class="calendar-day">
|
|
<div class="calendar-day-h">
|
|
11/5 Monday
|
|
</div>
|
|
<div class="calendar-entry" style="margin-bottom:30px">
|
|
<span class="light-text">
|
|
16:00
|
|
</span>
|
|
<span style="border-left:2px solid #FF6358;height:23px;margin-left: 20px;margin-right: 12px;"></span>
|
|
<span class="calendar-event">
|
|
Job interview for internal position
|
|
</span>
|
|
</div>
|
|
<div class="calendar-entry">
|
|
<span class="light-text">
|
|
21:00
|
|
</span>
|
|
<span style="border-left:2px solid #28B4C8;height:23px;margin-left: 20px; margin-right: 12px;"></span>
|
|
<span class="calendar-event">
|
|
Martha Birthday
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="calendar-day">
|
|
<div class="calendar-day-h">
|
|
Tomorrow
|
|
</div>
|
|
<div class="light-text" style="margin-left:74px; margin-top:35px">
|
|
No upcoming events
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="profile" class="demo-view" style="display:none; position:absolute">
|
|
<div class="title">
|
|
<h3>My Profile</h3>
|
|
</div>
|
|
<div id="profile-content">
|
|
<div id="avatar">
|
|
<img src="../content/web/avatar.png" width="128" height="128" />
|
|
</div>
|
|
<div class="username">
|
|
[email protected]
|
|
</div>
|
|
<hr style="margin-top:40px; margin-bottom:15px">
|
|
<div class="profile-cal">
|
|
<div style="margin-bottom:20px">Calendars</div>
|
|
|
|
<div class="profile-cal-entry">
|
|
<div class="entry-color" style="background-color:#FF6358">
|
|
</div>
|
|
<div class="entry-title">
|
|
Work
|
|
</div>
|
|
<div class="entry-icon">
|
|
<span class="k-icon k-i-saturation"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="profile-cal-entry">
|
|
<div class="entry-color" style="background-color:#28B4C8">
|
|
</div>
|
|
<div class="entry-title">
|
|
Family
|
|
</div>
|
|
<div class="entry-icon">
|
|
<span class="k-icon k-i-saturation"></span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="profile-cal-entry">
|
|
<div class="entry-color" style="background-color:#FFC000">
|
|
</div>
|
|
<div class="entry-title">
|
|
Birthdays
|
|
</div>
|
|
<div class="entry-icon">
|
|
<span class="k-icon k-i-saturation"></span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<nav id="bottomNavigation" style="bottom: 0; "></nav>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
$(document).ready(function () {
|
|
var itemTemplate = '<span class="k-bottom-nav-item-icon k-icon k-i-email"></span><span class="k-bottom-nav-item-text">Inbox</span><span id="badge-inbox"></span>'
|
|
$("#bottomNavigation").kendoBottomNavigation({
|
|
positionMode: "absolute",
|
|
items: [
|
|
{ text: "Inbox", template: itemTemplate, data: { view: "inbox" }, icon: "email", selected: true },
|
|
{ text: "Calendar", data: { view: "calendar" }, icon: "calendar-date" },
|
|
{ text: "Profile", data: { view: "profile" }, icon: "user" }
|
|
],
|
|
select: function (e) {
|
|
var id = e.data.view
|
|
$(".demo-view").hide();
|
|
$("#" + id).show();
|
|
}
|
|
});
|
|
|
|
$('#badge-inbox').kendoBadge({
|
|
themeColor: 'info',
|
|
shape: 'circle',
|
|
position: "inside",
|
|
align: "top start",
|
|
text: "1"
|
|
});
|
|
})
|
|
</script>
|
|
</div>
|
|
|
|
<style>
|
|
import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');
|
|
media screen and (min-width:0\0) {
|
|
#badge-inbox {
|
|
top: 4px !important;
|
|
left: 65px !important;
|
|
}
|
|
|
|
.names-ab-wrapper {
|
|
min-width: 30px;
|
|
}
|
|
}
|
|
#badge-inbox {
|
|
top: 2px;
|
|
left: 55px;
|
|
}
|
|
|
|
.demo-app {
|
|
margin: auto;
|
|
width: 382px;
|
|
height: 814px;
|
|
background: #FFFFFF;
|
|
box-shadow: 0px 10px 20px #00000016;
|
|
border-radius: 30px;
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.demo-app .title {
|
|
width: 100%;
|
|
}
|
|
|
|
.time-heading {
|
|
font-weight: 500;
|
|
color: black;
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
#inbox, #calendar, #profile {
|
|
background: #F9F9F9;
|
|
height: inherit;
|
|
width: inherit;
|
|
border-radius: 30px;
|
|
border: 10px solid white;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.p-main {
|
|
letter-spacing: 0.14px;
|
|
color: #656565;
|
|
}
|
|
.content-wrap:first-of-type > .p-main {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.demo-app h3 {
|
|
padding-top: 24px;
|
|
text-align: center;
|
|
font-size: 28px;
|
|
letter-spacing: 0.28px;
|
|
color: #3D57D8;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.inbox-content {
|
|
padding-left: 17px;
|
|
padding-right: 17px;
|
|
}
|
|
|
|
.content-wrap {
|
|
display: inline-flex;
|
|
}
|
|
.names-ab-wrapper {
|
|
border-radius: 20px;
|
|
width: 30px;
|
|
height: 30px;
|
|
margin-right: 25px;
|
|
}
|
|
|
|
.names-ab {
|
|
width: inherit;
|
|
height: inherit;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
letter-spacing: 0.14px;
|
|
color: #FFFFFF;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.demo-app hr {
|
|
border: 0.1px solid lightgray;
|
|
}
|
|
|
|
#calendar-content {
|
|
position: absolute;
|
|
width: 100%;
|
|
max-width: 365px;
|
|
}
|
|
#calendar-days-content {
|
|
margin-left: 15px;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.calendar-day-h {
|
|
background: #EDEDED;
|
|
font-weight: 600;
|
|
color: black;
|
|
padding: 5px;
|
|
margin-bottom: 17px;
|
|
margin-top: 30px;
|
|
padding-top: 7px;
|
|
padding-bottom: 7px;
|
|
}
|
|
|
|
.calendar-entry {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.light-text {
|
|
color: #BABABA;
|
|
}
|
|
|
|
#avatar {
|
|
justify-content: center;
|
|
display: flex;
|
|
}
|
|
|
|
.username {
|
|
font-weight: 600;
|
|
color: black;
|
|
text-align: center;
|
|
padding-top: 25px;
|
|
}
|
|
|
|
#profile-content {
|
|
padding-left: 15px;
|
|
padding-right: 15px;
|
|
}
|
|
|
|
.profile-cal {
|
|
color: #656565;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.profile-cal-entry {
|
|
display: flex;
|
|
}
|
|
|
|
.entry-title {
|
|
font-size: 12px;
|
|
color: black;
|
|
font-weight: 500;
|
|
padding-bottom: 22px;
|
|
}
|
|
|
|
.entry-color {
|
|
height: 15px;
|
|
width: 15px;
|
|
border-radius: 50%;
|
|
margin-right: 14px;
|
|
}
|
|
|
|
.entry-icon {
|
|
color: black;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.demo-app .k-bottom-nav-flat {
|
|
margin-left: 10px;
|
|
margin-bottom: 10px;
|
|
height: 70px;
|
|
max-width: 362px;
|
|
border-bottom-left-radius: 20px;
|
|
border-bottom-right-radius: 20px;
|
|
}
|
|
</style>
|
|
|
|
|
|
</body>
|
|
</html>
|