julien/tps
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

♻️ (tps) mapping html

Browse Source
This commit is contained in:
Julien Calixte
2023-07-08 23:48:45 +02:00
parent ae4b971acb
commit c2f6458dbf
3 changed files with 38 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.vscode/settings.json vendored Normal file
View File

@@ -0,0 +1 @@
{}

60
index.html
View File

@@ -14,30 +14,32 @@
</head> </head>
<body> <body>
<header> <header>
<h1>Thinking People System</h1> <h1 class="thinking-people-system">Thinking People System</h1>
</header> </header>
<main> <main>
<section class="customer-satisfaction"> <section class="customer-satisfaction-roof focusable">
<h2>Customer Satisfaction</h2> <h2 class="customer-satisfaction">Customer Satisfaction</h2>
<p>Value analysis / Value engineering</p> <p class="value-analysis-value-engineering">
Value analysis / Value engineering
</p>
</section> </section>
<section class="levers"> <section class="levers focusable">
<ul> <ul>
<li>Security</li> <li class="security focusable">Security</li>
<li>Quality</li> <li class="quality focusable">Quality</li>
<li>Lead time</li> <li class="lead-time focusable">Lead time</li>
<li>Cost</li> <li class="cost focusable">Cost</li>
<li>Morale</li> <li class="morale focusable">Morale</li>
<li>Environment</li> <li class="environment focusable">Environment</li>
</ul> </ul>
</section> </section>
<section class="pilars"> <section class="pilars">
<section class="just-in-time"> <section class="just-in-time-pilar">
<h3>Just-in-time</h3> <h3 class="just-in-time focusable">Just-in-time</h3>
<ul> <ul>
<li>Takt</li> <li class="takt focusable">Takt</li>
<li>Flow</li> <li class="flow focusable">Flow</li>
<li>Pull system</li> <li class="pull-system focusable">Pull system</li>
</ul> </ul>
</section> </section>
<section class="people-improvement"> <section class="people-improvement">
@@ -86,28 +88,28 @@
/> />
</svg> </svg>
</section> </section>
<section class="jidoka"> <section class="jidoka-pilar">
<h3>Jidoka</h3> <h3 class="jidoka focusable">Jidoka</h3>
<ul> <ul>
<li>Andon</li> <li class="andon focusable">Andon</li>
<li>Poka yoke</li> <li class="poka-yoke focusable">Poka yoke</li>
<li>Human / machine</li> <li class="human-machine focusable">Human / machine</li>
</ul> </ul>
</section> </section>
</section> </section>
<section class="ground"> <section class="ground">
<section class="improvement"> <section class="improvement">
<ul> <ul class="focusable">
<li>Heijunka</li> <li class="heijunka focusable">Heijunka</li>
<li>Standards</li> <li class="standards focusable">Standards</li>
<li>Kaizen</li> <li class="kaizen focusable">Kaizen</li>
</ul> </ul>
</section> </section>
<section class="stability"> <section class="stability">
<ul> <ul class="focusable">
<li>5S</li> <li class="s5s focusable">5S</li>
<li>Problem solving</li> <li class="problem-solving focusable">Problem solving</li>
<li>TPM</li> <li class="tpm focusable">TPM</li>
</ul> </ul>
</section> </section>
</section> </section>

17
style.css
View File

@@ -2,6 +2,7 @@
:root { :root {
--background-color: #b2f1ad; --background-color: #b2f1ad;
--background-color-no-focus: #b2f1ad80;
} }
* { * {
@@ -38,7 +39,7 @@ li {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
} }
.customer-satisfaction { .customer-satisfaction-roof {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-end; justify-content: flex-end;
@@ -48,8 +49,8 @@ li {
background-color: var(--background-color); background-color: var(--background-color);
} }
.customer-satisfaction h2, .customer-satisfaction-roof h2,
.customer-satisfaction p { .customer-satisfaction-roof p {
margin: 0; margin: 0;
padding: 0 0.5rem 0.5rem; padding: 0 0.5rem 0.5rem;
border-radius: 0; border-radius: 0;
@@ -96,8 +97,8 @@ li {
text-align: center; text-align: center;
} }
.just-in-time, .just-in-time-pilar,
.jidoka { .jidoka-pilar {
display: flex; display: flex;
flex: 2; flex: 2;
flex-direction: column; flex-direction: column;
@@ -135,9 +136,3 @@ li {
max-width: 30vw; max-width: 30vw;
} }
} }
/* SVG */
.person,
.arrow {
fill: var(--background-color);
}