diff --git a/src/css/video.css b/src/css/video.css
index da3515b..f7d23db 100644
--- a/src/css/video.css
+++ b/src/css/video.css
@@ -44,4 +44,39 @@ video::-webkit-media-controls {
-webkit-media-controls-current-time-display: none;
-webkit-media-controls-time-remaining-display: none;
-webkit-media-controls-toggle-closed-captions-button: none;
+}
+
+.image-container {
+ position: fixed;
+ top: 50%;
+ left: 0;
+ transform: translateY(-50%);
+ width: 100%;
+ height: 100vh;
+ overflow: hidden;
+}
+
+@media only screen and (max-device-width: 600px) {
+ .image-container.middle {
+ width: 200%;
+ height: 150vh;
+ left: 0%;
+ }
+ .image-container.left {
+ width: 300%;
+ left: 0%;
+ }
+ .image-container.right {
+ width: 200%;
+ left: -100%;
+ }
+}
+
+.image-container img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+
+ pointer-events: none;
+ user-select: none;
}
\ No newline at end of file
diff --git a/src/pages/components/loadImage.jsx b/src/pages/components/loadImage.jsx
new file mode 100644
index 0000000..be94ede
--- /dev/null
+++ b/src/pages/components/loadImage.jsx
@@ -0,0 +1,13 @@
+import '../../css/video.css';
+
+function Image({ src = "hallway_MMM.mp4" ,side = "middle", alt = "this is a video" }) {
+ const urlSource = `${import.meta.env.VITE_ASSETS_URL}/${src}`;
+
+ return (
+
+

+
+ );
+}
+
+export default Image;
diff --git a/src/pages/introductionPage.jsx b/src/pages/introductionPage.jsx
index 607a8ab..c20cdfb 100644
--- a/src/pages/introductionPage.jsx
+++ b/src/pages/introductionPage.jsx
@@ -2,6 +2,7 @@ import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import '../css/global.css';
import PlayVideo from './components/playVideo.jsx';
+import LoadImage from './components/loadImage.jsx';
import LoadingScene from './components/loadingScene.jsx';
import IntroductionData from './components/introductionData.jsx';
import SelectionCharacter from './components/selectionCharacter.jsx';
@@ -9,7 +10,7 @@ import Character from './class/character.jsx';
function IntroductionPage() {
const navigate = useNavigate();
- const [loading, setLoading] = useState(true);
+ const [loading, setLoading] = useState(false);
const [isClickedIntroduction, setIsClickedIntroduction] = useState(false);
const [numChar, setNumChar] = useState(1);
const character = new Character();
@@ -34,6 +35,23 @@ function IntroductionPage() {
return sessionStorage.getItem("lang") || 'English';
});
+ const userAgent = navigator.userAgent;
+ const isSafari = userAgent.includes("iPhone"); // safari piss me off so bad omg
+
+ const videoElement = isSafari ? (
+
+ ) : (
+
+ );
+
const handleClickedButton = () => {
console.log(character.name(numChar))
if(character.name(numChar)=='Porsche') navigate(`/vs/Porsche/${lang}/0`);
@@ -57,11 +75,7 @@ function IntroductionPage() {
/>
)
)}
-
+ {videoElement}
);
}