DemiSel
/
encantar-js
보기 1
좋아요 0
포크 0
코드 이슈 0 풀 리퀘스트 0 릴리즈 0 위키 Activity
소스 검색

Update the website

customisations
alemart 1 년 전
부모
d13bf1e20a
커밋
bcdc02b5d2
22개의 변경된 파일과 166개의 추가작업 그리고 71개의 파일을 삭제
분할 보기 변경상태 보기
  1. 6
    7
      README.md
  2. 26
    5
      demos/hello-aframe/README.html
  3. BIN
      demos/hello-aframe/qr-code.gif
  4. 26
    5
      demos/hello-three/README.html
  5. BIN
      demos/hello-three/qr-code.gif
  6. 26
    5
      demos/hello-webgl/README.html
  7. BIN
      demos/hello-webgl/qr-code.gif
  8. 26
    5
      demos/hello-world/README.html
  9. BIN
      demos/hello-world/qr-code.gif
  10. 26
    5
      demos/touch-three/README.html
  11. BIN
      demos/touch-three/qr-code.gif
  12. 0
    2
      docs/api/ar.md
  13. 10
    14
      docs/demos.md
  14. 1
    1
      docs/faq.md
  15. 8
    9
      docs/getting-started/index.md
  16. 0
    1
      docs/getting-started/set-up-a-web-server.md
  17. BIN
      docs/img/image-tracking-gizmos.webp
  18. BIN
      docs/img/page-with-nothing.webp
  19. BIN
      docs/img/page-with-reference-image.webp
  20. 8
    11
      docs_overrides/index.html
  21. 0
    1
      docs_overrides/main.html
  22. 3
    0
      mkdocs.yml

+ 6
- 7
README.md 파일 보기 

@@ -8,8 +8,8 @@ Create amazing Augmented Reality experiences with **encantAR.js**, a GPU-acceler
8 8
9 9 
 ## Features
10 10
11 
-* **Runs everywhere**: on Android, on iOS, and even on Desktop computers. No need of AR-capable devices.
12 
-* **Image tracking**. Use it to track detailed images such as: book covers, cartoons and photos.
11 
+* **Runs everywhere**: on Android, on iOS, and even on Desktop computers.
12 
+* **Image tracking**: track detailed images such as book covers, cartoons and photos.
13 13
14 14 
 ## Try a demo
15 15 
 
@@ -25,11 +25,10 @@ Create amazing Augmented Reality experiences with **encantAR.js**, a GPU-acceler
25 25
26 26 
 ## Why use encantAR.js?
27 27
28 
-* **No need to download apps!** encantAR.js is a WebAR engine: it runs in web browsers. Users can access the AR experiences immediately.
29 
-* **Easy to get started!** encantAR.js can be used with a `<script>` tag in your page. A static HTML page is enough to get started.
30 
-* **Fast and powerful!** encantAR.js is GPU-accelerated. It uses WebGL2 and WebAssembly for turbocharged performance.
31 
-* **Fully standalone!** encantAR.js is built from scratch using standard web technologies. No need for additional hardware or software!
32 
-* **Free and open-source!** Get started right away!
28 
+* **Wide compatibility:** encantAR.js runs in all modern web browsers. It's built from scratch using standard web technologies. No need of AR-capable devices.
29 
+* **Fast and powerful:** encantAR.js is GPU-accelerated. It uses WebGL2 and WebAssembly for turbocharged performance.
30 
+* **No need to download apps:** encantAR.js is a WebAR engine. Users can access the AR experiences immediately.
31 
+* **Easy to get started:** encantAR.js can be used with a `<script>` tag in your page. A static HTML page is enough to get started.
33 32
34 33 
 ## Browser compatibility
35 34

+ 26
- 5
demos/hello-aframe/README.html 파일 보기 

@@ -4,6 +4,20 @@
4 4 
         <meta charset="utf-8">
5 5 
         <title>encantAR.js WebAR demo with A-Frame</title>
6 6 
         <style>
