visualize the data structures in a C program
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>Struct Visualization</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"></head><style> :root { --r1: pink; --r2: blue; --r3: magenta; --r4: yellow; --r5: cyan; --r6: orange; --r7: lime; --r8: olive; }
*::before, *::after, * { margin: 0; padding: 0; box-sizing: border-box; }
html, body { min-height: 100vh; height: 100vh; overscroll-behavior: none; background: #F0EAD6;
direction: ltr; font: 16px HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif; }
.struct-info { padding: 0 20px 20px 20px; border-bottom: 1px solid silver; margin-bottom: 20px; }
.struct-info-declaration { position: absolute; font-family: monospace; min-width: min-content; max-width: 20em; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9em; transform: translateX(calc(50% - 10px)); color: black; font-weight: normal; } .struct-info-declaration-name { font: 16px HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif; }
.struct-info-declaration-top { top: -30px; } .struct-info-declaration-bottom { bottom: -30px; }
.struct-info-byte-row-ellipsis { position: absolute; right: 1em; }
.struct-info-byte-rows { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; }
.struct-info-byte-row { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: flex-start; align-items: center; }
.struct-info-bytegroup { margin: 2em 0;
display: flex; flex-wrap: wrap; flex-direction: row; justify-content: flex-start; align-items: center; }
.struct-info-bytegroup:hover { background-color: orange;
.struct-info-declaration { font-weight: bold; color: orange; } }
.struct-info-header { font-weight: bold; font-family: monospace; }
.struct-info-byte { position: relative; display: flex; justify-content: center; align-items: center; border: 1px solid black; width: 30px; height: 45px; } .struct-info-byte-first { border-left-width: 3px; } .struct-info-byte-unknown { border-left-width: 3px; background-color: maroon; font-weight: bold; color: white; } .struct-info-byte-counted-ellipsis { background-color: #808000; font-weight: bold; } .struct-info-byte-ellipsis { background-color: #400000; font-weight: bold; color: white; }</style><script></script><body><!-- c code will terminate the body and html tags --><div class='struct-info'><label class='struct-info-header'>struct Declaration - alias: </label><div class='struct-info-byte-row'><div class='struct-info-bytegroup'><div class='struct-info-byte struct-info-byte-first'><div class='struct-info-declaration struct-info-declaration-top'>char <span class='struct-info-declaration-name'>type[64]</span></div></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div></div><div class='struct-info-bytegroup'><div class='struct-info-byte struct-info-byte-first'><div class='struct-info-declaration struct-info-declaration-bottom'>char <span class='struct-info-declaration-name'>name[64]</span></div></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div clas
|
