diff --git a/web-doc/index.html b/web-doc/index.html
index c0d6031..4e5e42f 100644
--- a/web-doc/index.html
+++ b/web-doc/index.html
@@ -1,20 +1,81 @@
-
-
-
-
+
+
+
+
+
+
+
+
+
+
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/web-doc/vitess.md b/web-doc/vitess.md
index 112ed01..a2c8676 100644
--- a/web-doc/vitess.md
+++ b/web-doc/vitess.md
@@ -1 +1,135 @@
-## Vitess
+# Vitess
+
+
+```mermaid
+graph LR
+ A --- B
+ B-->C[fa:fa-ban forbidden]
+ B-->D(fa:fa-spinner);
+```
+
+```c
+#include
+int main ()
+{
+ printf ("hello, world\n");
+ return 0;
+}
+```
+
+```mermaid
+mindmap
+ root((mindmap))
+ Origins
+ Long history
+ ::icon(fa fa-book)
+ Popularisation
+ British popular psychology author Tony Buzan
+ Research
+ On effectivness
and features
+ On Automatic creation
+ Uses
+ Creative techniques
+ Strategic planning
+ Argument mapping
+ Tools
+ Pen and paper
+ Mermaid
+```
+
+```c
+
+#include
+
+// Function to add two numbers
+int add(int a, int b) {
+ return a + b;
+}
+
+// Function to subtract two numbers
+int subtract(int a, int b) {
+ return a - b;
+}
+
+// Function that accepts a function pointer as a parameter
+int calculate(int (*operation)(int, int), int a, int b) {
+ return operation(a, b);
+}
+
+int main() {
+ int x = 100, y = 200;
+ int sum = calculate(add, x, y);
+ int diff = calculate(subtract, x, y);
+ printf("Sum: %d\n", sum);
+ printf("Difference: %d\n", diff);
+ return 0;
+}
+```
+
+```bytefield
+(defattrs :bg-green {:fill "#a0ffa0"})
+(defattrs :bg-yellow {:fill "#ffffa0"})
+(defattrs :bg-pink {:fill "#ffb0a0"})
+(defattrs :bg-cyan {:fill "#a0fafa"})
+(defattrs :bg-purple {:fill "#e4b5f7"})
+
+(defn draw-group-label-header
+ [span label]
+ (draw-box (text label [:math {:font-size 12}]) {:span span :borders #{} :height 14}))
+
+(defn draw-remotedb-header
+ [kind args]
+ (draw-column-headers)
+ (draw-group-label-header 5 "start")
+ (draw-group-label-header 5 "TxID")
+ (draw-group-label-header 3 "type")
+ (draw-group-label-header 2 "args")
+ (draw-group-label-header 1 "tags")
+ (next-row 18)
+
+ (draw-box 0x11 :bg-green)
+ (draw-box 0x872349ae [{:span 4} :bg-green])
+ (draw-box 0x11 :bg-yellow)
+ (draw-box (text "TxID" :math) [{:span 4} :bg-yellow])
+ (draw-box 0x10 :bg-pink)
+ (draw-box (hex-text kind 4 :bold) [{:span 2} :bg-pink])
+ (draw-box 0x0f :bg-cyan)
+ (draw-box (hex-text args 2 :bold) :bg-cyan)
+ (draw-box 0x14 :bg-purple)
+
+ (draw-box (text "0000000c" :hex [[:plain {:font-weight "light" :font-size 16}] " (12)"]) [{:span 4} :bg-purple])
+ (draw-box (hex-text 6 2 :bold) [:box-first :bg-purple])
+ (doseq [val [6 6 3 6 6 6 6 3]]
+ (draw-box (hex-text val 2 :bold) [:box-related :bg-purple]))
+ (doseq [val [0 0]]
+ (draw-box val [:box-related :bg-purple]))
+ (draw-box 0 [:box-last :bg-purple]))
+
+(draw-remotedb-header 0x4702 9)
+
+(draw-box 0x11)
+(draw-box 0x2104 {:span 4})
+(draw-box 0x11)
+(draw-box 0 {:span 4})
+(draw-box 0x11)
+(draw-box (text "length" [:math] [:sub 1]) {:span 4})
+(draw-box 0x14)
+
+(draw-box (text "length" [:math] [:sub 1]) {:span 4})
+(draw-gap "Cue and loop point bytes")
+
+(draw-box nil :box-below)
+(draw-box 0x11)
+(draw-box 0x36 {:span 4})
+(draw-box 0x11)
+(draw-box (text "num" [:math] [:sub "hot"]) {:span 4})
+(draw-box 0x11)
+(draw-box (text "num" [:math] [:sub "cue"]) {:span 4})
+
+(draw-box 0x11)
+(draw-box (text "length" [:math] [:sub 2]) {:span 4})
+(draw-box 0x14)
+(draw-box (text "length" [:math] [:sub 2]) {:span 4})
+(draw-gap "Unknown bytes" {:min-label-columns 6})
+(draw-bottom)
+```