7 
+        body {
8 
+            font-family: sans-serif;
9 
+            background-color: whitesmoke;
10 
+        }
11 
+
12 
+        a:any-link {
13 
+            color: #7e56c2;
14 
+            text-decoration: none;
15 
+        }
16 
+
17 
+        a:hover {
18 
+            text-decoration: underline;
19 
+        }
20 
+
7 21 
         li + li {
8 22 
             margin-top: 1em;
9 23 
         }
 
@@ -17,17 +31,23 @@
17 31 
             display: block;
18 32 
             width: 256px;
19 33 
             image-rendering: pixelated;
34 
+            border: 1px dashed black;
35 
+        }
36 
+
37 
+        a img {
38 
+            height: 5em;
39 
+            border-radius: 4px;
20 40 
         }
21 41
22 
-        a.button img {
23 
-            width: 6em;
24 
-            height: 6em;
25 
-            border-radius: 8px;
42 
+        @media screen and (min-width: 768px) {
43 
+            a img {
44 
+                height: 3em;
45 
+            }
26 46 
         }
27 47 
         </style>
28 48 
     </head>
29 49 
     <body>
30 
-        <h1>WebAR with A-Frame</h1>
50 
+        <h1>encantAR.js with A-Frame</h1>
31 51 
         <p>Scan the QR code to launch the web-based Augmented Reality experience. Next, scan <a href="../assets/my-reference-image.webp" target="_blank">this cartoon</a>.</p>
32 52
33 53 
         <h2>Menu</h2>
 
@@ -48,6 +68,7 @@
48 68 
             <a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Falemart.github.io/encantar-js&hashtags=encantar-js" target="_blank" rel="external" class="button"><img src="../assets/twitter.png" alt="Share on X"></a>
49 69 
             <a href="https://wa.me/?text=https%3A%2F%2Falemart.github.io/encantar-js" target="_blank" rel="external" class="button"><img src="../assets/whatsapp.png" alt="Share via WhatsApp"></a>
50 70 
             <a href="https://t.me/share/url?url=https%3A%2F%2Falemart.github.io/encantar-js" target="_blank" rel="external" class="button"><img src="../assets/telegram.png" alt="Share via Telegram"></a>
71 
+            <a href="https://github.com/sponsors/alemart" target="_blank" rel="external"><img alt="GitHub Sponsors" src="https://img.shields.io/github/sponsors/alemart?style=for-the-badge&logo=github&label=Sponsor&labelColor=%237e56c2&color=%23ffd500"></a>
51 72 
         </div>
52 73 
     </body>
53 74 
 </html>

BIN
demos/hello-aframe/qr-code.gif 파일 보기


+ 26
- 5
demos/hello-three/README.html 파일 보기 

@@ -4,6 +4,20 @@
4 4 
         <meta charset="utf-8">
5 5 
         <title>encantAR.js WebAR demo with three.js</title>
6 6 
         <style>
7 
+        body {
8 
+            font-family: sans-serif;
9 
+            background-color: whitesmoke;
10 
+        }
11 
+
12 
+        a:any-link {
13 
+            color: #7e56c2;
14 
+            text-decoration: none;
15 
+        }
16 
+
17 
+        a:hover {
18 
+            text-decoration: underline;
19 
+        }
20 
+
7 21 
         li + li {
8 22 
             margin-top: 1em;
9 23 
         }
 
@@ -17,17 +31,23 @@
17 31 
             display: block;
18 32 
             width: 256px;
19 33 
             image-rendering: pixelated;
34 
+            border: 1px dashed black;
35 
+        }
36 
+
37 
+        a img {
38 
+            height: 5em;
39 
+            border-radius: 4px;
20 40 
         }
