| <!doctype html> |
| <html lang="de"> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| <title>Cloud Code Usage Analysis</title> |
| <link rel="stylesheet" href="./styles.css" /> |
| </head> |
| <body> |
| <div class="page-shell"> |
| <header class="hero"> |
| <div class="hero-copy"> |
| <p class="eyebrow">Cloud Code Month Analysis</p> |
| <h1>Wie dein Monat mit Cloud Code aussah, in Evidenz statt Bauchgefuehl.</h1> |
| <p class="lede" id="headline"></p> |
| </div> |
| <aside class="hero-panel" id="heroPanel"></aside> |
| </header> |
|
|
| <main> |
| <section class="section" id="summarySection"> |
| <div class="section-heading"> |
| <p class="kicker">Executive Summary</p> |
| <h2>Drei klare Antworten</h2> |
| </div> |
| <div class="cards three" id="findingCards"></div> |
| </section> |
|
|
| <section class="section"> |
| <div class="section-heading"> |
| <p class="kicker">Arbeitszeit</p> |
| <h2>Geschaetzte investierte Stunden</h2> |
| </div> |
| <div class="cards three" id="workCards"></div> |
| <div class="split"> |
| <article class="panel"> |
| <h3>Methodik</h3> |
| <ul class="bullet-list" id="methodList"></ul> |
| </article> |
| <article class="panel"> |
| <h3>Unsicherheiten</h3> |
| <ul class="bullet-list" id="uncertaintyList"></ul> |
| </article> |
| </div> |
| </section> |
|
|
| <section class="section"> |
| <div class="section-heading"> |
| <p class="kicker">Arbeitsprozess</p> |
| <h2>Wie du mit Cloud Code gearbeitet hast</h2> |
| </div> |
| <div class="split process-layout"> |
| <article class="panel narrative" id="workflowNarrative"></article> |
| <article class="panel"> |
| <h3>Protoyping vs. Refinement</h3> |
| <div id="ratioChart" class="ratio-chart"></div> |
| <div class="subnote" id="ratioNote"></div> |
| </article> |
| </div> |
| <div class="cards four" id="workflowCards"></div> |
| </section> |
|
|
| <section class="section"> |
| <div class="section-heading"> |
| <p class="kicker">Projektlandschaft</p> |
| <h2>Cluster und aktive Schwergewichte</h2> |
| </div> |
| <div class="cluster-grid" id="clusterGrid"></div> |
| <div class="panel"> |
| <h3>Aktive Projekte</h3> |
| <div id="projectTable"></div> |
| </div> |
| </section> |
|
|
| <section class="section"> |
| <div class="section-heading"> |
| <p class="kicker">Timeline</p> |
| <h2>Aktivitaetsbild der letzten 30 Tage</h2> |
| </div> |
| <article class="panel"> |
| <div id="timeline"></div> |
| </article> |
| </section> |
|
|
| <section class="section"> |
| <div class="section-heading"> |
| <p class="kicker">Strategische Empfehlung</p> |
| <h2>Welches Projekt jetzt den groessten Mehrwert hat</h2> |
| </div> |
| <div class="split"> |
| <article class="panel recommendation-main" id="topRecommendation"></article> |
| <article class="panel"> |
| <h3>Top 3</h3> |
| <div id="topThree"></div> |
| </article> |
| </div> |
| <article class="panel"> |
| <h3>Shortlist</h3> |
| <div id="rankingTable"></div> |
| </article> |
| </section> |
|
|
| <section class="section"> |
| <div class="section-heading"> |
| <p class="kicker">Evidenz</p> |
| <h2>Worauf die Aussagen beruhen</h2> |
| </div> |
| <div class="evidence-grid" id="evidenceGrid"></div> |
| </section> |
| </main> |
| </div> |
|
|
| <script src="./app.js" type="module"></script> |
| </body> |
| </html> |
|
|
