Added description section

Author: MikhailGorobets

build_artifacts.py

@@ -30,7 +30,8 @@
 
     "Atmosphere",
     "ImguiDemo",
-    "Shadows"
+    "Shadows",
+    "GLTFViewer"
 ]
 
 def extract_repoitory_name(repository_url):

template/index.html

@@ -23,13 +23,43 @@
     <nav>
         <h2>Categories</h2>
         <ul>
+            <li><a href="#diligent-engine">Description</a></li>
             <li><a href="#tutorials">Tutorials</a></li>
             <li><a href="#samples">Samples</a></li>
             <li><a href="#known-issues">Known issues</a></li>
         </ul>
     </nav>
 
     <div class="content">
+        <section id="diligent-engine">
+            <div class="engine-header">
+                <h1>Diligent Engine</h1>
+                <img src="images/header/diligentgraphics-logo.png" height="64" alt="Diligent Graphics Logo">
+            </div>
+
+            <p class="description">
+                <a href="http://diligentgraphics.com/diligent-engine/" target="_blank">
+                Diligent Engine</a> is a lightweight cross-platform graphics API abstraction library and rendering framework.
+                It is designed to take full advantage of Direct3D12, Vulkan, Metal, and WebGPU, while supporting older platforms via Direct3D11, OpenGL, OpenGLES, and WebGL.
+                Diligent Engine exposes a common front-end API and uses HLSL as a universal shading language on all platforms and rendering back-ends.
+                Platform-specific shader representations (GLSL, MSL, DX bytecode, or SPIRV) can be used with corresponding back-ends.
+                The engine is intended to be used as a graphics subsystem in a game engine or any other 3D application.
+                It is distributed under the <a href="https://github.com/DiligentGraphics/DiligentEngine/blob/master/License.txt" target="_blank">Apache 2.0 license</a> and is free to use.
+            </p>
+
+            <div class="badges">
+                <a href="https://github.com/DiligentGraphics/DiligentEngine/blob/master/License.txt" target="_blank">
+                    <img src="https://img.shields.io/badge/License-Apache%202.0-blue.svg" alt="License">
+                </a>
+                <a href="https://discord.gg/t7HGBK7" target="_blank">
+                    <img src="https://img.shields.io/discord/730091778081947680?logo=discord" alt="Chat on Discord">
+                </a>
+                <a href="https://github.com/DiligentGraphics/DiligentEngine/actions/" target="_blank">
+                    <img src="https://img.shields.io/github/actions/workflow/status/DiligentGraphics/DiligentEngine/build-emscripten.yml?branch=master&label=Build%20Status">
+                </a>
+            </div>
+        </section>
+
         <div class="search-bar">
             <input type="text" placeholder="Search Example">
             <span class="search-icon"></span>
@@ -49,11 +79,7 @@ <h2>Samples</h2>
         <section id="known-issues">
             <h2>Known issues</h2>
             <ul>
-                <li>14 - Compute Shader tutorial doesn't work on WebGL.</li>
                 <li>18 - Queries tutorial doesn't work on WebGPU.</li>
-                <li>19 - Render Passes tutorial doesn't work on WebGL.</li>
-                <li>Atmosphere sample doesn't work on WebGL.</li>
-                <li>Shadows sample has artifacts on WebGL.</li>
             </ul>
         </section>
     </div>

template/styles.css

@@ -58,8 +58,9 @@ header {
 
 nav {
     width: 250px;
+    min-width: 200px;
     background-color: rgba(0, 0, 0, 0.4);
-    padding: 10px 20px; 
+    padding: 10px 20px;
     border-radius: 8px;
     margin-right: 20px;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
@@ -68,6 +69,7 @@ nav {
     height: fit-content;
     max-height: calc(100vh - 40px);
     overflow-y: auto;
+    flex-shrink: 0;
 }
 
 nav h2 {
@@ -234,6 +236,10 @@ nav ul li a:hover {
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
 }
 
+section {
+    scroll-margin-top: 100px;
+}
+
 #known-issues {
     margin-top: 40px;
     padding: 30px;
@@ -258,9 +264,90 @@ nav ul li a:hover {
     margin-bottom: 10px; 
 }
 
+#diligent-engine {
+    padding: 25px 30px;
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 12px;
+    margin-bottom: 30px;
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
+    color: #ffffff;
+    line-height: 1.5;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.engine-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 15px;
+    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
+    padding-bottom: 15px;
+}
+
+.engine-header h1 {
+    font-size: 28px;
+    margin: 0;
+    color: #f5f5f5;
+    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
+}
+
+.engine-header img {
+    margin-left: 20px;
+    transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+.engine-header img:hover {
+    transform: scale(1.1);
+    opacity: 0.9;
+}
+
+.tagline {
+    font-size: 20px;
+    color: #d1d1d1;
+    margin-top: 15px;
+    text-align: center;
+    font-weight: bold;
+}
+
+.badges {
+    display: flex;
+    gap: 8px;
+    flex-direction: row-reverse;
+}
+
+.badges img {
+    height: 20px;
+    transition: transform 0.3s ease, filter 0.3s ease;
+}
+
+.badges img:hover {
+    transform: scale(1.05);
+    filter: brightness(1.1);
+}
+
+.description {
+    font-size: 16px;
+    color: #e0e0e0;
+    text-align: justify;
+    margin-top: 20px;
+}
+
+.description a {
+    color: #1abc9c;
+    text-decoration: none;
+    font-weight: bold;
+    transition: color 0.3s ease, text-shadow 0.3s ease;
+}
+
+.description a:hover {
+    color: #16a085;
+    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
+}
+
 @media (max-width: 768px) {
     .container {
         flex-direction: column;
+        align-items: stretch;
     }
 
     nav {