npm - js-cloudimage-360-view - Versions diffs - 3.2.1 → 4.0.0-beta.2 - Mend

js-cloudimage-360-view 3.2.1 → 4.0.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (101) hide show

package/.prettierrc +9 -0
package/README.md +318 -721
package/dist/assets/index-49ZK8EAw.js +9 -0
package/dist/assets/index-CgRAm56E.css +1 -0
package/dist/index.html +697 -0
package/js-cloudimage-360-view-4.0.0-beta.1.tgz +0 -0
package/package.json +22 -12
package/.env +0 -3
package/CHANGELOG.md +0 -175
package/bin/deploy-bundle.js +0 -63
package/dist/ci360.service.js +0 -1270
package/dist/ci360.utils.js +0 -78
package/dist/constants/auto-play-behavior.js +0 -13
package/dist/constants/falsy-values.js +0 -8
package/dist/constants/index.js +0 -39
package/dist/constants/orientations.js +0 -12
package/dist/constants/props-require-reload.js +0 -33
package/dist/constants/regex.js +0 -10
package/dist/index.js +0 -102
package/dist/static/css/hotspots.css +0 -222
package/dist/static/css/style.css +0 -230
package/dist/utils/auto-play/get-speed-factor.js +0 -12
package/dist/utils/auto-play/is-completed-one-cycle.js +0 -27
package/dist/utils/auto-play/loop.js +0 -56
package/dist/utils/class-names/add-class.js +0 -15
package/dist/utils/class-names/remove-class.js +0 -14
package/dist/utils/container-elements/apply-styles-to-container.js +0 -14
package/dist/utils/container-elements/create-360-view-circle-icon.js +0 -14
package/dist/utils/container-elements/create-360-view-icon.js +0 -13
package/dist/utils/container-elements/create-box-shadow.js +0 -14
package/dist/utils/container-elements/create-canvas.js +0 -14
package/dist/utils/container-elements/create-close-fullscreen-icon.js +0 -12
package/dist/utils/container-elements/create-fullscreen-icon.js +0 -12
package/dist/utils/container-elements/create-fullscreen-modal.js +0 -18
package/dist/utils/container-elements/create-icons-container.js +0 -13
package/dist/utils/container-elements/create-inner-box.js +0 -13
package/dist/utils/container-elements/create-loader.js +0 -13
package/dist/utils/container-elements/create-magnifier-icon.js +0 -12
package/dist/utils/container-elements/index.js +0 -96
package/dist/utils/container-elements/remove-child-from-parent.js +0 -14
package/dist/utils/controls/get-item-skipped.js +0 -11
package/dist/utils/controls/init-controls.js +0 -68
package/dist/utils/hotspots/attach-events/hide-popup.js +0 -13
package/dist/utils/hotspots/attach-events/show-popup.js +0 -12
package/dist/utils/hotspots/configs-error-handler.js +0 -23
package/dist/utils/hotspots/create-popper-instace.js +0 -29
package/dist/utils/hotspots/elements/create-carousel-dot.js +0 -20
package/dist/utils/hotspots/elements/create-carousel-image.js +0 -18
package/dist/utils/hotspots/elements/create-hotspot-icon.js +0 -55
package/dist/utils/hotspots/elements/create-hotspot-popup-link.js +0 -19
package/dist/utils/hotspots/elements/create-hotspots.js +0 -20
package/dist/utils/hotspots/elements/create-images-carousel.js +0 -23
package/dist/utils/hotspots/elements/create-modal-description.js +0 -13
package/dist/utils/hotspots/elements/create-modal-title.js +0 -13
package/dist/utils/hotspots/elements/create-model-elements.js +0 -49
package/dist/utils/hotspots/elements/create-popup-arrow.js +0 -14
package/dist/utils/hotspots/elements/create-popup.js +0 -55
package/dist/utils/hotspots/elements/create-read-more-btn.js +0 -15
package/dist/utils/hotspots/fill-empty-coord-with-previous.js +0 -21
package/dist/utils/hotspots/generate-hotspots-configs.js +0 -48
package/dist/utils/hotspots/generate-popup-config.js +0 -27
package/dist/utils/hotspots/get-hotspot-icon.js +0 -12
package/dist/utils/hotspots/get-hotspot-orientation.js +0 -17
package/dist/utils/hotspots/get-hotspot-popup-node.js +0 -12
package/dist/utils/hotspots/get-popup-node.js +0 -12
package/dist/utils/hotspots/hide-hotspot-icon.js +0 -11
package/dist/utils/hotspots/hide-hotspots-icons.js +0 -15
package/dist/utils/hotspots/is-mouse-on-hotspot.js +0 -12
package/dist/utils/hotspots/prepare-hotspots-positions.js +0 -22
package/dist/utils/hotspots/set-current-slide.js +0 -21
package/dist/utils/hotspots/toggle-popup-events.js +0 -19
package/dist/utils/hotspots/update-hotspot-icon-position.js +0 -19
package/dist/utils/hotspots/update-hotspots.js +0 -40
package/dist/utils/image-src/generate-images-path.js +0 -33
package/dist/utils/image-src/is-props-change-require-reload.js +0 -18
package/dist/utils/index.js +0 -211
package/dist/utils/load-images/images-from-folder/prepare-images-from-folder.js +0 -25
package/dist/utils/load-images/images-from-list/prepare-images-from-list.js +0 -21
package/dist/utils/load-images/lazyload/init-lazyload.js +0 -41
package/dist/utils/load-images/lazyload/prepare-first-image/prepare-first-image-from-folder.js +0 -14
package/dist/utils/load-images/lazyload/prepare-first-image/prepare-first-image-from-list.js +0 -20
package/dist/utils/load-images/load-image-as-promise.js +0 -16
package/dist/utils/load-images/load-images-relative-to-container-size.js +0 -19
package/dist/utils/load-images/load-original-images.js +0 -44
package/dist/utils/load-images/pad.js +0 -12
package/dist/utils/load-images/preload-images.js +0 -28
package/dist/utils/load-images/preload-original-images.js +0 -28
package/dist/utils/magnify/get-current-original-image.js +0 -23
package/dist/utils/magnify/get-cursor-position.js +0 -22
package/dist/utils/magnify/magnify.js +0 -47
package/dist/utils/magnify/move-magnifier.js +0 -39
package/dist/utils/responsive/contain.js +0 -9
package/dist/utils/responsive/fit.js +0 -29
package/dist/utils/responsive/get-image-aspect-ratio.js +0 -31
package/dist/utils/responsive/get-responsive-width-of-container.js +0 -11
package/dist/utils/responsive/get-size-according-to-pixel-ratio.js +0 -15
package/dist/utils/responsive/get-size-limit.js +0 -12
package/dist/utils/spin-y/get-moving-direction.js +0 -18
package/dist/utils/zoom/generate-zoom-in-steps.js +0 -18
package/dist/utils/zoom/generate-zoom-out-steps.js +0 -18
package/yarn-error.log +0 -101

