education learning

Chinese

The domain name 'aesthetic-test.pages.dev' uses the developer-focused generic top-level domain (.dev) with subdomain 'aesthetic-test'. Its registrable label 'pages' stretches across 5 characters with 2 vowels and three consonants. Splitting it apart reveals one word: pages. No strong language cues emerged from the frequency lists.

html/38/8e/388ef12a-bd6a-4492-a7fc-09cebb1caf9a.html.gz

a36d6efbab69cfc22f283dce36fff180bdc7ec4a596579db449f7fa4fb90e662

e87e550794322e574a1fda0c1549a3c70dae5a93d9113417a429016838eab8cb

2d70e464ca8e39ae730c418e28173542df1d796f671da9e6f647061a107e9bfb

viewport

Abuse Team

CloudFlare, Inc.

pages.dev

Abuse

Admin

Cloudflare-NOC

Cloudflare, Inc.

CLOUDFLARENET


// ====== 开始探索 → 显示授权码输入 ======
function showAuthInput() {
  document.getElementById("auth-intro").style.display = "none";
  document.getElementById("auth-input-area").style.display = "";
  document.getElementById("auth-code").focus();
}

// ====== 授权码（服务端验证） ======
async function sha256(message) {
  const encoder = new TextEncoder();
  const data = encoder.encode(message);
  const hashBuffer = await crypto.subtle.digest("SHA-256", data);
  const hashArray = Array.from(new Uint8Array(hashBuffer));
  return hashArray.map(b => b.toString(16).padStart(2, "0")).join("");
}

async function verifyCode() {
  const input = document.getElementById("auth-code");
  const error = document.getElementById("auth-error");
  const btn = document.querySelector(".auth-btn");
  const code = input.value.trim().toUpperCase();

  if (!code) {
    error.textContent = "请输入授权码";
    input.classList.add("error");
    setTimeout(() => input.classList.remove("error"), 400);
    return;
  }

  // 显示加载状态
  btn.textContent = "验证中...";
  btn.disabled = true;

  try {
    const hash = await sha256(code);
    const res = await fetch("/api/verify", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ hash })
    });
    const data = await res.json();

    if (data.ok) {
      error.textContent = "";
      switchScreen("quiz-screen", false);
      loadQuestion();
    } else if (data.error === "already_used") {
      error.textContent = "该授权码已使用过";
      input.classList.add("error");
      setTimeout(() => input.classList.remove("error"), 400);
    } else {
      error.textContent = "授权码无效，请检查后重试";
      input.classList.add("error");
      setTimeout(() => input.classList.remove("error"), 400);
    }
  } catch (e) {
    error.textContent = "网络错误，请稍后重试";
  } finally {
    btn.textContent = "开始测试";
    btn.disabled = false;
  }
}

// ====== 题目数据 ======
let questionsData = null;
let resultsData = null;
let currentQuestion = 0;
const answers = []; // 记录每题选择的选项index，-1表示未答

async function loadData() {
  const qRes = await fetch("data/questions.json");
  questionsData = await qRes.json();
  const rRes = await fetch("data/results.json");
  resultsData = await rRes.json();
  // 初始化答案数组
  for (let i = 0; i < questionsData.questions.length; i++) {
    answers.push(-1);
  }
}

loadData();

// ====== 页面切换 ======
function switchScreen(id, scrollTop = true) {
  document.querySelectorAll(".screen").forEach(s => s.classList.remove("active"));
  document.getElementById(id).classList.add("active");
  if (scrollTop) window.scrollTo(0, 0);
}

// ====== 答题逻辑 ======
function loadQuestion() {
  if (!questionsData) return;
  const q = questionsData.questions[currentQuestion];
  const total = questionsData.questions.length;
  const isLast = currentQuestion === total - 1;

  document.getElementById("progress-fill").style.width = ((currentQuestion + 1) / total * 100) + "%";
  document.getElementById("progress-text").textContent = `${currentQuestion + 1} / ${total}`;
  document.getElementById("question-text").textContent = q.question;

  // 图片区域
  const imgContainer = document.getElementById("question-image");
  if (typeof QUESTION_IMAGES !== "undefined" && QUESTION_IMAGES[q.id]) {
    imgContainer.innerHTML = QUESTION_IMAGES[q.id];
  } else {
    imgContainer.innerHTML = `<p style="padding:20px;font-size:13px;color:var(--muted);text-align:center;">${q.imageDesc}</p>`;
  }

  // 选项（恢复之前的选择状态）
  const optionsEl = document.getElementById("options");
  optionsEl.innerHTML = "";
  q.options.forEach((opt, i) => {
    const btn = document.createElement("button");
    btn.className = "option-btn";
    if (answers[currentQuestion] === i) btn.classList.add("selected");
    btn.textContent = opt.text;
    btn.onclick = () => selectOption(i);
    optionsEl.appendChild(btn);
  });

  // 导航按钮
  const prevBtn = document.getElementById("prev-btn");
  const submitArea = document.getElementById("submit-area");

  prevBtn.style.visibility = currentQuestion > 0 ? "visible" : "hidden";
  submitArea.style.display = "none";

}

