0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Strata と Project-Maya 動かしてみた

0
Posted at

結論

  • Strata/Project-maya いずれもハードウェア要件が高すぎる
    • DDR4/5 32 GiB とあるが実質 64GiB
    • VRAM 12 GiB 以上 は事実上 RTX 3060 が最低限
    • Maya は複数枚の GPU がほぼ前提
  • 環境次第
    • 4070 Ti + Strata html+css 出力に15分
    • 4090 + Project-Maya 1時間以上

4070 Ti 12GiB + Strata

第2部 Project-Maya

必須環境

設定など

  • 初期セットアップは一番小さい構成しか通らなかったので、プローブした環境に対して変更なくエンター
  • Thinking を OFF
  • Context サイズも 32k のデフォルトで実施
  • 出力される html はほぼ 4070 Ti と同じ内容

使ったプロンプト

あなたは熟練のフロントエンドエンジニア兼UI/UXデザイナーです。
往年の大型CD/DVDレンタルショップ(TSUTAYAやGEOのような世界観)を現代風のサイバー・ネオン調に再解釈した、スタイリッシュで少し派手目なWebサイトのトップページを作成してください。

外部ファイルへの依存をなくし、HTML、CSS(<style>)、最小限のJavaScript(<script>)をすべて含めた【単一のindex.htmlファイル】として完全なコードを出力してください。
コードの途中で「// 省略」やプレースホルダーを使わず、そのままブラウザで開いて動作する状態にしてください。

【デザインと機能の要件】

1. 全体トーン・配色
- ダークモード基調(漆黒〜ダークネイビー)。
- ネオンブルー、パープル、サイバーシアンのアクセントカラー。
- 暗闇でディスクやパッケージが発光するような近未来感とエンタメ感。

2. 構成要素
- ヘッダー:ショップロゴ(ネオン発光エフェクト)、ナビゲーションリンク、検索バー、カート/会員アイコン。
- ヒーローセクション:今週の注目作(ビッグバナー風)。グラデーション背景と浮遊感のあるアニメーション。
- カテゴリタブ:映画・ドラマ・邦楽・洋楽・アニメ(クリックでアクティブ表示が切り替わるUI)。
- ピックアップ棚(作品カード一覧):CDジャケットおよびDVD/Blu-rayパッケージを模したカードを最低6〜8点グリッド配置。
- フッター:レンタル利用案内、店舗検索リンク、コピーライト。

3. マウスオーバー(ホバー)演出【※少し派手目に実装してください】
- ジャケットカードにマウスを乗せた際、3D傾き効果(CSS transform: perspective / rotateY / translateY)とネオングロー(box-shadow)の強調。
- ディスク(CD/DVD)の飛び出し演出:ジャケットの後ろから円形の光沢ディスク(CSSグラデーションで表現)が回転しながら少しスライドアウトするアニメーション。
- ボタンやナビゲーションリンク:ホバー時に光が走るシマーエフェクトやボーダー発光。

4. 技術仕様
- 外部CSSフレームワーク(BootstrapやTailwind)は使わず、純粋なCSS(モダンCSS: Flexbox, CSS Grid, Custom Properties/CSS変数)で記述。
- 画像リンクが切れても崩れないよう、ジャケット画像にはプレースホルダー(SVG埋め込み、CSSによるスタイリッシュなグラデーションアートワーク、またはPlacehold.co等のダミー画像URL)を使用。
- レスポンシブ対応(スマホ〜デスクトップで崩れないグリッド)。

完全なHTMLコードのみをMarkdownのコードブロック形式で出力してください。

