anne
/
exam_main_2026


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>手机预览 - 实验室安全教育考试系统</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  min-height: 100vh;
  background: linear-gradient(135deg, #0f1728 0%, #1a2a4a 50%, #0f1728 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* ===== AMBIENT GLOW ===== */
body::before {
  content: '';
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(22,119,255,0.15) 0%, transparent 70%);
  pointer-events: none;
}

/* ===== DEVICE SWITCHER ===== */
.toolbar {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 40px;
  padding: 6px 10px;
  z-index: 100;
}
.device-btn {
  padding: 6px 16px;
  border-radius: 30px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.55);
  font-size: 13px;
  cursor: pointer;
  transition: all .2s;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.device-btn.active {
  background: rgba(22,119,255,0.85);
  color: #fff;
  box-shadow: 0 2px 12px rgba(22,119,255,0.4);
}
.device-btn:hover:not(.active) {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.85);
}

/* ===== PHONE SHELL ===== */
.phone-wrap {
  position: relative;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* iPhone 14 Pro style */
.phone-shell {
  position: relative;
  background: #1a1a1e;
  border-radius: 54px;
  padding: 14px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 0 0 2px #2a2a2e,
    0 0 0 3px rgba(255,255,255,0.05),
    0 40px 80px rgba(0,0,0,0.6),
    0 0 60px rgba(22,119,255,0.08);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Side buttons */
.phone-shell::before {
  content: '';
  position: absolute;
  left: -3px;
  top: 110px;
  width: 3px;
  height: 36px;
  background: #2a2a2e;
  border-radius: 2px 0 0 2px;
  box-shadow: 0 46px 0 #2a2a2e, 0 90px 0 #2a2a2e;
}
.phone-shell::after {
  content: '';
  position: absolute;
  right: -3px;
  top: 140px;
  width: 3px;
  height: 68px;
  background: #2a2a2e;
  border-radius: 0 2px 2px 0;
}

/* Screen bezel */
.phone-screen {
  background: #000;
  border-radius: 42px;
  overflow: hidden;
  position: relative;
}

/* Dynamic island */
.dynamic-island {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 34px;
  background: #000;
  border-radius: 20px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 10px;
  gap: 6px;
}
.di-camera {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #1a1a1e;
  border: 1px solid #2a2a2e;
  position: relative;
}
.di-camera::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #0a0a10;
}

/* Status bar */
.status-bar {
  height: 54px;
  background: #fff;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 28px 8px;
  font-size: 12px;
  font-weight: 600;
  color: #1a1a1a;
  font-family: -apple-system, sans-serif;
  flex-shrink: 0;
}
.status-time { font-size: 15px; font-weight: 700; letter-spacing: -0.3px; }
.status-icons { display: flex; align-items: center; gap: 6px; }
.status-icons svg { color: #1a1a1a; }

/* Home indicator */
.home-indicator {
  height: 34px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.home-bar {
  width: 134px; height: 5px;
  background: #1a1a1a;
  border-radius: 3px;
  opacity: 0.2;
}

/* The iframe */
.phone-iframe {
  width: 100%;
  border: none;
  display: block;
  flex: 1;
  min-height: 0;
}

/* ===== SIZE VARIANTS ===== */
/* iPhone 14 Pro: 393x852 logical px */
.size-iphone .phone-shell { width: 421px; }
.size-iphone .phone-screen { height: 754px; display: flex; flex-direction: column; }
.size-iphone .phone-iframe { height: 666px; }

/* iPad mini */
.size-ipad .phone-shell { width: 560px; border-radius: 32px; padding: 12px; }
.size-ipad .phone-screen { border-radius: 24px; height: 820px; display: flex; flex-direction: column; }
.size-ipad .phone-iframe { height: 732px; }
.size-ipad .dynamic-island { display: none; }
.size-ipad .status-bar { height: 44px; background: #f0f2f5; }
.size-ipad .home-indicator { background: #f0f2f5; }

/* Small phone (SE style) */
.size-small .phone-shell { width: 360px; }
.size-small .phone-screen { height: 660px; display: flex; flex-direction: column; }
.size-small .phone-iframe { height: 572px; }

/* ===== SCALE HINT ===== */
.scale-hint {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.3);
  font-size: 12px;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* ===== ROTATE PHONE (landscape tablet) ===== */
.size-ipad .phone-shell::before,
.size-ipad .phone-shell::after { display: none; }

/* ===== CLOCK UPDATE ===== */
</style>
</head>
<body>

<!-- Device selector toolbar -->
<div class="toolbar">
  <button class="device-btn active" onclick="setDevice('iphone')" id="btn-iphone">
    <svg width="13" height="16" viewBox="0 0 13 16" fill="currentColor">
      <rect x="1" y="0" width="11" height="16" rx="2.5" fill="none" stroke="currentColor" stroke-width="1.2"/>
      <rect x="4" y="13.5" width="5" height="1.2" rx="0.6"/>
      <rect x="4.5" y="1.2" width="4" height="0.8" rx="0.4"/>
    </svg>
    iPhone 14 Pro
  </button>
  <button class="device-btn" onclick="setDevice('small')" id="btn-small">
    <svg width="11" height="14" viewBox="0 0 11 14" fill="currentColor">
      <rect x="1" y="0" width="9" height="14" rx="2" fill="none" stroke="currentColor" stroke-width="1.2"/>
      <rect x="3.5" y="11.5" width="4" height="1" rx="0.5"/>
    </svg>
    小屏手机
  </button>
  <button class="device-btn" onclick="setDevice('ipad')" id="btn-ipad">
    <svg width="16" height="13" viewBox="0 0 16 13" fill="currentColor">
      <rect x="0" y="1" width="16" height="11" rx="2" fill="none" stroke="currentColor" stroke-width="1.2"/>
      <rect x="13.2" y="4" width="1.2" height="5" rx="0.6"/>
    </svg>
    平板
  </button>
</div>

<!-- Phone frame -->
<div class="phone-wrap size-iphone" id="phoneWrap">
  <div class="phone-shell">
    <div class="phone-screen">
      <!-- Dynamic island -->
      <div class="dynamic-island">
        <div class="di-camera"></div>
      </div>
      <!-- Status bar -->
      <div class="status-bar">
        <span class="status-time" id="clockTime">9:41</span>
        <div class="status-icons">
          <!-- Signal -->
          <svg width="17" height="12" viewBox="0 0 17 12" fill="currentColor">
            <rect x="0" y="7" width="3" height="5" rx="0.5"/>
            <rect x="4.5" y="4.5" width="3" height="7.5" rx="0.5"/>
            <rect x="9" y="2" width="3" height="10" rx="0.5"/>
            <rect x="13.5" y="0" width="3" height="12" rx="0.5" opacity="0.3"/>
          </svg>
          <!-- WiFi -->
          <svg width="16" height="12" viewBox="0 0 16 12" fill="currentColor">
            <path d="M8 10.5 L8 10.5 A0.7 0.7 0 0 1 8 10.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
            <path d="M5.5 8.2 Q8 5.8 10.5 8.2" stroke="currentColor" stroke-width="1.4" fill="none" stroke-linecap="round"/>
            <path d="M3 5.8 Q8 1.2 13 5.8" stroke="currentColor" stroke-width="1.4" fill="none" stroke-linecap="round"/>
            <path d="M0.5 3.2 Q8 -3.5 15.5 3.2" stroke="currentColor" stroke-width="1.4" fill="none" stroke-linecap="round" opacity="0.3"/>
          </svg>
          <!-- Battery -->
          <svg width="25" height="12" viewBox="0 0 25 12" fill="currentColor">
            <rect x="0" y="1" width="21" height="10" rx="2.5" fill="none" stroke="currentColor" stroke-width="1.2"/>
            <rect x="1.5" y="2.5" width="16" height="7" rx="1.5" opacity="0.9"/>
            <path d="M22.5 4 Q24.5 4 24.5 6 Q24.5 8 22.5 8Z" opacity="0.4"/>
          </svg>
        </div>
      </div>
      <!-- App iframe -->
      <iframe
        class="phone-iframe"
        id="appFrame"
        src="index.html"
        title="实验室安全教育考试系统"
      ></iframe>
      <!-- Home indicator -->
      <div class="home-indicator">
        <div class="home-bar"></div>
      </div>
    </div>
  </div>
</div>

<div class="scale-hint" id="scaleHint">393 × 852 · iPhone 14 Pro</div>

<script>
// Clock
function updateClock() {
  var now = new Date();
  var h = now.getHours(), m = now.getMinutes();
  document.getElementById('clockTime').textContent =
    h + ':' + (m < 10 ? '0' : '') + m;
}
updateClock();
setInterval(updateClock, 10000);

// Device switcher
var devices = {
  iphone: { cls: 'size-iphone', hint: '393 × 852 · iPhone 14 Pro' },
  small:  { cls: 'size-small',  hint: '360 × 780 · 小屏手机' },
  ipad:   { cls: 'size-ipad',   hint: '768 × 1024 · 平板' }
};
var current = 'iphone';

function setDevice(name) {
  var wrap = document.getElementById('phoneWrap');
  wrap.classList.remove(devices[current].cls);
  wrap.classList.add(devices[name].cls);
  document.getElementById('btn-' + current).classList.remove('active');
  document.getElementById('btn-' + name).classList.add('active');
  document.getElementById('scaleHint').textContent = devices[name].hint;
  current = name;
  // Resize iframe to fit
  var frame = document.getElementById('appFrame');
  frame.src = frame.src; // reload for clean state
}

// Auto-scale phone to fit viewport height
function autoScale() {
  var wrap = document.getElementById('phoneWrap');
  var shell = wrap.querySelector('.phone-shell');
  var vh = window.innerHeight - 100; // leave room for toolbar+hint
  var shellH = shell.offsetHeight;
  if (shellH > vh) {
    var s = vh / shellH;
    wrap.style.transform = 'scale(' + s + ')';
    wrap.style.marginTop = ((shellH * s - shellH) / 2) + 'px';
    wrap.style.marginBottom = ((shellH * s - shellH) / 2) + 'px';
  } else {
    wrap.style.transform = '';
    wrap.style.marginTop = '';
    wrap.style.marginBottom = '';
  }
}
window.addEventListener('resize', autoScale);
setTimeout(autoScale, 100);
</script>
</body>
</html>