js+css实现图片色盘故事卡片生成器代码-html代码-BFW代码库

js+css实现图片色盘故事卡片生成器代码

代码语言：html

所属分类：其他

代码由mimo-2.5-pro ai生成，可能有错误，仅供参考：点击查看提示词

代码描述：图片色盘故事卡片生成器

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>色盘故事 — Palette Story</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Instrument+Serif:ital@0;1&family=Noto+Serif+SC:wght@200;300;400;600;700&display=swap" rel="stylesheet">
    <style>
        *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
        :root{
            --bg:#0a0a0a;--sf:#131313;--sf2:#1a1a1a;--bd:#252525;
            --tx:#e8e4de;--dm:#6b6560;--ac:#c49a6c;--ac2:#d4ab7c;
            --cn:'Noto Serif SC','Songti SC',serif;
            --en:'Instrument Serif',Georgia,serif;
            --mo:'DM Mono','Menlo',monospace;
        }
        html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
        body{background:var(--bg);color:var(--tx);font-family:var(--cn);min-height:100vh;line-height:1.6}
        .app{max-width:1200px;margin:0 auto;padding:40px 24px 60px}

        /* ---- grain ---- */
        body::after{content:'';position:fixed;inset:0;opacity:.028;pointer-events:none;z-index:9999;
            background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
            background-size:180px 180px}

        /* ---- header ---- */
        .header{text-align:center;margin-bottom:52px;opacity:0;animation:fu .8s ease forwards}
        .logo-cn{font-family:var(--cn);font-weight:700;font-size:2.2rem;letter-spacing:.14em;
            background:linear-gradient(135deg,var(--tx) 40%,var(--ac));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
        .logo-en{font-family:var(--en);font-style:italic;font-size:.92rem;color:var(--dm);margin-top:4px;letter-spacing:.2em}

        @keyframes fu{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
        @keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}

        /* ---- upload ---- */
        .upload-view{display:flex;justify-content:center;align-items:center;min-height:55vh;opacity:0;animation:fu .8s .15s ease forwards}
        .upload-zone{width:100%;max-width:620px;padding:72px 40px;border:2px dashed var(--bd);border-radius:18px;text-align:center;cursor:pointer;transition:all .35s;background:var(--sf);position:relative;overflow:hidden}
        .upload-zone::before{content:'';position:absolute;inset:-2px;border-radius:18px;
            background:conic-gradient(from 0deg,transp.........完整代码请登录后点击上方下载按钮下载查看