diff options
| author | soryu <soryu@soryu.co> | 2025-12-09 22:44:28 +0000 |
|---|---|---|
| committer | soryu <soryu@soryu.co> | 2025-12-23 14:47:18 +0000 |
| commit | ea81caf9b49c39370532327fa05dbce002acef7e (patch) | |
| tree | 7eb14d13fb2726883fd25df2172ea7f2691af91f /makima/frontend | |
| parent | d27bd879ea142f692c251e6583c76860c01ba191 (diff) | |
| download | soryu-ea81caf9b49c39370532327fa05dbce002acef7e.tar.gz soryu-ea81caf9b49c39370532327fa05dbce002acef7e.zip | |
Refresh makima holding page messaging
Diffstat (limited to 'makima/frontend')
| -rw-r--r-- | makima/frontend/public/index.html | 948 |
1 files changed, 762 insertions, 186 deletions
diff --git a/makima/frontend/public/index.html b/makima/frontend/public/index.html index 35d2b64..42e0417 100644 --- a/makima/frontend/public/index.html +++ b/makima/frontend/public/index.html @@ -1,195 +1,771 @@ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> - <head> - <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> - <meta http-equiv="X-UA-Compatible" content="IE=edge" /> - <meta name="viewport" content="width=device-width, initial-scale=1.0" /> - <title>makima.jp | 準備中 — Under Construction</title> - <link rel="canonical" href="https://makima.jp/" /> - <!-- Prefer site-root favicon when served with parent site; fallback for local file preview --> - <link rel="icon" href="/logo.svg" type="image/svg+xml" sizes="any" /> - <link rel="icon" href="./logo.svg" type="image/svg+xml" sizes="any" /> - <link rel="shortcut icon" href="./logo.svg" type="image/svg+xml" sizes="any" /> - <meta - name="description" - content="本ページは現在準備中です。しばらくお待ちください。" - /> - <style type="text/css"> - /* Heisei-era official look: Mincho serif stack, modest spacing, muted colors */ - body { - margin: 0; - padding: 0; - color: #000; - background: #f2f2f2 url("./02cdkj.jpeg") center top - no-repeat fixed; - background-size: cover; - font-family: - "Yu Mincho", "Hiragino Mincho ProN", "MS PMincho", - "MS Mincho", "Noto Serif JP", serif; - line-height: 1.7; - letter-spacing: 0.02em; - } - .frame { - max-width: 760px; - margin: 32px auto; - background: rgba(255, 255, 255, 0.88); - border: 1px solid #6a6a6a; - } - .masthead { - padding: 12px 16px; - border-bottom: 3px double #003366; - background: #ffffff; - } - .masthead h1 { - margin: 0; - font-size: 22px; - color: #003366; - letter-spacing: 0.08em; - } - /* Simple inline logo to the left of the title */ - .masthead .logo-mark { - display: inline-block; - width: 22px; - height: 22px; - margin-right: 8px; - vertical-align: -3px; /* align with text baseline for 90s feel */ - } - .masthead .logo-mark svg { - display: block; - } - .masthead small { - display: block; - color: #4d4d4d; - margin-top: 4px; - } - .content { - padding: 18px 18px 24px 18px; - } - .notice { - border: 1px solid #999; - background: #fffef8; - padding: 14px 16px; - } - .notice h2 { - margin: 0 0 8px 0; - font-size: 18px; - color: #2b2b2b; - } - .notice p { - margin: 6px 0; - } - .divider { - margin: 18px 0; - border: none; - border-top: 1px solid #b5b5b5; - height: 1px; - } - .meta { - font-size: 12px; - color: #555; - } - .box { - border: 1px solid #b0b0b0; - background: #ffffff; - padding: 10px 12px; - } - .center { - text-align: center; - } - .uc-mark { - font-size: 20px; - letter-spacing: 0.3em; - } - .links a { - color: #003366; - text-decoration: underline; - } - .footer { - padding: 10px 16px 14px 16px; - border-top: 3px double #003366; - background: #ffffff; - font-size: 12px; - color: #333; - } - /* Prefer system scrollbars without rounded overlay for a period feel */ - ::selection { - background: #d8e6ff; - } - </style> - </head> - <body> - <div class="frame" role="main"> - <div class="masthead"> - <h1> - <span class="logo-mark" aria-hidden="true"> - <!-- Three concentric circles, matching theme color --> - <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="img" focusable="false"> - <circle cx="12" cy="12" r="10" fill="none" stroke="#003366" stroke-width="2" /> - <circle cx="12" cy="12" r="7" fill="none" stroke="#003366" stroke-width="1.6" /> - <circle cx="12" cy="12" r="4" fill="none" stroke="#003366" stroke-width="1.6" /> - <circle cx="12" cy="12" r="1.6" fill="#003366" /> - </svg> - </span> - makima.jp 情報公開ページ（準備中） - </h1> - <small - >Makima Information Service Portal — Under - Construction</small - > - </div> - <div class="content"> - <div class="notice"> - <h2 class="center uc-mark">工 事 中</h2> - <hr class="divider" aria-hidden="true" /> - <p> - 本ウェブページは現在、整備・点検作業を実施しております。公開まで今しばらくお待ちください。 - </p> - <p> - This page is currently undergoing maintenance and - preparation. - </p> - <div class="box meta"> - <p> - お問い合わせ：<span aria-label="contact" - >webmaster@makima.jp</span - > - </p> - <p> - 最終更新日：<span id="updated" - >令和7年11月15日</span - > - </p> - </div> - </div> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <meta http-equiv="X-UA-Compatible" content="IE=edge" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <title>makima.jp | 情報公開ページ — Under Construction</title> + <link rel="canonical" href="https://makima.jp/" /> + <link rel="icon" href="/logo.svg" type="image/svg+xml" sizes="any" /> + <link rel="icon" href="./logo.svg" type="image/svg+xml" sizes="any" /> + <link rel="shortcut icon" href="./logo.svg" type="image/svg+xml" sizes="any" /> + <meta + name="description" + content="本ページは現在準備中です。技術試験的な仮ページとして、makima.jp の情報公開を待機中です。" + /> + <style type="text/css"> + /* Base layout with grid + ASCII-inspired accents */ + body { + margin: 0; + padding: 0; + color: #0c2343; + background: #e7edf7; + font-family: "Yu Mincho", "Hiragino Mincho ProN", "MS PMincho", + "MS Mincho", "Noto Serif JP", serif; + line-height: 1.7; + letter-spacing: 0.03em; + text-rendering: optimizeLegibility; + position: relative; + overflow-x: hidden; + } + body::before { + content: ""; + position: fixed; + inset: 0; + pointer-events: none; + background: linear-gradient( + 90deg, + rgba(13, 46, 104, 0.08) 1px, + rgba(255, 255, 255, 0.06) 1px + ), + linear-gradient( + 0deg, + rgba(13, 46, 104, 0.08) 1px, + rgba(255, 255, 255, 0.06) 1px + ); + background-size: 28px 28px, 28px 28px; + mix-blend-mode: multiply; + } + body::after { + content: ""; + position: fixed; + inset: 0; + pointer-events: none; + background: linear-gradient( + 180deg, + rgba(0, 36, 110, 0.08) 0%, + rgba(231, 237, 247, 0.4) 40%, + rgba(0, 36, 110, 0.08) 100% + ); + } + .frame { + max-width: 980px; + margin: 30px auto 40px auto; + background: rgba(255, 255, 255, 0.94); + border: 1px solid #375b8d; + box-shadow: 0 12px 30px rgba(14, 46, 104, 0.2), + 0 0 0 6px rgba(255, 255, 255, 0.55); + position: relative; + overflow: hidden; + } + .frame::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 6px; + background: repeating-linear-gradient( + 90deg, + #0f3c78 0px, + #0f3c78 40px, + #75aafc 40px, + #75aafc 44px + ); + opacity: 0.7; + } + .frame::after { + content: ""; + position: absolute; + inset: 0; + border: 1px dashed rgba(12, 35, 67, 0.22); + pointer-events: none; + } + .masthead { + padding: 14px 18px 12px 18px; + border-bottom: 4px double #153667; + background: linear-gradient( + 90deg, + rgba(21, 54, 103, 0.12), + rgba(255, 255, 255, 0.9), + rgba(21, 54, 103, 0.12) + ); + } + .masthead-top { + display: flex; + align-items: center; + gap: 12px; + } + .masthead .logo-mark { + display: inline-flex; + align-items: center; + justify-content: center; + width: 42px; + height: 42px; + border: 1px solid #0f3c78; + border-radius: 50%; + background: #e8f1ff; + box-shadow: 0 0 0 3px rgba(117, 170, 252, 0.45); + } + .masthead h1 { + margin: 0; + font-size: 22px; + color: #0f3c78; + letter-spacing: 0.1em; + } + .masthead .subtitle { + display: block; + color: #1f2f50; + font-size: 12px; + letter-spacing: 0.08em; + } + .status-pill { + margin-left: auto; + padding: 4px 10px; + background: #153667; + color: #e8f1ff; + border: 1px solid #0f3c78; + font-size: 12px; + letter-spacing: 0.12em; + text-transform: uppercase; + } + .nav-strip { + display: flex; + align-items: center; + gap: 10px; + padding: 10px 12px; + border-top: 1px dashed rgba(15, 60, 120, 0.4); + border-bottom: 1px dashed rgba(15, 60, 120, 0.4); + background: #f6f8ff; + font-family: "MS Gothic", "Osaka-mono", Consolas, "Courier New", + monospace; + text-transform: uppercase; + letter-spacing: 0.06em; + } + .nav-strip .nav-label { + color: #0f3c78; + font-size: 11px; + padding-right: 10px; + border-right: 1px solid rgba(15, 60, 120, 0.35); + } + .nav-strip .nav-links { + display: flex; + flex-wrap: wrap; + gap: 8px; + align-items: center; + } + .nav-strip .nav-links a { + color: #0f3c78; + text-decoration: none; + padding: 4px 8px; + border: 1px dashed rgba(15, 60, 120, 0.35); + background: #fff; + } + .ticker { + margin-top: 12px; + border: 1px solid #153667; + background: #0f3c78; + color: #c5dbff; + font-family: "MS Gothic", "Osaka-mono", Consolas, "Courier New", + monospace; + font-size: 12px; + padding: 8px 10px; + position: relative; + overflow: hidden; + } + .ticker::before, + .ticker::after { + content: ""; + position: absolute; + top: 0; + width: 12px; + height: 100%; + background: linear-gradient( + 180deg, + rgba(231, 237, 247, 0.5), + rgba(0, 20, 60, 0) + ); + } + .ticker::before { + left: 0; + } + .ticker::after { + right: 0; + transform: rotate(180deg); + } + .ticker span { + display: inline-block; + padding-left: 2px; + animation: ticker 22s linear infinite; + white-space: nowrap; + } + @keyframes ticker { + 0% { + transform: translateX(0); + } + 100% { + transform: translateX(-50%); + } + } + .content { + padding: 22px 22px 28px 22px; + } + .hero { + display: grid; + grid-template-columns: 1.1fr 0.9fr; + gap: 22px; + align-items: center; + margin-bottom: 22px; + position: relative; + } + .floating-card { + position: absolute; + background: #0f3c78; + color: #c5dbff; + padding: 8px 10px; + font-family: "MS Gothic", "Osaka-mono", Consolas, "Courier New", + monospace; + font-size: 11px; + line-height: 1.4; + border: 1px solid rgba(197, 219, 255, 0.4); + box-shadow: 0 6px 16px rgba(12, 35, 67, 0.2); + } + .floating-card.top-card { + top: 6px; + right: 10%; + } + .floating-card.bottom-card { + bottom: 0; + left: 2%; + } + .floating-card .label { + display: block; + color: #9fc3ff; + margin-bottom: 4px; + letter-spacing: 0.08em; + } + .hero-copy h2 { + margin: 0 0 10px 0; + font-size: 20px; + color: #112f5f; + letter-spacing: 0.08em; + } + .hero-copy p { + margin: 4px 0 12px 0; + } + .badge { + display: inline-block; + padding: 4px 8px; + border: 1px solid #0f3c78; + background: #f4f7ff; + color: #0f3c78; + font-family: "MS Gothic", "Osaka-mono", Consolas, "Courier New", + monospace; + font-size: 11px; + letter-spacing: 0.08em; + text-transform: uppercase; + } + .link-row { + display: flex; + gap: 12px; + flex-wrap: wrap; + margin-top: 14px; + } + .rewrite-link { + position: relative; + display: inline-block; + padding: 8px 10px; + border: 1px solid #0f3c78; + background: #ffffff; + text-decoration: none; + color: #0f3c78; + font-family: "MS Gothic", "Osaka-mono", Consolas, "Courier New", + monospace; + font-size: 13px; + letter-spacing: 0.04em; + overflow: hidden; + } + .rewrite-link::after { + content: attr(data-ghost); + position: absolute; + inset: 0; + display: grid; + place-items: center; + color: rgba(117, 170, 252, 0.55); + mix-blend-mode: multiply; + opacity: 0; + transition: opacity 0.2s ease-in-out; + pointer-events: none; + } + .rewrite-link:hover::after { + opacity: 1; + } + .rewrite-link:focus-visible { + outline: 2px dashed #0f3c78; + outline-offset: 4px; + } + .hero-logo { + position: relative; + width: 260px; + height: 260px; + margin: 0 auto; + display: grid; + place-items: center; + filter: drop-shadow(0 10px 26px rgba(12, 35, 67, 0.32)); + } + .hero-logo::before { + content: "data-link// orbital / makima.jp"; + position: absolute; + top: 6px; + left: 12px; + right: 12px; + font-family: "MS Gothic", "Osaka-mono", Consolas, "Courier New", + monospace; + font-size: 11px; + letter-spacing: 0.08em; + color: rgba(15, 60, 120, 0.55); + text-align: center; + } + .logo-shell { + width: 230px; + height: 230px; + border-radius: 50%; + border: 1px solid rgba(21, 54, 103, 0.6); + background: radial-gradient(circle, #e8f1ff 0%, #d6e5ff 60%, #bcd2ff 100%); + display: grid; + place-items: center; + position: relative; + overflow: hidden; + } + .logo-shell::after { + content: ""; + position: absolute; + inset: -1px; + background: repeating-conic-gradient( + from 0deg, + rgba(15, 60, 120, 0.08) 0deg 6deg, + rgba(117, 170, 252, 0.1) 6deg 12deg + ); + mask-image: radial-gradient(circle, rgba(0, 0, 0, 0.25) 40%, transparent 80%); + opacity: 0.7; + } + .logo-svg { + width: 160px; + height: 160px; + z-index: 1; + transition: transform 0.4s ease, filter 0.4s ease; + } + .logo-svg circle { + transition: transform 0.4s ease, opacity 0.4s ease, stroke-width 0.4s ease; + } + .logo-shell:hover .logo-svg { + transform: scale(1.04); + filter: drop-shadow(0 0 14px rgba(15, 60, 120, 0.45)); + } + .logo-shell:hover .logo-svg circle:nth-child(1) { + transform: scale(1.05); + } + .logo-shell:hover .logo-svg circle:nth-child(2) { + transform: scale(1.08); + opacity: 0.92; + } + .logo-shell:hover .logo-svg circle:nth-child(3) { + transform: scale(1.12); + opacity: 0.92; + } + .logo-shell:hover .logo-svg circle:nth-child(4) { + transform: scale(1.3); + } + .halo { + position: absolute; + width: 210px; + height: 210px; + border-radius: 50%; + border: 1px dashed rgba(15, 60, 120, 0.5); + animation: idle-rotate 28s linear infinite; + } + .logo-shell:hover + .halo { + animation: pulse 1.5s ease-in-out infinite; + } + @keyframes pulse { + 0% { + transform: scale(1); + opacity: 0.6; + } + 50% { + transform: scale(1.1); + opacity: 1; + } + 100% { + transform: scale(1); + opacity: 0.6; + } + } + @keyframes idle-rotate { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } + } + .notice-panel { + border: 1px solid #b3c8e8; + background: #fdfdff; + padding: 16px 18px; + position: relative; + } + .notice-panel::before { + content: "NOTICE//MAKIMA"; + position: absolute; + top: -10px; + left: 12px; + padding: 2px 6px; + background: #e8f1ff; + border: 1px solid #0f3c78; + font-family: "MS Gothic", "Osaka-mono", Consolas, "Courier New", + monospace; + font-size: 11px; + letter-spacing: 0.08em; + } + .notice-panel h3 { + margin: 4px 0 8px 0; + font-size: 18px; + color: #112f5f; + } + .notice-panel p { + margin: 6px 0; + } + .meta-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 12px; + margin-top: 12px; + font-size: 12px; + color: #283d66; + } + .meta-grid .box { + border: 1px solid #c2d4f0; + background: #fff; + padding: 10px 12px; + font-family: "MS Gothic", "Osaka-mono", Consolas, "Courier New", + monospace; + letter-spacing: 0.04em; + } + .terminal { + margin-top: 24px; + border: 1px solid #0f3c78; + background: #0f3c78; + color: #c5dbff; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); + } + .terminal header { + border-bottom: 1px solid rgba(197, 219, 255, 0.4); + padding: 10px 12px; + font-family: "MS Gothic", "Osaka-mono", Consolas, "Courier New", + monospace; + letter-spacing: 0.08em; + font-size: 12px; + display: flex; + justify-content: space-between; + align-items: center; + } + .terminal header span { + color: #92b8ff; + } + .terminal pre { + margin: 0; + padding: 14px 12px 16px 12px; + font-family: "MS Gothic", "Osaka-mono", Consolas, "Courier New", + monospace; + font-size: 12px; + line-height: 1.6; + background: linear-gradient( + 0deg, + rgba(255, 255, 255, 0.05) 1px, + rgba(15, 60, 120, 0.25) 1px + ); + } + .links { + margin-top: 16px; + } + .links ul { + margin: 8px 0 0 16px; + padding: 0 0 0 6px; + } + .links li { + margin: 6px 0; + color: #0f3c78; + } + .links a { + color: #0f3c78; + text-decoration: underline; + } + .footer { + padding: 12px 18px 16px 18px; + border-top: 4px double #153667; + background: linear-gradient( + 180deg, + rgba(255, 255, 255, 0.95), + rgba(21, 54, 103, 0.08) + ); + font-size: 12px; + color: #1f2f50; + text-align: center; + } + .footer .domain { + color: #0f3c78; + text-decoration: underline; + } + ::selection { + background: #d8e6ff; + } + @media (max-width: 720px) { + .frame { + margin: 16px 12px 22px 12px; + } + .hero { + grid-template-columns: 1fr; + text-align: center; + } + .hero-copy { + text-align: left; + } + .link-row { + justify-content: center; + } + .meta-grid { + grid-template-columns: 1fr; + } + } + </style> + </head> + <body> + <div class="frame" role="main"> + <div class="masthead"> + <div class="masthead-top"> + <span class="logo-mark" aria-hidden="true"> + <svg + width="32" + height="32" + viewBox="0 0 24 24" + xmlns="http://www.w3.org/2000/svg" + role="img" + focusable="false" + > + <circle cx="12" cy="12" r="10" fill="none" stroke="#0f3c78" stroke-width="2" /> + <circle cx="12" cy="12" r="7" fill="none" stroke="#0f3c78" stroke-width="1.6" /> + <circle cx="12" cy="12" r="4" fill="none" stroke="#0f3c78" stroke-width="1.6" /> + <circle cx="12" cy="12" r="1.6" fill="#0f3c78" /> + </svg> + </span> + <div> + <h1>makima.jp 情報公開ページ（準備中）</h1> + <small class="subtitle">Makima Information Service Portal — Under Construction</small> + </div> + <div class="status-pill">準備中</div> + </div> + <div class="ticker" aria-hidden="true"> + <span> + /// MAKIMA INFORMATION SERVICE // PROVISIONAL ACCESS /// DATA-LINK + ONLINE /// PLATFORM DIAGNOSTICS ACTIVE /// STATUS CHANNEL OPEN /// + STANDBY — 工事中・UNDER CONSTRUCTION /// MAKIMA.JP /// + </span> + </div> + <div class="nav-strip" aria-label="quick navigation"> + <span class="nav-label">NAV//</span> + <div class="nav-links"> + <a href="https://github.com" target="_blank" rel="noopener" class="rewrite-link" data-ghost="rewrite" + >GitHub</a + > + <a href="https://docs.makima.jp" class="rewrite-link" data-ghost="rewrite">Docs</a> + <a href="https://makima.jp" class="rewrite-link" data-ghost="rewrite">Domain</a> + <a href="https://soryu.co" class="rewrite-link" data-ghost="rewrite" target="_blank" rel="noopener" + >Soryu</a + > + </div> + </div> + </div> - <hr class="divider" aria-hidden="true" /> + <div class="content"> + <section class="hero"> + <div class="hero-copy"> + <span class="badge">TECHNICAL HOLDING PAGE</span> + <h2>情報公開準備中 / Public Release Pending</h2> + <p> + 本ウェブページは現在、整備・点検・審査の最終段階にあります。プラットフォームおよびデスクトップアプリの出荷準備として、通信経路と各種連携を確認する暫定ページです。 + </p> + <p> + This page is a temporary access point while the software platform and upcoming desktop application complete final checks. Service remains under construction; transport paths are being verified. + </p> + <div class="link-row"> + <a href="#" aria-disabled="true" class="rewrite-link" data-ghost="rewrite">資料保全中</a> + <a href="#" aria-disabled="true" class="rewrite-link" data-ghost="rewrite">お知らせ待機</a> + <a href="https://soryu.co" class="rewrite-link" data-ghost="rewrite" target="_blank" rel="noopener" + >soryu.co</a + > + </div> + </div> + <div class="hero-logo"> + <div class="logo-shell" aria-hidden="true"> + <svg + class="logo-svg" + viewBox="0 0 120 120" + xmlns="http://www.w3.org/2000/svg" + role="img" + focusable="false" + > + <circle cx="60" cy="60" r="52" fill="none" stroke="#0f3c78" stroke-width="4" /> + <circle cx="60" cy="60" r="36" fill="none" stroke="#0f3c78" stroke-width="3" /> + <circle cx="60" cy="60" r="22" fill="none" stroke="#0f3c78" stroke-width="3" /> + <circle cx="60" cy="60" r="8" fill="#0f3c78" /> + </svg> + </div> + <div class="halo" aria-hidden="true"></div> + <div class="floating-card top-card" aria-hidden="true"> + <span class="label">status: standby</span> + PLATFORM LINK MONITOR ENABLED / DESKTOP CLIENT PREPARATION ACTIVE + </div> + <div class="floating-card bottom-card" aria-hidden="true"> + <span class="label">throughput</span> + Access: HTTPS<br /> + Streams: WS / SSE pending<br /> + Integrity: OK + </div> + </div> + </section> - <div class="links"> - <p>関連情報：</p> - <ul> - <li> - <a href="#" aria-disabled="true" - >組織概要（準備中）</a - > - </li> - <li> - <a href="#" aria-disabled="true" - >お知らせ（準備中）</a - > - </li> - </ul> - </div> + <div class="notice-panel"> + <h3>工事中 / Maintenance Notice</h3> + <p> + makima.jp はソフトウェアプラットフォームおよび今後提供予定のデスクトップアプリの公開準備中です。技術検証のための仮ページを表示しており、正式公開まで今しばらくお待ちください。 + </p> + <p>We appreciate your patience while the public gateway is finalized.</p> + <div class="meta-grid"> + <div class="box"> + お問い合わせ：<br /> + <span aria-label="contact">webmaster@makima.jp</span> </div> - <div class="footer"> - <p class="center">© makima.jp. 本ページは準備中の仮ページです。</p> - <p class="center"> - <a href="https://makima.jp" class="domain">https://makima.jp</a> - / - <a href="https://soryu.co" class="domain" target="_blank" rel="noopener">https://soryu.co</a> - </p> + <div class="box"> + 最終更新：<span id="updated">調整中</span><br /> + 管理番号：MK-INFO/JP-ASC </div> + </div> + </div> + + <div class="links"> + <p>関連情報 / Related:</p> + <ul> + <li><a href="#" aria-disabled="true" class="rewrite-link" data-ghost="rewrite">組織概要（準備中）</a></li> + <li><a href="#" aria-disabled="true" class="rewrite-link" data-ghost="rewrite">告知・通達（準備中）</a></li> + <li> + <a href="https://makima.jp" class="rewrite-link" data-ghost="rewrite" + >https://makima.jp</a + > + </li> + </ul> + </div> + + <div class="terminal" aria-label="system log"> + <header> + <strong>SYSLOG // makima.jp</strong> + <span>channel: BLUE-LINE</span> + </header> + <pre> +[010] link_state .............. pending_publication +[020] platform_target ......... desktop_app + web_service +[030] logo_behavior ........... hover_pulse_enabled +[040] contact ................. webmaster@makima.jp +[050] transport ............... secure/https // ws/standby +[060] note .................... all links locked while construction continues + </pre> </div> + </div> + + <div class="footer"> + <p>© makima.jp — 本ページは準備中の仮ページです。</p> + <p> + <a href="https://makima.jp" class="domain">https://makima.jp</a> / + <a href="https://soryu.co" class="domain" target="_blank" rel="noopener">https://soryu.co</a> + </p> + </div> + </div> + + <noscript>本ページの表示に JavaScript は不要ですが、リンクの書き換え演出は有効になりません。</noscript> + + <script type="text/javascript"> + (function () { + // Rewriter animation for links, inspired by vortex.dev hover effect + var glyphs = "▒▓░█#@*+:-/[]{}<>_"; + var targets = document.querySelectorAll(".rewrite-link"); + + function scramble(el) { + var text = el.getAttribute("data-label") || el.textContent; + el.setAttribute("data-label", text); + var iteration = 0; + var timer = setInterval(function () { + var display = text + .split("") + .map(function (char, index) { + if (index < iteration) return char; + return glyphs.charAt(Math.floor(Math.random() * glyphs.length)); + }) + .join(""); + el.textContent = display; + iteration += 1; + if (iteration > text.length + 2) { + clearInterval(timer); + el.textContent = text; + } + }, 26); + el.addEventListener( + "mouseleave", + function reset() { + clearInterval(timer); + el.textContent = text; + el.removeEventListener("mouseleave", reset); + }, + { once: true } + ); + } + + for (var i = 0; i < targets.length; i++) { + var link = targets[i]; + var baseLabel = link.textContent; + link.setAttribute("data-label", baseLabel); + link.addEventListener("mouseenter", function (event) { + scramble(event.currentTarget); + }); + } + })(); - <noscript>本ページの表示に JavaScript は不要です。</noscript> - </body> + (function () { + // Set updated date in Japanese era style when possible + var updated = document.getElementById("updated"); + if (!updated) return; + var now = new Date(); + var year = now.getFullYear(); + var eraYear = year - 2018; // Reiwa era starts 2019 + var text = + "令和" + + (eraYear > 0 ? eraYear : year) + + "年" + + (now.getMonth() + 1) + + "月" + + now.getDate() + + "日"; + updated.textContent = text; + })(); + </script> + </body> </html> |