-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
123 lines (103 loc) · 4.16 KB
/
index.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
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="xm:primary" content="blue">
<meta name="xm:style" content="light">
<meta name="xm:toolbar" content="dark">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:400,100,300,500">
<script type="text/javascript" src="js/x-tag-core.js"></script>
<script type="text/javascript" src="js/m-core.js"></script>
<link rel="stylesheet" type="text/css" href="styles/m-core.css">
<script type="text/javascript" src="js/m-button.js"></script>
<link rel="stylesheet" type="text/css" href="styles/m-button.css">
<script type="text/javascript" src="js/m-toolbar.js"></script>
<link rel="stylesheet" type="text/css" href="styles/m-toolbar.css">
<script type="text/javascript" src="js/m-text-field.js"></script>
<link rel="stylesheet" type="text/css" href="styles/m-text-field.css">
<script type="text/javascript" src="js/m-icon.js"></script>
<link rel="stylesheet" type="text/css" href="styles/m-icon.css">
<script type="text/javascript" src="js/m-text-view.js"></script>
<link rel="stylesheet" type="text/css" href="styles/m-text-view.css">
<script type="text/javascript" src="js/m-item-single.js"></script>
<link rel="stylesheet" type="text/css" href="styles/m-item-single.css">
<script type="text/javascript" src="js/m-avatar.js"></script>
<link rel="stylesheet" type="text/css" href="styles/m-avatar.css">
<script type="text/javascript" src="js/m-subhead.js"></script>
<link rel="stylesheet" type="text/css" href="styles/m-subhead.css">
<script type="text/javascript" src="js/m-fab.js"></script>
<link rel="stylesheet" type="text/css" href="styles/m-fab.css">
</head>
<body>
<m-toolbar id="toolbar" text="New Chat" nav-icon="menu" opaque primary class="fixed">
</m-toolbar>
<div style="height: 56px;"></div>
<br>
<m-fab style="position: absolute; bottom: 50px; right: 50px;" src="add" theme-color="blue">
<!--
toggle="clear"
<m-fab src="email" theme-color="blue-grey"></m-fab>
<m-fab src="message" theme-color="blue-grey"></m-fab>
-->
</m-fab>
<!--<br>
<m-fab style="" src="add" theme-color="pink-accent" class="mini"></m-fab>
<br>-->
<m-card style="width: 440px; height: 300px; position: absolute; left: 100px; top: 200px;" elevation=2 class="reveal">
<m-toolbar nav-icon="arrow_back" text="Compose"></m-toolbar>
<m-text-field hint="To" class="full-width" max-length=50></m-text-field>
<m-divider></m-divider>
<m-text-field hint="Subject" class="full-width"></m-text-field>
<m-divider></m-divider>
<m-text-view style="display: block; padding: 20px;" text-style="subheading" text-color="disabled">Body</m-text-view>
</m-card>
<m-subhead text="Recent chat" primary></m-subhead>
<m-item-single>
<m-avatar theme-color="red">A</m-avatar>
Abbey Christensen
<m-icon src="chat_bubble" primary class="action"></m-icon>
</m-item-single>
<m-item-single>
<m-avatar>A</m-avatar>
Alex Nelson
<m-icon src="chat_bubble" primary class="action"></m-icon>
</m-item-single>
<m-item-single>
<m-avatar>M</m-avatar>
Mary Johnson
<m-icon src="chat_bubble" class="action"></m-icon>
</m-item-single>
<m-item-single>
<m-avatar>P</m-avatar>
Peter Carlsson
<m-icon src="chat_bubble" class="action"></m-icon>
</m-item-single>
<m-item-single>
<m-avatar>T</m-avatar>
Trevor Hansen
<m-icon src="chat_bubble" class="action"></m-icon>
</m-item-single>
<m-divider style="margin-top: 8px;"></m-divider>
<m-subhead text="Previous chats"></m-subhead>
<m-item-single>
<m-avatar>B</m-avatar>
Britta Holt
</m-item-single>
<m-item-single>
<m-avatar>S</m-avatar>
Sandra Adams
</m-item-single>
<script type="text/javascript">
var fab = document.querySelector("m-fab");
var card = document.querySelector("m-card");
xtag.addEvent(fab, "tapend", function () {
xm.morph.show(card);
});
xtag.addEvent(card, "tapend", function () {
xm.morph.hide(card);
});
xm.morph.create(fab, card);
</script>
</body>
</html>