From ce4bb992b7e8e853d1905d9b4fbb1b7ad76dacec Mon Sep 17 00:00:00 2001 From: HGZdevi Date: Fri, 15 Nov 2024 22:36:34 +0100 Subject: [PATCH] Navbar: icons init + manual page removed --- src/client/Components/Navbar.tsx | 22 +++---- src/client/Pages/Public/About.tsx | 94 +++++++++++++++++++++++++++- src/client/Pages/Public/Manual.tsx | 98 ------------------------------ src/client/Root.tsx | 2 - 4 files changed, 104 insertions(+), 112 deletions(-) delete mode 100644 src/client/Pages/Public/Manual.tsx diff --git a/src/client/Components/Navbar.tsx b/src/client/Components/Navbar.tsx index 41e2592..547d189 100644 --- a/src/client/Components/Navbar.tsx +++ b/src/client/Components/Navbar.tsx @@ -3,6 +3,8 @@ import {FiMenu} from "react-icons/fi"; import {useNavigate, useLocation} from "react-router-dom"; import {NavButton} from "./Buttons"; import Logo from "./Logo"; +import {MdAutoStories, MdGridOn} from "react-icons/md"; +import {BsPencilSquare} from "react-icons/bs"; const {VITE_BASE_URL, VITE_HASH_ROUTER} = import.meta.env; const BASE_URL = VITE_HASH_ROUTER ? "" : VITE_BASE_URL; @@ -31,32 +33,30 @@ const Navbar: React.FC<{ navigate(`${BASE_URL}/editor`)} className={isActive("/editor") ? "text-primary" : ""} + title="Editor" > - Editor + + Editor
  • navigate(`${BASE_URL}/templates`)} className={isActive("/templates") ? "text-primary" : ""} + title="Templates" > - Templates - -
    • -
  • - navigate(`${BASE_URL}/manual`)} - className={isActive("/manual") ? "text-primary" : ""} - > - Manual + + Templates
  • navigate(`${BASE_URL}/about`)} className={isActive("/about") ? "text-primary" : ""} + title="About" > - About + + About
    • diff --git a/src/client/Pages/Public/About.tsx b/src/client/Pages/Public/About.tsx index e83fe37..73ad0a6 100644 --- a/src/client/Pages/Public/About.tsx +++ b/src/client/Pages/Public/About.tsx @@ -1,6 +1,6 @@ import PageFrame from "../../Components/PageFrame"; -const Main = () => { +const Manual = () => { return (
    @@ -154,6 +154,98 @@ const Main = () => { ); }; +const Main = () => { + return ( +
    +
    +

    + Keep Calm and Weave the Belt! +

    +

    + Welcome to the most user-friendly tablet weaving pattern creation tool + on the web! Whether you're an experienced weaver or just starting out + 🌱, our platform makes it easier than ever to design your own unique + weaving patterns. While there are many tools out there, ours stands + out for its simplicity and intuitive interface. +

    +

    + 🧡 What is Tablet Weaving? +

    +

    + Tablet weaving is an ancient and versatile textile technique used to + produce strong and decorative bands, straps, and trims. By using small + cards to manipulate warp threads, weavers can create anything from + simple stripes to complex, beautiful patterns. Read more below πŸ‘©β€πŸ’». +

    +

    + πŸ” What Makes Our Tool Different? +

    +

    + We know there are plenty of tablet weaving pattern generators out + there, but our tool is designed with usability in mind 🎯. Here’s why + it's one of the most handy options you'll find: +

    +
      +
    • + User-Friendly Interface: No complicated setup or + learning curve. Our tool is built to be intuitive, so you can focus + on designing without getting stuck on technical details. +
      • +
    • + Real-Time Pattern Visualization: See your pattern + evolve as you make changes. Every adjustment in threading or tablet + turns is instantly reflected in the preview, helping you experiment + easily. +
      • +
    • + Fully Customizable: From selecting the number of + tablets to choosing thread colors and rotation sequences, you have + total control to create a pattern that’s uniquely yours ✨. +
      • +
    • + Quick and Easy Export/Import: Once your design is + complete, download a draft so you can keep it saved as long as you + can and bring your vision to life πŸŽ‰. +
      • +
    +

    βš™οΈ How It Works

    +
      +
    • + Set Up Your Project: Choose your warp threads, + tablet numbers, and colors to begin 🎨. +
      • +
    • + Design With Ease: Adjust threading and tablet + rotations in our easy-to-navigate interface. No need to be a tech + expert πŸ§‘β€πŸ’» β€” we’ve made it straightforward and fun! πŸŽ‰ +
      • +
    • + Download: When you're happy with your design, + download the draft in just one click πŸ–±οΈ. You can always go back to + your work by uploading from your disc. +
      • +
    +

    🌟 Why Choose Us?

    +

    + Out of all the tools available, ours combines ease-of-use with the + flexibility and features you need to create complex, beautiful + patterns 🎨. Whether you're designing a simple band or an intricate + masterpiece, our tool helps you achieve it quickly and with minimal + hassle πŸ§‘β€πŸŽ¨. +

    +

    πŸŽ‰ Get Started Now

    +

    + Ready to dive into the world of tablet weaving? Our handy tool will + help you create unique patterns in no time ⏳. Try it out today and + see why it's one of the best and most user-friendly tablet weaving + tools online! πŸ’‘ +

    +
    + +
    + ); +}; + const About = () => { return ; }; diff --git a/src/client/Pages/Public/Manual.tsx b/src/client/Pages/Public/Manual.tsx deleted file mode 100644 index 6ff8a66..0000000 --- a/src/client/Pages/Public/Manual.tsx +++ /dev/null @@ -1,98 +0,0 @@ -import PageFrame from "../../Components/PageFrame"; - -const Main = () => { - return ( -
    -
    -

    - Keep Calm and Weave the Belt! -

    -

    - Welcome to the most user-friendly tablet weaving pattern creation tool - on the web! Whether you're an experienced weaver or just starting out - 🌱, our platform makes it easier than ever to design your own unique - weaving patterns. While there are many tools out there, ours stands - out for its simplicity and intuitive interface. -

    -

    - 🧡 What is Tablet Weaving? -

    -

    - Tablet weaving is an ancient and versatile textile technique used to - produce strong and decorative bands, straps, and trims. By using small - cards to manipulate warp threads, weavers can create anything from - simple stripes to complex, beautiful patterns 🌟. -

    -

    - πŸ” What Makes Our Tool Different? -

    -

    - We know there are plenty of tablet weaving pattern generators out - there, but our tool is designed with usability in mind 🎯. Here’s why - it's one of the most handy options you'll find: -

    -
      -
    • - User-Friendly Interface: No complicated setup or - learning curve. Our tool is built to be intuitive, so you can focus - on designing without getting stuck on technical details. -
      • -
    • - Real-Time Pattern Visualization: See your pattern - evolve as you make changes. Every adjustment in threading or tablet - turns is instantly reflected in the preview, helping you experiment - easily. -
      • -
    • - Fully Customizable: From selecting the number of - tablets to choosing thread colors and rotation sequences, you have - total control to create a pattern that’s uniquely yours ✨. -
      • -
    • - Quick and Easy Export/Import: Once your design is - complete, download a draft so you can keep it saved as long as you - can and bring your vision to life πŸŽ‰. -
      • -
    -

    βš™οΈ How It Works

    -
      -
    • - Set Up Your Project: Choose your warp threads, - tablet numbers, and colors to begin 🎨. -
      • -
    • - Design With Ease: Adjust threading and tablet - rotations in our easy-to-navigate interface. No need to be a tech - expert πŸ§‘β€πŸ’» β€” we’ve made it straightforward and fun! πŸŽ‰ -
      • -
    • - Download: When you're happy with your design, - download the draft in just one click πŸ–±οΈ. You can always go back to - your work by uploading from your disc. -
      • -
    -

    🌟 Why Choose Us?

    -

    - Out of all the tools available, ours combines ease-of-use with the - flexibility and features you need to create complex, beautiful - patterns 🎨. Whether you're designing a simple band or an intricate - masterpiece, our tool helps you achieve it quickly and with minimal - hassle πŸ§‘β€πŸŽ¨. -

    -

    πŸŽ‰ Get Started Now

    -

    - Ready to dive into the world of tablet weaving? Our handy tool will - help you create unique patterns in no time ⏳. Try it out today and - see why it's one of the best and most user-friendly tablet weaving - tools online! πŸ’‘ -

    -
    -
    - ); -}; - -const Manual = () => { - return ; -}; - -export default Manual; diff --git a/src/client/Root.tsx b/src/client/Root.tsx index 616a60c..835ea71 100644 --- a/src/client/Root.tsx +++ b/src/client/Root.tsx @@ -13,7 +13,6 @@ import GlobalStyles from "../styles/GlobalStyles.ts"; import Editor from "./Pages/Public/Editor/Editor.tsx"; import {DraftProvider} from "./Pages/Public/Editor/DraftContext/DraftContextProvider.tsx"; import About from "./Pages/Public/About.tsx"; -import Manual from "./Pages/Public/Manual.tsx"; import Templates from "./Pages/Public/Templates.tsx"; import Metadata from "./Components/Metadata.tsx"; import ScrollToTopRoute from "./Components/ScrollToTopRoute.tsx"; @@ -34,7 +33,6 @@ export const RoutesConfig = ( } /> } /> } /> - } /> } />