xixu-me
45101cc497
Introduces a domain preview modal to the UI, allowing users to preview domain rules for each service. Adds DomainPreviewManager.js to handle fetching and displaying domain data from YAML files. Updates ServicesManager.js to support preview actions and UI, and enhances main.css with modal and preview button styles.
344 lines
11 KiB
HTML
344 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
<!-- Basic Meta Tags -->
|
|
<title>META.js Customizer - Create Custom META.js</title>
|
|
<meta
|
|
name="description"
|
|
content="Create your custom META.js with service rulesets from xixu-me/RFM. Easy-to-use web interface for generating META.js."
|
|
/>
|
|
<meta
|
|
name="keywords"
|
|
content="META.js, customizer, web development, service rulesets, RFM, xixu-me, favicons, JavaScript"
|
|
/>
|
|
<meta name="author" content="xixu-me" />
|
|
|
|
<!-- Open Graph / Facebook -->
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:url" content="https://metajs.xi-xu.me" />
|
|
<meta
|
|
property="og:title"
|
|
content="META.js Customizer - Create Custom META.js"
|
|
/>
|
|
<meta
|
|
property="og:description"
|
|
content="Create your custom META.js with service rulesets from xixu-me/RFM. Easy-to-use web interface for generating META.js."
|
|
/>
|
|
<meta property="og:site_name" content="META.js Customizer" />
|
|
|
|
<!-- Twitter -->
|
|
<meta name="twitter:url" content="https://metajs.xi-xu.me" />
|
|
<meta
|
|
name="twitter:title"
|
|
content="META.js Customizer - Create Custom META.js"
|
|
/>
|
|
<meta
|
|
name="twitter:description"
|
|
content="Create your custom META.js with service rulesets from xixu-me/RFM. Easy-to-use web interface for generating META.js."
|
|
/>
|
|
<meta name="twitter:creator" content="@xixu_me" />
|
|
<meta name="twitter:site" content="@xixu_me" />
|
|
|
|
<!-- Canonical URL -->
|
|
<link rel="canonical" href="https://metajs.xi-xu.me" />
|
|
|
|
<!-- Preconnect for Performance -->
|
|
<link rel="preconnect" href="https://cdnjs.cloudflare.com" />
|
|
<link rel="preconnect" href="https://api.github.com" />
|
|
<link rel="preconnect" href="https://raw.githubusercontent.com" />
|
|
|
|
<!-- Stylesheets -->
|
|
<link rel="stylesheet" href="src/styles/main.css" />
|
|
<link
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
|
|
rel="stylesheet"
|
|
/>
|
|
|
|
<!-- SortableJS for drag-and-drop functionality -->
|
|
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<!-- Theme Toggle -->
|
|
<div class="theme-toggle">
|
|
<button id="theme-toggle" aria-label="Toggle theme" title="Theme: Auto">
|
|
<i class="fas fa-circle-half-stroke"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Main Container -->
|
|
<div class="container">
|
|
<!-- Header Section -->
|
|
<header class="header">
|
|
<h1>
|
|
<i class="fas fa-cogs" aria-hidden="true"></i>
|
|
META.js Customizer
|
|
</h1>
|
|
<p class="subtitle">
|
|
Create your custom META.js of
|
|
<a
|
|
href="https://github.com/xixu-me/META"
|
|
target="_blank"
|
|
rel="noopener"
|
|
>
|
|
<i class="fab fa-github" aria-hidden="true"></i> xixu-me/META
|
|
</a>
|
|
using service rulesets from
|
|
<a
|
|
href="https://github.com/xixu-me/RFM"
|
|
target="_blank"
|
|
rel="noopener"
|
|
>
|
|
<i class="fab fa-github" aria-hidden="true"></i> xixu-me/RFM
|
|
</a>
|
|
</p>
|
|
</header>
|
|
|
|
<!-- Services Configuration Section -->
|
|
<main>
|
|
<section
|
|
id="services-container"
|
|
class="card"
|
|
aria-labelledby="services-heading"
|
|
>
|
|
<div class="card-header">
|
|
<h2 id="services-heading">
|
|
<i class="fas fa-list" aria-hidden="true"></i>
|
|
Services Configuration
|
|
</h2>
|
|
</div>
|
|
<div class="card-content">
|
|
<!-- Routing Priority Information -->
|
|
<div
|
|
class="routing-priority-reminder"
|
|
role="note"
|
|
aria-label="Important routing information"
|
|
>
|
|
<i
|
|
class="fas fa-exclamation-triangle warning-icon"
|
|
aria-hidden="true"
|
|
></i>
|
|
<div class="content">
|
|
<strong>Routing Priority:</strong>
|
|
<span>
|
|
Routing rules are matched in order from top to bottom, with
|
|
the rule at the top of the list taking precedence over the
|
|
rules below it.
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Services Controls -->
|
|
<div class="services-controls">
|
|
<div class="search-container">
|
|
<div class="search-input-wrapper">
|
|
<i class="fas fa-search search-icon" aria-hidden="true"></i>
|
|
<input
|
|
type="text"
|
|
id="search-input"
|
|
placeholder="Search and add services..."
|
|
aria-label="Search for services"
|
|
autocomplete="off"
|
|
spellcheck="false"
|
|
/>
|
|
</div>
|
|
<div class="services-count" role="status" aria-live="polite">
|
|
<i class="fas fa-check-circle" aria-hidden="true"></i>
|
|
<span id="selected-count">0 of 0 selected</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Search Results Dropdown -->
|
|
<div
|
|
id="search-results"
|
|
class="search-results"
|
|
role="listbox"
|
|
aria-label="Available services"
|
|
aria-hidden="true"
|
|
></div>
|
|
</div>
|
|
|
|
<!-- Selected Services List -->
|
|
<div
|
|
id="selected-services"
|
|
role="list"
|
|
aria-label="Selected services"
|
|
aria-describedby="services-description"
|
|
>
|
|
<div class="no-services">
|
|
<i class="fas fa-inbox" aria-hidden="true"></i>
|
|
<h3>No services selected</h3>
|
|
<p id="services-description">
|
|
Search for services above to get started
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Generated Output Section -->
|
|
<section
|
|
id="output-container"
|
|
class="card"
|
|
aria-labelledby="output-heading"
|
|
>
|
|
<div class="card-header">
|
|
<h2 id="output-heading">
|
|
<i class="fas fa-code" aria-hidden="true"></i>
|
|
Generated META.js
|
|
</h2>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="output-actions">
|
|
<button
|
|
id="copyButton"
|
|
class="btn btn-primary"
|
|
disabled
|
|
aria-describedby="copy-description"
|
|
>
|
|
<i class="fas fa-copy" aria-hidden="true"></i>
|
|
Copy to Clipboard
|
|
</button>
|
|
<button
|
|
id="downloadButton"
|
|
class="btn btn-secondary"
|
|
disabled
|
|
aria-describedby="download-description"
|
|
>
|
|
<i class="fas fa-download" aria-hidden="true"></i>
|
|
Download META.js
|
|
</button>
|
|
</div>
|
|
<div class="sr-only">
|
|
<p id="copy-description">
|
|
Copy the generated META.js to your clipboard
|
|
</p>
|
|
<p id="download-description">
|
|
Download the generated META.js as a file
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- Domain Preview Modal -->
|
|
<div id="domain-preview-modal" class="modal-overlay" aria-hidden="true">
|
|
<div
|
|
class="modal-content"
|
|
role="dialog"
|
|
aria-labelledby="modal-title"
|
|
aria-describedby="modal-description"
|
|
>
|
|
<div class="modal-header">
|
|
<h3 id="modal-title">Domain Preview</h3>
|
|
<button class="modal-close" aria-label="Close domain preview">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="service-info-header">
|
|
<div class="service-icon">
|
|
<i class="fas fa-globe"></i>
|
|
</div>
|
|
<div class="service-details">
|
|
<h4 id="modal-service-name">Service Name</h4>
|
|
<p id="modal-description">Domain rules for this service</p>
|
|
</div>
|
|
</div>
|
|
<div class="domains-container">
|
|
<div class="loading-spinner" id="modal-loading">
|
|
<i class="fas fa-spinner fa-spin"></i>
|
|
<p>Loading domain list...</p>
|
|
</div>
|
|
<div
|
|
class="domains-list"
|
|
id="domains-list"
|
|
style="display: none"
|
|
></div>
|
|
<div class="modal-error" id="modal-error" style="display: none">
|
|
<i class="fas fa-exclamation-triangle"></i>
|
|
<h4>Failed to Load Domains</h4>
|
|
<p id="error-message">Unable to fetch domain information.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Information Section -->
|
|
<aside class="info-banner card" aria-labelledby="info-heading">
|
|
<div class="card-header">
|
|
<h2 id="info-heading">
|
|
<i class="fas fa-info-circle" aria-hidden="true"></i>
|
|
Icon Configuration Guide
|
|
</h2>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="info-content">
|
|
<p>
|
|
Service icons are sourced from
|
|
<a
|
|
href="https://github.com/xixu-me/favicons"
|
|
target="_blank"
|
|
rel="noopener"
|
|
>
|
|
<i class="fab fa-github" aria-hidden="true"></i>
|
|
xixu-me/favicons</a
|
|
>. Auto-generated configurations may require manual adjustments
|
|
based on availability.
|
|
</p>
|
|
|
|
<h3>
|
|
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
Configuration Rules
|
|
</h3>
|
|
<ul>
|
|
<li>
|
|
<strong>Icon unavailable:</strong> Uses specific
|
|
<code>domain</code>
|
|
<span class="example"
|
|
>(e.g., "xiaohongshu.com" for rednote)</span
|
|
>
|
|
</li>
|
|
<li>
|
|
<strong>Name matches SLD:</strong> Uses only <code>tld</code>
|
|
<span class="example"
|
|
>(e.g., "github" → <code>tld: "com"</code>)</span
|
|
>
|
|
</li>
|
|
<li>
|
|
<strong>Name mismatch:</strong> Adds <code>sld</code>
|
|
<span class="example"
|
|
>(e.g., "xai" → <code>sld: "x", tld: "ai"</code>)</span
|
|
>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<p>
|
|
<i class="fas fa-code-branch" aria-hidden="true"></i>
|
|
This web app is open source at
|
|
<a
|
|
href="https://github.com/xixu-me/META.js-Customizer"
|
|
target="_blank"
|
|
rel="noopener"
|
|
>
|
|
<i class="fab fa-github" aria-hidden="true"></i>
|
|
xixu-me/META.js-Customizer
|
|
</a>
|
|
</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<!-- Scripts -->
|
|
<script src="src/templates/meta-template.js"></script>
|
|
<script type="module" src="src/scripts/app.js"></script>
|
|
</body>
|
|
</html>
|