WenLanGe/src/views/gui/webvr.vue

<template>
  <div class="webvr-popup" style="display:none">
            <div class="messaging">
                <div class="page p1">
                    <div class="title">{[{ WEBVR_FOR_DAYDREAM }]}</div>
                    <img class="image device-headset-side">
                    <div class="enter-button">{[{ WEBVR_ENTER_WEBVR }]}</div>
                    <span class="hrule"></span>
                    <div class="alt-help">
                        <span class="open-with-app">{[{ VR_APP_OPEN }]}</span>
                    </div>
                </div>
                <div class="page p2 hidden">
                    <div class="title">{[{ VR_WHAT_YOU_NEED }]}</div>
                    <ul class="tabs">
                        <li class="tabbutton" id="tabcardboard">{[{ VR_GOOGLE_CARDBOARD }]}</li>
                        <li class="tabbutton" id="tabdaydream">{[{ VR_GOOGLE_DAYDREAM }]}</li>
                        <li class="tabbutton" id="tabnative">{[{ VR_APP }]}</li>
                    </ul>
                    <div class="tab-content webvr">
                        <img class="image device-headset">
                        <span class="detail headset">
                            <u>{[{ VR_GOOGLE_CARDBOARD }]}</u>
                        </span>
                        <img class="image device-phone">
                        <span class="detail phone">
                            <p>
                                <b>
                                    <u>{[{ VR_COMPATIBLE_ANDROID }]}</u>
                                </b>
                            </p>
                            <p>{[{ VR_ANDROID_DETAIL }]}</p>
                        </span>
                        <div class="detail daydream-label">{[{ VR_NEED_DAYDREAM }]}</div>
                    </div>
                    <div class="tab-content native hidden">
                        <div class="badge-label">{[{ VR_APP_FOR_ANDROID }]}</div>
                        <span>
                            <img class="image badge-cardboard">
                            <img class="image badge-oculus">
                        </span>
                    </div>
                </div>
            </div>
            <div class="close">
                <a>
                    <i class="icon icon-close"></i>
                </a>
            </div>
            <div class="footer">
                <div class="help">
                    <a>{[{ HELP }]}</a>
                </div>
                <div>|</div>
                <div class="terms">
                    <a>{[{ MATTERPORT_TERMS }]}</a>
                </div>
                <!-- <img src="images/glyph.svg"> -->
            </div>
        </div>
</template>