<!DOCTYPE html>
<html lang="en">

<head>
    <title>Fruit Pick!</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1" />
    <!-- build:gamecss -->
    <link href="./css/default.css" rel="stylesheet" />
    <link href="./css/bootstrap@5.2.0.min.css" rel="stylesheet" />
    <link href="./css/onboarding.css" rel="stylesheet" />
    <!-- endbuild -->
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=mulish:300,300i,400,700|passion-one:400,700" rel="stylesheet" />
</head>

<body>
    <main class="container pt-4">
        <div class="col-10 offset-1 col-sm-8 offset-sm-2 col-lg-6 offset-lg-3">
            <section class="card onboarding my-2" v-if="step == 1" hidden="hidden">
                <header class="card-header text-center">
                    <h5 class="m-0" v-text="t9('Welcome to Fruit Pick!')"></h5>
                </header>
                <div class="card-body" hidd>
                    <p v-text="t9(`To start the game we'll pre-check some features. Your phone will ask for permission.`)"></p>
                    <div class="buttons mb-3">
                        <button type="button" id="webcam" class="btn btn-lg btn-camera w-100 mb-2" :class="cameraBtnClasses" @click="enableCamera()" :disabled="cameraState === 'granted'">
                            <i data-lucide="video"  v-show="['denied', 'rejected'].indexOf(cameraState) == -1"></i><i data-lucide="video-off"  v-show="['denied', 'rejected'].indexOf(cameraState) > -1"></i> {{ t9('Enable Camera') }}</button>
                        <button type="button" id="location" class="btn btn-lg btn-location w-100 mb-2" :class="locationBtnClasses" @click="enableLocation()" :disabled="locationState === 'granted'">
                            <i data-lucide="map-pin" v-show="locationState !== 'granted'"></i>
                            <i data-lucide="map-pin-check" v-show="locationState === 'granted'"></i>
                            {{ t9('Enable Location') }}</button>
                    </div>
                    <p><small class="small" v-show="['denied', 'rejected'].indexOf(locationState) > -1"><i data-lucide="octagon-alert"></i> {{ t9('Location seems to be turned off or not allowed for the browser. Set permissions on your device settings and turn the antenna on.') }}
                        </small></p>
						<p><small class="small" v-show="['denied', 'rejected'].indexOf(cameraState) > -1"><i data-lucide="octagon-alert"></i> {{ t9('It seems to be a problem with your camera, it is not connected or doesn\'t exist. It is required for the game.') }}
                        </small></p>
                    <button type="button" class="btn btn-proceed btn-lg text-light" @click="step += 1" :disabled="!canProceed" :class="{'btn-info' : canProceed}" v-text="t9('Continue »')"></button>
                </div>
                <div class="card-footer d-flex small">
                    <div class="col-9"><small class="text-muted"><i data-lucide="file-lock"></i> <a href="./privacy-en.html" v-text="t9('Your data is safe')"></a>.</small></div>
                    <div class="col-3 text-right"><small class="small" v-html="lblLang"></small></div>
                </div>
            </section>
            <section class="card guide my-2" v-if="step == 2" hidden="hidden">
                <header class="card-header text-center">
                    <h5 class="m-0" v-html="t9('Guide')"></h5>
                </header>
                <div class="card-body">
                    <ol>
                        <li v-html="t9('🤳 Look around with your device to find fruits, also up and down!')"></li>
                        <li v-html="t9('🐱 Your cat will be with you at the center of the screen.')"></li>
                        <li v-html="t9('👆🍇 Tap a fruit to feed the cat, every fruit has different points.')"></li>
                    </ol>
                    <p v-html="t9('Keep walking to find more fruits!')"></p>
                    <p class="text-muted"><small v-html="t9('Fruits are located in the material world, some of them are available for other players, so get them soon!')"></small></p>
                    <p class="text-center"><a href="/fruitpick" class="btn btn-primary btn-lg align-self-center" v-html="t9('Start')" @click.prevent="startGame()"></a></p>
                    
                </div>
            </section>
            
        </div>
        <footer class="text-center p-2">
            <p class="text-muted">
                <small>© Devignia 2025</small>
            </p>
        </footer>
    </main>
    <!-- build:guestjs -->
    <script src="./js/game-strings.js"></script>
    <script src="/common/js/vue.global.prod.js"></script>
    <script src="/common/js/lucide.min.js"></script>
    <script src="./js/onboarding.vue.js"></script>
    <!-- endbuild -->
</body>

</html>
<!-- 

Made with ♥

Fruit Pick!

Find 3D fruits on the road. Augmented Reality game using your location in your mobile browser, no need for install

© Fruit Pick 2025
© Devignia 2025

-->
