Website update

Author: chinefed

website/tutorials.html

@@ -33,14 +33,75 @@
       <div class="shell grid">
       <main>
 
-        <section style="text-align:center;padding:4rem 1rem;">
+        <section>
+          <h2>Example Input Image</h2>
+        
+          <p>
+          We provide the input image used in the GUI and CLI tutorials for download.
+          </p>
+          
+          <a href="https://github.com/chinefed/DNA2Graph/releases/download/v1.0.1/sample_input.tif" class="btn">Download Example Input Image</a>
+          
+        </section>
+
+        <section>
+          <h2>Getting Started</h2>
+        
+        <iframe
+          width="560"
+          height="315"
+          src="https://www.youtube.com/embed/GiRrF6uvSvA"
+          title="DNA2Graph Tutorial: Getting Started"
+          frameborder="0"
+          allowfullscreen>
+        </iframe>
+        
+          <div class="note-box">
+
+        <strong>NOTE:</strong>
+        The trained segmentation pipeline is available as a beta feature.
+        Try the standard pipeline first.
+        </div>
+        
+        </section>
+        
+        <section>
+          <h2>Understanding the Output Files</h2>
+        
+        <iframe
+          width="560"
+          height="315"
+          src="https://www.youtube.com/embed/6ZZYIvV4-6Y"
+          title="DNA2Graph Tutorial: Understanding the Output Files"
+          frameborder="0"
+          allowfullscreen>
+        </iframe>
 
-        <h1>Page Under Construction</h1>
-        <p>
-          The tutorial page will be available soon.
-        </p>
-      
         </section>
+        
+        <section>
+          <h2>Advanced Options</h2>
+        
+        <iframe
+          width="560"
+          height="315"
+          src="https://www.youtube.com/embed/uKdudehy4Zk"
+          title="DNA2Graph Tutorial: Advanced Options"
+          frameborder="0"
+          allowfullscreen>
+        </iframe>
+    
+        <div class="note-box">
+        <strong>NOTE:</strong>
+        The segmenter patch size must not be smaller than the shortest side of the input image.
+        </div>
+        
+        <div class="note-box">
+        <strong>NOTE:</strong>
+        When using the trained segmentation pipeline, the patch size must also be divisible by 32.
+        </div>
+      
+      </section>
 
       </main>
       </div>