Merge pull request #19 from Acode-Foundation/fix-home-page-ui

deadlyjack · web-flow · commit bac674b43595 · 2026-02-06T21:56:36.000+05:30
feat(home): enhance UI with new icons and update statistics
diff --git a/.babelrc b/.babelrc
@@ -12,5 +12,5 @@
       }
     ]
   ],
-  "compact": true
+  "compact": false
 }
diff --git a/client/main.view.js b/client/main.view.js
@@ -59,6 +59,12 @@ export default ({ routes }) => (
                 <path d='M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028 14.09 14.09 0 001.226-1.994.076.076 0 00-.041-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.292.074.074 0 01.077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 01.078.01c.12.098.246.198.373.292a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.892.077.077 0 00-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 00.084.028 19.839 19.839 0 006.002-3.03.077.077 0 00.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z' />
               </svg>
             </a>
+            <a href='https://t.me/foxdebug_acode' target='_blank' rel='noreferrer' title='Telegram'>
+              <svg width='20' height='20' viewBox='0 0 100 100' fill='currentColor'>
+                <title>Telegram</title>
+                <path d='M88.723,12.142C76.419,17.238,23.661,39.091,9.084,45.047c-9.776,3.815-4.053,7.392-4.053,7.392    s8.345,2.861,15.499,5.007c7.153,2.146,10.968-0.238,10.968-0.238l33.62-22.652c11.922-8.107,9.061-1.431,6.199,1.431    c-6.199,6.2-16.452,15.975-25.036,23.844c-3.815,3.338-1.908,6.199-0.238,7.63c6.199,5.246,23.129,15.976,24.082,16.691    c5.037,3.566,14.945,8.699,16.452-2.146c0,0,5.961-37.435,5.961-37.435c1.908-12.637,3.815-24.321,4.053-27.659    C97.307,8.804,88.723,12.142,88.723,12.142z' />
+              </svg>
+            </a>
           </div>
         </div>
 
diff --git a/client/pages/home/icons.js b/client/pages/home/icons.js
@@ -0,0 +1,27 @@
+export default {
+  star: (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16' fill='currentColor'>
+      <title>Star Icon</title>
+      <path d='M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Z'></path>
+    </svg>
+  ),
+  github: (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16' fill='currentColor'>
+      <title>GitHub Icon</title>
+      <path d='M6.766 11.695C4.703 11.437 3.25 9.904 3.25 7.92c0-.806.281-1.677.75-2.258-.203-.532-.172-1.662.062-2.129.626-.081 1.469.258 1.969.726.594-.194 1.219-.291 1.985-.291.765 0 1.39.097 1.953.274.484-.451 1.343-.79 1.969-.709.218.435.25 1.564.046 2.113.5.613.766 1.436.766 2.274 0 1.984-1.453 3.485-3.547 3.759.531.355.891 1.129.891 2.016v1.678c0 .484.39.758.859.564C13.781 14.824 16 11.905 16 8.291 16 3.726 12.406 0 7.984 0 3.562 0 0 3.726 0 8.291c0 3.581 2.203 6.55 5.172 7.663A.595.595 0 0 0 6 15.389v-1.291c-.219.097-.5.162-.75.162-1.031 0-1.641-.581-2.078-1.662-.172-.435-.36-.693-.719-.742-.187-.016-.25-.097-.25-.193 0-.194.313-.339.625-.339.453 0 .844.29 1.25.887.313.468.641.678 1.031.678.391 0 .641-.146 1-.516.266-.275.469-.517.657-.678Z'></path>
+    </svg>
+  ),
+  fork: (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16' fill='currentColor'>
+      <title>Fork Icon</title>
+      <path d='M9.5 3.25a2.25 2.25 0 1 1 3 2.122V6A2.5 2.5 0 0 1 10 8.5H6a1 1 0 0 0-1 1v1.128a2.251 2.251 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.5 0v1.836A2.493 2.493 0 0 1 6 7h4a1 1 0 0 0 1-1v-.628A2.25 2.25 0 0 1 9.5 3.25Zm-6 0a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Zm8.25-.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z'></path>
+    </svg>
+  ),
+  download: (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16' fill='currentColor'>
+      <title>Download Icon</title>
+      <path d='M2.75 14A1.75 1.75 0 0 1 1 12.25v-2.5a.75.75 0 0 1 1.5 0v2.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25v-2.5a.75.75 0 0 1 1.5 0v2.5A1.75 1.75 0 0 1 13.25 14Z'></path>
+      <path d='M7.25 7.689V2a.75.75 0 0 1 1.5 0v5.689l1.97-1.969a.749.749 0 1 1 1.06 1.06l-3.25 3.25a.749.749 0 0 1-1.06 0L4.22 6.78a.749.749 0 1 1 1.06-1.06l1.97 1.969Z'></path>
+    </svg>
+  ),
+};
diff --git a/client/pages/home/index.js b/client/pages/home/index.js
@@ -8,6 +8,7 @@ import phoneImageJpg from 'res/phone.jpg';
 import phoneImageWebp from 'res/phone.webp';
 import tabletImageJpg from 'res/tablet.jpg';
 import tabletImageWebp from 'res/tablet.webp';
+import icons from './icons';
 
 export default async function home() {
   const canvas = Ref();
@@ -24,8 +25,8 @@ export default async function home() {
       forks.value = data.forks_count.toLocaleString();
     })
     .catch(() => {
-      stars.value = '1.2k+';
-      forks.value = '200+';
+      stars.value = '4k+';
+      forks.value = '700+';
     });
 
   let plugins = [];
@@ -58,10 +59,6 @@ export default async function home() {
         </div>
         <div className='heading'>
           <p>An extensible, powerful and open-source code editor for Android</p>
-          <div className='stat-badge'>
-            <span className='stat-number'>1M+</span>
-            <span className='stat-label'>downloads</span>
-          </div>
           <div className='download-buttons'>
             <a
               title='Download from Google Play'
@@ -70,10 +67,7 @@ export default async function home() {
               target='_blank'
               rel='noopener'
             >
-              <svg width='18' height='18' viewBox='0 0 24 24' fill='currentColor'>
-                <title>Google Play</title>
-                <path d='M3,20.5V3.5C3,2.91 3.34,2.39 3.84,2.15L13.69,12L3.84,21.85C3.34,21.6 3,21.09 3,20.5M16.81,15.12L6.05,21.34L14.54,12.85L16.81,15.12M20.16,10.81C20.5,11.08 20.75,11.5 20.75,12C20.75,12.5 20.53,12.9 20.18,13.18L17.89,14.5L15.39,12L17.89,9.5L20.16,10.81M6.05,2.66L16.81,8.88L14.54,11.15L6.05,2.66Z' />
-              </svg>
+              <span className='icon googleplay'></span>
               <span>Google Play</span>
             </a>
             <a
@@ -83,16 +77,14 @@ export default async function home() {
               target='_blank'
               rel='noopener'
             >
-              <svg width='18' height='18' viewBox='0 0 24 24' fill='currentColor'>
-                <title>F-Droid</title>
-                <path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z' />
-              </svg>
+              <span className='icon f-droid'></span>
               <span>F-Droid</span>
             </a>
           </div>
           <div className='gh-buttons'>
-            <GhButton count={stars} url='https://github.com/acode-foundation/acode' title='Star' />
-            <GhButton count={forks} url='https://github.com/acode-foundation/acode/fork' title='Fork' />
+            <GhButton count='5m+' url='https://github.com/acode-foundation/acode/releases' title='Downloads' icon='download' />
+            <GhButton count={stars} url='https://github.com/acode-foundation/acode' title='Stars' icon='star' />
+            <GhButton count={forks} url='https://github.com/acode-foundation/acode/fork' title='Forks' icon='fork' />
           </div>
         </div>
       </div>
@@ -110,14 +102,20 @@ export default async function home() {
   );
 }
 
-function GhButton({ url, title, count }) {
+/**
+ * GitHub button component to display stars, forks, and downloads.
+ * @param {object} props
+ * @param {string} props.url
+ * @param {string} props.title
+ * @param {string} props.count
+ * @param {'github'|'fork'|'download'|'star'} [props.icon]
+ * @returns
+ */
+async function GhButton({ url, title, count, icon = 'github' }) {
   return (
     <a href={url} className='gh-button-modern' target='_blank' rel='noopener'>
       <div className='gh-button-main'>
-        <svg viewBox='0 0 16 16' width='14' height='14' fill='currentColor'>
-          <title>GitHub</title>
-          <path d='M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 01-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 010 8c0-4.42 3.58-8 8-8Z' />
-        </svg>
+        {icons[icon] ?? <span className={`icon ${icon}`} />}
         <span>{title}</span>
       </div>
       <div className='gh-button-count'>{count}</div>
diff --git a/client/pages/home/style.scss b/client/pages/home/style.scss
@@ -67,7 +67,6 @@
 
   .intro {
     display: flex;
-    flex-wrap: wrap-reverse;
     justify-content: space-between;
     width: 100%;
     min-height: 500px;
@@ -125,7 +124,7 @@
       flex-direction: column;
       align-items: flex-start;
 
-      > p {
+      >p {
         font-family: 'Lexend', sans-serif;
         font-size: clamp(1.8rem, 5vw, 3rem);
         line-height: 1.1;
@@ -165,6 +164,7 @@
 
       .gh-buttons {
         display: flex;
+        flex-wrap: wrap;
         gap: 12px;
         align-items: center;
         margin-bottom: 0;
@@ -295,7 +295,7 @@
         align-items: center;
         text-align: center;
 
-        > p {
+        >p {
           font-size: clamp(1.6rem, 8vw, 2.2rem);
         }
 
@@ -315,7 +315,7 @@
       .heading {
         padding: 0 10px;
 
-        > p {
+        >p {
           font-size: 1.5rem;
         }
 
@@ -422,11 +422,9 @@
           left: 0;
           right: 0;
           bottom: 0;
-          background: radial-gradient(
-            circle at top right,
-            rgba(0, 212, 255, 0.1),
-            transparent 70%
-          );
+          background: radial-gradient(circle at top right,
+              rgba(0, 212, 255, 0.1),
+              transparent 70%);
           opacity: 0;
           transition: opacity 0.4s ease;
         }
@@ -483,4 +481,4 @@
     margin-top: 40px;
     padding: 0;
   }
-}
+}

Original file line number	Diff line number	Diff line change
`@@ -12,5 +12,5 @@`
`12`	`12`	`}`
`13`	`13`	`]`
`14`	`14`	`],`
`15`		`- "compact": true`
	`15`	`+ "compact": false`
`16`	`16`	`}`