Simple-HDRI-Viewer/index.html at main · Brithub77/Simple-HDRI-Viewer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple HDRI viewer</title>
  <script>
    // Set Tailwind dark mode to 'class' to override system preference
    tailwind = {
      config: {
        darkMode: 'class',
        theme: {
          extend: {
            keyframes: {
              fadeIn: {
                '0%': { opacity: 0 },
                '100%': { opacity: 1 },
              },
              modalEnter: {
                '0%': { opacity: 0, transform: 'scale(.95) translateY(1rem)' },
                '100%': { opacity: 1, transform: 'scale(1) translateY(0)' },
              },
              contentFadeIn: {
                '0%': { opacity: 0, transform: 'translateY(0.5rem)' },
                '100%': { opacity: 1, transform: 'translateY(0)' },
              }
            },
            animation: {
              'fade-in': 'fadeIn 0.3s ease-out',
              'modal-enter': 'modalEnter 0.3s ease-out',
              'content-fade-in': 'contentFadeIn 0.4s ease-out',
            }
          }
        }
      }
    };
  </script>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
  <style>
    body, html {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    .slider-thumb::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 16px;
      height: 16px;
      background: #0ea5e9;
      cursor: pointer;
      border-radius: 50%;
    }
    .slider-thumb::-moz-range-thumb {
      width: 16px;
      height: 16px;
      background: #0ea5e9;
      cursor: pointer;
      border-radius: 50%;
    }
    .material-symbols-outlined {
      font-variation-settings:
      'FILL' 0,
      'wght' 400,
      'GRAD' 0,
      'opsz' 20
    }
    .text-adaptive {
      /* Default light mode text shadow */
      text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
    }
    .dark .text-adaptive {
      /* Dark mode text shadow */
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    }
  </style>
<script type="importmap">
{
  "imports": {
    "three": "https://unpkg.com/three@0.165.0/build/three.module.js",
    "three/addons/": "https://unpkg.com/three@0.165.0/examples/jsm/",
    "rxjs": "https://aistudiocdn.com/rxjs@^7.8.2?conditions=es2015",
    "rxjs/operators": "https://aistudiocdn.com/rxjs@^7.8.2/operators?conditions=es2015",
    "rxjs/ajax": "https://aistudiocdn.com/rxjs@^7.8.2/ajax?conditions=es2015",
    "rxjs/webSocket": "https://aistudiocdn.com/rxjs@^7.8.2/webSocket?conditions=es2015",
    "rxjs/testing": "https://aistudiocdn.com/rxjs@^7.8.2/testing?conditions=es2015",
    "rxjs/fetch": "https://aistudiocdn.com/rxjs@^7.8.2/fetch?conditions=es2015",
    "@angular/core": "https://next.esm.sh/@angular/core@^21.0.3?external=rxjs",
    "@angular/platform-browser": "https://next.esm.sh/@angular/platform-browser@^21.0.3?external=rxjs",
    "@angular/compiler": "https://next.esm.sh/@angular/compiler@^21.0.3?external=rxjs",
    "three/addons/controls/OrbitControls.js": "https://next.esm.sh/three@^0.181.2/addons/controls/OrbitControls.js?external=rxjs",
    "three/addons/loaders/HDRLoader.js": "https://next.esm.sh/three@^0.181.2/addons/loaders/HDRLoader.js?external=rxjs"
  }
}
</script>
</head>
<body>
  <app-root></app-root>
</body>
</html>