added true master thesis pdf

.gitignore

@@ -1,9 +1,7 @@
 _book/
+_.site/
 .quarto/
 .vscode/
-# _extensions/
-/.quarto/
-_.site/
 
 /.luarc.json
 index_files

Data/10_Law/0_Lic_Main.qmd

@@ -1,8 +0,0 @@
-# License
-I would like to start by expressing my gratitude to the developer and investor of quarto. It is the main tool that was used to create this webpage of my master thesis.
-As you can see, it looks quite fancy, offers some nice to have features , e.g., the interactive 3D embiedding of the tornado plotly htm plot. We can play with it
- 
- TBD
-
-They did an amazing job with the developement of quarto.
-Quarto is the tool that was used to providing quarto for free

Data/10_Law/0_Mentioning.qmd

@@ -0,0 +1,38 @@
+# License
+I would like to start by expressing my gratitude to the developer and investor of quarto. It is the main tool that was used to create this webpage of my master thesis.
+As you can see, it looks quite fancy, offers some nice to have features , e.g., the interactive 3D embiedding of the tornado plotly htm plot. We can play with it
+ 
+
+moving pencil 
+https://lottiefiles.com/140429-pencil-drawing?lang=de
+https://lottiefiles.com/animoox
+
+They did an amazing job with the developement of quarto.
+Quarto is the tool that was used to providing quarto for free
+
+
+<!-- the bismillah file is obtained through:https://lottiefiles.com/4098-bismillah-in-the-name-of-allah?lang=de
+and https://lottiefiles.com/xylam -->
+
+
+<!-- # ------------------------------ Pakistan Riksha ----------------------------- # -->
+Riksha with pakistan flag on it, is obtained through:
+https://lottiefiles.com/103030-rickshaw-from-pakistan
+My thank goes to: https://lottiefiles.com/ranaadeelfarrukh, for this beautiful animation and also the lottifiles initative - thank you for providing this content for free
+The license of the riksha can be found at: https://lottiefiles.com/page/license
+
+
+the mosque file is obtained through:https://lottiefiles.com/102940-faisal-mosque?lang=de and https://lottiefiles.com/ranaadeelfarrukh 
+
+https://web.hypothes.is/
+https://github.com/shafayetShafee/collapse-callout (MIT)
+
+VScode
+Plotly
+Quarto
+Python, Numpy, Scikitlearn
+lottifiles
+bootstrap
+pandoc
+latex
+inkscape

Data/10_Law/2_Used_Licenses.qmd

@@ -0,0 +1,22 @@
+# Licenses
+
+refer it to @callout_A
+
+:::{.callout-tip collapse='true'}
+### MIT 
+
+Here comes the MIT CODE
+::: 
+
+
+:::{.callout-tip collapse='true'}
+### MIT 
+
+Here comes the MIT CODE
+::: 
+
+:::{.callout-tip collapse='true'}
+### MIT 
+
+Here comes the MIT CODE
+::: 

Data/10_Law/used_Licenses.qmd

@@ -1,9 +0,0 @@
-# ------------------------------ Pakistan Riksha ----------------------------- #
-Riksha with pakistan flag on it, is obtained through:
-https://lottiefiles.com/103030-rickshaw-from-pakistan
-My thank goes to: https://lottiefiles.com/ranaadeelfarrukh, for this beautiful animation and also the lottifiles initative - thank you for providing this content for free
-
-The license of the riksha can be found at: https://lottiefiles.com/page/license
-
-Note: I modfied the original content a bit
-

Data/11_True_Master/Master_Thesis_Javed_Butt.pdf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4c18c9c4d4dd5eb31ba4b17e6586797092da99cf5ca9352ba2f3485c39411e2d
+size 20415820

Data/1_Writing/0_Deco/2_Thanks.qmd

@@ -1,10 +1,61 @@
 
 # Acknowledgments {.unnumbered}
 
-All praise and thanks to the **ONE**, Who does neither need my praise nor my thanks. 
-To the **ONE**, Who is independent of everything and everyone, but on Whom everything and everyone depends.
 
