src/views/access.ejs

   1 <!DOCTYPE html>
   2 <html>
   3
   4 <head>
   5   <title></title>
   6   <link rel="stylesheet" type="text/css" href="/styles/main.css" />
   7   <%include ../../partials/head%>
   8   <style media="screen">
   9     .Terminal::after{
  10       content: "-|+|x";
  11       color: white;
  12       position: relative;
  13       left: calc(100% - 60px);
  14       font-size: 1.5em;
  15       font-weight: bolder;
  16       background-color: grey;
  17     }
  18     .Terminal{
  19       background-color: black;
  20       color: white;
  21     }
  22   </style>
  23 </head>
  24
  25 <body>
  26   <header>
  27     <%include ../../partials/header%>
  28   </header>
  29
  30
  31 <div class="">
  32   <head>
  33   <meta charset='UTF-8'><meta name='viewport' content='width=device-width initial-scale=1'>
  34   <title>howto</title><link href='file://night/mermaid.dark.css' rel='stylesheet' type='text/css' /><link href='file://night/codeblock.dark.css' rel='stylesheet' type='text/css' /><link href='file://night/sourcemode.dark.css' rel='stylesheet' type='text/css' /><style type='text/css'>html {overflow-x: initial !important;}:root { --bg-color:#ffffff; --text-color:#333333; --select-text-bg-color:#B5D6FC; --select-text-font-color:auto; --monospace:"Lucida Console",Consolas,"Courier",monospace; }
  35   html { font-size: 14px; background-color: var(--bg-color); color: var(--text-color); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
  36   body { margin: 0px; padding: 0px; height: auto; bottom: 0px; top: 0px; left: 0px; right: 0px; font-size: 1rem; line-height: 1.42857; overflow-x: hidden; background: inherit; tab-size: 4; }
  37   iframe { margin: auto; }
  38   a.url { word-break: break-all; }
  39   a:active, a:hover { outline: 0px; }
  40   .in-text-selection, ::selection { text-shadow: none; background: var(--select-text-bg-color); color: var(--select-text-font-color); }
  41   #write { margin: 0px auto; height: auto; width: inherit; word-break: normal; overflow-wrap: break-word; position: relative; white-space: normal; overflow-x: visible; padding-top: 40px; }
  42   #write.first-line-indent p { text-indent: 2em; }
  43   #write.first-line-indent li p, #write.first-line-indent p * { text-indent: 0px; }
  44   #write.first-line-indent li { margin-left: 2em; }
  45   .for-image #write { padding-left: 8px; padding-right: 8px; }
  46   body.typora-export { padding-left: 30px; padding-right: 30px; }
  47   .typora-export .footnote-line, .typora-export li, .typora-export p { white-space: pre-wrap; }
  48   @media screen and (max-width: 500px) {
  49     body.typora-export { padding-left: 0px; padding-right: 0px; }
  50     #write { padding-left: 20px; padding-right: 20px; }
  51     .CodeMirror-sizer { margin-left: 0px !important; }
  52     .CodeMirror-gutters { display: none !important; }
  53   }
  54   #write li > figure:last-child { margin-bottom: 0.5rem; }
  55   #write ol, #write ul { position: relative; }
  56   img { max-width: 100%; vertical-align: middle; }
  57   button, input, select, textarea { color: inherit; font: inherit; }
  58   input[type="checkbox"], input[type="radio"] { line-height: normal; padding: 0px; }
  59   *, ::after, ::before { box-sizing: border-box; }
  60   #write h1, #write h2, #write h3, #write h4, #write h5, #write h6, #write p, #write pre { width: inherit; }
  61   #write h1, #write h2, #write h3, #write h4, #write h5, #write h6, #write p { position: relative; }
  62   p { line-height: inherit; }
  63   h1, h2, h3, h4, h5, h6 { break-after: avoid-page; break-inside: avoid; orphans: 2; }
  64   p { orphans: 4; }
  65   h1 { font-size: 2rem; }
  66   h2 { font-size: 1.8rem; }
  67   h3 { font-size: 1.6rem; }
  68   h4 { font-size: 1.4rem; }
  69   h5 { font-size: 1.2rem; }
  70   h6 { font-size: 1rem; }
  71   .md-math-block, .md-rawblock, h1, h2, h3, h4, h5, h6, p { margin-top: 1rem; margin-bottom: 1rem; }
  72   .hidden { display: none; }
  73   .md-blockmeta { color: rgb(204, 204, 204); font-weight: 700; font-style: italic; }
  74   a { cursor: pointer; }
  75   sup.md-footnote { padding: 2px 4px; background-color: rgba(238, 238, 238, 0.7); color: rgb(85, 85, 85); border-radius: 4px; cursor: pointer; }
  76   sup.md-footnote a, sup.md-footnote a:hover { color: inherit; text-transform: inherit; text-decoration: inherit; }
  77   #write input[type="checkbox"] { cursor: pointer; width: inherit; height: inherit; }
  78   figure { overflow-x: auto; margin: 1.2em 0px; max-width: calc(100% + 16px); padding: 0px; }
  79   figure > table { margin: 0px !important; }
  80   tr { break-inside: avoid; break-after: auto; }
  81   thead { display: table-header-group; }
  82   table { border-collapse: collapse; border-spacing: 0px; width: 100%; overflow: auto; break-inside: auto; text-align: left; }
  83   table.md-table td { min-width: 32px; }
  84   .CodeMirror-gutters { border-right: 0px; background-color: inherit; }
  85   .CodeMirror-linenumber { user-select: none; }
  86   .CodeMirror { text-align: left; }
  87   .CodeMirror-placeholder { opacity: 0.3; }
  88   .CodeMirror pre { padding: 0px 4px; }
  89   .CodeMirror-lines { padding: 0px; }
  90   div.hr:focus { cursor: none; }
  91   #write pre { white-space: pre-wrap; }
  92   #write.fences-no-line-wrapping pre { white-space: pre; }
  93   #write pre.ty-contain-cm { white-space: normal; }
  94   .CodeMirror-gutters { margin-right: 4px; }
  95   .md-fences { font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; overflow: visible; white-space: pre; background: inherit; position: relative !important; }
  96   .md-diagram-panel { width: 100%; margin-top: 10px; text-align: center; padding-top: 0px; padding-bottom: 8px; overflow-x: auto; }
  97   #write .md-fences.mock-cm { white-space: pre-wrap; }
  98   .md-fences.md-fences-with-lineno { padding-left: 0px; }
  99   #write.fences-no-line-wrapping .md-fences.mock-cm { white-space: pre; overflow-x: auto; }
 100   .md-fences.mock-cm.md-fences-with-lineno { padding-left: 8px; }
 101   .CodeMirror-line, twitterwidget { break-inside: avoid; }
 102   .footnotes { opacity: 0.8; font-size: 0.9rem; margin-top: 1em; margin-bottom: 1em; }
 103   .footnotes + .footnotes { margin-top: 0px; }
 104   .md-reset { margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: top; background: 0px 0px; text-decoration: none; text-shadow: none; float: none; position: static; width: auto; height: auto; white-space: nowrap; cursor: inherit; -webkit-tap-highlight-color: transparent; line-height: normal; font-weight: 400; text-align: left; box-sizing: content-box; direction: ltr; }
 105   li div { padding-top: 0px; }
 106   blockquote { margin: 1rem 0px; }
 107   li .mathjax-block, li p { margin: 0.5rem 0px; }
 108   li { margin: 0px; position: relative; }
 109   blockquote > :last-child { margin-bottom: 0px; }
 110   blockquote > :first-child, li > :first-child { margin-top: 0px; }
 111   .footnotes-area { color: rgb(136, 136, 136); margin-top: 0.714rem; padding-bottom: 0.143rem; white-space: normal; }
 112   #write .footnote-line { white-space: pre-wrap; }
 113   @media print {
 114     body, html { border: 1px solid transparent; height: 99%; break-after: avoid; break-before: avoid; }
 115     #write { margin-top: 0px; padding-top: 0px; border-color: transparent !important; }
 116     .typora-export * { -webkit-print-color-adjust: exact; }
 117     html.blink-to-pdf { font-size: 13px; }
 118     .typora-export #write { padding-left: 32px; padding-right: 32px; padding-bottom: 0px; break-after: avoid; }
 119     .typora-export #write::after { height: 0px; }
 120   }
 121   .footnote-line { margin-top: 0.714em; font-size: 0.7em; }
 122   a img, img a { cursor: pointer; }
 123   pre.md-meta-block { font-size: 0.8rem; min-height: 0.8rem; white-space: pre-wrap; background: rgb(204, 204, 204); display: block; overflow-x: hidden; }
 124   p > .md-image:only-child:not(.md-img-error) img, p > img:only-child { display: block; margin: auto; }
 125   p > .md-image:only-child { display: inline-block; width: 100%; }
 126   #write .MathJax_Display { margin: 0.8em 0px 0px; }
 127   .md-math-block { width: 100%; }
 128   .md-math-block:not(:empty)::after { display: none; }
 129   [contenteditable="true"]:active, [contenteditable="true"]:focus { outline: 0px; box-shadow: none; }
 130   .md-task-list-item { position: relative; list-style-type: none; }
 131   .task-list-item.md-task-list-item { padding-left: 0px; }
 132   .md-task-list-item > input { position: absolute; top: 0px; left: 0px; margin-left: -1.2em; margin-top: calc(1em - 10px); border: none; }
 133   .math { font-size: 1rem; }
 134   .md-toc { min-height: 3.58rem; position: relative; font-size: 0.9rem; border-radius: 10px; }
 135   .md-toc-content { position: relative; margin-left: 0px; }
 136   .md-toc-content::after, .md-toc::after { display: none; }
 137   .md-toc-item { display: block; color: rgb(65, 131, 196); }
 138   .md-toc-item a { text-decoration: none; }
 139   .md-toc-inner:hover { text-decoration: underline; }
 140   .md-toc-inner { display: inline-block; cursor: pointer; }
 141   .md-toc-h1 .md-toc-inner { margin-left: 0px; font-weight: 700; }
 142   .md-toc-h2 .md-toc-inner { margin-left: 2em; }
 143   .md-toc-h3 .md-toc-inner { margin-left: 4em; }
 144   .md-toc-h4 .md-toc-inner { margin-left: 6em; }
 145   .md-toc-h5 .md-toc-inner { margin-left: 8em; }
 146   .md-toc-h6 .md-toc-inner { margin-left: 10em; }
 147   @media screen and (max-width: 48em) {
 148     .md-toc-h3 .md-toc-inner { margin-left: 3.5em; }
 149     .md-toc-h4 .md-toc-inner { margin-left: 5em; }
 150     .md-toc-h5 .md-toc-inner { margin-left: 6.5em; }
 151     .md-toc-h6 .md-toc-inner { margin-left: 8em; }
 152   }
 153   a.md-toc-inner { font-size: inherit; font-style: inherit; font-weight: inherit; line-height: inherit; }
 154   .footnote-line a:not(.reversefootnote) { color: inherit; }
 155   .md-attr { display: none; }
 156   .md-fn-count::after { content: "."; }
 157   code, pre, samp, tt { font-family: var(--monospace); }
 158   kbd { margin: 0px 0.1em; padding: 0.1em 0.6em; font-size: 0.8em; color: rgb(36, 39, 41); background: rgb(255, 255, 255); border: 1px solid rgb(173, 179, 185); border-radius: 3px; box-shadow: rgba(12, 13, 14, 0.2) 0px 1px 0px, rgb(255, 255, 255) 0px 0px 0px 2px inset; white-space: nowrap; vertical-align: middle; }
 159   .md-comment { color: rgb(162, 127, 3); opacity: 0.8; font-family: var(--monospace); }
 160   code { text-align: left; vertical-align: initial; }
 161   a.md-print-anchor { white-space: pre !important; border-width: initial !important; border-style: none !important; border-color: initial !important; display: inline-block !important; position: absolute !important; width: 1px !important; right: 0px !important; outline: 0px !important; background: 0px 0px !important; text-decoration: initial !important; text-shadow: initial !important; }
 162   .md-inline-math .MathJax_SVG .noError { display: none !important; }
 163   .html-for-mac .inline-math-svg .MathJax_SVG { vertical-align: 0.2px; }
 164   .md-math-block .MathJax_SVG_Display { text-align: center; margin: 0px; position: relative; text-indent: 0px; max-width: none; max-height: none; min-height: 0px; min-width: 100%; width: auto; overflow-y: hidden; display: block !important; }
 165   .MathJax_SVG_Display, .md-inline-math .MathJax_SVG_Display { width: auto; margin: inherit; display: inline-block !important; }
 166   .MathJax_SVG .MJX-monospace { font-family: var(--monospace); }
 167   .MathJax_SVG .MJX-sans-serif { font-family: sans-serif; }
 168   .MathJax_SVG { display: inline; font-style: normal; font-weight: 400; line-height: normal; zoom: 90%; text-indent: 0px; text-align: left; text-transform: none; letter-spacing: normal; word-spacing: normal; overflow-wrap: normal; white-space: nowrap; float: none; direction: ltr; max-width: none; max-height: none; min-width: 0px; min-height: 0px; border: 0px; padding: 0px; margin: 0px; }
 169   .MathJax_SVG * { transition: none 0s ease 0s; }
 170   .MathJax_SVG_Display svg { vertical-align: middle !important; margin-bottom: 0px !important; margin-top: 0px !important; }
 171   .os-windows.monocolor-emoji .md-emoji { font-family: "Segoe UI Symbol", sans-serif; }
 172   .md-diagram-panel > svg { max-width: 100%; }
 173   [lang="mermaid"] svg, [lang="flow"] svg { max-width: 100%; height: auto; }
 174   [lang="mermaid"] .node text { font-size: 1rem; }
 175   table tr th { border-bottom: 0px; }
 176   video { max-width: 100%; display: block; margin: 0px auto; }
 177   iframe { max-width: 100%; width: 100%; border: none; }
 178   .highlight td, .highlight tr { border: 0px; }
 179   svg[id^="mermaidChart"] { line-height: 1em; }
 180   mark { background: rgb(255, 255, 0); color: rgb(0, 0, 0); }
 181   .md-html-inline .md-plain, .md-html-inline strong, mark .md-inline-math, mark strong { color: inherit; }
 182   mark .md-meta { color: rgb(0, 0, 0); opacity: 0.3 !important; }
 183
 184
 185   .CodeMirror { height: auto; }
 186   .CodeMirror.cm-s-inner { background: inherit; }
 187   .CodeMirror-scroll { overflow: auto hidden; z-index: 3; }
 188   .CodeMirror-gutter-filler, .CodeMirror-scrollbar-filler { background-color: rgb(255, 255, 255); }
 189   .CodeMirror-gutters { border-right: 1px solid rgb(221, 221, 221); background: inherit; white-space: nowrap; }
 190   .CodeMirror-linenumber { padding: 0px 3px 0px 5px; text-align: right; color: rgb(153, 153, 153); }
 191   .cm-s-inner .cm-keyword { color: rgb(119, 0, 136); }
 192   .cm-s-inner .cm-atom, .cm-s-inner.cm-atom { color: rgb(34, 17, 153); }
 193   .cm-s-inner .cm-number { color: rgb(17, 102, 68); }
 194   .cm-s-inner .cm-def { color: rgb(0, 0, 255); }
 195   .cm-s-inner .cm-variable { color: rgb(0, 0, 0); }
 196   .cm-s-inner .cm-variable-2 { color: rgb(0, 85, 170); }
 197   .cm-s-inner .cm-variable-3 { color: rgb(0, 136, 85); }
 198   .cm-s-inner .cm-string { color: rgb(170, 17, 17); }
 199   .cm-s-inner .cm-property { color: rgb(0, 0, 0); }
 200   .cm-s-inner .cm-operator { color: rgb(152, 26, 26); }
 201   .cm-s-inner .cm-comment, .cm-s-inner.cm-comment { color: rgb(170, 85, 0); }
 202   .cm-s-inner .cm-string-2 { color: rgb(255, 85, 0); }
 203   .cm-s-inner .cm-meta { color: rgb(85, 85, 85); }
 204   .cm-s-inner .cm-qualifier { color: rgb(85, 85, 85); }
 205   .cm-s-inner .cm-builtin { color: rgb(51, 0, 170); }
 206   .cm-s-inner .cm-bracket { color: rgb(153, 153, 119); }
 207   .cm-s-inner .cm-tag { color: rgb(17, 119, 0); }
 208   .cm-s-inner .cm-attribute { color: rgb(0, 0, 204); }
 209   .cm-s-inner .cm-header, .cm-s-inner.cm-header { color: rgb(0, 0, 255); }
 210   .cm-s-inner .cm-quote, .cm-s-inner.cm-quote { color: rgb(0, 153, 0); }
 211   .cm-s-inner .cm-hr, .cm-s-inner.cm-hr { color: rgb(153, 153, 153); }
 212   .cm-s-inner .cm-link, .cm-s-inner.cm-link { color: rgb(0, 0, 204); }
 213   .cm-negative { color: rgb(221, 68, 68); }
 214   .cm-positive { color: rgb(34, 153, 34); }
 215   .cm-header, .cm-strong { font-weight: 700; }
 216   .cm-del { text-decoration: line-through; }
 217   .cm-em { font-style: italic; }
 218   .cm-link { text-decoration: underline; }
 219   .cm-error { color: red; }
 220   .cm-invalidchar { color: red; }
 221   .cm-constant { color: rgb(38, 139, 210); }
 222   .cm-defined { color: rgb(181, 137, 0); }
 223   div.CodeMirror span.CodeMirror-matchingbracket { color: rgb(0, 255, 0); }
 224   div.CodeMirror span.CodeMirror-nonmatchingbracket { color: rgb(255, 34, 34); }
 225   .cm-s-inner .CodeMirror-activeline-background { background: inherit; }
 226   .CodeMirror { position: relative; overflow: hidden; }
 227   .CodeMirror-scroll { height: 100%; outline: 0px; position: relative; box-sizing: content-box; background: inherit; }
 228   .CodeMirror-sizer { position: relative; }
 229   .CodeMirror-gutter-filler, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-vscrollbar { position: absolute; z-index: 6; display: none; }
 230   .CodeMirror-vscrollbar { right: 0px; top: 0px; overflow: hidden; }
 231   .CodeMirror-hscrollbar { bottom: 0px; left: 0px; overflow: hidden; }
 232   .CodeMirror-scrollbar-filler { right: 0px; bottom: 0px; }
 233   .CodeMirror-gutter-filler { left: 0px; bottom: 0px; }
 234   .CodeMirror-gutters { position: absolute; left: 0px; top: 0px; padding-bottom: 30px; z-index: 3; }
 235   .CodeMirror-gutter { white-space: normal; height: 100%; box-sizing: content-box; padding-bottom: 30px; margin-bottom: -32px; display: inline-block; }
 236   .CodeMirror-gutter-wrapper { position: absolute; z-index: 4; background: 0px 0px !important; border: none !important; }
 237   .CodeMirror-gutter-background { position: absolute; top: 0px; bottom: 0px; z-index: 4; }
 238   .CodeMirror-gutter-elt { position: absolute; cursor: default; z-index: 4; }
 239   .CodeMirror-lines { cursor: text; }
 240   .CodeMirror pre { border-radius: 0px; border-width: 0px; background: 0px 0px; font-family: inherit; font-size: inherit; margin: 0px; white-space: pre; overflow-wrap: normal; color: inherit; z-index: 2; position: relative; overflow: visible; }
 241   .CodeMirror-wrap pre { overflow-wrap: break-word; white-space: pre-wrap; word-break: normal; }
 242   .CodeMirror-code pre { border-right: 30px solid transparent; width: fit-content; }
 243   .CodeMirror-wrap .CodeMirror-code pre { border-right: none; width: auto; }
 244   .CodeMirror-linebackground { position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; z-index: 0; }
 245   .CodeMirror-linewidget { position: relative; z-index: 2; overflow: auto; }
 246   .CodeMirror-wrap .CodeMirror-scroll { overflow-x: hidden; }
 247   .CodeMirror-measure { position: absolute; width: 100%; height: 0px; overflow: hidden; visibility: hidden; }
 248   .CodeMirror-measure pre { position: static; }
 249   .CodeMirror div.CodeMirror-cursor { position: absolute; visibility: hidden; border-right: none; width: 0px; }
 250   .CodeMirror div.CodeMirror-cursor { visibility: hidden; }
 251   .CodeMirror-focused div.CodeMirror-cursor { visibility: inherit; }
 252   .cm-searching { background: rgba(255, 255, 0, 0.4); }
 253   @media print {
 254     .CodeMirror div.CodeMirror-cursor { visibility: hidden; }
 255   }
 256
 257
 258   /* Flowchart variables */
 259   /* Sequence Diagram variables */
 260   /* Gantt chart variables */
 261   /* state colors */
 262   .label {
 263
 264     color: #333; }
 265
 266   .label text {
 267     fill: #333; }
 268
 269   .node rect,
 270   .node circle,
 271   .node ellipse,
 272   .node polygon {
 273     fill: #BDD5EA;
 274     stroke: #9370DB;
 275     stroke-width: 1px; }
 276
 277   .node .label {
 278     text-align: center; }
 279
 280   .node.clickable {
 281     cursor: pointer; }
 282
 283   .arrowheadPath {
 284     fill: lightgrey; }
 285
 286   .edgePath .path {
 287     stroke: lightgrey;
 288     stroke-width: 1.5px; }
 289
 290   .edgeLabel {
 291     background-color: #e8e8e8;
 292     text-align: center; }
 293
 294   .cluster rect {
 295     fill: #6D6D65;
 296     stroke: rgba(255, 255, 255, 0.25);
 297     stroke-width: 1px; }
 298
 299   .cluster text {
 300     fill: #F9FFFE; }
 301
 302   div.mermaidTooltip {
 303     position: absolute;
 304     text-align: center;
 305     max-width: 200px;
 306     padding: 2px;
 307
 308     font-size: 12px;
 309     background: #6D6D65;
 310     border: 1px solid rgba(255, 255, 255, 0.25);
 311     border-radius: 2px;
 312     pointer-events: none;
 313     z-index: 100; }
 314
 315   .actor {
 316     stroke: #81B1DB;
 317     fill: #BDD5EA; }
 318
 319   text.actor {
 320     fill: black;
 321     stroke: none; }
 322
 323   .actor-line {
 324     stroke: lightgrey; }
 325
 326   .messageLine0 {
 327     stroke-width: 1.5;
 328     stroke-dasharray: '2 2';
 329     stroke: lightgrey; }
 330
 331   .messageLine1 {
 332     stroke-width: 1.5;
 333     stroke-dasharray: '2 2';
 334     stroke: lightgrey; }
 335
 336   #arrowhead {
 337     fill: lightgrey; }
 338
 339   .sequenceNumber {
 340     fill: white; }
 341
 342   #sequencenumber {
 343     fill: lightgrey; }
 344
 345   #crosshead path {
 346     fill: lightgrey !important;
 347     stroke: lightgrey !important; }
 348
 349   .messageText {
 350     fill: lightgrey;
 351     stroke: none; }
 352
 353   .labelBox {
 354     stroke: #81B1DB;
 355     fill: #BDD5EA; }
 356
 357   .labelText {
 358     fill: #323D47;
 359     stroke: none; }
 360
 361   .loopText {
 362     fill: lightgrey;
 363     stroke: none; }
 364
 365   .loopLine {
 366     stroke-width: 2;
 367     stroke-dasharray: '2 2';
 368     stroke: #81B1DB; }
 369
 370   .note {
 371     stroke: rgba(255, 255, 255, 0.25);
 372     fill: #fff5ad; }
 373
 374   .noteText {
 375     fill: black;
 376     stroke: none;
 377
 378     font-size: 14px; }
 379
 380   .activation0 {
 381     fill: #f4f4f4;
 382     stroke: #666; }
 383
 384   .activation1 {
 385     fill: #f4f4f4;
 386     stroke: #666; }
 387
 388   .activation2 {
 389     fill: #f4f4f4;
 390     stroke: #666; }
 391
 392   /** Section styling */
 393   .section {
 394     stroke: none;
 395     opacity: 0.2; }
 396
 397   .section0 {
 398     fill: rgba(255, 255, 255, 0.3); }
 399
 400   .section2 {
 401     fill: #EAE8B9; }
 402
 403   .section1,
 404   .section3 {
 405     fill: white;
 406     opacity: 0.2; }
 407
 408   .sectionTitle0 {
 409     fill: #F9FFFE; }
 410
 411   .sectionTitle1 {
 412     fill: #F9FFFE; }
 413
 414   .sectionTitle2 {
 415     fill: #F9FFFE; }
 416
 417   .sectionTitle3 {
 418     fill: #F9FFFE; }
 419
 420   .sectionTitle {
 421     text-anchor: start;
 422     font-size: 11px;
 423     text-height: 14px;
 424      }
 425
 426   /* Grid and axis */
 427   .grid .tick {
 428     stroke: lightgrey;
 429     opacity: 0.3;
 430     shape-rendering: crispEdges; }
 431
 432   .grid path {
 433     stroke-width: 0; }
 434
 435   /* Today line */
 436   .today {
 437     fill: none;
 438     stroke: #DB5757;
 439     stroke-width: 2px; }
 440
 441   /* Task styling */
 442   /* Default task */
 443   .task {
 444     stroke-width: 2; }
 445
 446   .taskText {
 447     text-anchor: middle;
 448      }
 449
 450   .taskText:not([font-size]) {
 451     font-size: 11px; }
 452
 453   .taskTextOutsideRight {
 454     fill: #323D47;
 455     text-anchor: start;
 456     font-size: 11px;
 457      }
 458
 459   .taskTextOutsideLeft {
 460     fill: #323D47;
 461     text-anchor: end;
 462     font-size: 11px; }
 463
 464   /* Special case clickable */
 465   .task.clickable {
 466     cursor: pointer; }
 467
 468   .taskText.clickable {
 469     cursor: pointer;
 470     fill: #003163 !important;
 471     font-weight: bold; }
 472
 473   .taskTextOutsideLeft.clickable {
 474     cursor: pointer;
 475     fill: #003163 !important;
 476     font-weight: bold; }
 477
 478   .taskTextOutsideRight.clickable {
 479     cursor: pointer;
 480     fill: #003163 !important;
 481     font-weight: bold; }
 482
 483   /* Specific task settings for the sections*/
 484   .taskText0,
 485   .taskText1,
 486   .taskText2,
 487   .taskText3 {
 488     fill: #323D47; }
 489
 490   .task0,
 491   .task1,
 492   .task2,
 493   .task3 {
 494     fill: #BDD5EA;
 495     stroke: rgba(255, 255, 255, 0.5); }
 496
 497   .taskTextOutside0,
 498   .taskTextOutside2 {
 499     fill: lightgrey; }
 500
 501   .taskTextOutside1,
 502   .taskTextOutside3 {
 503     fill: lightgrey; }
 504
 505   /* Active task */
 506   .active0,
 507   .active1,
 508   .active2,
 509   .active3 {
 510     fill: #81B1DB;
 511     stroke: rgba(255, 255, 255, 0.5); }
 512
 513   .activeText0,
 514   .activeText1,
 515   .activeText2,
 516   .activeText3 {
 517     fill: #323D47 !important; }
 518
 519   /* Completed task */
 520   .done0,
 521   .done1,
 522   .done2,
 523   .done3 {
 524     stroke: grey;
 525     fill: lightgrey;
 526     stroke-width: 2; }
 527
 528   .doneText0,
 529   .doneText1,
 530   .doneText2,
 531   .doneText3 {
 532     fill: #323D47 !important; }
 533
 534   /* Tasks on the critical line */
 535   .crit0,
 536   .crit1,
 537   .crit2,
 538   .crit3 {
 539     stroke: #E83737;
 540     fill: #E83737;
 541     stroke-width: 2; }
 542
 543   .activeCrit0,
 544   .activeCrit1,
 545   .activeCrit2,
 546   .activeCrit3 {
 547     stroke: #E83737;
 548     fill: #81B1DB;
 549     stroke-width: 2; }
 550
 551   .doneCrit0,
 552   .doneCrit1,
 553   .doneCrit2,
 554   .doneCrit3 {
 555     stroke: #E83737;
 556     fill: lightgrey;
 557     stroke-width: 2;
 558     cursor: pointer;
 559     shape-rendering: crispEdges; }
 560
 561   .milestone {
 562     transform: rotate(45deg) scale(0.8, 0.8); }
 563
 564   .milestoneText {
 565     font-style: italic; }
 566
 567   .doneCritText0,
 568   .doneCritText1,
 569   .doneCritText2,
 570   .doneCritText3 {
 571     fill: #323D47 !important; }
 572
 573   .activeCritText0,
 574   .activeCritText1,
 575   .activeCritText2,
 576   .activeCritText3 {
 577     fill: #323D47 !important; }
 578
 579   .titleText {
 580     text-anchor: middle;
 581     font-size: 18px;
 582     fill: #323D47;
 583      }
 584
 585   g.classGroup text {
 586     fill: #9370DB;
 587     stroke: none;
 588
 589     font-size: 10px; }
 590     g.classGroup text .title {
 591       font-weight: bolder; }
 592
 593   g.classGroup rect {
 594     fill: #BDD5EA;
 595     stroke: #9370DB; }
 596
 597   g.classGroup line {
 598     stroke: #9370DB;
 599     stroke-width: 1; }
 600
 601   .classLabel .box {
 602     stroke: none;
 603     stroke-width: 0;
 604     fill: #BDD5EA;
 605     opacity: 0.5; }
 606
 607   .classLabel .label {
 608     fill: #9370DB;
 609     font-size: 10px; }
 610
 611   .relation {
 612     stroke: #9370DB;
 613     stroke-width: 1;
 614     fill: none; }
 615
 616   #compositionStart {
 617     fill: #9370DB;
 618     stroke: #9370DB;
 619     stroke-width: 1; }
 620
 621   #compositionEnd {
 622     fill: #9370DB;
 623     stroke: #9370DB;
 624     stroke-width: 1; }
 625
 626   #aggregationStart {
 627     fill: #BDD5EA;
 628     stroke: #9370DB;
 629     stroke-width: 1; }
 630
 631   #aggregationEnd {
 632     fill: #BDD5EA;
 633     stroke: #9370DB;
 634     stroke-width: 1; }
 635
 636   #dependencyStart {
 637     fill: #9370DB;
 638     stroke: #9370DB;
 639     stroke-width: 1; }
 640
 641   #dependencyEnd {
 642     fill: #9370DB;
 643     stroke: #9370DB;
 644     stroke-width: 1; }
 645
 646   #extensionStart {
 647     fill: #9370DB;
 648     stroke: #9370DB;
 649     stroke-width: 1; }
 650
 651   #extensionEnd {
 652     fill: #9370DB;
 653     stroke: #9370DB;
 654     stroke-width: 1; }
 655
 656   .commit-id,
 657   .commit-msg,
 658   .branch-label {
 659     fill: lightgrey;
 660     color: lightgrey;
 661      }
 662
 663   .pieTitleText {
 664     text-anchor: middle;
 665     font-size: 25px;
 666     fill: #323D47;
 667      }
 668
 669   .slice {
 670      }
 671
 672   g.stateGroup text {
 673     fill: #eee;
 674     stroke: none;
 675     font-size: 10px;
 676      }
 677
 678   g.stateGroup circle {
 679     fill: white !important;
 680     stroke: white !important;
 681   }
 682
 683   g.stateGroup .state-title {
 684     font-weight: bolder;
 685     fill: black; }
 686
 687   g.stateGroup rect {
 688     fill: #ececff;
 689     stroke: #9370DB; }
 690
 691   g.stateGroup line {
 692     stroke: #9370DB;
 693     stroke-width: 1; }
 694
 695   .transition {
 696     stroke: #9370DB;
 697     stroke-width: 1;
 698     fill: none; }
 699
 700   .stateGroup .composit {
 701     fill: #555;
 702     border-bottom: 1px; }
 703
 704   .state-note {
 705     stroke: rgba(255, 255, 255, 0.25);
 706     fill: #fff5ad; }
 707     .state-note text {
 708       fill: black;
 709       stroke: none;
 710       font-size: 10px; }
 711
 712   .stateLabel .box {
 713     stroke: none;
 714     stroke-width: 0;
 715     fill: #BDD5EA;
 716     opacity: 0.5; }
 717
 718   .stateLabel text {
 719     fill: black;
 720     font-size: 10px;
 721     font-weight: bold;
 722      }
 723
 724   ;
 725   /* CSS Document */
 726
 727   /** code highlight */
 728
 729   .cm-s-inner .cm-variable,
 730   .cm-s-inner .cm-operator,
 731   .cm-s-inner .cm-property {
 732       color: #b8bfc6;
 733   }
 734
 735   .cm-s-inner .cm-keyword {
 736       color: #C88FD0;
 737   }
 738
 739   .cm-s-inner .cm-tag {
 740       color: #7DF46A;
 741   }
 742
 743   .cm-s-inner .cm-attribute {
 744       color: #7575E4;
 745   }
 746
 747   .CodeMirror div.CodeMirror-cursor {
 748       border-left: 1px solid #b8bfc6;
 749       z-index: 3;
 750   }
 751
 752   .cm-s-inner .cm-string {
 753       color: #D26B6B;
 754   }
 755
 756   .cm-s-inner .cm-comment,
 757   .cm-s-inner.cm-comment {
 758       color: #DA924A;
 759   }
 760
 761   .cm-s-inner .cm-header,
 762   .cm-s-inner .cm-def,
 763   .cm-s-inner.cm-header,
 764   .cm-s-inner.cm-def {
 765       color: #8d8df0;
 766   }
 767
 768   .cm-s-inner .cm-quote,
 769   .cm-s-inner.cm-quote {
 770       color: #57ac57;
 771   }
 772
 773   .cm-s-inner .cm-hr {
 774       color: #d8d5d5;
 775   }
 776
 777   .cm-s-inner .cm-link {
 778       color: #d3d3ef;
 779   }
 780
 781   .cm-s-inner .cm-negative {
 782       color: #d95050;
 783   }
 784
 785   .cm-s-inner .cm-positive {
 786       color: #50e650;
 787   }
 788
 789   .cm-s-inner .cm-string-2 {
 790       color: #f50;
 791   }
 792
 793   .cm-s-inner .cm-meta,
 794   .cm-s-inner .cm-qualifier {
 795       color: #b7b3b3;
 796   }
 797
 798   .cm-s-inner .cm-builtin {
 799       color: #f3b3f8;
 800   }
 801
 802   .cm-s-inner .cm-bracket {
 803       color: #997;
 804   }
 805
 806   .cm-s-inner .cm-atom,
 807   .cm-s-inner.cm-atom {
 808       color: #84B6CB;
 809   }
 810
 811   .cm-s-inner .cm-number {
 812       color: #64AB8F;
 813   }
 814
 815   .cm-s-inner .cm-variable {
 816       color: #b8bfc6;
 817   }
 818
 819   .cm-s-inner .cm-variable-2 {
 820       color: #9FBAD5;
 821   }
 822
 823   .cm-s-inner .cm-variable-3 {
 824       color: #1cc685;
 825   }
 826
 827   .CodeMirror-selectedtext,
 828   .CodeMirror-selected {
 829       background: #4a89dc;
 830       color: #fff !important;
 831       text-shadow: none;
 832   }
 833
 834   .CodeMirror-gutters {
 835       border-right: none;
 836   }
 837   ;
 838   /* CSS Document */
 839
 840   /** markdown source **/
 841   .cm-s-typora-default .cm-header,
 842   .cm-s-typora-default .cm-property
 843   {
 844       color: #cebcca;
 845   }
 846
 847   .CodeMirror.cm-s-typora-default div.CodeMirror-cursor{
 848       border-left: 3px solid #b8bfc6;
 849   }
 850
 851   .cm-s-typora-default .cm-comment {
 852       color: #9FB1FF;
 853   }
 854
 855   .cm-s-typora-default .cm-string {
 856       color: #A7A7D9
 857   }
 858
 859   .cm-s-typora-default .cm-atom, .cm-s-typora-default .cm-number {
 860       color: #848695;
 861       font-style: italic;
 862   }
 863
 864   .cm-s-typora-default .cm-link {
 865       color: #95B94B;
 866   }
 867
 868   .cm-s-typora-default .CodeMirror-activeline-background {
 869       background: rgba(51, 51, 51, 0.72);
 870   }
 871
 872   .cm-s-typora-default .cm-comment, .cm-s-typora-default .cm-code {
 873         color: #8aa1e1;
 874   }@import "";
 875   @import "";
 876   @import "";
 877
 878   :root {
 879       --bg-color:  #363B40;
 880       --side-bar-bg-color: #2E3033;
 881       --text-color: #b8bfc6;
 882
 883       --select-text-bg-color:#4a89dc;
 884
 885       --item-hover-bg-color: #0a0d16;
 886       --control-text-color: #b7b7b7;
 887       --control-text-hover-color: #eee;
 888       --window-border: 1px solid #555;
 889
 890       --active-file-bg-color: rgb(34, 34, 34);
 891       --active-file-border-color: #8d8df0;
 892
 893       --primary-color: #a3d5fe;
 894
 895       --active-file-text-color: white;
 896       --item-hover-bg-color: #70717d;
 897       --item-hover-text-color: white;
 898       --primary-color: #6dc1e7;
 899
 900       --rawblock-edit-panel-bd: #333;
 901
 902       --search-select-bg-color: #428bca;
 903   }
 904
 905   html {
 906       font-size: 16px;
 907   }
 908
 909   html,
 910   body {
 911       -webkit-text-size-adjust: 100%;
 912       -ms-text-size-adjust: 100%;
 913       background: #363B40;
 914       background: var(--bg-color);
 915       fill: currentColor;
 916       line-height: 1.625rem;
 917   }
 918
 919   #write {
 920       max-width: 914px;
 921   }
 922
 923   html,
 924   body,
 925   button,
 926   input,
 927   select,
 928   textarea,
 929   div.code-tooltip-content {
 930       color: #b8bfc6;
 931       border-color: transparent;
 932   }
 933
 934   div.code-tooltip,
 935   .md-hover-tip .md-arrow:after {
 936       background: #333;
 937   }
 938
 939   .popover.bottom > .arrow:after {
 940       border-bottom-color: #333;
 941   }
 942
 943   html,
 944   body,
 945   button,
 946   input,
 947   select,
 948   textarea {
 949       font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 950   }
 951
 952   hr {
 953       height: 2px;
 954       border: 0;
 955       margin: 24px 0 !important;
 956   }
 957
 958   h1,
 959   h2,
 960   h3,
 961   h4,
 962   h5,
 963   h6 {
 964       font-family: "Lucida Grande", "Corbel", sans-serif;
 965       font-weight: normal;
 966       clear: both;
 967       -ms-word-wrap: break-word;
 968       word-wrap: break-word;
 969       margin: 0;
 970       padding: 0;
 971       color: #DEDEDE
 972   }
 973
 974   h1 {
 975       font-size: 2.5rem;
 976       /* 36px */
 977       line-height: 2.75rem;
 978       /* 40px */
 979       margin-bottom: 1.5rem;
 980       /* 24px */
 981       letter-spacing: -1.5px;
 982   }
 983
 984   h2 {
 985       font-size: 1.63rem;
 986       /* 24px */
 987       line-height: 1.875rem;
 988       /* 30px */
 989       margin-bottom: 1.5rem;
 990       /* 24px */
 991       letter-spacing: -1px;
 992       font-weight: bold;
 993   }
 994
 995   h3 {
 996       font-size: 1.17rem;
 997       /* 18px */
 998       line-height: 1.5rem;
 999       /* 24px */
1000       margin-bottom: 1.5rem;
1001       /* 24px */
1002       letter-spacing: -1px;
1003       font-weight: bold;
1004   }
1005
1006   h4 {
1007       font-size: 1.12rem;
1008       /* 16px */
1009       line-height: 1.375rem;
1010       /* 22px */
1011       margin-bottom: 1.5rem;
1012       /* 24px */
1013       color: white;
1014   }
1015
1016   h5 {
1017       font-size: 0.97rem;
1018       /* 16px */
1019       line-height: 1.25rem;
1020       /* 22px */
1021       margin-bottom: 1.5rem;
1022       /* 24px */
1023       font-weight: bold;
1024   }
1025
1026   h6 {
1027       font-size: 0.93rem;
1028       /* 16px */
1029       line-height: 1rem;
1030       /* 16px */
1031       margin-bottom: 0.75rem;
1032       color: white;
1033   }
1034
1035   @media (min-width: 980px) {
1036       h3.md-focus:before,
1037       h4.md-focus:before,
1038       h5.md-focus:before,
1039       h6.md-focus:before {
1040           color: #ddd;
1041           border: 1px solid #ddd;
1042           border-radius: 3px;
1043           position: absolute;
1044           left: -1.642857143rem;
1045           top: .357142857rem;
1046           float: left;
1047           font-size: 9px;
1048           padding-left: 2px;
1049           padding-right: 2px;
1050           vertical-align: bottom;
1051           font-weight: normal;
1052           line-height: normal;
1053       }
1054
1055       h3.md-focus:before {
1056           content: 'h3';
1057       }
1058
1059       h4.md-focus:before {
1060           content: 'h4';
1061       }
1062
1063       h5.md-focus:before {
1064           content: 'h5';
1065           top: 0px;
1066       }
1067
1068       h6.md-focus:before {
1069           content: 'h6';
1070           top: 0px;
1071       }
1072   }
1073
1074   a {
1075       text-decoration: none;
1076       outline: 0;
1077   }
1078
1079   a:hover {
1080       outline: 0;
1081   }
1082
1083   a:focus {
1084       outline: thin dotted;
1085   }
1086
1087   sup.md-footnote {
1088       background-color: #555;
1089       color: #ddd;
1090   }
1091
1092   p {
1093       -ms-word-wrap: break-word;
1094       word-wrap: break-word;
1095   }
1096
1097   p,
1098   ul,
1099   dd,
1100   ol,
1101   hr,
1102   address,
1103   pre,
1104   table,
1105   iframe,
1106   .wp-caption,
1107   .wp-audio-shortcode,
1108   .wp-video-shortcode {
1109       margin-top: 0;
1110       margin-bottom: 1.5rem;
1111       /* 24px */
1112   }
1113
1114   li > blockquote {
1115         margin-bottom: 0;
1116   }
1117
1118   audio:not([controls]) {
1119       display: none;
1120   }
1121
1122   [hidden] {
1123       display: none;
1124   }
1125
1126   ::-moz-selection {
1127       background: #4a89dc;
1128       color: #fff;
1129       text-shadow: none;
1130   }
1131
1132   *.in-text-selection,
1133   ::selection {
1134       background: #4a89dc;
1135       color: #fff;
1136       text-shadow: none;
1137   }
1138
1139   ul,
1140   ol {
1141       padding: 0 0 0 1.875rem;
1142       /* 30px */
1143   }
1144
1145   ul {
1146       list-style: square;
1147   }
1148
1149   ol {
1150       list-style: decimal;
1151   }
1152
1153   ul ul,
1154   ol ol,
1155   ul ol,
1156   ol ul {
1157       margin: 0;
1158   }
1159
1160   b,
1161   th,
1162   dt,
1163   strong {
1164       font-weight: bold;
1165   }
1166
1167   i,
1168   em,
1169   dfn,
1170   cite {
1171       font-style: italic;
1172   }
1173
1174   blockquote {
1175       padding-left: 1.875rem;
1176       margin: 0 0 1.875rem 1.875rem;
1177       border-left: solid 2px #474d54;
1178       padding-left: 30px;
1179       margin-top: 35px;
1180   }
1181
1182   pre,
1183   code,
1184   kbd,
1185   tt,
1186   var {
1187       background: rgba(0, 0, 0, 0.05);
1188       font-size: 0.875rem;
1189       font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
1190   }
1191
1192   kbd {
1193       padding: 2px 4px;
1194       font-size: 90%;
1195       color: #fff;
1196       background-color: #333;
1197       border-radius: 3px;
1198       box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);
1199   }
1200
1201   pre.md-fences {
1202       padding: 10px 10px 10px 30px;
1203       margin-bottom: 20px;
1204       background: #333;
1205   }
1206
1207   .CodeMirror-gutters {
1208       background: #333;
1209       border-right: 1px solid transparent;
1210   }
1211
1212   .enable-diagrams pre.md-fences[lang="sequence"] .code-tooltip,
1213   .enable-diagrams pre.md-fences[lang="flow"] .code-tooltip,
1214   .enable-diagrams pre.md-fences[lang="mermaid"] .code-tooltip {
1215       bottom: -2.2em;
1216       right: 4px;
1217   }
1218
1219   code,
1220   kbd,
1221   tt,
1222   var {
1223       padding: 2px 5px;
1224   }
1225
1226   table {
1227       max-width: 100%;
1228       width: 100%;
1229       border-collapse: collapse;
1230       border-spacing: 0;
1231   }
1232
1233   th,
1234   td {
1235       padding: 5px 10px;
1236       vertical-align: top;
1237   }
1238
1239   a {
1240       -webkit-transition: all .2s ease-in-out;
1241       transition: all .2s ease-in-out;
1242   }
1243
1244   hr {
1245       background: #474d54;
1246       /* variable */
1247   }
1248
1249   h1 {
1250       margin-top: 2em;
1251   }
1252
1253   a {
1254       color: #e0e0e0;
1255       text-decoration: underline;
1256   }
1257
1258   a:hover {
1259       color: #fff;
1260   }
1261
1262   .md-inline-math script {
1263       color: #81b1db;
1264   }
1265
1266   b,
1267   th,
1268   dt,
1269   strong {
1270       color: #DEDEDE;
1271       /* variable */
1272   }
1273
1274   mark {
1275       background: #D3D40E;
1276   }
1277
1278   blockquote {
1279       color: #9DA2A6;
1280   }
1281
1282   table a {
1283       color: #DEDEDE;
1284       /* variable */
1285   }
1286
1287   th,
1288   td {
1289       border: solid 1px #474d54;
1290       /* variable */
1291   }
1292
1293   .task-list {
1294       padding-left: 0;
1295   }
1296
1297   .md-task-list-item {
1298       padding-left: 1.25rem;
1299   }
1300
1301   .md-task-list-item > input {
1302       top: auto;
1303   }
1304
1305   .md-task-list-item > input:before {
1306       content: "";
1307       display: inline-block;
1308       width: 0.875rem;
1309       height: 0.875rem;
1310       vertical-align: middle;
1311       text-align: center;
1312       border: 1px solid #b8bfc6;
1313       background-color: #363B40;
1314       margin-top: -0.4rem;
1315   }
1316
1317   .md-task-list-item > input:checked:before,
1318   .md-task-list-item > input[checked]:before {
1319       content: '\221A';
1320       /*◘*/
1321       font-size: 0.625rem;
1322       line-height: 0.625rem;
1323       color: #DEDEDE;
1324   }
1325
1326   /** quick open **/
1327   .auto-suggest-container {
1328       border: 0px;
1329       background-color: #525C65;
1330   }
1331
1332   #typora-quick-open {
1333       background-color: #525C65;
1334   }
1335
1336   #typora-quick-open input{
1337       background-color: #525C65;
1338       border: 0;
1339       border-bottom: 1px solid grey;
1340   }
1341
1342   .typora-quick-open-item {
1343       background-color: inherit;
1344       color: inherit;
1345   }
1346
1347   .typora-quick-open-item.active,
1348   .typora-quick-open-item:hover {
1349       background-color: #4D8BDB;
1350       color: white;
1351   }
1352
1353   .typora-quick-open-item:hover {
1354       background-color: rgba(77, 139, 219, 0.8);
1355   }
1356
1357   .typora-search-spinner > div {
1358     background-color: #fff;
1359   }
1360
1361   #write pre.md-meta-block {
1362       border-bottom: 1px dashed #ccc;
1363       background: transparent;
1364       padding-bottom: 0.6em;
1365       line-height: 1.6em;
1366   }
1367
1368   .btn,
1369   .btn .btn-default {
1370       background: transparent;
1371       color: #b8bfc6;
1372   }
1373
1374   .ty-table-edit {
1375       border-top: 1px solid gray;
1376       background-color: #363B40;
1377   }
1378
1379   .popover-title {
1380       background: transparent;
1381   }
1382
1383   .md-image>.md-meta {
1384       color: #BBBBBB;
1385       background: transparent;
1386   }
1387
1388   .md-expand.md-image>.md-meta {
1389       color: #DDD;
1390   }
1391
1392   #write>h3:before,
1393   #write>h4:before,
1394   #write>h5:before,
1395   #write>h6:before {
1396       border: none;
1397       border-radius: 0px;
1398       color: #888;
1399       text-decoration: underline;
1400       left: -1.4rem;
1401       top: 0.2rem;
1402   }
1403
1404   #write>h3.md-focus:before {
1405       top: 2px;
1406   }
1407
1408   #write>h4.md-focus:before {
1409       top: 2px;
1410   }
1411
1412   .md-toc-item {
1413       color: #A8C2DC;
1414   }
1415
1416   #write div.md-toc-tooltip {
1417       background-color: #363B40;
1418   }
1419
1420   .dropdown-menu .btn:hover,
1421   .dropdown-menu .btn:focus,
1422   .md-toc .btn:hover,
1423   .md-toc .btn:focus {
1424       color: white;
1425       background: black;
1426   }
1427
1428   #toc-dropmenu {
1429       background: rgba(50, 54, 59, 0.93);
1430       border: 1px solid rgba(253, 253, 253, 0.15);
1431   }
1432
1433   #toc-dropmenu .divider {
1434       background-color: #9b9b9b;
1435   }
1436
1437   .outline-expander:before {
1438       top: 2px;
1439   }
1440
1441   #typora-sidebar {
1442       box-shadow: none;
1443       border-right: 1px dashed;
1444       border-right: none;
1445   }
1446
1447   .sidebar-tabs {
1448       border-bottom:0;
1449   }
1450
1451   #typora-sidebar:hover .outline-title-wrapper {
1452       border-left: 1px dashed;
1453   }
1454
1455   .outline-title-wrapper .btn {
1456       color: inherit;
1457   }
1458
1459   .outline-item:hover {
1460       border-color: #363B40;
1461       background-color: #363B40;
1462       color: white;
1463   }
1464
1465   h1.md-focus .md-attr,
1466   h2.md-focus .md-attr,
1467   h3.md-focus .md-attr,
1468   h4.md-focus .md-attr,
1469   h5.md-focus .md-attr,
1470   h6.md-focus .md-attr,
1471   .md-header-span .md-attr {
1472       color: #8C8E92;
1473       display: inline;
1474   }
1475
1476   .md-comment {
1477       color: #5a95e3;
1478       opacity: 1;
1479   }
1480
1481   .md-inline-math svg {
1482       color: #b8bfc6;
1483   }
1484
1485   #math-inline-preview .md-arrow:after {
1486       background: black;
1487   }
1488
1489   .modal-content {
1490       background: var(--bg-color);
1491       border: 0;
1492   }
1493
1494   .modal-title {
1495       font-size: 1.5em;
1496   }
1497
1498   .modal-content input {
1499       background-color: rgba(26, 21, 21, 0.51);
1500       color: white;
1501   }
1502
1503   .modal-content .input-group-addon {
1504       color: white;
1505   }
1506
1507   .modal-backdrop {
1508       background-color: rgba(174, 174, 174, 0.7);
1509   }
1510
1511   .modal-content .btn-primary {
1512       border-color: var(--primary-color);
1513   }
1514
1515   .md-table-resize-popover {
1516       background-color: #333;
1517   }
1518
1519   .form-inline .input-group .input-group-addon {
1520       color: white;
1521   }
1522
1523   #md-searchpanel {
1524       border-bottom: 1px dashed grey;
1525   }
1526
1527   /** UI for electron */
1528
1529   .context-menu,
1530   #spell-check-panel,
1531   #footer-word-count-info {
1532       background-color: #42464A;
1533   }
1534
1535   .context-menu.dropdown-menu .divider,
1536   .dropdown-menu .divider {
1537       background-color: #777777;
1538   }
1539
1540   footer {
1541       color: inherit;
1542   }
1543
1544   @media (max-width: 1000px) {
1545       footer {
1546           border-top: none;
1547       }
1548       footer:hover {
1549           color: inherit;
1550       }
1551   }
1552
1553   #file-info-file-path .file-info-field-value:hover {
1554       background-color: #555;
1555       color: #dedede;
1556   }
1557
1558   .megamenu-content,
1559   .megamenu-opened header {
1560       background: var(--bg-color);
1561   }
1562
1563   .megamenu-menu-panel h2,
1564   .megamenu-menu-panel h1,
1565   .long-btn {
1566       color: inherit;
1567   }
1568
1569   .megamenu-menu-panel input[type='text'] {
1570       background: inherit;
1571       border: 0;
1572       border-bottom: 1px solid;
1573   }
1574
1575   #recent-file-panel-action-btn {
1576       background: inherit;
1577       border: 1px grey solid;
1578   }
1579
1580   .megamenu-menu-panel .dropdown-menu > li > a {
1581       color: inherit;
1582       background-color: #2F353A;
1583       text-decoration: none;
1584   }
1585
1586   .megamenu-menu-panel table td:nth-child(1) {
1587       color: inherit;
1588       font-weight: bold;
1589   }
1590
1591   .megamenu-menu-panel tbody tr:hover td:nth-child(1) {
1592       color: white;
1593   }
1594
1595   .modal-footer .btn-default,
1596   .modal-footer .btn-primary,
1597   .modal-footer .btn-default:not(:hover) {
1598       border: 1px solid;
1599       border-color: transparent;
1600   }
1601
1602   .btn-default:hover, .btn-default:focus, .btn-default.focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default {
1603       color: white;
1604       border: 1px solid #ddd;
1605       background-color: inherit;
1606   }
1607
1608   .modal-header {
1609       border-bottom: 0;
1610   }
1611
1612   .modal-footer {
1613       border-top: 0;
1614   }
1615
1616   #recent-file-panel tbody tr:nth-child(2n-1) {
1617       background-color: transparent !important;
1618   }
1619
1620   .megamenu-menu-panel tbody tr:hover td:nth-child(2) {
1621       color: inherit;
1622   }
1623
1624   .megamenu-menu-panel .btn {
1625       border: 1px solid #eee;
1626       background: transparent;
1627   }
1628
1629   .mouse-hover .toolbar-icon.btn:hover,
1630   #w-full.mouse-hover,
1631   #w-pin.mouse-hover {
1632       background-color: inherit;
1633   }
1634
1635   .typora-node::-webkit-scrollbar {
1636       width: 5px;
1637   }
1638
1639   .typora-node::-webkit-scrollbar-thumb:vertical {
1640       background: rgba(250, 250, 250, 0.3);
1641   }
1642
1643   .typora-node::-webkit-scrollbar-thumb:vertical:active {
1644       background: rgba(250, 250, 250, 0.5);
1645   }
1646
1647   #w-unpin {
1648       background-color: #4182c4;
1649   }
1650
1651   #top-titlebar, #top-titlebar * {
1652       color: var(--item-hover-text-color);
1653   }
1654
1655   .typora-sourceview-on #toggle-sourceview-btn,
1656   #footer-word-count:hover,
1657   .ty-show-word-count #footer-word-count {
1658       background: #333333;
1659   }
1660
1661   #toggle-sourceview-btn:hover {
1662       color: #eee;
1663       background: #333333;
1664   }
1665
1666   /** focus mode */
1667   .on-focus-mode .md-end-block:not(.md-focus):not(.md-focus-container) * {
1668       color: #686868 !important;
1669   }
1670
1671   .on-focus-mode .md-end-block:not(.md-focus) img,
1672   .on-focus-mode .md-task-list-item:not(.md-focus-container)>input {
1673       opacity: #686868 !important;
1674   }
1675
1676   .on-focus-mode li[cid]:not(.md-focus-container){
1677       color: #686868;
1678   }
1679
1680   .on-focus-mode .md-fences.md-focus .CodeMirror-code>*:not(.CodeMirror-activeline) *,
1681   .on-focus-mode .CodeMirror.cm-s-inner:not(.CodeMirror-focused) * {
1682       color: #686868 !important;
1683   }
1684
1685   .on-focus-mode .md-focus,
1686   .on-focus-mode .md-focus-container {
1687       color: #fff;
1688   }
1689
1690   .on-focus-mode #typora-source .CodeMirror-code>*:not(.CodeMirror-activeline) * {
1691       color: #686868 !important;
1692   }
1693
1694
1695   /*diagrams*/
1696   #write .md-focus .md-diagram-panel {
1697       border: 1px solid #ddd;
1698       margin-left: -1px;
1699       width: calc(100% + 2px);
1700   }
1701
1702   /*diagrams*/
1703   #write .md-focus.md-fences-with-lineno .md-diagram-panel {
1704       margin-left: auto;
1705   }
1706
1707   .md-diagram-panel-error {
1708       color: #f1908e;
1709   }
1710
1711   .active-tab-files #info-panel-tab-file,
1712   .active-tab-files #info-panel-tab-file:hover,
1713   .active-tab-outline #info-panel-tab-outline,
1714   .active-tab-outline #info-panel-tab-outline:hover {
1715       color: #eee;
1716   }
1717
1718   .sidebar-footer-item:hover,
1719   .footer-item:hover {
1720       background: inherit;
1721       color: white;
1722   }
1723
1724   .ty-side-sort-btn.active,
1725   .ty-side-sort-btn:hover,
1726   .selected-folder-menu-item a:after {
1727       color: white;
1728   }
1729
1730   #sidebar-files-menu {
1731       border:solid 1px;
1732       box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.79);
1733       background-color: var(--bg-color);
1734   }
1735
1736   .file-list-item {
1737       border-bottom:none;
1738   }
1739
1740   .file-list-item-summary {
1741       opacity: 1;
1742   }
1743
1744   .file-list-item.active:first-child {
1745       border-top: none;
1746   }
1747
1748   .file-node-background {
1749       height: 32px;
1750   }
1751
1752   .file-library-node.active>.file-node-content,
1753   .file-list-item.active {
1754       color: white;
1755       color: var(--active-file-text-color);
1756   }
1757
1758   .file-library-node.active>.file-node-background{
1759       background-color: rgb(34, 34, 34);
1760       background-color: var(--active-file-bg-color);
1761   }
1762   .file-list-item.active {
1763       background-color: rgb(34, 34, 34);
1764       background-color: var(--active-file-bg-color);
1765   }
1766
1767   #ty-tooltip {
1768       background-color: black;
1769       color: #eee;
1770   }
1771
1772   .md-task-list-item>input {
1773       margin-left: -1.3em;
1774       margin-top: 0.3rem;
1775       -webkit-appearance: none;
1776   }
1777
1778   .md-mathjax-midline {
1779       background-color: #57616b;
1780       border-bottom: none;
1781   }
1782
1783   footer.ty-footer {
1784       border-color: #656565;
1785   }
1786
1787   .ty-preferences .btn-default {
1788       background: transparent;
1789   }
1790   .ty-preferences .btn-default:hover {
1791       background: #57616b;
1792   }
1793
1794   .ty-preferences select {
1795       border: 1px solid #989698;
1796       height: 21px;
1797   }
1798
1799   .ty-preferences .nav-group-item.active {
1800       background: var(--item-hover-bg-color);
1801   }
1802
1803   .ty-preferences input[type="search"] {
1804       border-color: #333;
1805       background: #333;
1806       line-height: 22px;
1807       border-radius: 6px;
1808       color: white;
1809   }
1810
1811   .ty-preferences input[type="search"]:focus {
1812       box-shadow: none;
1813   }
1814
1815   [data-is-directory="true"] .file-node-content {
1816       margin-bottom: 0;
1817   }
1818
1819   .file-node-title {
1820       line-height: 22px;
1821   }
1822
1823   .html-for-mac .file-node-open-state, .html-for-mac .file-node-icon {
1824       line-height: 26px;
1825   }
1826
1827   ::-webkit-scrollbar-thumb {
1828       background: rgba(230, 230, 230, 0.30);
1829   }
1830
1831   ::-webkit-scrollbar-thumb:active {
1832       background: rgba(230, 230, 230, 0.50);
1833   }
1834
1835   #typora-sidebar:hover div.sidebar-content-content::-webkit-scrollbar-thumb:horizontal {
1836       background: rgba(230, 230, 230, 0.30);
1837   }
1838
1839   .nav-group-item:active {
1840       background-color: #474d54;
1841   }
1842
1843   .md-search-hit {
1844       background: rgba(199, 140, 60, 0.81);
1845       color: #eee;
1846   }
1847
1848   .md-search-hit * {
1849       color: #eee;
1850   }
1851
1852   #md-searchpanel input {
1853       color: white;
1854   }
1855
1856
1857   </style>
1858   </head>
1859   <body class='typora-export' >
1860   <div  id='write'  class = 'is-node'><h1><a name="practicas-para-realizar-en-el-cluster-de-raspberry-pi" class="md-header-anchor"></a><span>Practicas para realizar en el cluster de Raspberry Pi</span></h1><h2><a name="1--basic-trafic-engineering" class="md-header-anchor"></a><span>1- Basic Trafic Engineering</span></h2><blockquote><p><span>El objetivo de esta practica es entender el concepto de las redes definidas por software y sus ventajas, asi como mostrar como el controlador SDN puede decirle a los OVS que se comporten de una manera u otra, enviando el trafico deseado de un sitio a otro.</span></p></blockquote><h4><a name="-creacion-de-topologia" class="md-header-anchor"></a><span>-Creacion de topologia</span></h4><p><span>      </span><span>Para empezar, vamos a crear una topologia de 3 switches y 3 hosts, conectados como se muestra en la siguiente figura. Posteriormente vamos a iniciar el controlador con la aplicacion </span><em><span>Switching</span></em><span>.</span></p><p><img src="img/toposwitch.png" align="left" style="zoom:40%;" width="500" /></p><p>&nbsp;</p><p><span>     </span><span>Observe y asegurese que los flowtable de los switches estan por defecto. Una vez visto esto, el objetivo es simplemente obtener conectividad entre h1 y h2, modificando estos flow entry mediante una API REST haciendo peticiones al controlador SDN. </span></p><h4><a name="--configuracion-de-los-ovs-mediante-peticiones-al-controlador-sdn" class="md-header-anchor"></a><span>- Configuracion de los OVS mediante peticiones al controlador SDN</span></h4><p><span>        </span><span>Para esto, nos dirijimos a la consola de la Raspberry principal (rpi1) y en la carpeta scripts ejecutamos el codigo </span><em><span>basicflow.sh</span></em><span>, el cual se tiene una muestra mas abajo, y no es mas que realizar POST al controlador con los parametros que deseamos configurar. En esta peticion se envia el DPID del switch deseado, y los respectivos campos de OpenFlow, tales como el match y los actions. </span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="bash" style="break-inside: unset;"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="bash"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><span><span></span>x</span></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-meta">#!/bin/bash</span></span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">: <span class="cm-string">'</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">Written by: Felix G. Tejada</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">This script is applied to a linear <span class="cm-number">3</span> topo, just <span class="cm-keyword">for</span> show the example of basic TE.</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-string">'</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-builtin">curl</span> <span class="cm-attribute">-X</span> DELETE http://localhost:8080/stats/flowentry/clear/1</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-builtin">echo</span> <span class="cm-string">"adding new flows entry to switches 1 and 2"</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-builtin">curl</span> <span class="cm-attribute">-X</span> POST <span class="cm-attribute">-d</span> <span class="cm-string">'{</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-string">"dpid"</span>: <span class="cm-number">1</span>,</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-string">"cookie"</span>: <span class="cm-number">0</span>,</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-string">"cookie_mask"</span>: <span class="cm-number">0</span>,</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-string">"table_id"</span>: <span class="cm-number">0</span>,</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-string">"idle_timeout"</span>: <span class="cm-number">0</span>,</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-string">"hard_timeout"</span>: <span class="cm-number">0</span>,</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-string">"priority"</span>: <span class="cm-number">100</span>,</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-string">"flags"</span>: <span class="cm-number">0</span>,</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-string">"match"</span>:{</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string">"in_port"</span>:1</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp;  },</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-string">"actions"</span>:[</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp;  {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string">"type"</span>:<span class="cm-string">"OUTPUT"</span>,</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string">"port"</span>: <span class="cm-number">2</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp;  }</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp;  ]</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> }<span class="cm-string">' http://localhost:8080/stats/flowentry/add</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 728px;"></div><div class="CodeMirror-gutters" style="display: none; height: 728px;"></div></div></div></pre><p><span>     </span><span>Notese que la idea es limpiar todo lo que tenga el switch en ese momento, y decirle basicamente &quot;Todo el trafico recivido por el puerto 1 sacalo por el puerto 2&quot;. Siguiendo esta logica, se crea un camino por el cual fluye el trafico, en nuestro ejemplo, conectividad entre h1 y h2.</span></p><p><span>    </span><span>Una vez ejecutado, compruebe que se actualizaron los flows de los switches 1 y 2, ademas de que existe conectividad entre h1 y h2 haciendo ping. </span></p><p><span>      </span><span>Compruebe que no existe conectividad entre h1 y h3, debido a que no existe ninguna ruta especificada.</span></p><h2><a name="2--enrutamiento-estatico-con-api-rest" class="md-header-anchor"></a><span>2- Enrutamiento estatico con API REST</span></h2><blockquote><p><span>El objetivo de esta practica consiste en crear una topologia serial de 3 switches y 3 host, como se muestra en la siguiente imagen. Asi, solo se debe tener conectividad entre todas las redes de h1,h2 y h3.</span></p></blockquote><p><img src="img/toporouting.png" align="left" style="zoom:40%;" width="500" /></p><p><span>     </span><span>Para esto, mediante la pagina web cree la topologia, inicie el controlador con la aplicacion </span><em><span>REST Router</span></em><span> , confirme que en el controlador se muestra que los switches fueron reconocidos y proceda a configurar las direcciones IP de los hosts. </span></p><h4><a name="-configuracion-de-direcciones-ip-a-los-hosts-virtuales" class="md-header-anchor"></a><span>-Configuracion de direcciones IP a los hosts virtuales</span></h4><p><span> </span><span>Para configurar estas direcciones IP, utilice los comandos </span><code>h[x] ip addr del 10.0.0.[x]/8 dev h[x]-eth0</code><span> para eliminar la IP por defecto, siendo [x] el host deseado, y asimismo con el comando </span><code>ip addr add</code><span> configure las demas direcciones. Asi mismo, configure los gateway necesarios con el comando </span><code>ip route add default via [direccion_ip_gateway]</code><span>. </span></p><p><span>  </span><span>Entendemos que este proceso puede ser algo tedioso, por lo cual hemos creado un script, el cual se encuentra en la carpeta </span><em><span>scripts</span></em><span> de la Raspberry principal. Para ejecutarlo, simplemente ejecutelo con </span><code>./hostadress.sh</code><span>. </span></p><p><span>        </span><span>Compruebe mediante la web que se realizaron las configuraciones con el comando </span><code>h[x] ifconfig h[x]-eth0</code><span> </span></p><h4><a name="-programar-el-controlador-para-que-los-switches-conozcan-las-redes" class="md-header-anchor"></a><span>-Programar el controlador para que los switches conozcan las redes</span></h4><p><span>    </span><span>Par este paso, necesita hacer uso del API REST de la aplicacion de RYU. </span></p><p><span>       </span><span>Entendemos que esto puede ser un poco tedioso, por lo cual hemos creado un script que se encuentra en la carpeta </span><em><span>scripts</span></em><span> que realiza estas configuraciones de manera automatica, solo ejecutandolo con </span><code>./routerflows.sh</code><span>. Mas abajo se muestra un fragmento del script, para que se entienda que es lo que esta ocurriendo.</span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="bash" style="break-inside: unset;"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="bash"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-meta">#!/bin/bash</span></span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">: <span class="cm-string">'</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">Este script hace peticiones HTTP POST a la API REST del codigo que debe estar corriendo</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">en el controlador,llamado rest_router.py.</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">Written by: Felix Tejada &amp; Oscar Rodriguez</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-string">'</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-builtin">echo</span> <span class="cm-string">"Setting address to the routers..."</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-builtin">echo</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-builtin">curl</span> <span class="cm-attribute">-X</span> POST <span class="cm-attribute">-d</span> <span class="cm-string">'{"address":"172.16.10.1/24"}'</span> http://localhost:8080/router/0000000000000002</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-builtin">echo</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-builtin">curl</span> <span class="cm-attribute">-X</span> POST <span class="cm-attribute">-d</span> <span class="cm-string">'{"address": "172.16.30.1/24"}'</span> http://localhost:8080/router/0000000000000002</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-builtin">echo</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-builtin">curl</span> <span class="cm-attribute">-X</span> POST <span class="cm-attribute">-d</span> <span class="cm-string">'{"address": "192.168.10.1/24"}'</span> http://localhost:8080/router/0000000000000002</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-builtin">echo</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-builtin">curl</span> <span class="cm-attribute">-X</span> POST <span class="cm-attribute">-d</span> <span class="cm-string">'{"address":"172.16.20.1/24"}'</span> http://localhost:8080/router/0000000000000001</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-builtin">echo</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-builtin">curl</span> <span class="cm-attribute">-X</span> POST <span class="cm-attribute">-d</span> <span class="cm-string">'{"address": "172.16.30.30/24"}'</span> http://localhost:8080/router/0000000000000001</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-builtin">echo</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-builtin">curl</span> <span class="cm-attribute">-X</span> POST <span class="cm-attribute">-d</span> <span class="cm-string">'{"address": "192.168.30.1/24"}'</span> http://localhost:8080/router/0000000000000003</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-builtin">echo</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-builtin">curl</span> <span class="cm-attribute">-X</span> POST <span class="cm-attribute">-d</span> <span class="cm-string">'{"address": "192.168.10.20/24"}'</span> http://localhost:8080/router/0000000000000003</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 650px;"></div><div class="CodeMirror-gutters" style="display: none; height: 650px;"></div></div></div></pre><p><span> </span><span>Una vez ejecutado, mediante la pagina web, compruebe que cada switch tiene seteado sus flow entrys correctamente en el apartado </span><em><span>flow tables</span></em><span>. </span></p><p><span>       </span><span>Compruebe que existe conectividad entre h1 y h2 ejecutando el comando </span><code>h1 ping -c 4 h2</code><span>. Para ver el camino recorrido, ejecute </span><code>h1 traceroute h2</code><span>.</span></p><p><span>     </span><span>Si desea eliminar todos los flowentry de los switches, y simplemente dejarlos con su flow por defecto, en la pagina web presione el boton </span><em><span>Reset flows</span></em><span> del apartado </span><em><span>Flow Tables</span></em><span>.</span></p><h2><a name="3--creando-un-micro-web-server" class="md-header-anchor"></a><span>3- Creando un micro web server</span></h2><blockquote><p><span>El objetivo de esta practica es la de comprobar conectividad entre dos host virtuales, por ejemplo h1 y h2, ejecutando un servicio web.</span></p></blockquote><h3><a name="preparando-archivos" class="md-header-anchor"></a><span>Preparando archivos</span></h3><p><span>Para poder hacer una pequna web que podamos navegar vamos a hacer lo siguiente:</span>
1861   <span>Necesitamos crear un archivo, el cual sera un script en bash con lo que deseamos ver en el cliente. Para crear esto en un host especifico, escribimos </span><code>h[x] echo &quot;[pegar texto de abajo]&quot; &gt; test.sh</code><span> , donde x es el id del host deseado.</span></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="bash" style="break-inside: unset;"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="bash"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-meta">#!/bin/bash</span></span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-builtin">echo</span> <span class="cm-string">"************PRINT SOME TEXT***************\n"</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-builtin">echo</span> <span class="cm-string">"Hello World!!!"</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-builtin">echo</span> <span class="cm-string">"\n"</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-builtin">echo</span> <span class="cm-string">"Resources:"</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">vmstat <span class="cm-attribute">-S</span> M</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-builtin">echo</span> <span class="cm-string">"\n"</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-builtin">echo</span> <span class="cm-string">"Addresses:"</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-builtin">echo</span> <span class="cm-string">"</span><span class="cm-quote">$(ifconfig)</span><span class="cm-string">"</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-builtin">echo</span> <span class="cm-string">"\n"</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-builtin">echo</span> <span class="cm-string">"</span><span class="cm-quote">$(gpio readall)</span><span class="cm-string">"</span></span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 416px;"></div><div class="CodeMirror-gutters" style="display: none; height: 416px;"></div></div></div></pre><h3><a name="iniciando-el-servidor" class="md-header-anchor"></a><span>Iniciando el servidor</span></h3><p><span>En el host que funcionara como servidor corremos el comando  </span><code>h[x] while true; do { echo -e &#39;HTTP/1.1 200 OK\r\n&#39;; sh test.sh; } | nc -l 1234 -q 1; done &amp;</code><span>, donde x es el id del host deseado.</span></p><h3><a name="accediendo-al-servidor" class="md-header-anchor"></a><span>Accediendo al servidor</span></h3><p><span>En cualquier otro host que tenga conectividad con el server solo tienes que realizar </span><code>h[x] curl -X GET http://_ipdelserver_:124</code><span> , siendo x el id de cualquier host. Asi podras ver tu web servida</span>
1862   <span>En caso de acceder desde una consola se puede instalar el software w3m y con este navegador par aconsola acceder a la web.</span></p></div>
1863   </body>
1864 </div>
1865
1866
1867
1868
1869 </body>
1870 <footer>
1871   <%include ../../partials/footer%>
1872 </footer>
1873
1874
1875 </html>