-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
139 lines (128 loc) · 8.01 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html lang="ja" class="h-full">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-W5LHXW92');</script>
<!-- End Google Tag Manager -->
<title>GPTs非公式ディレクトリ</title>
<meta name="description" content="GPTs非公式ディレクトリは、国内を中心に様々なGPTsを集約したサイトです。">
<meta name="keywords" content="GPT, GPTs, GPTs非公式ディレクトリ, AI">
<meta name="author" content="タノメルキャリアスクール">
<link rel="icon" href="https://gptslist.jp/images/favicon.ico" type="image/x-icon">
<meta property="og:title" content="GPTs非公式ディレクトリ">
<meta property="og:description" content="GPTs非公式ディレクトリは、国内を中心に様々なGPTsを集約したサイトです。">
<meta property="og:type" content="website">
<meta property="og:image" content="https://gptslist.jp/images/ogp.png">
<meta property="og:url" content="https://gptslist.jp/">
<meta name="twitter:card" content="summary_large_image">
<link rel="canonical" href="https://gptslist.jp/">
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="flex flex-col h-full bg-gray-900 text-gray-300">
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W5LHXW92"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<header class="bg-gray-800 text-white text-center p-4">
<h1>GPTs非公式ディレクトリ</h1>
</header>
<section class="flex-1 container mx-auto p-4">
<div class="mb-4">
<div class="flex my-2 justify-center">
<div class="flex flex-col w-max">
<p>このサイトはOSSです。サービス運営に関わりたい人はこちら：<a class="text-blue-300" href="https://github.com/telewor/gpts_unofficial_directory">Github</a></p>
<div class="self-center mt-4">
<p>GPTsの追加申請はこちら</p>
<p><a class="text-blue-300" href="https://forms.gle/2HhuyNoiGZvY1Wc2A">GPTs追加申請フォーム</a></p>
</div>
</div>
</div>
<input type="text" id="search-input" placeholder="検索..." class="border p-2 w-full bg-gray-800 text-white">
<div class="flex flex-wrap justify-center gap-2 mt-2">
<button class="bg-blue-500 text-white p-2 category-button" data-category="all">全て</button>
<button class="bg-blue-500 text-white p-2 category-button" data-category="かわいい">かわいい</button>
<button class="bg-blue-500 text-white p-2 category-button" data-category="ゲーム">ゲーム</button>
<button class="bg-blue-500 text-white p-2 category-button" data-category="便利">便利</button>
<button class="bg-blue-500 text-white p-2 category-button" data-category="こども用">こども用</button>
<button class="bg-blue-500 text-white p-2 category-button" data-category="制作">制作</button>
<button class="bg-blue-500 text-white p-2 category-button" data-category="エージェント">エージェント</button>
<button class="bg-blue-500 text-white p-2 category-button" data-category="メンタルケア">メンタルケア</button>
<button class="bg-blue-500 text-white p-2 category-button" data-category="占い・診断">占い・診断</button>
<button class="bg-blue-500 text-white p-2 category-button" data-category="ビジネス">ビジネス</button>
<button class="bg-blue-500 text-white p-2 category-button" data-category="教育">教育</button>
<button class="bg-blue-500 text-white p-2 category-button" data-category="bot">bot</button>
<button class="bg-blue-500 text-white p-2 category-button" data-category="Q&A">Q&A</button>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" id="list-container">
<!-- リストアイテムはJavaScriptで生成されます -->
</div>
</section>
<footer class="bg-gray-800 text-white text-center p-4">
<p>© 2023 GPTs非公式ディレクトリ</p>
<p>by <a class="hover:text-blue-500" href="https://ctwo.pro/dai">タノメルキャリアスクール</a></p>
</footer>
<script>
document.addEventListener('DOMContentLoaded', function() {
let data = [];
fetch('gpts.json')
.then(response => response.json())
.then(jsonData => {
data = jsonData;
renderList(data);
})
.catch(error => console.error('Error:', error));
const searchInput = document.getElementById('search-input');
searchInput.addEventListener('keyup', function() {
const searchText = this.value.toLowerCase();
const filteredData = data.filter(item =>
item.name.toLowerCase().includes(searchText) ||
item.detail.toLowerCase().includes(searchText));
renderList(filteredData);
});
function renderList(items) {
const listContainer = document.getElementById('list-container');
listContainer.innerHTML = '';
items.forEach(item => {
const categoryTags = item.categories.map(c => '#'+c).join(' ');
const div = document.createElement('div');
div.className = 'bg-gray-800 p-4 border border-gray-700 cursor-pointer item';
div.setAttribute('data-categories', item.categories.join(','));
div.innerHTML = `
<h2 class="text-lg font-bold">${item.name}</h2>
<p>${item.detail}</p>
<p class="text-blue-300">${categoryTags}</p>
`;
div.onclick = () => window.location.href = item.url;
listContainer.appendChild(div);
});
}
const buttons = document.querySelectorAll('.category-button');
buttons.forEach(button => {
button.addEventListener('click', function() {
buttons.forEach(btn => btn.classList.remove('border-4')); // 全てのボタンの特別なスタイルをリセット
buttons.forEach(btn => btn.classList.remove('border-white')); // 全てのボタンの特別なスタイルをリセット
this.classList.add('border-4'); // 選択されたボタンに特別なスタイルを適用
this.classList.add('border-white'); // 選択されたボタンに特別なスタイルを適用
const category = this.getAttribute('data-category');
const listItems = document.querySelectorAll('.item');
listItems.forEach(item => {
const itemCategories = item.getAttribute('data-categories').split(',');
if (category === 'all' || itemCategories.includes(category)) {
item.style.display = '';
} else {
item.style.display = 'none';
}
});
});
});
});
</script>
</body>
</html>