21 41
22 
-        a.button img {
23 
-            width: 6em;
24 
-            height: 6em;
25 
-            border-radius: 8px;
42 
+        @media screen and (min-width: 768px) {
43 
+            a img {
44 
+                height: 3em;
45 
+            }
26 46 
         }
27 47 
         </style>
28 48 
     </head>
29 49 
     <body>
30 
-        <h1>WebAR with three.js</h1>
50 
+        <h1>encantAR.js with three.js</h1>
31 51 
         <p>Scan the QR code to launch the web-based Augmented Reality experience. Next, scan <a href="../assets/my-reference-image.webp" target="_blank">this cartoon</a>.</p>
32 52
33 53 
         <h2>Menu</h2>
 
@@ -48,6 +68,7 @@
48 68 
             <a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Falemart.github.io/encantar-js&hashtags=encantar-js" target="_blank" rel="external" class="button"><img src="../assets/twitter.png" alt="Share on X"></a>
49 69 
             <a href="https://wa.me/?text=https%3A%2F%2Falemart.github.io/encantar-js" target="_blank" rel="external" class="button"><img src="../assets/whatsapp.png" alt="Share via WhatsApp"></a>
50 70 
             <a href="https://t.me/share/url?url=https%3A%2F%2Falemart.github.io/encantar-js" target="_blank" rel="external" class="button"><img src="../assets/telegram.png" alt="Share via Telegram"></a>
71 
+            <a href="https://github.com/sponsors/alemart" target="_blank" rel="external"><img alt="GitHub Sponsors" src="https://img.shields.io/github/sponsors/alemart?style=for-the-badge&logo=github&label=Sponsor&labelColor=%237e56c2&color=%23ffd500"></a>
51 72 
         </div>
52 73 
     </body>
53 74 
 </html>

BIN
demos/hello-three/qr-code.gif 파일 보기


+ 26
- 5
demos/hello-webgl/README.html 파일 보기 

@@ -4,6 +4,20 @@
4 4 
         <meta charset="utf-8">
5 5 
         <title>encantAR.js WebAR demo with WebGL</title>
6 6 
         <style>
7 
+        body {
8 
+            font-family: sans-serif;
9 
+            background-color: whitesmoke;
10 
+        }
11 
+
12 
+        a:any-link {
13 
+            color: #7e56c2;
14 
+            text-decoration: none;
15 
+        }
16 
+
17 
+        a:hover {
18 
+            text-decoration: underline;
19 
+        }
20 
+
7 21 
         li + li {
8 22 
             margin-top: 1em;
9 23 
         }
 
@@ -17,17 +31,23 @@
17 31 
             display: block;
18 32 
             width: 256px;
19 33 
             image-rendering: pixelated;
34 
+            border: 1px dashed black;
35 
+        }
36 
+
37 
+        a img {
38 
+            height: 5em;
39 
+            border-radius: 4px;
20 40 
         }
21 41
22 
-        a.button img {
23 
-            width: 6em;
24 
-            height: 6em;
25 
-            border-radius: 8px;
42 
+        @media screen and (min-width: 768px) {
43 
+            a img {
44 
+                height: 3em;
45 
+            }
26 46 
         }
27 47 
         </style>
28 48 
     </head>
29 49 
     <body>
30 
-        <h1>WebAR with WebGL</h1>
50 
+        <h1>encantAR.js with WebGL</h1>
31 51 
         <p>Scan the QR code to launch the web-based Augmented Reality experience. Next, scan <a href="../assets/my-reference-image.webp" target="_blank">this cartoon</a>.</p>
32 52
33 53 
         <h2>Menu</h2>
 
@@ -48,6 +68,7 @@
48 68 
             <a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Falemart.github.io/encantar-js&hashtags=encantar-js" target="_blank" rel="external" class="button"><img src="../assets/twitter.png" alt="Share on X"></a>
49 69 
             <a href="https://wa.me/?text=https%3A%2F%2Falemart.github.io/encantar-js" target="_blank" rel="external" class="button"><img src="../assets/whatsapp.png" alt="Share via WhatsApp"></a>
50 70 
             <a href="https://t.me/share/url?url=https%3A%2F%2Falemart.github.io/encantar-js" target="_blank" rel="external" class="button"><img src="../assets/telegram.png" alt="Share via Telegram"></a>
71 
+            <a href="https://github.com/sponsors/alemart" target="_blank" rel="external"><img alt="GitHub Sponsors" src="https://img.shields.io/github/sponsors/alemart?style=for-the-badge&logo=github&label=Sponsor&labelColor=%237e56c2&color=%23ffd500"></a>
51 72 
         </div>
52 73 
     </body>
53 74 
 </html>

BIN
demos/hello-webgl/qr-code.gif 파일 보기


+ 26
- 5
demos/hello-world/README.html 파일 보기 

@@ -4,6 +4,20 @@
4 4 
         <meta charset="utf-8">
5 5 
         <title>encantAR.js WebAR template</title>
6 6 
         <style>
7 
+        body {
8 
+            font-family: sans-serif;
9 
+            background-color: whitesmoke;
10 
+        }
11 
+
12 
+        a:any-link {
13 
+            color: #7e56c2;
14 
+            text-decoration: none;
15 
+        }
16 
+
17 
+        a:hover {
18 
+            text-decoration: underline;
19 
+        }
20 
+
7 21 
         li + li {
8 22 
             margin-top: 1em;
9 23 
         }
 
@@ -17,17 +31,23 @@
17 31 
             display: block;
18 32 
             width: 256px;
19 33 
             image-rendering: pixelated;
34 
+            border: 1px dashed black;
35 
+        }
36 
+
37 
+        a img {
38 
+            height: 5em;
39 
+            border-radius: 4px;
20 40 
         }
