diff --git a/frontend/index.html b/frontend/index.html index c3d1007..f50960a 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -3,9 +3,9 @@ - + - PDL L3 - Galerie + PDL L3 - Projet diff --git a/frontend/public/favicon.ico b/frontend/public/favicon.ico deleted file mode 100644 index df36fcf..0000000 Binary files a/frontend/public/favicon.ico and /dev/null differ diff --git a/frontend/public/favicon.svg b/frontend/public/favicon.svg new file mode 100644 index 0000000..06ab712 --- /dev/null +++ b/frontend/public/favicon.svg @@ -0,0 +1 @@ +magic-wand-filled \ No newline at end of file diff --git a/frontend/src/App.vue b/frontend/src/App.vue index 14508e4..08c86d6 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -1,60 +1,147 @@ - - - - diff --git a/frontend/src/assets/logo.png b/frontend/src/assets/logo.png deleted file mode 100644 index f3d2503..0000000 Binary files a/frontend/src/assets/logo.png and /dev/null differ diff --git a/frontend/src/assets/vue.svg b/frontend/src/assets/vue.svg new file mode 100644 index 0000000..770e9d3 --- /dev/null +++ b/frontend/src/assets/vue.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/components/Gallery.vue b/frontend/src/components/Gallery.vue index b5aa03f..51a592f 100644 --- a/frontend/src/components/Gallery.vue +++ b/frontend/src/components/Gallery.vue @@ -1,25 +1,55 @@ + + +.image { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +label { + font-size: 1.5em; + color: white; +} + + \ No newline at end of file diff --git a/frontend/src/components/Home.vue b/frontend/src/components/Home.vue index f301dcc..b91e605 100644 --- a/frontend/src/components/Home.vue +++ b/frontend/src/components/Home.vue @@ -1,35 +1,81 @@ - + + +.confirm { + background-color: red; + color: white; +} + +label { + color: white; +} + + diff --git a/frontend/src/components/Image.vue b/frontend/src/components/Image.vue index 3464527..1b3bcf1 100644 --- a/frontend/src/components/Image.vue +++ b/frontend/src/components/Image.vue @@ -1,31 +1,49 @@ - + - \ No newline at end of file + \ No newline at end of file diff --git a/frontend/src/components/NotFound.vue b/frontend/src/components/NotFound.vue new file mode 100644 index 0000000..461e9d9 --- /dev/null +++ b/frontend/src/components/NotFound.vue @@ -0,0 +1,13 @@ + + + + + \ No newline at end of file diff --git a/frontend/src/components/Upload.vue b/frontend/src/components/Upload.vue index 63eb7d3..a1f4f1e 100644 --- a/frontend/src/components/Upload.vue +++ b/frontend/src/components/Upload.vue @@ -1,40 +1,137 @@ + + + +label { + color: white; +} + +input { + color: white; +} + +h2 { + color: white; +} + +.imageLabel { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + max-width: 33%; + height: 33vh; + margin: 5px; +} + +.previewBox { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-evenly; + flex-wrap: wrap; +} + +.green { + color: green; + font-weight: bold; +} + \ No newline at end of file diff --git a/frontend/src/env.d.ts b/frontend/src/env.d.ts deleted file mode 100644 index aaa4d2b..0000000 --- a/frontend/src/env.d.ts +++ /dev/null @@ -1,8 +0,0 @@ -/// - -declare module '*.vue' { - import { DefineComponent } from 'vue' - // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types - const component: DefineComponent<{}, {}, any> - export default component -} diff --git a/frontend/src/image.ts b/frontend/src/image.ts index 98275af..3269cba 100644 --- a/frontend/src/image.ts +++ b/frontend/src/image.ts @@ -1,4 +1,13 @@ export interface ImageType { id: number; name: string; +} + +export class ImageClass implements ImageType { + id: number + name: string + constructor(id: number, title: string) { + this.id = id + this.name = title + } } \ No newline at end of file diff --git a/frontend/src/main.ts b/frontend/src/main.ts index 265d847..2425c0f 100644 --- a/frontend/src/main.ts +++ b/frontend/src/main.ts @@ -1,5 +1,5 @@ import { createApp } from 'vue' +import './style.css' import App from './App.vue' -import router from './router'; -createApp(App).use(router).mount('#app') +createApp(App).mount('#app') diff --git a/frontend/src/router.ts b/frontend/src/router.ts deleted file mode 100644 index c3a82ff..0000000 --- a/frontend/src/router.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { createWebHistory, createRouter } from "vue-router"; -import { RouteRecordRaw } from "vue-router"; - -const routes: Array = [ - { - path: "/", - name: "home", - component: () => import("./components/Home.vue"), - props: true - }, - { - path: "/gallery", - name: "gallery", - component: () => import("./components/Gallery.vue"), - props: true - }, - { - path: "/image/:id", - name: "image", - component: () => import("./components/Image.vue"), - props: ({ params }) => ({ id: Number(params.id) || 0 }) - }, - { - path: "/upload", - name: "upload", - component: () => import("./components/Upload.vue"), - props: true - } -]; - -const router = createRouter({ - history: createWebHistory(), - routes, -}); - -export default router; \ No newline at end of file diff --git a/frontend/src/style.css b/frontend/src/style.css new file mode 100644 index 0000000..409d27a --- /dev/null +++ b/frontend/src/style.css @@ -0,0 +1,73 @@ +:root { + font-family: Inter, Avenir, Helvetica, Arial, sans-serif; + font-size: 16px; + line-height: 24px; + font-weight: 400; + + color-scheme: light dark; + color: rgba(255, 255, 255, 0.87); + background-color: #242424; + + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-text-size-adjust: 100%; +} + +body { + margin: 0; + display: flex; + place-items: center; + min-width: 320px; + min-height: 100vh; + background-color: #242424; +} + +h1 { + font-size: 3.2em; + line-height: 1.1; +} + +button { + border-radius: 8px; + border: 1px solid transparent; + padding: 0.6em 1.2em; + font-size: 1em; + font-weight: 500; + font-family: inherit; + background-color: #1a1a1a; + cursor: pointer; + transition: border-color 0.25s; +} + +button:hover { + border-color: #646cff; +} + +button:focus, +button:focus-visible { + outline: 4px auto -webkit-focus-ring-color; +} + +.card { + padding: 2em; +} + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + text-align: center; +} + +@media (prefers-color-scheme: light) { + :root { + color: #213547; + background-color: #ffffff; + } + + button { + background-color: #f9f9f9; + } +} \ No newline at end of file diff --git a/frontend/src/vite-env.d.ts b/frontend/src/vite-env.d.ts new file mode 100644 index 0000000..11f02fe --- /dev/null +++ b/frontend/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json index 18d6ee5..324d0b6 100644 --- a/frontend/tsconfig.json +++ b/frontend/tsconfig.json @@ -24,5 +24,5 @@ "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue" - ], + ] } \ No newline at end of file