Improved over all ser experience

package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@vueuse/core": "^11.1.0",
     "pinia": "^2.2.4",
+    "pinyin-pro": "^3.25.0",
     "vue": "^3.5.12",
     "vue-router": "^4.4.5"
   },

src/App.vue

@@ -20,13 +20,17 @@ import Footer from './components/Footer.vue'
   min-height: 100vh;
   display: flex;
   flex-direction: column;
+  align-items: center; /* Center children horizontally */
 }
 
 .main-content {
-  flex: 1;
-  padding: 20px;
+  flex: 1; /* Uncomment this to make it take available vertical space */
+  display: flex;
+  justify-content: center; /* Center content horizontally */
+  align-items: center; /* Center content vertically */
+  width: 100%;
   max-width: 1200px;
+  padding: 20px;
   margin: 0 auto;
-  width: 100%;
 }
 </style>

src/assets/base.css

@@ -0,0 +1,159 @@
+/* Import Google Handwriting Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Homemade+Apple&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Reenie+Beanie&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap');
+
+:root {
+  /* Casual Handwriting */
+  --handwriting-casual: 'Caveat', cursive;
+  --handwriting-notes: 'Kalam', cursive;
+  --handwriting-personal: 'Shadows Into Light', cursive;
+  --handwriting-friendly: 'Indie Flower', cursive;
+
+  /* Formal/Elegant Handwriting */
+  --handwriting-elegant: 'Dancing Script', cursive;
+  --handwriting-fancy: 'Satisfy', cursive;
+  --handwriting-neat: 'Homemade Apple', cursive;
+
+  /* Special Styles */
+  --handwriting-marker: 'Permanent Marker', cursive;
+  --handwriting-child: 'Patrick Hand', cursive;
+  --handwriting-messy: 'Reenie Beanie', cursive;
+}
+
+/* Font Weight Variables */
+:root {
+  --hw-light: 300;
+  --hw-regular: 400;
+  --hw-medium: 500;
+  --hw-semibold: 600;
+  --hw-bold: 700;
+}
+
+/* Utility Classes for Different Handwriting Styles */
+.handwriting-casual {
+  font-family: var(--handwriting-casual);
+  font-weight: var(--hw-regular);
+  line-height: 1.6;
+  letter-spacing: 0.5px;
+}
+
+.handwriting-notes {
+  font-family: var(--handwriting-notes);
+  font-weight: var(--hw-regular);
+  line-height: 1.5;
+  letter-spacing: 0.3px;
+}
+
+.handwriting-personal {
+  font-family: var(--handwriting-personal);
+  line-height: 1.6;
+  letter-spacing: 0.8px;
+}
+
+.handwriting-friendly {
+  font-family: var(--handwriting-friendly);
+  font-weight: var(--hw-bold);
+  line-height: 1.5;
+  letter-spacing: 0.5px;
+}
+
+.handwriting-elegant {
+  font-family: var(--handwriting-elegant);
+  font-weight: var(--hw-regular);
+  line-height: 1.6;
+  letter-spacing: 0.5px;
+}
+
+.handwriting-fancy {
+  font-family: var(--handwriting-fancy);
+  line-height: 1.4;
+  letter-spacing: 0.3px;
+}
+
+.handwriting-neat {
+  font-family: var(--handwriting-neat);
+  line-height: 1.8;
+  letter-spacing: 0.2px;
+}
+
+.handwriting-marker {
+  font-family: var(--handwriting-marker);
+  line-height: 1.4;
+  letter-spacing: 1px;
+}
+
+.handwriting-child {
+  font-family: var(--handwriting-child);
+  line-height: 1.5;
+  letter-spacing: 0.5px;
+}
+
+.handwriting-messy {
+  font-family: var(--handwriting-messy);
+  line-height: 1.6;
+  letter-spacing: 0.8px;
+}
+
+/* Size Variants */
+.hw-text-sm {
+  font-size: 1rem;
+}
+
+.hw-text-md {
+  font-size: 1.25rem;
+}
+
+.hw-text-lg {
+  font-size: 1.5rem;
+}
+
+.hw-text-xl {
+  font-size: 2rem;
+}
+
+/* Optional: Add some ink-like effects */
+.ink-effect {
+  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
+}
+
+/* Optional: Add paper texture background */
+.paper-bg {
+  background-color: #fff;
+  background-image: linear-gradient(
+    0deg,
+    transparent 24%,
+    rgba(0, 0, 0, 0.05) 25%,
+    rgba(0, 0, 0, 0.05) 26%,
+    transparent 27%,
+    transparent 74%,
+    rgba(0, 0, 0, 0.05) 75%,
+    rgba(0, 0, 0, 0.05) 76%,
+    transparent 77%,
+    transparent
+  );
+  background-size: 50px 50px;
+}
+
+/* Responsive adjustments */
+@media screen and (max-width: 768px) {
+  .hw-text-sm {
+    font-size: 0.875rem;
+  }
+  .hw-text-md {
+    font-size: 1.125rem;
+  }
+  .hw-text-lg {
+    font-size: 1.25rem;
+  }
+  .hw-text-xl {
+    font-size: 1.75rem;
+  }
+}

src/assets/main.css

@@ -1,7 +1,11 @@
 @import './base.css';
 
+html,
+body {
+  font-family: var(--handwriting-friendly);
+}
 #app {
-  max-width: 1280px;
+  /* max-width: 1280px; */
   margin: 0 auto;
   padding: 2rem;
   font-weight: normal;
@@ -20,16 +24,3 @@ a,
     background-color: hsla(160, 100%, 37%, 0.2);
   }
 }
-
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
-}

src/components/Footer.vue

@@ -56,6 +56,7 @@ const currentYear = computed(() => new Date().getFullYear())
 }
 
 .footer-container {
+  width: 1000px;
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 1rem;

src/components/Header.vue

@@ -1,7 +1,7 @@
 <template>
   <header class="header">
     <nav class="nav-container">
-      <RouterLink to="/" class="logo"> Chinese Writing Assistant </RouterLink>
+      <RouterLink to="/" class="logo"> Writing Assistant </RouterLink>
       <div class="nav-links">
         <RouterLink to="/" class="nav-link">Home</RouterLink>
         <RouterLink to="/about" class="nav-link">About</RouterLink>
@@ -24,6 +24,8 @@ import { RouterLink } from 'vue-router'
 
 <style scoped>
 .header {
+  max-width: 1200px;
+  width: 1000px;
   background-color: #2c3e50;
   color: white;
   padding: 1rem;

src/views/AboutView.vue

@@ -3,14 +3,19 @@
     <h1>About Chinese Writing Assistant</h1>
     <p>
       A tool to help learners master Chinese character writing with proper
-      stroke order and beginner-friendly fonts.
+      stroke order and beginner-friendly fonts. I wanted to make this web app as
+      a personal app with features that I wanted to have when I started learning
+      Chinese. And I am using as well. While using it I thought it would be
+      better if other chinese learner could also use it. So I made it a public
+      app.
+      <br /><br />Have fun learning chinese using this app.
     </p>
   </div>
 </template>
 
 <style scoped>
 .about {
-  max-width: 800px;
+  /* max-width: 800px; */
   margin: 0 auto;
   padding: 2rem;
 }