├── README.md
├── images
    ├── favicon.png
    ├── siren.mp3
    ├── sos.jpeg
    ├── stop.png
    └── wallpaper.jpg
├── includes
    ├── call1.php
    ├── call2.php
    └── call3.php
├── index.html
├── page_four.html
├── page_one.html
├── page_three.html
├── page_two.html
└── style.css


/README.md:
--------------------------------------------------------------------------------
1 | # Women-safety-web-application
2 | 
3 | A Dynamic web project for women safety and security with auto location tracking.


--------------------------------------------------------------------------------
/images/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Adyasha8105/Women-safety-web-application/473b286b610a417e00273e0bcfd9d36b74a25c60/images/favicon.png


--------------------------------------------------------------------------------
/images/siren.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Adyasha8105/Women-safety-web-application/473b286b610a417e00273e0bcfd9d36b74a25c60/images/siren.mp3


--------------------------------------------------------------------------------
/images/sos.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Adyasha8105/Women-safety-web-application/473b286b610a417e00273e0bcfd9d36b74a25c60/images/sos.jpeg


--------------------------------------------------------------------------------
/images/stop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Adyasha8105/Women-safety-web-application/473b286b610a417e00273e0bcfd9d36b74a25c60/images/stop.png


--------------------------------------------------------------------------------
/images/wallpaper.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Adyasha8105/Women-safety-web-application/473b286b610a417e00273e0bcfd9d36b74a25c60/images/wallpaper.jpg


--------------------------------------------------------------------------------
/includes/call1.php:
--------------------------------------------------------------------------------
 1 | <?php 
 2 | if(isset($_POST['SubmitButton']))
 3 | {
 4 | $textMessage=$_POST["userMessage"];
 5 | $mobileNumber=$_POST["userMobile"];
 6 | $apiKey = urlencode('6IP34XsyTO4-U0RsiyeMy4tXIAP413yMZlVc0Wp1Yk');
 7 |    
 8 |    // Message details
 9 |    $numbers = array($mobileNumber);
10 |    $sender = urlencode('TXTLCL');
11 |    $message = rawurlencode($textMessage);
12 |    $numbers = implode(',', $numbers);
13 |    // Prepare data for POST request
14 |    $data = array('apikey' => $apiKey, 'numbers' => $numbers, "sender" => $sender, "message" => $message);
15 |    // Send the POST request with cURL
16 |    $ch = curl_init('https://api.textlocal.in/send/');
17 |    curl_setopt($ch, CURLOPT_POST, true);
18 |    curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
19 |    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
20 |    $response = curl_exec($ch);
21 |    curl_close($ch);   
22 |    // Process your response here
23 |    echo $response;
24 | }    
25 | ?>


--------------------------------------------------------------------------------
/includes/call2.php:
--------------------------------------------------------------------------------
 1 | <?php 
 2 | if(isset($_POST['SubmitButton2']))
 3 | {
 4 | $textMessage=$_POST["userMessage2"];
 5 | $mobileNumber=$_POST["userMobile2"];
 6 | $apiKey = urlencode('6IP34XsyTO4-U0RsiyeMy4tXIAP413yMZlVc0Wp1Yk');
 7 |    
 8 |    // Message details
 9 |    $numbers = array($mobileNumber);
10 |    $sender = urlencode('TXTLCL');
11 |    $message = rawurlencode($textMessage);
12 |    $numbers = implode(',', $numbers);
13 |    // Prepare data for POST request
14 |    $data = array('apikey' => $apiKey, 'numbers' => $numbers, "sender" => $sender, "message" => $message);
15 |    // Send the POST request with cURL
16 |    $ch = curl_init('https://api.textlocal.in/send/');
17 |    curl_setopt($ch, CURLOPT_POST, true);
18 |    curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
19 |    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
20 |    $response = curl_exec($ch);
21 |    curl_close($ch);   
22 |    // Process your response here
23 |    echo $response;
24 | }    
25 | ?>


--------------------------------------------------------------------------------
/includes/call3.php:
--------------------------------------------------------------------------------
 1 | <?php 
 2 | if(isset($_POST['SubmitButton']))
 3 | {
 4 | $textMessage=$_POST["userMessage"];
 5 | $mobileNumber=$_POST["userMobile"];
 6 | $apiKey = urlencode('6IP34XsyTO4-U0RsiyeMy4tXIAP413yMZlVc0Wp1Yk');
 7 |    
 8 |    // Message details
 9 |    $numbers = array($mobileNumber);
10 |    $sender = urlencode('TXTLCL');
11 |    $message = rawurlencode($textMessage);
12 |    $numbers = implode(',', $numbers);
13 |    // Prepare data for POST request
14 |    $data = array('apikey' => $apiKey, 'numbers' => $numbers, "sender" => $sender, "message" => $message);
15 |    // Send the POST request with cURL
16 |    $ch = curl_init('https://api.textlocal.in/send/');
17 |    curl_setopt($ch, CURLOPT_POST, true);
18 |    curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
19 |    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
20 |    $response = curl_exec($ch);
21 |    curl_close($ch);   
22 |    // Process your response here
23 |    echo $response;
24 | }    
25 | ?>


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html class="gr__html5webtemplates_co_uk"><head>
 3 | <link href='https://fonts.googleapis.com/css?family=New Rocker' rel='stylesheet'>
 4 | <link href='https://fonts.googleapis.com/css?family=Bellefair' rel='stylesheet'>
 5 | <link href='https://fonts.googleapis.com/css?family=Yatra One' rel='stylesheet'>
 6 | <link href='https://fonts.googleapis.com/css?family=Bonbon' rel='stylesheet'>
 7 | <link href='https://fonts.googleapis.com/css?family=Princess Sofia' rel='stylesheet'>
 8 | <link href='https://fonts.googleapis.com/css?family=Amarante' rel='stylesheet'>
 9 | <link rel="icon" href="./images/favicon.png" sizes="16x16">