function selectOption(index) {
  const total = questionsData.questions.length;
  const isLast = currentQuestion === total - 1;

  // 记录选择
  answers[currentQuestion] = index;

  // 高亮选中
  document.querySelectorAll(".option-btn").forEach((btn, i) => {
    btn.classList.toggle("selected", i === index);
  });

  // 更新导航状态
  const submitArea = document.getElementById("submit-area");

  if (isLast) {
    // 最后一题选完，自动弹出确认提交
    const allAnswered = answers.every(a => a !== -1);
    if (allAnswered) {
      setTimeout(() => confirmSubmit(), 400);
    }
  } else {
    // 自动跳转下一题（短延迟）
    setTimeout(() => {
      currentQuestion++;
      loadQuestion();
    }, 400);
  }
}

function goToPrev() {
  if (currentQuestion > 0) {
    currentQuestion--;
    loadQuestion();
  }
}

function confirmSubmit() {
  document.getElementById("confirm-modal").classList.add("active");
}

function closeConfirm() {
  document.getElementById("confirm-modal").classList.remove("active");
}

function doSubmit() {
  closeConfirm();
  // 计算分数
  const scores = { structure: 0, color: 0, emotion: 0, dynamic: 0 };
  questionsData.questions.forEach((q, i) => {
    const chosen = answers[i];
    if (chosen !== -1) {
      const opt = q.options[chosen];
      for (const [dim, val] of Object.entries(opt.scores)) {
        scores[dim] += val;
      }
    }
  });
  showResult(scores);
}

// ====== 结果计算 ======
function showResult(scores) {
  switchScreen("result-screen");

  // 归一化分数（百分比），最低保底30%
  const maxPossible = Math.max(...Object.values(scores));
  const minFloor = 0.3;
  const normalized = {};
  for (const [dim, val] of Object.entries(scores)) {
    const raw = maxPossible > 0 ? val / maxPossible : 0;
    normalized[dim] = Math.max(raw, minFloor);
  }

  // 找主导和辅助类型
  const sorted = Object.entries(scores).sort((a, b) => b[1] - a[1]);
  const primary = sorted[0][0];
  const secondary = sorted[1][0];
  const comboKey = `${primary}_${secondary}`;

  const typeInfo = resultsData.types[primary];
  const combo = resultsData.combinations[comboKey];

  // 填充结果页
  const iconMap = { structure: "images/icon-structure.png", color: "images/icon-color.png", emotion: "images/icon-emotion.png", dynamic: "images/icon-dynamic.png" };
  document.getElementById("result-icon").innerHTML = `<img src="${iconMap[primary]}" alt="${typeInfo.name}">`;
  document.getElementById("result-name").textContent = typeInfo.name;
  document.getElementById("result-name").style.color = typeInfo.color;
  document.getElementById("result-sub").textContent = `辅助类型：${resultsData.types[secondary].name}`;
  document.getElementById("result-tagline").textContent = typeInfo.tagline;
  document.getElementById("result-tagline").style.color = typeInfo.color;

  // 分数条
  const barsEl = document.getElementById("score-bars");
  barsEl.innerHTML = "";
  const dims = ["structure", "color", "emotion", "dynamic"];
  const dimColors = { structure: "var(--structure)", color: "var(--color)", emotion: "var(--emotion)", dynamic: "var(--dynamic)" };
  dims.forEach(dim => {
    const pct = Math.round(normalized[dim] * 100);
    barsEl.innerHTML += `
      <div class="score-bar-row">
        <span class="score-bar-label" style="color:${dimColors[dim]}">${resultsData.types[dim].name}</span>
        <div class="score-bar-track">
          <div class="score-bar-fill" style="width:${pct}%;background:${dimColors[dim]}"></div>
        </div>
        <span class="score-bar-value" style="color:${dimColors[dim]}">${pct}%</span>
      </div>`;
  });

  // 雷达图
  drawRadar(normalized);

  // 描述文案
  document.getElementById("result-gift").textContent = combo.gift;
  document.getElementById("result-perspective").textContent = combo.perspective;
  document.getElementById("result-growth").textContent = combo.growth;

  // 推荐艺术家
  const artistsEl = document.getElementById("result-artists");
  artistsEl.innerHTML = "";
  typeInfo.artists.forEach(a => {
    const li = document.createElement("li");
    li.innerHTML = `<strong>${a.name}</strong><br><span style="font-size:13px;color:var(--muted);font-weight:normal;">${a.reason}</span>`;
    artistsEl.appendChild(li);
  });
}