出来上がった html+css ファイル

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>NEON RENT|サイバー・レンタルショップ</title>
<style>
  :root{
    --bg-0:#03060f;
    --bg-1:#070c1b;
    --bg-2:#0b1122;
    --card:#0d1424;
    --ink:#f3f7ff;
    --muted:#8fa1c8;
    --cyan:#00f7ff;
    --purple:#a855f7;
    --magenta:#ff00d4;
    --line:rgba(0,247,255,.18);
    --line-strong:rgba(0,247,255,.45);
    --glass:rgba(10,16,32,.66);
    --shadow:0 18px 45px rgba(0,0,0,.45);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;min-height:100vh;overflow-x:hidden;color:var(--ink);
    background:linear-gradient(180deg,var(--bg-0),var(--bg-1) 45%,var(--bg-2));
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif;
  }
  body::before{
    content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;mix-blend-mode:screen;
    background:repeating-linear-gradient(0deg,rgba(0,247,255,.035) 0 1px,transparent 1px 4px);
  }
  a{color:inherit;text-decoration:none}
  button{font:inherit;cursor:pointer}
  .wrap{max-width:1240px;margin:0 auto;padding:0 20px;position:relative;z-index:2}

  /* ============ HEADER ============ */
  header{
    position:sticky;top:0;z-index:100;backdrop-filter:blur(14px);
    background:linear-gradient(180deg,rgba(3,6,15,.9),rgba(3,6,15,.62));
    border-bottom:1px solid var(--line);
  }
  .header-inner{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 20px}
  .logo{
    font-size:clamp(1.4rem,3vw,2rem);font-weight:900;letter-spacing:.14em;text-transform:uppercase;
    color:#fff;text-shadow:0 0 6px rgba(0,247,255,.9),0 0 18px rgba(0,247,255,.55),0 0 34px rgba(168,85,247,.45);
  }
  .logo span{color:var(--cyan);text-shadow:0 0 10px rgba(0,247,255,.95),0 0 28px rgba(0,247,255,.65)}
  nav{display:flex;gap:8px;flex-wrap:wrap}
  nav a{
    position:relative;overflow:hidden;padding:10px 14px;border-radius:999px;color:#c9d7ff;
    border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);transition:.35s;
  }
  nav a::before{
    content:"";position:absolute;inset:0;pointer-events:none;transform:translateX(-130%);transition:transform .75s;
    background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.16) 40%,rgba(0,247,255,.38) 50%,rgba(255,255,255,.16) 60%,transparent 80%);
  }
  nav a:hover,nav a:focus-visible{color:#fff;border-color:var(--line-strong);box-shadow:0 0 18px rgba(0,247,255,.22),inset 0 0 18px rgba(168,85,247,.12)}
  nav a:hover::before,nav a:focus-visible::before{transform:translateX(130%)}
  .header-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
  .search{position:relative}
  .search input{
    width:220px;max-width:100%;padding:11px 14px 11px 38px;border-radius:999px;
    border:1px solid rgba(0,247,255,.22);background:rgba(8,12,24,.78);color:var(--ink);outline:none;transition:.3s;
  }
  .search input::placeholder{color:rgba(143,161,200,.75)}
  .search input:focus{border-color:var(--cyan);box-shadow:0 0 22px rgba(0,247,255,.28);background:rgba(8,12,24,.92)}
  .search::before{content:"";position:absolute;left:14px;top:50%;width:10px;height:10px;border:2px solid rgba(0,247,255,.85);border-radius:50%;transform:translateY(-50%);pointer-events:none}
  .search::after{content:"";position:absolute;left:23px;top:calc(50% + 9px);width:8px;height:2px;background:var(--cyan);border-radius:2px;transform:rotate(45deg);transform-origin:left center;pointer-events:none;box-shadow:0 0 8px rgba(0,247,255,.8)}
  .icon-btn{
    position:relative;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;
    border:1px solid rgba(0,247,255,.22);background:rgba(8,12,24,.72);color:#c9d7ff;overflow:hidden;transition:.35s;
  }
  .icon-btn::before{
    content:"";position:absolute;inset:0;pointer-events:none;transform:translateX(-130%);transition:transform .7s;
    background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.14) 40%,rgba(0,247,255,.32) 50%,rgba(255,255,255,.14) 60%,transparent 80%);
  }
  .icon-btn:hover,.icon-btn:focus-visible{color:#fff;border-color:var(--line-strong);box-shadow:0 0 18px rgba(0,247,255,.28)}
  .icon-btn:hover::before,.icon-btn:focus-visible::before{transform:translateX(130%)}
  .icon-btn.pop{animation:cartPop .45s ease}
  .cart-icon{position:relative;width:18px;height:13px;border:2px solid currentColor;border-radius:0 0 7px 7px;margin-top:6px}
  .cart-icon::before{content:"";position:absolute;top:-8px;left:2px;width:12px;height:8px;border:2px solid currentColor;border-bottom:0;border-radius:7px 7px 0 0}
  .cart-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;display:grid;place-items:center;font-size:11px;font-weight:800;color:#03060f;background:linear-gradient(135deg,var(--cyan),var(--purple));border-radius:999px;box-shadow:0 0 12px rgba(0,247,255,.45)}
  .user-icon{position:relative;width:18px;height:18px;border:2px solid currentColor;border-radius:50%;margin-bottom:6px}
  .user-icon::after{content:"";position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);width:22px;height:12px;border:2px solid currentColor;border-bottom:0;border-radius:12px 12px 0 0}

  /* ============ HERO ============ */
  .hero{position:relative;overflow:hidden;padding:84px 0 70px}
  .hero-bg{position:absolute;inset:0;z-index:0;
    background:
      radial-gradient(1100px 620px at 18% 12%,rgba(0,247,255,.18),transparent 60%),
      radial-gradient(900px 520px at 82% 18%,rgba(168,85,247,.24),transparent 58%),
      radial-gradient(760px 420px at 50% 88%,rgba(255,0,212,.14),transparent 60%),
      linear-gradient(180deg,rgba(3,6,15,.1),rgba(3,6,15,.45));
  }
  .hero-grid{
    position:absolute;left:-20%;right:-20%;bottom:-10%;top:40%;z-index:0;pointer-events:none;opacity:.26;
    background-image:linear-gradient(rgba(0,247,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(168,85,247,.08) 1px,transparent 1px);
    background-size:48px 48px;transform:perspective(800px) rotateX(62deg);transform-origin:top;
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,transparent 96%);mask-image:linear-gradient(180deg,transparent,#000 30%,transparent 96%);
  }
  .hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:46px;align-items:center}
  .hero-tag{display:inline-block;padding:8px 14px;border-radius:999px;border:1px solid rgba(0,247,255,.35);background:rgba(0,247,255,.08);color:var(--cyan);font-weight:800;letter-spacing:.12em;text-transform:uppercase;box-shadow:0 0 18px rgba(0,247,255,.18)}
  .hero h1{margin:18px 0 14px;font-size:clamp(2.2rem,6vw,4.8rem);line-height:1.02;letter-spacing:.02em;color:#fff;text-shadow:0 0 10px rgba(0,247,255,.75),0 0 28px rgba(168,85,247,.55),0 0 60px rgba(255,0,212,.35)}
  .hero p{max-width:560px;margin:0 0 24px;color:var(--muted);line-height:1.75}
  .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px}
  .btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 22px;border-radius:999px;border:1px solid transparent;font-weight:800;letter-spacing:.04em;transition:.35s}
  .btn::before{content:"";position:absolute;inset:0;pointer-events:none;transform:translateX(-140%);transition:transform .8s;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.2) 40%,rgba(0,247,255,.42) 50%,rgba(255,255,255,.2) 60%,transparent 80%)}
  .btn:hover::before,.btn:focus-visible::before{transform:translateX(140%)}
  .btn-primary{color:#03060f;background:linear-gradient(135deg,var(--cyan),var(--purple));border-color:rgba(255,255,255,.25);box-shadow:0 12px 35px rgba(0,247,255,.22),0 0 24px rgba(168,85,247,.2)}
  .btn-primary:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 18px 45px rgba(0,247,255,.32),0 0 38px rgba(168,85,247,.28)}
  .btn-secondary{color:#dbe6ff;background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16)}
  .btn-secondary:hover{color:#fff;border-color:var(--line-strong);box-shadow:0 0 24px rgba(0,247,255,.22),inset 0 0 20px rgba(168,85,247,.12);transform:translateY(-2px)}
  .hero-meta{display:flex;gap:10px;flex-wrap:wrap;color:#9fb1d6;font-size:.92rem}
  .hero-meta span{padding:7px 12px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(255,255,255,.04)}
  .hero-visual{position:relative;min-height:360px;display:grid;place-items:center}
  .hero-package{position:relative;z-index:2;width:min(340px,80%);aspect-ratio:3/4}
  .hero-case{position:absolute;inset:0;z-index:2;border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.22);box-shadow:0 28px 70px rgba(0,0,0,.55),0 0 30px rgba(0,247,255,.18),0 0 65px rgba(168,85,247,.18);transform:perspective(900px) rotateY(-14deg) rotateX(7deg)}
  .hero-case-art{position:absolute;inset:0;z-index:1;background:linear-gradient(135deg,#070b18 0%,#190f33 42%,#002030 100%)}
  .hero-case-art::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 68% 18%,rgba(255,0,212,.38),transparent 42%),radial-gradient(circle at 18% 82%,rgba(0,247,255,.42),transparent 45%),repeating-linear-gradient(135deg,rgba(0,247,255,.12) 0 2px,transparent 2px 18px)}
  .hero-case-art::after{content:"NEON DRIVE 2099";position:absolute;z-index:3;left:18px;right:18px;bottom:18px;font-size:clamp(1rem,2vw,1.35rem);font-weight:900;letter-spacing:.08em;color:rgba(255,255,255,.95);text-shadow:0 0 8px rgba(0,247,255,.9),0 0 24px rgba(168,85,247,.6)}
  .hero-case-shine{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(120deg,transparent 28%,rgba(255,255,255,.13) 42%,transparent 58%)}
  .hero-disc{position:absolute;right:8%;top:8%;width:74%;aspect-ratio:1;z-index:1;border-radius:50%;background:conic-gradient(from 0deg,#00f7ff,#a855f7,#ff00d4,#00f7ff);opacity:.82;box-shadow:0 0 30px rgba(0,247,255,.45),0 0 70px rgba(255,0,212,.35);animation:heroDiscSpin 18s linear infinite}
  .hero-disc::before{content:"";position:absolute;inset:34%;border-radius:50%;background:radial-gradient(circle,#03060f 0 58%,rgba(255,255,255,.18) 59%,transparent 62%);box-shadow:inset 0 0 12px rgba(0,0,0,.7)}
  .hero-disc::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 210deg,transparent 0 12%,rgba(255,255,255,.28) 18%,transparent 26% 100%)}
  .orbit{position:absolute;border-radius:50%;border:1px solid rgba(0,247,255,.22);animation:orbitSpin 16s linear infinite}
  .orbit.o1{width:420px;height:420px;left:50%;top:50%;transform:translate(-50%,-50%) rotate(0deg)}
  .orbit.o2{width:320px;height:320px;left:50%;top:50%;transform:translate(-50%,-50%) rotate(0deg);border-color:rgba(168,85,247,.25);animation-duration:12s;animation-direction:reverse}
  .orbit.o1::after,.orbit.o2::after{content:"";position:absolute;top:-5px;left:50%;width:10px;height:10px;border-radius:50%;background:var(--cyan);box-shadow:0 0 14px var(--cyan)}
  .orbit.o2::after{background:var(--magenta);box-shadow:0 0 14px var(--magenta)}

  /* ============ TICKER ============ */
  .ticker{position:relative;z-index:2;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(0,247,255,.05);padding:12px 0}
  .ticker-track{display:flex;gap:44px;width:max-content;animation:ticker 26s linear infinite;white-space:nowrap;font-weight:800;letter-spacing:.1em;color:#9fb1d6}
  .ticker-track b{color:var(--cyan)}
  .ticker-track .sep{color:var(--purple)}

  /* ============ CATEGORY ============ */
  .section{position:relative;z-index:2;padding:64px 0}
  .section-head{display:flex;align-items:end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:26px}
  .section-head h2{margin:0;font-size:clamp(1.6rem,4vw,2.6rem);font-weight:900;letter-spacing:.02em;color:#fff;text-shadow:0 0 12px rgba(0,247,255,.4),0 0 30px rgba(168,85,247,.3)}
  .section-head p{margin:6px 0 0;color:var(--muted)}
  .section-head .link{color:var(--cyan);font-weight:800;position:relative;overflow:hidden;padding:6px 0}
  .section-head .link::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--cyan);transform:scaleX(0);transform-origin:left;transition:transform .4s}
  .section-head .link:hover::after{transform:scaleX(1)}
  .tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}
  .tab{position:relative;overflow:hidden;padding:12px 20px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:#c9d7ff;font-weight:800;letter-spacing:.04em;transition:.35s}
  .tab::before{content:"";position:absolute;inset:0;pointer-events:none;transform:translateX(-130%);transition:transform .7s;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.14) 40%,rgba(0,247,255,.32) 50%,rgba(255,255,255,.14) 60%,transparent 80%)}
  .tab:hover::before{transform:translateX(130%)}
  .tab:hover{color:#fff;border-color:var(--line-strong);box-shadow:0 0 18px rgba(0,247,255,.2)}
  .tab.is-active{color:#03060f;background:linear-gradient(135deg,var(--cyan),var(--purple));border-color:transparent;box-shadow:0 0 22px rgba(0,247,255,.35),0 0 40px rgba(168,85,247,.25)}

  /* ============ CARDS ============ */
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:24px}
  .card{position:relative;perspective:900px;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
  .card-inner{
    position:relative;transform-style:preserve-3d;transform:rotateY(0) rotateX(0) translateZ(0);
    border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.1);
    background:linear-gradient(160deg,#0b1122,#0d1424);
    box-shadow:var(--shadow);transition:box-shadow .4s;
  }
  .card.is-hover{transform:translateY(-8px)}
  .card.is-hover .card-inner{box-shadow:0 30px 60px rgba(0,0,0,.55),0 0 28px rgba(0,247,255,.4),0 0 60px rgba(168,85,247,.3)}
  .cover{position:relative;aspect-ratio:3/4;overflow:hidden}
  .cover-art{position:absolute;inset:0;z-index:1}
  .cover-art::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(0,0,0,.14) 0 2px,transparent 2px 20px),linear-gradient(180deg,transparent 45%,rgba(3,6,15,.65))}
  .cover-title{position:absolute;z-index:3;left:14px;right:14px;bottom:14px;font-weight:900;font-size:1.05rem;line-height:1.25;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.6),0 0 10px rgba(0,247,255,.4)}
  .cover-sub{position:absolute;z-index:3;left:14px;top:12px;font-size:.72rem;letter-spacing:.14em;font-weight:800;color:rgba(255,255,255,.75);text-transform:uppercase}
  .cover-shine{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .4s;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.16) 45%,transparent 60%)}
  .card.is-hover .cover-shine{opacity:1}
  .disc{
    position:absolute;z-index:2;top:16%;right:16%;width:64%;aspect-ratio:1;border-radius:50%;
    background:conic-gradient(from 0deg,#00f7ff,#a855f7,#ff00d4,#00f7ff);
    transform:translate(38%,0) scale(.9);opacity:0;box-shadow:0 0 22px rgba(0,247,255,.5),0 0 45px rgba(255,0,212,.35);
    transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .4s;
  }
  .disc::before{content:"";position:absolute;inset:34%;border-radius:50%;background:radial-gradient(circle,#03060f 0 58%,rgba(255,255,255,.18) 59%,transparent 62%);box-shadow:inset 0 0 10px rgba(0,0,0,.7)}
  .disc::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 210deg,transparent 0 12%,rgba(255,255,255,.28) 18%,transparent 26% 100%)}
  .card.is-hover .disc{transform:translate(10%,-6%) scale(1);opacity:.95;animation:discSpin 6s linear infinite}
  .card-info{padding:14px 16px 16px}
  .card-title{margin:0 0 4px;font-size:1.02rem;font-weight:800;color:#fff}
  .card-meta{margin:0 0 12px;color:var(--muted);font-size:.85rem}
  .card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .price{font-weight:900;color:var(--cyan);text-shadow:0 0 10px rgba(0,247,255,.4)}
  .add{position:relative;overflow:hidden;padding:9px 14px;border-radius:999px;border:1px solid rgba(0,247,255,.32);background:rgba(0,247,255,.08);color:#c9f7ff;font-weight:800;font-size:.85rem;transition:.3s}
  .add::before{content:"";position:absolute;inset:0;pointer-events:none;transform:translateX(-130%);transition:transform .6s;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.18) 40%,rgba(0,247,255,.4) 50%,rgba(255,255,255,.18) 60%,transparent 80%)}
  .add:hover::before{transform:translateX(130%)}
  .add:hover{color:#03060f;background:linear-gradient(135deg,var(--cyan),var(--purple));border-color:transparent;box-shadow:0 0 18px rgba(0,247,255,.4)}
  .card.enter{opacity:0;transform:translateY(24px)}
  .card.enter.in{opacity:1;transform:translateY(0);transition:opacity .6s,transform .6s}

  /* ============ FEATURE STRIP ============ */
  .strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:44px}
  .strip-item{position:relative;padding:20px;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(0,247,255,.04));overflow:hidden}
  .strip-item h3{margin:0 0 6px;font-size:1.05rem;color:#fff}
  .strip-item p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.6}
  .strip-item::before{content:"";position:absolute;left:0;top:0;height:100%;width:3px;background:linear-gradient(180deg,var(--cyan),var(--purple));box-shadow:0 0 12px rgba(0,247,255,.5)}

  /* ============ FOOTER ============ */
  footer{position:relative;z-index:2;border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(3,6,15,.4),rgba(3,6,15,.9));padding:48px 0 28px;margin-top:20px}
  .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
  .footer-brand .logo{font-size:1.6rem}
  .footer-brand p{margin:12px 0 0;color:var(--muted);line-height:1.7;max-width:340px}
  .footer-col h4{margin:0 0 14px;font-size:.95rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan)}
  .footer-col a{display:block;padding:6px 0;color:#b7c6e8;transition:.3s}
  .footer-col a:hover{color:#fff;text-shadow:0 0 12px rgba(0,247,255,.5)}
  .footer-bottom{margin-top:34px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:#7f91b8;font-size:.85rem}

  /* ============ ANIMATIONS ============ */
  @keyframes heroDiscSpin{to{transform:rotate(360deg)}}
  @keyframes discSpin{to{transform:translate(10%,-6%) scale(1) rotate(360deg)}}
  @keyframes orbitSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
  @keyframes ticker{to{transform:translateX(-50%)}}
  @keyframes cartPop{0%{transform:scale(1)}45%{transform:scale(1.28)}100%{transform:scale(1)}}
  @keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
  .hero-package{animation:floatY 7s ease-in-out infinite}

  /* ============ RESPONSIVE ============ */
  @media (max-width:960px){
    .hero-inner{grid-template-columns:1fr;gap:34px}
    .hero-visual{order:-1;min-height:320px}
    .footer-grid{grid-template-columns:1fr 1fr}
  }
  @media (max-width:640px){
    .header-actions{width:100%;justify-content:flex-end}
    .search input{width:100%}
    .search{flex:1}
    nav{order:3;width:100%}
    .footer-grid{grid-template-columns:1fr 1fr}
    .footer-brand{grid-column:1/-1}
    .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
    .hero{padding:56px 0 48px}
  }
  @media (max-width:420px){
    .footer-grid{grid-template-columns:1fr}
  }
  @media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
    .card.enter{opacity:1;transform:none}
  }
</style>
</head>
<body>

  <header>
    <div class="header-inner">
      <a class="logo" href="#top">NEON<span>RENT</span></a>
      <nav>
        <a href="#pickup">新作</a>
        <a href="#pickup">映画</a>
        <a href="#pickup">ドラマ</a>
        <a href="#pickup">音楽</a>
        <a href="#pickup">アニメ</a>
        <a href="#footer">店舗検索</a>
      </nav>
      <div class="header-actions">
        <div class="search">
          <input id="searchInput" type="search" placeholder="タイトル / アーティスト検索" aria-label="検索" />
        </div>
        <button class="icon-btn" id="userBtn" aria-label="会員ページ"><span class="user-icon"></span></button>
        <button class="icon-btn" id="cartBtn" aria-label="レンタルカート"><span class="cart-icon"></span><span class="cart-badge" id="cartCount">0</span></button>
      </div>
    </div>
  </header>

  <section class="hero" id="top">
    <div class="hero-bg"></div>
    <div class="hero-grid"></div>
    <div class="wrap hero-inner">
      <div>
        <span class="hero-tag">今週の注目作</span>
        <h1>NEON DRIVE 2099<br/>Blu-ray 発売中</h1>
        <p>漆黒の街を駆けるサイバー・アクション。ディスクが暗闇で発光する、レンタルだけの限定パッケージ。今週は新作レンタルが最大30%OFF。</p>
        <div class="hero-actions">
          <button class="btn btn-primary" id="heroAdd">カートに追加</button>
          <a class="btn btn-secondary" href="#pickup">作品一覧を見る</a>
        </div>
        <div class="hero-meta">
          <span>★ 4.8 / 5.0</span>
          <span>レンタル ¥390 / 泊</span>
          <span>BLU-RAY + DVD</span>
          <span>新着 120作品</span>
        </div>
      </div>
      <div class="hero-visual">
        <div class="orbit o1"></div>
        <div class="orbit o2"></div>
        <div class="hero-package">
          <div class="hero-disc"></div>
          <div class="hero-case">
            <div class="hero-case-art"></div>
            <div class="hero-case-shine"></div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <div class="ticker">
    <div class="ticker-track">
      <span><b>今週の新着</b> 120タイトル</span><span class="sep">◆</span>
      <span>新作レンタル <b>30%OFF</b></span><span class="sep">◆</span>
      <span>Blu-ray <b>¥390</b>〜</span><span class="sep">◆</span>
      <span>邦楽CD <b>¥190</b>〜</span><span class="sep">◆</span>
      <span>アニメ一挙放送棚 <b>NEW</b></span><span class="sep">◆</span>
      <span><b>今週の新着</b> 120タイトル</span><span class="sep">◆</span>
      <span>新作レンタル <b>30%OFF</b></span><span class="sep">◆</span>
      <span>Blu-ray <b>¥390</b>〜</span><span class="sep">◆</span>
      <span>邦楽CD <b>¥190</b>〜</span><span class="sep">◆</span>
      <span>アニメ一挙放送棚 <b>NEW</b></span><span class="sep">◆</span>
    </div>
  </div>

  <section class="section" id="pickup">
    <div class="wrap">
      <div class="section-head">
        <div>
          <h2>PICKUP SHELF</h2>
          <p>暗闇で光る、今週のおすすめタイトル。</p>
        </div>
        <a class="link" href="#pickup">すべて見る →</a>
      </div>

      <div class="tabs" id="tabs">
        <button class="tab is-active" data-cat="all">ALL</button>
        <button class="tab" data-cat="movie">映画</button>
        <button class="tab" data-cat="drama">ドラマ</button>
        <button class="tab" data-cat="jpop">邦楽</button>
        <button class="tab" data-cat="kpop">洋楽</button>
        <button class="tab" data-cat="anime">アニメ</button>
      </div>

      <div class="grid" id="grid"></div>

      <div class="strip">
        <div class="strip-item"><h3>新作レンタル</h3><p>入荷から2週間、新作タイトルは最大30%OFF。ディスクは毎回新品相当で提供。</p></div>
        <div class="strip-item"><h3>返却もネオンで</h3><p>店舗の発光ドロップオフボックスへ。24時間対応の自動返却ゲート。</p></div>
        <div class="strip-item"><h3>会員特典</h3><p>ポイントで人気タイトルを優先レンタル。ネオンパスで限定盤も。</p></div>
      </div>
    </div>
  </section>

  <footer id="footer">
    <div class="wrap">
      <div class="footer-grid">
        <div class="footer-brand">
          <a class="logo" href="#top">NEON<span>RENT</span></a>
          <p>往年の大型レンタルショップを、ネオン発光の近未来空間へ。映画・ドラマ・音楽・アニメを、暗闇で光るディスクで。</p>
        </div>
        <div class="footer-col">
          <h4>レンタル案内</h4>
          <a href="#pickup">新作レンタル</a>
          <a href="#pickup">DVD / Blu-ray</a>
          <a href="#pickup">CD レンタル</a>
          <a href="#pickup">返却方法</a>
        </div>
        <div class="footer-col">
          <h4>店舗検索</h4>
          <a href="#footer">店舗一覧</a>
          <a href="#footer">最寄り店舗</a>
          <a href="#footer">営業時間</a>
          <a href="#footer">24hドロップオフ</a>
        </div>
        <div class="footer-col">
          <h4>サポート</h4>
          <a href="#footer">よくある質問</a>
          <a href="#footer">会員サービス</a>
          <a href="#footer">ポイント / 特典</a>
          <a href="#footer">お問い合わせ</a>
        </div>
      </div>
      <div class="footer-bottom">
        <span>© 2025 NEON RENT — サイバー・レンタルショップ</span>
        <span>利用規約 ・ プライバシーポリシー ・ 特定商取引法に基づく表記</span>
      </div>
    </div>
  </footer>

<script>
  const ITEMS = [
    {cat:"movie",  title:"NEON DRIVE 2099",       meta:"アクション / 2099 / 128min", price:"¥390", tags:["Blu-ray","DVD"],  art:"linear-gradient(135deg,#001a26,#00f7ff 45%,#ff00d4 100%)"},
    {cat:"movie",  title:"MIDNIGHT GLITCH",       meta:"SFスリラー / 2098 / 112min", price:"¥330", tags:["Blu-ray"],        art:"linear-gradient(135deg,#120a24,#a855f7 50%,#00f7ff 100%)"},
    {cat:"movie",  title:"CHROME REQUIEM",        meta:"ヒューマノイド / 2097 / 141min", price:"¥390", tags:["4K UHD","DVD"], art:"linear-gradient(135deg,#1a0616,#ff00d4 45%,#a855f7 100%)"},
    {cat:"drama",  title:"CYBER TOKYO NIGHTS",    meta:"ドラマ / 全12話 / Season 2", price:"¥290", tags:["DVD BOX"],         art:"linear-gradient(135deg,#04121f,#00f7ff 55%,#0b1122 100%)"},
    {cat:"drama",  title:"PHANTOM SIGNAL",        meta:"ミステリー / 全8話", price:"¥260", tags:["Blu-ray"],                art:"linear-gradient(135deg,#0b0620,#6b3fd6 50%,#00f7ff 100%)"},
    {cat:"jpop",   title:"HOLOGRAM LOVE",         meta:"NEON SOUND / 邦楽CD", price:"¥190", tags:["CD"],                    art:"linear-gradient(135deg,#001016,#00f7ff 40%,#7cf5ff 100%)"},
    {cat:"jpop",   title:"SHINJUKU DREAM POP",    meta:"シティポップ / 邦楽CD", price:"¥210", tags:["CD","LP"],             art:"linear-gradient(135deg,#1b0a24,#ff00d4 50%,#ffd0f5 100%)"},
    {cat:"kpop",   title:"STARLIGHT ANTHEM",      meta:"洋楽 / K-POP ALBUM", price:"¥240", tags:["CD"],                    art:"linear-gradient(135deg,#0a0620,#a855f7 45%,#f0c3ff 100%)"},
    {cat:"kpop",   title:"PULSE OF THE 80s",      meta:"洋楽 / RETRO SYNTH", price:"¥220", tags:["CD","LP"],               art:"linear-gradient(135deg,#120014,#ff00d4 50%,#ff6b9d 100%)"},
    {cat:"anime",  title:"MECHA CHRONICLE",       meta:"アニメ / 全24話 / Blu-ray BOX", price:"¥490", tags:["Blu-ray BOX"],  art:"linear-gradient(135deg,#00121f,#00b4ff 45%,#00f7ff 100%)"},
    {cat:"anime",  title:"GHOST CIRCUIT",         meta:"アニメ / 全12話", price:"¥360", tags:["Blu-ray","DVD"],            art:"linear-gradient(135deg,#0c0620,#7c3aed 50%,#00f7ff 100%)"},
    {cat:"anime",  title:"NEON YOKAI",            meta:"アニメ / 全13話 / 限定盤", price:"¥520", tags:["Blu-ray BOX"],      art:"linear-gradient(135deg,#160018,#ff00d4 40%,#00f7ff 100%)"}
  ];

  const grid = document.getElementById("grid");
  let cart = 0;
  const cartCount = document.getElementById("cartCount");
  const cartBtn = document.getElementById("cartBtn");

  function badgeMarkup(tags){
    return tags.map(t=>`<span class="badge">${t}</span>`).join("");
  }

  function render(filter){
    grid.innerHTML = "";
    const list = ITEMS.filter(it => filter === "all" || it.cat === filter);
    list.forEach((it, i) => {
      const card = document.createElement("article");
      card.className = "card enter";
      card.style.transitionDelay = (i * 45) + "ms";
      card.innerHTML = `
        <div class="card-inner">
          <div class="cover">
            <div class="cover-art" style="background:${it.art}"></div>
            <div class="disc"></div>
            <div class="cover-shine"></div>
            <span class="cover-sub">${it.tags.join(" · ")}</span>
            <span class="cover-title">${it.title}</span>
          </div>
          <div class="card-info">
            <h3 class="card-title">${it.title}</h3>
            <p class="card-meta">${it.meta}</p>
            <div class="card-foot">
              <span class="price">${it.price}〜</span>
              <button class="add" data-add="${it.title}">レンタル</button>
            </div>
          </div>
        </div>`;
      grid.appendChild(card);
    });
    observeCards();
  }

  /* 3D tilt + hover glow + disc pop */
  function bindTilt(card){
    const inner = card.querySelector(".card-inner");
    const cover = card.querySelector(".cover");
    const apply = (x, y) => {
      const rx = ((y - 0.5) * -14).toFixed(2);
      const ry = ((x - 0.5) * 18).toFixed(2);
      inner.style.transform = `rotateX(${rx}deg) rotateY(${ry}deg) translateZ(18px)`;
      cover.style.setProperty("--mx", (x * 100).toFixed(1) + "%");
    };
    card.addEventListener("pointerenter", () => card.classList.add("is-hover"));
    card.addEventListener("pointermove", (e) => {
      const r = card.getBoundingClientRect();
      apply((e.clientX - r.left) / r.width, (e.clientY - r.top) / r.height);
    });
    card.addEventListener("pointerleave", () => {
      card.classList.remove("is-hover");
      inner.style.transform = "rotateY(0) rotateX(0) translateZ(0)";
    });
  }

  /* reveal on scroll */
  let revealObserver;
  function observeCards(){
    if(!revealObserver){
      revealObserver = new IntersectionObserver((entries) => {
        entries.forEach(en => { if(en.isIntersecting){ en.target.classList.add("in"); revealObserver.unobserve(en.target); } });
      }, {threshold:.12});
    }
    grid.querySelectorAll(".card.enter:not(.in)").forEach(c => { revealObserver.observe(c); bindTilt(c); });
  }

  /* tabs */
  document.getElementById("tabs").addEventListener("click", (e) => {
    const tab = e.target.closest(".tab");
    if(!tab) return;
    document.querySelectorAll(".tab").forEach(t => t.classList.remove("is-active"));
    tab.classList.add("is-active");
    render(tab.dataset.cat);
  });

  /* search */
  document.getElementById("searchInput").addEventListener("input", (e) => {
    const q = e.target.value.trim().toLowerCase();
    grid.innerHTML = "";
    const list = ITEMS.filter(it => !q || it.title.toLowerCase().includes(q) || it.meta.toLowerCase().includes(q) || it.cat.includes(q));
    list.forEach((it, i) => {
      const card = document.createElement("article");
      card.className = "card enter in";
      card.innerHTML = `
        <div class="card-inner">
          <div class="cover">
            <div class="cover-art" style="background:${it.art}"></div>
            <div class="disc"></div>
            <div class="cover-shine"></div>
            <span class="cover-sub">${it.tags.join(" · ")}</span>
            <span class="cover-title">${it.title}</span>
          </div>
          <div class="card-info">
            <h3 class="card-title">${it.title}</h3>
            <p class="card-meta">${it.meta}</p>
            <div class="card-foot">
              <span class="price">${it.price}〜</span>
              <button class="add" data-add="${it.title}">レンタル</button>
            </div>
          </div>
        </div>`;
      grid.appendChild(card);
      bindTilt(card);
    });
    if(!list.length){
      grid.innerHTML = `<p style="color:var(--muted);grid-column:1/-1;text-align:center;padding:24px">該当タイトルが見つかりませんでした。</p>`;
    }
  });

  /* cart */
  function addToCart(){
    cart++;
    cartCount.textContent = cart;
    cartBtn.classList.remove("pop");
    void cartBtn.offsetWidth;
    cartBtn.classList.add("pop");
  }
  grid.addEventListener("click", (e) => { if(e.target.closest(".add")) addToCart(); });
  document.getElementById("heroAdd").addEventListener("click", addToCart);

  render("all");
</script>
</body>
</html>

いじょ

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?