diff --git a/index.html b/index.html index 1dcaaec..ee01262 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - Wiki App + WikiWord
diff --git a/package.json b/package.json index f5f9ba8..ff4d805 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,8 @@ "@wikimedia/codex-design-tokens": "^1.3.4", "@wikimedia/codex-icons": "^1.3.4", "bootstrap": "^5.3.3", - "vue": "^3.3.9" + "vue": "^3.3.9", + "vue-router": "^4.0.13" }, "devDependencies": { "@rushstack/eslint-patch": "^1.3.3", diff --git a/src/App.vue b/src/App.vue index 5e67cfd..eb410f3 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,223 +1,8 @@ - - diff --git a/src/assets/css/About.css b/src/assets/css/About.css new file mode 100644 index 0000000..62eeece --- /dev/null +++ b/src/assets/css/About.css @@ -0,0 +1,29 @@ +.about-view { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + box-shadow: var(--box-shadow-drop-xx-large); + height: 79vh; + width: 150vh; + border-radius: 5px; + margin: 100px; +} +h1 ,p{ +font-size:20px; +width:80vh; +font-family: monospace; +text-align: justify; +} +.heading{ + margin-top:-350px; +} +.dark-mode { + background-color: #333; + color: #fff; +} + +.light-mode { + background-color: #fff; + color: #000; +} diff --git a/src/assets/css/Home.css b/src/assets/css/Home.css new file mode 100644 index 0000000..9875605 --- /dev/null +++ b/src/assets/css/Home.css @@ -0,0 +1,75 @@ + @import '@wikimedia/codex-design-tokens/theme-wikimedia-ui.css'; + + .search-info { + margin-top: 5px; + } + + .error { + color: var(--color-error) !important; + } + .menu-item-container { + display: flex; + align-items: center; + justify-content: space-between; + line-height: 0.8; + } + .words-search { + position: absolute; + margin-top: -40px; + font-weight:bolder ; + font-size: 20px;; + } + .search { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + box-shadow: var(--box-shadow-drop-xx-large); + height: 79vh; + width: 150vh; + border-radius: 5px; + margin: 100px; + } + + .light-mode .cdx-search-input--has-end-button .cdx-search-input__input-wrapper .cdx-text-input { + background-color: white; + } + + .dark-mode .cdx-search-input--has-end-button .cdx-search-input__input-wrapper .cdx-text-input { + background-color: #333; + } + .dark-mode .cdx-search-input__end-button.cdx-button { + border-radius: 0px; + } + + .dark-mode { + background-color: #333; + color: #fff; + } + + .light-mode { + background-color: #fff; + color: #000; + } + + .lang-dropdown { + margin-top: 45px; + margin-left:-500px; + } + + .menu-item-container { + display: flex; + align-items: center; + justify-content: space-between; + } + .logo { + position: absolute; + top: 150px; + left: 300px; + width: 150px; + height: 150px; + } + .link-icon { + cursor: pointer; + } + diff --git a/src/assets/css/InfoIcon.css b/src/assets/css/InfoIcon.css new file mode 100644 index 0000000..6a8a7df --- /dev/null +++ b/src/assets/css/InfoIcon.css @@ -0,0 +1,9 @@ + + .info-icon { + position: absolute; + margin-top:-605px; + margin-left:800px; + } + .info-icon .cdx-icon{ + color:blue; + } diff --git a/src/components/InfoIcon.vue b/src/components/InfoIcon.vue new file mode 100644 index 0000000..8280ea7 --- /dev/null +++ b/src/components/InfoIcon.vue @@ -0,0 +1,33 @@ + + + + \ No newline at end of file diff --git a/src/main.js b/src/main.js index 0145acf..39805af 100644 --- a/src/main.js +++ b/src/main.js @@ -1,6 +1,8 @@ import './assets/css/main.css' +import { createApp } from 'vue'; +import App from './App.vue'; +import router from './router'; // Import the router instance -import { createApp } from 'vue' -import App from './App.vue' - -createApp(App).mount('#app') +createApp(App) + .use(router) // Use the router instance + .mount('#app'); diff --git a/src/router/index.js b/src/router/index.js new file mode 100644 index 0000000..1ee2187 --- /dev/null +++ b/src/router/index.js @@ -0,0 +1,23 @@ +import { createRouter, createWebHistory } from 'vue-router'; +import Home from '../views/Home.vue'; +import About from '../views/About.vue'; + +const routes = [ + { + path: '/', + name: 'Home', + component: Home + }, + { + path: '/about', + name: 'About', + component: About + } +]; + +const router = createRouter({ + history: createWebHistory(), + routes +}); + +export default router; diff --git a/src/views/About.vue b/src/views/About.vue new file mode 100644 index 0000000..428d347 --- /dev/null +++ b/src/views/About.vue @@ -0,0 +1,37 @@ + + + + + diff --git a/src/views/Home.vue b/src/views/Home.vue new file mode 100644 index 0000000..ad914af --- /dev/null +++ b/src/views/Home.vue @@ -0,0 +1,137 @@ + + + + + \ No newline at end of file