Skip to content

Improve UI styling and layout for chat app #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
reodesureodesu merged 1 commit into from
Mar 2, 2026
Merged

Improve UI styling and layout for chat app #1

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
281 changes: 202 additions & 79 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,76 +1,195 @@
<!DOCTYPE html>
<html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LINE Ultimate Stable</title>
<style>
body{
margin:0;
font-family:sans-serif;
background:linear-gradient(135deg,#00c6ff,#0072ff);
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
#app{
width:390px;
height:680px;
background:white;
border-radius:20px;
display:flex;
flex-direction:column;
overflow:hidden;
}
header{
background:#06c755;
color:white;
padding:15px;
text-align:center;
font-weight:bold;
}
#auth{
padding:20px;
text-align:center;
}
#chat{
display:none;
flex:1;
flex-direction:column;
}
#messages{
flex:1;
overflow-y:auto;
padding:10px;
}
.msg{
margin:6px 0;
padding:8px 12px;
border-radius:15px;
max-width:70%;
word-wrap:break-word;
}
.me{background:#06c755;color:white;margin-left:auto;}
.other{background:#eee;}
.chatimg{max-width:140px;border-radius:10px;margin-top:5px;}
#inputArea{
display:flex;
padding:10px;
gap:5px;
}
input,button{
padding:8px;
border-radius:10px;
border:1px solid #ccc;
}
button{
background:#06c755;
color:white;
border:none;
cursor:pointer;
}
#logout{
background:#ff4d4d;
:root {
--line-green: #06c755;
--line-green-dark: #05ad4a;
--bg-gradient: linear-gradient(160deg, #d8f9e8 0%, #e6f0ff 55%, #f3ecff 100%);
--surface: #ffffff;
--surface-soft: #f6f8fb;
--text-primary: #1f2937;
--text-muted: #6b7280;
--border: #e5e7eb;
--shadow: 0 16px 40px rgba(16, 24, 40, 0.14);
}

* {
box-sizing: border-box;
}

body {
margin: 0;
min-height: 100vh;
font-family: "Inter", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
background: var(--bg-gradient);
display: flex;
justify-content: center;
align-items: center;
padding: 24px;
color: var(--text-primary);
}

#app {
width: min(100%, 420px);
height: min(92vh, 760px);
background: var(--surface);
border-radius: 28px;
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.8);
}

header {
background: linear-gradient(120deg, var(--line-green) 0%, #2cd56e 100%);
color: white;
padding: 20px;
text-align: center;
font-weight: 700;
letter-spacing: 0.03em;
font-size: 1.05rem;
}

#auth {
padding: 28px 22px;
text-align: center;
display: grid;
gap: 12px;
background: linear-gradient(180deg, #ffffff 0%, #fbfffd 100%);
}

#auth h2 {
margin: 0 0 2px;
font-size: 1.1rem;
}

#auth p {
margin: 0 0 12px;
color: var(--text-muted);
font-size: 0.92rem;
}

#chat {
display: none;
flex: 1;
flex-direction: column;
background: linear-gradient(180deg, #f8fcff 0%, #f2fbf6 100%);
}

#messages {
flex: 1;
overflow-y: auto;
padding: 16px 14px;
display: flex;
flex-direction: column;
gap: 8px;
}

.msg {
margin: 0;
padding: 10px 14px;
border-radius: 16px;
max-width: 78%;
word-break: break-word;
line-height: 1.4;
box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
}

.me {
background: var(--line-green);
color: white;
margin-left: auto;
border-bottom-right-radius: 4px;
}

.other {
background: #ffffff;
color: var(--text-primary);
margin-right: auto;
border: 1px solid var(--border);
border-bottom-left-radius: 4px;
}

.chatimg {
width: 100%;
max-width: 190px;
border-radius: 10px;
margin-top: 8px;
display: block;
}

#inputArea {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
padding: 12px;
border-top: 1px solid var(--border);
background: var(--surface);
}

#imageInput {
grid-column: 1 / -1;
}

#actions {
display: flex;
gap: 8px;
}

input,
button {
font: inherit;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid var(--border);
}

input {
width: 100%;
background: var(--surface-soft);
}

input:focus {
outline: 2px solid rgba(6, 199, 85, 0.25);
border-color: var(--line-green);
}

button {
background: var(--line-green);
color: white;
border: none;
cursor: pointer;
font-weight: 600;
transition: transform 0.12s ease, opacity 0.12s ease, background 0.2s ease;
}

button:hover {
transform: translateY(-1px);
opacity: 0.96;
}

button:active {
transform: translateY(0);
}

#googleLogin {
background: #ffffff;
color: #111827;
border: 1px solid #d1d5db;
}

#logout {
margin: 0 12px 12px;
background: #ef4444;
}

#aiBtn {
background: #6366f1;
}
</style>
</head>
Expand All @@ -79,9 +198,11 @@
<header>LINE Ultimate</header>

<div id="auth">
<button id="googleLogin">Googleログイン</button><br><br>
<input id="email" placeholder="email"><br><br>
<input id="password" type="password" placeholder="password"><br><br>
<h2>ログインしてチャットを始めましょう</h2>
<p>Google またはメールアドレスでサインインできます。</p>
<button id="googleLogin">Googleログイン</button>
<input id="email" placeholder="email" autocomplete="email">
<input id="password" type="password" placeholder="password" autocomplete="current-password">
<button id="register">新規登録</button>
<button id="login">ログイン</button>
</div>
Expand All @@ -90,9 +211,11 @@
<div id="messages"></div>
<div id="inputArea">
<input id="msg" placeholder="message">
<input type="file" id="imageInput">
<button id="send">送信</button>
<button id="aiBtn">AI</button>
<div id="actions">
<button id="send">送信</button>
<button id="aiBtn">AI</button>
</div>
<input type="file" id="imageInput" accept="image/*">
</div>
<button id="logout">ログアウト</button>
</div>
Expand All @@ -102,10 +225,10 @@
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.0/firebase-app.js";
import { getAuth, GoogleAuthProvider, signInWithPopup,
createUserWithEmailAndPassword, signInWithEmailAndPassword,
onAuthStateChanged, signOut }
onAuthStateChanged, signOut }
from "https://www.gstatic.com/firebasejs/10.12.0/firebase-auth.js";
import { getFirestore, collection, addDoc, onSnapshot,
query, orderBy, serverTimestamp }
query, orderBy, serverTimestamp }
from "https://www.gstatic.com/firebasejs/10.12.0/firebase-firestore.js";

const firebaseConfig = {
Expand All @@ -116,9 +239,9 @@
messagingSenderId: "35972275719",
appId: "1:35972275719:web:383fd1ac8a47ceca96d4a2"
};

const GEMMA_KEY = "AIzaSyDY0Jcd-72QPZlfOJAtUCYxeRrjHBvJRtQ";

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
Expand Down Expand Up @@ -155,7 +278,7 @@
/* 認証監視 */
onAuthStateChanged(auth,user=>{
if(!user){
authDiv.style.display="block";
authDiv.style.display="grid";
chatDiv.style.display="none";
return;
}
Expand Down