10 |   <title>Women Safety</title>
11 |   <meta name="description" content="website description">
12 |   <meta name="keywords" content="website keywords, website keywords">
13 |   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
14 |   <link rel="stylesheet" type="text/css" href="style.css" title="style">
15 | </head>
16 | 
17 | <body data-gr-c-s-loaded="true" class="vsc-initialized">
18 |   <div id="main">
19 |     <div id="header">
20 |       <div id="logo">
21 |         <div id="logo_text">
22 |           <!-- class="logo_colour", allows you to change the colour of the text -->
23 |           <h1><a href="#"><span class="logo_colour"> Hey!!! &nbsp</span><span class="logo_colour2">Making Sure Your Safety</span></a></h1>
24 |           <h2>Take care of yourself. Many people out there loves you</h2>
25 |         </div>
26 |       </div>
27 |       <div id="menubar">
28 |         <ul id="menu">
29 |           <!-- put class="selected" in the li tag for the selected page - to highlight which page you're on -->
30 |           <li class="selected"><a href="index.html">Welcome Page</a></li>
31 |           <li><a href="page_one.html">Navigation</a></li>
32 |           <li><a href="page_two.html">Safe Zone</a></li>
33 |           <li><a href="page_three.html">Guardians</a></li>
34 |           <li><a href="page_four.html">Safety Alarm</a></li>
35 |         </ul>
36 |       </div>
37 |     </div>
38 |     <div id="site_content">
39 |       <div class="sidebar">
40 |         <!-- insert your sidebar items here -->
41 |         <h3>Latest News</h3>
42 |         <h4>Unsafe Workspace</h4>
43 |         <h5>Women being Molested in workplace</h5>
44 |         <p>Shivani Verma, a software engineer working in an MNC, who normally stayed back till late night at work was molested by her co-workers. She then complained about the same to the company officials and filed a case against the culprits. Culprits arrested the next hour.<br></p>
45 |         <p></p>
46 |         <h4>Say No to quiting jobs</h4>
47 |         <h5>Its time for culprits to stop crime. Let's all stand hand in hand</h5>
48 |         <p>Violence to women is taken very seriously by Indian Govt. and culprits are punished as soon as the crime is registered. Each and every organization has to follow rules and regulations to make sure safety of women. Say NO to quiting jobs and stay strong and bold<br></p>
49 | 
50 |       </div>
51 |       <div id="content">
52 |         <!-- insert the page content here -->
53 |         <h1 style="text-align: left;">Nayana Singh</h1>
54 |         <form action="#" method="post">
55 |           <div class="form_settings">
56 |             <p><span>
57 |             India has been ranked as the most dangerous country out of the world’s 10 worst countries for women, behind Afghanistan, Pakistan and Somalia, according to a poll conducted by the Thomson Reuters Foundation.
58 | </br></br>
59 | The same poll conducted in 2011 had placed India at the fourth place. The findings are based on perceptions of experts on women’s issues.
60 | </br></br>
61 | India was followed by Afghanistan, Syria, Somalia, Saudi Arabia, Pakistan, Democratic Republic of Congo, Yemen, Nigeria and U.S.A — in that order.
62 | </br></br>
63 | “The world’s second most populous nation, with 1.3 billion people, ranked as the most dangerous on three of the topic questions — the risk of sexual violence and harassment against women, the danger women face from cultural, tribal and traditional practices, and the country where women are most in danger of human trafficking including forced labour, sex slavery and domestic servitude,” according to the Foundation.</span>
64 |              <img src="images/wallpaper.jpg" alt="BestPic" width="350" height="auto" align="right">
65 |             <!--<input class="contact" name="your_name" type="text"></p>
66 |             <p><span>Email Address</span><input class="contact" name="your_email" type="text"></p>
67 |             <p><span>Message</span><textarea class="contact textarea" rows="8" cols="50" name="your_enquiry"></textarea></p> -->
68 |             <!--<p style="padding-top: 15px"><span>&nbsp;</span><input class="submit" name="contact_submitted" value="submit" type="submit"></p>-->
69 |           </div>
70 |         </form>
71 |         <!--<p><br><br>NOTE: A contact form such as this would require some way of emailing the input to an email address.</p>-->
72 |       </div>
73 |     </div>
74 |     <div id="footer">
75 |       With Love ❤️ Team Virus vixens<!--| <a href="http://validator.w3.org/check?uri=referer">HTML5</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> | from <a href="http://www.html5webtemplates.co.uk/">free HTML5 templates</a> -->
76 |     </div>
77 |   </div>
78 | 
79 | 
80 | </body><span class="gr__tooltip"><span class="gr__tooltip-content"></span><i class="gr__tooltip-logo"></i><span class="gr__triangle"></span></span></html>


--------------------------------------------------------------------------------
/page_four.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html class="gr__html5webtemplates_co_uk"><head>
 3 | <link href='https://fonts.googleapis.com/css?family=New Rocker' rel='stylesheet'>
 4 | <link href='https://fonts.googleapis.com/css?family=Bellefair' rel='stylesheet'>
 5 | <link href='https://fonts.googleapis.com/css?family=Yatra One' rel='stylesheet'>
 6 | <link href='https://fonts.googleapis.com/css?family=Bonbon' rel='stylesheet'>
 7 | <link href='https://fonts.googleapis.com/css?family=Princess Sofia' rel='stylesheet'>
 8 | <link href='https://fonts.googleapis.com/css?family=Amarante' rel='stylesheet'>
 9 |   <title>Women Safety</title>
