Skip to content

Instantly share code, notes, and snippets.

@thinkphp

thinkphp/flowchart.html

Last active June 21, 2025 06:52
Show Gist options
  • Save thinkphp/d9219897cbeebcff8cfa02148a5d935d to your computer and use it in GitHub Desktop.
Save thinkphp/d9219897cbeebcff8cfa02148a5d935d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
flowchart.html
<!-- https://codepen.io/IronMan-the-builder/pen/azORPqM --->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rental Management System Flowcharts</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
}
.container {
max-width: 3000px;
margin: 0 auto;
background: white;
border-radius: 15px;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
overflow: hidden;
}
.header {
background: linear-gradient(135deg, #2c3e50, #3498db);
color: white;
padding: 30px;
text-align: center;
}
.header h1 {
margin: 0;
font-size: 2.5em;
font-weight: 300;
}
.header p {
margin: 10px 0 0 0;
opacity: 0.9;
font-size: 1.1em;
}
.flowchart-section {
padding: 40px;
border-bottom: 2px solid #f0f0f0;
}
.flowchart-section:last-child {
border-bottom: none;
}
.flowchart-title {
color: #2c3e50;
font-size: 1.8em;
margin-bottom: 30px;
padding-bottom: 10px;
border-bottom: 3px solid #3498db;
display: inline-block;
}
.flowchart {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
max-width: 800px;
margin: 0 auto;
}
.flowchart-element {
padding: 15px 25px;
margin: 5px;
text-align: center;
font-weight: 500;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
transition: all 0.3s ease;
max-width: 300px;
min-width: 200px;
}
.flowchart-element:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
/* Flowchart element types */
.start-end {
background: linear-gradient(135deg, #27ae60, #2ecc71);
color: white;
border-radius: 50px;
border: 3px solid #27ae60;
}
.process {
background: linear-gradient(135deg, #3498db, #5dade2);
color: white;
border-radius: 10px;
border: 3px solid #3498db;
}
.decision {
background: linear-gradient(135deg, #f39c12, #f5b041);
color: white;
border-radius: 15px;
border: 3px solid #f39c12;
transform: rotate(0deg);
position: relative;
}
.decision::before {
content: '';
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #f39c12;
}
.input-output {
background: linear-gradient(135deg, #9b59b6, #bb7dd4);
color: white;
border-radius: 10px;
border: 3px solid #9b59b6;
transform: skew(-10deg);
}
.input-output span {
display: block;
transform: skew(10deg);
}
.connector {
background: linear-gradient(135deg, #34495e, #5d6d7e);
color: white;
border-radius: 25px;
border: 3px solid #34495e;
font-size: 0.9em;
padding: 10px 20px;
}
.arrow {
font-size: 2em;
color: #3498db;
margin: 5px 0;
}
.branch {
display: flex;
justify-content: space-around;
align-items: flex-start;
width: 100%;
margin: 20px 0;
}
.branch-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
margin: 0 10px;
}
.yes-no {
background: linear-gradient(135deg, #e74c3c, #ec7063);
color: white;
padding: 8px 16px;
border-radius: 20px;
font-size: 0.9em;
margin-bottom: 10px;
border: 2px solid #e74c3c;
}
.loop-back {
border: 3px dashed #3498db;
background: rgba(52, 152, 219, 0.1);
color: #3498db;
border-radius: 10px;
font-style: italic;
}
.task-info {
background: linear-gradient(135deg, #17a2b8, #5bc0de);
color: white;
padding: 15px;
border-radius: 10px;
margin-bottom: 20px;
text-align: center;
border: 3px solid #17a2b8;
}
.legend {
background: #f8f9fa;
padding: 20px;
border-radius: 10px;
margin-top: 30px;
border: 2px solid #dee2e6;
}
.legend h3 {
color: #2c3e50;
margin-top: 0;
}
.legend-item {
display: flex;
align-items: center;
margin: 10px 0;
}
.legend-shape {
width: 80px;
height: 40px;
margin-right: 15px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 0.8em;
border-radius: 5px;
}
@media (max-width: 768px) {
.flowchart-element {
max-width: 250px;
font-size: 0.9em;
padding: 12px 20px;
}
.branch {
flex-direction: column;
align-items: center;
}
.branch-item {
margin: 10px 0;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Rental Management System</h1>
<p>Program Flowcharts - COM4018 Assignment</p>
</div>
<!-- Task 1: Main Program Flowchart -->
<div class="flowchart-section">
<h2 class="flowchart-title">Task 1: Main Program Flow</h2>
<div class="task-info">
<strong>Purpose:</strong> Main menu control with input validation and subroutine calls
</div>
<div class="flowchart">
<div class="flowchart-element start-end">START</div>
<div class="arrow">↓</div>
<div class="flowchart-element input-output">
<span>Display Welcome Message</span>
</div>
<div class="arrow">↓</div>
<div class="flowchart-element process loop-back" id="menu-display">Display Menu Options:<br>1. Enter property details<br>2. Display summary<br>3. Exit</div>
<div class="arrow">↓</div>
<div class="flowchart-element input-output">
<span>INPUT: User Choice</span>
</div>
<div class="arrow">↓</div>
<div class="flowchart-element decision">Is input valid integer<br>between 1-3?</div>
<div class="branch">
<div class="branch-item">
<div class="yes-no">NO</div>
<div class="arrow">↓</div>
<div class="flowchart-element input-output">
<span>Display Error Message</span>
</div>
<div class="arrow">↓</div>
<div class="flowchart-element loop-back">Loop back to menu</div>
</div>
<div class="branch-item">
<div class="yes-no">YES</div>
<div class="arrow">↓</div>
<div class="flowchart-element decision">Choice = ?</div>
<div class="branch">
<div class="branch-item">
<div class="connector">1</div>
<div class="arrow">↓</div>
<div class="flowchart-element process">Call property_data()<br>subroutine</div>
</div>
<div class="branch-item">
<div class="connector">2</div>
<div class="arrow">↓</div>
<div class="flowchart-element process">Call summary_data()<br>subroutine</div>
</div>
<div class="branch-item">
<div class="connector">3</div>
<div class="arrow">↓</div>
<div class="flowchart-element process">Call exit_program()<br>subroutine</div>
<div class="arrow">↓</div>
<div class="flowchart-element start-end">END</div>
</div>
</div>
</div>
</div>
<div class="flowchart-element loop-back">Return to Display Menu (Loop)</div>
</div>
</div>
<!-- Task 2: Property Data Input Flowchart -->
<div class="flowchart-section">
<h2 class="flowchart-title">Task 2: property_data() Subroutine</h2>
<div class="task-info">
<strong>Purpose:</strong> Input and validate rental/expense transactions for properties
</div>
<div class="flowchart">
<div class="flowchart-element start-end">START property_data()</div>
<div class="arrow">↓</div>
<div class="flowchart-element input-output loop-back" id="property-display">
<span>Display Available Properties</span>
</div>
<div class="arrow">↓</div>
<div class="flowchart-element input-output">
<span>INPUT: Property Code<br>(or 'quit' to exit)</span>
</div>
<div class="arrow">↓</div>
<div class="flowchart-element decision">Input = 'quit'?</div>
<div class="branch">
<div class="branch-item">
<div class="yes-no">YES</div>
<div class="arrow">↓</div>
<div class="flowchart-element start-end">RETURN to main</div>
</div>
<div class="branch-item">
<div class="yes-no">NO</div>
<div class="arrow">↓</div>
<div class="flowchart-element decision">Property code valid?</div>
</div>
</div>
<div class="branch">
<div class="branch-item">
<div class="yes-no">NO (Invalid Code)</div>
<div class="arrow">↓</div>
<div class="flowchart-element input-output">
<span>Display Error Message</span>
</div>
<div class="arrow">↓</div>
<div class="flowchart-element loop-back">Loop back to Property Display</div>
</div>
<div class="branch-item">
<div class="yes-no">YES (Valid Code)</div>
<div class="arrow">↓</div>
<div class="flowchart-element input-output loop-back" id="description-input">
<span>INPUT: Description</span>
</div>
</div>
</div>
<div class="arrow">↓</div>
<div class="flowchart-element decision">Description empty?</div>
<div class="branch">
<div class="branch-item">
<div class="yes-no">YES</div>
<div class="arrow">↓</div>
<div class="flowchart-element input-output">
<span>Display Error Message</span>
</div>
<div class="arrow">↓</div>
<div class="flowchart-element loop-back">Loop back to Description Input</div>
</div>
<div class="branch-item">
<div class="yes-no">NO</div>
<div class="arrow">↓</div>
<div class="flowchart-element input-output loop-back" id="amount-input">
<span>INPUT: Amount</span>
</div>
</div>
</div>
<div class="arrow">↓</div>
<div class="flowchart-element decision">Amount valid number<br>and ≠ 0?</div>
<div class="branch">
<div class="branch-item">
<div class="yes-no">NO</div>
<div class="arrow">↓</div>
<div class="flowchart-element input-output">
<span>Display Error Message</span>
</div>
<div class="arrow">↓</div>
<div class="flowchart-element loop-back">Loop back to Amount Input</div>
</div>
<div class="branch-item">
<div class="yes-no">YES</div>
<div class="arrow">↓</div>
<div class="flowchart-element process">Store transaction in<br>TRANSACTIONS list</div>
</div>
</div>
<div class="arrow">↓</div>
<div class="flowchart-element input-output">
<span>Display Success Message</span>
</div>
<div class="arrow">↓</div>
<div class="flowchart-element input-output">
<span>INPUT: Continue? (y/n)</span>
</div>
<div class="arrow">↓</div>
<div class="flowchart-element decision">Continue = 'y'?</div>
<div class="branch">
<div class="branch-item">
<div class="yes-no">YES</div>
<div class="arrow">↓</div>
<div class="flowchart-element loop-back">Loop back to Property Display</div>
</div>
<div class="branch-item">
<div class="yes-no">NO</div>
<div class="arrow">↓</div>
<div class="flowchart-element start-end">RETURN to main</div>
</div>
</div>
</div>
</div
<!-- Task 3: Summary Data Flowchart -->
<div class="flowchart-section">
<h2 class="flowchart-title">Task 3: summary_data() Subroutine</h2>
<div class="task-info">
<strong>Purpose:</strong> Process transaction data and display formatted summary table
</div>
<div class="flowchart">
<div class="flowchart-element start-end">START summary_data()</div>
<div class="arrow">↓</div>
<div class="flowchart-element decision">TRANSACTIONS list<br>empty?</div>
<div class="branch">
<div class="branch-item">
<div class="yes-no">YES</div>
<div class="arrow">↓</div>
<div class="flowchart-element input-output">
<span>Display "No data available"<br>message</span>
</div>
<div class="arrow">↓</div>
<div class="flowchart-element start-end">RETURN to main</div>
</div>
<div class="branch-item">
<div class="yes-no">NO</div>
<div class="arrow">↓</div>
<div class="flowchart-element process">Initialize summary dictionary<br>for each property</div>
<div class="arrow">↓</div>
<div class="flowchart-element process">FOR each transaction in<br>TRANSACTIONS list</div>
<div class="arrow">↓</div>
<div class="flowchart-element decision">Amount > 0<br>(rent)?</div>
<div class="branch">
<div class="branch-item">
<div class="yes-no">YES</div>
<div class="arrow">↓</div>
<div class="flowchart-element process">Add to total_rents<br>for property</div>
</div>
<div class="branch-item">
<div class="yes-no">NO</div>
<div class="arrow">↓</div>
<div class="flowchart-element process">Add absolute value to<br>total_repairs for property</div>
</div>
</div>
<div class="arrow">↓</div>
<div class="flowchart-element process">Calculate amended_cost =<br>original_cost + total_repairs</div>
<div class="arrow">↓</div>
<div class="flowchart-element process">Calculate rent_percentage =<br>(total_rents / residual_mortgage) × 100</div>
<div class="arrow">↓</div>
<div class="flowchart-element input-output">
<span>Display table header</span>
</div>
<div class="arrow">↓</div>
<div class="flowchart-element process">FOR each property<br>display formatted row</div>
<div class="arrow">↓</div>
<div class="flowchart-element process">Calculate and display<br>totals row</div>
<div class="arrow">↓</div>
<div class="flowchart-element input-output">
<span>Display formula explanation<br>and transaction count</span>
</div>
<div class="arrow">↓</div>
<div class="flowchart-element input-output">
<span>Wait for user input<br>(Press Enter)</span>
</div>
<div class="arrow">↓</div>
<div class="flowchart-element start-end">RETURN to main</div>
</div>
</div>
</div>
</div>
<!-- Legend -->
<div class="flowchart-section">
<div class="legend">
<h3>🔍 Flowchart Symbol Legend</h3>
<div class="legend-item">
<div class="legend-shape start-end">Start/End</div>
<span><strong>Terminal:</strong> Program start and end points</span>
</div>
<div class="legend-item">
<div class="legend-shape process">Process</div>
<span><strong>Process:</strong> Computational operations and assignments</span>
</div>
<div class="legend-item">
<div class="legend-shape decision">Decision</div>
<span><strong>Decision:</strong> Conditional statements and validation checks</span>
</div>
<div class="legend-item">
<div class="legend-shape input-output">I/O</div>
<span><strong>Input/Output:</strong> User input and display operations</span>
</div>
<div class="legend-item">
<div class="legend-shape connector">Connector</div>
<span><strong>Connector:</strong> Flow direction and value indicators</span>
</div>
<div class="legend-item">
<div class="legend-shape loop-back">Loop</div>
<span><strong>Loop Back:</strong> Return to previous steps for iteration</span>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment