1
0

chart-loop-en.html 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>darwin.skill - Core Loop</title>
  6. <link rel="preconnect" href="https://fonts.googleapis.com">
  7. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  8. <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap" rel="stylesheet">
  9. <style>
  10. * { margin: 0; padding: 0; box-sizing: border-box; }
  11. html, body {
  12. width: 1200px;
  13. height: 500px;
  14. background: #111111;
  15. overflow: hidden;
  16. font-family: 'Inter', sans-serif;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <svg width="1200" height="500" xmlns="http://www.w3.org/2000/svg">
  22. <defs>
  23. <!-- Arrow markers -->
  24. <marker id="arr-orange" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
  25. <polygon points="0 0, 10 3.5, 0 7" fill="#D4532B"/>
  26. </marker>
  27. <marker id="arr-green" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
  28. <polygon points="0 0, 10 3.5, 0 7" fill="#2B8A3E"/>
  29. </marker>
  30. <marker id="arr-red" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
  31. <polygon points="0 0, 10 3.5, 0 7" fill="#C92A2A"/>
  32. </marker>
  33. <marker id="arr-orange-up" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
  34. <polygon points="0 0, 10 3.5, 0 7" fill="#D4532B"/>
  35. </marker>
  36. </defs>
  37. <!-- Background -->
  38. <rect width="1200" height="500" fill="#111111"/>
  39. <!-- CORE LOOP label -->
  40. <text x="48" y="50" fill="#D4532B" font-family="Inter, sans-serif" font-size="11" font-weight="700" letter-spacing="3">CORE LOOP</text>
  41. <!-- B1: EVALUATE -->
  42. <rect x="48" y="165" width="124" height="70" fill="#FFFFFF"/>
  43. <text x="110" y="196" fill="#111111" font-family="Inter, sans-serif" font-size="13" font-weight="800" text-anchor="middle">EVALUATE</text>
  44. <text x="110" y="213" fill="#555555" font-family="Inter, sans-serif" font-size="10" font-weight="600" text-anchor="middle">Current Skill</text>
  45. <!-- Arrow B1→B2 -->
  46. <line x1="172" y1="200" x2="204" y2="200" stroke="#D4532B" stroke-width="2" marker-end="url(#arr-orange)"/>
  47. <!-- B2: IMPROVE -->
  48. <rect x="210" y="165" width="124" height="70" fill="#FFFFFF"/>
  49. <text x="272" y="196" fill="#111111" font-family="Inter, sans-serif" font-size="13" font-weight="800" text-anchor="middle">GENERATE</text>
  50. <text x="272" y="213" fill="#555555" font-family="Inter, sans-serif" font-size="10" font-weight="600" text-anchor="middle">Improvement</text>
  51. <!-- Arrow B2→B3 -->
  52. <line x1="334" y1="200" x2="366" y2="200" stroke="#D4532B" stroke-width="2" marker-end="url(#arr-orange)"/>
  53. <!-- B3: VALIDATE -->
  54. <rect x="372" y="165" width="124" height="70" fill="#FFFFFF"/>
  55. <text x="434" y="196" fill="#111111" font-family="Inter, sans-serif" font-size="13" font-weight="800" text-anchor="middle">VALIDATE</text>
  56. <text x="434" y="213" fill="#555555" font-family="Inter, sans-serif" font-size="10" font-weight="600" text-anchor="middle">via Testing</text>
  57. <!-- Arrow B3→B4 -->
  58. <line x1="496" y1="200" x2="528" y2="200" stroke="#D4532B" stroke-width="2" marker-end="url(#arr-orange)"/>
  59. <!-- B4: CONFIRM -->
  60. <rect x="534" y="165" width="124" height="70" fill="#FFFFFF"/>
  61. <text x="596" y="196" fill="#111111" font-family="Inter, sans-serif" font-size="13" font-weight="800" text-anchor="middle">HUMAN</text>
  62. <text x="596" y="213" fill="#555555" font-family="Inter, sans-serif" font-size="10" font-weight="600" text-anchor="middle">CONFIRM</text>
  63. <!-- Arrow B4→Diamond -->
  64. <line x1="658" y1="200" x2="698" y2="200" stroke="#D4532B" stroke-width="2" marker-end="url(#arr-orange)"/>
  65. <!-- DECISION DIAMOND -->
  66. <polygon points="790,152 838,200 790,248 742,200" fill="#D4532B"/>
  67. <text x="790" y="196" fill="#FFFFFF" font-family="Inter, sans-serif" font-size="12" font-weight="800" text-anchor="middle">SCORE</text>
  68. <text x="790" y="212" fill="#FFFFFF" font-family="Inter, sans-serif" font-size="12" font-weight="800" text-anchor="middle">UP?</text>
  69. <!-- YES PATH -->
  70. <path d="M790,152 L790,120 L954,120"
  71. stroke="#2B8A3E" stroke-width="2" fill="none" marker-end="url(#arr-green)"/>
  72. <!-- YES label -->
  73. <text x="860" y="113" fill="#2B8A3E" font-family="Inter, sans-serif" font-size="10" font-weight="700" letter-spacing="1" text-anchor="middle">YES</text>
  74. <!-- YES result block: KEEP / git commit -->
  75. <rect x="960" y="85" width="130" height="70" fill="#2B8A3E"/>
  76. <text x="1025" y="115" fill="#FFFFFF" font-family="Inter, sans-serif" font-size="13" font-weight="800" text-anchor="middle">KEEP</text>
  77. <text x="1025" y="133" fill="rgba(255,255,255,0.75)" font-family="Inter, sans-serif" font-size="10" font-weight="600" text-anchor="middle">git commit</text>
  78. <!-- NO PATH -->
  79. <path d="M790,248 L790,280 L954,280"
  80. stroke="#C92A2A" stroke-width="2" fill="none" marker-end="url(#arr-red)"/>
  81. <!-- NO label -->
  82. <text x="860" y="298" fill="#C92A2A" font-family="Inter, sans-serif" font-size="10" font-weight="700" letter-spacing="1" text-anchor="middle">NO</text>
  83. <!-- NO result block: REVERT / git revert -->
  84. <rect x="960" y="245" width="130" height="70" fill="#C92A2A"/>
  85. <text x="1025" y="275" fill="#FFFFFF" font-family="Inter, sans-serif" font-size="13" font-weight="800" text-anchor="middle">REVERT</text>
  86. <text x="1025" y="293" fill="rgba(255,255,255,0.75)" font-family="Inter, sans-serif" font-size="10" font-weight="600" text-anchor="middle">git revert</text>
  87. <!-- LOOP BACK ARROW -->
  88. <path d="M1090,120 L1155,120 L1155,420 L48,420 L48,235"
  89. stroke="#D4532B" stroke-width="2" fill="none" stroke-dasharray="6,4"/>
  90. <path d="M1090,280 L1155,280"
  91. stroke="#D4532B" stroke-width="2" fill="none" stroke-dasharray="6,4"/>
  92. <!-- Arrow head pointing up at B1 left -->
  93. <polygon points="42,236 54,236 48,222" fill="#D4532B"/>
  94. <!-- LOOP BACK label along bottom -->
  95. <text x="590" y="448" fill="#444444" font-family="Inter, sans-serif" font-size="11" font-weight="600" text-anchor="middle" letter-spacing="3">LOOP BACK</text>
  96. <!-- STEP NUMBERS -->
  97. <text x="48" y="158" fill="#D4532B" font-family="Inter, sans-serif" font-size="10" font-weight="700">01</text>
  98. <text x="210" y="158" fill="#D4532B" font-family="Inter, sans-serif" font-size="10" font-weight="700">02</text>
  99. <text x="372" y="158" fill="#D4532B" font-family="Inter, sans-serif" font-size="10" font-weight="700">03</text>
  100. <text x="534" y="158" fill="#D4532B" font-family="Inter, sans-serif" font-size="10" font-weight="700">04</text>
  101. <text x="762" y="145" fill="#D4532B" font-family="Inter, sans-serif" font-size="10" font-weight="700" opacity="0.9">05</text>
  102. <!-- SUBTITLE TEXT -->
  103. <text x="48" y="476" fill="#333333" font-family="Inter, sans-serif" font-size="10" font-weight="600" letter-spacing="1">darwin.skill</text>
  104. <text x="1152" y="476" fill="#333333" font-family="Inter, sans-serif" font-size="10" font-weight="600" text-anchor="end" letter-spacing="1">CONTINUOUS IMPROVEMENT ENGINE</text>
  105. </svg>
  106. </body>
  107. </html>