User talk:Muse: Difference between revisions

Latest revision as of 01:19, 29 April 2025

Community Relationships

Community

Knowledge

Resilience

Progress Milestones

Level 5	................................................................
Level 4	...
Level 3	...
Level 2	...
Level 1	...

Monthly Data Table
Action	January			February			March			April			May			June			July			August			September			October			November			December
Action	C	K	R	C	K	R	C	K	R	C	K	R	C	K	R	C	K	R	C	K	R	C	K	R	C	K	R	C	K	R	C	K	R	C	K	R
+ Actions	-	-	-	14	12	11	41	20	25	18	15	11	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0
- Actions	-	-	-	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0

@@ Line 1: / Line 1: @@
-<!-- Page Title with Extra Margin -->
+<!-- Page Title -->
 <h2 style="color: white; text-align: left; margin-bottom: 20px; font-size: 24px;">Community Relationships</h2>
-<div style="display: flex; align-items: flex-start; font-family: Arial, sans-serif; background-color: #222; padding: 20px;">
+<div style="display: flex; align-items: flex-start; font-family: Arial, sans-serif; background-color: #222; padding: 20px; flex-wrap: wrap;">
    <!-- Progress Bars Section -->
-   <div style="display: flex; gap: 40px; align-items: flex-start;">
+   <div style="display: flex; gap: 40px; align-items: flex-start; flex-wrap: nowrap;">
+    <!-- Community Bar -->
      <div style="display: flex; flex-direction: column; align-items: center;">
        <div style="font-weight: bold; font-size: 18px; margin-bottom: 10px; color: white;">Community</div>
        <div style="width: 60px; height: 300px; background-color: #f0fffa; border-radius: 20px; position: relative; display: flex; align-items: flex-end;">
          <div style="width: 100%; height: 73%; background-color: #AEE6D0; border-radius: 0 0 20px 20px;"></div>
+        <!-- Markers -->
          <div style="position: absolute; bottom: 20%; width: 100%; height: 3px; background: rgba(0,0,0,0.7);"></div>
          <div style="position: absolute; bottom: 40%; width: 100%; height: 3px; background: rgba(0,0,0,0.7);"></div>
@@ Line 18: / Line 20: @@
      </div>
+    <!-- Knowledge Bar -->
      <div style="display: flex; flex-direction: column; align-items: center;">
        <div style="font-weight: bold; font-size: 18px; margin-bottom: 10px; color: white;">Knowledge</div>
        <div style="width: 60px; height: 300px; background-color: #f0f8ff; border-radius: 20px; position: relative; display: flex; align-items: flex-end;">
          <div style="width: 100%; height: 47%; background-color: #B3D9FF; border-radius: 0 0 20px 20px;"></div>
+        <!-- Markers -->
          <div style="position: absolute; bottom: 20%; width: 100%; height: 3px; background: rgba(0,0,0,0.7);"></div>
          <div style="position: absolute; bottom: 40%; width: 100%; height: 3px; background: rgba(0,0,0,0.7);"></div>
@@ Line 29: / Line 33: @@
      </div>
+    <!-- Resilience Bar -->
      <div style="display: flex; flex-direction: column; align-items: center;">
        <div style="font-weight: bold; font-size: 18px; margin-bottom: 10px; color: white;">Resilience</div>
        <div style="width: 60px; height: 300px; background-color: #f9f0ff; border-radius: 20px; position: relative; display: flex; align-items: flex-end;">
          <div style="width: 100%; height: 47%; background-color: #D6B3FF; border-radius: 0 0 20px 20px;"></div>
+        <!-- Markers -->
          <div style="position: absolute; bottom: 20%; width: 100%; height: 3px; background: rgba(0,0,0,0.7);"></div>
          <div style="position: absolute; bottom: 40%; width: 100%; height: 3px; background: rgba(0,0,0,0.7);"></div>
@@ Line 42: / Line 48: @@
    </div>
-   <!-- Table Section (now properly aligned) -->
+   <!-- Progress Milestones Table -->
    <div style="margin-left: 40px;">
      <div style="font-weight: bold; font-size: 18px; margin-bottom: 10px; color: white; text-align: center;">Progress Milestones</div>
-     <table style="border-collapse: collapse; width: 400px; height: 300px; color: white;">
+     <table style="border-collapse: collapse; width: auto; height: 300px; color: white;">
        <tr style="background-color: #222;">