10 |   <meta name="description" content="website description">
11 |   <meta name="keywords" content="website keywords, website keywords">
12 |   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
13 |   <link rel="stylesheet" type="text/css" href="style.css" title="style">
14 | </head>
15 | 
16 | <body data-gr-c-s-loaded="true" class="vsc-initialized">
17 |   <div id="main">
18 |     <div id="header">
19 |       <div id="logo">
20 |         <div id="logo_text">
21 |           <!-- class="logo_colour", allows you to change the colour of the text -->
22 |           <h1><a href="#"><span class="logo_colour"> Hey!!! &nbsp</span><span class="logo_colour2">Making Sure Your Safety</span></a></h1>
23 |           <h2>Take care of yourself. Many people out there loves you</h2>
24 |         </div>
25 |       </div>
26 |       <div id="menubar">
27 |         <ul id="menu">
28 |           <!-- put class="selected" in the li tag for the selected page - to highlight which page you're on -->
29 |           <li><a href="index.html">Welcome Page</a></li>
30 |           <li><a href="page_one.html">Navigation</a></li>
31 |           <li><a href="page_two.html">Safe Zone</a></li>
32 |           <li><a href="page_three.html">Guardians</a></li>
33 |           <li class="selected"><a href="page_four.html">Safety Alarm</a></li>
34 |         </ul>
35 |       </div>
36 |     </div>
37 |    
38 |    <script>
39 |   function play(){
40 |        var audio = document.getElementById("audio");
41 |        audio.play();
42 |        }
43 | 
44 | function pause(){
45 |        var audio = document.getElementById("audio");
46 |        audio.pause();
47 |        }
48 | 
49 |    </script>
50 | 
51 | <audio id="audio" src="images/siren.mp3" ></audio>
52 | 
53 | 
54 |   <div id="site_content">
55 |       <div class="zoomimage">
56 |               <img src="images/sos.jpeg" onclick="play()" width="auto" height="auto" padding="10px"  style="margin:20px 20px 20px 20px; max-width:47%; max-height: 47%;">
57 | 		<img src="images/stop.png" onclick="pause()" width="auto" height="auto" padding="10px"  style="margin:20px 20px 20px 20px">
58 |        
59 |     </div>
60 |     <br>
61 |       <div id="content">
62 |         <!-- insert the page content here -->
63 |         <h1 class="center">!!!Keep Calm Someone will hear you and come for help... !!!</h1>
64 |         
65 |     </div>
66 |     
67 |   </div>
68 | 
69 |  
70 |   <div id="footer">
71 |       With Love by ❤️ Team Virus vixens<!--| <a href="http://validator.w3.org/check?uri=referer">HTML5</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> | from <a href="http://www.html5webtemplates.co.uk/">free HTML5 templates</a> -->
72 |     </div>
73 | </body><span class="gr__tooltip"><span class="gr__tooltip-content"></span><i class="gr__tooltip-logo"></i><span class="gr__triangle"></span></span></html>


