AR

<!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>&lt;model-viewer&gt; 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>

Similiar Collections

Python strftime reference pandas.Period.strftime python - Formatting Quarter time in pandas columns - Stack Overflow python - Pandas: Change day - Stack Overflow python - Check if multiple columns exist in a df - Stack Overflow Pandas DataFrame apply() - sending arguments examples python - How to filter a dataframe of dates by a particular month/day? - Stack Overflow python - replace a value in the entire pandas data frame - Stack Overflow python - Replacing blank values (white space) with NaN in pandas - Stack Overflow python - get list from pandas dataframe column - Stack Overflow python - How to drop rows of Pandas DataFrame whose value in a certain column is NaN - Stack Overflow python - How to drop rows of Pandas DataFrame whose value in a certain column is NaN - Stack Overflow python - How to lowercase a pandas dataframe string column if it has missing values? - Stack Overflow How to Convert Integers to Strings in Pandas DataFrame - Data to Fish How to Convert Integers to Strings in Pandas DataFrame - Data to Fish create a dictionary of two pandas Dataframe columns? - Stack Overflow python - ValueError: No axis named node2 for object type <class 'pandas.core.frame.DataFrame'> - Stack Overflow Python Pandas iterate over rows and access column names - Stack Overflow python - Creating dataframe from a dictionary where entries have different lengths - Stack Overflow python - Deleting DataFrame row in Pandas based on column value - Stack Overflow python - How to check if a column exists in Pandas - Stack Overflow python - Import pandas dataframe column as string not int - Stack Overflow python - What is the most efficient way to create a dictionary of two pandas Dataframe columns? - Stack Overflow Python Loop through Excel sheets, place into one df - Stack Overflow python - How do I get the row count of a Pandas DataFrame? - Stack Overflow python - How to save a new sheet in an existing excel file, using Pandas? - Stack Overflow Python Loop through Excel sheets, place into one df - Stack Overflow How do I select a subset of a DataFrame? — pandas 1.2.4 documentation python - Delete column from pandas DataFrame - Stack Overflow