Create index.html

Class-Widgets · Jan 13, 2025 · 716fd93 · 716fd93
1 parent 0c715fc
commit 716fd93
Show file tree

Hide file tree

Showing 3 changed files with 211 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Class Widgets 插件列表</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/office-ui-fabric-core/11.0.0/css/fabric.min.css" />
+    <link rel="stylesheet" href="styles.css" />
+</head>
+<body>
+    <h1>Class Widgets 插件列表</h1>
+    <div class="card-container" id="plugin-list"></div>
+
+    <div class="overlay" id="overlay"></div>
+    <div class="details" id="details">
+        <span class="close" id="close-details">&times;</span>
+        <img id="details-img" src="" alt="插件图标" style="width: 100px; height: 100px; margin-bottom: 20px;">
+        <h2 id="details-title"></h2>
+        <p class="version" id="details-version"></p>
+        <p class="author" id="details-author"></p>
+        <p id="details-description"></p>
+        <a id="details-link" href="#" target="_blank">访问插件</a>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,49 @@
+async function fetchPlugins() {
+    const response = await fetch('https://raw.github.store/Class-Widgets/plugin-plaza/refs/heads/main/Plugins/plugin_list.json');
+    const data = await response.json();
+
+    const pluginListDiv = document.getElementById('plugin-list');
+    for (const key in data) {
+        const plugin = data[key];
+        const urlPath = plugin.url.replace('https://github.com/', '');
+        const imageUrl = `https://raw.github.store/${urlPath}/refs/heads/main/icon.png`;
+
+        const card = document.createElement('div');
+        card.className = 'card ms-card';
+        card.innerHTML = `
+            <img src="${imageUrl}" alt="${plugin.name} 图标">
+            <div class="card-content">
+                <h2>${plugin.name}</h2>
+                <p class="version">版本: ${plugin.version}</p>
+                <p class="author">作者: ${plugin.author}</p>
+                <p><strong>描述:</strong> ${plugin.description}</p>
+            </div>
+        `;
+        card.addEventListener('click', () => showDetails(plugin, imageUrl));
+        pluginListDiv.appendChild(card);
+    }
+}
+
+function showDetails(plugin, imageUrl) {
+    document.getElementById('details-img').src = imageUrl;
+    document.getElementById('details-title').textContent = plugin.name;
+    document.getElementById('details-version').textContent = `版本: ${plugin.version}`;
+    document.getElementById('details-author').textContent = `作者: ${plugin.author}`;
+    document.getElementById('details-description').textContent = plugin.description;
+    document.getElementById('details-link').href = plugin.url;
+
+    document.getElementById('overlay').style.display = 'block';
+    document.getElementById('details').style.display = 'block';
+}
+
+function hideDetails() {
+    document.getElementById('overlay').style.display = 'none';
+    document.getElementById('details').style.display = 'none';
+}
+
+document.getElementById('overlay').addEventListener('click', hideDetails);
+document.getElementById('close-details').addEventListener('click', hideDetails);
+
+fetchPlugins().catch(error => {
+    console.error('获取插件数据时出错:', error);
+});
diff --git a/styles.css b/styles.css
@@ -0,0 +1,135 @@
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    margin: 20px;
+    background-color: #f3f2f1;
+}
+
+h1 {
+    text-align: center;
+    margin-bottom: 20px;
+    color: #323130;
+}
+
+.card-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.card {
+    background-color: white;
+    border-radius: 8px;
+    padding: 16px;
+    margin: 10px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+    width: calc(50% - 20px);
+    max-width: 800px;
+    flex: 1 1 350px;
+    box-sizing: border-box;
+    display: flex;
+    transition: box-shadow 0.3s ease;
+    cursor: pointer;
+}
+
+.card:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+.card img {
+    width: 150px;
+    height: 150px;
+    border-radius: 8px;
+    object-fit: cover;
+    margin-right: 20px;
+}
+
+.card .card-content {
+    flex: 1;
+}
+
+.card h2 {
+    margin: 0;
+    font-size: 1.4em;
+    color: #323130;
+}
+
+.card .version {
+    color: #0078d4;
+    font-weight: bold;
+}
+
+.card .author {
+    color: green;
+    font-weight: bold;
+}
+
+.card p {
+    margin: 5px 0;
+    color: #605e5c;
+}
+
+.details {
+    display: none;
+    position: fixed;
+    top: 10%;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 80%;
+    max-width: 600px;
+    background-color: white;
+    border-radius: 8px;
+    padding: 20px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    z-index: 1000;
+}
+
+.details h2 {
+    margin-top: 0;
+    font-size: 1.8em;
+    color: #323130;
+}
+
+.details .version {
+    color: #0078d4;
+    font-weight: bold;
+}
+
+.details .author {
+    color: green;
+    font-weight: bold;
+}
+
+.details p {
+    margin: 10px 0;
+    color: #605e5c;
+}
+
+.details a {
+    color: #0078d4;
+    text-decoration: none;
+    font-weight: bold;
+}
+
+.details a:hover {
+    text-decoration: underline;
+}
+
+.details .close {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    font-size: 20px;
+    color: #605e5c;
+    cursor: pointer;
+}
+
+.overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 999;
+}