基本機能実装

1 files changed, 149 insertions, 0 deletions

diff --git a/src/ollama_web/static/style.css b/src/ollama_web/static/style.css
new file mode 100644
index 0000000..ece20c1
--- /dev/null
+++ b/src/ollama_web/static/style.css
@@ -0,0 +1,149 @@
+:root {
+  --bg: #0d1117;
+  --panel: #161b22;
+  --border: #30363d;
+  --text: #e6edf3;
+  --muted: #8b949e;
+  --accent: #58a6ff;
+  --user-bg: #1f6feb22;
+  --assistant-bg: #161b22;
+  --tool-bg: #2d1117;
+  --think-bg: #1a2332;
+}
+
+* { box-sizing: border-box; }
+
+html, body {
+  margin: 0;
+  height: 100%;
+  background: var(--bg);
+  color: var(--text);
+  font-family: system-ui, "Segoe UI", sans-serif;
+  font-size: 15px;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 10px 16px;
+  background: var(--panel);
+  border-bottom: 1px solid var(--border);
+}
+
+header h1 {
+  font-size: 18px;
+  margin: 0;
+}
+
+.controls {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-left: auto;
+}
+
+select, button, input[type="checkbox"] {
+  background: var(--bg);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 4px 8px;
+  font-size: 14px;
+}
+
+button { cursor: pointer; }
+button:hover { border-color: var(--accent); }
+
+.think-toggle { display: flex; align-items: center; gap: 4px; color: var(--muted); }
+
+main#chat {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.message {
+  max-width: 860px;
+  width: 100%;
+  margin: 0 auto;
+  padding: 12px 14px;
+  border-radius: 10px;
+  border: 1px solid var(--border);
+  line-height: 1.6;
+}
+
+.message.user { background: var(--user-bg); }
+.message.assistant { background: var(--assistant-bg); }
+.message .role { font-weight: 600; margin-bottom: 6px; color: var(--muted); }
+
+.message pre {
+  background: #010409;
+  border-radius: 8px;
+  padding: 10px;
+  overflow-x: auto;
+}
+
+.message code { font-family: "SFMono-Regular", Consolas, monospace; font-size: 13px; }
+.message p { margin: 8px 0; }
+.message ul, .message ol { padding-left: 22px; }
+
+.tool {
+  max-width: 860px;
+  width: 100%;
+  margin: 0 auto;
+  padding: 8px 12px;
+  border-radius: 8px;
+  border: 1px dashed var(--border);
+  background: var(--tool-bg);
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.tool .name { color: var(--accent); font-weight: 600; }
+.tool .args, .tool .result { color: var(--muted); white-space: pre-wrap; word-break: break-word; }
+.tool details summary { cursor: pointer; color: var(--accent); }
+
+.thinking {
+  max-width: 860px;
+  width: 100%;
+  margin: 0 auto;
+  padding: 8px 12px;
+  border-radius: 8px;
+  border: 1px solid var(--border);
+  background: var(--think-bg);
+  color: var(--muted);
+  font-size: 13px;
+}
+.thinking summary { cursor: pointer; color: var(--accent); }
+
+form#input-form {
+  display: flex;
+  gap: 8px;
+  padding: 12px 16px;
+  background: var(--panel);
+  border-top: 1px solid var(--border);
+}
+
+textarea#input {
+  flex: 1;
+  resize: none;
+  background: var(--bg);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 10px;
+  font-size: 15px;
+  font-family: inherit;
+}
+
+button#send-btn { padding: 0 20px; }
\ No newline at end of file