--------------------------------------------------------------------------------
/page_one.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <title>Women Safety</title>
  5 |     <link rel="stylesheet" type="text/css" href="style.css" title="style">
  6 |     <style>
  7 |       #menubar{
  8 |         width:1600px !important;
  9 |       }
 10 |       ul#menu{
 11 |         transform: translatex(30%) !important;
 12 |       }
 13 |       #right-panel {
 14 |         font-family: 'Roboto','sans-serif';
 15 |         
 16 |       }
 17 | 
 18 |       #right-panel select, #right-panel input {
 19 |         font-size: 15px;
 20 |       }
 21 | 
 22 |       #right-panel select {
 23 |         width: 100%;
 24 |       }
 25 | 
 26 |       #right-panel i {
 27 |         font-size: 12px;
 28 |       }
 29 |       html, body {
 30 |         height: 100%;
 31 |         margin: 0;
 32 |         padding: 0;
 33 |       }
 34 |       #map {
 35 |         height: 100%;
 36 |         width: 80%;
 37 |       }
 38 |       #right-panel {
 39 |         float: right;
 40 |         width: 10%;
 41 |       }
 42 |       #output {
 43 |         font-size: 11px;
 44 |       }
 45 |     </style>
 46 |   </head>
 47 |   <body>
 48 | <div id="menubar">
 49 |         <ul id="menu">
 50 |           <!-- put class="selected" in the li tag for the selected page - to highlight which page you're on -->
 51 |           <li><a href="index.html">Welcome Page</a></li>
 52 |           <li><a href="page_one.html">Navigation</a></li>
 53 |           <li><a href="page_two.html">Safe Zone</a></li>
 54 |           <li class="selected"><a href="page_three.html">Guardians</a></li>
 55 |           <li><a href="page_four.html">Safety Alarm</a></li>
 56 |         </ul>
 57 |       </div>
 58 |     <div id="right-panel">
 59 |       <div id="inputs">
 60 |       </div>
 61 |       <div>
 62 |         <strong>Results</strong>
 63 |       </div>
 64 |       <div id="output"></div>
 65 |     </div>
 66 |     <div id="map"></div>
 67 |     <script>
 68 |       function initMap() {
 69 |         var bounds = new google.maps.LatLngBounds;
 70 |         var markersArray = [];
 71 | 
 72 |         var origin = {lat: 12.9197, lng: 77.6836};
 73 |         var destination = {lat: 12.9288891, lng: 77.62845209999999};
 74 | 
 75 |         var destinationIcon = 'https://chart.googleapis.com/chart?' +
 76 |             'chst=d_map_pin_letter&chld=D|FF0000|000000';
 77 |         var originIcon = 'https://chart.googleapis.com/chart?' +
 78 |             'chst=d_map_pin_letter&chld=O|FFFF00|000000';
 79 |         var map = new google.maps.Map(document.getElementById('map'), {
 80 |           center: {lat: 12.9197, lng: 77.6836},
 81 |           zoom: 10
 82 |         });
 83 |         var geocoder = new google.maps.Geocoder;
 84 | 
 85 |         var service = new google.maps.DistanceMatrixService;
 86 |         service.getDistanceMatrix({
 87 |           origins: [origin],
 88 |           destinations: [destination],
 89 |           travelMode: 'DRIVING',
 90 |           unitSystem: google.maps.UnitSystem.METRIC,
 91 |           avoidHighways: false,
 92 |           avoidTolls: false
 93 |         }, function(response, status) {
 94 |           if (status !== 'OK') {
 95 |             alert('Error was: ' + status);
 96 |           } else {
 97 |             var originList = response.originAddresses;
 98 |             var destinationList = response.destinationAddresses;
 99 |             var outputDiv = document.getElementById('output');
100 |             outputDiv.innerHTML = '';
101 |             deleteMarkers(markersArray);
102 | 
103 |             var showGeocodedAddressOnMap = function(asDestination) {
104 |               var icon = asDestination ? destinationIcon : originIcon;
105 |               return function(results, status) {
106 |                 if (status === 'OK') {
107 |                   map.fitBounds(bounds.extend(results[0].geometry.location));
108 |                   markersArray.push(new google.maps.Marker({
109 |                     map: map,
110 |                     position: results[0].geometry.location,
111 |                     icon: icon
112 |                   }));
113 |                 } else {
114 |                   alert('Geocode was not successful due to: ' + status);
115 |                 }
116 |               };
117 |             };
118 | 
119 |             for (var i = 0; i < originList.length; i++) {
120 |               var results = response.rows[i].elements;
121 |               geocoder.geocode({'address': originList[i]},
122 |                   showGeocodedAddressOnMap(false));
123 |               for (var j = 0; j < results.length; j++) {
124 |                 geocoder.geocode({'address': destinationList[j]},
125 |                     showGeocodedAddressOnMap(true));
126 |                 outputDiv.innerHTML += originList[i] + ' to ' + destinationList[j] +
127 |                     ': ' + results[j].distance.text + ' in ' +
128 |                     results[j].duration.text + '<br>';
129 |               }
130 |             }
131 |           }
132 |         });
133 |       }
134 | 
135 |       function deleteMarkers(markersArray) {
136 |         for (var i = 0; i < markersArray.length; i++) {
137 |           markersArray[i].setMap(null);
138 |         }
139 |         markersArray = [];
140 |       }
141 |     </script>
142 |     <script async defer
143 |     src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBbl-QdcG2sHyqxz4Qu_ZE7pjmZNY1KP7I&callback=initMap">
144 |     </script>
145 |   </body>
146 | </html>
147 | 


--------------------------------------------------------------------------------
/page_three.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html class="gr__html5webtemplates_co_uk"><head>
  3 | <link href='https://fonts.googleapis.com/css?family=New Rocker' rel='stylesheet'>
  4 | <link href='https://fonts.googleapis.com/css?family=Bellefair' rel='stylesheet'>
  5 | <link href='https://fonts.googleapis.com/css?family=Bonbon' rel='stylesheet'>
  6 | <link href='https://fonts.googleapis.com/css?family=Princess Sofia' rel='stylesheet'>
  7 | <link href='https://fonts.googleapis.com/css?family=Amarante' rel='stylesheet'>
  8 | <link href='https://fonts.googleapis.com/css?family=Yatra One' rel='stylesheet'>
  9 |   <title>Women Safety</title>
 10 |   <meta name="description" content="website description">
 11 |   <meta name="keywords" content="website keywords, website keywords">
 12 |   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 13 |   <link rel="stylesheet" type="text/css" href="style.css" title="style">
 14 | </head>
 15 | <?php include 'includes/call1.php';?>
 16 | <?php include 'includes/call2.php';?>
 17 | <?php include 'includes/call3.php';?>
 18 | 
 19 | <script type="text/javascript">
 20 | function clearAllFields1(){
 21 |     number1.value="";
 22 |     textMessage1.value="";
 23 | }
 24 | function clearAllFields2(){
 25 |     number2.value="";
 26 |     textMessage2.value="";
 27 | }
 28 | function clearAllFields3(){
 29 |     number3.value="";
 30 |     textMessage3.value="";
 31 | }
 32 | function change1()
 33 | {
 34 | 	number1.value="7922823736";
 35 | }
 36 | function change2()
 37 | {
 38 | 	number1.value="8758538174";
 39 | }
 40 | function change3()
 41 | {
 42 | 	number1.value="9664842668";
 43 | }
 44 | function change4()
 45 | {
 46 | 	number1.value="7355307053";
 47 | }
 48 | function change5()
 49 | {
 50 | 	number1.value="8046800120";
 51 | }
 52 | function change6()
 53 | {
 54 | 	number1.value="9825042341";
 55 | }
 56 | function change7()
 57 | {
 58 | 	number1.value="7698225243";
 59 | }
 60 | function change8()
 61 | {
 62 | 	number1.value="7922823272";
 63 | }
 64 | </script>
 65 | <body data-gr-c-s-loaded="true" class="vsc-initialized">
 66 |   <div id="main">
 67 |     <div id="header">
 68 |       <div id="logo">
 69 |         <div id="logo_text">
 70 |           <!-- class="logo_colour", allows you to change the colour of the text -->
 71 |           <h1><a href="#"><span class="logo_colour"> Hey!!! &nbsp</span><span class="logo_colour2">Making Sure Your Safety</span></a></h1>
 72 |           <h2>Take care of yourself. Many people out there loves you</h2>
 73 |         </div>
 74 |       </div>
 75 |       <div id="menubar">
 76 |         <ul id="menu">
 77 |           <!-- put class="selected" in the li tag for the selected page - to highlight which page you're on -->
 78 |           <li><a href="index.html">Welcome Page</a></li>
 79 |           <li><a href="page_one.html">Navigation</a></li>
 80 |           <li><a href="page_two.html">Safe Zone</a></li>
 81 |           <li class="selected"><a href="page_three.html">Guardians</a></li>
 82 |           <li><a href="page_four.html">Safety Alarm</a></li>
 83 |         </ul>
 84 |       </div>
 85 |     </div>
 86 |     <div id="site_content">
 87 |       <div class="sidebar">
 88 |         <!-- insert your sidebar items here -->
 89 |         <h3>Hey There!!! It is always good to stay in touch with family</h3>
 90 | 	<p >Click on the name to send them message</p>	
 91 |         <h4 onclick="change6()">Papa</h4>
 92 |         <p >Active</p>
 93 |         
 94 | 	<h4 onclick="change7()">Mummy</h4>
 95 |         <p >Active</p>
 96 |         
 97 | 	<h4 onclick="change8()">Husband</h4>
 98 |         <p>Silent</p>
 99 |         
