<!DOCTYPE html>
<!--
Copyright 2019 Google LLC
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
https://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<html lang="en">
<head>
<title><model-viewer> codelab</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="demo-styles.css" />
<link rel="stylesheet" href="search.css" />
<!-- The following libraries and polyfills are recommended to maximize browser support -->
<!-- NOTE: you must adjust the paths as appropriate for your project -->
<!-- 🚨 REQUIRED: Web Components polyfill to support Edge and Firefox < 63 -->
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.1.3/webcomponents-loader.js"></script>
<!-- 💁 OPTIONAL: Intersection Observer polyfill for better performance in Safari and IE11 -->
<script src="https://unpkg.com/intersection-observer@0.5.1/intersection-observer.js"></script>
<!-- 💁 OPTIONAL: Resize Observer polyfill improves resize behavior in non-Chrome browsers -->
<script src="https://unpkg.com/resize-observer-polyfill@1.5.1/dist/ResizeObserver.js"></script>
<!-- 💁 OPTIONAL: Fullscreen polyfill is required for experimental AR features in Canary -->
<!--<script src="https://unpkg.com/fullscreen-polyfill@1.0.2/dist/fullscreen.polyfill.js"></script>-->
<!-- 💁 OPTIONAL: Include prismatic.js for Magic Leap support -->
<!--<script src="https://unpkg.com/@magicleap/prismatic@0.18.2/prismatic.min.js"></script>-->
</head>
<body>
<div class="topnav">
<!-- <img class="active" src="logo.png" alt="logo" style="width:50px;height:50px;"> -->
<a class="active" href="#home">AR based eCommerce</a>
<input type="text" placeholder="Search.." />
</div>
<model-viewer src="third_party\fan\scene.gltf" ar auto-rotate camera-controls
style=" background-color:rgb(221, 113, 113)" shadow-intensity="1"
alt="By APAR Nepal, an 'Extended reality' company.">
<button slot="ar-button"
style="background-color: white; padding: 8px; border-radius: 4px; border: none; position: absolute; bottom: 16px; right: 16px; ">
👋 View with AR
</button>
</model-viewer>
<h2 style="text-align:center;">Fan</h2>
<h2 style="text-align:center; color:#F67A31">RS 10,000</h2>
<h2 style="text-align:center; border: 2px solid gray;
border-radius: 50px; margin-left: 50px; margin-right: 50px; padding-top: 16px;
padding-bottom: 16px; color:rgb(228, 7, 99)">Add to Cart</h2>
<model-viewer src="third_party\shoe\scene.gltf" ar auto-rotate camera-controls style=" background-color:#70BCD1"
shadow-intensity="1" alt="By APAR Nepal, an 'Extended reality' company.">
<button slot="ar-button"
style="background-color: white; padding: 8px; border-radius: 4px; border: none; position: absolute; bottom: 16px; right: 16px; ">
👋 View with AR
</button>
</model-viewer>
<h2 style="text-align:center;">Puma Shoe</h2>
<h2 style="text-align:center; color:#F67A31">RS 5,000</h2>
<h2 style="text-align:center; border: 2px solid gray;
border-radius: 50px; margin-left: 50px; margin-right: 50px; padding-top: 16px;
padding-bottom: 16px; color:rgb(228, 7, 99)">Add to Cart</h2>
<model-viewer src="third_party\watch\scene.gltf" ar auto-rotate camera-controls
style=" background-color:rgb(207, 209, 112)" shadow-intensity="1"
alt="By APAR Nepal, an 'Extended reality' company.">
<button slot="ar-button"
style="background-color: white; padding: 8px; border-radius: 4px; border: none; position: absolute; bottom: 16px; right: 16px; ">
👋 View with AR
</button>
</model-viewer>
<h2 style="text-align:center;">Clock</h2>
<h2 style="text-align:center; color:#F67A31">RS 15,000</h2>
<h2 style="text-align:center; border: 2px solid gray;
border-radius: 50px; margin-left: 50px; margin-right: 50px; padding-top: 16px;
padding-bottom: 16px; color:rgb(228, 7, 99)">Add to Cart</h2>
<model-viewer src="third_party\white_photo_frame\scene.gltf" ar auto-rotate camera-controls
style="background-color: rgb(162, 112, 209);" shadow-intensity="1"
alt="By APAR Nepal, an 'Extended reality' company.">
<button slot="ar-button" style="
background-color: white;
padding: 8px;
border-radius: 4px;
border: none;
position: absolute;
bottom: 16px;
right: 16px;
">
👋 View with AR
</button>
</model-viewer>
<h2 style="text-align: center;">Photo Frame</h2>
<h2 style="text-align: center; color: #f67a31;">RS 1,000</h2>
<h2 style="
text-align: center;
border: 2px solid gray;
border-radius: 50px;
margin-left: 50px;
margin-right: 50px;
padding-top: 16px;
padding-bottom: 16px;
color: rgb(228, 7, 99);
">
Add to Cart
</h2>
<!-- Loads <model-viewer> for modern browsers: -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js"></script>
<!-- Loads <model-viewer> for old browsers like IE11: -->
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
</body>
</html>