// ====== 雷达图绘制 ======
function drawRadar(normalized) {
  const svg = document.getElementById("radar-chart");
  const cx = 150, cy = 150, r = 90;
  const dims = ["structure", "color", "emotion", "dynamic"];
  const labels = ["秩序", "色彩", "情感", "韵律"];
  const colors = ["var(--structure)", "var(--color)", "var(--emotion)", "var(--dynamic)"];
  const angles = dims.map((_, i) => (Math.PI * 2 * i / 4) - Math.PI / 2);

  let html = "";

  // 背景网格
  [0.25, 0.5, 0.75, 1].forEach(level => {
    const points = angles.map(a =>
      `${cx + r * level * Math.cos(a)},${cy + r * level * Math.sin(a)}`
    ).join(" ");
    html += `<polygon points="${points}" fill="none" stroke="#E5E2DB" stroke-width="1"/>`;
  });

  // 轴线
  angles.forEach(a => {
    html += `<line x1="${cx}" y1="${cy}" x2="${cx + r * Math.cos(a)}" y2="${cy + r * Math.sin(a)}" stroke="#E5E2DB" stroke-width="1"/>`;
  });

  // 数据区域
  const dataPoints = dims.map((dim, i) =>
    `${cx + r * normalized[dim] * Math.cos(angles[i])},${cy + r * normalized[dim] * Math.sin(angles[i])}`
  ).join(" ");
  html += `<polygon points="${dataPoints}" fill="rgba(45,90,123,0.15)" stroke="var(--accent)" stroke-width="2"/>`;

  // 数据点
  dims.forEach((dim, i) => {
    const x = cx + r * normalized[dim] * Math.cos(angles[i]);
    const y = cy + r * normalized[dim] * Math.sin(angles[i]);
    html += `<circle cx="${x}" cy="${y}" r="4" fill="${colors[i]}"/>`;
  });

  // 标签
  const labelOffset = 24;
  dims.forEach((_, i) => {
    const x = cx + (r + labelOffset) * Math.cos(angles[i]);
    const y = cy + (r + labelOffset) * Math.sin(angles[i]);
    const anchor = i === 0 || i === 2 ? "middle" : i === 1 ? "start" : "end";
    html += `<text x="${x}" y="${y}" text-anchor="${anchor}" dominant-baseline="middle" font-size="13" font-weight="600" fill="${colors[i]}">${labels[i]}</text>`;
  });

  svg.innerHTML = html;
}

// ====== 截图分享 ======
let captureBlob = null;

async function captureResult(orientation) {
  const card = document.getElementById("result-card-capture");
  try {
    const canvas = await html2canvas(card, {
      scale: 2,
      backgroundColor: "#F7F5F0",
      useCORS: true,
    });

    canvas.toBlob(blob => {
      captureBlob = blob;
      const url = URL.createObjectURL(blob);
      document.getElementById("capture-preview").src = url;
      document.getElementById("capture-modal").classList.add("active");
    }, "image/png");
  } catch (e) {
    alert("截图失败，请尝试手动截屏");
  }
}

function downloadCapture() {
  if (!captureBlob) return;
  const url = URL.createObjectURL(captureBlob);
  const a = document.createElement("a");
  a.href = url;
  a.download = `审美类型测试-${Date.now()}.png`;
  a.click();
  URL.revokeObjectURL(url);
}

function closeModal() {
  document.getElementById("capture-modal").classList.remove("active");
}

// 点击遮罩关闭
document.getElementById("capture-modal").addEventListener("click", e => {
  if (e.target === e.currentTarget) closeModal();
});

// Enter键提交授权码
document.getElementById("auth-code").addEventListener("keyup", e => {
  if (e.key === "Enter") verifyCode();
});


jsDelivr

审美类型自测与提升指南 · 设计创作必备

✅ Low Risk - http://aesthetic-test.pages.dev/

Requests	IP Address	Location	AS Autonomous System
4	172.66.47.161	United States	AS13335Cloudflare, Inc.
3	151.101.193.229	United States	AS54113Fastly, Inc.
7	2	-	-

Security Scan Report: aesthetic-test.pages.dev

Summary

AI Security Verdict

Low Risk

Risk Factors

Safety Factors

Details

Screenshot

Page Load Overview

Language Analysis

Primary Language

Detection Details

Website Classification

Primary Category

All Detected Categories

Detected Features

Domain & IP Information

Detected Technologies1

Content Similarity HashesFor malware variant detection

TLSH (Trend Micro Locality Sensitive Hash)

ssdeep (Context Triggered Piecewise Hashing)

sdhash (Similarity Digest Hashing)

Image Hashes

Perceptual Hashes

Other Hashes

Scan History