-\vspace{1cm}
+<script src="https://unpkg.com/@dotlottie/[email protected]/dist/dotlottie-player.js"></script>
+
+
+All praise and thanks to the 
+
+<div class="grid m-5">
+  <div class="g-col-6 align-self-center">
+  <!-- see usage of bootstrap for font: https://getbootstrap.com/docs/5.0/utilities/text/ -->
+  <p class="fs-1 text-center lh-lg" >**ONE**</p></div>
+  <div class="g-col-6" id="bismillah_Anim">
+  <!-- the bismillah file is obtained through:https://lottiefiles.com/4098-bismillah-in-the-name-of-allah?lang=de
+and https://lottiefiles.com/xylam -->
+  <dotlottie-player
+    id="bismillah"
+    class="bismillah_Anim"
+    autoplay
+    loop
+    mode="bounce"
+    src="../../7_Animation/bismillah.lottie"
+    style="width: 100%"></dotlottie-player>
+  </div>
+</div>
+
+
+, Who does neither need my praise nor my thanks. 
+To the 
+
+
+<div class="grid m-5">
+  <div class="g-col-6" id="mosque_Anim">
+  <!-- the mosque file is obtained through:https://lottiefiles.com/102940-faisal-mosque?lang=de and https://lottiefiles.com/ranaadeelfarrukh -->
+  <dotlottie-player
+    id="bismillah"
+    class="mosque_Anim"
+    autoplay
+    speed=2
+    loop
+    mode="bounce"
+    src="../../7_Animation/mosque.lottie"
+    style="width: 100%"></dotlottie-player>
+  </div>
+  <div class="g-col-6 align-self-center">
+  <!-- see usage of bootstrap for font: https://getbootstrap.com/docs/5.0/utilities/text/ -->
+  <p class="fs-1 text-center lh-lg" >**ONE**</p></div>
+</div>
+
+, Who is independent of everything and everyone, but on Whom everything and everyone depends.
+
+<p class="m-5"></p>
+---
+<p class="m-5"></p>
+
+### Thanks to the supervisor
 Thank you, Dr. Semaan - you provided me with the possibility to work on such a compelling and challenging topic. Even though the difficult tasks were not always pleasant, I very much appreciate the opportunity to have worked on these captivating tasks. 
 Thank you for the time and effort you invested in this work.
-Also, thank you for the weekly English exercises and for explaining to me how to pronounce methodology correctly :D 
+Also, thank you for the weekly English exercises and for explaining to me how to pronounce methodology correctly.
+

Data/1_Writing/2_Task/6_Modeling.qmd

