-
Notifications
You must be signed in to change notification settings - Fork 0
/
contact.html
161 lines (123 loc) · 5.07 KB
/
contact.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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<html>
<head>
<title>Google Developers Group Chennai</title>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="assets/css/waves.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Google Developer Group Chennai</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a class="waves-effect waves-button" href="index.html" class="waves-effect waves-button">Home</a></li>
<li><a href="about.html" class="waves-effect waves-button">About</a></li>
<li><a href="events.html" class="waves-effect waves-button">Events</a></li>
<li><a href="subscribe.html" class="waves-effect waves-button">Subscribe</a></li>
<li><a href="contact.html" class=" active waves-effect waves-button">Contact Us</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</div><!-- /.container-fluid -->
</nav>
<div class="content-page">
<div id="googlemaps"></div>
<div id="contactform" class="col-md-6 col-md-offset-3">
<h1>Contact Us</h1>
<div id="result">
<h3>Thanks for your message !</h3>
</div>
<div class="contact-form">
<div class="form-group">
<label for="exampleInputEmail1">Your Name</label>
<input type="text" class="holo waves-button-input" id="name" placeholder="Enter name">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Email</label>
<input type="email" class="holo waves-button-input" id="email" placeholder="Enter Your Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Message</label>
<textarea class="holo waves-button-input" id="message" placeholder="Enter Your Message"></textarea>
</div>
<button id="submit" class="waves-effect waves-button waves-float" style="background: #01BCFF;color:#fff">Send</button>
</div>
</div>
</div>
<div class="footer col-md-12">
<p>Crafted with <span>♥</span> by <a href="http://www.skcript.com">Skcript</a></p>
</div>
</body>
<!-- Include the Google Maps API library - required for embedding maps -->
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
// The latitude and longitude of your business / place
var position = [13.0475604,80.2088767];
function showGoogleMaps() {
var latLng = new google.maps.LatLng(position[0], position[1]);
var mapOptions = {
scrollwheel: false,
zoom: 10, // initialize zoom level - the max value is 21
streetViewControl: false, // hide the yellow Street View pegman
zoomControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: latLng,
scaleControl: false,
draggable: false,
};
map = new google.maps.Map(document.getElementById('googlemaps'),
mapOptions);
// Show the default red marker at the location
marker = new google.maps.Marker({
position: latLng,
map: map,
draggable: false,
animation: google.maps.Animation.DROP
});
}
google.maps.event.addDomListener(window, 'load', showGoogleMaps);
</script>
<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/waves.js"></script>
<script type="text/javascript">
Waves.displayEffect();
</script>
<script type="text/javascript" src="assets/js/bootstrap.js"></script>
<script type="text/javascript">
$('#result').hide();
$("#submit").click(function(event){
var name=$("#name").val();
var email=$("#email").val();
var message= $("#message").val();
$('#result,#name,#email,#message').empty();
$('#message,#name,#email').css( "border","1px solid #fff" );
if(name==''){
$('#name').css( "border-bottom","1px solid red" );
}
if(email==''){
$('#email').css( "border-bottom","1px solid red" );
}
if(message==''){
$('#message').css( "border-bottom","1px solid red" );
}
if(name!='' && email!='' && message!='')
$.post( "mail.php",{ message:message, name: name, email:email}, function(data) {
$(".contact-form").hide();
$('#result').append(data).fadeIn(4000);
}
);
});
</script>
</html>