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

✨ (tps) design the tps

Browse Source
This commit is contained in:
Julien Calixte
2023-07-07 01:32:07 +02:00
parent 6ac3c5ba75
commit 402c8e49e9
3 changed files with 231 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
index.html
View File

@@ -7,21 +7,93 @@
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
</head> </head>
<body> <body>
<header>
<h1>Thinking People System</h1>
</header>
<main> <main>
<section> <section class="customer-satisfaction">
<strong>Customer Satisfaction</strong> <h2>Customer Satisfaction</h2>
Value analysis / Value engineering <p>Value analysis / Value engineering</p>
</section> </section>
<section> <section class="pilars">
<section>Just-in-time</section> <section class="just-in-time">
<section> <h3>Just-in-time</h3>
<img src="/people-improvement.svg" alt="People improvement" /> <ul>
<li>Takt</li>
<li>Flow</li>
<li>Pull system</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" fill="white" />
<circle
cx="696.5"
cy="295.5"
r="88.5"
fill="var(--background-color)"
/>
<rect
x="537"
y="384"
width="319"
height="408"
rx="106"
fill="var(--background-color)"
/>
<rect
x="593"
y="672"
width="207"
height="408"
rx="103.5"
fill="var(--background-color)"
/>
<path
d="M657 1177L732 1220.3L732 1133.7L657 1177Z"
fill="var(--background-color)"
/>
<path
d="M746 107L671 63.6987V150.301L746 107Z"
fill="var(--background-color)"
/>
<circle
cx="696.5"
cy="643.5"
r="535"
stroke="var(--background-color)"
stroke-width="23"
/>
</svg>
</section>
<section class="jidoka">
<h3>Jidoka</h3>
<ul>
<li>Andon</li>
<li>Poka yoke</li>
<li>Human / machine</li>
</ul>
</section> </section>
<section>Jidoka</section>
</section> </section>
<section> <section>
<section>improvement</section> <section class="improvement">
<section>stability</section> <ul>
<li>Heijunka</li>
<li>Standards</li>
<li>Kaizen</li>
</ul>
</section>
<section class="stability">
<ul>
<li>5S</li>
<li>Problem solving</li>
<li>TPM</li>
</ul>
</section>
</section> </section>
</main> </main>
</body> </body>

12
people-improvement.svg
View File

@@ -1,9 +1,9 @@
<svg width="1393" height="1288" viewBox="0 0 1393 1288" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="1393" height="1288" viewBox="0 0 1393 1288" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="1393" height="1288" fill="white"/> <rect width="1393" height="1288" fill="white"/>
<circle cx="696.5" cy="295.5" r="88.5" fill="#002992"/> <circle cx="696.5" cy="295.5" r="88.5" fill="var(--background-color)"/>
<rect x="537" y="384" width="319" height="408" rx="106" fill="#002992"/> <rect x="537" y="384" width="319" height="408" rx="106" fill="var(--background-color)"/>
<rect x="593" y="672" width="207" height="408" rx="103.5" fill="#002992"/> <rect x="593" y="672" width="207" height="408" rx="103.5" fill="var(--background-color)"/>
<path d="M657 1177L732 1220.3L732 1133.7L657 1177Z" fill="#002992"/> <path d="M657 1177L732 1220.3L732 1133.7L657 1177Z" fill="var(--background-color)"/>
<path d="M746 107L671 63.6987V150.301L746 107Z" fill="#002992"/> <path d="M746 107L671 63.6987V150.301L746 107Z" fill="var(--background-color)"/>
<circle cx="696.5" cy="643.5" r="535" stroke="#002992" stroke-width="23"/> <circle cx="696.5" cy="643.5" r="535" stroke="var(--background-color)" stroke-width="23"/>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 572 B

After

Width:  |  Height:  |  Size: 668 B

143
style.css
View File

@@ -0,0 +1,143 @@
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif&display=swap");
:root {
--background-color: #dff9fb;
--customer-height: 180px;
}
* {
border-radius: 1rem;
}
body {
font-size: 36px;
font-family: "Noto Serif", serif;
}
header {
text-align: center;
}
main {
display: flex;
flex-direction: column;
justify-content: center;
gap: 0;
}
.customer-satisfaction {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
text-align: center;
height: var(--customer-height);
}
.customer-satisfaction h2,
.customer-satisfaction p {
margin: 0;
position: relative;
padding: 0 0.5rem;
border-radius: 0;
}
.customer-satisfaction::before {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
border-left: 50vw solid transparent;
border-right: 50vw solid transparent;
border-bottom: var(--customer-height) solid var(--background-color);
}
.pilars {
display: flex;
justify-content: space-around;
flex-direction: column;
}
.pilars section {
text-align: center;
}
.pilars h3 {
background-color: var(--background-color);
padding: 1rem 4rem;
margin-bottom: 0;
}
.people-improvement {
display: flex;
align-items: center;
justify-content: center;
}
.people-improvement svg {
max-width: 40vh;
width: 100%;
align-self: center;
}
.just-in-time,
.jidoka {
display: flex;
flex-direction: column;
align-items: center;
}
.pilars ul {
padding-left: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
li {
list-style: none;
background-color: var(--background-color);
text-align: center;
padding: 1rem;
}
.improvement ul,
.stability ul {
background-color: var(--background-color);
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
}
@media only screen and (max-width: 1250px) {
:root {
--customer-height: 120px;
}
body {
font-size: 26px;
}
.customer-satisfaction {
background-color: var(--background-color);
padding: 0 0.5rem;
font-size: min(36px, 50vw);
}
.customer-satisfaction::before {
content: initial;
}
}
@media only screen and (min-width: 750px) {
.pilars {
flex-direction: row;
}
}
// SVG
.person,
.arrow {
fill: var(--background-color);
}