swarn548/guiding-angle.markdown

## guiding-angle.markdown

      
    Raw
  

              guiding-angle.markdown
            
          
    guiding angle

this app will help the female safety
A Pen by swarn548 on CodePen.
License.

  
## index.html
html lang="en">
<head></head>d>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GuardianAngel - Women Safety App</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <div class="app-container">
        <!-- Header Section -->
        <header>
            <h1>GuardianAngel</h1>
            <div class="user-profile">
                <img src="profile-placeholder.jpg" alt="Profile" id="profile-pic">
                <span id="user-name">Jane Doe</span>
            </div>
        </header>

        <!-- Main SOS Button -->
        <div class="sos-container">
            <button id="sos-button" class="pulse">
                <i class="fas fa-exclamation-triangle"></i>
                SOS
            </button>
        </div>

        <!-- Quick Actions Grid -->
        <div class="quick-actions">
            <div class="action-item" onclick="shareLocation()">
                <i class="fas fa-location-dot"></i>
                <span>Share Location</span>
            </div>
            <div class="action-item" onclick="startJourneyTracking()">
                <i class="fas fa-car"></i>
                <span>Track Journey</span>
            </div>
            <div class="action-item" onclick="callPolice()">
                <i class="fas fa-phone"></i>
                <span>Police</span>
            </div>
            <div class="action-item" onclick="fakeCaller()">
                <i class="fas fa-phone-volume"></i>
                <span>Fake Call</span>
            </div>
        </div>

        <!-- Live Location Map -->
        <div class="map-container">
            <div id="map"></div>
        </div>

        <!-- Emergency Contacts -->
        <div class="contacts-container">
            <h2>Emergency Contacts</h2>
            <div class="contact-list" id="emergency-contacts">
                <!-- Contacts will be added dynamically -->
            </div>
            <button onclick="addContact()" class="add-contact-btn">
                <i class="fas fa-plus"></i> Add Contact
            </button>
        </div>
    </div>

    <!-- Modals -->
    <div id="journey-modal" class="modal">
        <!-- Journey tracking form -->
    </div>

    <div id="sos-modal" class="modal">
        <!-- SOS confirmation and options -->
    </div>

    <script src="app.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
</body>
</html> <div id="map" style="height: 400px; width: 100%;"></div>

## script.js
document.addEventListener('DOMContentLoaded', () => {
    initializeApp();
    setupEventListeners();
    checkPermissions();
});

// App initialization
function initializeApp() {
    // Check if geolocation is supported
    if ("geolocation" in navigator) {
        startLocationTracking();
    }

    // Load saved emergency contacts
    loadEmergencyContacts();

    // Initialize offline capabilities
    setupOfflineSupport();
}

// Location tracking
let watchId;
function startLocationTracking() {
    watchId = navigator.geolocation.watchPosition(
        position => {
            updateLocation(position.coords);
            updateMap(position.coords);
        },
        error => console.error("Error getting location:", error),
        {
            enableHighAccuracy: true,
            timeout: 5000,
            maximumAge: 0
        }
    );
}

// SOS functionality
function setupSOS() {
    const sosButton = document.getElementById('sos-button');
    let pressTimer;

    sosButton.addEventListener('touchstart', (e) => {
        pressTimer = setTimeout(() => triggerSOS(), 2000);
    });

    sosButton.addEventListener('touchend', () => {
        clearTimeout(pressTimer);
    });
}

async function triggerSOS() {
    try {
        // Get current location
        const position = await getCurrentPosition();

        // Send alerts to emergency contacts
        alertEmergencyContacts(position);

        // Contact nearest police station
        alertPolice(position);

        // Start recording audio/video
        startRecording();

        // Trigger alarm
        triggerAlarm();
    } catch (error) {
        console.error("Error triggering SOS:", error);
    }
}

// Journey tracking
function startJourneyTracking() {
    const modal = document.getElementById('journey-modal');
    modal.style.display = 'block';

    // Start capturing vehicle details and tracking
    captureVehicleDetails();
}

// Fake call feature
function fakeCaller() {
    const ringtone = new Audio('ringtone.mp3');

    // Simulate incoming call after 5 seconds
    setTimeout(() => {
        ringtone.play();
        showIncomingCall();
    }, 5000);
}

// Offline support
function setupOfflineSupport() {
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('service-worker.js')
            .then(registration => {
                console.log('ServiceWorker registered');
            })
            .catch(error => {
                console.error('ServiceWorker registration failed:', error);
            });
    }
}

