前端代码

2025-05-12 16:42:36 +09:00
commit 7c63f2f07b
4531 changed files with 656010 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="ja">
+
+<head>
+    <meta charset="UTF-8" />
+    <title>いぬハウス</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=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet" />
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <link rel="stylesheet" href="css/style.css" />
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+</head>
+
+<body>
+    <header class="navbar bg-primary text-white px-4 py-2 d-flex align-items-center">
+        <span class="logo fs-4 fw-bold">いぬハウス</span>
+        <div class="ms-auto d-flex align-items-center gap-2">
+            <select id="breedSelect" class="form-select form-select-sm">
+                <option value="">犬種選択</option>
+            </select>
+            <input type="text" id="searchInput" class="form-control form-control-sm" placeholder="サーチ" />
+            <button id="searchBtn" class="btn btn-sm btn-light">検索</button>
+        </div>
+    </header>
+
+    <nav class="sub-nav py-2">
+        <ul class="nav justify-content-center">
+            <li class="nav-item"><a class="nav-link active" href="#">ホーム</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">犬種</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">ケア</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">美容</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">いぬ公園</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">イベント</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">ショップ</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">マップ</a></li>
+        </ul>
+    </nav>
+
+    <main class="flex-fill">
+        <div class="slider-wrapper position-relative mx-auto">
+            <button class="slide-btn left-btn">◀</button>
+            <div id="sliderContainer" class="slider-container"></div>
+            <button class="slide-btn right-btn">▶</button>
+        </div>
+    </main>
+
+    
+    <div class="upload-download-container">
+        <h2>広告募集</h2>
+        
+        <label id="fileInputLabel" for="fileInput">ファイルを選択してください</label>
+        <input type="file" id="fileInput">
+        <button id="uploadBtn">アップロード</button>
+        <div id="uploadResult"></div>
+
+        
+        <button id="downloadBtn">ダウンロード</button>
+    </div>
+
+    <div class="button-area text-center py-4">
+        <button id="goToRegister" class="btn-outline">会員登録</button>
+        <button id="goToLogin" class="btn-outline">ログイン</button>
+    </div>
+
+    
+
+
+    <script src="js/main.js"></script>
+</body>
+
+</html>