@@ -13,7 +13,8 @@ The results of both modeling steps can be found in section
 
 ![Data and workflow of the fourth step: Modeling](../../3_Figs_Pyth/2_Task/2_Modeling/0_Modeling.svg){#fig-fig_42}
 
-### Modeling the centroid position evolution {#sec-subsec_2_4_1_CPE}
+### Mo<img src="https://raw.githubusercontent.com/jav-ed/Test_1/master/outp.svg">
+![Data and workflow of the fourth step: Modeling](https://raw.githubusercontent.com/jav-ed/Test_1/master/outp.svg){#fig-fig_42} deling the centroid position evolution {#sec-subsec_2_4_1_CPE}
 In this subsection, the modeling of the \gls{cpevol} is described. 
 The objective is to find a surrogate model, which returns all $K$ centroid positions for an unseen $\beta_{unseen}$. 
 The training data for this are the tracked centroids from the previous step, which is described in section [-@sec-sec_2_3_Tracking]. 

Data/1_Writing/3_Task/5_Pred.qmd

@@ -25,5 +25,5 @@ The motion of the Lorenz system @eq-eq_6_Lorenz is not as complex as of the, e.g
 Nevertheless, the Lorenz system already contains quasi-random elements, i.e., the switching from one ear to the other cannot be captured exactly with a surrogate mode. However, the characteristic of the Lorenz system and other chaotic dynamical systems as well can be replicated.
 In order to prove the latter, more than one method to measure the prediction quality is required.
 
-{{ <include 6_SLS.qmd >}}
-{{ <include 7_Models.qmd >}}
+{{< include 6_SLS.qmd >}}
+{{< include 7_Models.qmd >}}

Data/8_Add_2_Master/0_Add_2_Mast.qmd

@@ -1,10 +1,42 @@
-# Additional to master thesis
+# Modification to the original thesis
+
+The author's goal was to leave the content of the master thesis as it was when it was submitted to the TU-Braunschweig.
+It is known by the author of this thesis that some mistakes in the figures text and other smaller mistakes as well do exist.
+However, the main aim of this website view is to show what was achieved for the master thesis.
+Not to improve the master thesis by correcting mistakes and adding new knowledge to it.
+It is not desired to fix the mentioned errors to make sure that the skills that the author had at the time of writing his master thesis are presented as true as possible.
+
+Also, it is more than fine including these mistakes, since it shows the nature of the human being behind the work, which is appreciated by the author.
+Besides the content of written thesis, making use of HTML, CSS and JavaScript offers some capabilities to make the reading experience interesting and maybe almost entertaining.
+Having said so, the main difference between the written master thesis PDF and this online website edition is that, the website is interactive.
+
+1. It contains animations, 
+2. beautiful dark mode, 
+3. light mode, 
+4. the tornado is shown in the cover page as a 3d interactive plot
+5. the citations are shown in full without having to look at the reference page, hovering over a reference is enough
+
+
+
+
+## Modifications that have been made to the original master thesis 
+Initially, the author wanted to give a detailed listing of the changes which were made for the website. 
+It is believed to be not necessary, however, the following list could be obtained until the change of mind:
+
+1) The images for the PDF were embedded as PDF files. For this web view, the images were all converted from PDF to SVG using Inkscape. 
+Note that at the beginning of writing the master thesis all figures were generated as .svg, PNGs and PDFs via an automated process. 
+However, too many images were stored, thus only SVGs and PNGs were kept at some point. 
+The conversion from PDF to SVG might include quality loss.
+Instead of the conversion, it would be possible to generate all the images directly as SVG again. 
+Considering the high number of used figures, the conversion from PDF to SVG is much faster. 
+For the latter, all the differential equations must have been solved again. 
+So in a nutshell, SVGs are used instead of PDFs, though a conversation process, which might involve some quality losses.
+
+2) the order of references and appendix
+3) the two appendices in the web view have their own separate pages
+4) The first 3 set of equations and figures in section [-@sec-sec_3_2_MOD_CPE] are displayed in full width instead of equation and corresponding being next to each other in a two column representation 
+5) The original master thesis PDF was written in Latex
+6) The section you are reading right now, is not found in the PDF file, due to obvious reasons 
+
 
-Modifcations that have been made to the original master thesis as in pdf
-1) The images for the pdf were embeeded as pdf files --> for this web view the images were all converted from pdf to svg using inkscape. Note at the begining of the thesis all figures were generated as .svg, pngs and pdfs via an automated process. However, too much images were saved, thus only svgs and pngs were kept at some point. It would be possible to generate all the images and embeed them as svgs without any loss of quality as with a conversion from pdf to svg might be encountered. Considering the high number of used figures, the converion from pdf to svg is much faster. Latter also because, not only the figures would have to be expoerted, but rather all the differential equations must have been solved again. So in a nutshell, svgs are used instead of pdfs, though a converzing process, which might envolve some quality losses
 
-2) the order, references and appendix
-3) the two appendix in the web view have their own seperate pages
-4) The first 3 set of equations and figures in section [-@sec-sec_3_2_MOD_CPE] are displayed in full width instead of equation and correspodning being next to each other in a two column representation 
-5) The original master thesis pdf was written in Latex
-6) The section you are reading right now, is not found in the pdf file, due to obvious reasons 

Data/8_Add_2_Master/1_Master_Orig.qmd

@@ -1,2 +1,2 @@
-# Original pdf of master thesis
+# Original Latex master thesis
 TBD

Data/8_Add_2_Master/2_About_Author.qmd