package/dist/index.html ADDED Viewed

@@ -0,0 +1,697 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="images work in 360 dimensions with several options" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="icon" type="image/png" href="https://cdn.jolipage.co/5c1376c5-e4cd-4250-b760-4c810d7f5fdd/fdf058fa-5faf-4c83-bffa-4faa42b6d252/dc8ef1f26116405e2b275c5020ad8ce1ac071f86bf2134f143c23e692e396f76.png?vh=3632c0">
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Rubik:wght@400;500;600&display=swap"
+      rel="stylesheet"
+    />
+    <title>JS-Cloudimage-360-view</title>
+    <script type="module" crossorigin src="/js-cloudimage-360-view/assets/index-49ZK8EAw.js"></script>
+    <link rel="stylesheet" crossorigin href="/js-cloudimage-360-view/assets/index-CgRAm56E.css">
+  </head>
+  <body>
+    <section class="content-wrapper">
+      <header class="header">
+        <div class="header-logo">
+          <a href="https://www.scaleflex.com/en/home" target="_blank">
+            <img src="https://scaleflex.cloudimg.io/v7/demo/cloudimage-responsive-demo/Logo.svg?vh=6276cc" alt="scaleflex logo" />
+          </a>
+          <a
+          class="cloud-img-title"
+          href="https://github.com/Scaleflex/js-cloudimage-360-view"
+          target="_blank"
+          >
+            JS Cloudimage 360 view
+          </a>
+        </div>
+        <div class="navbar">
+          <a
+            class="stars-button"
+            href="https://github.com/scaleflex/js-cloudimage-360-view/stargazers"
+            target="_blank"
+          >
+            <img class="github-icons" src="https://scaleflex.cloudimg.io/v7/demo/360-assets/icons/star-icon.svg" alt="star" />
+            <img
+              src="https://img.shields.io/github/stars/scaleflex/js-cloudimage-360-view?color=%23F1F8FF&logo=none&style=social"
+              alt="star-img"
+            />
+          </a>
+          <a
+            class="git-button"
+            href="https://github.com/Scaleflex/js-cloudimage-360-view"
+            target="_blank"
+          >
+            <img
+              class="github-icons"
+              src="https://scaleflex.cloudimg.io/v7/demo/360-assets/icons/github-icon.svg"
+              alt="github-icon"
+            />
+            GitHub
+          </a>
+        </div>
+      </header>
+      <div class="content">
+        <h1>Display <span>every detail</span> from any angle, on any device</h1>
+        <h2 class="content-text">
+          Enhance your customer's experience with stunning 360° views of your products.
+          Create an immersive product experience, every time.
+        </h2>
+        <div class="github-sandbox-buttons-wrapper">
+            <a
+              class="github-button transition-filled-button"
+              href="https://github.com/Scaleflex/js-cloudimage-360-view"
+              target="_blank"
+            >
+              View on GitHub
+            </a>
+            <a
+            class="code-sand-box-button"
+            href="https://codesandbox.io/s/js-cloudimage-360-view-examples-npne18"
+            target="_blank"
+            >
+              Edit to CodeSandbox
+            </a>
+        </div>
+        <div class="car-image container-fluid">
+          <div
+            class=""
+            id="gurkha-suv"
+            data-folder="https://scaleflex.cloudimg.io/v7/demo/suv-orange-car-360/"
+            data-filename-x="orange-{index}.jpg"
+            data-amount-x="73"
+            data-lazyload
+            data-autoplay
+            data-play-once
+            data-hide-360-logo
+            data-speed="120"
+            data-hotspots
+            data-responsive="scaleflex"
+          ></div>
+          <p class="content-text">
+            Featuring 36 images, autoplay*, bottom 360° view circle, arrow keys support*,
+            magnifier*, inner box shadow and more!<br/>
+            (*) available only on desktops
+          </p>
+          <div class="cyan-blur-circle hide-in-mobile"></div>
+          <div class="blue-blur-circle hide-in-mobile"></div>
+        </div>
+        <div class="customer-logos container-fluid">
+          <img class="vivo-logo" src="https://scaleflex.cloudimg.io/v7/demo/company-logos/Vivo.png?vh=f930bb" alt="vivo logo" />
+          <img class="jawa-logo" src="https://scaleflex.cloudimg.io/v7/demo/company-logos/Vector+%281%29.png?vh=b9e7a3" alt="jawa logo" />
+          <img
+            class="sennheiser-logo"
+            src="https://scaleflex.cloudimg.io/v7/demo/company-logos/Sennheiser.png?vh=d6e9e7"
+            alt="Sennheiser logo"
+          />
+          <img
+            class="geelly-logo"
+            src="https://scaleflex.cloudimg.io/v7/demo/company-logos/Geelly.png?vh=1bd4d0"
+            alt="Geelly logo"
+          />
+          <img
+            class="yamaha-logo"
+            src="https://scaleflex.cloudimg.io/v7/demo/company-logos/Yamaha.png?vh=be161d"
+            alt="yamaha logo"
+          />
+          <div class="force-logo-wrapper">
+            <img
+              class="force-logo"
+              src="https://scaleflex.cloudimg.io/v7/demo/company-logos/Force.png?vh=afc507"
+              alt="force logo"
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="gallery-section container-fluid">
+      <div class="gallery-title">
+        <h2>Trusted by top brands, worldwide</h2>
+        <p>Explore the brands that use our plugins.</p>
+      </div>
+      <div class="gallery-content container-fluid">
+        <div class="motorcycle">
+          <div
+            class="cloudimage-360"
+            data-folder="https://scaleflex.cloudimg.io/v7/demo/jawa-motorcycle/"
+            data-filename-x="{index}.jpg"
+            data-amount-x="16"
+            data-lazyload
+            pointer-zoom="1.01"
+            data-magnifier="3"
+            data-responsive="scaleflex"
+          ></div>
+          <p>Toyota</p>
+        </div>
+        <div class="vivo-mobile">
+          <div
+            class="cloudimage-360"
+            data-folder="https://scaleflex.cloudimg.io/v7/demo/vivo-mobile/"
+            data-filename-x="product-{index}.jpg"
+            data-amount-x="60"
+            data-drag-speed="100"
+            data-lazyload
+            data-responsive="scaleflex"
+          ></div>
+          <p>Vivo</p>
+        </div>
+        <div class="geely-car">
+          <div
+            class="cloudimage-360"
+            data-folder="https://scaleflex.cloudimg.io/v7/demo/geely-car/"
+            data-filename-x="Okavango-3-{index}.jpg"
+            data-amount-x="24"
+            data-bottom-circle
+            data-lazyload
+            data-responsive="scaleflex"
+          ></div>
+          <p>Geely</p>
+        </div>
+      </div>
+    </section>
+    <section class="demo-usage">
+      <div class="usage-title">
+        <h2>Create 360° views, your way</h2>
+        <p>
+          Try out our simple, interactive resource to customize an interactive virtual tour of your product.
+        </p>
+      </div>
+      <div class="demo-usage-wrapper container-fluid">
+        <div class="demo-usage-content">
+          <div class="earbuds">
+            <div
+              id="demo-generator"
+              class="cloudimage-360"
+              data-folder="https://scaleflex.cloudimg.io/v7/demo/earbuds/"
+              data-filename-x="{index}.jpg"
+              data-amount-x="233"
+              data-autoplay
+              data-speed="100"
+              data-pointer-zoom="1.5"
+              data-drag-speed="100"
+              data-responsive="scaleflex"
+              data-lazyload
+            >
+              <button class="-left control-buttons"></button>
+              <button class="-right control-buttons"></button>
+              <button
+                id="control-up-button"
+                class="-top control-buttons"
+              ></button>
+              <button
+                id="control-down-button"
+                class="-bottom control-buttons"
+              ></button>
+            </div>
+            <div class="copy-button-wrapper">
+              <div class="copy-button">
+                <img src="https://scaleflex.cloudimg.io/v7/demo/360-assets/icons/copy-icon.svg" alt="copy icon">
+                <p id="copy-text">Copy</p>
+              </div>
+            </div>
+            <div class="output-code-wrapper" id="code-wrapper">
+              <div class="output-code">
+                &lt;div
+                <div class="code" id="code-block"></div>
+                >&lt;/div&gt;
+              </div>
+            </div>
+          </div>
+        <div class="plugin-options-wrapper">
+          <div class="image-source">
+            <div class="image-source-options">
+              <h3>Images source</h3>
+              <select
+                class="plugin-options plugin-selector"
+                id="spin-directions"
+              >
+                <option value="X">spin x demo</option>
+                <option value="Y">spin y demo</option>
+              </select>
+            </div>
+            <div class="image-name-option">
+              <p class="input-title">Images name x</p>
+              <input
+                class="plugin-options"
+                type="text"
+                placeholder="airbuds_{index}.jpg"
+                disabled
+              />
+            </div>
+            <div class="x-amount-option">
+              <p class="input-title">Select amount-x</p>
+              <select
+                class="plugin-options plugin-selector"
+                id="x-images-selector"
+              >
+                <option value="233">233</option>
+                <option value="72">72</option>
+                <option value="35">35</option>
+              </select>
+              <select
+                class="plugin-options plugin-selector"
+                data-plugin-property="data-amount-x"
+                plugin-input
+                id="nike-x-images"
+              >
+                <option value="35">35 images</option>
+                <option value="25">25 images</option>
+                <option value="15">15 images</option>
+              </select>
+            </div>
+            <div id="images-y">
+              <p class="input-title">Select amount-y</p>
+              <select
+                class="plugin-options plugin-selector"
+                data-plugin-property="data-amount-y"
+                plugin-input
+                disabled
+              >
+                <option value="36">36 images</option>
+              </select>
+            </div>
+          </div>
+          <div class="customize">
+            <h3>Customize</h3>
+            <div class="customize-wrapper">
+              <div class="customize-options">
+                <div class="pointer-checkbox">
+                  <label class="checkbox-container">
+                    Pointer zoom
+                    <input
+                    class="customize-inputs"
+                    data-plugin-property="pointerZoom"
+                    type="checkbox"
+                    checked
+                    id="pointer-checkbox"
+                    />
+                    <span class="checkmark"></span>
+                  </label>
+                </div>
+                <div class="customize-selectors-wrappers">
+                  <p class="selectors-wrappers-text">zoom scale</p>
+                  <select
+                    class="customize-selectors plugin-selector"
+                    data-plugin-property="data-pointer-zoom"
+                    id="pointer-zoom-selector"
+                    plugin-input
+                  >
+                    <option selected value="1.5">1.5</option>
+                    <option value="2">2</option>
+                    <option value="2.5">2.5</option>
+                    <option value="3.5">3.5</option>
+                    <option value="4">4</option>
+                  </select>
+                </div>
+              </div>
+              <div class="customize-selectors-wrappers">
+                <p class="selectors-wrappers-text">Auto play behavior</p>
+                <select
+                  class="customize-selectors plugin-selector"
+                  id="auto-play-behavior"
+                  data-plugin-property="data-autoplay-behavior"
+                  plugin-input
+                  disabled
+                >
+                  <option value="spin-xy">spin-xy</option>
+                  <option value="spin-x">spin-x</option>
+                  <option value="spin-y">spin-y</option>
+                  <option value="spin-yx">spin-yx</option>
+                </select>
+              </div>
+              <div class="customize-selectors-wrappers">
+                <p class="selectors-wrappers-text">Auto play speed(milliseconds)</p>
+                <input
+                  id="spin-speed"
+                  class="customize-selectors"
+                  data-plugin-property="data-speed"
+                  plugin-input
+                  type="number"
+                  value="100"
+                  placeholder="e.g. 100"
+                />
+              </div>
+              <div class="customize-selectors-wrappers">
+                <p class="selectors-wrappers-text">Drag speed(milliseconds)</p>
+                <input
+                  id="drag-speed"
+                  class="customize-selectors"
+                  data-plugin-property="data-drag-speed"
+                  plugin-input
+                  type="number"
+                  value="120"
+                  placeholder="e.g. 120"
+                />
+              </div>
+              <div class="checkbox-group">
+                <div>
+                  <label class="checkbox-container">
+                    Magnifier
+                    <input
+                      id="image-magnifier"
+                      class="customize-inputs plugin-option"
+                      data-plugin-property="magnifier"
+                      data-plugin-value="2"
+                      type="checkbox"
+                    />
+                    <span class="checkmark"></span>
+                  </label>
+                </div>
+                <div>
+                  <label class="checkbox-container">
+                    Auto play
+                    <input
+                      data-plugin-property="autoplay"
+                      class="plugin-option"
+                      type="checkbox"
+                      checked
+                    />
+                    <span class="checkmark"></span>
+                  </label>
+                </div>
+                <div>
+                  <label class="checkbox-container">
+                    Auto play once
+                    <input
+                      data-plugin-property="playOnce"
+                      class="plugin-option"
+                      type="checkbox"
+                    />
+                    <span class="checkmark"></span>
+                  </label>
+                </div>
+                <div>
+                  <label class="checkbox-container">
+                    Auto play reverse
+                    <input
+                      data-plugin-property="autoplayReverse"
+                      class="plugin-option"
+                      type="checkbox"
+                    />
+                    <span class="checkmark"></span>
+                  </label>
+                </div>
+                <div>
+                  <label class="checkbox-container">
+                    Fullscreen
+                    <input
+                      data-plugin-property="fullscreen"
+                      class="plugin-option"
+                      type="checkbox"
+                    />
+                    <span class="checkmark"></span>
+                  </label>
+                </div>
+                <div>
+                  <label class="checkbox-container">
+                    Draggable
+                    <input
+                      data-plugin-property="draggable"
+                      class="plugin-option"
+                      type="checkbox"
+                      checked
+                    />
+                    <span class="checkmark"></span>
+                  </label>
+                </div>
+                <div>
+                  <label class="checkbox-container">
+                    Drag reverse
+                    <input
+                      data-plugin-property="dragReverse"
+                      class="plugin-option"
+                      type="checkbox"
+                    />
+                    <span class="checkmark"></span>
+                  </label>
+                </div>
+                <div>
+                  <label class="checkbox-container">
+                    Control
+                    <input
+                      id="control-option"
+                      class="plugin-option"
+                      type="checkbox"
+                      data-plugin-property="data-control"
+                    />
+                    <span class="checkmark"></span>
+                  </label>
+                </div>
+                <div>
+                  <label class="checkbox-container">
+                    Control reverse
+                    <input
+                      data-plugin-property="control-reverse"
+                      class="plugin-option"
+                      type="checkbox"
+                    />
+                    <span class="checkmark"></span>
+                  </label>
+                </div>
+                <div>
+                  <label class="checkbox-container">
+                    Control by keyboard
+                    <input
+                      data-plugin-property="data-keys"
+                      class="plugin-option"
+                      type="checkbox"
+                    />
+                    <span class="checkmark"></span>
+                  </label>
+                </div>
+                <div>
+                  <label class="checkbox-container">
+                    Control by keyboard reverse
+                    <input
+                      data-plugin-property="data-control-reverse"
+                      class="plugin-option"
+                      type="checkbox"
+                    />
+                    <span class="checkmark"></span>
+                  </label>
+                </div>
+                <div>
+                  <label class="checkbox-container">
+                    Stop at edges
+                    <input
+                      data-plugin-property="stopAtEdges"
+                      class="plugin-option"
+                      type="checkbox"
+                    />
+                    <span class="checkmark"></span>
+                  </label>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="questions">
+      <h2>Any questions?</h2>
+      <p>
+        Contact us at <span>hello@cloudimage.io</span>, our experts will be
+        happy to help!
+      </p>
+      <div class="issue-button-wrapper">
+        <a
+          class="issue-button transition-filled-button"
+          href="https://github.com/scaleflex/js-cloudimage-360-view/issues/new"
+          target="_blank"
+        >
+          Submit GitHub issue
+        </a>
+      </div>
+      <div class="cyan-blur-circle hide-in-mobile"></div>
+      <div class="green-blur-circle hide-in-mobile"></div>
+    </section>
+    <section class="footer container-fluid">
+      <div class="accordion-wrapper">
+        <div>
+          <div class="filerobot-accordion">
+            <button data-accordion="2">Info</button>
+            <img
+              data-accordion="2"
+              src="https://scaleflex.cloudimg.io/v7/assets/cloudimage-responsive-assets/down-arrow-icon.png"
+              alt="down-arrow"
+            />
+          </div>
+          <div class="accordion-content" data-accordion-content="2">
+            <div class="footer-info-content">
+              <a
+                href="https://github.com/scaleflex/js-cloudimage-360-view"
+                target="_blank"
+              >
+                View GitHub
+              </a>
+              <a
+                href="https://github.com/scaleflex/js-cloudimage-360-view/issues/"
+                target="_blank"
+              >
+                Current Issues
+              </a>
+              <a
+                href="https://github.com/scaleflex/js-cloudimage-360-view#table_of_contents"
+                target="_blank"
+              >
+                Documentation
+              </a>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div class="filerobot-accordion">
+            <button data-accordion="1">Filerobot</button>
+            <img
+              data-accordion="1"
+              src="https://scaleflex.cloudimg.io/v7/assets/cloudimage-responsive-assets/down-arrow-icon.png"
+              alt="down-arrow"
+            />
+          </div>
+          <div class="accordion-content" data-accordion-content="1">
+            <div class="footer-filerobot-content">
+              <a
+                href="https://scaleflex.cloudimg.io/v7/plugins/filerobot-widget/demo/index.html?vh=d6c246&func=proxy&fmaw_path=/"
+                target="_blank"
+              >
+                Filerobot Media Asset Widget
+              </a>
+              <a
+                href="https://scaleflex.github.io/filerobot-image-editor/"
+                target="_blank"
+              >
+              Filerobot Image Editor
+            </a>
+              <a
+                href="https://scaleflex.github.io/js-cloudimage-responsive/"
+                target="_blank"
+              >
+                Cloudimage Responsive
+              </a>
+              <a
+                href="https://scaleflex.github.io/js-cloudimage-360-view/"
+                target="_blank"
+              >
+                Cloudimage 360 view
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="navbar">
+        <a
+          class="stars"
+          href="https://github.com/scaleflex/js-cloudimage-360-view/stargazers"
+          target="_blank"
+        >
+          <img class="star" src="https://scaleflex.cloudimg.io/v7/assets/cloudimage-responsive-assets/star-icon.svg" alt="star" />
+          <img
+            class="stars-label"
+            src="https://img.shields.io/github/stars/scaleflex/js-cloudimage-360-view?logo=none&style=social"
+            alt="star-img"
+          />
+        </a>
+        <a
+          class="github"
+          href="https://github.com/scaleflex/js-cloudimage-360-view"
+          target="_blank"
+        >
+          <img
+            src="https://scaleflex.cloudimg.io/v7/assets/cloudimage-responsive-assets/github-icon.svg"
+            alt="github-icon"
+          />
+          <p>GitHub</p>
+        </a>
+      </div>
+      <div class="footer-logo">
+        <a href="https://www.scaleflex.com/en/home" target="_blank">
+          <img src="https://scaleflex.cloudimg.io/v7/demo/cloudimage-responsive-demo/Logo.svg?vh=6276cc" alt="scaleflex-logo" />
+        </a>
+        <p>
+          Made with ❤ by the
+          <span>
+            <a href=" https://scaleflex.com/en/home" target="_blank">Scaleflex</a>
+          </span>
+          team, the guys behind
+          <span>
+            <a href=" https://cloudimage.io/en/home" target="_blank"
+              >Cloudimage.io</a></span>. Powered by
+          <span>
+            <a href="https://filerobot.com/en/home" target="_blank">Filerobot</a></span>. All rights reserved.
+        </p>
+        <div class="footer-blur-circle"></div>
+      </div>
+      <div class="footer-wrapper">
+        <div class="footer-info">
+          <h4>Info</h4>
+          <div class="footer-info-content">
+            <a
+              href="https://github.com/scaleflex/js-cloudimage-360-view"
+              target="_blank"
+            >
+              View GitHub
+            </a>
+            <a
+              href="https://github.com/scaleflex/js-cloudimage-360-view/issues/"
+              target="_blank"
+            >
+              Current Issues
+            </a>
+            <a
+              href="https://github.com/scaleflex/js-cloudimage-360-view#table_of_contents"
+              target="_blank"
+            >
+              Documentation
+            </a>
+          </div>
+        </div>
+        <div class="footer-filerobot">
+          <h4>Filerobot UI Family</h4>
+          <div class="footer-filerobot-content">
+            <a
+              href="https://scaleflex.cloudimg.io/v7/plugins/filerobot-widget/demo/index.html?vh=d6c246&func=proxy&fmaw_path=/"
+              target="_blank"
+            >
+              Filerobot Media Asset Widget
+            </a>
+            <a
+              href="https://scaleflex.github.io/filerobot-image-editor/"
+              target="_blank"
+            >
+              Filerobot Image Editor
+            </a>
+            <a
+              href="https://scaleflex.github.io/js-cloudimage-responsive/"
+              target="_blank"
+            >
+              Cloudimage Responsive
+            </a>
+            <a
+              href="https://scaleflex.github.io/js-cloudimage-360-view"
+              target="_blank"
+            >
+              Cloudimage 360 view
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  </body>
+</html>