app sur le téléphone
BIN
public_html/assets/phone/concord.png
Normal file
After Width: | Height: | Size: 81 KiB |
BIN
public_html/assets/phone/facebook.png
Normal file
After Width: | Height: | Size: 338 KiB |
BIN
public_html/assets/phone/fond_ecran.jpeg
Normal file
After Width: | Height: | Size: 9.8 KiB |
BIN
public_html/assets/phone/fond_ecran.jpg
Normal file
After Width: | Height: | Size: 959 KiB |
BIN
public_html/assets/phone/vbucks.webp
Normal file
After Width: | Height: | Size: 23 KiB |
11
public_html/assets/phone/webview/fb.html
Normal 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>
|
BIN
public_html/assets/phone/webview/free_vbucks.jpeg
Normal file
After Width: | Height: | Size: 14 KiB |
BIN
public_html/assets/phone/webview/hairinsa.png
Normal file
After Width: | Height: | Size: 21 KiB |
BIN
public_html/assets/phone/webview/rickroll.gif
Normal file
After Width: | Height: | Size: 5.7 MiB |
17
public_html/assets/phone/webview/vbucks.html
Normal 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>
|
|
@ -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;
|
||||
}
|
|
@ -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>
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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){
|
||||
|
|