# index.html
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Location Simulation Example</title>
    <script src="https://c...content-available-to-author-only...s.com"></script>
    <link href="https://c...content-available-to-author-only...r.net/npm/daisyui@2.51.6/dist/full.css" rel="stylesheet" type="text/css" />
    <script src="https://c...content-available-to-author-only...r.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://w...content-available-to-author-only...c.com/firebasejs/8.6.8/firebase-app.js"></script>
    <script src="https://w...content-available-to-author-only...c.com/firebasejs/8.6.8/firebase-auth.js"></script>
    <link href="https://f...content-available-to-author-only...s.com/icon?family=Material+Icons" rel="stylesheet">
    <script src="https://c...content-available-to-author-only...r.net/npm/chart.js"></script>
    <script src="https://m...content-available-to-author-only...s.com/maps/api/js?key=YOUR_API_KEY"></script>
</head>
<body class="bg-base-200">
    <div id="app" class="container mx-auto my-8">
        <div v-show="!user" class="flex justify-center">
            <div class="card bg-base-100 shadow-xl w-full max-w-md">
                <div class="card-body">
                    <h2 class="card-title text-2xl font-bold mb-4 text-center">Location Simulation</h2>
                    <div v-show="showLoginForm">
                        <div class="form-control mb-4">
                            <label for="loginEmail" class="label">Email</label>
                            <input type="email" id="loginEmail" v-model="loginEmail" class="input input-bordered">
                        </div>
                        <div class="form-control mb-6">
                            <label for="loginPassword" class="label">Password</label>
                            <input type="password" id="loginPassword" v-model="loginPassword" class="input input-bordered">
                        </div>
                        <button @click="login" class="btn btn-primary btn-block">
                            <span class="material-icons">login</span> Login
                        </button>
                        <button @click="loginAnonymously" class="btn btn-ghost btn-block mt-2">
                            <span class="material-icons">person_outline</span> Login as Guest
                        </button>
                    </div>
                    <div v-show="!showLoginForm">
                        <div class="form-control mb-4">
                            <label for="signupEmail" class="label">Email</label>
                            <input type="email" id="signupEmail" v-model="signupEmail" class="input input-bordered">
                        </div>
                        <div class="form-control mb-6">
                            <label for="signupPassword" class="label">Password</label>
                            <input type="password" id="signupPassword" v-model="signupPassword" class="input input-bordered">
                        </div>
                        <button @click="signup" class="btn btn-success btn-block">
                            <span class="material-icons">person_add</span> Signup
                        </button>
                    </div>
                    <div class="text-center mt-6">
                        <button @click="toggleForm" class="link link-primary">
                            <span class="material-icons">{{ showLoginForm ? 'person_add' : 'login' }}</span> {{ showLoginForm ? 'Switch to Signup' : 'Switch to Login' }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div v-show="user">
            <div class="navbar bg-base-100 shadow-lg mb-6">
                <div class="flex-1">
                    <h1 class="text-2xl font-bold">Location Simulation</h1>
                </div>
                <div class="flex-none">
                    <button @click="logout" class="btn btn-primary">
                        <span class="material-icons">logout</span> Logout
                    </button>
                </div>
            </div>
            <div class="card bg-base-100 shadow-xl mb-6">
                <div class="card-body">
                    <h2 class="text-lg font-bold">Select Fake Location</h2>
                    <input type="number" v-model="latitude" placeholder="Latitude" class="input input-bordered mt-2">
                    <input type="number" v-model="longitude" placeholder="Longitude" class="input input-bordered mt-2">
                    <button @click="simulateLocation" class="btn btn-primary mt-4">
                        <span class="material-icons">location_on</span> Simulate Location
                    </button>
                    <div id="map" class="mt-4" style="height: 300px;"></div>
                </div>
            </div>
        </div>
    </div>
    <script>
        var firebaseConfig = {
            apiKey: "YOUR_API_KEY",
            authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
            projectId: "YOUR_PROJECT_ID",
            storageBucket: "YOUR_PROJECT_ID.appspot.com",
            messagingSenderId: "YOUR_SENDER_ID",
            appId: "YOUR_APP_ID"
        };
        firebase.initializeApp(firebaseConfig);
        const auth = firebase.auth();
        new Vue({
            el: '#app',
            data: {
                user: null,
                showLoginForm: true,
                loginEmail: '',
                loginPassword: '',
                signupEmail: '',
                signupPassword: '',
                latitude: '',
                longitude: ''
            },
            methods: {
                login() {
                    auth.signInWithEmailAndPassword(this.loginEmail, this.loginPassword)
                        .then(userCredential => {
                            this.user = userCredential.user;
                        });
                },
                loginAnonymously() {
                    auth.signInAnonymously().then(() => {
                        this.user = auth.currentUser;
                    });
                },
                signup() {
                    auth.createUserWithEmailAndPassword(this.signupEmail, this.signupPassword)
                        .then(userCredential => {
                            this.user = userCredential.user;
                        });
                },
                toggleForm() {
                    this.showLoginForm = !this.showLoginForm;
                },
                logout() {
                    auth.signOut().then(() => {
                        this.user = null;
                    });
                },
                simulateLocation() {
                    const latValue = parseFloat(this.latitude);
                    const lngValue = parseFloat(this.longitude);
                    if (!isNaN(latValue) && !isNaN(lngValue)) {
                        this.initializeMap(latValue, lngValue);
                    } else {
                        alert('Please enter valid latitude and longitude values.');
                    }
                },
                initializeMap(lat, lng) {
                    const map = new google.maps.Map(document.getElementById('map'), {
                        center: { lat: lat, lng: lng },
                        zoom: 15
                    });
                    new google.maps.Marker({
                        position: { lat: lat, lng: lng },
                        map: map,
                        title: 'Fake Location'
                    });
                }
            },
            created() {
                auth.onAuthStateChanged(user => {
                    this.user = user;
                });
            }
        });
    </script>
</body>
</html>
```