Skip to content

Instantly share code, notes, and snippets.

@agustinhaller

agustinhaller/create_business.html

Created January 28, 2013 23:19
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save agustinhaller/4660207 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save agustinhaller/4660207 to your computer and use it in GitHub Desktop.
Download ZIP
createB
Raw
create_business.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Bumbea.com</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Bootstrap -->
<link rel="stylesheet" href="./css/bootstrap.css">
<link rel="stylesheet" href="./css/font-awesome.css">
<link rel="stylesheet" href="./css/zocial.css">
<link rel="stylesheet" href="./css/jquery.rating.css">
<link rel="stylesheet" href="./css/main.css">
<script src="./js/vendor/modernizr-2.6.1-respond-1.1.0.min.js"></script>
</head>
<body class="create-business">
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<header>
<h1 class="main-title">
<a href="." title="Bumbea.com">
<img src="./img/logo.png" alt="Bumbea"/>
</a>
</h1>
<section class="search-wrapper">
<div class="input-append search-container">
<input class="search-input" type="text" placeholder="¿Que estas buscando?"/>
<a class="search-btn" href="#" title="Buscar"><i class="icon-search"></i></a>
</div>
</section>
<section class="header-actions">
<ul class="unstyled actions-list">
<li>
<a href="#" title="Ingresar">Ingresar</a>
</li>
<li>
<a href="#" title="Registrarse">Registrarse</a>
</li>
</ul>
</section>
</header>
<div class="navbar">
<div class="navbar-inner main-navbar">
<div class="container">
<a href="." class="home-btn"><i class="icon-home"></i></a>
<div class="nav-collapse">
<ul class="nav">
<li class="divider-vertical"></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Categorias <b class="caret"></b></a>
<ul class="dropdown-menu categories-menu">
<li class="nav-header">Tecnología</li>
<li>
<ul class="sub-category">
<li>
<a href="#" title="">
<img class="category-image" src="./img/categories/notebook-icon.png" alt=""/>
<span>Computadoras</span>
</a>
</li>
<li>
<a href="#" title="">
<img class="category-image" src="./img/categories/phone-icon.png" alt=""/>
<span>Teléfonos</span>
</a>
</li>
<li>
<a href="#" title="">
<img class="category-image" src="./img/categories/tv-icon.png" alt=""/>
<span>Televisores</span>
</a>
</li>
</ul>
</li>
<li class="divider"></li>
<li class="nav-header">Otros</li>
<li>
<ul class="sub-category">
<li>
<a href="#" title="">
<img class="category-image" src="./img/categories/phone-icon.png" alt=""/>
<span>Teléfonos</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="divider-vertical"></li>
<li><a href="#">Todo</a></li>
<li class="divider-vertical"></li>
<li><a href="#">Más Vistos</a></li>
<li class="divider-vertical"></li>
<li><a href="#">Destacados</a></li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Acerca de <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Ayuda</a></li>
<li class="divider"></li>
<li><a href="#">Equipo</a></li>
<li class="divider"></li>
<li><a href="#">Condiciones del servicio</a></li>
<li><a href="#">Politicas de privacidad</a></li>
<li class="divider"></li>
<li><a href="#">Copyright</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<!-- END NAVBAR -->
<div class="container">
<style>
.business-search
{
margin: 0px 0px 10px 0px;
}
.business-search .search-container
{
text-align: center;
height: 60px;
}
.business-search .search-input
{
width: 600px;
background: hsl(202, 79%, 58%);
color: white !important;
border-color: hsl(211, 59%, 55%);
border-radius: 3px;
margin-bottom: 0px;
}
.business-search .search-input::-webkit-input-placeholder { /* WebKit browsers */
color: #F1F1F1;
}
.business-search .search-input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #F1F1F1;
}
.business-search .search-input::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #F1F1F1;
}
.business-search .search-input:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #F1F1F1;
}
.business-search .search-btn
{
color: #f2f2f2;
}
.business-search .search-btn .icon-search
{
opacity: 1;
}
.business-search .search-input:focus {
background: hsl(202, 79%, 67%);
}
.business-search .search-btn:hover
{
color: #fff;
}
.business-search .help-block
{
margin: 0px 167px;
}
.main-content .business-results
{
background: white;
padding: 20px;
display: inline-block;
margin-bottom: 50px;
}
.business-results .map-results #map_canvas
{
width: 570px;
height: 250px;
}
.business-results .map-suggetions
{
display: inline-block;
width: 328px;
}
.map-suggetions .suggestions-list
{
margin: 0px;
padding: 0px;
list-style: none;
display: inline-block;
width: 310px;
margin-left: 15px;
}
.map-suggetions .suggestions-list li.suggested-item
{
margin: 8px 5px;
float: left;
width: 130px;
}
.map-suggetions .tooltip
{
display: block;
position: relative;
top: 0px;
left: 0px;
width: 168px;
}
.suggestions-list li.suggested-item a
{
padding: 4px 8px;
color: hsl(200, 50%, 45%);
background-color: hsl(200, 65%, 91%);
border: 1px solid hsl(190, 65%, 84%);
border-radius: 2px;
text-decoration: none;
}
.suggestions-list li.suggested-item a:hover
{
color: hsl(200, 50%, 40%);
background-color: hsl(200, 65%, 86%);
border: 1px solid hsl(190, 65%, 79%);
}
.business-results .business-data
{
clear: both;
display: inline-block;
}
.business-data .form-horizontal .control-label
{
width: 80px;
}
.business-data .form-horizontal .controls {
margin-left: 95px;
}
.business-data .form-horizontal .control-group {
margin: 6px 0px;
float: left;
}
.business-data .form-horizontal .continue-btn
{
width: 190px;
margin: 0px 20px;
}
</style>
<div class="main-content">
<section class="search-wrapper business-search">
<div class="input-append search-container">
<input class="search-input" type="text" placeholder="¿Que empresa estas buscando?"/>
<a class="search-btn" href="#" title="Buscar"><i class="icon-search"></i></a>
</div>
<span class="help-block">Trataremos de ayudarte a encontrar los datos de la empresa que estas buscando :)</span>
</section>
<div class="thumbnail business-results">
<div class="pull-left map-results">
<div id="map_canvas"></div>
</div>
<div class="pull-right map-suggetions">
<ul class="suggestions-list">
<li class="suggested-item"><a href="#">bla blaadg</a></li>
<li class="suggested-item"><a href="#">bla blaa</a></li>
<li class="suggested-item"><a href="#">bla blaasd,dakj</a></li>
<li class="suggested-item"><a href="#">bla bla</a></li>
<li class="suggested-item"><a href="#">bla blaad</a></li>
</ul>
<div class="tooltip right in pull-left">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">Al seleccionar las empresas que te mostramos en el mapa se cargaran los datos correspondientes</div>
</div>
</div>
<div class="business-data">
<form class="form-horizontal">
<legend>Datos de la empresa</legend>
<div class="control-group">
<label class="control-label" for="business-name">Nombre</label>
<div class="controls">
<input class="input-xlarge" type="text" id="business-name" name="business-name" placeholder="Nombre de la empresa">
</div>
</div>
<div class="control-group">
<label class="control-label" for="business-address">Dirección</label>
<div class="controls">
<input class="input-xlarge" type="text" id="business-address" name="business-address" placeholder="Av. Rivera 4482">
</div>
</div>
<div class="control-group">
<label class="control-label" for="business-phone">Teléfono</label>
<div class="controls">
<input class="input-xlarge" type="text" id="business-phone" name="business-phone" placeholder="+598 1234 1234">
</div>
</div>
<div class="control-group">
<label class="control-label" for="business-web">Web</label>
<div class="controls">
<input class="input-xlarge" type="text" id="business-web" name="business-web" placeholder="http://motociclo.com.uy">
</div>
</div>
<div class="control-group">
<label class="control-label" for="business-opening">Atención</label>
<div class="controls">
<input class="input-xlarge" type="text" id="business-opening" name="business-opening" placeholder="Lun a Vie de 10 a 19 hs">
</div>
</div>
<div class="control-group">
<button type="submit" id="btnContinue" class="btn btn-primary continue-btn pull-right">Continuar</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- /container -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="./js/vendor/jquery-1.8.2.min.js"><\/script>')</script>
<script src="./js/vendor/jquery-ui-1.9.1.custom.min.js"></script>
<script src="./js/vendor/bootstrap.min.js"></script>
<script src="./js/vendor/jquery.rating.js"></script>
<script src="./js/vendor/jquery.timeago.js"></script>
<script src="./js/vendor/jquery.timeago.es.js"></script>
<script src="./js/main.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyChFXu2DPpaRjaMMY4uLqVkBWhdvLO9RRM&sensor=true" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(
function(){
initialize();
}
);
function initialize() {
var myLatlng = new google.maps.LatLng(-34.905079,-56.139643);
var myOptions = {
zoom: 15,
center: myLatlng,
mapTypeControlOptions: {
// Para que no aparezca ningun control que moleste
// mapTypeIds: [],
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'hybrid'],
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// El marcador que indica donde esta el Edificio Le Premier...
var image = new google.maps.MarkerImage(
"img/marker.png",
new google.maps.Size(46,42),
new google.maps.Point(0,0),
new google.maps.Point(23,42)
);
var shadow = new google.maps.MarkerImage(
"img/shadow.png",
new google.maps.Size(70,42),
new google.maps.Point(0,0),
new google.maps.Point(23,42)
);
var shape = {
coord: [42,0,43,1,43,2,44,3,45,4,45,5,44,6,44,7,44,8,44,9,44,10,44,11,44,12,43,13,43,14,45,15,43,16,43,17,42,18,42,19,42,20,41,21,41,22,41,23,40,24,40,25,40,26,41,27,40,28,42,29,42,30,42,31,42,32,42,33,40,34,39,35,39,36,38,37,38,38,36,39,35,40,32,41,8,41,3,40,2,39,1,38,1,37,0,36,0,35,0,34,0,33,0,32,0,31,1,30,1,29,1,28,2,27,0,26,0,25,0,24,0,23,1,22,1,21,1,20,1,19,1,18,1,17,1,16,2,15,2,14,2,13,2,12,2,11,3,10,3,9,3,8,3,7,3,6,4,5,4,4,4,3,5,2,6,1,7,0,42,0],
type: 'poly'
};
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
shape: shape,
icon: image,
shadow: shadow
});
}
</script>
<script>
// Here goes the magic!
$(document).ready(function(){
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment