first commit
This commit is contained in:
Colin-Joel Scupin
@@ -0,0 +1,115 @@
|
||||
local open = false
|
||||
local phoneObject = nil
|
||||
local lastToggleAt = 0
|
||||
|
||||
local function loadModel(model)
|
||||
local hash = GetHashKey(model)
|
||||
RequestModel(hash)
|
||||
local deadline = GetGameTimer() + 5000
|
||||
while not HasModelLoaded(hash) and GetGameTimer() < deadline do Wait(0) end
|
||||
return HasModelLoaded(hash) and hash or nil
|
||||
end
|
||||
|
||||
local function loadAnim(dict)
|
||||
RequestAnimDict(dict)
|
||||
local deadline = GetGameTimer() + 5000
|
||||
while not HasAnimDictLoaded(dict) and GetGameTimer() < deadline do Wait(0) end
|
||||
return HasAnimDictLoaded(dict)
|
||||
end
|
||||
|
||||
local function removePhoneProp()
|
||||
ClearPedSecondaryTask(PlayerPedId())
|
||||
if phoneObject and DoesEntityExist(phoneObject) then DeleteEntity(phoneObject) end
|
||||
phoneObject = nil
|
||||
end
|
||||
|
||||
local function createPhoneProp()
|
||||
removePhoneProp()
|
||||
local ped = PlayerPedId()
|
||||
local model = loadModel('prop_npc_phone_02')
|
||||
if model then
|
||||
phoneObject = CreateObject(model, 0.0, 0.0, 0.0, false, false, false)
|
||||
AttachEntityToEntity(phoneObject, ped, GetPedBoneIndex(ped, 28422), 0.0, 0.0, 0.0,
|
||||
0.0, 0.0, 0.0, true, true, false, true, 1, true)
|
||||
SetModelAsNoLongerNeeded(model)
|
||||
end
|
||||
if loadAnim('cellphone@') then
|
||||
TaskPlayAnim(ped, 'cellphone@', 'cellphone_text_read_base', 3.0, -3.0, -1, 49, 0.0, false, false, false)
|
||||
end
|
||||
end
|
||||
|
||||
local function sendState()
|
||||
local player = exports.devx_core:GetPlayerData()
|
||||
DevXTriggerCallback('phone:state', {}, function(phoneResult)
|
||||
DevXTriggerCallback('phone:bankOverview', {}, function(bankResult)
|
||||
SendNUIMessage({
|
||||
action = 'state',
|
||||
player = player,
|
||||
phone = phoneResult.ok and phoneResult or nil,
|
||||
banking = bankResult.ok and bankResult.overview or nil,
|
||||
error = (not phoneResult.ok and phoneResult.error) or (not bankResult.ok and bankResult.error) or nil
|
||||
})
|
||||
end)
|
||||
end)
|
||||
end
|
||||
|
||||
local function setOpen(state)
|
||||
if state and not exports.devx_core:IsPlayerLoaded() then return end
|
||||
open = state == true
|
||||
SetNuiFocus(open, open)
|
||||
SendNUIMessage({ action = open and 'open' or 'close' })
|
||||
if open then createPhoneProp(); sendState() else removePhoneProp() end
|
||||
end
|
||||
|
||||
local function togglePhone()
|
||||
local now = GetGameTimer()
|
||||
if now - lastToggleAt < 300 then return end
|
||||
lastToggleAt = now
|
||||
setOpen(not open)
|
||||
end
|
||||
|
||||
RegisterCommand('phone', togglePhone, false)
|
||||
RegisterCommand('+devxphone', togglePhone, false)
|
||||
RegisterCommand('-devxphone', function() end, false)
|
||||
RegisterKeyMapping('+devxphone', 'DevX Smartphone öffnen/schließen', 'keyboard', 'M')
|
||||
|
||||
-- No raw INPUT_INTERACTION_MENU fallback here. It used to fire again on key
|
||||
-- release and immediately close the phone, which made M behave like hold-to-use.
|
||||
|
||||
RegisterNUICallback('close', function(_, cb) setOpen(false); cb({ ok = true }) end)
|
||||
RegisterNUICallback('refresh', function(_, cb) sendState(); cb({ ok = true }) end)
|
||||
RegisterNUICallback('bankTransfer', function(data, cb)
|
||||
DevXTriggerCallback('phone:bankTransfer', data, function(result)
|
||||
if result.ok then sendState() end
|
||||
cb(result)
|
||||
end)
|
||||
end)
|
||||
RegisterNUICallback('contactCreate', function(data, cb)
|
||||
DevXTriggerCallback('phone:contactCreate', data, function(result)
|
||||
if result.ok then sendState() end
|
||||
cb(result)
|
||||
end)
|
||||
end)
|
||||
RegisterNUICallback('contactDelete', function(data, cb)
|
||||
DevXTriggerCallback('phone:contactDelete', data, function(result)
|
||||
if result.ok then sendState() end
|
||||
cb(result)
|
||||
end)
|
||||
end)
|
||||
RegisterNUICallback('companionInvite', function(data, cb)
|
||||
if GetResourceState('devx_stripclub') ~= 'started' then
|
||||
cb({ ok = false, error = 'Die Begleiterfunktion ist nicht aktiv.' })
|
||||
return
|
||||
end
|
||||
DevXTriggerCallback('phone:companionInvite', data, cb)
|
||||
end)
|
||||
|
||||
RegisterNetEvent('devx_phone:client:refresh', function()
|
||||
if open then sendState() end
|
||||
end)
|
||||
|
||||
AddEventHandler('onResourceStop', function(resourceName)
|
||||
if resourceName ~= GetCurrentResourceName() then return end
|
||||
removePhoneProp()
|
||||
SetNuiFocus(false, false)
|
||||
end)
|
||||
@@ -0,0 +1,32 @@
|
||||
fx_version 'cerulean'
|
||||
game 'gta5'
|
||||
|
||||
author 'Colin-Joel / DevX Studios'
|
||||
description 'DevX RP smartphone, contacts and mobile banking'
|
||||
version '0.4.3'
|
||||
|
||||
lua54 'yes'
|
||||
|
||||
ui_page 'web/index.html'
|
||||
|
||||
files {
|
||||
'web/index.html',
|
||||
'web/style.css',
|
||||
'web/app.js'
|
||||
}
|
||||
|
||||
client_scripts {
|
||||
'@devx_core/client/callbacks.lua',
|
||||
'client/main.lua'
|
||||
}
|
||||
|
||||
server_scripts {
|
||||
'@oxmysql/lib/MySQL.lua',
|
||||
'@devx_core/server/callbacks.lua',
|
||||
'server/main.lua'
|
||||
}
|
||||
|
||||
dependencies {
|
||||
'devx_core',
|
||||
'devx_banking'
|
||||
}
|
||||
@@ -0,0 +1,136 @@
|
||||
local function cleanText(value, minimum, maximum)
|
||||
if type(value) ~= 'string' then return nil end
|
||||
value = value:gsub('^%s+', ''):gsub('%s+$', '')
|
||||
if #value < minimum or #value > maximum then return nil end
|
||||
return value
|
||||
end
|
||||
|
||||
local function ensureColumn(name, definition)
|
||||
local exists = MySQL.scalar.await([[
|
||||
SELECT COUNT(*) FROM information_schema.COLUMNS
|
||||
WHERE TABLE_SCHEMA = DATABASE() AND TABLE_NAME = 'devx_phone_contacts' AND COLUMN_NAME = ?
|
||||
]], { name })
|
||||
if tonumber(exists) == 0 then
|
||||
MySQL.query.await(('ALTER TABLE devx_phone_contacts ADD COLUMN `%s` %s'):format(name, definition))
|
||||
end
|
||||
end
|
||||
|
||||
MySQL.ready(function()
|
||||
ensureColumn('contact_type', "VARCHAR(32) NOT NULL DEFAULT 'player' AFTER phone_number")
|
||||
ensureColumn('metadata', 'LONGTEXT NULL AFTER contact_type')
|
||||
end)
|
||||
|
||||
local function addSystemContact(characterId, name, number, contactType, metadata)
|
||||
characterId = tonumber(characterId)
|
||||
name = cleanText(name, 2, 64)
|
||||
number = cleanText(number, 4, 24)
|
||||
contactType = cleanText(contactType or 'system', 2, 32)
|
||||
if not characterId or not name or not number or not contactType then return false, 'Ungültiger Systemkontakt.' end
|
||||
|
||||
local existing = MySQL.scalar.await([[
|
||||
SELECT id FROM devx_phone_contacts
|
||||
WHERE character_id = ? AND phone_number = ? AND contact_type = ? LIMIT 1
|
||||
]], { characterId, number, contactType })
|
||||
if existing then return true, tonumber(existing) end
|
||||
|
||||
local id = MySQL.insert.await([[
|
||||
INSERT INTO devx_phone_contacts
|
||||
(character_id, contact_name, phone_number, contact_type, metadata)
|
||||
VALUES (?, ?, ?, ?, ?)
|
||||
]], { characterId, name, number, contactType, metadata and json.encode(metadata) or nil })
|
||||
return id ~= nil, id
|
||||
end
|
||||
|
||||
exports('AddSystemContact', addSystemContact)
|
||||
|
||||
DevXRegisterCallback('phone:state', function(source)
|
||||
local player = exports.devx_core:GetPlayer(source)
|
||||
if not player then return { ok = false, error = 'Kein Charakter aktiv.' } end
|
||||
|
||||
local contacts = MySQL.query.await([[
|
||||
SELECT id, contact_name AS contactName, phone_number AS phoneNumber,
|
||||
contact_type AS contactType, metadata
|
||||
FROM devx_phone_contacts
|
||||
WHERE character_id = ?
|
||||
ORDER BY contact_name ASC
|
||||
]], { player.characterId }) or {}
|
||||
|
||||
for _, contact in ipairs(contacts) do
|
||||
contact.id = tonumber(contact.id)
|
||||
if type(contact.metadata) == 'string' and contact.metadata ~= '' then
|
||||
local ok, decoded = pcall(json.decode, contact.metadata)
|
||||
contact.metadata = ok and decoded or {}
|
||||
else
|
||||
contact.metadata = {}
|
||||
end
|
||||
end
|
||||
|
||||
return {
|
||||
ok = true,
|
||||
phoneNumber = player.phoneNumber,
|
||||
rpXp = player.rpXp or 0,
|
||||
contacts = contacts
|
||||
}
|
||||
end)
|
||||
|
||||
DevXRegisterCallback('phone:contactCreate', function(source, payload)
|
||||
local player = exports.devx_core:GetPlayer(source)
|
||||
if not player then return { ok = false, error = 'Kein Charakter aktiv.' } end
|
||||
|
||||
local name = cleanText(payload.contactName, 2, 64)
|
||||
local number = cleanText(payload.phoneNumber, 4, 16)
|
||||
if not name or not number or not number:match('^[%d%-]+$') then
|
||||
return { ok = false, error = 'Name oder Telefonnummer ist ungültig.' }
|
||||
end
|
||||
|
||||
local exists = MySQL.scalar.await('SELECT id FROM devx_characters WHERE phone_number = ? LIMIT 1', { number })
|
||||
if not exists then return { ok = false, error = 'Diese Telefonnummer existiert nicht.' } end
|
||||
|
||||
local duplicate = MySQL.scalar.await([[
|
||||
SELECT id FROM devx_phone_contacts WHERE character_id = ? AND phone_number = ? LIMIT 1
|
||||
]], { player.characterId, number })
|
||||
if duplicate then return { ok = false, error = 'Diese Nummer ist bereits gespeichert.' } end
|
||||
|
||||
local id = MySQL.insert.await([[
|
||||
INSERT INTO devx_phone_contacts (character_id, contact_name, phone_number, contact_type)
|
||||
VALUES (?, ?, ?, 'player')
|
||||
]], { player.characterId, name, number })
|
||||
|
||||
return id and { ok = true } or { ok = false, error = 'Kontakt konnte nicht gespeichert werden.' }
|
||||
end)
|
||||
|
||||
DevXRegisterCallback('phone:contactDelete', function(source, payload)
|
||||
local player = exports.devx_core:GetPlayer(source)
|
||||
local contactId = tonumber(payload.contactId)
|
||||
if not player or not contactId then return { ok = false, error = 'Ungültige Anfrage.' } end
|
||||
|
||||
local contact = MySQL.single.await([[
|
||||
SELECT contact_type AS contactType FROM devx_phone_contacts
|
||||
WHERE id = ? AND character_id = ? LIMIT 1
|
||||
]], { contactId, player.characterId })
|
||||
if not contact then return { ok = false, error = 'Kontakt wurde nicht gefunden.' } end
|
||||
if contact.contactType ~= 'player' then return { ok = false, error = 'Dieser Kontakt gehört zu einer freigeschalteten Beziehung.' } end
|
||||
|
||||
local changed = MySQL.update.await('DELETE FROM devx_phone_contacts WHERE id = ? AND character_id = ?', { contactId, player.characterId })
|
||||
return changed and changed > 0 and { ok = true } or { ok = false, error = 'Kontakt wurde nicht gefunden.' }
|
||||
end)
|
||||
|
||||
|
||||
DevXRegisterCallback('phone:companionInvite', function(source)
|
||||
if GetResourceState('devx_stripclub') ~= 'started' then
|
||||
return { ok = false, error = 'Die Begleiterfunktion ist nicht aktiv.' }
|
||||
end
|
||||
return exports.devx_stripclub:InviteCompanion(source)
|
||||
end)
|
||||
|
||||
DevXRegisterCallback('phone:bankOverview', function(source)
|
||||
local player = exports.devx_core:GetPlayer(source)
|
||||
if not player then return { ok = false, error = 'Kein Charakter aktiv.' } end
|
||||
local overview = exports.devx_banking:GetOverview(player.characterId)
|
||||
return overview and { ok = true, overview = overview } or { ok = false, error = 'Kein Bankkonto gefunden.' }
|
||||
end)
|
||||
|
||||
DevXRegisterCallback('phone:bankTransfer', function(source, payload)
|
||||
local success, result = exports.devx_banking:TransferForSource(source, payload)
|
||||
return success and { ok = true, balance = result } or { ok = false, error = result }
|
||||
end)
|
||||
@@ -0,0 +1,120 @@
|
||||
const resource = typeof GetParentResourceName === 'function' ? GetParentResourceName() : 'devx_phone';
|
||||
const phone = document.querySelector('#phone');
|
||||
const screens = [...document.querySelectorAll('.screen')];
|
||||
const format = new Intl.NumberFormat('de-DE');
|
||||
let state = { player: {}, phone: {}, banking: {} };
|
||||
|
||||
async function post(event, data = {}) {
|
||||
try {
|
||||
const response = await fetch(`https://${resource}/${event}`, {
|
||||
method: 'POST', headers: { 'Content-Type': 'application/json; charset=UTF-8' }, body: JSON.stringify(data)
|
||||
});
|
||||
const text = await response.text();
|
||||
return text ? JSON.parse(text) : { ok: true };
|
||||
} catch (error) {
|
||||
return { ok: false, error: 'Die App hat keine Antwort erhalten.' };
|
||||
}
|
||||
}
|
||||
|
||||
function escapeHtml(value) {
|
||||
return String(value ?? '').replace(/[&<>"']/g, char => ({
|
||||
'&': '&', '<': '<', '>': '>', '"': '"', "'": '''
|
||||
}[char]));
|
||||
}
|
||||
function show(id) { screens.forEach(screen => screen.classList.toggle('hidden', screen.id !== id)); }
|
||||
function setError(id, text = '') {
|
||||
const el = document.querySelector(id); el.textContent = text; el.classList.toggle('hidden', !text);
|
||||
}
|
||||
function close() { post('close'); }
|
||||
function refresh() { post('refresh'); }
|
||||
|
||||
function renderTransactions(entries = []) {
|
||||
const list = document.querySelector('#transactions');
|
||||
list.innerHTML = entries.length ? '' : '<div class="empty-state compact-empty"><p>Noch keine Buchungen.</p></div>';
|
||||
entries.slice(0, 12).forEach(entry => {
|
||||
const row = document.createElement('div');
|
||||
row.className = 'transaction';
|
||||
const credit = entry.direction === 'credit';
|
||||
row.innerHTML = `<div><strong>${escapeHtml(entry.reference)}</strong><small>${escapeHtml(entry.counterparty || '')}</small></div><b class="${credit ? 'credit' : 'debit'}">${credit ? '+' : '−'}${format.format(Number(entry.amount) || 0)} $</b>`;
|
||||
list.appendChild(row);
|
||||
});
|
||||
}
|
||||
|
||||
function renderContacts(entries = []) {
|
||||
const list = document.querySelector('#contactList');
|
||||
list.innerHTML = entries.length ? '' : '<div class="empty-state compact-empty"><p>Noch keine Kontakte.</p></div>';
|
||||
entries.forEach(entry => {
|
||||
const row = document.createElement('div'); row.className = 'contact';
|
||||
const system = entry.contactType && entry.contactType !== 'player';
|
||||
row.innerHTML = `<div><strong>${escapeHtml(entry.contactName)}</strong><small>${escapeHtml(entry.phoneNumber)}</small></div><div class="contact-actions"></div>`;
|
||||
const actions = row.querySelector('.contact-actions');
|
||||
if (entry.contactType === 'npc_companion') {
|
||||
const invite = document.createElement('button'); invite.className = 'invite-contact'; invite.textContent = 'Einladen';
|
||||
invite.onclick = async () => {
|
||||
invite.disabled = true;
|
||||
const result = await post('companionInvite', { contactId: Number(entry.id), phoneNumber: entry.phoneNumber });
|
||||
setError('#contactError', result.ok ? (result.message || 'Einladung gesendet.') : (result.error || 'Einladung fehlgeschlagen.'));
|
||||
setTimeout(() => setError('#contactError'), 3500); invite.disabled = false;
|
||||
};
|
||||
actions.appendChild(invite);
|
||||
}
|
||||
if (!system) {
|
||||
const remove = document.createElement('button'); remove.className = 'delete-contact'; remove.textContent = '×'; remove.ariaLabel = 'Löschen';
|
||||
remove.onclick = async () => {
|
||||
const result = await post('contactDelete', { contactId: Number(entry.id) });
|
||||
if (!result.ok) setError('#contactError', result.error || 'Löschen fehlgeschlagen.');
|
||||
};
|
||||
actions.appendChild(remove);
|
||||
}
|
||||
list.appendChild(row);
|
||||
});
|
||||
}
|
||||
|
||||
function render() {
|
||||
const player = state.player || {}; const phoneState = state.phone || {}; const account = state.banking?.account;
|
||||
document.querySelector('#firstName').textContent = player.firstName || 'Spieler';
|
||||
document.querySelector('#ownNumber').textContent = phoneState.phoneNumber || player.phoneNumber || '–';
|
||||
document.querySelector('#profileName').textContent = [player.firstName, player.lastName].filter(Boolean).join(' ') || 'Spieler';
|
||||
document.querySelector('#profileNumber').textContent = phoneState.phoneNumber || player.phoneNumber || '–';
|
||||
document.querySelector('#rpXp').textContent = `${format.format(Number(phoneState.rpXp || player.rpXp) || 0)} XP`;
|
||||
document.querySelector('#characterId').textContent = player.characterId || '–';
|
||||
document.querySelector('#balance').textContent = `${format.format(Number(account?.balance) || 0)} $`;
|
||||
document.querySelector('#accountNumber').textContent = account?.accountNumber || 'Kein Konto';
|
||||
renderTransactions(state.banking?.transactions || []);
|
||||
renderContacts(phoneState.contacts || []);
|
||||
}
|
||||
|
||||
for (const button of document.querySelectorAll('[data-app]')) button.onclick = () => show(button.dataset.app);
|
||||
for (const button of document.querySelectorAll('.back')) button.onclick = () => show('home');
|
||||
for (const button of document.querySelectorAll('.refresh')) button.onclick = refresh;
|
||||
document.querySelector('#homeButton').onclick = close;
|
||||
document.addEventListener('keyup', event => { if (event.key === 'Escape') close(); });
|
||||
setInterval(() => { document.querySelector('#time').textContent = new Date().toLocaleTimeString('de-DE', {hour:'2-digit', minute:'2-digit'}); }, 1000);
|
||||
|
||||
const transferForm = document.querySelector('#transferForm');
|
||||
transferForm.addEventListener('submit', async event => {
|
||||
event.preventDefault(); setError('#bankError');
|
||||
const button = event.currentTarget.querySelector('button'); button.disabled = true;
|
||||
const result = await post('bankTransfer', Object.fromEntries(new FormData(event.currentTarget)));
|
||||
if (!result.ok) setError('#bankError', result.error || 'Überweisung fehlgeschlagen.');
|
||||
else { event.currentTarget.reset(); await post('refresh'); }
|
||||
button.disabled = false;
|
||||
});
|
||||
|
||||
document.querySelector('#contactForm').addEventListener('submit', async event => {
|
||||
event.preventDefault(); setError('#contactError');
|
||||
const result = await post('contactCreate', Object.fromEntries(new FormData(event.currentTarget)));
|
||||
if (!result.ok) setError('#contactError', result.error || 'Kontakt konnte nicht gespeichert werden.');
|
||||
else { event.currentTarget.reset(); await post('refresh'); }
|
||||
});
|
||||
|
||||
window.addEventListener('message', event => {
|
||||
const data = event.data || {};
|
||||
if (data.action === 'open') { phone.classList.remove('hidden'); show('home'); }
|
||||
if (data.action === 'close') phone.classList.add('hidden');
|
||||
if (data.action === 'state') {
|
||||
state = { player: data.player || {}, phone: data.phone || {}, banking: data.banking || {} };
|
||||
render();
|
||||
if (data.error) setError('#bankError', data.error);
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,74 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<section id="phone" class="phone hidden">
|
||||
<div class="camera-dot"></div>
|
||||
<header class="status"><span id="time">12:00</span><span>DEVX LTE ▰</span></header>
|
||||
|
||||
<main>
|
||||
<section id="home" class="screen">
|
||||
<div class="home-heading">
|
||||
<small>DEVX-CITY</small>
|
||||
<h1>Hallo, <span id="firstName">Spieler</span>.</h1>
|
||||
<p id="ownNumber">555-0000</p>
|
||||
</div>
|
||||
<div class="apps">
|
||||
<button data-app="bank"><span class="bank-icon">$</span><b>Bank</b></button>
|
||||
<button data-app="contacts"><span class="contacts-icon">●</span><b>Kontakte</b></button>
|
||||
<button data-app="messages"><span class="messages-icon">✉</span><b>Nachrichten</b></button>
|
||||
<button data-app="profile"><span class="profile-icon">DX</span><b>Profil</b></button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="bank" class="screen hidden">
|
||||
<div class="app-header"><button class="back">‹</button><h2>DevX Bank</h2><button class="refresh">↻</button></div>
|
||||
<article class="bank-card">
|
||||
<small>VERFÜGBAR</small>
|
||||
<strong id="balance">0 $</strong>
|
||||
<span id="accountNumber">–</span>
|
||||
</article>
|
||||
<div id="bankError" class="inline-error hidden"></div>
|
||||
<form id="transferForm" class="phone-form">
|
||||
<h3>Überweisen</h3>
|
||||
<input name="destination" placeholder="Empfängerkonto" required>
|
||||
<input name="amount" type="number" min="1" step="1" placeholder="Betrag" required>
|
||||
<input name="reference" maxlength="140" placeholder="Verwendungszweck" value="Überweisung">
|
||||
<button type="submit">Überweisen</button>
|
||||
</form>
|
||||
<h3 class="history-title">Letzte Buchungen</h3>
|
||||
<div id="transactions" class="transactions"></div>
|
||||
</section>
|
||||
|
||||
<section id="contacts" class="screen hidden">
|
||||
<div class="app-header"><button class="back">‹</button><h2>Kontakte</h2><span></span></div>
|
||||
<form id="contactForm" class="phone-form compact">
|
||||
<input name="contactName" placeholder="Name" required>
|
||||
<input name="phoneNumber" placeholder="555-0000" required>
|
||||
<button type="submit">Kontakt speichern</button>
|
||||
</form>
|
||||
<div id="contactError" class="inline-error hidden"></div>
|
||||
<div id="contactList" class="contact-list"></div>
|
||||
</section>
|
||||
|
||||
<section id="profile" class="screen hidden">
|
||||
<div class="app-header"><button class="back">‹</button><h2>Profil</h2><span></span></div>
|
||||
<div class="profile-card"><span>DX</span><h2 id="profileName">Spieler</h2><p id="profileNumber">555-0000</p></div>
|
||||
<div class="profile-row"><span>RP-Erfahrung</span><strong id="rpXp">0 XP</strong></div>
|
||||
<div class="profile-row"><span>Charakter-ID</span><strong id="characterId">–</strong></div>
|
||||
</section>
|
||||
|
||||
<section id="messages" class="screen hidden">
|
||||
<div class="app-header"><button class="back">‹</button><h2>Nachrichten</h2><span></span></div>
|
||||
<div class="empty-state"><strong>Noch keine Nachrichten</strong><p>SMS und Anrufe folgen in der nächsten Telefon-Ausbaustufe.</p></div>
|
||||
</section>
|
||||
</main>
|
||||
<button id="homeButton" aria-label="Handy schließen"></button>
|
||||
</section>
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,63 @@
|
||||
:root { font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #f7f8fc; }
|
||||
* { box-sizing: border-box; }
|
||||
body { margin: 0; overflow: hidden; background: transparent; user-select: none; }
|
||||
.hidden { display: none !important; }
|
||||
button, input { font: inherit; }
|
||||
.phone {
|
||||
position: fixed; right: 36px; bottom: 25px; width: 348px; height: 690px;
|
||||
border: 9px solid #111319; border-radius: 44px;
|
||||
background: linear-gradient(160deg, #244b9b 0%, #182a51 30%, #10141d 70%);
|
||||
box-shadow: 0 30px 85px rgba(0,0,0,.58); overflow: hidden;
|
||||
}
|
||||
.camera-dot { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 72px; height: 7px; border-radius: 10px; background: #050608; z-index: 4; }
|
||||
.status { height: 52px; padding: 27px 19px 0; display: flex; justify-content: space-between; font-size: 11px; font-weight: 750; }
|
||||
main { height: 586px; padding: 8px 17px 16px; overflow: hidden; }
|
||||
.screen { height: 100%; overflow-y: auto; padding: 4px 2px 18px; scrollbar-width: none; }
|
||||
.screen::-webkit-scrollbar { display: none; }
|
||||
.home-heading { padding-top: 25px; }
|
||||
.home-heading small { color: #9db7ff; font-size: 9px; letter-spacing: .19em; font-weight: 850; }
|
||||
h1 { margin: 8px 0 4px; font-size: 29px; letter-spacing: -.035em; }
|
||||
.home-heading p { margin: 0; color: rgba(255,255,255,.62); font-size: 12px; }
|
||||
.apps { display: grid; grid-template-columns: repeat(2,1fr); gap: 13px; margin-top: 30px; }
|
||||
.apps button { height: 120px; padding: 13px; display: grid; place-items: center; gap: 7px; color: white; background: rgba(255,255,255,.095); border: 1px solid rgba(255,255,255,.105); border-radius: 21px; cursor: pointer; }
|
||||
.apps button:hover { background: rgba(255,255,255,.15); }
|
||||
.apps button span { width: 51px; height: 51px; border-radius: 15px; display: grid; place-items: center; font-size: 22px; font-weight: 850; box-shadow: 0 8px 20px rgba(0,0,0,.22); }
|
||||
.apps button b { font-size: 12px; }
|
||||
.bank-icon { background: linear-gradient(145deg,#4fb881,#27835a); }
|
||||
.contacts-icon { background: linear-gradient(145deg,#f0a64b,#d86d38); }
|
||||
.messages-icon { background: linear-gradient(145deg,#57a7ff,#426ce8); }
|
||||
.profile-icon { background: linear-gradient(145deg,#7c86ff,#554dcc); font-size: 13px !important; }
|
||||
.app-header { min-height: 45px; display: grid; grid-template-columns: 38px 1fr 38px; align-items: center; }
|
||||
.app-header h2 { margin: 0; text-align: center; font-size: 17px; }
|
||||
.back, .refresh { border: 0; background: transparent; color: white; font-size: 27px; cursor: pointer; }
|
||||
.refresh { font-size: 19px; }
|
||||
.bank-card { margin-top: 10px; min-height: 142px; padding: 20px; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 20px; background: linear-gradient(145deg,#547cf3,#2546a0); box-shadow: 0 16px 35px rgba(16,34,92,.35); }
|
||||
.bank-card small { font-size: 9px; letter-spacing: .14em; opacity: .72; }
|
||||
.bank-card strong { margin: 5px 0 12px; font-size: 35px; letter-spacing: -.04em; }
|
||||
.bank-card span { font-size: 11px; opacity: .75; }
|
||||
.phone-form { display: grid; gap: 8px; margin-top: 18px; }
|
||||
.phone-form h3, .history-title { margin: 0 0 3px; font-size: 13px; }
|
||||
.phone-form input { width: 100%; padding: 11px; border: 1px solid rgba(255,255,255,.11); border-radius: 10px; outline: 0; color: white; background: rgba(0,0,0,.22); }
|
||||
.phone-form input:focus { border-color: #6f96ff; }
|
||||
.phone-form button { border: 0; border-radius: 10px; padding: 11px; color: white; background: #557df3; font-weight: 800; cursor: pointer; }
|
||||
.phone-form.compact { margin-top: 12px; }
|
||||
.history-title { margin-top: 20px; }
|
||||
.transactions, .contact-list { display: grid; gap: 7px; margin-top: 8px; }
|
||||
.transaction, .contact { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 10px 11px; border-radius: 11px; background: rgba(255,255,255,.06); }
|
||||
.transaction strong, .contact strong { display: block; font-size: 11px; }
|
||||
.transaction small, .contact small { color: rgba(255,255,255,.55); font-size: 9px; }
|
||||
.transaction .credit { color: #7ce6a9; }
|
||||
.transaction .debit { color: #ff8d9b; }
|
||||
.contact button { width: 27px; height: 27px; border: 0; border-radius: 8px; color: #ff9daa; background: rgba(210,70,88,.17); cursor: pointer; }
|
||||
.inline-error { margin-top: 9px; padding: 9px; border-radius: 9px; color: #ffadb7; background: rgba(179,47,66,.22); font-size: 10px; }
|
||||
.profile-card { margin-top: 22px; text-align: center; }
|
||||
.profile-card > span { width: 68px; height: 68px; margin: auto; display: grid; place-items: center; border-radius: 20px; background: linear-gradient(145deg,#7294ff,#3d5ed0); font-weight: 900; }
|
||||
.profile-card h2 { margin: 13px 0 4px; }
|
||||
.profile-card p { margin: 0 0 25px; color: rgba(255,255,255,.6); }
|
||||
.profile-row { display: flex; justify-content: space-between; padding: 13px; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 12px; }
|
||||
.empty-state { margin-top: 90px; text-align: center; color: rgba(255,255,255,.62); }
|
||||
.empty-state strong { color: white; }
|
||||
.empty-state p { font-size: 11px; line-height: 1.5; }
|
||||
#homeButton { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); width: 112px; height: 5px; border: 0; border-radius: 10px; background: rgba(255,255,255,.82); cursor: pointer; }
|
||||
.contact-actions{display:flex;align-items:center;gap:6px}.contact-actions button{height:29px;border:0;border-radius:8px;color:white;cursor:pointer;font-size:10px;font-weight:800}.delete-contact{width:29px;background:rgba(210,70,88,.2);color:#ff9daa!important}.invite-contact{padding:0 9px;background:#557df3}.contact-actions button:disabled{opacity:.45}.compact-empty{margin-top:18px}
|
||||
.invite-contact{width:auto!important;min-width:64px}.delete-contact{width:29px!important}
|
||||
Reference in New Issue
Block a user