メインページのソースを表示

{{#tag:metadesc | 川西図鑑は、川西市の「お店・人・場所」を集めた地域図鑑サイトです。飲食店から地域の活動まで、誰でも書けて、誰でも探せます。 }}
<templatestyles src="検索結果カード/styles.css" />
<html>
<div class="kawanishi-top">

  <!-- Hero -->
  <section class="hero">
    <div class="hero-bg">
    </div>
    <div class="hero-inner">
      <h1>川西図鑑</h1>
      <p class="catch hero-text-bg">
        川西の「お店・人・場所」を集めた地域図鑑
      </p>
      <p class="lead hero-text-bg">
        飲食店から地域の活動まで。<br>
        川西市にある情報を、誰でも書き、誰でも探せます。
      </p>
      <div class="hero-actions">
        <a class="kz-btn primary kz-with-icon" role='button' href="/wiki/飲食店検索">
          <span class="kz-icon">📖</span>
          <span class="kz-label">図鑑を見る</span>
</a>
        <a class="kz-btn secondary" role='button' href="/wiki/My_wiki:川西図鑑について">このサイトについて</a>
      </div>
    </div>
  </section>

  <!-- Encyclopedia -->
  <section class="kz-section">
    <h2>図鑑で探す</h2>
    <div class="card-grid">
      <div class="card">
        <a href="/wiki/飲食店検索" class="card-box card-main">
          <span class="icon">🍽</span>
          <span class="title">飲食店を探す</span>
          <span class="desc">川西市内の飲食店情報</span>
        </a>
        <div class="card-links">
          <a href="/wiki/飲食店_ジャンル一覧" class="card-box">ジャンルから探す</a>
          <a href="/wiki/飲食店_駅一覧" class="card-box">駅から探す</a>
        </div>
      </div>
      <div class="card disabled">
        <span class="icon">🏬</span>
        <span class="title">お店・店舗</span>
        <span class="desc">準備中</span>
      </div>
      <div class="card disabled">
        <span class="icon">👤</span>
        <span class="title">人・団体</span>
        <span class="desc">準備中</span>
      </div>
      <div class="card disabled">
        <span class="icon">🗺</span>
        <span class="title">場所・スポット</span>
        <span class="desc">準備中</span>
      </div>
    </div>
  </section>

<!-- Article（準備中）-->
<section class="kz-section alt"
  style="
    position: relative;
    opacity: 0.6;
    pointer-events: none;
  "
>
  <!-- 準備中ラベル -->
  <div
    style="
      position: absolute;
      top: 16px;
      right: 16px;
      background: #eee;
      color: #555;
      font-size: 30px;
      padding: 6px 12px;
      border-radius: 999px;
      font-weight: bold;
      z-index: 2;
    "
  >
    準備中
  </div>

  <h2>記事</h2>
  <p class="section-lead">
    川西のさまざまな図鑑ページに関連する、<br>
    ユーザーが書いた記事を紹介します。
  </p>

  <div class="article-list">
    <!-- 後でCargo差し替え -->
    <div class="article-item">川西能勢口で見つけた小さな名店</div>
    <div class="article-item">昔の川西と今を比べてみる</div>
    <div class="article-item">川西で活動する人たち</div>
  </div>

  <div class="center-actions">
    <a href="/wiki/記事一覧" class="kz-btn primary">記事一覧を見る</a>
    <a href="/wiki/記事を書く" class="kz-btn ghost">記事を書く</a>
  </div>

  <!-- オーバーレイ（視覚的に準備中感を強める場合）-->
  <div
    style="
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(
        45deg,
        rgba(255,255,255,0.4),
        rgba(255,255,255,0.4) 10px,
        rgba(255,255,255,0.6) 10px,
        rgba(255,255,255,0.6) 20px
      );
      z-index: 1;
    "
  ></div>
</section>
</html>
  <!-- Random -->
  <div class="kz-section">
    <h2>今日の川西</h2>
    <p class="kz-section-lead">
      ランダムに1件表示しています。
    </p>
  {{#cargo_query:
      tables=飲食店情報
      |fields=飲食店情報._pageName,飲食店情報.店名,飲食店情報.画像,飲食店情報.ジャンル,飲食店情報.郵便番号,飲食店情報.住所,飲食店情報.最寄り,飲食店情報.営業時間月,飲食店情報.定休日,飲食店情報.電話番号,飲食店情報.予算昼下限,飲食店情報.予算昼上限,飲食店情報.予算夜下限,飲食店情報.予算夜上限,飲食店情報.ストリートビューURL,飲食店情報.座標
      |format=template
      |template=検索結果カード
      |named args=yes
      |order by=_rowID DESC
      |limit=1
      |offset={{#expr: {{#time:U}} mod 424 }}
      |more results text=
    }}
  </div>

<div class="kz-section">
===== お店のオーナー様へ =====

情報の修正や、写真・メニューの追加、公式図鑑ページとしての掲載が可能です。
<div class="cta">
[[事業者の方へ|公式掲載・掲載内容のご案内を見る]]
</div>


===== 市民の皆さんへ 情報提供のお願い =====
営業時間や定休日の変更、新店舗情報など、市民の皆さんからの情報提供を受け付けています。
<div class="cta">
[[情報提供：飲食店|情報を提供・修正する]]
</div>
</div>

<html>
  <!-- Footer Message -->
  <section class="footer-note">
    <p>
      川西図鑑は、川西の情報を少しずつ集めていく<br>
      オープンな地域Wikiです。
    </p>
  </section>
</div>
<style>
.kawanishi-top {
  max-width: 1100px;
  margin: calc(-1 * (var(--space-md) + var(--space-xl))) auto 0;
  padding: 0px 16px 24px;
  font-family: inherit;
}

/* ---------- Hero ---------- */

/* =========================
   Hero 背景切り替え
   ========================= */

/* デフォルト（ライト想定） */
.kawanishi-top {
  --hero-bg-image: url('/images/thumb/1/1b/2704135_l.jpg/2560px-2704135_l.jpg');
}

/* 強制ダークモード */
.skin-theme-clientpref-night .kawanishi-top {
  --hero-bg-image: url('/images/8/8a/3704109_m.jpg');
}

/* 実際に背景画像を適用する要素 */
.kawanishi-top .hero-bg {
  background-image: var(--hero-bg-image);
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
}

.hero {
  text-align: center;
  padding: 72px 16px 64px;
  position: relative;
  min-height: 72vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.hero h1 {
  font-family:
    "Hiragino Maru Gothic ProN",
    "Yu Gothic UI",
    "Meiryo",
    "Segoe UI",
    system-ui,
    -apple-system,
    sans-serif;
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: 56px;
  margin-bottom: 50px;
}

/* 文字レイヤー */
.kawanishi-top .hero-inner {
  position: relative;
  z-index: 1;
  max-width: 960px;
  padding: 48px 24px;
  margin: 0 auto;
  text-align: center;
}

.hero .catch,
.hero .lead {
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

.hero .catch {
  font-size: clamp(16px, 4vw, 22px);
  font-weight: 600;
  margin-bottom: 8px;
}

.hero .lead {
  font-size: clamp(10px, 3.5vw, 18px);
  color: #f9fafb;
  margin-bottom: 28px;
  line-height: 1.8;
  opacity: 0.95;
}

/* 読みにくいテキストだけ守る */
.hero-text-bg {
  background: rgba(0, 0, 0, 0.38);
  color: #fff;
  padding: 8px 14px;
  border-radius: 8px;
  margin-bottom: 12px;
  line-height: 1.6;
  line-height: 1.6;
  white-space: nowrap;
}

.hero-text-bg br {
  content: "";
}

.hero-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.kz-with-icon .kz-icon {
  font-size: 1.2em;
  line-height: 1;
  transform: translateY(-1px);
}


/* ---------- Buttons ---------- */
.kz-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1;
  position: relative;
}

.kz-btn.primary {
  background: linear-gradient(
    to bottom,
    #4f46e5,
    #4338ca
  );
  color: #fff;

  border: 1px solid rgba(0,0,0,0.2);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 3px 0 #312e81,
    0 10px 24px rgba(49,46,129,0.45);
}

.kz-btn.primary:hover {
  background: #1d4ed8;
}

.kz-primary::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.25);
  pointer-events: none;
}

.kz-btn.secondary {
  background: linear-gradient(
    to bottom,
    #f8fafc,
    #e5e7eb
  );
  color: #1f2937;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 2px 0 #cbd5e1,
    0 6px 14px rgba(0,0,0,0.15);
}

.kz-btn.secondary:hover {
  background: linear-gradient(
    to bottom,
    #ffffff,
    #e5e7eb
  );
}

.kz-btn.ghost {
  background: rgba(255,255,255,0.6);
  color: #374151;

  border: 1px solid #9ca3af;
  border-radius: 12px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    0 1px 0 rgba(0,0,0,0.08);
}

/* ---------- Sections ---------- */
.kz-section {
  padding: 25px 0;
}

div.kz-section {
  margin-top: 30px;
}

.kz-section.alt,div.kz-section {
  background: #f9fafb;
  padding-left: 16px;
  padding-right: 16px;
}

.kz-section h2
{
  font-size: 24px;
  margin-bottom: 8px;
  margin-top: 8px;
}

.section-lead {
  color: #6b7280;
  margin-bottom: 24px;
}

/* ---------- Cards ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.card {
  padding: 20px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.card .icon {
  font-size: 28px;
}

.card .title {
  display: block;
  font-weight: 600;
  margin-top: 8px;
}

.card .desc {
  font-size: 13px;
  color: #6b7280;
  margin-top: 4px;
}

.card-main {
  display: block;
  padding: 16px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 8px;
}

.card-main:hover {
  background-color: rgba(0, 0, 0, 0.03);
}

.card-box {
  display: block;
  border: 1px solid currentColor;
  border-color: rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  padding: 12px;
  text-decoration: none;
  color: inherit;
  background: transparent;
}

.card-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.card-links a {
  padding: 12px 8px;
  text-align: center;
  font-size: 14px;
  text-decoration: none;
  color: inherit;
}

.card-links a:hover {
  background-color: rgba(0, 0, 0, 0.03);
}

.card a,
.card a:visited,
.card a:hover,
.card a:active {
  color: inherit;
}

.card.disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* ---------- Article ---------- */
.article-list {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

.article-item {
  padding: 12px 14px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.text-link {
  font-weight: 600;
  text-decoration: none;
}

.center-actions {
  margin-top: 32px;
  text-align: center;
}

/* ----- CTA -----*/
.cta a {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  background: #2563eb;
  color: #fff;
}

/* hover */
.cta a:hover {
  background: #1d4ed8;
}

/* visitedで色が変わらないように */
.cta a:visited {
  color: #fff;
}
/* ---------- Footer ---------- */
.footer-note {
  text-align: center;
  padding: 48px 0 16px;
  color: #6b7280;
  font-size: 13px;
}

/* ---------- Dark Mode ---------- */
.skin-theme-clientpref-night .section-lead,
.skin-theme-clientpref-night .footer-note {
  color: #9ca3af;
}

.skin-theme-clientpref-night .card-box {
    border-color: rgba(255, 255, 255, 0.25);
  }

.skin-theme-clientpref-night .kz-section.alt
,.skin-theme-clientpref-night div.kz-section {
  background: #1f2937;
}

.skin-theme-clientpref-night .card,
.skin-theme-clientpref-night .article-item {
  background: #111827;
  border-color: #374151;
}

.skin-theme-clientpref-night .kz-btn.secondary {
  background: #374151;
  color: #f9fafb;
}

/* OS自動モード（ダークOS時） */
@media (prefers-color-scheme: dark) {
  .skin-theme-clientpref-os .kawanishi-top {
    --hero-bg-image: url('/images/8/8a/3704109_m.jpg');
  }

  .skin-theme-clientpref-os .card-box {
    border-color: rgba(255, 255, 255, 0.25);
  }


  .skin-theme-clientpref-os .section-lead,
  .skin-theme-clientpref-os .footer-note {
    color: #9ca3af;
  }

  .skin-theme-clientpref-os .kz-section.alt
  ,.skin-theme-clientpref-os div.kz-section {
    background: #1f2937;
  }

  .skin-theme-clientpref-os .card,
  .skin-theme-clientpref-os .article-item {
    background: #111827;
    border-color: #374151;
  }

  .skin-theme-clientpref-os .kz-btn.secondary {
    background: #374151;
    color: #f9fafb;
  }
}
</style>
</html>
__目次非表示__