Skip to content

Commit 4613410

Browse files
gltwodotlinecigltwodotlineci
committed
ajusting and adding photo images to links
1 parent 3541fe4 commit 4613410

File tree

7 files changed

+161
-15
lines changed

7 files changed

+161
-15
lines changed

‎front/src/assets/css/style.css‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,17 @@ h1 {
5050
line-height: 1.1;
5151
}
5252

53+
/* Acces to pages */
54+
.img-pages{
55+
margin-top: 40px;
56+
margin-bottom: 10px;
57+
}
58+
59+
.col1{
60+
margin-left: 20px;
61+
}
62+
/* */
63+
5364
button {
5465
border-radius: 8px;
5566
padding: 0.6em 1.2em;
@@ -140,6 +151,25 @@ button:focus-visible {
140151
font-size:45px;
141152
line-height:1.6;
142153
}
154+
155+
.marquee-wrap-test {
156+
overflow:auto;
157+
margin-left: auto;
158+
margin-right: auto;
159+
width: 90%;
160+
height:80%;
161+
text-align: center;
162+
overflow-y: scroll;
163+
scrollbar-color: rebeccapurple green;
164+
-webkit-overflow-scrolling: touch;
165+
scrollbar-width: thin;
166+
border:1px solid #000;
167+
padding:10px;
168+
color: white;
169+
font-size:45px;
170+
line-height:1.6;
171+
}
172+
143173
/* increase duration to speed up scroll */
144174
.marquee{
145175
animation:scrollUp 30s linear 1s infinite;

‎front/src/assets/images/oiseau_40x40.png‎

2.49 KB
Loading

‎front/src/views/Accueil.vue‎

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,25 @@
1313
</p>
1414

1515
<ScanQrcode :expected="expected" :qrbox="250" :fps="10" style="width: 400px;height: 400px;" @resultat="onScan"/>
16-
17-
<div class="d-flex flex-row justify-content-sm-center align-items-center mt-2">
18-
<img :src="oiseau" class="ms-1 me-1" role="button" @click="router.push('/Page1')">
19-
<img :src="oiseau" class="ms-1 me-1" role="button" @click="router.push('/Page2')">
20-
<img :src="oiseau" class="ms-1 me-1" role="button" @click="router.push('/Page3')">
21-
<img :src="oiseau" class="ms-1 me-1" role="button" @click="router.push('/Page4')">
22-
<img :src="oiseau" class="ms-1 me-1" role="button" @click="router.push('/Page5')">
16+
<div class="img-pages">
17+
<div class="d-flex flex-row justify-content-sm-center align-items-center mt-2">
18+
<div class="col1">
19+
<img :src="oiseau" class="ms-1 me-1" role="button" @click="router.push('/Page1')">
20+
</div>
21+
<div class="col1">
22+
<img :src="oiseau" class="ms-1 me-1" role="button" @click="router.push('/Page2')">
23+
</div>
24+
<div class="col1">
25+
<img :src="oiseau" class="ms-1 me-1" role="button" @click="router.push('/Page3')">
26+
</div>
27+
<div class="col1">
28+
<img :src="oiseau" class="ms-1 me-1" role="button" @click="router.push('/Page4')">
29+
</div>
30+
<div class="col1">
31+
<img :src="oiseau" class="ms-1 me-1" role="button" @click="router.push('/test_pg')">
32+
</div>
33+
</div>
2334
</div>
24-
2535
<footer class="mt-5">
2636
<a href="#one">
2737
<button type="button" class="btn bg-transparent" style='font-size: 25px; border-color:white; color:white;'>

‎front/src/views/Page1.vue‎

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@
44
</audio>
55
<section id="pg1" class="overflow-hidden" :style="{ backgroundImage: `url(${backgroundImagePg1})` }">
66
<div class="d-flex flex-row justify-content-center mt-2 mb-2">
7+
<div class="d-flex justify-content-center align-items-center container-icons-vue ms-1 me-1" role="button"
8+
@click="replayAudio()">
9+
<BIconSkipBackwardFill class="icons-vue1 t2-5rem"/>
10+
</div>
711
<div class="d-flex justify-content-center align-items-center container-icons-vue ms-1 me-1" role="button" @click="toggleAction()">
812
<BIconPlayFill v-if="buttonAction === 'play'" class="icons-vue1 t4rem rotate90"/>
913
<BIconPauseFill v-if="buttonAction === 'pause'" class="icons-vue1 t4rem"/>
@@ -13,8 +17,7 @@
1317
</div>
1418
</div>
1519

16-
<div class="marquee-wrap">
17-
<div class="marquee">
20+
<div class="marquee-wrap-test">
1821
<p style="color: white;text-shadow: 3px 3px 4px black;">
1922
<b> Rogue, inconspicuous motes of rock </b>and gas descended from astronomers Sea of Tranquility billions upon
2023
billions star stuff harvesting star light stirred by starlight, Flatland billions upon billions vastness is
@@ -24,9 +27,26 @@
2427
and gas realm of the galaxies decipherment tendrils of gossamer clouds at the edge of forever? Worldlets
2528
Orion's sword Cambrian explosion, emerged into consciousness, laws of physics tendrils of gossamer clouds
2629
venture. Flatland paroxysm of global
30+
death Jean-François Champollion.
31+
<b> Rogue, inconspicuous motes of rock </b>and gas descended from astronomers Sea of Tranquility billions upon
32+
billions star stuff harvesting star light stirred by starlight, Flatland billions upon billions vastness is
33+
bearable only through love great turbulent e muse about! Cambrian explosion dispassionate extraterrestrial
34+
observer.
35+
<br/>
36+
and gas realm of the galaxies decipherment tendrils of gossamer clouds at the edge of forever? Worldlets
37+
Orion's sword Cambrian explosion, emerged into consciousness, laws of physics tendrils of gossamer clouds
38+
venture. Flatland paroxysm of global
39+
death Jean-François Champollion.<br/>
40+
<b> Rogue, inconspicuous motes of rock </b>and gas descended from astronomers Sea of Tranquility billions upon
41+
billions star stuff harvesting star light stirred by starlight, Flatland billions upon billions vastness is
42+
bearable only through love great turbulent e muse about! Cambrian explosion dispassionate extraterrestrial
43+
observer.
44+
<br/>
45+
and gas realm of the galaxies decipherment tendrils of gossamer clouds at the edge of forever? Worldlets
46+
Orion's sword Cambrian explosion, emerged into consciousness, laws of physics tendrils of gossamer clouds
47+
venture. Flatland paroxysm of global
2748
death Jean-François Champollion.
2849
</p><br/>
29-
</div>
3050
</div>
3151

3252
</section>

‎front/src/views/test_pg.vue‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<template>
2+
<audio id="play-audio" autoplay>
3+
<source src="@/assets/musiques/test-pg1.mp3">
4+
</audio>
5+
<section id="pg1" class="overflow-hidden" :style="{ backgroundImage: `url(${backgroundImagePg1})` }">
6+
<div class="d-flex flex-row justify-content-center mt-2 mb-2">
7+
<div class="d-flex justify-content-center align-items-center container-icons-vue ms-1 me-1" role="button"
8+
@click="replayAudio()">
9+
<BIconSkipBackwardFill class="icons-vue1 t2-5rem"/>
10+
</div>
11+
<div class="container-icons-vue ms-1 me-1" role="button" @click="toggleAction()">
12+
<!-- <BIconFonts v-if="buttonAction === 'scrollTextProgress'" class="icons-vue1 t4rem rotate90"/> -->
13+
<div v-if="buttonAction === 'scrollTextProgress'" class="position-relative">
14+
<BIconFonts class="position-absolute icons-vue1"
15+
style="width: 3rem; height: 3rem; left: 0.5rem; top: 0.5rem;"/>
16+
<BIconPauseFill class="position-absolute icons-vue1"
17+
style="width: 2rem; height: 2rem; right: 0.5rem; top: 2rem;"/>
18+
</div>
19+
<div v-if="buttonAction === 'scrollTextPause'" class="position-relative">
20+
<BIconFonts class="position-absolute icons-vue1"
21+
style="width: 3rem; height: 3rem; left: 0.5rem; top: 0.5rem;"/>
22+
<BIconPlayFill class="position-absolute icons-vue1"
23+
style="width: 2rem; height: 2rem; right: 0.5rem; top: 2rem;"/>
24+
</div>
25+
</div>
26+
<div class="d-flex justify-content-center align-items-center container-icons-vue ms-1 me-1" role="button"
27+
@click="router.push('/')">
28+
<BIconHouseFill class="icons-vue1 t2-5rem"/>
29+
</div>
30+
</div>
31+
32+
<div class="marquee-wrap">
33+
<div class="marquee">
34+
<h1>Page test</h1>
35+
<p style="color: white;text-shadow: 3px 3px 4px black;">
36+
<b> Rogue, inconspicuous motes of rock </b>and gas descended from astronomers Sea of Tranquility billions upon
37+
billions star stuff harvesting star light stirred by starlight, Flatland billions upon billions vastness is
38+
bearable only through love great turbulent e muse about! Cambrian explosion dispassionate extraterrestrial
39+
observer.
40+
<br/>
41+
and gas realm of the galaxies decipherment tendrils of gossamer clouds at the edge of forever? Worldlets
42+
Orion's sword Cambrian explosion, emerged into consciousness, laws of physics tendrils of gossamer clouds
43+
venture. Flatland paroxysm of global
44+
death Jean-François Champollion.
45+
</p><br/>
46+
</div>
47+
</div>
48+
49+
</section>
50+
51+
</template>
52+
53+
<script setup>
54+
import {ref} from 'vue'
55+
import {useRouter} from 'vue-router'
56+
// bootstrap-icons-vue - prefixed with BIcon. For example, the icon pause-fill is exported as BIconPauseFill
57+
// icons list : https://icons.getbootstrap.com/
58+
import {BIconFonts, BIconPlayFill, BIconSkipBackwardFill, BIconPauseFill, BIconHouseFill} from 'bootstrap-icons-vue'
59+
import backgroundImagePg1 from "@/assets/images/sunset.jpg"
60+
const router = useRouter()
61+
let buttonAction = ref('scrollTextProgress')
62+
function toggleAction() {
63+
if (buttonAction.value === 'scrollTextProgress') {
64+
buttonAction.value = 'scrollTextPause'
65+
document.querySelector('.marquee').style.animationPlayState = 'paused'
66+
} else {
67+
buttonAction.value = 'scrollTextProgress'
68+
document.querySelector('.marquee').style.animationPlayState = 'running'
69+
}
70+
}
71+
function replayAudio() {
72+
const audioElement = document.querySelector('#play-audio')
73+
audioElement.currentTime = 0
74+
audioElement.play()
75+
}
76+
</script>
77+
78+
<style scoped>
79+
#pg1 {
80+
width: 100%;
81+
height: 100%;
82+
background-position: center;
83+
background-repeat: no-repeat;
84+
background-size: cover;
85+
}
86+
</style>

‎platforms/browser/www/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,8 @@
3535
<meta name="color-scheme" content="light dark">
3636
<link rel="icon" href="favicon.ico">
3737
<title>Cordova + vue</title>
38-
<script type="module" crossorigin src="/assets/index.81aef7e5.js"></script>
39-
<link rel="stylesheet" href="/assets/index.2910eea5.css">
38+
<script type="module" crossorigin src="/assets/index.b8d9d3f1.js"></script>
39+
<link rel="stylesheet" href="/assets/index.3e705784.css">
4040
</head>
4141
<body>
4242
<div id="app" class="container-fluid"></div>

‎www/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,8 @@
3535
<meta name="color-scheme" content="light dark">
3636
<link rel="icon" href="favicon.ico">
3737
<title>Cordova + vue</title>
38-
<script type="module" crossorigin src="/assets/index.81aef7e5.js"></script>
39-
<link rel="stylesheet" href="/assets/index.2910eea5.css">
38+
<script type="module" crossorigin src="/assets/index.b8d9d3f1.js"></script>
39+
<link rel="stylesheet" href="/assets/index.3e705784.css">
4040
</head>
4141
<body>
4242
<div id="app" class="container-fluid"></div>

0 commit comments

Comments
 (0)