fork download
copy 
  1. # index.html
  2. ```html
  3. <!DOCTYPE html>
  4. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Location Simulation Example</title>
  9.     <script src="https://c...content-available-to-author-only...s.com"></script>
  10.     <link href="https://c...content-available-to-author-only...r.net/npm/daisyui@2.51.6/dist/full.css" rel="stylesheet" type="text/css" />
  11.     <script src="https://c...content-available-to-author-only...r.net/npm/vue@2.6.14/dist/vue.js"></script>
  12.     <script src="https://w...content-available-to-author-only...c.com/firebasejs/8.6.8/firebase-app.js"></script>
  13.     <script src="https://w...content-available-to-author-only...c.com/firebasejs/8.6.8/firebase-auth.js"></script>
  14.     <link href="https://f...content-available-to-author-only...s.com/icon?family=Material+Icons" rel="stylesheet">
  15.     <script src="https://c...content-available-to-author-only...r.net/npm/chart.js"></script>
  16.     <script src="https://m...content-available-to-author-only...s.com/maps/api/js?key=YOUR_API_KEY"></script>
  17. </head>
  18. <body class="bg-base-200">
  19.     <div id="app" class="container mx-auto my-8">
  20.         <div v-show="!user" class="flex justify-center">
  21.             <div class="card bg-base-100 shadow-xl w-full max-w-md">
  22.                 <div class="card-body">
  23.                     <h2 class="card-title text-2xl font-bold mb-4 text-center">Location Simulation</h2>
  24.                     <div v-show="showLoginForm">
  25.                         <div class="form-control mb-4">
  26.                             <label for="loginEmail" class="label">Email</label>
  27.                             <input type="email" id="loginEmail" v-model="loginEmail" class="input input-bordered">
  28.                         </div>
  29.                         <div class="form-control mb-6">
  30.                             <label for="loginPassword" class="label">Password</label>
  31.                             <input type="password" id="loginPassword" v-model="loginPassword" class="input input-bordered">
  32.                         </div>
  33.                         <button @click="login" class="btn btn-primary btn-block">
  34.                             <span class="material-icons">login</span> Login
  35.                         </button>
  36.                         <button @click="loginAnonymously" class="btn btn-ghost btn-block mt-2">
  37.                             <span class="material-icons">person_outline</span> Login as Guest
  38.                         </button>
  39.                     </div>
  40.                     <div v-show="!showLoginForm">
  41.                         <div class="form-control mb-4">
  42.                             <label for="signupEmail" class="label">Email</label>
  43.                             <input type="email" id="signupEmail" v-model="signupEmail" class="input input-bordered">
  44.                         </div>
  45.                         <div class="form-control mb-6">
  46.                             <label for="signupPassword" class="label">Password</label>
  47.                             <input type="password" id="signupPassword" v-model="signupPassword" class="input input-bordered">
  48.                         </div>
  49.                         <button @click="signup" class="btn btn-success btn-block">
  50.                             <span class="material-icons">person_add</span> Signup
  51.                         </button>
  52.                     </div>
  53.                     <div class="text-center mt-6">
  54.                         <button @click="toggleForm" class="link link-primary">
  55.                             <span class="material-icons">{{ showLoginForm ? 'person_add' : 'login' }}</span> {{ showLoginForm ? 'Switch to Signup' : 'Switch to Login' }}
  56.                         </button>
  57.                     </div>
  58.                 </div>
  59.             </div>
  60.         </div>
  61.         <div v-show="user">
  62.             <div class="navbar bg-base-100 shadow-lg mb-6">
  63.                 <div class="flex-1">
  64.                     <h1 class="text-2xl font-bold">Location Simulation</h1>
  65.                 </div>
  66.                 <div class="flex-none">
  67.                     <button @click="logout" class="btn btn-primary">
  68.                         <span class="material-icons">logout</span> Logout
  69.                     </button>
  70.                 </div>
  71.             </div>
  72.             <div class="card bg-base-100 shadow-xl mb-6">
  73.                 <div class="card-body">
  74.                     <h2 class="text-lg font-bold">Select Fake Location</h2>
  75.                     <input type="number" v-model="latitude" placeholder="Latitude" class="input input-bordered mt-2">
  76.                     <input type="number" v-model="longitude" placeholder="Longitude" class="input input-bordered mt-2">
  77.                     <button @click="simulateLocation" class="btn btn-primary mt-4">
  78.                         <span class="material-icons">location_on</span> Simulate Location
  79.                     </button>
  80.                     <div id="map" class="mt-4" style="height: 300px;"></div>
  81.                 </div>
  82.             </div>
  83.         </div>
  84.     </div>
  85.     <script>
  86.         var firebaseConfig = {
  87.             apiKey: "YOUR_API_KEY",
  88.             authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
  89.             projectId: "YOUR_PROJECT_ID",
  90.             storageBucket: "YOUR_PROJECT_ID.appspot.com",
  91.             messagingSenderId: "YOUR_SENDER_ID",
  92.             appId: "YOUR_APP_ID"
  93.         };
  94.         firebase.initializeApp(firebaseConfig);
  95.         const auth = firebase.auth();
  96.         new Vue({
  97.             el: '#app',
  98.             data: {
  99.                 user: null,
  100.                 showLoginForm: true,
  101.                 loginEmail: '',
  102.                 loginPassword: '',
  103.                 signupEmail: '',
  104.                 signupPassword: '',
  105.                 latitude: '',
  106.                 longitude: ''
  107.             },
  108.             methods: {
  109.                 login() {
  110.                     auth.signInWithEmailAndPassword(this.loginEmail, this.loginPassword)
  111.                         .then(userCredential => {
  112.                             this.user = userCredential.user;
  113.                         });
  114.                 },
  115.                 loginAnonymously() {
  116.                     auth.signInAnonymously().then(() => {
  117.                         this.user = auth.currentUser;
  118.                     });
  119.                 },
  120.                 signup() {
  121.                     auth.createUserWithEmailAndPassword(this.signupEmail, this.signupPassword)
  122.                         .then(userCredential => {
  123.                             this.user = userCredential.user;
  124.                         });
  125.                 },
  126.                 toggleForm() {
  127.                     this.showLoginForm = !this.showLoginForm;
  128.                 },
  129.                 logout() {
  130.                     auth.signOut().then(() => {
  131.                         this.user = null;
  132.                     });
  133.                 },
  134.                 simulateLocation() {
  135.                     const latValue = parseFloat(this.latitude);
  136.                     const lngValue = parseFloat(this.longitude);
  137.                     if (!isNaN(latValue) && !isNaN(lngValue)) {
  138.                         this.initializeMap(latValue, lngValue);
  139.                     } else {
  140.                         alert('Please enter valid latitude and longitude values.');
  141.                     }
  142.                 },
  143.                 initializeMap(lat, lng) {
  144.                     const map = new google.maps.Map(document.getElementById('map'), {
  145.                         center: { lat: lat, lng: lng },
  146.                         zoom: 15
  147.                     });
  148.                     new google.maps.Marker({
  149.                         position: { lat: lat, lng: lng },
  150.                         map: map,
  151.                         title: 'Fake Location'
  152.                     });
  153.                 }
  154.             },
  155.             created() {
  156.                 auth.onAuthStateChanged(user => {
  157.                     this.user = user;
  158.                 });
  159.             }
  160.         });
  161.     </script>
  162. </body>
  163. </html>
  164. ```
Success #stdin #stdout 0.03s 26040KB
comments (?)
stdin
copy 
H
stdout
copy 
# 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>
```
https://ideone.com/HVULT5
Gg
language:
PHP (php 7.3.5)
created:
2 days ago
visibility:
public

Share or Embed source code

Discover > Sphere Engine API

The brand new service which powers Ideone!

Discover > IDE Widget

Widget for compiling and running the source code in a web browser!