100 | 	<h4 onclick="change1()">Jahnvi</h4>
101 |         <p>Active</p>
102 |         
103 | 	<h4 onclick="change2()">Raj </h4>
104 |         <p>Silent</p>
105 |         
106 | 	<h4 onclick="change3()">Smit</h4>
107 |         <p>Active</p>
108 |         
109 | 	<h4 onclick="change4()">Aastha</h4>
110 |         <p>Silent</p>
111 |         
112 | 	<h4 onclick="change5()">Kajal</h4>
113 |         <p>Vibration</p>
114 |         
115 |         
116 |       </div>
117 |       <div id="content1" >
118 |         </br></br>
119 |        <button type="call" name="callsafety"class="btn btn-outline-primary mt-3" id="btncall">Call 1901</button>
120 |              <div class="container mt-3">
121 |                 <form method="POST" action="#">
122 |                   </br>
123 |                   <label for="lblMobileNumber">Mobile Number 1</label>
124 | 		</br>	
125 |                   <input type="tel" name="userMobile1" class="form-control" id="number1" value="8884014669" placeholder="8884014669"  required    pattern="[789][0-9]{9}" oninvalid="PleaseEnterProperMobileNumber" >
126 |                   </br>
127 |                   <label for="lblMessage">Message</label></br>
128 |                   <textarea class="form-control"  name="userMessage1" required  id="textMessage1" rows="3"  placeholder="Please save me. I am in Danger" maxlength="158">Please save me. I am in Danger</textarea>     
129 | </br>
130 |                   <button type="submit" name="SubmitButton1"class="btn btn-outline-primary mt-3" id="btnSend">Send</button>
131 |                   &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
132 |                   <button type="button" class="btn btn-outline-secondary mt-3 ml-3" onclick="clearAllFields1()">Clear</button>
133 |                 </form>
134 |           
135 |       
136 |     </div>
137 |    <div class="container mt-3">
138 |         
139 |                 <form method="POST" action="#">
140 |                   </br>
141 |                   <label for="lblMobileNumber">Mobile Number 2</label>
142 | 		</br>	
143 |                   <input type="tel" name="userMobile2" class="form-control" id="number2" value="9825042341" placeholder="9825042341"  required    pattern="[789][0-9]{9}" oninvalid="PleaseEnterProperMobileNumber" >
144 |                   </br>
145 |                   <label for="lblMessage">Message</label></br>
146 |                   <textarea class="form-control"  name="userMessage2" required  id="textMessage2" rows="3"  placeholder="Please save me. I am in Danger" maxlength="158">Please save me. I am in Danger</textarea>     
147 | </br>
148 |                   <button type="submit" name="SubmitButton2"class="btn btn-outline-primary mt-3" id="btnSend">Send</button>
149 |                   &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
150 |                   <button type="button" class="btn btn-outline-secondary mt-3 ml-3" onclick="clearAllFields2()">Clear</button>
151 |                 </form>
152 |           
153 |     </div>
154 |    <div class="container mt-3">
155 |       
156 |                 <form method="POST" action="#">
157 |                   </br>
158 |                   <label for="lblMobileNumber">Mobile Number 3</label>
159 | 		</br>	
160 |                   <input type="tel" name="userMobile3" class="form-control" id="number3" value="7698225243" placeholder="7698text=""225243"  required    pattern="[789][0-9]{9}" oninvalid="PleaseEnterProperMobileNumber" >
161 |                   </br>
162 |                   <label for="lblMessage">Message</label></br>
163 |                   <textarea class="form-control"  name="userMessage3" required  id="textMessage3" rows="3"  placeholder="Please save me. I am in Danger" maxlength="158">Please save me. I am in Danger</textarea>     
164 | </br>
165 |                   <button type="submit" name="SubmitButton3"class="btn btn-outline-primary mt-3" id="btnSend">Send</button>
166 |                   &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
167 |                   <button type="button" class="btn btn-outline-secondary mt-3 ml-3" onclick="clearAllFields3()">Clear</button>
168 |                 </form>
169 |          
170 |     </div>
171 |       </div>
172 | 	
173 |     </div>
174 |     <div id="footer">
175 |       With Love ❤️ by  Team Virus vixens<!--| <a href="http://validator.w3.org/check?uri=referer">HTML5</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> | from <a href="http://www.html5webtemplates.co.uk/">free HTML5 templates</a> -->
176 |     </div>
177 |   </div>
178 | 
179 | 
180 | </body><span class="gr__tooltip"><span class="gr__tooltip-content"></span><i class="gr__tooltip-logo"></i><span class="gr__triangle"></span></span></html>


