Hugging Face's logo

Spaces:
PriyaMishra
/
matashreeflowchart3
Running

App Files Community
PriyaMishra commited on
Commit
7633edb
·
verified ·
1 Parent(s): f17b84f

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +257 -19
index.html CHANGED
@@ -1,19 +1,257 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Left-Aligned Organizational Change Flowchart</title>
7
+ <script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
8
+ <script>
9
+ mermaid.initialize({ startOnLoad: true, theme: 'forest' });
10
+ </script>
11
+ <style>
12
+ * {
13
+ margin: 0;
14
+ padding: 0;
15
+ box-sizing: border-box;
16
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
17
+ }
18
+
19
+ body {
20
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
21
+ color: #333;
22
+ line-height: 1.6;
23
+ padding: 20px;
24
+ min-height: 100vh;
25
+ }
26
+
27
+ .container {
28
+ max-width: 1400px;
29
+ margin: 0 auto;
30
+ background: white;
31
+ border-radius: 12px;
32
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
33
+ overflow: hidden;
34
+ }
35
+
36
+ header {
37
+ background: #2c3e50;
38
+ color: white;
39
+ padding: 25px;
40
+ text-align: center;
41
+ }
42
+
43
+ h1 {
44
+ font-size: 2.5rem;
45
+ margin-bottom: 10px;
46
+ }
47
+
48
+ .subtitle {
49
+ font-size: 1.2rem;
50
+ opacity: 0.9;
51
+ max-width: 800px;
52
+ margin: 0 auto;
53
+ }
54
+
55
+ .content {
56
+ display: flex;
57
+ flex-direction: column;
58
+ padding: 30px;
59
+ }
60
+
61
+ .description {
62
+ margin-bottom: 30px;
63
+ padding: 20px;
64
+ background: #f8f9fa;
65
+ border-radius: 8px;
66
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
67
+ }
68
+
69
+ .description p {
70
+ margin-bottom: 15px;
71
+ font-size: 1.1rem;
72
+ }
73
+
74
+ .flowchart-container {
75
+ width: 100%;
76
+ overflow: auto;
77
+ background: #f8f9fa;
78
+ border-radius: 8px;
79
+ padding: 20px;
80
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
81
+ }
82
+
83
+ .mermaid {
84
+ width: 100%;
85
+ min-width: 1200px;
86
+ padding: 15px;
87
+ }
88
+
89
+ .legend {
90
+ margin-top: 30px;
91
+ padding: 20px;
92
+ background: #e8f4fc;
93
+ border-radius: 8px;
94
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
95
+ }
96
+
97
+ .legend h3 {
98
+ color: #2c3e50;
99
+ margin-bottom: 15px;
100
+ padding-bottom: 10px;
101
+ border-bottom: 2px solid #3498db;
102
+ }
103
+
104
+ .legend-items {
105
+ display: flex;
106
+ flex-wrap: wrap;
107
+ gap: 15px;
108
+ }
109
+
110
+ .legend-item {
111
+ display: flex;
112
+ align-items: center;
113
+ margin-right: 20px;
114
+ }
115
+
116
+ .color-box {
117
+ width: 20px;
118
+ height: 20px;
119
+ margin-right: 10px;
120
+ border-radius: 4px;
121
+ }
122
+
123
+ footer {
124
+ text-align: center;
125
+ padding: 20px;
126
+ margin-top: 30px;
127
+ color: #7f8c8d;
128
+ font-size: 0.9rem;
129
+ }
130
+
131
+ @media (max-width: 768px) {
132
+ .content {
133
+ padding: 15px;
134
+ }
135
+
136
+ h1 {
137
+ font-size: 2rem;
138
+ }
139
+
140
+ .flowchart-container {
141
+ padding: 10px;
142
+ }
143
+ }
144
+ </style>
145
+ </head>
146
+ <body>
147
+ <div class="container">
148
+ <header>
149
+ <h1>Organizational Change Management Framework</h1>
150
+ <p class="subtitle">A comprehensive visualization of change management concepts and their relationships</p>
151
+ </header>
152
+
153
+ <div class="content">
154
+ <div class="description">
155
+ <p>This flowchart illustrates the key components of organizational change management, starting from the central concept on the left and expanding to show various dimensions including fundamentals, contexts, and interventions.</p>
156
+ <p>Use this diagram to understand the relationships between different aspects of organizational development and change management.</p>
157
+ </div>
158
+
159
+ <div class="flowchart-container">
160
+ <div class="mermaid">
161
+ flowchart LR
162
+ A["Management of Change & OD"] --> B["Fundamentals"]
163
+ A --> C["Organizational Contexts"]
164
+ A --> D["Interventions"]
165
+
166
+ %% Fundamentals branch
167
+ B --> B1["Urgency for Change"]
168
+ B --> B2["Theories & Models"]
169
+ B2 --> B2a["Lewin's 3-Step Model"]
170
+ B2 --> B2b["Kotter's 8-Step Model"]
171
+
172
+ %% Organizational Contexts branch
173
+ C --> C1["Entrepreneurial Firms"]
174
+ C --> C2["Family Businesses"]
175
+ C --> C3["Not-for-Profit Orgs"]
176
+ C --> C4["Educational Institutions"]
177
+
178
+ %% Entrepreneurial Firms details
179
+ C1 --> C1a["Diagnostic Framework"]
180
+ C1a --> C1a1["Business System"]
181
+ C1a --> C1a2["Governance System"]
182
+ C1a --> C1a3["Family System"]
183
+ C1 --> C1b["Life Cycle Stages"]
184
+
185
+ %% Family Business details
186
+ C2 --> C2a["Unique Challenges"]
187
+ C2 --> C2b["Succession Planning"]
188
+ C2b --> C2b1["Setting Ground Rules"]
189
+ C2b --> C2b2["Nurturing Successor"]
190
+ C2b --> C2b3["Selection Process"]
191
+ C2b --> C2b4["Transition Process"]
192
+
193
+ %% NPO details
194
+ C3 --> C3a["Differences from Commercial"]
195
+ C3 --> C3b["OD Process Steps"]
196
+ C3 --> C3c["Major Interventions"]
197
+
198
+ %% Educational Institutions details
199
+ C4 --> C4a["Schools"]
200
+ C4 --> C4b["Higher Education"]
201
+
202
+ %% Interventions branch
203
+ D --> D1["Individual-Level"]
204
+ D --> D2["Team-Level"]
205
+ D --> D3["Organization-Level"]
206
+ D3 --> D3a["Strategic Interventions"]
207
+ D3 --> D3b["Technostructural"]
208
+ D3 --> D3c["Culture Change"]
209
+
210
+ %% Styling
211
+ classDef root fill:#2c3e50,color:white,stroke:#2c3e50,stroke-width:2px
212
+ classDef level1 fill:#3498db,color:white,stroke:#2980b9
213
+ classDef level2 fill:#9b59b6,color:white,stroke:#8e44ad
214
+ classDef level3 fill:#e74c3c,color:white,stroke:#c0392b
215
+ classDef level4 fill:#f39c12,color:white,stroke:#e67e22
216
+
217
+ class A root
218
+ class B,C,D level1
219
+ class B1,B2,C1,C2,C3,C4,D1,D2,D3 level2
220
+ class B2a,B2b,C1a,C1b,C2a,C2b,C3a,C3b,C3c,C4a,C4b,D3a,D3b,D3c level3
221
+ class C1a1,C1a2,C1a3,C2b1,C2b2,C2b3,C2b4 level4
222
+ </div>
223
+ </div>
224
+
225
+ <div class="legend">
226
+ <h3>Flowchart Legend</h3>
227
+ <div class="legend-items">
228
+ <div class="legend-item">
229
+ <div class="color-box" style="background-color: #2c3e50;"></div>
230
+ <span>Root Concept</span>
231
+ </div>
232
+ <div class="legend-item">
233
+ <div class="color-box" style="background-color: #3498db;"></div>
234
+ <span>Primary Categories</span>
235
+ </div>
236
+ <div class="legend-item">
237
+ <div class="color-box" style="background-color: #9b59b6;"></div>
238
+ <span>Secondary Concepts</span>
239
+ </div>
240
+ <div class="legend-item">
241
+ <div class="color-box" style="background-color: #e74c3c;"></div>
242
+ <span>Tertiary Concepts</span>
243
+ </div>
244
+ <div class="legend-item">
245
+ <div class="color-box" style="background-color: #f39c12;"></div>
246
+ <span>Detailed Elements</span>
247
+ </div>
248
+ </div>
249
+ </div>
250
+ </div>
251
+
252
+ <footer>
253
+ <p>Organizational Change Management Framework | Designed for clarity and understanding</p>
254
+ </footer>
255
+ </div>
256
+ </body>
257
+ </html>