21 41
22 
-        a.button img {
23 
-            width: 6em;
24 
-            height: 6em;
25 
-            border-radius: 8px;
42 
+        @media screen and (min-width: 768px) {
43 
+            a img {
44 
+                height: 3em;
45 
+            }
26 46 
         }
27 47 
         </style>
28 48 
     </head>
29 49 
     <body>
30 
-        <h1>WebAR template: Hello, world!</h1>
50 
+        <h1>encatAR.js template: Hello, world!</h1>
31 51 
         <p>Scan the QR code to launch the web-based Augmented Reality experience. Next, scan <a href="../assets/my-reference-image.webp" target="_blank">this cartoon</a>.</p>
32 52
33 53 
         <h2>Menu</h2>
 
@@ -48,6 +68,7 @@
48 68 
             <a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Falemart.github.io/encantar-js&hashtags=encantar-js" target="_blank" rel="external" class="button"><img src="../assets/twitter.png" alt="Share on X"></a>
49 69 
             <a href="https://wa.me/?text=https%3A%2F%2Falemart.github.io/encantar-js" target="_blank" rel="external" class="button"><img src="../assets/whatsapp.png" alt="Share via WhatsApp"></a>
50 70 
             <a href="https://t.me/share/url?url=https%3A%2F%2Falemart.github.io/encantar-js" target="_blank" rel="external" class="button"><img src="../assets/telegram.png" alt="Share via Telegram"></a>
71 
+            <a href="https://github.com/sponsors/alemart" target="_blank" rel="external"><img alt="GitHub Sponsors" src="https://img.shields.io/github/sponsors/alemart?style=for-the-badge&logo=github&label=Sponsor&labelColor=%237e56c2&color=%23ffd500"></a>
51 72 
         </div>
52 73 
     </body>
53 74 
 </html>

BIN
demos/hello-world/qr-code.gif 파일 보기


+ 26
- 5
demos/touch-three/README.html 파일 보기 

@@ -4,6 +4,20 @@
4 4 
         <meta charset="utf-8">
5 5 
         <title>encantAR.js WebAR demo with three.js and touch interaction</title>
6 6 
         <style>
7 
+        body {
8 
+            font-family: sans-serif;
9 
+            background-color: whitesmoke;
10 
+        }
11 
+
12 
+        a:any-link {
13 
+            color: #7e56c2;
14 
+            text-decoration: none;
15 
+        }
16 
+
17 
+        a:hover {
18 
+            text-decoration: underline;
19 
+        }
20 
+
7 21 
         li + li {
8 22 
             margin-top: 1em;
9 23 
         }
 
@@ -17,17 +31,23 @@
17 31 
             display: block;
18 32 
             width: 256px;
19 33 
             image-rendering: pixelated;
34 
+            border: 1px dashed black;
35 
+        }
36 
+
37 
+        a img {
38 
+            height: 5em;
39 
+            border-radius: 4px;
20 40 
         }