--------------------------------------------------------------------------------
/page_two.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 |   <title>Women Safety</title>
  6 |   <meta name="viewport" content="initial-scale=1.0">
  7 |   <meta charset="utf-8">
  8 |   <link rel="stylesheet" type="text/css" href="style.css" title="style">
  9 |   <style>
 10 |     /* Always set the map height explicitly to define the size of the div
 11 |        * element that contains the map. */
 12 |     #map {
 13 |       height: 100%;
 14 |     }
 15 |   
 16 |         #menubar{
 17 |         width:1600px !important;
 18 |       }
 19 | 
 20 |       ul#menu{
 21 |         transform: translatex(30%) !important;
 22 |       }
 23 |     /* Optional: Makes the sample page fill the window. */
 24 |     html,
 25 |     body {
 26 |       height: 100%;
 27 |       margin: 0;
 28 |       padding: 0;
 29 |     }
 30 |   </style>
 31 | </head>
 32 | 
 33 | <body>
 34 | <div id="menubar">
 35 |         <ul id="menu">
 36 |           <!-- put class="selected" in the li tag for the selected page - to highlight which page you're on -->
 37 |           <li><a href="index.html">Welcome Page</a></li>
 38 |           <li><a href="page_one.html">Navigation</a></li>
 39 |           <li class="selected"><a href="page_two.html">Safe Zone</a></li>
 40 |           <li ><a href="page_three.html">Guardians</a></li>
 41 |           <li><a href="page_four.html">Safety Alarm</a></li>
 42 |         </ul>
 43 |       </div>
 44 |   <div id="map"></div>
 45 |   <script>
 46 |     var map;
 47 |     var service;
 48 |     var infowindow;
 49 | 
 50 |     function initMap() {
 51 |       var pyrmont = new google.maps.LatLng(-33.8665433, 151.1956316);
 52 |       infowindow = new google.maps.InfoWindow();
 53 |       map = new google.maps.Map(document.getElementById('map'), {
 54 |         center: pyrmont,
 55 |         zoom: 15
 56 |       });
 57 | 
 58 |       if (navigator.geolocation) {
 59 |         navigator.geolocation.getCurrentPosition(function(position) {
 60 |           var pyrmont = {
 61 |             lat: position.coords.latitude,
 62 |             lng: position.coords.longitude
 63 |           };
 64 |           //pyrmont = new google.maps.LatLng(pos.lat, pos.lng);
 65 |           infowindow.setPosition(pyrmont);
 66 |           infowindow.setContent('Location found.');
 67 |           infowindow.open(map);
 68 |           map.setCenter(pyrmont);
 69 | 
 70 |           var request = {
 71 |             location: pyrmont,
 72 |             radius: '500',
 73 |             query: 'police station',
 74 |             fields: ['name', 'formatted_address', 'international_phone_number', 'geometry']
 75 |           };
 76 | 
 77 |           service = new google.maps.places.PlacesService(map);
 78 |           service.textSearch(request, callback);
 79 | 
 80 |         }, function() {
 81 |           handleLocationError(true, infoWindow, map.getCenter());
 82 |         });
 83 |       } else {
 84 |         // Browser doesn't support Geolocation
 85 |         handleLocationError(false, infoWindow, map.getCenter());
 86 |       }
 87 | 
 88 | 
 89 | 
 90 | 
 91 |     }
 92 | 
 93 |     function handleLocationError(browserHasGeolocation, infoWindow, pos) {
 94 |       infoWindow.setPosition(pos);
 95 |       infoWindow.setContent(browserHasGeolocation ?
 96 |                             'Error: The Geolocation service failed.' :
 97 |                             'Error: Your browser doesn\'t support geolocation.');
 98 |       infoWindow.open(map);
 99 |     }
