contentModel/index.html at main · JiuqingSong/contentModel · 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
106
107
108
<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                overflow: hidden;
            }
            textarea {
                padding: 0;
                resize: none;
            }
            .outerContainer {
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                display: flex;
                flex-direction: column;
            }
            .container {
                flex: 1 1 auto;
                display: flex;
                width: 100%;
            }
            .column {
                flex: 1 1 auto;
                width: 50%;
            }
            .box {
                width: 100%;
                border: solid 1px black;
                overflow: auto;
            }

            #source {
                height: 100%;
            }
            #layout {
                height: 100%;
            }

            #modelHTML {
                height: 25vh;
            }
            #model {
                height: 75vh;
            }
            #modelLayout {
                height: 15vh;
            }
        </style>
    </head>
    <body>
        <div class="outerContainer">
            <div class="container" style="height: 20px; flex-grow: 0">
                <div class="column">Input HTML:</div>
                <div class="column">Layout:</div>
            </div>
            <div class="container" style="height: 200px; flex-grow: 0">
                <div class="column">
                    <textarea id="source" class="box"></textarea>
                </div>
                <div class="column">
                    <div id="layout" class="box"></div>
                </div>
            </div>
            <div class="container" style="height: 20px; flex-grow: 0">
                <div class="column">Content Model:</div>
                <div class="column">Layout (Editor):</div>
            </div>
            <div class="container">
                <div class="column">
                    <textarea id="model" class="box" style="height: 100%; width: 100%"></textarea>
                </div>
                <div class="column" style="display: flex; flex-direction: column; height: 100%">
                    <div style="height: 25px; flex-grow: 0">
                        <button id="btnBold"><b>B</b></button>
                        <button id="btnItalic"><i>I</i></button>
                        <button id="btnUnderline"><u>U</u></button>
                        <button id="btnPerf">Perf</button>
                    </div>
                    <div
                        id="modelLayout"
                        class="box"
                        style="flex-grow: 1"
                        contenteditable=""
                        spellcheck="false"
                    ></div>
                    <div>
                        HTML from content model: Optimization:
                        <input type="radio" name="opt" id="optNo" />
                        <label for="optNo">No optimization</label>
                        <input type="radio" name="opt" id="opt1" />
                        <label for="opt1">Level 1: Merge same tag</label>
                        <input type="radio" name="opt" id="opt2" checked />
                        <label for="opt2">Level 2: Remove empty SPAN</label>
                    </div>
                    <div style="flex-grow: 0; height: 250px">
                        <textarea id="modelHTML" style="width: 100%; height: 100%"></textarea>
                    </div>
                </div>
            </div>
        </div>

        <script src="./dist/index.js"></script>
    </body>
</html>