178 lines
5.8 KiB
HTML
178 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Explorable Thinking People System</title>
|
|
<meta
|
|
name="description"
|
|
content="Author: Julien Calixte,
|
|
My understanding of the Thinking People System and
|
|
how it helps people and organization to improve"
|
|
/>
|
|
<link rel="stylesheet" href="core.css" />
|
|
<link rel="stylesheet" href="index.css" />
|
|
<link rel="icon" href="people-improvement.svg" />
|
|
<link rel="mask-icon" href="people-improvement.svg" color="#ffffff" />
|
|
</head>
|
|
<body>
|
|
<header class="hud">
|
|
<h1 class="thinking-people-system">Thinking People System</h1>
|
|
</header>
|
|
<main>
|
|
<div class="customer-satisfaction-roof-parent">
|
|
<section class="customer-satisfaction-roof focusable">
|
|
<h2 class="customer-satisfaction">Customer Satisfaction</h2>
|
|
<p class="value-analysis-value-engineering">
|
|
Value analysis / Value engineering
|
|
</p>
|
|
</section>
|
|
</div>
|
|
<section class="levers">
|
|
<ul>
|
|
<li class="security focusable">Security</li>
|
|
<li class="quality focusable">Quality</li>
|
|
<li class="lead-time focusable">Lead time</li>
|
|
<li class="cost focusable">Cost</li>
|
|
<li class="environment focusable">Environment</li>
|
|
</ul>
|
|
</section>
|
|
<section class="pilars">
|
|
<section class="just-in-time-pilar">
|
|
<h3 class="just-in-time focusable">Just-in-time</h3>
|
|
<ul>
|
|
<li class="takt focusable">Takt</li>
|
|
<li class="one-piece-flow focusable">One piece flow</li>
|
|
<li class="pull-system focusable">
|
|
<a href="/pull-system.html">Pull system</a>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
<section class="people-improvement">
|
|
<svg
|
|
viewBox="0 0 1393 1288"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<rect width="1393" height="1288" />
|
|
<circle
|
|
cx="696.5"
|
|
cy="295.5"
|
|
r="88.5"
|
|
fill="var(--primary-color)"
|
|
/>
|
|
<rect
|
|
x="537"
|
|
y="384"
|
|
width="319"
|
|
height="408"
|
|
rx="106"
|
|
fill="var(--primary-color)"
|
|
/>
|
|
<rect
|
|
x="593"
|
|
y="672"
|
|
width="207"
|
|
height="408"
|
|
rx="103.5"
|
|
fill="var(--primary-color)"
|
|
/>
|
|
<path
|
|
d="M657 1177L732 1220.3L732 1133.7L657 1177Z"
|
|
fill="var(--primary-color)"
|
|
/>
|
|
<path
|
|
d="M746 107L671 63.6987V150.301L746 107Z"
|
|
fill="var(--primary-color)"
|
|
/>
|
|
<circle
|
|
cx="696.5"
|
|
cy="643.5"
|
|
r="535"
|
|
stroke="var(--primary-color)"
|
|
stroke-width="23"
|
|
/>
|
|
</svg>
|
|
</section>
|
|
<section class="jidoka-pilar">
|
|
<h3 class="jidoka focusable">Jidoka</h3>
|
|
<ul>
|
|
<li class="andon focusable">Andon</li>
|
|
<li class="poka-yoke focusable">Poka yoke</li>
|
|
<li class="human-machine focusable">Human / machine</li>
|
|
</ul>
|
|
</section>
|
|
</section>
|
|
<section class="ground">
|
|
<section class="improvement">
|
|
<ul class="improvement-list focusable">
|
|
<li class="heijunka focusable">Heijunka</li>
|
|
<li class="standards focusable">Standards</li>
|
|
<li class="kaizen focusable">Kaizen</li>
|
|
</ul>
|
|
</section>
|
|
<section class="stability">
|
|
<ul class="stability-list focusable">
|
|
<li class="5s focusable">
|
|
<!-- <a href="/5s.html">5S</a> -->
|
|
5S
|
|
</li>
|
|
<li class="problem-solving focusable">Problem solving</li>
|
|
<li class="tpm focusable">TPM</li>
|
|
</ul>
|
|
</section>
|
|
</section>
|
|
</main>
|
|
<details class="hud">
|
|
<summary>Enablers</summary>
|
|
<p>
|
|
You can use the following options to interact with the TPS. It works
|
|
with the query string. Like so:
|
|
<a href="https://thinking-people-system.house?size=small"
|
|
>https://thinking-people-system.house?size=small</a
|
|
>.
|
|
</p>
|
|
<ul>
|
|
<li>
|
|
<code>display</code>: display without any HUD with the option
|
|
<code><a href="?display=house-only">house-only</a></code>
|
|
</li>
|
|
<li>
|
|
<code>size</code>: can be <code><a href="?size=small">small</a></code>
|
|
</li>
|
|
<li>
|
|
<code>focus</code>: focus only
|
|
<a href="?focus=pull-system">a part</a> of the TPS. Can be
|
|
<a href="?focus=pull-system&focus=andon&focus=quality">multiple</a>.
|
|
(Here are all the possible values:
|
|
<span id="focus-list"></span>
|
|
)
|
|
</li>
|
|
<li>
|
|
<code>text</code>: <a href="?text=hide">hide</a> text to only have the
|
|
house
|
|
</li>
|
|
<li>
|
|
<code>scroll</code>: scroll to the
|
|
<code><a href="?scroll=end">end</a></code>
|
|
</li>
|
|
</ul>
|
|
</details>
|
|
<svg class="round-svg" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<filter id="round">
|
|
<feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur" />
|
|
<feColorMatrix
|
|
in="blur"
|
|
mode="matrix"
|
|
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9"
|
|
result="flt_tag"
|
|
/>
|
|
<feComposite in="SourceGraphic" in2="flt_tag" operator="atop" />
|
|
</filter>
|
|
</defs>
|
|
</svg>
|
|
<script type="module" src="main.ts"></script>
|
|
</body>
|
|
</html>
|