100 | 
101 |     function callback(results, status) {
102 |       //  var infowindow = new google.maps.InfoWindow();
103 |       if (status == google.maps.places.PlacesServiceStatus.OK) {
104 |         for (var i = 0; i < results.length; i++) {
105 |           var place = results[i];
106 |           createMarker(results[i],infowindow);
107 |         }
108 | 
109 |       }
110 |     }
111 | 
112 |     function createMarker(place, infowindow) {
113 |       //var infowindow = new google.maps.InfoWindow();
114 |       var marker = new google.maps.Marker({
115 |         map: map,
116 |         position: place.geometry.location
117 |       });
118 | 
119 |       var request = {
120 |         reference: place.reference
121 |       };
122 | 
123 |       service.getDetails(request, function(details, status) {
124 |         google.maps.event.addListener(marker, 'click', function() {
125 |           infowindow.setContent(details.name + "<br />" + details.formatted_address +  "<br />" + details.formatted_phone_number);
126 |           infowindow.open(map, this);
127 |         });
128 |       });
129 |     }
130 |   </script>
131 |   <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBbl-QdcG2sHyqxz4Qu_ZE7pjmZNY1KP7I&libraries=places&callback=initMap" async defer></script>
132 | </body>
133 | 
134 | </html>
135 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | html {
  2 |   height: 100%;
  3 | }
  4 | 
  5 | * {
  6 |   margin: 0;
  7 |   padding: 0;
  8 | }
  9 | 
 10 | body {
 11 |   font: normal 0.8em "Bellefair", arial, sans-serif;
 12 |   background: #f0efe2 url(background.png) repeat;
 13 |   color: #fff;
 14 | }
 15 | 
 16 | p {
 17 |   padding: 0 0 20px 0;
 18 |   line-height: 1.7em;
 19 | }
 20 | 
 21 | img {
 22 |   border: 0;
 23 | }
 24 | 
 25 | h1,
 26 | h2,
 27 | h3,
 28 | h4,
 29 | h5,
 30 | h6 {
 31 |   font: normal 175% "Bellefair", arial, sans-serif;
 32 |   color: #9932cc;
 33 |   margin: 0 0 15px 0;
 34 |   padding: 15px 0 5px 0;
 35 | }
 36 | 
 37 | h2 {
 38 |   font: normal 175% "Amarante", arial, sans-serif;
 39 | }
 40 | 
 41 | h4,
 42 | h5,
 43 | h6 {
 44 |   margin: 0;
 45 |   padding: 0 0 5px 0;
 46 |   font: normal 120% "Bellefair", arial, sans-serif;
 47 | }
 48 | 
 49 | h5,
 50 | h6 {
 51 |   font: italic 95% "Bellefair", arial, sans-serif;
 52 |   padding: 0 0 15px 0;
 53 | }
 54 | 
 55 | a,
 56 | a:hover {
 57 |   outline: none;
 58 |   text-decoration: underline;
 59 |   color: #fff;
 60 | }
 61 | 
 62 | a:hover {
 63 |   text-decoration: none;
 64 | }
 65 | 
 66 | .left {
 67 |   float: left;
 68 |   width: auto;
 69 |   margin-right: 10px;
 70 | }
 71 | 
 72 | .right {
 73 |   float: right;
 74 |   width: auto;
 75 |   margin-left: 10px;
 76 | }
 77 | 
 78 | .center {
 79 |   display: block;
 80 |   text-align: center;
 81 |   margin: 20px auto;
 82 | }
 83 | 
 84 | blockquote {
 85 |   margin: 20px 0;
 86 |   padding: 10px 20px 0 20px;
 87 |   border: 1px solid #e5e5db;
 88 |   background: #fff;
 89 | }
 90 | 
 91 | ul {
 92 |   margin: 2px 0 22px 17px;
 93 | }
 94 | 
 95 | ul li {
 96 |   list-style-type: circle;
 97 |   margin: 0 0 6px 0;
 98 |   padding: 0 0 4px 5px;
 99 | }
