first commit
This commit is contained in:
597
src/templates/calendar.html
Normal file
597
src/templates/calendar.html
Normal file
@@ -0,0 +1,597 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>coconut-leaf Calendar</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.12.1/js/all.min.js"></script>
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="calendar.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav class="navbar has-shadow is-spaced bd-navbar" role="navigation" aria-label="main navigation">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="home">
|
||||
<img src="icon.png"><b style="margin:0 0 0 14px;">coconut-leaf</b>
|
||||
</a>
|
||||
|
||||
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false"
|
||||
data-target="navbarBasicExample">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div id="navbarBasicExample" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item" href="home">Calendar</a>
|
||||
<a class="navbar-item" href="home">Todo</a>
|
||||
<a class="navbar-item" href="about">About</a>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<p class="control">
|
||||
<a class="button is-primary" href="javascript:void(0);">Logout</a>
|
||||
</p>
|
||||
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link">Language</a>
|
||||
|
||||
<div class="navbar-dropdown">
|
||||
<a href="javascript:void(0);" class="navbar-item">English</a>
|
||||
<a href="javascript:void(0);" class="navbar-item">简体中文</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container" style="margin-top: 20px;">
|
||||
<div class="tabs">
|
||||
<ul>
|
||||
<li class="is-active"><a>Calendar</a></li>
|
||||
<li><a>Shared</a></li>
|
||||
<li><a>Sharing</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="tabcontrol-1-1" class="container" style="margin-top: 20px; display: none;">
|
||||
<nav class="level">
|
||||
<div class="level-item">
|
||||
<div class="field has-addons">
|
||||
<div class="control">
|
||||
<input class="input" type="date">
|
||||
</div>
|
||||
<div class="control">
|
||||
<button class="button is-info">Jump</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="level-item control">
|
||||
<a class="button is-info">Today</a>
|
||||
</div>
|
||||
<div class="level-item control">
|
||||
<a class="button is-primary">Add...</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div id="calendar-body" class="card" style="padding: 1.25rem; display: flex; flex-flow: column;">
|
||||
<div style="margin: 0 0 0.75em 0;">
|
||||
<div><b>Monday</b></div>
|
||||
<div><b>Tuesday</b></div>
|
||||
<div><b>Wednesday</b></div>
|
||||
<div><b>Thursday</b></div>
|
||||
<div><b>Friday</b></div>
|
||||
<div><b style="color: red;">Saturday</b></div>
|
||||
<div><b style="color: red;">Sunday</b></div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<p><b>1</b></p>
|
||||
<p><small>春分</small></p>
|
||||
<p><span class="icon is-small"><i class="fas fa-tasks"></i></span>114514</p>
|
||||
</div>
|
||||
<div>1</div>
|
||||
<div>1</div>
|
||||
<div>1</div>
|
||||
<div>1</div>
|
||||
<div>1</div>
|
||||
<div>1</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>1</div>
|
||||
<div>1</div>
|
||||
<div>1</div>
|
||||
<div>1</div>
|
||||
<div>1</div>
|
||||
<div>1</div>
|
||||
<div>1</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>1</div>
|
||||
<div>1</div>
|
||||
<div>1</div>
|
||||
<div>1</div>
|
||||
<div>1</div>
|
||||
<div>1</div>
|
||||
<div>1</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>1</div>
|
||||
<div>1</div>
|
||||
<div>1</div>
|
||||
<div>1</div>
|
||||
<div>1</div>
|
||||
<div>1</div>
|
||||
<div>1</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>1</div>
|
||||
<div>1</div>
|
||||
<div>1</div>
|
||||
<div>1</div>
|
||||
<div>1</div>
|
||||
<div>1</div>
|
||||
<div>1</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>1</div>
|
||||
<div>1</div>
|
||||
<div>1</div>
|
||||
<div>1</div>
|
||||
<div>1</div>
|
||||
<div>1</div>
|
||||
<div>1</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="padding: 1.25rem; display: flex; flex-flow: column; margin-top: 1.25rem;">
|
||||
<h1 class="title">Schedule</h1>
|
||||
|
||||
<div id="schedule-list">
|
||||
<div class="schedule-day container">
|
||||
<div class="schedule-day-words">
|
||||
<b>13</b>
|
||||
<b>Friday</b>
|
||||
</div>
|
||||
<div class="schedule-event-list">
|
||||
<div class="schedule-event card">
|
||||
<div class="schedule-event-words">
|
||||
<p class="level-item"><b>This is
|
||||
titleewwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</b>
|
||||
</p>
|
||||
<p class="level-item">this is
|
||||
subtitleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="schedule-event-icon">
|
||||
<span class="icon is-small"><i class="fas fa-lock"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="schedule-event card">
|
||||
<div class="schedule-event-words">
|
||||
<p class="level-item"><b>This is
|
||||
titleewwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</b>
|
||||
</p>
|
||||
<p class="level-item">this is
|
||||
subtitleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="schedule-event-icon">
|
||||
<span class="icon is-small"><i class="fas fa-lock"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="schedule-day container">
|
||||
<div class="schedule-day-words">
|
||||
<b>13</b>
|
||||
<b>Friday</b>
|
||||
</div>
|
||||
<div class="schedule-event-list">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="schedule-day container">
|
||||
<div class="schedule-day-words">
|
||||
<b>13</b>
|
||||
<b>Friday</b>
|
||||
</div>
|
||||
<div class="schedule-event-list">
|
||||
<div class="schedule-event card">
|
||||
<div class="schedule-event-words">
|
||||
<p class="level-item"><b>This is
|
||||
titleewwwwwwwwwwwwwwwwww</b>
|
||||
</p>
|
||||
<p class="level-item">this is
|
||||
subtitleeeeeeeeeewwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwweeeeeeeeeeeeeeeeeeeeee
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="schedule-event-icon">
|
||||
<span class="icon is-small"><i class="fas fa-lock"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="schedule-event card">
|
||||
<div class="schedule-event-words">
|
||||
<p class="level-item"><b>This is
|
||||
titleeww</b>
|
||||
</p>
|
||||
<p class="level-item">this is
|
||||
subtitleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="schedule-event-icon">
|
||||
<span class="icon is-small"><i class="fas fa-lock"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="tabcontrol-1-2" class="container" style="margin-top: 20px; display: none;">
|
||||
|
||||
<div class="container" style="display: flex; flex-flow: column;">
|
||||
<h1 class="title">Shared</h1>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<a class="button is-primary">
|
||||
<span class="icon is-small"><i class="fas fa-sync"></i></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; flex-flow: column;">
|
||||
<div class="collection-item card">
|
||||
<div class="collection-item-words">
|
||||
<b>this is a name</b>
|
||||
<p><span>Shared by: </span><span>yyc12345</span></p>
|
||||
</div>
|
||||
|
||||
<div class="collection-item-icon control">
|
||||
<a class="button"><span class="icon is-small"><i class="fas fa-eye"></i></span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collection-item card">
|
||||
<div class="collection-item-words">
|
||||
<b>this is a
|
||||
namewwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</b>
|
||||
<p><span>Shared by: </span><span>Diablo</span></p>
|
||||
</div>
|
||||
|
||||
<div class="collection-item-icon control">
|
||||
<a class="button"><span class="icon is-small"><i class="fas fa-eye-slash"></i></span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="tabcontrol-1-3" class="container" style="margin-top: 20px; display: none;">
|
||||
|
||||
<div class="container" style="display: flex; flex-flow: column;">
|
||||
<h1 class="title">Owned</h1>
|
||||
<div class="control-list">
|
||||
<div class="field has-addons">
|
||||
<div class="control">
|
||||
<input class="input" type="text">
|
||||
</div>
|
||||
<div class="control">
|
||||
<a class="button is-primary">
|
||||
<span class="icon is-small"><i class="fas fa-plus"></i></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control">
|
||||
<a class="button is-primary">
|
||||
<span class="icon is-small"><i class="fas fa-sync"></i></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; flex-flow: column; margin-top: 1.25rem;">
|
||||
<div class="collection-item card">
|
||||
<div class="collection-item-words">
|
||||
<p>this is a name</p>
|
||||
</div>
|
||||
|
||||
<div class="collection-item-icon control">
|
||||
<a class="button"><span class="icon is-small"><i class="fas fa-pen"></i></span></a>
|
||||
</div>
|
||||
<div class="collection-item-icon control">
|
||||
<a class="button"><span class="icon is-small"><i class="fas fa-trash"></i></span></a>
|
||||
</div>
|
||||
<div class="collection-item-icon control">
|
||||
<a class="button"><span class="icon is-small"><i class="fas fa-eye"></i></span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collection-item card">
|
||||
<div class="collection-item-words">
|
||||
<p>this is a
|
||||
namewwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="collection-item-icon control">
|
||||
<a class="button"><span class="icon is-small"><i class="fas fa-pen"></i></span></a>
|
||||
</div>
|
||||
<div class="collection-item-icon control">
|
||||
<a class="button"><span class="icon is-small"><i class="fas fa-trash"></i></a>
|
||||
</div>
|
||||
<div class="collection-item-icon control">
|
||||
<a class="button"><span class="icon is-small"><i class="fas fa-eye-slash"></i></span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="display: flex; flex-flow: column;">
|
||||
<h1 class="title">Sharing target</h1>
|
||||
<label class="label"><span>Editing: </span><span>xxx</span></label>
|
||||
|
||||
<div class="control-list">
|
||||
<div class="field has-addons">
|
||||
<div class="control">
|
||||
<input class="input" type="text">
|
||||
</div>
|
||||
<div class="control">
|
||||
<a class="button is-primary">
|
||||
<span class="icon is-small"><i class="fas fa-plus"></i></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control">
|
||||
<a class="button is-primary">
|
||||
<span class="icon is-small"><i class="fas fa-sync"></i></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; flex-flow: column; margin-top: 1.25rem;">
|
||||
<div class="collection-item card">
|
||||
<div class="collection-item-words">
|
||||
<p>yyc12345</p>
|
||||
</div>
|
||||
|
||||
<div class="collection-item-icon control">
|
||||
<a class="button"><span class="icon is-small"><i class="fas fa-trash"></i></span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collection-item card">
|
||||
<div class="collection-item-words">
|
||||
<p>boluo</p>
|
||||
</div>
|
||||
|
||||
<div class="collection-item-icon control">
|
||||
<a class="button"><span class="icon is-small"><i class="fas fa-trash"></i></span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!-- add is-active in class to show this-->
|
||||
<div class="modal" style="float: left; position: fixed; top: 0; bottom: 0; left: 0; right: 0;">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title">Modal title</p>
|
||||
<button class="delete" aria-label="close"></button>
|
||||
</header>
|
||||
<div class="modal-card-body" style="word-break: break-all;">
|
||||
<div class="field">
|
||||
<label class="label">Title</label>
|
||||
<div class="control">
|
||||
<input class="input" type="text">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">Description</label>
|
||||
<div class="control">
|
||||
<textarea class="textarea"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Collection</label>
|
||||
<div class="control">
|
||||
<div class="select">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label class="label">Start date</label>
|
||||
<div class="control-list">
|
||||
<div class="control">
|
||||
<input class="input" type="date">
|
||||
</div>
|
||||
<div class="control">
|
||||
<input class="input" type="time">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label class="label">End date</label>
|
||||
<div class="control-list">
|
||||
<div class="control">
|
||||
<button class="button is-link">Spot</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button class="button is-link">Full day</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-list">
|
||||
<div class="control">
|
||||
<input class="input" type="date">
|
||||
</div>
|
||||
<div class="control">
|
||||
<input class="input" type="time">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label class="label">Loop</label>
|
||||
<label class="label">Loop method</label>
|
||||
<div class="control-list">
|
||||
<label class="radio">
|
||||
<input type="radio" name="loop-method">Never
|
||||
</label>
|
||||
<label class="radio">
|
||||
<input type="radio" name="loop-method">Day
|
||||
</label>
|
||||
<label class="radio">
|
||||
<input type="radio" name="loop-method">Week
|
||||
</label>
|
||||
<label class="radio">
|
||||
<input type="radio" name="loop-method">Month
|
||||
</label>
|
||||
<label class="radio">
|
||||
<input type="radio" name="loop-method">Year
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<div class="field">
|
||||
<label class="label">Day loop span</label>
|
||||
<div class="control">
|
||||
<input class="input" type="text">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="field">
|
||||
<label class="label">Week loop span</label>
|
||||
<div class="control">
|
||||
<input class="input" type="text">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">Week option</label>
|
||||
<div class="control-list">
|
||||
<label class="checkbox">
|
||||
<input type="checkbox">Monday
|
||||
</label>
|
||||
<label class="checkbox">
|
||||
<input type="checkbox">Tuesday
|
||||
</label>
|
||||
<label class="checkbox">
|
||||
<input type="checkbox">Wednesdayday
|
||||
</label>
|
||||
<label class="checkbox">
|
||||
<input type="checkbox">Thursday
|
||||
</label>
|
||||
<label class="checkbox">
|
||||
<input type="checkbox">Firday
|
||||
</label>
|
||||
<label class="checkbox">
|
||||
<input type="checkbox">Saturday
|
||||
</label>
|
||||
<label class="checkbox">
|
||||
<input type="checkbox">Sunday
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="field">
|
||||
<label class="label">Month loop span</label>
|
||||
<div class="control">
|
||||
<input class="input" type="text">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">Month option</label>
|
||||
<div class="control-list">
|
||||
<label class="radio">
|
||||
<input type="radio" name="month-loop-method">每月第X天
|
||||
</label>
|
||||
<label class="radio">
|
||||
<input type="radio" name="month-loop-method">每月倒数第X天
|
||||
</label>
|
||||
<label class="radio">
|
||||
<input type="radio" name="month-loop-method">每月第X个星期第Y天
|
||||
</label>
|
||||
<label class="radio">
|
||||
<input type="radio" name="month-loop-method">每月倒数第X个星期第Y天
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="field">
|
||||
<label class="label">Year loop span</label>
|
||||
<div class="control">
|
||||
<input class="input" type="text">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Loop end with</label>
|
||||
<div class="control-list">
|
||||
<label class="radio">
|
||||
<input type="radio" name="loop-end">Forever
|
||||
</label>
|
||||
<label class="radio">
|
||||
<input type="radio" name="loop-end">A date
|
||||
</label>
|
||||
<label class="radio">
|
||||
<input type="radio" name="loop-end">Times
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input class="input" type="date">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input class="input" type="text">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<footer class="modal-card-foot">
|
||||
<button class="button is-success">Submit</button>
|
||||
<button class="button">Cancel</button>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user