// Emergency contacts management
function loadEmergencyContacts() {
    const contacts = JSON.parse(localStorage.getItem('emergencyContacts')) || [];
    const contactsList = document.getElementById('emergency-contacts');

    contactsList.innerHTML = contacts.map(contact => `
        <div class="contact-item">
            <span>${contact.name}</span>
            <span>${contact.phone}</span>
            <button onclick="callContact('${contact.phone}')">
                <i class="fas fa-phone"></i>
            </button>
        </div>
    `).join('');
}

function addContact() {
    // Show add contact form
    const name = prompt('Enter contact name:');
    const phone = prompt('Enter contact phone:');

    if (name && phone) {
        const contacts = JSON.parse(localStorage.getItem('emergencyContacts')) || [];
        contacts.push({ name, phone });
        localStorage.setItem('emergencyContacts', JSON.stringify(contacts));
        loadEmergencyContacts();
    }
}

// Map initialization
function initMap() {
    const map = new google.maps.Map(document.getElementById('map'), {
        zoom: 15,
        center: { lat: -34.397, lng: 150.644 }
    });

    // Update map with current location
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(position => {
            const pos = {
                lat: position.coords.latitude,
                lng: position.coords.longitude
            };
            map.setCenter(pos);
            new google.maps.Marker({ position: pos, map: map });
        });
    }
}

// Permissions
function checkPermissions() {
    const permissions = [
        'geolocation',
        'notifications',
        'microphone',
        'camera'
    ];

    permissions.forEach(async permission => {
        try {
            const result = await navigator.permissions.query({ name: permission });
            if (result.state === 'denied') {
                alert(`Please enable ${permission} permission for full app functionality`);
            }
        } catch (error) {
            console.error(`Error checking ${permission} permission:`, error);
        }
    });
} // ... existing code ...

// Map initialization
function initMap() {
    // Check if Google Maps API is loaded
    if (typeof google === 'undefined') {
        console.error('Google Maps API not loaded');
        return;
    }

    const map = new google.maps.Map(document.getElementById('map'), {
        zoom: 15,
        center: { lat: -34.397, lng: 150.644 },
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        zoomControl: true,
        mapTypeControl: true,
        scaleControl: true
    });

    // Create a global reference to the map
    window.safetyMap = map;

    // Update map with current location
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
            position => {
                const pos = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                };
                map.setCenter(pos);
                new google.maps.Marker({
                    position: pos,
                    map: map,
                    title: 'Your Location'
                });
            },
            error => {
                console.error('Error getting current location:', error);
            }
        );
    }
}

// Add this function to load Google Maps API
function loadGoogleMapsAPI() {
    const script = document.createElement('script');
    script.src = `https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap`;
    script.async = true;
    script.defer = true;
    document.head.appendChild(script);
}

// Update the initialization to include Google Maps loading
function initializeApp() {
    // Check if geolocation is supported
    if ("geolocation" in navigator) {
        startLocationTracking();
    }

    // Load saved emergency contacts
    loadEmergencyContacts();

    // Initialize offline capabilities
    setupOfflineSupport();

    // Load Google Maps
    loadGoogleMapsAPI();
}

// ... existing code ...

## style.css
:root {
    --primary-color: #ff4757;
    --secondary-color: #2f3542;
    --accent-color: #ff6b81;
    --background-color: #f1f2f6;
    --text-color: #2f3542;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', sans-serif;
}

.app-container {
    max-width: 100%;
    min-height: 100vh;
    background-color: var(--background-color);
}

/* Header Styles */
header {
    background-color: var(--primary-color);
    color: white;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* SOS Button Styles */
.sos-container {
    text-align: center;
    padding: 2rem;
}

#sos-button {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: white;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: 0 4px 15px rgba(255, 71, 87, 0.4);
    transition: transform 0.3s ease;
}

.pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* Quick Actions Grid */
.quick-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 1rem;
}

.action-item {
    background-color: white;
    padding: 1.5rem;
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.action-item:hover {
    transform: translateY(-5px);
}

/* Map Container */
.map-container {
    margin: 1rem;
    height: 200px;
    border-radius: 10px;
    overflow: hidden;
}

#map {
    width: 100%;
    height: 100%;
}

