html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
font-family:
Arial,
"Yu Gothic",
sans-serif;
background: #05070c;
}
/* ========================================
MAP
======================================== */
#map {
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
z-index: 1;
}
/* ========================================
OBSERVER
======================================== */
#observerView {
position: fixed;
inset: 0;
z-index: 2;
visibility: hidden;
opacity: 0;
pointer-events: none;
transition:
opacity 0.25s ease;
}
#observerView.active {
visibility: visible;
opacity: 1;
pointer-events: auto;
}
#observerSky {
position: absolute;
inset: 0;
overflow: hidden;
background:
radial-gradient(
circle at 50% 100%,
#18264a 0%,
#091126 35%,
#040711 75%,
#010207 100%
);
}
/* ========================================
STARS
======================================== */
.stars {
position: absolute;
inset: 0;
opacity: 0.65;
pointer-events: none;
}
.stars1 {
background-image:
radial-gradient(
white 0.7px,
transparent 0.8px
);
background-size:
47px 47px;
}
.stars2 {
background-image:
radial-gradient(
rgba(180,210,255,.8) 0.6px,
transparent 0.8px
);
background-size:
73px 73px;
background-position:
21px 33px;
}
/* ========================================
GROUND
======================================== */
#observerGround {
position: absolute;
left: 0;
right: 0;
height: 100%;
background:
linear-gradient(
to bottom,
rgba(15,22,31,.95),
rgba(4,6,8,1)
);
z-index: 2;
}
.groundGlow {
position: absolute;
top: 0;
width: 100%;
height: 80px;
background:
linear-gradient(
to bottom,
rgba(255,150,70,.07),
transparent
);
}
/* ========================================
HORIZON
======================================== */
#observerHorizon {
position: absolute;
left: 0;
width: 100%;
height: 1px;
background:
rgba(80,200,255,.85);
box-shadow:
0 0 8px
rgba(80,200,255,.7);
z-index: 8;
}
#observerHorizon span {
position: absolute;
right: 25px;
top: 7px;
color:
rgba(130,220,255,.8);
font-size: 10px;
}
/* ========================================
FIREWORK
======================================== */
#observerFirework {
position: absolute;
transform:
translate(-50%, -50%);
min-width: 8px;
min-height: 8px;
border-radius: 50%;
z-index: 6;
background:
radial-gradient(
circle,
white 0%,
#fff7b0 3%,
rgba(255,180,60,.9) 8%,
rgba(255,100,30,.35) 28%,
transparent 65%
);
filter:
drop-shadow(
0 0 8px
rgba(255,180,70,.8)
);
}
.observer-firework-ring {
position: absolute;
border-radius: 50%;
border:
1px dashed
rgba(255,210,100,.75);
}
.ring1 {
inset: 5%;
}
.ring2 {
inset: 22%;
}
.ring3 {
inset: 39%;
}
.observer-firework-core {
position: absolute;
left: 50%;
top: 50%;
width: 6px;
height: 6px;
transform:
translate(-50%,-50%);
border-radius: 50%;
background: white;
box-shadow:
0 0 10px white,
0 0 20px #ffb74d;
}
/* ========================================
OBSERVER GRID
======================================== */
.observer-grid {
position: absolute;
background:
rgba(255,255,255,.09);
z-index: 10;
pointer-events: none;
}
.observer-grid-h1 {
top: 33.333%;
width: 100%;
height: 1px;
}
.observer-grid-h2 {
top: 66.666%;
width: 100%;
height: 1px;
}
.observer-grid-v1 {
left: 33.333%;
width: 1px;
height: 100%;
}
.observer-grid-v2 {
left: 66.666%;
width: 1px;
height: 100%;
}
/* ========================================
CENTER
======================================== */
.observer-center-h {
position: absolute;
left: calc(50% - 20px);
top: 50%;
width: 40px;
height: 1px;
background:
rgba(255,255,255,.35);
z-index: 11;
}
.observer-center-v {
position: absolute;
left: 50%;
top: calc(50% - 20px);
width: 1px;
height: 40px;
background:
rgba(255,255,255,.35);
z-index: 11;
}
/* ========================================
COMPASS
======================================== */
#observerCompass {
position: absolute;
top: 25px;
left: 50%;
transform:
translateX(-50%);
padding:
7px 18px;
color: white;
background:
rgba(0,0,0,.45);
border:
1px solid
rgba(255,255,255,.2);
border-radius: 20px;
font-family:
monospace;
z-index: 20;
}
/* ========================================
HUD
======================================== */
#observerHUD {
position: absolute;
left: 50%;
bottom: 25px;
transform:
translateX(-50%);
min-width: 500px;
padding:
10px 20px;
color:
rgba(255,255,255,.9);
background:
rgba(0,0,0,.55);
border:
1px solid
rgba(255,255,255,.15);
border-radius: 8px;
text-align: center;
font-family:
monospace;
font-size: 12px;
line-height: 1.8;
z-index: 20;
}
/* ========================================
WARNING
======================================== */
#observerWarning {
display: none;
position: absolute;
top: 80px;
left: 50%;
transform:
translateX(-50%);
padding:
8px 15px;
color:
#ffd54f;
background:
rgba(0,0,0,.65);
border:
1px solid
rgba(255,200,50,.5);
border-radius: 6px;
z-index: 30;
}
#observerWarning.visible {
display: block;
}
/* ========================================
MODE BUTTON
======================================== */
#modeButtons {
position: fixed;
top: 20px;
left: 50%;
transform:
translateX(-50%);
display: flex;
gap: 5px;
padding: 5px;
background:
rgba(15,15,20,.82);
border-radius: 9px;
z-index: 100;
}
.mode-button {
width: auto;
margin: 0;
padding:
8px 15px;
border-radius: 6px;
background:
transparent;
color: #cccccc;
}
.mode-button.active {
color: #111111;
background: white;
}
/* ========================================
PANEL
======================================== */
#panel {
position: fixed;
top: 20px;
left: 20px;
width: 320px;
max-height:
calc(100vh - 40px);
overflow-y: auto;
box-sizing: border-box;
padding: 18px;
color: white;
background:
rgba(20,20,25,.93);
border-radius: 12px;
box-shadow:
0 4px 20px
rgba(0,0,0,.4);
z-index: 50;
}
#panel h1 {
margin:
0 0 5px;
font-size: 20px;
}
#panel h2 {
margin:
14px 0 12px;
font-size: 15px;
}
.version {
margin:
0 0 18px;
color: #aaaaaa;
font-size: 12px;
}
#panel hr {
margin:
18px 0;
border: 0;
border-top:
1px solid
rgba(255,255,255,.3);
}
/* ========================================
FORM
======================================== */
button {
width: 100%;
margin-bottom: 10px;
padding: 10px;
border: 0;
border-radius: 6px;
cursor: pointer;
}
.setting-row {
display: flex;
align-items: center;
justify-content:
space-between;
gap: 10px;
margin:
10px 0;
}
.setting-row label {
font-size: 13px;
}
select {
min-width: 140px;
padding: 6px;
border-radius: 4px;
}
.input-unit {
display: flex;
align-items: center;
gap: 5px;
}
input[type="number"] {
width: 75px;
padding: 6px;
box-sizing: border-box;
}
/* ========================================
TILT
======================================== */
.tilt-section {
margin-top: 14px;
padding: 10px;
background:
rgba(255,255,255,.06);
border-radius: 8px;
}
#cameraTiltSlider {
width: 100%;
accent-color:
#ff9800;
}
.tilt-scale {
display: flex;
justify-content:
space-between;
margin-bottom: 10px;
color: #888888;
font-size: 9px;
}
.composition-buttons {
display: grid;
grid-template-columns:
1fr 1fr;
gap: 5px;
}
.composition-buttons button {
margin: 0;
font-size: 11px;
}
/* ========================================
RESULTS
======================================== */
#result,
#cameraResult {
font-size: 13px;
line-height: 1.5;
}
#result p,
#cameraResult p {
margin:
8px 0;
}
#cameraResult {
margin-top: 12px;
padding: 10px;
background:
rgba(255,255,255,.06);
border-radius: 7px;
}
.frame-percent strong {
color:
#ffd54f;
font-size: 16px;
}
/* ========================================
MINI VIEWFINDER
======================================== */
#viewfinder {
position: relative;
width: 100%;
aspect-ratio:
3 / 2;
overflow: hidden;
border:
3px solid
rgba(255,255,255,.75);
border-radius: 7px;
box-sizing: border-box;
background:
#070b16;
}
#viewfinder.portrait {
width: 70%;
margin:
0 auto;
aspect-ratio:
2 / 3;
}
#viewfinderSky {
position: absolute;
inset:
0 0 40px 0;
overflow: hidden;
background:
linear-gradient(
#050814,
#10182b
);
}
.third-line {
position: absolute;
background:
rgba(255,255,255,.09);
}
.third-horizontal-1 {
top: 33.333%;
width: 100%;
height: 1px;
}
.third-horizontal-2 {
top: 66.666%;
width: 100%;
height: 1px;
}
.third-vertical-1 {
left: 33.333%;
width: 1px;
height: 100%;
}
.third-vertical-2 {
left: 66.666%;
width: 1px;
height: 100%;
}
.vf-crosshair-horizontal {
position: absolute;
left: 43%;
top: 50%;
width: 14%;
height: 1px;
background:
rgba(255,255,255,.3);
}
.vf-crosshair-vertical {
position: absolute;
left: 50%;
top: 45%;
width: 1px;
height: 10%;
background:
rgba(255,255,255,.3);
}
#horizonLine {
position: absolute;
left: 0;
width: 100%;
height: 1px;
background:
#64cfff;
}
#horizonLine span {
position: absolute;
right: 4px;
top: 3px;
color:
#8edcff;
font-size: 8px;
}
#fireworkPreview {
position: absolute;
transform:
translate(-50%,-50%);
border-radius: 50%;
background:
radial-gradient(
circle,
white,
#ffd166 7%,
rgba(255,120,30,.5) 30%,
transparent 70%
);
}
.firework-core {
position: absolute;
left: 50%;
top: 50%;
width: 4px;
height: 4px;
transform:
translate(-50%,-50%);
border-radius: 50%;
background: white;
}
#viewfinderInfo {
position: absolute;
left: 0;
right: 0;
bottom: 0;
min-height: 40px;
padding: 5px;
box-sizing: border-box;
color: #dddddd;
background:
rgba(0,0,0,.9);
text-align: center;
font-size: 9px;
z-index: 20;
}
/* ========================================
SCROLL
======================================== */
#panel::-webkit-scrollbar {
width: 6px;
}
#panel::-webkit-scrollbar-thumb {
background:
rgba(255,255,255,.25);
border-radius: 10px;
}
/* =========================================================
Ver.0.8
実カメラフレーム
========================================================= */
/* ========================================
撮影者視点全体
======================================== */
#observerView {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background:
radial-gradient(
circle at center,
#10182d 0%,
#050914 55%,
#02040a 100%
);
}
/* ========================================
背景
======================================== */
#observerBackground {
position: absolute;
inset: 0;
background-image:
radial-gradient(
circle,
rgba(255,255,255,0.5) 1px,
transparent 1px
);
background-size:
80px 80px;
opacity: 0.35;
}
/* ========================================
カメラフレーム配置領域
======================================== */
#cameraFrameWrapper {
position: absolute;
top: 50%;
left: 50%;
transform:
translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
width: calc(100% - 380px);
height: calc(100% - 120px);
pointer-events: none;
}
/* ========================================
実カメラフレーム
======================================== */
#cameraFrame {
position: relative;
overflow: hidden;
background: #050914;
border:
2px solid
rgba(255,255,255,0.9);
box-shadow:
0 0 0 9999px
rgba(0,0,0,0.50),
0 0 30px
rgba(0,0,0,0.8);
}
/* ========================================
横位置
フルサイズ 36 × 24 mm
= 3 : 2
======================================== */
#cameraFrame.landscape {
aspect-ratio: 3 / 2;
}
/* ========================================
縦位置
24 × 36 mm
= 2 : 3
======================================== */
#cameraFrame.portrait {
aspect-ratio: 2 / 3;
}
/* ========================================
フレーム内部
======================================== */
#cameraSky {
position: absolute;
inset: 0;
overflow: hidden;
background:
linear-gradient(
to bottom,
#020612 0%,
#071126 60%,
#101927 100%
);
}
/* ========================================
グリッド
======================================== */
.camera-grid {
position: absolute;
pointer-events: none;
background:
rgba(255,255,255,0.10);
}
/* 縦 */
.camera-grid-v1 {
top: 0;
bottom: 0;
left: 33.333%;
width: 1px;
}
.camera-grid-v2 {
top: 0;
bottom: 0;
left: 66.666%;
width: 1px;
}
/* 横 */
.camera-grid-h1 {
left: 0;
right: 0;
top: 33.333%;
height: 1px;
}
.camera-grid-h2 {
left: 0;
right: 0;
top: 66.666%;
height: 1px;
}
/* ========================================
水平線
======================================== */
#cameraHorizon {
position: absolute;
left: 0;
width: 100%;
height: 1px;
background:
rgba(80,210,255,0.95);
box-shadow:
0 0 5px
rgba(80,210,255,0.7);
transform:
translateY(-50%);
}
#cameraHorizon span {
position: absolute;
right: 8px;
bottom: 5px;
color:
rgba(100,220,255,0.9);
font-size: 10px;
}
/* ========================================
花火
======================================== */
#observerFirework {
position: absolute;
transform:
translate(-50%, -50%);
border-radius: 50%;
pointer-events: none;
}
.observer-firework-glow {
position: absolute;
inset: 0;
border-radius: 50%;
background:
radial-gradient(
circle,
rgba(255,255,230,1) 0%,
rgba(255,205,90,0.95) 8%,
rgba(255,155,45,0.70) 25%,
rgba(255,110,30,0.30) 50%,
transparent 72%
);
filter:
blur(4px);
}
.observer-firework-ring {
position: absolute;
top: 50%;
left: 50%;
transform:
translate(-50%, -50%);
border:
1px dashed
rgba(255,190,70,0.8);
border-radius: 50%;
}
.ring-outer {
width: 100%;
height: 100%;
}
.ring-middle {
width: 60%;
height: 60%;
}
.ring-inner {
width: 25%;
height: 25%;
}
.observer-firework-core {
position: absolute;
top: 50%;
left: 50%;
width: 8%;
height: 8%;
transform:
translate(-50%, -50%);
border-radius: 50%;
background:
white;
box-shadow:
0 0 10px white,
0 0 20px
rgba(255,190,70,1);
}
/* ========================================
中央クロス
======================================== */
#cameraCrosshair {
position: absolute;
top: 50%;
left: 50%;
width: 28px;
height: 28px;
transform:
translate(-50%, -50%);
opacity: 0.6;
}
.crosshair-horizontal {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background:
rgba(255,255,255,0.7);
}
.crosshair-vertical {
position: absolute;
top: 0;
left: 50%;
width: 1px;
height: 100%;
background:
rgba(255,255,255,0.7);
}
/* ========================================
3分割線
======================================== */
.third-line {
position: absolute;
background:
rgba(255,255,255,0.08);
}
.third-line-top {
left: 0;
right: 0;
top: 33.333%;
height: 1px;
}
.third-line-bottom {
left: 0;
right: 0;
top: 66.666%;
height: 1px;
}
.third-line-left {
top: 0;
bottom: 0;
left: 33.333%;
width: 1px;
}
.third-line-right {
top: 0;
bottom: 0;
left: 66.666%;
width: 1px;
}
/* ========================================
撮影情報
======================================== */
#observerInfo {
position: absolute;
left: 50%;
bottom: 20px;
transform:
translateX(-50%);
min-width: 430px;
padding:
10px 20px;
text-align: center;
color: white;
font-size: 13px;
line-height: 1.7;
background:
rgba(0,0,0,0.72);
border:
1px solid
rgba(255,255,255,0.2);
border-radius:
8px;
z-index: 20;
}
.info-separator {
margin:
0 10px;
opacity: 0.4;
}
/* =========================================================
Ver.0.8 FINAL OVERRIDES
実カメラフレーム固定・ウィンドウサイズ非依存
========================================================= */
#observerView {
position: fixed;
inset: 0;
}
#cameraFrameWrapper {
position: absolute;
top: 50%;
left: calc(50% + 170px);
transform: translate(-50%, -50%);
width: calc(100vw - 400px);
height: calc(100vh - 150px);
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
/*
フレームは必ずセンサー比率を維持する。
width と height を別々に 100% にしないのが重要。
*/
#cameraFrame.landscape {
width: min(calc(100vw - 420px), calc((100vh - 170px) * 1.5));
height: auto;
aspect-ratio: 3 / 2;
}
#cameraFrame.portrait {
height: min(calc(100vh - 170px), calc((100vw - 420px) * 1.5));
width: auto;
aspect-ratio: 2 / 3;
}
#observerSky {
position: absolute;
inset: 0;
overflow: hidden;
}
#observerGround {
position: absolute;
left: 0;
right: 0;
height: 100%;
}
#observerHorizon {
position: absolute;
left: 0;
width: 100%;
}
#observerFirework {
aspect-ratio: 1 / 1;
border-radius: 50%;
}
@media (max-width: 800px) {
#cameraFrameWrapper {
left: 50%;
width: calc(100vw - 30px);
height: calc(100vh - 180px);
}
#cameraFrame.landscape {
width: min(calc(100vw - 40px), calc((100vh - 190px) * 1.5));
}
#cameraFrame.portrait {
height: min(calc(100vh - 190px), calc((100vw - 40px) * 1.5));
}
}