-         <td style="border: 2px solid #666; padding: 10px;">level 5</td>
+         <td style="border: 2px solid #666; padding: 10px;">Level 5</td>
-         <td style="border: 2px solid #666; padding: 10px;">...</td>
+         <td style="border: 2px solid #666; padding: 10px;">................................................................</td>
        </tr>
        <tr style="background-color: #333;">
@@ Line 70: / Line 77: @@
 </div>
+<!-- Monthly Data Table in scrollable box -->
+<div style="overflow-x: auto; width: 100%; margin-top: 20px;">
+  <div style="min-width: 800px;">
+    {| class="wikitable" style="text-align: center; border-collapse: collapse; color: white; border: 2px solid #666; background-color: #111;"
+    |+ Monthly Data Table
+|-
+! rowspan="2" style="border: 1px solid #666; padding: 8px;" | Action
+! colspan="3" style="border: 1px solid #666;" | January
+! colspan="3" style="border: 1px solid #666;" | February
+! colspan="3" style="border: 1px solid #666;" | March
+! colspan="3" style="border: 1px solid #666;" | April
+! colspan="3" style="border: 1px solid #666;" | May
+! colspan="3" style="border: 1px solid #666;" | June
+! colspan="3" style="border: 1px solid #666;" | July
+! colspan="3" style="border: 1px solid #666;" | August
+! colspan="3" style="border: 1px solid #666;" | September
+! colspan="3" style="border: 1px solid #666;" | October
+! colspan="3" style="border: 1px solid #666;" | November
+! colspan="3" style="border: 1px solid #666;" | December
+|-
+! style="background-color: #AEE6D0; color: black;" | C
+! style="background-color: #B3D9FF; color: black;" | K
+! style="background-color: #D6B3FF; color: black;" | R
+! style="background-color: #AEE6D0; color: black;" | C
+! style="background-color: #B3D9FF; color: black;" | K
+! style="background-color: #D6B3FF; color: black;" | R
+! style="background-color: #AEE6D0; color: black;" | C
+! style="background-color: #B3D9FF; color: black;" | K
+! style="background-color: #D6B3FF; color: black;" | R
+! style="background-color: #AEE6D0; color: black;" | C
+! style="background-color: #B3D9FF; color: black;" | K
+! style="background-color: #D6B3FF; color: black;" | R
+! style="background-color: #AEE6D0; color: black;" | C
+! style="background-color: #B3D9FF; color: black;" | K
+! style="background-color: #D6B3FF; color: black;" | R
+! style="background-color: #AEE6D0; color: black;" | C
+! style="background-color: #B3D9FF; color: black;" | K
+! style="background-color: #D6B3FF; color: black;" | R
+! style="background-color: #AEE6D0; color: black;" | C
+! style="background-color: #B3D9FF; color: black;" | K
+! style="background-color: #D6B3FF; color: black;" | R
+! style="background-color: #AEE6D0; color: black;" | C
+! style="background-color: #B3D9FF; color: black;" | K
+! style="background-color: #D6B3FF; color: black;" | R
+! style="background-color: #AEE6D0; color: black;" | C
+! style="background-color: #B3D9FF; color: black;" | K
+! style="background-color: #D6B3FF; color: black;" | R
+! style="background-color: #AEE6D0; color: black;" | C
+! style="background-color: #B3D9FF; color: black;" | K
+! style="background-color: #D6B3FF; color: black;" | R
+! style="background-color: #AEE6D0; color: black;" | C
+! style="background-color: #B3D9FF; color: black;" | K
+! style="background-color: #D6B3FF; color: black;" | R
+! style="background-color: #AEE6D0; color: black;" | C
+! style="background-color: #B3D9FF; color: black;" | K
+! style="background-color: #D6B3FF; color: black;" | R
+|-
+| + Actions || - || - ||- || 14 || 12 || 11 || 41 || 20 || 25 || 18 || 15 || 11 || 0 || 0 || 0 || 0 || 0 || 0 || 0 || 0 || 0 || 0 || 0 || 0 || 0 || 0 || 0 || 0 || 0 || 0 || 0 || 0 || 0 || 0 || 0 || 0
+|-
+|-
+| - Actions || - || - || - || 0 || 0 || 0 || 0 || 0 || 0 || 0 || 0 || 0 || 0 || 0 || 0 || 0 || 0 || 0 || 0 || 0 || 0 || 0 || 0 || 0 || 0 || 0 || 0 || 0 || 0 || 0 || 0 || 0 || 0 || 0 || 0 || 0
+|}