The phone link no longer depends on the local network. The IDE dials out to turkservis.online and bridges tunnel streams to its own TLS proxy on loopback; the phone runs TLS to the pinned IDE certificate inside the tunnel, so the relay only carries ciphertext. The proxy binds to 127.0.0.1 by default and enabling the feature never asks for a firewall rule; direct same-network access is an explicit option. The window shows the real relay, listener and firewall state, and pairing no longer needs local addresses. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01B8ppceaR5s6cvMnm7uGRnf
27 lines
2.1 KiB
CSS
27 lines
2.1 KiB
CSS
/* "Telefon bağlantısı" window; builds on apps/mobile/src/style.css (copied to dist/mobile/). */
|
||
.switch { display:flex; align-items:center; gap:10px; margin:22px 0; font-size:1.1rem; cursor:pointer }
|
||
.switch input { width:26px; height:26px; margin:0; flex:none }
|
||
.warning { border-left:3px solid var(--danger); background:var(--surface); padding:10px 14px; margin:16px 0 }
|
||
.warning p { color:var(--text); margin:4px 0 }
|
||
.code { font-family:ui-monospace,Consolas,monospace; font-size:2.6rem; font-weight:750; letter-spacing:.12em; color:var(--text); text-align:center; margin:10px 0; user-select:all }
|
||
.countdown { text-align:center; color:var(--text); font-weight:600 }
|
||
.hint { text-align:center }
|
||
#pair-qr { display:block; margin:14px auto; border-radius:8px; width:260px; height:260px }
|
||
#pair-live p { text-align:center }
|
||
.device { display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid var(--stroke); border-radius:8px; padding:10px 14px; margin:10px 0 }
|
||
.device strong { color:var(--text); display:block; overflow-wrap:anywhere }
|
||
.device small { display:block }
|
||
.device button { flex:none; margin:0 }
|
||
footer { margin-top:34px }
|
||
button.link { background:none; color:var(--accent); min-height:0; padding:0; margin:0; font-weight:600; text-decoration:underline }
|
||
.status-row { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 12px; border-bottom:1px solid var(--stroke); padding:10px 0 }
|
||
.status-row strong { color:var(--text); overflow-wrap:anywhere }
|
||
.status-row strong::before { content:''; display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:8px; background:var(--stroke) }
|
||
.status-row strong[data-state=connected]::before { background:var(--accent) }
|
||
.status-row strong[data-state=failed]::before { background:var(--danger) }
|
||
.status-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:12px 0 }
|
||
.status-actions button { margin:0; min-height:44px }
|
||
.security { font-family:ui-monospace,Consolas,monospace; color:var(--text); overflow-wrap:anywhere }
|
||
footer { display:flex; flex-wrap:wrap; gap:8px 20px }
|
||
footer button.link { min-height:44px }
|