/* Emergency Contacts */
.contacts-container {
    background-color: white;
    margin: 1rem;
    padding: 1rem;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Responsive Design */
@media (max-width: 768px) {
    .quick-actions {
        grid-template-columns: 1fr;
    }
}
	html lang="en">
	<head></head>d>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>GuardianAngel - Women Safety App</title>
	<link rel="stylesheet" href="styles.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
	</head>
	<body>
	<div class="app-container">
	<!-- Header Section -->
	<header>
	<h1>GuardianAngel</h1>
	<div class="user-profile">
	<img src="profile-placeholder.jpg" alt="Profile" id="profile-pic">
	<span id="user-name">Jane Doe</span>
	</div>
	</header>

	<!-- Main SOS Button -->
	<div class="sos-container">
	<button id="sos-button" class="pulse">
	<i class="fas fa-exclamation-triangle"></i>
	SOS
	</button>
	</div>

	<!-- Quick Actions Grid -->
	<div class="quick-actions">
	<div class="action-item" onclick="shareLocation()">
	<i class="fas fa-location-dot"></i>
	<span>Share Location</span>
	</div>
	<div class="action-item" onclick="startJourneyTracking()">
	<i class="fas fa-car"></i>
	<span>Track Journey</span>
	</div>
	<div class="action-item" onclick="callPolice()">
	<i class="fas fa-phone"></i>
	<span>Police</span>
	</div>
	<div class="action-item" onclick="fakeCaller()">
	<i class="fas fa-phone-volume"></i>
	<span>Fake Call</span>
	</div>
	</div>

	<!-- Live Location Map -->
	<div class="map-container">
	<div id="map"></div>
	</div>

	<!-- Emergency Contacts -->
	<div class="contacts-container">
	<h2>Emergency Contacts</h2>
	<div class="contact-list" id="emergency-contacts">
	<!-- Contacts will be added dynamically -->
	</div>
	<button onclick="addContact()" class="add-contact-btn">
	<i class="fas fa-plus"></i> Add Contact
	</button>
	</div>
	</div>

	<!-- Modals -->
	<div id="journey-modal" class="modal">
	<!-- Journey tracking form -->
	</div>

	<div id="sos-modal" class="modal">
	<!-- SOS confirmation and options -->
	</div>

	<script src="app.js"></script>
	<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
	</body>
	</html> <div id="map" style="height: 400px; width: 100%;"></div>
	document.addEventListener('DOMContentLoaded', () => {
	initializeApp();
	setupEventListeners();
	checkPermissions();
	});

	// App initialization
	function initializeApp() {
	// Check if geolocation is supported
	if ("geolocation" in navigator) {
	startLocationTracking();
	}

	// Load saved emergency contacts
	loadEmergencyContacts();

	// Initialize offline capabilities
	setupOfflineSupport();
	}

	// Location tracking
	let watchId;
	function startLocationTracking() {
	watchId = navigator.geolocation.watchPosition(
	position => {
	updateLocation(position.coords);
	updateMap(position.coords);
	},
	error => console.error("Error getting location:", error),
	{
	enableHighAccuracy: true,
	timeout: 5000,
	maximumAge: 0
	}
	);
	}

	// SOS functionality
	function setupSOS() {
	const sosButton = document.getElementById('sos-button');
	let pressTimer;

	sosButton.addEventListener('touchstart', (e) => {
	pressTimer = setTimeout(() => triggerSOS(), 2000);
	});

	sosButton.addEventListener('touchend', () => {
	clearTimeout(pressTimer);
	});
	}

	async function triggerSOS() {
	try {
	// Get current location
	const position = await getCurrentPosition();

	// Send alerts to emergency contacts
	alertEmergencyContacts(position);

	// Contact nearest police station
	alertPolice(position);

	// Start recording audio/video
	startRecording();

	// Trigger alarm
	triggerAlarm();
	} catch (error) {
	console.error("Error triggering SOS:", error);
	}
	}

	// Journey tracking
	function startJourneyTracking() {
	const modal = document.getElementById('journey-modal');
	modal.style.display = 'block';

	// Start capturing vehicle details and tracking
	captureVehicleDetails();
	}

	// Fake call feature
	function fakeCaller() {
	const ringtone = new Audio('ringtone.mp3');

	// Simulate incoming call after 5 seconds
	setTimeout(() => {
	ringtone.play();
	showIncomingCall();
	}, 5000);
	}

	// Offline support
	function setupOfflineSupport() {
	if ('serviceWorker' in navigator) {
	navigator.serviceWorker.register('service-worker.js')
	.then(registration => {
	console.log('ServiceWorker registered');
	})
	.catch(error => {
	console.error('ServiceWorker registration failed:', error);
	});
	}
	}

	// Emergency contacts management
	function loadEmergencyContacts() {
	const contacts = JSON.parse(localStorage.getItem('emergencyContacts')) \|\| [];
	const contactsList = document.getElementById('emergency-contacts');

	contactsList.innerHTML = contacts.map(contact => `
	<div class="contact-item">
	<span>${contact.name}</span>
	<span>${contact.phone}</span>
	<button onclick="callContact('${contact.phone}')">
	<i class="fas fa-phone"></i>
	</button>
	</div>
	`).join('');
	}

	function addContact() {
	// Show add contact form
	const name = prompt('Enter contact name:');
	const phone = prompt('Enter contact phone:');

	if (name && phone) {
	const contacts = JSON.parse(localStorage.getItem('emergencyContacts')) \|\| [];
	contacts.push({ name, phone });
	localStorage.setItem('emergencyContacts', JSON.stringify(contacts));
	loadEmergencyContacts();
	}
	}

	// Map initialization
	function initMap() {
	const map = new google.maps.Map(document.getElementById('map'), {
	zoom: 15,
	center: { lat: -34.397, lng: 150.644 }
	});

	// Update map with current location
	if (navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(position => {
	const pos = {
	lat: position.coords.latitude,
	lng: position.coords.longitude
	};
	map.setCenter(pos);
	new google.maps.Marker({ position: pos, map: map });
	});
	}
	}

	// Permissions
	function checkPermissions() {
	const permissions = [
	'geolocation',
	'notifications',
	'microphone',
	'camera'
	];

	permissions.forEach(async permission => {
	try {
	const result = await navigator.permissions.query({ name: permission });
	if (result.state === 'denied') {
	alert(`Please enable ${permission} permission for full app functionality`);
	}
	} catch (error) {
	console.error(`Error checking ${permission} permission:`, error);
	}
	});
	} // ... existing code ...

	// Map initialization
	function initMap() {
	// Check if Google Maps API is loaded
	if (typeof google === 'undefined') {
	console.error('Google Maps API not loaded');
	return;
	}

	const map = new google.maps.Map(document.getElementById('map'), {
	zoom: 15,
	center: { lat: -34.397, lng: 150.644 },
	mapTypeId: google.maps.MapTypeId.ROADMAP,
	zoomControl: true,
	mapTypeControl: true,
	scaleControl: true
	});

	// Create a global reference to the map
	window.safetyMap = map;

	// Update map with current location
	if (navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(
	position => {
	const pos = {
	lat: position.coords.latitude,
	lng: position.coords.longitude
	};
	map.setCenter(pos);
	new google.maps.Marker({
	position: pos,
	map: map,
	title: 'Your Location'
	});
	},
	error => {
	console.error('Error getting current location:', error);
	}
	);
	}
	}

	// Add this function to load Google Maps API
	function loadGoogleMapsAPI() {
	const script = document.createElement('script');
	script.src = `https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap`;
	script.async = true;
	script.defer = true;
	document.head.appendChild(script);
	}

	// Update the initialization to include Google Maps loading
	function initializeApp() {
	// Check if geolocation is supported
	if ("geolocation" in navigator) {
	startLocationTracking();
	}

	// Load saved emergency contacts
	loadEmergencyContacts();

	// Initialize offline capabilities
	setupOfflineSupport();

	// Load Google Maps
	loadGoogleMapsAPI();
	}

	// ... existing code ...
	:root {
	--primary-color: #ff4757;
	--secondary-color: #2f3542;
	--accent-color: #ff6b81;
	--background-color: #f1f2f6;
	--text-color: #2f3542;
	}

	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Segoe UI', sans-serif;
	}

	.app-container {
	max-width: 100%;
	min-height: 100vh;
	background-color: var(--background-color);
	}

	/* Header Styles */
	header {
	background-color: var(--primary-color);
	color: white;
	padding: 1rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
	}

	/* SOS Button Styles */
	.sos-container {
	text-align: center;
	padding: 2rem;
	}

	#sos-button {
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background-color: var(--primary-color);
	color: white;
	border: none;
	font-size: 2rem;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	box-shadow: 0 4px 15px rgba(255, 71, 87, 0.4);
	transition: transform 0.3s ease;
	}

	.pulse {
	animation: pulse 2s infinite;
	}

	@keyframes pulse {
	0% {
	transform: scale(1);
	}
	50% {
	transform: scale(1.05);
	}
	100% {
	transform: scale(1);
	}
	}

	/* Quick Actions Grid */
	.quick-actions {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	padding: 1rem;
	}

	.action-item {
	background-color: white;
	padding: 1.5rem;
	border-radius: 10px;
	text-align: center;
	cursor: pointer;
	transition: transform 0.3s ease;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	}

	.action-item:hover {
	transform: translateY(-5px);
	}

	/* Map Container */
	.map-container {
	margin: 1rem;
	height: 200px;
	border-radius: 10px;
	overflow: hidden;
	}

	#map {
	width: 100%;
	height: 100%;
	}

	/* Emergency Contacts */
	.contacts-container {
	background-color: white;
	margin: 1rem;
	padding: 1rem;
	border-radius: 10px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	}

	/* Responsive Design */
	@media (max-width: 768px) {
	.quick-actions {
	grid-template-columns: 1fr;
	}
	}