Skip to content

Commit 345d862

Browse files
PascalPixelPascalPixel
committed
HTML cleanup
1 parent d07252b commit 345d862

File tree

1 file changed

+144
-146
lines changed

1 file changed

+144
-146
lines changed

‎index.html‎

Lines changed: 144 additions & 146 deletions
Original file line numberDiff line numberDiff line change
@@ -1,152 +1,150 @@
11
<html>
2-
<head>
3-
<title>CSS Browser</title>
4-
<meta charset='utf-8'>
5-
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
6-
<meta content="width=device-width, initial-scale=1.0" name="viewport">
7-
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
8-
<style>
9-
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,caption,table,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
10-
border: 0;
11-
vertical-align: baseline;
12-
text-rendering: optimizeLegibility;
13-
-webkit-font-smoothing: antialiased;
14-
}
15-
16-
body {
17-
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
18-
color: #979374;
19-
background: #eeeeee;
20-
padding: 20px;
21-
}
22-
.browser .btn {
23-
cursor: pointer;
24-
}
25-
26-
.browser a {
27-
color: inherit;
28-
}
29-
.browser a:hover, .browser a.hover {
30-
text-decoration: none;
31-
}
32-
33-
.browser {
34-
border: 1px solid rgba(0,0,0,0.4);
35-
border-radius: 7px;
36-
background-color: white;
37-
box-shadow: 0px 3px 5px rgba(0,0,0,0.14);
38-
position: relative;
39-
color: #788083;
40-
}
41-
.browser-toolbar {
42-
background-image: -moz-linear-gradient( 90deg, #c8c8c8 0%, #e2e2e2 100%);
43-
background-image: -webkit-linear-gradient( 90deg, #c8c8c8 0%, #e2e2e2 100%);
44-
background-image: -ms-linear-gradient( 90deg, #c8c8c8 0%, #e2e2e2 100%);
45-
box-shadow: inset 0px 1px 0px white;
46-
border-bottom: 1px solid rgba(0,0,0,0.4);
47-
border-top-left-radius: 7px;
48-
border-top-right-radius: 7px;
49-
height: 50px;
50-
padding: 10px;
51-
}
52-
.browser-back, .browser-forward {
53-
background-image: -moz-linear-gradient( 90deg, #c8c8c8 0%, #e2e2e2 100%);
54-
background-image: -webkit-linear-gradient( 90deg, #c8c8c8 0%, #e2e2e2 100%);
55-
background-image: -ms-linear-gradient( 90deg, #c8c8c8 0%, #e2e2e2 100%);
56-
border: 1px solid rgba(0,0,0,0.3);
57-
box-shadow: inset 0px 1px 0px white, 0px 1px 0px rgba(255,255,255,0.7);
58-
height: 30px;
59-
width: 35px;
60-
padding: 5px 10px;
61-
display: inline-block;
62-
margin-right: -5px;
63-
text-shadow: 0px 1px 0px rgba(255,255,255,0.7);
64-
}
65-
.browser-back {
66-
border-top-left-radius: 5px;
67-
border-bottom-left-radius: 5px;
68-
}
69-
.browser-forward {
70-
border-top-right-radius: 5px;
71-
border-bottom-right-radius: 5px;
72-
}
73-
.browser-address {
74-
background: white;
75-
border: 1px solid rgba(0,0,0,0.4);
76-
display: inline-block;
77-
position: absolute;
78-
left: 90px;
79-
right: 10px;
80-
border-radius: 5px;
81-
padding: 5px 10px;
82-
height: 30px;
83-
box-shadow: inset 0px 1px 2px rgba(0,0,0,0.2), 0px 1px 0px rgba(255,255,255,0.7);
84-
}
85-
.browser-content {
86-
position: relative;
87-
height: 800px;
88-
border-radius: 7px;
89-
overflow: hidden;
90-
}
91-
.browser-content iframe {
92-
border: none;
93-
height: 100%;
94-
width: 100%;
95-
}
96-
.browser-reload {
97-
font-weight: bold;
98-
}
99-
</style>
100-
</head>
101-
102-
<body>
103-
<div class="browser">
104-
<div class="browser-toolbar">
105-
<a class="browser-back" href="#">&#9668;</a>
106-
<a class="browser-forward" href="#">&#9658;</a>
107-
<div class="browser-address">
108-
<span style="color:#BBBBBB;">https://</span>superpencil.com <a class="browser-reload pull-right" href="#">&#x21bb;</a>
2+
<head>
3+
<title>CSS iFrame Browser</title>
4+
<meta charset='utf-8'>
5+
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
6+
<meta content="width=device-width, initial-scale=1.0" name="viewport">
7+
<style>
8+
body {
9+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
10+
color: #979374;
11+
background: #eeeeee;
12+
padding: 20px;
13+
}
14+
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,caption,table,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
15+
border: 0;
16+
vertical-align: baseline;
17+
text-rendering: optimizeLegibility;
18+
-webkit-font-smoothing: antialiased;
19+
}
20+
.browser *, .browser *:before, .browser *:after {
21+
-webkit-box-sizing: border-box;
22+
-moz-box-sizing: border-box;
23+
box-sizing: border-box;
24+
}
25+
.browser .pull-right {
26+
float:right;
27+
}
28+
.browser .btn {
29+
cursor: pointer;
30+
}
31+
.browser a {
32+
color: inherit;
33+
text-decoration: none;
34+
}
35+
.browser a:hover, .browser a.hover {
36+
text-decoration: none;
37+
}
38+
.browser {
39+
border: 1px solid rgba(0,0,0,0.4);
40+
border-radius: 7px;
41+
background-color: white;
42+
box-shadow: 0px 3px 5px rgba(0,0,0,0.14);
43+
position: relative;
44+
color: #788083;
45+
font-size: 14px;
46+
line-height: 19px;
47+
}
48+
.browser-toolbar {
49+
background-image: -moz-linear-gradient( 90deg, #c8c8c8 0%, #e2e2e2 100%);
50+
background-image: -webkit-linear-gradient( 90deg, #c8c8c8 0%, #e2e2e2 100%);
51+
background-image: -ms-linear-gradient( 90deg, #c8c8c8 0%, #e2e2e2 100%);
52+
box-shadow: inset 0px 1px 0px white;
53+
border-bottom: 1px solid rgba(0,0,0,0.4);
54+
border-top-left-radius: 7px;
55+
border-top-right-radius: 7px;
56+
height: 50px;
57+
padding: 10px;
58+
}
59+
.browser-back, .browser-forward {
60+
background-image: -moz-linear-gradient( 90deg, #c8c8c8 0%, #e2e2e2 100%);
61+
background-image: -webkit-linear-gradient( 90deg, #c8c8c8 0%, #e2e2e2 100%);
62+
background-image: -ms-linear-gradient( 90deg, #c8c8c8 0%, #e2e2e2 100%);
63+
border: 1px solid rgba(0,0,0,0.3);
64+
box-shadow: inset 0px 1px 0px white, 0px 1px 0px rgba(255,255,255,0.7);
65+
height: 30px;
66+
width: 35px;
67+
padding: 5px 10px;
68+
display: inline-block;
69+
margin-right: -5px;
70+
text-shadow: 0px 1px 0px rgba(255,255,255,0.7);
71+
}
72+
.browser-back {
73+
border-top-left-radius: 5px;
74+
border-bottom-left-radius: 5px;
75+
}
76+
.browser-forward {
77+
border-top-right-radius: 5px;
78+
border-bottom-right-radius: 5px;
79+
}
80+
.browser-address {
81+
background: white;
82+
border: 1px solid rgba(0,0,0,0.4);
83+
display: inline-block;
84+
position: absolute;
85+
left: 90px;
86+
right: 10px;
87+
border-radius: 5px;
88+
padding: 5px 10px;
89+
height: 30px;
90+
box-shadow: inset 0px 1px 2px rgba(0,0,0,0.2), 0px 1px 0px rgba(255,255,255,0.7);
91+
}
92+
.browser-content {
93+
position: relative;
94+
height: 800px;
95+
border-radius: 7px;
96+
overflow: hidden;
97+
}
98+
.browser-content iframe {
99+
border: none;
100+
height: 100%;
101+
width: 100%;
102+
}
103+
.browser-reload {
104+
font-weight: bold;
105+
}
106+
</style>
107+
</head>
108+
<body>
109+
<div class="browser">
110+
<div class="browser-toolbar">
111+
<a class="browser-back" href="#">&#9668;</a>
112+
<a class="browser-forward" href="#">&#9658;</a>
113+
<div class="browser-address">
114+
<span style="color:#BBBBBB;">https://</span>superpencil.com <a class="browser-reload pull-right" href="#">&#x21bb;</a>
115+
</div>
116+
</div>
117+
<div class="browser-content">
118+
<iframe id="css_iframe_browser" name="css_iframe_browser" src="http://www.superpencil.com"></iframe>
109119
</div>
110120
</div>
111-
<div class="browser-content">
112-
<iframe id="my_frame" name="my_frame" src="http://www.superpencil.com"></iframe>
113-
</div>
114-
</div>
115-
116-
<script src="http://code.jquery.com/jquery-latest.js"></script>
117-
<script type="text/javascript">
118-
119-
$(function()
120-
{
121-
var $iframe = $( '#my_frame' );
122-
var frame = self.frames['my_frame'];
123-
124-
$('.browser-home').click( function( event )
125-
{
126-
event.preventDefault();
127-
frame.location.href = 'http://www.superpencil.com';
128-
} );
129-
130-
$('.browser-back').click( function( event )
131-
{
132-
event.preventDefault();
133-
frame.history.back();
134-
} );
135-
136-
$('.browser-forward').click( function( event )
137-
{
138-
event.preventDefault();
139-
frame.history.forward();
140-
} );
141-
142-
$('.browser-reload').click( function( event )
121+
<script src="http://code.jquery.com/jquery-latest.js"></script>
122+
<script type="text/javascript">
123+
$(function()
143124
{
144-
event.preventDefault();
145-
frame.location.reload();
125+
var $iframe = $( '#css_iframe_browser' );
126+
var frame = self.frames['css_iframe_browser'];
127+
$('.browser-home').click( function( event )
128+
{
129+
event.preventDefault();
130+
frame.location.href = 'http://www.superpencil.com';
131+
} );
132+
$('.browser-back').click( function( event )
133+
{
134+
event.preventDefault();
135+
frame.history.back();
136+
} );
137+
$('.browser-forward').click( function( event )
138+
{
139+
event.preventDefault();
140+
frame.history.forward();
141+
} );
142+
$('.browser-reload').click( function( event )
143+
{
144+
event.preventDefault();
145+
frame.location.reload();
146+
} );
146147
} );
147-
148-
} );
149-
150-
</script>
151-
</body>
148+
</script>
149+
</body>
152150
</html>

0 commit comments

Comments
 (0)