Added documentation

Author: wfxey

project/diec/documentation/index.html

@@ -45,6 +45,56 @@ <h1>diec</h1>
         <a href="https://d-i-projects.github.io/project/diec/documentation"><button>Documentation</button></a>
     </div>
     <div class="page-content">
+        <div class="content">
+            <h1>Diec Encoding and Decoding Tutorial</h1>
+
+            <h2>Encode</h2>
+            <pre><code>from diec.encoder import encode
+        
+            encode("I love python and I love to learn new things here too! &lt;3")
+            </code></pre>
+                <h3>Output</h3>
+                <p>The Key you created: <a class="better-link" href="https://github.com/D-I-Projects/diec/blob/main/diec_example/key.diec">key.diec</a></p>
+                <p>The encoded text: <a class="better-link" href="https://github.com/D-I-Projects/diec/blob/main/diec_example/encoded.diec">encoded.diec</a></p>
+                <p><strong>Both of them will appear in your current directory</strong></p>
+                <hr>
+            
+                <h2>Decode</h2>
+                <pre><code>from diec.decoder import decode
+            
+            decode() # The key.diec and encoded.diec files have to be in the same directory as the file that runs this command.
+            </code></pre>
+                <h3>Output</h3>
+                <pre><code>I love python and I love to learn new things here too! &lt;3
+            </code></pre>
+                <hr>
+            
+                <h2>CLI Tutorial</h2>
+                <p>The Diec CLI (Command Line Interface) allows you to easily encode and decode text via the terminal.</p>
+            
+                <h3>Installation</h3>
+                <p>Make sure Diec is installed:</p>
+                <pre><code>pip install diec
+            </code></pre>
+            
+                <h3>Using the CLI</h3>
+                <p>After installation, you can use the following commands:</p>
+            
+                <h4>1. <strong>Encode Text</strong>:</h4>
+                <p>To encode a text, use the <code>encode_cli</code> command. Provide the desired text in quotes:</p>
+                <pre><code>python -m diec encode-cli "Your text here"
+            </code></pre>
+                <p><strong>Example</strong>:</p>
+                <pre><code>python -m diec encode-cli "I love Python and learning new things! &lt;3"
+            </code></pre>
+                <p>After running this command, a key file <code>key.diec</code> and an encoded file <code>encoded.diec</code> will be created in your current directory.</p>
+            
+                <h4>2. <strong>Decode Text</strong>:</h4>
+                <p>To decode an encoded text, use the <code>decode_cli</code> command:</p>
+                <pre><code>python -m diec decode-cli
+            </code></pre>
+                <p>Make sure that the <code>key.diec</code> and <code>encoded.diec</code> files are in the same directory as the script you run.</p>
+        </div>
         <footer>
             <div class="footer-container">
                 <div class="footer-left">

project/diec/documentation/style_project_diec.css

@@ -104,6 +104,11 @@ b {
     transition: color 0.3s ease;
 }
 
+.table-link {
+    color: var(--text-color);
+    text-decoration: solid;
+}
+
 .black:hover {
     color: var(--link-hover-color);
 }
@@ -151,8 +156,8 @@ body.light-mode .program_table tr:hover {
 }
 
 pre {
-    background-color: #282c34;
-    color: #abb2bf;
+    background-color: var(--header-color);
+    color: var(--bg-color);
     border-radius: 5px;
     padding: 10px;
     overflow-x: auto;
@@ -357,12 +362,76 @@ pre code {
     box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
 }
 
+.table_t table {
+    width: 750px;
+    border-radius: 20px;
+    border-collapse: collapse;
+    background-color: var(--bg-color);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    margin: 20px auto;
+    color: var(--text-color);
+}
+
+.table_t th,
+.table_t td {
+    padding: 12px 20px;
+    text-align: left;
+}
+
+.table_t table th {
+    background-color: var(--secondary-color);
+    color: var(--header-color);
+    font-size: 22px;
+    font-weight: bold;
+    position: sticky;
+    top: 0;
+    z-index: 2;
+}
+
+.table_t table tr {
+    font-size: 20px;
+}
+
+.table_t table tr:nth-child(even) {
+    background-color: var(--table-alt-row-color);
+}
+
+.table_t table tr:hover {
+    background-color: var(--hover-bg-color);
+    transition: background-color 0.3s ease;
+}
+
+.table_t table tr:first-child th:first-child {
+    border-top-left-radius: 20px;
+}
+
+.table_t tr:first-child th:last-child {
+    border-top-right-radius: 20px;
+}
+
+.table_t table tr:last-child td:first-child {
+    border-bottom-left-radius: 20px;
+}
+
+.table_t table tr:last-child td:last-child {
+    border-bottom-right-radius: 20px;
+}
+
+.content {
+    top: 0px;
+    padding: 10px;
+}
+
+.better-link {
+    text-decoration: none;
+    color: var(--text-color);
+}
+
 footer {
     display: block;
     background-color: var(--bg-color);
     color: var(--text-color);
     padding: 20px 0;
-    position: absolute;
 }
 
 .footer-container {

project/diec/version-history/index.html

@@ -45,7 +45,7 @@ <h1>diec</h1>
         <a href="https://d-i-projects.github.io/project/diec/documentation"><button>Documentation</button></a>
     </div>
     <div class="page-content">
-        <div class="overview">
+        <div class="content">
             <h1>Version History</h1>
             <p>This Software is licensed under the Open Source MIT License.</p>
             <p>All downloads you find here are the same as the ones you would find in our GitHub and not modified.</p>

project/diec/version-history/style_project_diec.css

@@ -417,7 +417,7 @@ pre code {
     border-bottom-right-radius: 20px;
 }
 
-.overview {
+.content {
     top: 0px;
     padding: 10px;
 }