-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
53 lines (50 loc) · 2.17 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base target="_blank" />
<title>CodePlayer - Front-end Playground</title>
<link rel="stylesheet" href="css/codemirror.css" />
<link rel="stylesheet" href="css/monokai.css" />
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<header>
<h3 class="header-logo">Code<span>Player</span></h3>
<div class="header-buttons">
<select class="header-resize">
<option data-width="100%" data-height="100%">Default Viewport</option>
<option data-width="360" data-height="640">Galaxy S5 (360x640)</option>
<option data-width="412" data-height="732">Nexus 5X (412x732)</option>
<option data-width="412" data-height="732">Nexus 6P (412x732)</option>
<option data-width="320" data-height="568">iPhone 5 (320x568)</option>
<option data-width="376" data-height="667">iPhone 6 (376x667)</option>
<option data-width="414" data-height="736">iPhone 6 Plus (414x736)</option>
<option data-width="768" data-height="1024">iPad (768x1024)</option>
</select>
<button class="header-head">Edit Head</button>
<button class="header-clear">Reset Editor</button>
<button class="header-toggle">Toggle Editor</button>
<button class="header-run-js">Run JS</button>
</div>
</header>
<div class="editor">
<textarea class="html" placeholder="HTML" tabindex="-1"></textarea>
<textarea class="css" placeholder="CSS" tabindex="-1"></textarea>
<textarea class="javascript" placeholder="JavaScript" tabindex="-1"></textarea>
</div>
<div class="output">
<iframe id="output" src="blank.html" allowfullscreen="true" allowtransparency="true"></iframe>
</div>
<footer>
<p>Code Player</p>
</footer>
<script src="libs/codemirror.js"></script>
<script src="libs/xml.js"></script>
<script src="libs/css.js"></script>
<script src="libs/javascript.js"></script>
<script src="js/helpers.js"></script>
<script src="js/app.js"></script>
</body>
</html>