Skip to content

Commit 709f77a

Browse files
PascalPixelPascalPixel
committed
Fixes
1 parent 345d862 commit 709f77a

File tree

1 file changed

+146
-148
lines changed

1 file changed

+146
-148
lines changed

‎index.html‎

Lines changed: 146 additions & 148 deletions
Original file line numberDiff line numberDiff line change
@@ -1,150 +1,148 @@
11
<html>
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>
119-
</div>
120-
</div>
121-
<script src="http://code.jquery.com/jquery-latest.js"></script>
122-
<script type="text/javascript">
123-
$(function()
124-
{
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-
} );
147-
} );
148-
</script>
149-
</body>
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+
background: #eeeeee;
10+
padding: 20px;
11+
color: #979374;
12+
}
13+
.browser *, .browser *:before, .browser *:after {
14+
-webkit-box-sizing: border-box;
15+
-moz-box-sizing: border-box;
16+
box-sizing: border-box;
17+
}
18+
.browser .pull-right {
19+
float:right;
20+
}
21+
.browser .btn {
22+
cursor: pointer;
23+
}
24+
.browser a {
25+
color: inherit;
26+
text-decoration: none;
27+
}
28+
.browser a:hover, .browser a.hover {
29+
text-decoration: none;
30+
}
31+
.browser {
32+
border: 1px solid #BBB;
33+
border-radius: 0px;
34+
border-top-left-radius: 7px;
35+
border-top-right-radius: 7px;
36+
background-color: white;
37+
box-shadow: 0px 3px 5px rgba(0,0,0,0.1);
38+
position: relative;
39+
color: #788083;
40+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
41+
font-size: 14px;
42+
line-height: 19px;
43+
vertical-align: baseline;
44+
text-rendering: optimizeLegibility;
45+
-webkit-font-smoothing: antialiased;
46+
}
47+
.browser-toolbar {
48+
background-image: -moz-linear-gradient( 90deg, #c8c8c8 0%, #e2e2e2 100%);
49+
background-image: -webkit-linear-gradient( 90deg, #c8c8c8 0%, #e2e2e2 100%);
50+
background-image: -ms-linear-gradient( 90deg, #c8c8c8 0%, #e2e2e2 100%);
51+
box-shadow: inset 0px 1px 0px white;
52+
border-bottom: 1px solid rgba(0,0,0,0.4);
53+
border-top-left-radius: 7px;
54+
border-top-right-radius: 7px;
55+
height: 50px;
56+
padding: 10px;
57+
}
58+
.browser-back, .browser-forward {
59+
background-image: -moz-linear-gradient( 90deg, #c8c8c8 0%, #e2e2e2 100%);
60+
background-image: -webkit-linear-gradient( 90deg, #c8c8c8 0%, #e2e2e2 100%);
61+
background-image: -ms-linear-gradient( 90deg, #c8c8c8 0%, #e2e2e2 100%);
62+
border: 1px solid rgba(0,0,0,0.3);
63+
box-shadow: inset 0px 1px 0px white, 0px 1px 0px rgba(255,255,255,0.7);
64+
height: 30px;
65+
width: 35px;
66+
padding: 5px 10px;
67+
display: inline-block;
68+
margin-right: -5px;
69+
text-shadow: 0px 1px 0px rgba(255,255,255,0.7);
70+
}
71+
.browser-back {
72+
border-top-left-radius: 5px;
73+
border-bottom-left-radius: 5px;
74+
}
75+
.browser-forward {
76+
border-top-right-radius: 5px;
77+
border-bottom-right-radius: 5px;
78+
}
79+
.browser-address {
80+
background: white;
81+
border: 1px solid rgba(0,0,0,0.4);
82+
display: inline-block;
83+
position: absolute;
84+
left: 90px;
85+
right: 10px;
86+
border-radius: 5px;
87+
padding: 5px 10px;
88+
height: 30px;
89+
box-shadow: inset 0px 1px 2px rgba(0,0,0,0.2), 0px 1px 0px rgba(255,255,255,0.7);
90+
}
91+
.browser-content {
92+
position: relative;
93+
height: 800px;
94+
overflow: hidden;
95+
}
96+
.browser-content iframe {
97+
border: none;
98+
height: 100%;
99+
width: 100%;
100+
}
101+
.browser-reload {
102+
font-weight: bold;
103+
}
104+
</style>
105+
</head>
106+
<body>
107+
<div class="browser">
108+
<div class="browser-toolbar">
109+
<a class="browser-back" href="#">&#9668;</a>
110+
<a class="browser-forward" href="#">&#9658;</a>
111+
<div class="browser-address">
112+
<span style="color:#BBBBBB;">https://</span>superpencil.com <a class="browser-reload pull-right" href="#">&#x21bb;</a>
113+
</div>
114+
</div>
115+
<div class="browser-content">
116+
<iframe id="css_iframe_browser" name="css_iframe_browser" src="http://www.superpencil.com"></iframe>
117+
</div>
118+
</div>
119+
<script src="http://code.jquery.com/jquery-latest.js"></script>
120+
<script type="text/javascript">
121+
$(function()
122+
{
123+
var $iframe = $( '#css_iframe_browser' );
124+
var frame = self.frames['css_iframe_browser'];
125+
$('.browser-home').click( function( event )
126+
{
127+
event.preventDefault();
128+
frame.location.href = 'http://www.superpencil.com';
129+
} );
130+
$('.browser-back').click( function( event )
131+
{
132+
event.preventDefault();
133+
frame.history.back();
134+
} );
135+
$('.browser-forward').click( function( event )
136+
{
137+
event.preventDefault();
138+
frame.history.forward();
139+
} );
140+
$('.browser-reload').click( function( event )
141+
{
142+
event.preventDefault();
143+
frame.location.reload();
144+
} );
145+
} );
146+
</script>
147+
</body>
150148
</html>

0 commit comments

Comments
 (0)