forked from deiu/solid-plume
-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.html
167 lines (151 loc) · 8.24 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
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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Plume</title>
<link rel="stylesheet" href="css/pure-min.css">
<link rel="stylesheet" href="css/grids-responsive-min.css">
<link rel="stylesheet" href="css/simplemde.min.css">
<link rel="stylesheet" href="css/blog.css">
<link rel="shortcut icon" type="img/png" href="favicon.png">
<link rel="manifest" href="manifest.json">
</head>
<body>
<div id="layout" class="pure-g">
<nav id="global-nav" aria-label="Main navigation">
<ul>
<li class="new hidden"><a href="?new">
<img src="img/logo-white.svg" alt="Edit post">New post</a>
<h1 class="menu-separator"></h1>
</li>
<li class="login"><a href="#" onclick="Plume.login()">Author Login</a></li>
<li class="logout hidden"><a href="#" onclick="Plume.logout()">Logout</a></li>
<!-- <li class=""><a href="#" onclick="Plume.signup()">Signup</a></li> -->
</ul>
</nav>
<button aria-controls="global-nav" aria-haspopup="true" tabindex="1" id="menu-button">
<span class="menu-icon" aria-hidden="true">
<svg version='1.1' x='0px' y='0px' width='40px' height='30px' viewBox='0 0 40 30' enable-background='new 0 0 40 30'><rect width='40' height='5'/><rect y='24' width='40' height='5' /><rect y='12' width='40' height='5'/></svg>
</span>
</button>
<a id="logged-href" href="" title="" style="display:none" >
<img id="uid-icon" src="img/uid.png">
</a>
<div id="main" class="main content pure-u-1 pure-u-md-3-5">
<!-- Blog title -->
<div class="blog-info header center-text">
<a href="." class="no-decoration dark">
<img class="blog-picture" src="">
<h1 class="blog-title">Blog Title</h1>
<h2 class="blog-tagline">Plume, a Solid blog platform</h2>
<div class="separator"></div>
</a>
</div>
<div class="startWrite center-text hidden">
<h2><a class="action-button" href="#" onclick="Plume.showEditor()" title="Start writing">Start writing!</a></h2>
</div>
<!-- Loading animation -->
<div class="loading center-text hidden">
<div class="loadingbox"></div>
<p>Loading post(s)...</p>
</div>
<!-- Editor -->
<div class="editor hidden">
<header>
<input type="text" class="editor-title" placeholder="Title">
<div class="editor-meta inline-block">By <a href="#" class="editor-author"></a> on <span class="editor-date"></span></div>
<div class="editor-meta editor-tags inline-block"></div>
<!-- <div class="editor-meta inline-block">
<div class="editor-meta inline-block">Add new tag:</div>
<div class="editor-tag-color inline-block pure-menu pure-menu-has-children">
<div class="post-category pure-menu-link color-picker">Color</div>
<ul class="pure-menu-children">
<li class="pure-menu-item" onclick="Plume.setColor('color-0')"><div class="post-category color-0"> </div></li>
<li class="pure-menu-item" onclick="Plume.setColor('color-1')"><div class="post-category color-1"> </div></li>
<li class="pure-menu-item" onclick="Plume.setColor('color-2')"><div class="post-category color-2"> </div></li>
<li class="pure-menu-item" onclick="Plume.setColor('color-3')"><div class="post-category color-3"> </div></li>
<li class="pure-menu-item" onclick="Plume.setColor('color-4')"><div class="post-category color-4"> </div></li>
<li class="pure-menu-item" onclick="Plume.setColor('color-5')"><div class="post-category color-5"> </div></li>
</ul>
</div>
<input type="text" class="editor-add-tag inline-block" placeholder="name">
</div> -->
</header>
<section>
<textarea class="editor-body"></textarea>
</section>
<footer>
<button class="button publish success" onclick="Plume.publishPost()">Publish</button>
<button class="button preview" onclick="Plume.togglePreview()">Preview</button>
<button class="button float-right" onclick="Plume.cancelPost()">Cancel</button>
</footer>
</div>
<!-- A wrapper for all the blog posts -->
<div class="posts"></div>
<!-- A wrapper for all the post viewer -->
<div class="viewer"></div>
<!-- Write your first article -->
<div class="start center-text hidden">
<h1>You haven't published anything yet.</h1>
<h2><a class="action-button" href="#" onclick="Plume.showEditor()" title="Start writing">Start writing!</a></h2>
</div>
<!-- Init -->
<div class="init center-text hidden">
<h1>To begin, Login as author (top left menu).</h1>
</div>
<!-- Errors -->
<div class="error center-text hidden">
<h2 class="error-title">Could not find blog URL</h2>
<p><a href="#" class="error-url"></a></p>
<p>
<a class="action-button" href="." title="Back to blog">≪ Back to blog</a>
<a class="action-button error-access hidden" href="#" onclick="#" title="Request access">Request access</a>
</p>
</div>
<!-- Footer -->
<div class="footer">
<div class="pure-menu pure-menu-horizontal">
<ul>
<li class="pure-menu-item"><a href="https://github.com/theWebalyst/solid-plume/" class="pure-menu-link" target="_blank">Powered by Plume <img class="plume-logo" src="img/logo.svg"></a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="webid-info" class="overlay">
<div class="overlay-text">
<h2>What is a WebID?</h2>
<p>
A WebID is a URL for you. It allows you to set up a reusable identity
and a profile, with friends, pictures and all kinds of things.
</p>
<p>
Unlike social networks, with WebID you reuse your identity and personal
data in a decentralized, privacy-friendly way, across multiple applications
and services on the Web. It works like having an account on a social
networking site, but it isn't restricted to just that site. It is very
open because the information can connect to other people, apps, projects
and so on, without everyone having to join the same social networking site.
(<a href="http://www.w3.org/wiki/WebID" target="_blank">more information</a>)
</p>
<p>
When you create a WebID account, you may also get storage space on the
selected server. The amount of available space can vary from server to
server. Additionally, a common list of workspaces (i.e. dedicated folders)
maye be created by default, such as <i>Public</i>, <i>Private</i>,
<i>Family</i>, <i>Work</i>, etc.
</p>
<div class="float-right"><a href="#" class="action-button">Close</a></div>
</div>
</div>
<!-- Local Javascript -->
<script src="js/simplemde.min.js"></script>
<script src="js/moment.min.js"></script>
<script src="js/dropdown.js"></script>
<script src="js/solid-auth-client.bundle.js"></script>
<script src="js/rdflib.min.js"></script>
<script src="app/solid.js"></script>
<script src="app/app.js"></script>
</body>
</html>