-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
93 lines (80 loc) · 3.15 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
<!doctype html>
<!--
Markdown to BBCode
Author: rtxa
More info: https://www.github.com/rtxa/mdtobb
-->
<html lang="en">
<head>
<title>Markdown to BBCode</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="images/mdtobb-logo.png" type="image/png">
<link rel="stylesheet" href="css/style.css">
<script src="js/libs/vue.js"></script>
<script src="js/libs/marked.js"></script>
</head>
<body>
<div id="app">
<header>
<img src="images/mdtobb-logo.png" height="128px" width="128px">
<h1>Markdown to BBCode</h1>
<p>Convert Markdown text to BBCode to use in your forum posts</p>
</header>
<div class="container" id="styles-section">
<button v-on:click="showSettings = true">
<span class="material-icons">settings</span>
</button>
</div>
<modal v-model="showSettings">
<h2>Converter</h2>
<h3>General</h3>
<label><input v-model="style.smartyPants" type="checkbox">Typographic replacements</input></label>
<h3>Add new line</h3>
<label><input v-model="style.addNewLineHeader" type="checkbox">Header</label>
<label><input v-model="style.addNewLineParagraph" type="checkbox">Paragraph</label>
<label><input v-model="style.addNewLineEndOfList" type="checkbox">List</label>
<h2>Editor</h2>
<label><input v-model="options.saveInput" type="checkbox">Save input</label>
<label><input v-model="options.saveStyle" type="checkbox">Save style</label>
<h2>Tags</h2>
<label>Header 1</label>
<input v-model="style.h1" type="text" placeholder="Header 1"></input>
<label>Header 2</label>
<input v-model="style.h2" type="text" placeholder="Header 2"></input>
<label>Header 3</label>
<input v-model="style.h3" type="text" placeholder="Header 3"></input>
<label>Header 4</label>
<input v-model="style.h4" type="text" placeholder="Header 4"></input>
<h2>Style</h2>
<label class="button-file-input" for="file-input">
<span class="material-icons">file_upload</span> Import config
</label>
<input type="file" id="file-input" v-on:change="onConfigImport"></input>
<button v-on:click="exportConfig">
<span class="material-icons">file_download</span> Export config
</button>
</modal>
<div class="container">
<textarea v-model="input" placeholder="Write your Markdown text here"></textarea>
</div>
<div class="container">
<textarea id="bbcode-output" v-model="convert" readonly="readonly"
placeholder="Result will appear here"></textarea>
</div>
<div class="container">
<button v-on:click="copyToClipboard()">
<span class="material-icons">content_copy</span> Copy to clipboard
</button>
</div>
<footer>
More info on <a href="https://www.github.com/rtxa/mdtobb">GitHub</a>
</footer>
</div>
<script src="js/components/modal.js"></script>
<script src="js/converter.js"></script>
<script src="js/utils.js"></script>
<script src="js/styles.js"></script>
<script src="js/mdtobb.js"></script>
</body>
</html>