Skip to content

Commit d07252b

Browse files
PascalPixelPascalPixel
committed
Initial browser design
0 parents  commit d07252b

File tree

1 file changed

+152
-0
lines changed

1 file changed

+152
-0
lines changed

‎index.html‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
<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>
109+
</div>
110+
</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 )
143+
{
144+
event.preventDefault();
145+
frame.location.reload();
146+
} );
147+
148+
} );
149+
150+
</script>
151+
</body>
152+
</html>

0 commit comments

Comments
 (0)