tenkuma/pandora
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add manifest.json, prevent pinch to zoom on mobile, make body dodge mobile keyboard and add partial light theme.

Browse source
This commit is contained in:
天クマ 2026-07-17 23:21:57 -03:00
commit 0af3395ad7
5 changed files with 60 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
icon-192.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
icon-512.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 10 KiB

4
index.html
View file

@ -2,7 +2,8 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" user-scalable=no>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, interactive-widget=resizes-content" />
<meta name="HandheldFriendly" content="true" />
<title>Pandora</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@ -10,6 +11,7 @@
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="loading.css">
<link rel="stylesheet" href="metroicons.css">
<link rel="manifest" href="./manifest.json">
</head>
<body>
<div class="app-container no-active-chat">

23
manifest.json Normal file
View file

@ -0,0 +1,23 @@
{
"name": "PANDORA chat",
"short_name": "PANDORA",
"theme_color": "#ffffff",
"background_color": "#102457",
"display": "standalone",
"orientation": "any",
"scope": "./",
"start_url": "./",
"description": "Internet messaging",
"icons": [
{
"src": "icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}

57
style.css
View file

@ -22,6 +22,24 @@
--high-box-shadow: 2px 7px 5px rgba(0, 0, 0, 0.3), 0px -4px 10px rgba(0, 0, 0, 0.3);
}
body.light {
--bg-main: white;
--bg-secondary: #F0F0F0;
--sidebar-bg: white;
--chat-bg: white;
--border-color: rgba(255, 255, 255, 0.08);
--border-hover: rgba(255, 255, 255, 0.15);
--text-primary: black;
--text-secondary: black;
--text-muted: rgb(134, 134, 134);
--accent: black; --accent-gradient: white; --accent-hover: #4f46e5; --online-color: rgba(0, 0, 000, 0.6);
--bubble-incoming: #01abaa;
--bubble-outgoing: #016f6e;
--input-bg: white; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.1); --glass-blur: blur(20px);
--high-box-shadow: 2px 7px 5px rgba(0, 0, 0, 0.3), 0px -4px 10px rgba(0, 0, 0, 0.3);
}
* {
margin: 0;
padding: 0;
@ -281,11 +299,16 @@ input:focus {
border: 1px solid transparent;
}
@media (hover: hover) {
.chat-item:hover {
background: rgba(255, 255, 255, 0.04);
transform: scale(0.98) skewX(10deg);
filter: blur(.1px);
opacity: .6;
background: rgba(255, 255, 255, 0.04); transform: scale(0.98) skewX(10deg); filter: blur(.1px); opacity: .6;
}
}
@media (hover: none) {
.chat-item:active {
background: rgba(255, 255, 255, 0.04); transform: scale(0.98) skewX(10deg); filter: blur(.1px); opacity: .6;
}
}
.chat-item-info {
@ -695,15 +718,15 @@ input:focus {
}
.alternate-panel button, .alternate-panel input {
border: medium solid white;
border: medium solid var(--text-primary);
border-radius: 100%;
background-color: transparent;
}
.alternate-panel button:hover, .alternate-panel input:hover {
border-color: white;
background-color: white;
color: black;
border-color: var(--bg-primary);
background-color: var(--text-primary);
color: var(--bg-primary);
}
.chat-input-panel button {
@ -726,8 +749,8 @@ input:focus {
#message-input {
flex: 1;
padding: 12px 18px;
background-color: white;
border: 1px solid var(--border-color);
background-color: var(--text-primary);
border: medium solid var(--border-color);
color: var(--bg-main);
font-size: 0.95rem;
transition: all 0.2s ease;
@ -739,7 +762,6 @@ input:focus {
outline: none;
border-color: var(--accent);
background: rgba(255, 255, 255, 0.06);
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}
.send-btn {
@ -882,19 +904,6 @@ input:focus {
}
/* Modal Styling */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(8px);
display: flex;
z-index: 100;
transition: all 0.3s ease;
}
.modal-content {
width: 100%;
background: var(--bg-main);