app sur le téléphone

This commit is contained in:
Baptiste 2023-12-14 17:15:55 +01:00
parent f6cd4c30b7
commit 291b41553e
14 changed files with 130 additions and 5 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 81 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 338 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 959 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

View file

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>FakeBook</title>
</head>
<body>
<img src="hairinsa.png" width="100%">
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 MiB

View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Free Vbucks</title>
</head>
<body>
<img src="free_vbucks.jpeg" width="100%" id="freevbucks">
<img src="rickroll.gif" width="100%" id="rr" style="display:none">
<script>
document.getElementById("freevbucks").addEventListener("click", (e) => {
document.getElementById("rr").style.display = "block"
});
</script>
</body>
</html>

View file

@ -112,3 +112,22 @@ html, body{
.messageImage{
width: 100%;
}
#content {
height:90%;
width:100%;
background-image: url("../assets/phone/fond_ecran.jpeg");
background-size: cover;
}
.icon {
background-color: rgba(0,0,0, 0.7);
width: 40px;
height: 40px;
padding: 5px;
border-radius: 10px;
margin: 3.5px;
margin-right: 0;
display: inline-block;
cursor:pointer;
}

View file

@ -20,14 +20,29 @@
<div id="phoneContainer" class="hidden">
<div id="phoneDiv">
<img id="phone" src="assets/phone.png" alt="Phone">
<map name="map_retour_menu">
<area
shape="circle"
coords="100,380,17"
style="cursor:pointer;"
id="retour_menu"
border="5px" />
</map>
<img id="phone" src="assets/phone.png" alt="Phone" usemap="#map_retour_menu">
<div id="phoneScreen">
<div id="chatHeader">
<p>Concord</p>
<p id ="TitlePage"></p>
</div>
<div id="chatMessages">
</div>
<div id="content">
<img src="./assets/phone/concord.png" class="icon" id="appli-concord">
<img src="./assets/logo.png" class="icon" id="appli-gta6">
<img src="./assets/phone/vbucks.webp" class="icon" id="appli-vbuks">
<img src="./assets/phone/facebook.png" class="icon" id="appli-fb">
</div>
<iframe id="webview" sandbox="allow-same-origin allow-scripts allow-forms" style="overflow: hidden;"></iframe>
<div id="chatInputDiv">
<input type="text" placeholder="Ecrivez un message ici" id="chatInput" onkeydown="phone.keyPress(this)">
</div>

View file

@ -40,6 +40,10 @@ class Input {
this.updateDir();
})
document.getElementById("retour_menu").addEventListener("click", (e) => {
phone.changeWindow(1)
});
window.addEventListener("keyup", (e)=>{
this.keysDown.delete(e.key.toLowerCase())
this.updateDir();

View file

@ -2,6 +2,66 @@ class Phone{
constructor(){
this.position = 0;
this.messages = [];
this.name = document.getElementById("TitlePage");
this.content = document.getElementById("content");
this.contentmsg = document.getElementById("chatMessages");
this.inputDiv = document.getElementById("chatInputDiv");
this.webview = document.getElementById("webview");
this.webviewName = "Erreur"
this.chargeMainPage();
this.changeWindow(1)
}
chargeMainPage() {
document.getElementById("appli-concord").addEventListener("click", (e) => {
this.changeWindow(2)
});
document.getElementById("appli-gta6").addEventListener("click", (e) => {
this.webviewName = "GTA 6"
this.changeWindow("game.html")
});
document.getElementById("appli-vbuks").addEventListener("click", (e) => {
this.webviewName = "Free Vbucks"
this.changeWindow("assets/phone/webview/vbucks.html")
});
document.getElementById("appli-fb").addEventListener("click", (e) => {
this.webviewName = "FakeBook"
this.changeWindow("assets/phone/webview/fb.html")
});
}
changeWindow(window) {
//1 main view phone.changeWindow(
//2 concorde
//other webview
this.content.style.display="none";
this.contentmsg.style.display="none";
this.inputDiv.style.display="none";
this.webview.style.display = "none";
this.webview.src="";
switch (window) {
case 1:
this.name.innerText = "Pear phone"
this.content.style.display="block";
break;
case 2:
this.name.innerText = "Concord"
this.contentmsg.style.display="block";
this.inputDiv.style.display="block";
break;
default:
this.name.innerText = this.webviewName
this.webview.style.display = "block";
this.webview.style.width="100%";
this.webview.style.height="90%";
this.webview.style.border="0";
this.webview.src=window;
break;
}
}
addMessage(message){
@ -29,9 +89,8 @@ class Phone{
msg.appendChild(h2);
msg.appendChild(p);
let chatMessages = document.getElementById("chatMessages");
chatMessages.appendChild(msg);
chatMessages.scrollTop = chatMessages.scrollHeight;
this.contentmsg.appendChild(msg);
this.contentmsg.scrollTop = this.contentmsg.scrollHeight;
}
sendMessage(title, content){