nickhayashi
/
struct-vis
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
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.
3 Commits
1 Branch
0 Tags
159 KiB
Tree: 882263fe2e
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '882263fe2e'
${ noResults }
struct-vis/base-index.html

143 lines
2.8 KiB
Raw Normal View History

initial
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Struct Visualization</title>
  6. <base href="/">
  7. <meta name="viewport" content="width=device-width, initial-scale=1">
  8. <link rel="icon" type="image/x-icon" href="favicon.ico">
  9. </head>
  10. <style>
  11. :root {
  12. --r1: pink;
  13. --r2: blue;
  14. --r3: magenta;
  15. --r4: yellow;
  16. --r5: cyan;
  17. --r6: orange;
  18. --r7: lime;
  19. --r8: olive;
  20. }
  22. *::before,
  23. *::after,
  24. * {
  25. margin: 0;
  26. padding: 0;
  27. box-sizing: border-box;
  28. }
  30. html, body {
  31. min-height: 100vh;
  32. height: 100vh;
  33. overscroll-behavior: none;
  34. background: #F0EAD6;
  36. direction: ltr;
  37. font: 16px HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;
  38. }
  40. .struct-info {
  41. padding: 0 20px 20px 20px;
  42. border-bottom: 1px solid silver;
  43. margin-bottom: 20px;
  44. }
  46. .struct-info-declaration {
  47. position: absolute;
  48. font-family: monospace;
  49. min-width: min-content;
  50. max-width: 20em;
  51. text-overflow: ellipsis;
  52. white-space: nowrap;
  53. font-size: 0.9em;
  54. transform: translateX(calc(50% - 10px));
  55. color: black;
  56. font-weight: normal;
  57. }
  58. .struct-info-declaration-name {
  59. font: 16px HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;
  60. }
  62. .struct-info-declaration-top {
  63. top: -30px;
  64. }
  65. .struct-info-declaration-bottom {
  66. bottom: -30px;
  67. }
  69. .struct-info-byte-row-ellipsis {
  70. position: absolute;
  71. right: 1em;
  72. }
  74. .struct-info-byte-rows {
  75. display: flex;
  76. flex-direction: column;
  77. justify-content: flex-start;
  78. align-items: flex-start;
  79. }
  81. .struct-info-byte-row {
  82. display: flex;
  83. flex-direction: row;
  84. justify-content: flex-start;
  85. align-items: center;
  86. }
  88. .struct-info-bytegroup {
  89. margin: 2em 0;
  91. display: flex;
  92. flex-wrap: wrap;
  93. flex-direction: row;
  94. justify-content: flex-start;
  95. align-items: center;
  96. }
  98. .struct-info-bytegroup:hover {
  99. background-color: orange;
  101. .struct-info-declaration {
  102. font-weight: bold;
  103. color: orange;
  104. }
  105. }
  107. .struct-info-header {
  108. font-weight: bold;
  109. font-family: monospace;
  110. }
  112. .struct-info-byte {
  113. position: relative;
  114. display: flex;
  115. justify-content: center;
  116. align-items: center;
  117. border: 1px solid black;
  118. width: 30px;
  119. height: 45px;
  120. }
  121. .struct-info-byte-first {
  122. border-left-width: 3px;
  123. }
  124. .struct-info-byte-unknown {
  125. border-left-width: 3px;
  126. background-color: maroon;
  127. font-weight: bold;
  128. color: white;
  129. }
  130. .struct-info-byte-counted-ellipsis {
  131. background-color: #808000;
  132. font-weight: bold;
  133. }
  134. .struct-info-byte-ellipsis {
  135. background-color: #400000;
  136. font-weight: bold;
  137. color: white;
  138. }
  139. </style>
  140. <script>
  141. </script>
  142. <body>
  143. <!-- c code will terminate the body and html tags -->