From 570e304426cdc53f7d207eb291bbc8382dd9bd41 Mon Sep 17 00:00:00 2001 From: Ali Irani Date: Wed, 14 May 2025 18:57:33 +0330 Subject: [PATCH] Refactor UI components to use custom semantic theme colors and improve styling consistency - Added custom semantic theme colors in globals.css for better theming. - Updated various components across the application to utilize the new theme colors for backgrounds, text, and buttons. - Ensured consistent styling in the APT, F-Droid, and Scoop repository pages, enhancing readability and visual appeal. --- app/apt-repository/page.tsx | 202 ++++++++++++++++++++------------- app/fdroid-repository/page.tsx | 177 ++++++++++++++++++++--------- app/globals.css | 14 +++ app/page.tsx | 109 ++++++++---------- app/scoop-repository/page.tsx | 168 ++++++++++++++++----------- 5 files changed, 407 insertions(+), 263 deletions(-) diff --git a/app/apt-repository/page.tsx b/app/apt-repository/page.tsx index 1cfd9dc..01cbfb3 100644 --- a/app/apt-repository/page.tsx +++ b/app/apt-repository/page.tsx @@ -1,48 +1,59 @@ -import { Button } from "@/components/ui/button" -import Link from "next/link" -import { DiUbuntu, DiGithubBadge } from "react-icons/di" -import { FiDownload, FiRefreshCw, FiPlus, FiDownloadCloud } from "react-icons/fi" -import { CopyButton } from "../../components/ui/copy-button" +import { Button } from "@/components/ui/button"; +import Link from "next/link"; +import { DiUbuntu, DiGithubBadge } from "react-icons/di"; +import { + FiDownload, + FiRefreshCw, + FiPlus, + FiDownloadCloud, +} from "react-icons/fi"; +import { CopyButton } from "../../components/ui/copy-button"; export default function APTRepositoryPage() { return ( -
+
{/* Enchanted forest decorative elements */}
- {/* Vine-like borders */} -
-
-
-
-
-
-
+ {/* Vine-like borders */} +
+
+
+
+
+
+
+
-
-

- noql.net -

- +

+ noql.net +

+
- -

+ +

noql.net APT Repository

- -

- A curated Debian/Ubuntu APT repository containing cutting-edge tools designed to help users bypass internet censorship and protect digital freedom. + +

+ A curated Debian/Ubuntu APT repository containing cutting-edge tools + designed to help users bypass internet censorship and protect + digital freedom.

-

Repository Features

-
    +

    + Repository Features +

    +
    • Comprehensive collection of censorship circumvention tools
      • -
    • Regularly updated with the latest anti-censorship technologies
      • +
    • + Regularly updated with the latest anti-censorship technologies +
    • Easy installation via standard APT package management
    • Available on x86_64 and arm64 architectures
    • Statically linked binaries for maximum compatibility
      • @@ -50,75 +61,104 @@ export default function APTRepositoryPage() {
-

Installation Guide

-
    -
  1. -
    - -
    -
    -

    Step 1: Install ca-certificates

    -
    - sudo apt install ca-certificates - +

    + Installation Guide +

    +
      +
    1. +
      + +
      +
      +

      + Step 1: Install ca-certificates +

      +
      + + sudo apt install ca-certificates + + +
      +
      +
      2. +
    2. +
      + +
      +
      +

      + Step 2: Add Repository +

      +
      + + echo "deb [trusted=yes] https://apt.noql.net/all all main" | + sudo tee /etc/apt/sources.list.d/noql.list + + +
      +
      +
      3. +
    3. +
      +
      -
    -
    2. -
  2. -
    - -
    -
    -

    Step 2: Add Repository

    -
    - echo "deb [trusted=yes] https://apt.noql.net/all all main" | sudo tee /etc/apt/sources.list.d/noql.list - +
    +

    + Step 3: Update Package Lists +

    +
    + + sudo apt update + + +
    -
    -
    3. -
  3. -
    - -
    -
    -

    Step 3: Update Package Lists

    -
    - sudo apt update - +
    4. +
  4. +
    +
    -
- -
  • -
    - -
    -
    -

    Step 4: Install Package

    -
    - sudo apt install v2ray-core - +
    +

    + Step 4: Install Package +

    +
    + + sudo apt install v2ray-core + + +
    -
    -
    • +
    -
    -
    - © {new Date().getFullYear()} Mark Pashmfouroush. Made for Iranians, useful for everyone. +
    + © {new Date().getFullYear()} Mark Pashmfouroush. Made for Iranians, + useful for everyone.
    - ) + ); } diff --git a/app/fdroid-repository/page.tsx b/app/fdroid-repository/page.tsx index e2e759f..9db04d3 100644 --- a/app/fdroid-repository/page.tsx +++ b/app/fdroid-repository/page.tsx @@ -1,46 +1,56 @@ -import { Button } from "@/components/ui/button" -import Link from "next/link" -import { DiAndroid, DiGithubBadge } from "react-icons/di" -import { FiDownload, FiGlobe, FiPlus, FiRefreshCw, FiSearch, FiDownloadCloud } from 'react-icons/fi'; -import { CopyButton } from "../../components/ui/copy-button" +import Link from "next/link"; +import { DiAndroid } from "react-icons/di"; +import { + FiDownload, + FiGlobe, + FiPlus, + FiRefreshCw, + FiSearch, + FiDownloadCloud, +} from "react-icons/fi"; +import { CopyButton } from "../../components/ui/copy-button"; export default function FDroidRepositoryPage() { return ( -
    +
    {/* Enchanted forest decorative elements */}
    - {/* Vine-like borders */} -
    -
    -
    -
    -
    -
    -
    + {/* Vine-like borders */} +
    +
    +
    +
    +
    +
    +
    +
    -
    -

    - noql.net -

    - +

    + noql.net +

    +
    - -

    + +

    noql.net F-Droid Repository

    - -

    - A curated F-Droid repository containing various Android apps designed to help users bypass internet censorship and protect digital freedom. + +

    + A curated F-Droid repository containing various Android apps + designed to help users bypass internet censorship and protect + digital freedom.

    -

    Repository Features

    -
      +

      + Repository Features +

      +
      • Comprehensive collection of censorship circumvention apps
      • Regularly updated with the newest apps
      • Easy one-tap installation via F-Droid or Droidify
        • @@ -48,77 +58,133 @@ export default function FDroidRepositoryPage() {
    -

    Installation Guide

    -
      +

      + Installation Guide +

      +
      1. -

        Step 1: Install F-Droid

        -

        Install F-Droid or Droidify on your Android device

        +

        + Step 1: Install F-Droid +

        +

        + Install{" "} + + F-Droid + {" "} + or{" "} + + Droidify + {" "} + on your Android device +

        2. - +
      2. -

        Step 2: Access Repository

        +

        + Step 2: Access Repository +

        Open this site in a browser on your Android device

        3. - +
      3. -

        Step 3: Add Repository

        -

        Tap on this link to add the noql.net repository to F-Droid or Droidify

        -

        Or manually add the repository by copying the information below and pasting it into the repository manager

        +

        + Step 3: Add Repository +

        +

        + Tap on{" "} + + this link + {" "} + to add the noql.net repository to F-Droid or Droidify +

        +

        + Or manually add the repository by copying the information + below and pasting it into the repository manager +

        - https://fdroid.noql.net - + + https://fdroid.noql.net + +
        - 0C00898126DF6E2BAAE76ED58D0269B8FBB42FE3DE4B3627DF28ED27CC5E7A02 - + + 0C00898126DF6E2BAAE76ED58D0269B8FBB42FE3DE4B3627DF28ED27CC5E7A02 + +
        4. - +
      4. -

        Step 4: Refresh Repositories

        -

        Open F-Droid or Droidify and refresh the repositories list

        +

        + Step 4: Refresh Repositories +

        +

        + Open F-Droid or Droidify and refresh the repositories list +

        5. - +
      5. -

        Step 5: Find Applications

        -

        Search for the app you want to install from the noql.net repository

        +

        + Step 5: Find Applications +

        +

        + Search for the app you want to install from the noql.net + repository +

        6. - +
      6. -

        Step 6: Install App

        +

        + Step 6: Install App +

        Tap on the app to install it and enjoy

        7. @@ -126,9 +192,10 @@ export default function FDroidRepositoryPage() {
    -
    - © {new Date().getFullYear()} Mark Pashmfouroush. Made for Iranians, useful for everyone. +
    + © {new Date().getFullYear()} Mark Pashmfouroush. Made for Iranians, + useful for everyone.
    - ) + ); } diff --git a/app/globals.css b/app/globals.css index ac68442..21b8d27 100755 --- a/app/globals.css +++ b/app/globals.css @@ -47,6 +47,20 @@ body { --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; + /* Custom semantic theme colors */ + --color-bg: #0b1f0b; + --color-foreground: #fafafa; + --color-heading: #fffacd; + --color-subheading: #e0ffe0; + --color-accent: #b2ffb2; + --color-button-bg: #14532d; + --color-button-bg-hover: #166534; + --color-button-border: #166534; + --color-button-border-hover: #fde047; + --color-button-text: #fafafa; + --color-button-text-hover: #fffacd; + --color-icon: #fffacd; + --color-footer: #b2ffb2; } .dark { --background: 0 0% 3.9%; diff --git a/app/page.tsx b/app/page.tsx index bf85bfe..71e0477 100755 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,24 +1,24 @@ -"use client" +"use client"; -import { DiAndroid, DiWindows, DiUbuntu, DiGithubBadge } from "react-icons/di" -import { Button } from "@/components/ui/button" -import { useEffect, useState } from "react" -import Link from "next/link" +import { DiAndroid, DiWindows, DiUbuntu, DiGithubBadge } from "react-icons/di"; +import { Button } from "@/components/ui/button"; +import { useEffect, useState } from "react"; +import Link from "next/link"; export default function Home() { - const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }) + const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }); useEffect(() => { const handleMouseMove = (e: MouseEvent) => { - setMousePosition({ x: e.clientX, y: e.clientY }) - } + setMousePosition({ x: e.clientX, y: e.clientY }); + }; - window.addEventListener("mousemove", handleMouseMove) - return () => window.removeEventListener("mousemove", handleMouseMove) - }, []) + window.addEventListener("mousemove", handleMouseMove); + return () => window.removeEventListener("mousemove", handleMouseMove); + }, []); return ( -
    +
    {/* Magical forest mist effect */}
    -
    -

    +

    noql.net

    -

    Censorship Circumvention Tools and Resources

    +

    + Censorship Circumvention Tools and Resources +

    {/*

    From Years of Research & Development: Solving Open Internet Challenges in Heavily Censored Regions.

    */}
    - - + - +
    - - - + + +
    -
    - © {new Date().getFullYear()} Mark Pashmfouroush. Made for Iranians, useful for everyone. +
    + © {new Date().getFullYear()} Mark Pashmfouroush. Made for Iranians, + useful for everyone.
    - ) + ); } diff --git a/app/scoop-repository/page.tsx b/app/scoop-repository/page.tsx index 08715c8..0dd609b 100644 --- a/app/scoop-repository/page.tsx +++ b/app/scoop-repository/page.tsx @@ -1,107 +1,139 @@ -import { Button } from "@/components/ui/button" -import Link from "next/link" -import { DiWindows, DiGithubBadge } from "react-icons/di" -import { FiDownload, FiRefreshCw, FiPlus, FiDownloadCloud } from "react-icons/fi" -import { CopyButton } from "../../components/ui/copy-button" +import { Button } from "@/components/ui/button"; +import Link from "next/link"; +import { DiWindows, DiGithubBadge } from "react-icons/di"; +import { FiDownload, FiPlus, FiDownloadCloud } from "react-icons/fi"; +import { CopyButton } from "../../components/ui/copy-button"; export default function ScoopRepositoryPage() { return ( -
    +
    {/* Enchanted forest decorative elements */}
    - {/* Vine-like borders */} -
    -
    -
    -
    -
    -
    -
    + {/* Vine-like borders */} +
    +
    +
    +
    +
    +
    +
    +
    -
    -

    - noql.net -

    - +

    + noql.net +

    +
    - -

    + +

    noql.net Scoop Repository

    - -

    - A curated Windows Scoop repository containing cutting-edge tools designed to help users bypass internet censorship and protect digital freedom. + +

    + A curated Windows Scoop repository containing cutting-edge tools + designed to help users bypass internet censorship and protect + digital freedom.

    -

    Repository Features

    -
      +

      + Repository Features +

      +
      • Comprehensive collection of censorship circumvention tools
        • -
      • Regularly updated with the latest anti-censorship technologies
        • +
      • + Regularly updated with the latest anti-censorship technologies +
      • Easy installation via standard Scoop package management
    -

    Installation Guide

    -
      -
    1. -
      - -
      -
      -

      Step 1: Install Scoop

      -

      Install Scoop on your Windows device

      -
      -
      2. -
    2. -
      - -
      -
      -

      Step 2: Add Repository

      -
      - scoop bucket add noql https://github.com/noql-net/scoop - +

      + Installation Guide +

      +
        +
      1. +
        + +
        +
        +

        + Step 1: Install Scoop +

        +

        + Install{" "} + + Scoop + {" "} + on your Windows device +

        +
        +
        2. +
      2. +
        + +
        +
        +

        + Step 2: Add Repository +

        +
        + + scoop bucket add noql https://github.com/noql-net/scoop + + +
        +
        +
        3. +
      3. +
        +
        -
      -
      3. -
    3. -
      - -
      -
      -

      Step 3: Install Package

      -
      - scoop install noql/v2ray-core - +
      +

      + Step 3: Install Package +

      +
      + + scoop install noql/v2ray-core + + +
      -
      -
      4. +
    -
    -
    - ) + ); }