21 41
22 
-        a.button img {
23 
-            width: 6em;
24 
-            height: 6em;
25 
-            border-radius: 8px;
42 
+        @media screen and (min-width: 768px) {
43 
+            a img {
44 
+                height: 3em;
45 
+            }
26 46 
         }
27 47 
         </style>
28 48 
     </head>
29 49 
     <body>
30 
-        <h1>WebAR with three.js and touch interaction</h1>
50 
+        <h1>encantAR.js with three.js and touch interaction</h1>
31 51 
         <p>Scan the QR code to launch the web-based Augmented Reality experience. Next, scan <a href="../assets/my-reference-image.webp" target="_blank">this cartoon</a>.</p>
32 52
33 53 
         <h2>Menu</h2>
 
@@ -48,6 +68,7 @@
48 68 
             <a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Falemart.github.io/encantar-js&hashtags=encantar-js" target="_blank" rel="external" class="button"><img src="../assets/twitter.png" alt="Share on X"></a>
49 69 
             <a href="https://wa.me/?text=https%3A%2F%2Falemart.github.io/encantar-js" target="_blank" rel="external" class="button"><img src="../assets/whatsapp.png" alt="Share via WhatsApp"></a>
50 70 
             <a href="https://t.me/share/url?url=https%3A%2F%2Falemart.github.io/encantar-js" target="_blank" rel="external" class="button"><img src="../assets/telegram.png" alt="Share via Telegram"></a>
71 
+            <a href="https://github.com/sponsors/alemart" target="_blank" rel="external"><img alt="GitHub Sponsors" src="https://img.shields.io/github/sponsors/alemart?style=for-the-badge&logo=github&label=Sponsor&labelColor=%237e56c2&color=%23ffd500"></a>
51 72 
         </div>
52 73 
     </body>
53 74 
 </html>

BIN
demos/touch-three/qr-code.gif 파일 보기


+ 0
- 2
docs/api/ar.md 파일 보기 

@@ -2,8 +2,6 @@
2 2
3 3 
 The `AR` namespace is the entry point of the features and components of encantAR.js.
4 4
5 
-I have documented the instantiation of the components of the engine in their respective pages.
6 
-
7 5 
 ## Properties
8 6
9 7 
 ### Settings

+ 10
- 14
docs/demos.md 파일 보기 

@@ -6,7 +6,16 @@ title: WebAR Demo gallery
6 6
7 7 
 # Demo gallery
8 8
9 
-Please read the [guidelines](#guidelines) before you play with the demos. Feel free to remix them.
9 
+!!! info "Guidelines"
10 
+
11 
+    For a good experience:
12 
+
13 
+    * Don't move the camera nor the target image too quickly. This produces motion blur.
14 
+    * The target image should appear clearly in the video.
15 
+    * The physical environment should be properly illuminated.
16 
+    * If you're scanning the image on a screen, make sure to adjust the brightness. If the screen is too bright (too dark), it will cause overexposure (underexposure) in the video and tracking difficulties - details of the images will be lost. Screen reflections are also undesirable.
17 
+    * If you print the image, avoid shiny materials (e.g., glossy paper). They may generate artifacts in the image and interfere with the tracking. Prefer non-reflective materials.
18 
+    * Avoid low-quality cameras. Cameras of common smartphones are okay.
10 19
11 20 
 ## Basic demos
12 21 
 
@@ -42,21 +51,8 @@ Have virtual elements respond to touch input.
42 51
43 52 
 [Launch demo](/encantar-js/demos/touch-three/README.html){ ._blank .md-button }
44 53
45 
-## Guidelines
46 
-
47 
-For a good experience:
48 
-
49 
-* Don't move the camera nor the target image too quickly. This produces motion blur.
50 
-* The target image should appear clearly in the video.
51 
-* The physical environment should be properly illuminated.
52 
-* If you're scanning the image on a screen, make sure to adjust the brightness. If the screen is too bright (too dark), it will cause overexposure (underexposure) in the video and tracking difficulties - details of the images will be lost. Screen reflections are also undesirable.
53 
-* If you print the image, avoid shiny materials (e.g., glossy paper). They may generate artifacts in the image and interfere with the tracking. Prefer non-reflective materials.
54 
-* Avoid low-quality cameras. Cameras of common smartphones are okay.
55 
-
56 54 
 ## Try locally
57 55
58 
-Try the demos on your own machine:
59 
-
60 56 
 * Run on a console:
61 57
62 58 
 ```sh

+ 1
- 1
docs/faq.md 파일 보기 

@@ -2,7 +2,7 @@
2 2
3 3 
 ## What is encantAR.js?
4 4
5 
-encantAR.js is a standalone GPU-accelerated Augmented Reality engine for the web. The name derives from the Portuguese and Spanish word _encantar_, which means: to enchant, to delight, to love, to fascinate, to put a magical spell.
5 
+encantAR.js is a standalone GPU-accelerated Augmented Reality engine for the web. The name derives from the Portuguese and Spanish word _encantar_, which means: to enchant, to delight, to love, to fascinate, to put a magical spell on someone or something. :sparkles:
6 6
7 7 
 ## What is WebAR?
8 8

+ 8
- 9
docs/getting-started/index.md 파일 보기 

@@ -2,22 +2,21 @@
2 2
3 3 
 [![GitHub release (latest by date)](https://img.shields.io/github/v/release/alemart/encantar-js)](https://github.com/alemart/encantar-js/releases/) ![GitHub file size in bytes on a specified ref (branch/commit/tag)](https://img.shields.io/github/size/alemart/encantar-js/dist/encantar.min.js?branch=master&label=minified%20js) [![GitHub Repo stars](https://img.shields.io/github/stars/alemart/encantar-js?logo=github)](https://github.com/alemart/encantar-js/stargazers) [![GitHub Sponsors](https://img.shields.io/github/sponsors/alemart?logo=github)](https://github.com/sponsors/alemart/)
4 4
5 
-Create amazing Augmented Reality experiences with **encantAR.js**, a GPU-accelerated Augmented Reality engine for the web.
5 
+Enchant your users with **encantAR.js**, a GPU-accelerated Augmented Reality engine for the web.
6 6
7 
-[Get started](./introduction.md){ .md-button .md-button--primary } [Try a demo](../demo.md){ .md-button .md-button } [:heart:{ .heart } Support my work](../support-my-work.md){ .md-button }
7 
+[Learn now](./introduction.md){ .md-button .md-button--primary } [Try a demo](../demo.md){ .md-button .md-button } [:heart:{ .heart } Support my work](../support-my-work.md){ .md-button }
8 8
9 9 
 ## Features
10 10
11 
-* **Runs everywhere**: on Android, on iOS, and even on Desktop computers. No need of AR-capable devices.
12 
-* **Image tracking**. Use it to track detailed images such as: book covers, cartoons and photos.
11 
+* **Runs everywhere**: on Android, on iOS, and even on Desktop computers.
12 
+* **Image tracking**: track detailed images such as book covers, cartoons and photos.
13 13
14 14 
 ## Why use encantAR.js?
15 15
16 
-* **No need to download apps!** encantAR.js is a WebAR engine: it runs in web browsers. Users can access the AR experiences immediately.
17 
-* **Easy to get started!** encantAR.js can be used with a `<script>` tag in your page. A static HTML page is enough to get started.
18 
-* **Fast and powerful!** encantAR.js is GPU-accelerated. It uses WebGL2 and WebAssembly for turbocharged performance.
19 
-* **Fully standalone!** encantAR.js is built from scratch using standard web technologies. No need for additional hardware or software!
20 
-* **Free and open-source!** Get started right away!
16 
+* **Wide compatibility:** encantAR.js runs in all modern web browsers. It's built from scratch using standard web technologies. No need of AR-capable devices.
17 
+* **Fast and powerful:** encantAR.js is GPU-accelerated. It uses WebGL2 and WebAssembly for turbocharged performance.
18 
+* **No need to download apps:** encantAR.js is a WebAR engine. Users can access the AR experiences immediately.
19 
+* **Easy to get started:** encantAR.js can be used with a `<script>` tag in your page. A static HTML page is enough to get started.
21 20
22 21 
 ## Browser compatibility
23 22

+ 0
- 1
docs/getting-started/set-up-a-web-server.md 파일 보기 

@@ -89,7 +89,6 @@ You should see a blue screen in your web browser:
89 89
90 90 
 <figure markdown>
91 91 
 [![Expected web page](../img/page-with-nothing.webp)](../img/page-with-nothing.webp){ ._blank }
92 
-<figcaption>Blue Screen of Success</figcaption>
93 92 
 </figure>
94 93
95 94 
 If you see that blue screen, you're ready to proceed. If not, review your settings.

BIN
docs/img/image-tracking-gizmos.webp 파일 보기


BIN
docs/img/page-with-nothing.webp 파일 보기


BIN
docs/img/page-with-reference-image.webp 파일 보기


+ 8
- 11
docs_overrides/index.html 파일 보기 

@@ -17,14 +17,12 @@
17 17 
 }
18 18
19 19 
 :root {
20 
-    --md-secondary-fg-color: #8ef;
20 
+    --md-secondary-fg-color: var(--md-accent-fg-color);
21 21 
 }
22 22
23 23 
 .md-button {
24 
-    --md-primary-bg-color: #4051b5;
25 
-    --md-primary-fg-color: var(--md-secondary-fg-color);
26 
-    --md-accent-fg-color: var(--md-secondary-fg-color);
27 
-    --md-accent-bg-color: var(--md-primary-fg-color--light);
24 
+    --md-primary-bg-color: var(--md-primary-fg-color);
25 
+    --md-primary-fg-color: var(--md-primary-bg-color);
28 26 
     margin-top: 8px;
29 27 
     margin-bottom: 8px;
30 28 
 }
 
@@ -59,7 +57,7 @@
59 57
60 58 
 .splash-text em {
61 59 
     font-style: normal;
62 
-    color: var(--md-secondary-fg-color);
60 
+    color: var(--md-accent-fg-color);
63 61 
 }
64 62
65 63 
 .splash-text h2 {
 
@@ -110,13 +108,12 @@
110 108 
 }
111 109 
 </style>
112 110
113 
-<section id="splash" data-md-color-primary="indigo">
111 
+<section id="splash">
114 112 
     <div class="splash-container md-grid">
115 113 
         <div class="splash-text md-typeset appear text-center">
116 
-            <h2><em>Create Augmented Reality experiences for the web.</em></h2>
117 
-            <p>Open source WebAR engine. Runs everywhere. Easy to get started.</p>
118 
-            <a href="{{ './getting-started' | url }}" class="md-button md-button--primary">Get started</a>
119 
-            <a href="{{ './demo' | url }}" class="md-button" target="_blank">Try a demo</a>
114 
+            <h2>&#x2728; encantAR.js &#x2728;</h2>
115 
+            <p>Enchant your users with Augmented Reality experiences that run everywhere!</p>
116 
+            <a href="{{ './getting-started' | url }}" class="md-button">Get started</a>
120 117 
         </div>
121 118 
         <!--
122 119 
         <div class="splash-image">

+ 0
- 1
docs_overrides/main.html 파일 보기 

@@ -20,6 +20,5 @@
20 20 
 {% endblock %}
21 21
22 22 
 {% block content %}
23 
-{% include "partials/share.html" %}
24 23 
 {{ super() }}
25 24 
 {% endblock %}

+ 3
- 0
mkdocs.yml 파일 보기 

@@ -11,6 +11,9 @@ theme:
11 11 
   name: material
12 12 
   custom_dir: docs_overrides
13 13 
   features: [ 'navigation.tabs', 'navigation.tabs.sticky' ]
14 
+  palette:
15 
+    primary: deep purple
16 
+    accent: yellow
14 17
15 18 
 extra_css: [ 'style/extra.css' ]
16 19 
 extra_javascript: [ 'js/extra.js' ]

Write Preview
Loading…
취소
저장