@@ -0,0 +1,8 @@
+# Jav
+ 
+1. Item 1
+2. Item 2
+3. Item 3
+    + Item 3a
+    + Item 3b
+

Web_Code/CSS/cosmo_Dark.scss

@@ -89,3 +89,12 @@ h1, h2, h3, .header-section-number {
 	color: var(--shiny_White)
 }
 
+
+// animation in the acknowledgements.qmd
+#bismillah_Anim{
+  background-color: transparent;
+}
+
+#mosque_Anim{
+  background-color: transparent;
+}

Web_Code/CSS/css_0.css

@@ -29,3 +29,5 @@
 .modebar-btn--logo{
     visibility: hidden;
 }
+
+

Web_Code/CSS/light.scss

@@ -78,4 +78,14 @@ h1, h2, h3, .header-section-number {
 
 .gls{
   color: black;
+}
+
+
+// animation in the acknowledgements.qmd
+#bismillah_Anim{
+  background-color: rgb(20, 218, 96);
+}
+
+#mosque_Anim{
+  background-color: transparent;
 }

_extensions/shafayetShafee/collapse-callout/_extension.yml

@@ -0,0 +1,8 @@
+title: Make the callout blocks collapsible on `html` output format
+author: Shafayet Khan Shafee
+version: 1.0.0
+quarto-required: ">=1.2.0"
+contributes:
+  filters:
+    - collapse-callout.lua
+

_extensions/shafayetShafee/collapse-callout/collapse-callout.lua

@@ -0,0 +1,56 @@
+-- defining all possible callout types
+local callouts_all = {
+        caution = 'callout-caution', 
+  			important = 'callout-important',
+  			tip = 'callout-tip', 
+  			note = 'callout-note', 
+  			warning = 'callout-warning'
+    }
+
+-- function for adding collapse attributes to callout divs
+function collapse_callout(callouts, bool)
+  local callout_filter = {
+    Div = function(el)
+        for key, val in pairs(callouts) do
+          if el.classes:includes(val) then
+            if el.attributes["collapse"] == nil then
+              el.attributes["collapse"] = bool
+              return el
+            end
+          end
+        end
+    end
+  }
+  return callout_filter
+end
+
+-- make changes to input file if the format is html
+if quarto.doc.isFormat("html:js") then
+  function Pandoc (doc)
+    local collapse = doc.meta['collapse-callout']
+    if not collapse then
+     return nil
+    end
+    
+    if collapse.all == false then
+      return doc:walk(collapse_callout(callouts_all,'false'))
+    elseif collapse.all == true then
+      return doc:walk(collapse_callout(callouts_all, 'true'))
+    else
+      filtered_doc = doc
+      for k, v in pairs{"caution", "important", "tip", "note", "warning"} do
+        if collapse[v] == true then
+          filtered_doc = filtered_doc:walk(
+            collapse_callout({callouts_all[v]}, 'true')
+          )
+        elseif collapse[v] == false then
+          filtered_doc = filtered_doc:walk(
+            collapse_callout({callouts_all[v]}, 'false')
+          )
+        end
+      end
+      return filtered_doc
+    end
+    return nil
+  end
+end

_extensions/toc_lof/_extension.yml

@@ -1,8 +0,0 @@
-title: Toc_lof
-author: Javed
-version: 1.0.0
-quarto-required: ">=1.3.0"
-contributes:
-  filters:
-    - toc_lof.lua
-

_extensions/toc_lof/toc_lof.lua

@@ -1,6 +0,0 @@
-
--- Reformat all heading text 
-function Header(el)
-  el.content = pandoc.Emph(el.content)
-  return el
-end

_quarto.yml

@@ -22,17 +22,23 @@ filters:
   # https://github.com/schochastics/quarto-social-share :MIT
   # - social-share
 
+  - collapse-callout
+
+
+  # own filter
   - Code/Gls/gls_Main.lua
   # - Code/Lof/lof.lua
   # - Lof
   # - toc_lof
 
+
 # see: https://github.com/quarto-ext/lightbox 
 lightbox: 
   match: auto
   effect: zoom
   desc-position: right
 
