zenpen/index.html at master · eevmanu/zenpen · GitHub

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
<!DOCTYPE html>
<html>
	<head>
		<!-- MISC/META -->
		<title>ZenPen ~ Minimal Distraction, Maximum Zen</title>
		<meta charset="utf-8" />
		<meta
			name="description"
			content="Zenpen - A minimal text editor, made to stay out of the way while you get the words down."
		/>

		<!-- CSS -->
		<link href="css/style.css" rel="stylesheet" />
		<link href="css/fonts.css" rel="stylesheet" />
	</head>

	<body class="yang">
		<div class="overlay">
			<div class="wordcount modal">
				<h1>Target Word Count</h1>
				<div>
					<input type="number" name="quantity" value="0" min="0" />
				</div>
			</div>

			<div class="saveoverlay modal">
				<h1>Select save format</h1>
				<p class="saveselection">
					<span data-format="markdown">Markdown</span>
					<span data-format="html">HTML</span>
					<span data-format="plain">Plain Text</span>
				</p>
				<button class="savebutton useicons">&#xe006;</button>
				<div>
					Or select format and press ctrl+c (cmd+c on mac) to copy the text.
				</div>
				<textarea class="hiddentextbox"></textarea>
			</div>
		</div>

		<div class="text-options">
			<div class="options">
				<span class="no-overflow">
					<span class="lengthen ui-inputs">
						<button class="url useicons">&#xe005;</button>
						<input
							class="url-input"
							type="text"
							placeholder="Type or Paste URL here"
						/>
						<button class="bold">b</button>
						<button class="italic">i</button>
						<button class="quote">&rdquo;</button>
					</span>
				</span>
			</div>
		</div>

		<div class="ui">
			<div class="wrapper">
				<div class="top editing">
					<button class="fullscreen useicons" title="Toggle fullscreen">
						&#xe000;
					</button>

					<button class="color-flip useicons" title="Invert colors">
						&#xe002;
					</button>

					<button class="target useicons" title="Set target word count">
						&#xe001;
					</button>
					<button class="save useicons" title="Save Text">
						&#xe003;
					</button>
				</div>
			</div>
		</div>

		<div class="word-counter">
			<span class="progress"></span>
		</div>

		<section>
			<header contenteditable="true" class="header"></header>
			<article contenteditable="true" class="content"></article>
		</section>

		<!-- LIBS -->
		<script src="js/libs/FileSaver.min.js"></script>
		<script src="js/libs/Blob.min.js"></script>
		<script src="js/libs/screenfull.min.js"></script>

		<!-- JS -->
		<script src="js/default.js"></script>
		<script src="js/utils.js"></script>
		<script src="js/editor.js"></script>
		<script src="js/ui.js"></script>
		<script type="text/javascript">
			// Initiate ZenPen
			ZenPen.editor.init();
			ZenPen.ui.init();
		</script>
	</body>
</html>