Test

rtificial · Jul 23, 2024 · e4f5a81 · e4f5a81
1 parent 63a2904
commit e4f5a81
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 14 deletions.
diff --git a/index.html b/index.html
@@ -10,33 +10,33 @@
     <div role="diagram" aria-labelledby="flowchart-title" aria-describedby="flowchart-desc">
         <h2 id="flowchart-title">Project Development Flowchart</h2>
         <p id="flowchart-desc">This flowchart illustrates the main steps in the project development process.</p>
-        <div class="flowchart">
-            <div class="node" role="region" aria-labelledby="node1-title">
+        <div class="flowchart vertical">
+            <div class="node planning" role="region" aria-labelledby="node1-title">
                 <h3 id="node1-title">Planning</h3>
                 <p>Define project scope and objectives</p>
             </div>
             <div class="arrow" aria-hidden="true">↓</div>
-            <div class="node" role="region" aria-labelledby="node2-title">
+            <div class="node design" role="region" aria-labelledby="node2-title">
                 <h3 id="node2-title">Design</h3>
                 <p>Create design specifications</p>
             </div>
             <div class="arrow" aria-hidden="true">↓</div>
-            <div class="node" role="region" aria-labelledby="node3-title">
+            <div class="node development" role="region" aria-labelledby="node3-title">
                 <h3 id="node3-title">Development</h3>
                 <p>Build the project according to specifications</p>
             </div>
             <div class="arrow" aria-hidden="true">↓</div>
-            <div class="node" role="region" aria-labelledby="node4-title">
+            <div class="node testing" role="region" aria-labelledby="node4-title">
                 <h3 id="node4-title">Testing</h3>
                 <p>Test the project and fix bugs</p>
             </div>
             <div class="arrow" aria-hidden="true">↓</div>
-            <div class="node" role="region" aria-labelledby="node5-title">
+            <div class="node deployment" role="region" aria-labelledby="node5-title">
                 <h3 id="node5-title">Deployment</h3>
                 <p>Deploy the project to production</p>
             </div>
             <div class="arrow" aria-hidden="true">↓</div>
-            <div class="node" role="region" aria-labelledby="node6-title">
+            <div class="node maintenance" role="region" aria-labelledby="node6-title">
                 <h3 id="node6-title">Maintenance</h3>
                 <p>Maintain and update the project</p>
             </div>

diff --git a/styles.css b/styles.css
@@ -1,25 +1,51 @@
 body {
     font-family: Arial, sans-serif;
     padding: 20px;
+    background-color: #f0f0f0;
 }
 
 .flowchart {
     display: flex;
     flex-direction: column;
     align-items: center;
+    margin-top: 20px;
+}
+
+.flowchart.vertical .arrow {
+    font-size: 24px;
+    margin: 10px 0;
 }
 
 .node {
-    border: 1px solid #000;
-    border-radius: 5px;
+    border: 2px solid #000;
+    border-radius: 10px;
     padding: 20px;
-    width: 200px;
+    width: 250px;
     text-align: center;
     margin-bottom: 10px;
-    background-color: #f9f9f9;
+    color: #fff;
 }
 
-.arrow {
-    font-size: 24px;
-    margin-bottom: 10px;
+.planning {
+    background-color: #4CAF50; /* Green */
+}
+
+.design {
+    background-color: #2196F3; /* Blue */
+}
+
+.development {
+    background-color: #f44336; /* Red */
+}
+
+.testing {
+    background-color: #ff9800; /* Orange */
+}
+
+.deployment {
+    background-color: #9c27b0; /* Purple */
+}
+
+.maintenance {
+    background-color: #795548; /* Brown */
 }