100 | 
101 | ol {
102 |   margin: 8px 0 22px 20px;
103 | }
104 | 
105 | ol li {
106 |   margin: 0 0 11px 0;
107 | }
108 | 
109 | #main,
110 | #logo,
111 | #menubar,
112 | #site_content,
113 | #footer {
114 |   margin-left: auto;
115 |   margin-right: auto;
116 | }
117 | 
118 | #header {
119 |   background: transparent;
120 |   height: 202px;
121 | }
122 | 
123 | #logo {
124 |   width: 898px;
125 |   position: relative;
126 |   height: 148px;
127 | }
128 | 
129 | #logo #logo_text {
130 |   position: absolute;
131 |   top: 20px;
132 |   left: 0;
133 | }
134 | 
135 | #logo h1,
136 | #logo h2 {
137 |   font: normal 300% "Amarante", cursive, sans-serif;
138 |   border-bottom: 0;
139 |   text-transform: none;
140 |   margin: 0;
141 | }
142 | 
143 | #logo_text h1,
144 | #logo_text h1 a,
145 | #logo_text h1 a:hover {
146 |   padding: 22px 0 0 0;
147 |   color: #000;
148 |   letter-spacing: -1px;
149 |   text-decoration: none;
150 | }
151 | 
152 | #logo_text h1 a .logo_colour {
153 |   color: #9932cc;
154 |   font: italic 36px garamond;
155 |   font-family: "Princess sofia";
156 | }
157 | 
158 | #logo_text h1 a .logo_colour2 {
159 |   color: #000000;
160 |   font: italic 36px garamond;
161 |   font-family: "Princess sofia";
162 | }
163 | 
164 | #logo_text h2 {
165 |   font-size: 100%;
166 |   padding: 4px 0 0 0;
167 |   color: #000;
168 | }
169 | 
170 | #menubar {
171 |   width: 898px;
172 |   height: 52px;
173 |   padding: 0;
174 |   background: #000;
175 | }
176 | 
177 | ul#menu,
178 | ul#menu li {
179 |   float: left;
180 |   margin: 0;
181 |   padding: 0;
182 | }
183 | 
184 | ul#menu li {
185 |   list-style: none;
186 | }
187 | 
188 | ul#menu li a {
189 |   letter-spacing: 0.1em;
190 |   font: normal 100% "Bellefair", arial, sans-serif;
191 |   display: block;
192 |   float: left;
193 |   height: 17px;
194 |   margin: 10px 0 0 10px;
195 |   padding: 9px 26px 6px 26px;
196 |   text-align: center;
197 |   color: #fff;
198 |   text-transform: uppercase;
199 |   text-decoration: none;
200 |   background: transparent;
201 | }
202 | 
203 | ul#menu li a:hover,
204 | ul#menu li.selected a,
205 | ul#menu li.selected a:hover {
206 |   color: #9932cc;
207 |   background: #fff;
208 | }
209 | 
210 | #site_content {
211 |   width: 854px;
212 |   overflow: hidden;
213 |   margin: 0 auto 0 auto;
214 |   padding: 0 24px 20px 20px;
215 |   background: #000;
216 | }
217 | 
218 | .sidebar {
219 |   float: right;
220 |   width: 210px;
221 |   padding: 0 15px 20px 15px;
222 | }
223 | 
224 | .sidebar ul {
225 |   width: 198px;
226 |   padding: 4px 0 0 0;
227 |   margin: 4px 0 30px 0;
228 | }
229 | 
230 | .sidebar li {
231 |   list-style: none;
232 |   padding: 0 0 7px 0;
233 | }
234 | 
235 | .sidebar li a,
236 | .sidebar li a:hover {
237 |   padding: 0 0 0 40px;
238 |   display: block;
239 |   background: transparent url(link.png) no-repeat left center;
240 | }
241 | 
242 | .sidebar li a.selected {
243 |   color: #7e2451;
244 |   text-decoration: none;
245 | }
246 | 
247 | #content {
248 |   text-align: center;
249 |   padding: 0;
250 | }
251 | 
252 | #content1 {
253 |   text-align: center;
254 |   float: center;
255 |   width: 595px;
256 |   padding: 0;
257 | }
258 | #content ul {
259 |   margin: 2px 0 22px 0px;
260 | }
261 | 
262 | #content ul li {
263 |   list-style-type: none;
264 |   background: url(bullet.png) no-repeat;
265 |   margin: 0 0 6px 0;
266 |   padding: 0 0 4px 25px;
267 |   line-height: 1.5em;
268 | }
269 | 
270 | #footer {
271 |   width: 898px;
272 |   font: normal 100% "Bellefair", arial, sans-serif;
273 |   height: 33px;
274 |   padding: 24px 0 5px 0;
275 |   text-align: center;
276 |   background: transparent;
277 |   color: #000;
278 |   text-transform: uppercase;
279 |   letter-spacing: 0.1em;
280 | }
281 | 
282 | #footer a {
283 |   color: #000;
284 |   text-decoration: none;
285 | }
286 | 
287 | #footer a:hover {
288 |   color: #000;
289 |   text-decoration: underline;
290 | }
291 | 
292 | .search {
293 |   color: #5d5d5d;
294 |   border: 1px solid #bbb;
295 |   width: 134px;
296 |   padding: 4px;
297 |   font: 100% "Bellefair", arial, sans-serif;
298 | }
299 | 
300 | #colours {
301 |   height: 0px;
302 |   text-align: right;
303 |   padding: 66px 16px 0px 300px;
304 | }
305 | 
306 | .form_settings {
307 |   margin: 15px 0 0 0;
308 | }
309 | 
310 | .form_settings p {
311 |   padding: 0 0 4px 0;
312 | }
313 | 
314 | .form_settings span {
315 |   float: left;
316 |   width: 200px;
317 |   text-align: left;
318 | }
319 | 
320 | .form_settings input,
321 | .form_settings textarea {
322 |   padding: 5px;
323 |   width: 299px;
324 |   font: 100% "Bellefair", arial;
325 |   border: 1px solid #e5e5db;
326 |   background: #fff;
327 |   color: #47433f;
328 | }
329 | 
330 | .form_settings .submit {
331 |   font: 100% arial;
332 |   border: 1px solid;
333 |   width: 99px;
334 |   margin: 0 0 0 212px;
335 |   height: 33px;
336 |   padding: 2px 0 3px 0;
337 |   cursor: pointer;
338 |   background: #000;
339 |   color: #fff;
340 | }
341 | 
342 | .form_settings textarea,
343 | .form_settings select {
344 |   font: 100% "Bellefair", arial;
345 |   width: 299px;
346 | }
347 | 
348 | .form_settings select {
349 |   width: 310px;
350 | }
351 | 
352 | .form_settings .checkbox {
353 |   margin: 4px 0;
354 |   padding: 0;
355 |   width: 14px;
356 |   border: 0;
357 |   background: none;
358 | }
359 | 
360 | .separator {
361 |   width: 100%;
362 |   height: 0;
363 |   border-top: 1px solid #d9d5cf;
364 |   border-bottom: 1px solid #fff;
365 |   margin: 0 0 20px 0;
366 | }
367 | 
368 | table {
369 |   margin: 10px 0 30px 0;
370 | }
371 | 
372 | table tr th,
373 | table tr td {
374 |   background: #3b3b3b;
375 |   color: #fff;
376 |   padding: 7px 4px;
377 |   text-align: left;
378 | }
379 | 
380 | table tr td {
381 |   background: #f0efe2;
382 |   color: #47433f;
383 |   border-top: 1px solid #fff;
384 | }
385 | 
386 | body {
387 |   background: white;
388 | }
389 | 
390 | .zoomimage {
391 |   width: auto;
392 |   height: auto;
393 |   overflow: hidden;
394 |   text-align: center;
395 |   padding: 30px;
396 | }
397 | 
398 | img {
399 |   max-width: 100%;
400 |   max-height: 100%;
401 |   transition: 0.75s;
402 | }
403 | 
404 | /*.zoomimage:hover img{
405 |   transform: scale(5);
406 | }*/
407 | 


--------------------------------------------------------------------------------