diff --git a/fxmanifest.lua b/fxmanifest.lua index 9e46549..c59e47c 100644 --- a/fxmanifest.lua +++ b/fxmanifest.lua @@ -11,7 +11,8 @@ files { 'html/index.html', 'html/style.css', 'html/app.js', - 'html/img/apps/*' + 'html/img/apps/*', + 'html/img/wallpapers/*' } client_script 'client.lua' diff --git a/html/app.js b/html/app.js index e69de29..a5ab495 100644 --- a/html/app.js +++ b/html/app.js @@ -0,0 +1,75 @@ +let dragging = false +let offsetX = 0; +let offsetY = 0; + +const closeBtn = document.getElementById('closeBtn'); +const phone = document.getElementById('phone'); +const topbar = document.getElementById('topbar'); + +phone.classList.add('absolute', 'top-20', 'left-20'); +topbar.classList.add('cursor-grab'); + +topbar.addEventListener('mousedown', e => { + if (e.target.closest('button') || e.target.closest('span')) return; + dragging = true; + topbar.classList.add('cursor-grabbing'); + topbar.classList.remove('cursor-grab'); + + const rect = phone.getBoundingClientRect(); + offsetX = e.clientX - rect.left; + offsetY = e.clientY - rect.top; +}); + +window.addEventListener('mousemove', e => { + if (!dragging) return; + phone.style.left = `${e.clientX - offsetX}px`; + phone.style.top = `${e.clientY - offsetY}px`; +}); + +window.addEventListener('mouseup', () => { + if (!dragging) return; + dragging = false; + topbar.classList.remove('cursor-grabbing'); + topbar.classList.add('cursor-grab'); +}); + +window.addEventListener('message', function(event) { + const d = event.data; + if (!d) return; + + if (d.action === 'toggle') { + if (d.open) { + phone.classList.remove('hidden'); + updateTime(); + } else { + phone.classList.add('hidden'); + } + } +}); + +closeBtn?.addEventListener('click', () => { + phone.classList.add('hidden'); + + const parentResource = getParentResourceName(); + fetch(`https://${parentResource}/close`, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({}) + }); +}); + +function updateTime() { + const t = document.getElementById('time'); + const now = new Date(); + const hh = String(now.getHours()).padStart(2, '0'); + const mm = String(now.getMinutes()).padStart(2, '0'); + t.innerText = hh + ':' + mm; +} + +function getParentResourceName() { + try { + return new URL(document.location).searchParams.get('parent') || window.parentResource || 'gb-phone'; + } catch { + return 'gb-phone'; + } +} diff --git a/html/img/apps/browser.png b/html/img/apps/browser.png new file mode 100644 index 0000000..3d6c468 Binary files /dev/null and b/html/img/apps/browser.png differ diff --git a/html/img/apps/camera.png b/html/img/apps/camera.png new file mode 100644 index 0000000..ee1b46f Binary files /dev/null and b/html/img/apps/camera.png differ diff --git a/html/img/apps/contacts.png b/html/img/apps/contacts.png deleted file mode 100644 index 1367d3f..0000000 Binary files a/html/img/apps/contacts.png and /dev/null differ diff --git a/html/img/apps/mail.png b/html/img/apps/mail.png new file mode 100644 index 0000000..ec10250 Binary files /dev/null and b/html/img/apps/mail.png differ diff --git a/html/img/apps/messages.png b/html/img/apps/messages.png index 54a3d89..a9c9d37 100644 Binary files a/html/img/apps/messages.png and b/html/img/apps/messages.png differ diff --git a/html/img/apps/music.png b/html/img/apps/music.png new file mode 100644 index 0000000..485d3dc Binary files /dev/null and b/html/img/apps/music.png differ diff --git a/html/img/apps/phone.png b/html/img/apps/phone.png new file mode 100644 index 0000000..f8160c7 Binary files /dev/null and b/html/img/apps/phone.png differ diff --git a/html/img/apps/photos.png b/html/img/apps/photos.png new file mode 100644 index 0000000..59f994d Binary files /dev/null and b/html/img/apps/photos.png differ diff --git a/html/img/apps/settings.png b/html/img/apps/settings.png new file mode 100644 index 0000000..5acb35b Binary files /dev/null and b/html/img/apps/settings.png differ diff --git a/html/img/wallpapers/wallpaper-01.png b/html/img/wallpapers/wallpaper-01.png new file mode 100644 index 0000000..2ef607e Binary files /dev/null and b/html/img/wallpapers/wallpaper-01.png differ diff --git a/html/img/wallpapers/wallpaper-02.png b/html/img/wallpapers/wallpaper-02.png new file mode 100644 index 0000000..dc5a407 Binary files /dev/null and b/html/img/wallpapers/wallpaper-02.png differ diff --git a/html/index.html b/html/index.html index ddac496..292442c 100644 --- a/html/index.html +++ b/html/index.html @@ -3,12 +3,83 @@ - Phone - + Phone UI + - + + + +
+ + +
+ 9:41 +
+ + + +
+ +
+ + +
+ + +
+
+ + + + + + +
+
+ + +
+ + + + +
+ +
- \ No newline at end of file + diff --git a/html/style.css b/html/style.css index e69de29..2a8841c 100644 --- a/html/style.css +++ b/html/style.css @@ -0,0 +1,5 @@ +#wallpaper { + background-image: url('img/wallpapers/wallpaper-02.png'); + background-size: cover; + background-position: center; +} \ No newline at end of file diff --git a/html/test.js b/html/test.js new file mode 100644 index 0000000..2c6a710 --- /dev/null +++ b/html/test.js @@ -0,0 +1,103 @@ +let dragging = false; +let offsetX = 0; +let offsetY = 0; + +const phoneEl = document.getElementById('phone'); + +phoneEl.addEventListener('mousedown', e => { + if (e.target.closest('.message-input') || e.target.closest('input') || e.target.closest('button')) return; + dragging = true; + phoneEl.classList.add('dragging'); + const rect = phoneEl.getBoundingClientRect(); + offsetX = e.clientX - rect.left; + offsetY = e.clientY - rect.top; +}); + +window.addEventListener('mousemove', e => { + if (!dragging) return; + phoneEl.style.left = `${e.clientX - offsetX}px`; + phoneEl.style.top = `${e.clientY - offsetY}px`; +}); + +window.addEventListener('mouseup', () => { + if (!dragging) return; + dragging = false; + phoneEl.classList.remove('dragging'); +}); + +window.addEventListener('message', function(event) { + const d = event.data; + if (!d) return; + + if (d.action === 'toggle') { + const phone = document.getElementById('phone'); + if (d.open) { + phone.classList.remove('hidden'); + updateTime(); + } else { + phone.classList.add('hidden'); + } + } else if (d.action === 'receiveMessage') { + appendMessage(d.from, d.message, 'from'); + } +}); + +document.getElementById('closeBtn').addEventListener('click', function() { + fetch(`https://${GetParentResourceName()}/close`, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({}) + }); +}); + +document.getElementById('messagesApp').addEventListener('click', function() { + document.getElementById('home').style.display = 'none'; + document.getElementById('messages').style.display = 'flex'; +}); + +document.getElementById('sendBtn').addEventListener('click', sendMessage); + +document.getElementById('msgInput').addEventListener('keydown', function(e) { + if (e.key === 'Enter') sendMessage(); +}); + +function sendMessage() { + const input = document.getElementById('msgInput'); + const v = input.value.trim(); + if (!v) return; + + appendMessage('You', v, 'me'); + + fetch(`https://${GetParentResourceName()}/sendMessage`, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ message: v }) + }).then(res => res.json()).then(() => { + input.value = ''; + }); +} + +function appendMessage(sender, text, cls) { + const list = document.getElementById('messagesList'); + const el = document.createElement('div'); + el.className = 'msg ' + (cls || ''); + el.innerText = sender + ': ' + text; + list.appendChild(el); + list.scrollTop = list.scrollHeight; +} + +function updateTime() { + const t = document.getElementById('time'); + const now = new Date(); + const hh = String(now.getHours()).padStart(2, '0'); + const mm = String(now.getMinutes()).padStart(2, '0'); + t.innerText = hh + ':' + mm; +} + +function GetParentResourceName() { + try { + return new URL(document.location).searchParams.get('parent') || window.parentResource || 'gb-phone'; + } catch (e) { + return 'gb-phone'; + } +} \ No newline at end of file