crazy/index.html at claude/general-session-QT7rX · JWang975/crazy · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>复古胶片相机</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="scene">
    <!-- 相机主体 -->
    <div class="camera">
      <!-- 顶部 -->
      <div class="camera-top">
        <div class="hot-shoe"></div>
        <div class="shutter-dial">
          <div class="dial-label">1/60</div>
        </div>
        <div class="film-advance">
          <div class="advance-knob"></div>
        </div>
        <div class="iso-dial">
          <div class="dial-label">ISO</div>
          <select id="isoSelect" class="iso-select">
            <option value="100">100</option>
            <option value="200">200</option>
            <option value="400" selected>400</option>
            <option value="800">800</option>
          </select>
        </div>
      </div>

      <!-- 相机正面 -->
      <div class="camera-body">
        <!-- 左侧 -->
        <div class="camera-left">
          <div class="self-timer-lamp"></div>
          <div class="brand-text">FUJIFILM</div>
          <div class="model-text">RETRO-X</div>
        </div>

        <!-- 镜头区域 -->
        <div class="lens-assembly">
          <!-- 滤镜选择环 -->
          <div class="filter-ring">
            <button class="filter-btn active" data-filter="none" title="原版">●</button>
            <button class="filter-btn" data-filter="sepia" title="复古棕褪">S</button>
            <button class="filter-btn" data-filter="bw" title="黑白">B</button>
            <button class="filter-btn" data-filter="faded" title="褪色">F</button>
            <button class="filter-btn" data-filter="warm" title="暖调">W</button>
            <button class="filter-btn" data-filter="cool" title="冷调">C</button>
          </div>

          <!-- 镜头 -->
          <div class="lens-outer">
            <div class="lens-middle">
              <div class="lens-inner">
                <div class="viewfinder-container">
                  <video id="video" autoplay playsinline></video>
                  <canvas id="filterCanvas" class="filter-canvas"></canvas>
                  <div class="viewfinder-overlay">
                    <div class="corner tl"></div>
                    <div class="corner tr"></div>
                    <div class="corner bl"></div>
                    <div class="corner br"></div>
                    <div class="focus-reticle"></div>
                  </div>
                  <div class="shutter-flash" id="shutterFlash"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="lens-label">FUJINON 35mm f/2.0</div>
        </div>

        <!-- 右侧 -->
        <div class="camera-right">
          <div class="exposure-counter">
            <div class="counter-label">EXP</div>
            <div class="counter-value" id="exposureCounter">00</div>
          </div>
          <button class="shutter-btn" id="shutterBtn">
            <div class="shutter-btn-inner"></div>
          </button>
          <div class="viewfinder-window">
            <div class="vf-inner"></div>
          </div>
        </div>
      </div>

      <!-- 底部 -->
      <div class="camera-bottom">
        <div class="tripod-mount"></div>
        <div class="battery-door"></div>
        <div class="serial-number">SN: 1987-04-XX</div>
      </div>
    </div>

    <!-- 胶卷计数器和提示 -->
    <div class="film-strip" id="filmStrip">
      <div class="film-label">FUJICOLOR 400  ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■</div>
    </div>
  </div>

  <!-- 照片画廊 -->
  <div class="gallery-section">
    <h2 class="gallery-title">— 冲洗照片 —</h2>
    <div class="gallery" id="gallery">
      <div class="gallery-empty" id="galleryEmpty">
        <div class="empty-film-icon">⬡</div>
        <p>还没有照片，按下快门开始拍摄</p>
      </div>
    </div>
  </div>

  <!-- 隐藏的画布用于拍照 -->
  <canvas id="captureCanvas" style="display:none;"></canvas>

  <!-- 灯箱 -->
  <div class="lightbox" id="lightbox">
    <button class="lightbox-close" id="lightboxClose">✕</button>
    <img class="lightbox-img" id="lightboxImg" src="" alt="">
    <div class="lightbox-info" id="lightboxInfo"></div>
  </div>

  <script src="camera.js"></script>
</body>
</html>