-
Notifications
You must be signed in to change notification settings - Fork 0
/
checkin.html
151 lines (146 loc) · 7.25 KB
/
checkin.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Tissue</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/open-iconic-bootstrap.min.css">
<link rel="stylesheet" href="css/tissue.css">
<script src="js/holder.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light mb-4">
<a href="#" class="navbar-brand">Tissue</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">ホーム</a>
</li>
<li class="nav-item">
<a class="nav-link" href="profile.html#timeline">タイムライン</a>
</li>
<li class="nav-item">
<a class="nav-link" href="profile.html#stats">グラフ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="profile.html#okazu">オカズ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="ranking.html">ランキング</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="holder.js/30x30" width="30" height="30" class="rounded d-inline-block align-top"> アドミニストレートチンポ さん
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a href="#" class="dropdown-item">設定</a>
<a href="#" class="dropdown-item">ログアウト</a>
</div>
</li>
</ul>
<form class="form-inline">
<!--<button type="button" class="btn btn-outline-success">チェックイン</button>-->
</form>
</div>
</nav>
<div class="container">
<h2>今致してる？</h2>
<hr>
<div class="row justify-content-center mt-5">
<div class="col-lg-6">
<form>
<div class="form-row">
<div class="form-group col-sm-6">
<label for="date"><span class="oi oi-calendar"></span> 日付</label>
<input id="date" type="text" class="form-control" value="2017/10/01">
</div>
<div class="form-group col-sm-6">
<label for="time"><span class="oi oi-clock"></span> 時刻</label>
<input id="time" type="text" class="form-control" value="00:00">
</div>
</div>
<div class="form-row">
<div class="form-group col-sm-12">
<label for="tags"><span class="oi oi-tags"></span> タグ</label>
<input id="tags" type="text" class="form-control">
<small class="form-text text-muted">
スペース区切りで複数入力できます。
</small>
</div>
</div>
<div class="form-row">
<div class="form-group col-sm-12">
<label for="link"><span class="oi oi-link-intact"></span> オカズリンク</label>
<input id="link" type="text" class="form-control" placeholder="https://...">
<small class="form-text text-muted">
オカズのURLを貼り付けて登録することができます。
</small>
</div>
<div class="form-group col-sm-12">
<div class="card">
<div class="card-header">このオカズで合っていますか？</div>
<div class="card-body">
<div class="d-flex mb-4">
<img src="holder.js/128x128" alt="" class="rounded">
<div class="align-self-center ml-2 mr-auto">
<p class="mb-1">タイトル</p>
<small class="text-muted">概要</small>
</div>
</div>
<a href="#" class="btn btn-success"><span class="oi oi-check"></span> 決定</a>
<a href="#" class="btn btn-outline-secondary">キャンセル</a>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-sm-12">
<label for="note"><span class="oi oi-comment-square"></span> ノート</label>
<textarea id="note" class="form-control"></textarea>
</div>
</div>
<div class="form-row mt-4">
<p>オプション</p>
<div class="form-group col-sm-12">
<div class="form-check">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">
<span class="oi oi-lock-locked"></span> このチェックインを非公開にする
</span>
</label>
</div>
</div>
</div>
<div class="text-center">
<button class="btn btn-primary">チェックイン</button>
</div>
</form>
</div>
</div>
</div>
<footer class="tis-footer mt-4">
<div class="container-fluid p-3 p-md-4">
<p>Copyright (c) 2017 shikorism.net</p>
<ul class="list-inline">
<li class="list-inline-item"><a href="https://github.com/shibafu528" class="text-dark">Admin(@shibafu528)</a></li>
<li class="list-inline-item"><a href="https://github.com/shikorism/tissue" class="text-dark">GitHub</a></li>
</ul>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"
integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>