Refactor to Vue 3 + TypeScript with modular components and scoped styles

[Copilot]

Refactoring CodePaste to Vue + TypeScript

This PR refactors the CodePaste application from native HTML/CSS/JavaScript to Vue 3 + TypeScript with scoped component styles following Vue best practices.

Changes Made

• Build System: Migrated from Webpack to Vite for faster development and builds
• Framework: Migrated from jQuery to Vue 3 with Composition API
• Language: Added TypeScript with strict mode
• Styles: Moved all CSS into Vue component scoped styles (removed original CSS files)

Component Architecture

Each component now contains its own scoped styles following Vue best practices:

• App.vue - Global styles (fonts, resets, alertify, prism)
• HeaderSection.vue - Logo and title
• BannerSection.vue - Welcome marquee
• ToolbarSection.vue - Language selector, theme picker, line numbers toggle
• CodePanel.vue - Input/output container
• CodeInputPanel.vue - Textarea with tab/indent handling
• CodeOutputPanel.vue - Prism-highlighted output
• ActionButton.vue - Reusable animated button
• DocsSection.vue - Documentation and version history
• FooterSection.vue - Credits and badges

Functionality Preserved

• Code input with tab/shift-tab indentation
• Syntax highlighting with Prism.js
• Theme selection with multiple color schemes
• Line number toggle
• Dark mode support
• Copy to clipboard
• Random code examples
• AlertifyJS notifications

Screenshot

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[Lord-Turmoil]

Some functions are broken, and the CSS styles do not match the previous styles. And some elements are not aligned.

[Lord-Turmoil]

@copilot Come on, fix it.

[Copilot]

Some functions are broken, and the CSS styles do not match the previous styles. And some elements are not aligned.

Fixed in ec29fea. The issue was that Vue components were using custom CSS instead of the original CSS files. I updated the components to:

1. Import original CSS files (index.css, effect.css, doc.css, fonts.css) in App.vue
2. Use the original HTML class names and structure
3. Remove scoped component styles that were overriding the original design

[Lord-Turmoil]

@copilot For better code quality and project structure, the original CSS files should be removed. Therefore, make them into the Vue component and ensure the same styles but written in Vue's best practice.

[Copilot]

@copilot For better code quality and project structure, the original CSS files should be removed. Therefore, make them into the Vue component and ensure the same styles but written in Vue's best pract...

Refactored in faabf4d. All original CSS files (index.css, effect.css, doc.css, fonts.css) have been removed. All styles are now:

1. Global styles in App.vue - fonts, resets, scrollbar, alertify/prism overrides, animations
2. Scoped styles in each component using <style scoped> following Vue best practices

Each component now owns its own styles, making the codebase more modular and maintainable.