Compress_cppcode/index.html at main · BetterOIer/Compress_cppcode · 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
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="shortcut icon" href="/site_logo_used.png">
	<title>Compress Your C++ Code!</title>
	<link rel="stylesheet" href="/assets/css/normalize.css">
	<link rel="stylesheet" href="/assets/css/font-settings.css">
	<script src="/js/ace.min.js"></script>
	<script src="/js/ext-language_tools.min.js"></script>
	<script src="/js/mode-c_cpp.min.js"></script>
	<script src="/js/theme-monokai.min.js"></script>
	<script src="/js/c_cpp.js"></script>
	<script src="/js/compress.js"></script>
	<script>
		function setEditor() {
			editor = ace.edit("code");
			ace.config.set('basePath', '.');
			editor.setTheme("ace/theme/monokai");
			editor.session.setMode("ace/mode/c_cpp");
			editor.setFontSize(18);
			editor.setReadOnly(false);
			editor.setOption("wrap", "free");
			ace.require("ace/ext/language_tools");
			editor.setOptions({
				enableBasicAutocompletion: true,
				enableSnippets: true,
				enableLiveAutocompletion: true
			});
		}
		window.onload = function() {
			document.getElementById("compress").onclick = function () {
				editor.session.setValue(compress(editor.getValue()));
			};
			setEditor();
		};
	</script>
	<style type="text/css">
		html {
			font-size: 120%;
		}

		#code {
			height: calc(100% - 2rem);
			width: 100%;
		}

		#header {
			height: 2rem;
			width: 100%;
			line-height: 2rem;
			color: #ffe600;
			text-align: center;
			vertical-align: middle;
			font-family: SYST;
			background-color: #000000;
		}

		#header #compress {
			padding-left: .5rem;
			padding-right: .5rem;
			height: 2rem;
			transition: all .2s;
		}

		#header #compress:hover {
			background-color: #5b5b5b;
		}

		#header #compress i {
			font-size: 1.5rem;
			width: 2rem;
			margin-left: .3rem;
			vertical-align: middle;
		}

		#header .intro {
			width: 8rem;
			transition: all .2s;
			color: unset;
		}

		#header .intro:hover {
			background-color: #5b5b5b;
		}

		#header .by {
			padding-left: .5rem;
			font-size: .9rem;
			color: #999;
			opacity: 0;
			transition: all .2s;
		}

		#header .by a {
			color: #888;
			transition: all .2s;
		}

		#header .by a:hover {
			color: #666;
		}

		#header:hover .by{
			opacity: 1;
		}
	</style>
</head>

<body>
	<div id="header" class="fl no-select">
		<a class="intro fl hand" href="">C++ 代码压行机</a>
		<div id="compress" class="hand fr">压行!</div>
	</div>
	<pre id="code"></pre>
</body>

</html>