-
Notifications
You must be signed in to change notification settings - Fork 1
/
generator.html
124 lines (111 loc) · 3.13 KB
/
generator.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
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
121
122
123
124
<!doctype html>
<html>
<head>
<title>HTML Tutor</title>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
<link href="js/prettify.css" type="text/css" rel="stylesheet" />
<style type="text/css">
#code {
width: 100%;
height: 400px;
font-family: courier;
font-size: 16px;
background: #333;
color: #e0ff00;
}
#result {
width: 100%;
height: 400px;
}
#constraint-list {
background: #FEFBF3;
border: 1px solid rgba(0,0,0,.2);
padding: 1em;
}
#assignment li {
color: #050;
font-size: 16px;
}
section {
padding-top: 60px;
}
.complete {
color: #ddd;
font-style: italic;
text-decoration: line-through;
}
.hidden {
display: none;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/prettify.js"></script>
<script type="text/javascript" src="js/bootstrap-modal.js"></script>
<script type="text/javascript">
function getStyle(el,styleProp)
{
var x = document.getElementById(el);
if (x.currentStyle)
var y = x.currentStyle[styleProp];
else if (window.getComputedStyle)
var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
return y;
}
var generateConstraints = function(win) {
$('#constraint-list').html("");
var elements = $(win).find('*');
console.log(elements);
for(var i=0; i<elements.length; i++) {
$('#constraint-list').append($('<li>').text(elements[i].tagName + ' with text ' +
$(elements[i]).text()))
.append($('<li>').text(elements[i].tagName + ' with style ' +
(window.getComputedStyle(elements[i])).cssText));
}
}
$(document).ready(function() {
$('#my-modal').modal();
$('#code').keyup(function() {
var doc = $('#result')[0],
win = doc.contentDocument || doc.contentWindow.document,
source = $('#code').val();
win.open();
win.write(source);
generateConstraints(win);
win.close();
});
});
</script>
</head>
<body>
<div class="topbar">
<div class="topbar-inner">
<div class="container">
<a class="brand" href="#">HTML Tutor</a>
</div>
</div>
</div>
<section>
<div class="container">
<div class="row">
<div class="span8">
<h3>Code</h3>
<div class="alert-message success hidden">
<a class="close" href="#">x</a>
<p><strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.</p>
</div>
<textarea id="code" class="prettyprint"></textarea>
</div>
<div class="span8">
<h3>Result</h3>
<iframe id="result"></iframe>
</div>
</div>
<div class="row">
<div class="span16">
<h3>Constraints</h3>
<ul id="constraint-list"></ul>
</div>
</div>
</section>
</body>
</html>