mirror of
https://github.com/Floriansylvain/musee-illusion-mobile.git
synced 2026-08-19 19:53:21 +02:00
Initial Commit!
This commit is contained in:
Florian Sylvain
+3
-1
@@ -5,5 +5,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { IonApp, IonRouterOutlet } from '@ionic/vue';
|
||||
import { IonApp, IonRouterOutlet } from "@ionic/vue";
|
||||
|
||||
import "./theme/main.css";
|
||||
</script>
|
||||
|
||||
@@ -1,7 +1,15 @@
|
||||
<template>
|
||||
<div id="container">
|
||||
<strong>{{ name }}</strong>
|
||||
<p>Explore <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
|
||||
<p>
|
||||
Explore
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
href="https://ionicframework.com/docs/components"
|
||||
>UI Components</a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
+11
-30
@@ -1,39 +1,20 @@
|
||||
import { createRouter, createWebHistory } from '@ionic/vue-router';
|
||||
import { RouteRecordRaw } from 'vue-router';
|
||||
import TabsPage from '../views/TabsPage.vue'
|
||||
import { createRouter, createWebHistory } from "@ionic/vue-router";
|
||||
import { RouteRecordRaw } from "vue-router";
|
||||
|
||||
const routes: Array<RouteRecordRaw> = [
|
||||
{
|
||||
path: '/',
|
||||
redirect: '/tabs/tab1'
|
||||
path: "/",
|
||||
component: () => import("@/views/HomePage.vue"),
|
||||
},
|
||||
{
|
||||
path: '/tabs/',
|
||||
component: TabsPage,
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
redirect: '/tabs/tab1'
|
||||
},
|
||||
{
|
||||
path: 'tab1',
|
||||
component: () => import('@/views/Tab1Page.vue')
|
||||
},
|
||||
{
|
||||
path: 'tab2',
|
||||
component: () => import('@/views/Tab2Page.vue')
|
||||
},
|
||||
{
|
||||
path: 'tab3',
|
||||
component: () => import('@/views/Tab3Page.vue')
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
path: "/rooms/",
|
||||
component: () => import("@/views/RoomsPage.vue"),
|
||||
},
|
||||
];
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes
|
||||
})
|
||||
routes,
|
||||
});
|
||||
|
||||
export default router
|
||||
export default router;
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Darker+Grotesque:wght@300..900&display=swap');
|
||||
|
||||
* {
|
||||
font-family: 'Darker Grotesque', sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
<script setup lang="ts">
|
||||
import { IonButton } from "@ionic/vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main>
|
||||
<section class="top-content">
|
||||
<img src="/image 8.png" alt="salle illusion" />
|
||||
</section>
|
||||
<section class="bottom-content">
|
||||
<h3>PARIS, FRANCE</h3>
|
||||
<h1>Bienvenue au Musée de l'illusion</h1>
|
||||
<h3>
|
||||
Venez découvrir les salles / installations que nous avons mis en place !
|
||||
</h3>
|
||||
<IonButton fill="outline" color="dark" routerLink="/rooms"
|
||||
>DÉCOUVRIR</IonButton
|
||||
>
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
main {
|
||||
height: 100vh;
|
||||
padding: 32px;
|
||||
|
||||
background-image: linear-gradient(-45deg, #7e33ac 0, #282828 60%);
|
||||
}
|
||||
|
||||
.top-content {
|
||||
height: calc(100% - 300px);
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.bottom-content {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
line-height: 100%;
|
||||
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #b4b4b4;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
main {
|
||||
background-image: linear-gradient(-45deg, #983dd1 0, #ffffff 60%);
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: var(--ion-color-dark);
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #474747;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,5 @@
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<template>b</template>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,5 @@
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<template>a</template>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -1,23 +0,0 @@
|
||||
<template>
|
||||
<ion-page>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Tab 1</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content :fullscreen="true">
|
||||
<ion-header collapse="condense">
|
||||
<ion-toolbar>
|
||||
<ion-title size="large">Tab 1</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ExploreContainer name="Tab 1 page" />
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
|
||||
import ExploreContainer from '@/components/ExploreContainer.vue';
|
||||
</script>
|
||||
@@ -1,23 +0,0 @@
|
||||
<template>
|
||||
<ion-page>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Tab 2</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content :fullscreen="true">
|
||||
<ion-header collapse="condense">
|
||||
<ion-toolbar>
|
||||
<ion-title size="large">Tab 2</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ExploreContainer name="Tab 2 page" />
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
|
||||
import ExploreContainer from '@/components/ExploreContainer.vue';
|
||||
</script>
|
||||
@@ -1,23 +0,0 @@
|
||||
<template>
|
||||
<ion-page>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Tab 3</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content :fullscreen="true">
|
||||
<ion-header collapse="condense">
|
||||
<ion-toolbar>
|
||||
<ion-title size="large">Tab 3</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ExploreContainer name="Tab 3 page" />
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
|
||||
import ExploreContainer from '@/components/ExploreContainer.vue';
|
||||
</script>
|
||||
@@ -1,28 +0,0 @@
|
||||
<template>
|
||||
<ion-page>
|
||||
<ion-tabs>
|
||||
<ion-router-outlet></ion-router-outlet>
|
||||
<ion-tab-bar slot="bottom">
|
||||
<ion-tab-button tab="tab1" href="/tabs/tab1">
|
||||
<ion-icon aria-hidden="true" :icon="triangle" />
|
||||
<ion-label>Tab 1</ion-label>
|
||||
</ion-tab-button>
|
||||
|
||||
<ion-tab-button tab="tab2" href="/tabs/tab2">
|
||||
<ion-icon aria-hidden="true" :icon="ellipse" />
|
||||
<ion-label>Tab 2</ion-label>
|
||||
</ion-tab-button>
|
||||
|
||||
<ion-tab-button tab="tab3" href="/tabs/tab3">
|
||||
<ion-icon aria-hidden="true" :icon="square" />
|
||||
<ion-label>Tab 3</ion-label>
|
||||
</ion-tab-button>
|
||||
</ion-tab-bar>
|
||||
</ion-tabs>
|
||||
</ion-page>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { IonTabBar, IonTabButton, IonTabs, IonLabel, IonIcon, IonPage, IonRouterOutlet } from '@ionic/vue';
|
||||
import { ellipse, square, triangle } from 'ionicons/icons';
|
||||
</script>
|
||||
Reference in New Issue
Block a user