+
 # https://github.com/sellorm/quarto-social-embeds :MIT
 # share:
 #   permalink: "https://mr.schochastics.net/"
@@ -44,13 +50,18 @@ lightbox:
 #   tumblr: true
 #   linkedin: true
 
+collapse-callout:
+  all: true
+callout-appearance: simple
+callout-icon: true
+
 # see: https://quarto.org/docs/reference/formats/html.html#table-of-contents
-toc-depth: 4
+toc-depth: 3
 toc-location: right 
 
 
 # number-sections: false
-number-depth: 4
+number-depth: 3
 
 crossref:
   # see: https://quarto.org/docs/authoring/cross-references.html#options
@@ -120,7 +131,6 @@ cluster-based network modeling"
 
         # testing purposes
         # - trials.qmd
-
         - Data/1_Writing/0_Deco/2_Thanks.qmd
         - Data/1_Writing/0_Deco/1_Erkl.qmd
 
@@ -190,7 +200,13 @@ cluster-based network modeling"
       chapters:
     # -------------------------------- license ------------------------------- #
         - Data/8_Add_2_Master/0_Add_2_Mast.qmd
-        - Data/10_Law/0_Lic_Main.qmd
+        - Data/8_Add_2_Master/1_Master_Orig.qmd
+        - Data/8_Add_2_Master/2_About_Author.qmd
+
+    # ------------------------------------------------------------------------ #
+        - Data/10_Law/0_Mentioning.qmd
+        - Data/10_Law/1_License_Hippocratic.qmd
+        - Data/10_Law/2_Used_Licenses.qmd
 
 
   appendices: 
@@ -226,6 +242,12 @@ format:
 
     highlight-style: dracula
 
+    comments:
+      hypothesis: true
+      # giscus: 
+        # repo: quarto-dev/quarto-docs
+        
+
 
   pdf:
     documentclass: scrreprt

toc_lof/.gitignore

@@ -1,4 +0,0 @@
-*.html
-*.pdf
-*_files/
-/.luarc.json

toc_lof/README.md

@@ -1,23 +0,0 @@
-# Toc_lof Extension For Quarto
-
-_TODO_: Add a short description of your extension.
-
-## Installing
-
-_TODO_: Replace the `<github-organization>` with your GitHub organization.
-
-```bash
-quarto add <github-organization>/toc_lof
-```
-
-This will install the extension under the `_extensions` subdirectory.
-If you're using version control, you will want to check in this directory.
-
-## Using
-
-_TODO_: Describe how to use your extension.
-
-## Example
-
-Here is the source code for a minimal example: [example.qmd](example.qmd).
-

toc_lof/example.qmd

@@ -1,11 +0,0 @@
----
-title: "Toc_lof Example"
-filters:
-  - toc_lof
----
-
-## Heading
-
-This filter adds formatting to heading text.
-
-

trials.qmd

@@ -21,8 +21,20 @@ Intro reference:  [-@sec-chap_1_Intro]\newline
 chapter [-@sec-chap_1_Abc]\newline 
 
 
+<!-- including images from github -->
+<img src="https://raw.githubusercontent.com/jav-ed/Test_1/master/outp.svg">
+<img src="https://huggingface.co/spaces/JavedA/master_Thesis/blob/main/Data/3_Figs_Pyth/outp.svg">
+![Data and workflow of the fourth step: Modeling](https://raw.githubusercontent.com/jav-ed/Test_1/master/outp.svg){#fig-fig_42} 
 
 
+<!-- hugging face -->
+
+<img src="https://huggingface.co/spaces/JavedA/master_Thesis/blob/main/Data/3_Figs_Pyth/outp.svg">
+
+<!-- the raw link works -->
+<img src="https://huggingface.co/spaces/JavedA/master_Thesis/raw/main/Data/3_Figs_Pyth/outp.svg">
+![Data and workflow of the fourth step: Modeling](https://huggingface.co/spaces/JavedA/master_Thesis/raw/main/Data/3_Figs_Pyth/outp.svg){#fig-fig_42} 
+
 # Chap Test {#sec-chap_2_Test}
 Here is some more text