open/Jetbrains-Help
1
0
Fork 0
mirror of https://github.com/NotoChen/Jetbrains-Help.git synced 2025-10-31 17:08:30 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

style: ui 重构

Browse Source
This commit is contained in:
藏柏 2025-08-13 17:00:13 +08:00
parent b0d4b6d8af
commit b6aaa1c398
3 changed files with 390 additions and 543 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

551
src/main/resources/static/css/index.css
View File

@ -1,535 +1,160 @@
.form {
background-color: #15172b;
border-radius: 20px;
box-sizing: border-box;
height: 500px;
padding: 20px;
width: 320px;
}
.title {
color: #eee;
font-family: sans-serif;
font-size: 36px;
font-weight: 600;
margin-top: 30px;
}
.subtitle {
color: #eee;
font-family: sans-serif;
font-size: 16px;
font-weight: 600;
margin-top: 10px;
}
.input-container {
height: 50px;
position: relative;
width: 100%;
}
.ic1 {
margin-top: 40px;
}
.ic2 {
margin-top: 30px;
}
.input {
background-color: #303245;
border-radius: 12px;
border: 0;
box-sizing: border-box;
color: #eee;
font-size: 18px;
height: 100%;
outline: 0;
padding: 4px 20px 0;
width: 100%;
}
.cut {
background-color: #15172b;
border-radius: 10px;
height: 20px;
left: 20px;
position: absolute;
top: -20px;
transform: translateY(0);
transition: transform 200ms;
width: 76px;
}
.cut-short {
width: 50px;
}
.input:focus ~ .cut,
.input:not(:placeholder-shown) ~ .cut {
transform: translateY(8px);
}
.placeholder {
color: #65657b;
font-family: sans-serif;
left: 20px;
line-height: 14px;
pointer-events: none;
position: absolute;
transform-origin: 0 50%;
transition: transform 200ms, color 200ms;
top: 20px;
}
.input:focus ~ .placeholder,
.input:not(:placeholder-shown) ~ .placeholder {
transform: translateY(-30px) translateX(10px) scale(0.75);
}
.input:not(:placeholder-shown) ~ .placeholder {
color: #808097;
}
.input:focus ~ .placeholder {
color: #dc2f55;
}
.submit {
background-color: #08d;
border-radius: 12px;
border: 0;
box-sizing: border-box;
color: #eee;
cursor: pointer;
font-size: 18px;
height: 50px;
margin-top: 38px;
text-align: center;
width: 100%;
}
.submit:active {
background-color: #06b;
}
:root {
--text-grey: #9e9e9e;
--text-main: rgba(0, 0, 0, 0.87);
--spacing: 4px;
--size: 64px;
--radius: 1.5rem;
--accent: #5380f7;
--text-sm: 0.875rem;
--main-bg: #fff;
--card-bg: #fff;
--hover-color: #eee;
--border-color: rgba(0, 0, 0, 0.05);
--grey-400: rgba(0, 0, 0, 0.04);
--grey-600: rgba(0, 0, 0, 0.06);
}
@media (prefers-color-scheme: dark) {
:root {
--main-bg: rgb(0, 0, 0);
--card-bg: rgb(31, 34, 38);
--text-main: #d9d9d9;
--text-grey: #6e767d;
--accent: #1d9bf0;
--hover-color: rgba(255, 255, 255, 0.07);
--border-color: #4b4648;
}
}
body {
font-size: 1rem;
line-height: 1.5;
word-wrap: break-word;
font-kerning: normal;
font-family: 'Gotham SSm A', 'Gotham SSm B', 'Arial Unicode MS', Helvetica, sans-serif;
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
background-color: var(--main-bg);
}
* ul, * ol {
list-style: none;
padding: 0;
margin: 0;
}
*[role='button'], button {
cursor: pointer;
}
.color-primary {
color: var(--text-main);
}
/* Custom Icon Styles - Keep these for JetBrains product icons */
.mt-0 {
margin-top: 0;
}
.radius-1 {
border-radius: var(--radius);
}
.px-6 {
padding-left: calc(var(--spacing) * 6);
padding-right: calc(var(--spacing) * 6);
}
.py-6 {
padding-left: calc(var(--spacing)* 6);
padding-right: calc(var(--spacing)* 6);
}
.py-10 {
padding-top: calc(var(--spacing) * 10);
padding-bottom: calc(var(--spacing) * 10);
}
.pd-6 {
padding: calc(var(--spacing) * 6);
}
.pt-1 {
padding-top: var(--spacing);
}
.pb-0 {
padding-bottom: 0;
}
.overflow-hidden {
overflow: hidden;
}
.flex {
display: flex;
}
.justify-between {
justify-content: space-between;
}
.justify-center {
justify-content: center;
}
.items-center {
align-items: center;
}
.shrink-0 {
flex-shrink: 0;
}
.text-grey {
color: var(--text-grey);
}
.text-sm {
font-size: 0.875rem;
}
.bg-card {
background-color: var(--card-bg);
}
.truncate {
/* display: -webkit-box; */
/* -webkit-box-orient: vertical; */
/* -webkit-line-clamp: var(--line, 3); */
/* overflow: hidden; */
}
.truncate-1 {
--line: 1;
}
.overflow-ellipsis {
text-overflow: ellipsis;
}
.z-grid {
display: grid;
grid-gap: var(--gutter, 1rem);
grid-template-columns: repeat(auto-fill, minmax(min(var(--space, 10rem), 100%), 1fr));
}
.card {
box-shadow: rgb(0 0 0 / 30%) 0 8px 40px -12px;
border-radius: 1.5rem;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0ms;
width: 90%;
position: relative;
overflow: visible;
background-color: var(--card-bg);
margin: 0 auto;
}
.card:hover {
transform: translateY(-2px);
}
.card:hover .mask {
bottom: -1.5rem;
}
.card:hover .mask-c-1 {
bottom: -2.5rem;
}
.container {
padding-top: calc(var(--spacing) * 10);
}
.container p {
position: relative;
cursor: pointer;
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
.container p::after {
content: attr(data-content);
position: absolute;
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
color: transparent;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius);
}
.container p:hover {
color: transparent;
}
.container p:hover::after {
color: var(--text-main);
background-color: var(--hover-color);
}
.toggle li {
z-index: 99;
position: relative;
background: transparent;
padding: 0 20px;
color: var(--text-main);
transition: background-color 250ms ease-out;
}
.toggle li:hover {
background-color: var(--hover-color);
}
.toggle li.active a {
color: var(--accent);
}
.toggle li:first-child {
border-top-left-radius: var(--text-sm);
border-top-right-radius: var(--text-sm);
}
.toggle li:last-child {
border-bottom-left-radius: var(--text-sm);
border-bottom-right-radius: var(--text-sm);
}
.toggle li:last-child a {
border-bottom: 0;
}
.toggle li a {
display: block;
border-bottom: 1px solid var(--border-color);
padding: 16px 0;
color: inherit;
text-decoration: none;
white-space: nowrap;
}
/* JetBrains Product Icons */
.icon {
background-image: url('../images/icons.svg?t=4567');
background-size: 64px;
background-position-x: 0;
background-repeat: no-repeat;
}
.icon-ii {
background-image: url('../images/intellij-idea.svg?v=1');
background-image: url('https://resources.jetbrains.com/storage/logos/web/intellij-idea/intellij-idea.svg');
}
.icon-ps {
background-image: url('../images/phpstorm.svg?v=1');
background-image: url('https://resources.jetbrains.com/storage/logos/web/phpstorm/phpstorm.svg');
}
.icon-ac {
background-position-y: -192px;
background-image: url('https://resources.jetbrains.com/storage/logos/web/appcode/appcode.svg');
}
.icon-db {
background-image: url('../images/datagrip.svg?v=1');
background-image: url('https://resources.jetbrains.com/storage/logos/web/datagrip/datagrip.svg');
}
.icon-rm {
background-image: url('../images/rubymine.svg?v=1');
background-image: url('https://resources.jetbrains.com/storage/logos/web/rubymine/rubymine.svg');
}
.icon-ws {
background-image: url('../images/webstorm.svg?v=1');
background-image: url('https://resources.jetbrains.com/storage/logos/web/webstorm/webstorm.svg');
}
.icon-rd {
background-image: url('../images/rider.svg?v=1');
background-image: url('https://resources.jetbrains.com/storage/logos/web/rider/rider.svg');
}
.icon-cl {
background-image: url('../images/clion.svg?v=1');
background-image: url('https://resources.jetbrains.com/storage/logos/web/clion/clion.svg');
}
.icon-pc {
background-image: url('../images/pycharm.svg?v=1');
background-image: url('https://resources.jetbrains.com/storage/logos/web/pycharm/pycharm.svg');
}
.icon-go {
background-image: url('../images/goland.svg?v=1');
background-image: url('https://resources.jetbrains.com/storage/logos/web/goland/goland.svg');
}
.icon-ds {
background-image: url('../images/dataspell.svg?v=1');
background-image: url('https://resources.jetbrains.com/storage/logos/web/dataspell/dataspell.svg');
}
.icon-dc {
background-image: url('../images/dotcover.svg?v=1');
background-image: url('https://resources.jetbrains.com/storage/logos/web/dotcover/dotcover.svg');
}
.icon-dpn {
background-image: url('../images/dottrace.svg?v=1');
background-image: url('https://resources.jetbrains.com/storage/logos/web/dottrace/dottrace.svg');
}
.icon-dm {
background-image: url('../images/dotmemory.svg?v=1');
background-image: url('https://resources.jetbrains.com/storage/logos/web/dotmemory/dotmemory.svg');
}
.icon-rr {
background-image: url('../images/rustrover.svg?v=1');
background-image: url('https://resources.jetbrains.com/storage/logos/web/rustrover/rustrover.svg');
}
.icon-qa {
background-image: url('../images/aqua.svg?v=1');
background-image: url('https://resources.jetbrains.com/storage/logos/web/aqua/aqua.svg');
}
.mask {
transition: 0.2s;
position: absolute;
z-index: -1;
width: 88%;
height: 100%;
bottom: 0;
border-radius: 1.5rem;
background-color: var(--grey-600);
left: 50%;
transform: translateX(-50%);
.icon-al {
background-image: url('https://resources.jetbrains.com/storage/logos/web/toolbox/toolbox.svg');
}
.mask-c-1 {
bottom: 0;
width: 72%;
background-color: var(--grey-400);
/* Custom animations and transitions for enhanced UX */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.avatar-wrapper {
position: relative;
width: var(--size);
height: var(--size);
font-size: 1.25rem;
user-select: none;
transform: translateY(50%);
@keyframes slideIn {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
.avatar-wrapper img, .avatar-wrapper .icon {
.animate-fade-in {
animation: fadeIn 0.5s ease-out;
}
.animate-slide-in {
animation: slideIn 0.3s ease-out;
}
/* Responsive Grid Layout */
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 1.5rem;
width: 100%;
height: 100%;
margin: 0;
background-color: var(--card-bg);
color: transparent;
object-fit: cover;
text-align: center;
text-indent: 10000px;
}
header.tip a {
color: var(--accent);
text-decoration: none;
}
header.tip p {
word-break: break-word;
word-wrap: break-word;
}
main hr {
margin: 0;
padding: 0;
background: var(--border-color);
height: 1px;
border: none;
}
footer {
--_size: 40px;
padding-top: var(--_size);
width: 96%;
margin: calc(var(--spacing) * 10) auto 0;
padding-bottom: var(--_size);
border-top: 1px solid var(--border-color);
-moz-box-align: center;
-webkit-box-pack: justify;
/* Responsive breakpoints for different card sizes */
@media (max-width: 640px) {
.grid-container {
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 1rem;
}
}
footer .lt-panel p:nth-of-type(1) {
color: inherit;
}
header.tip {
top: 2.3%;
background-color: var(--card-bg);
color: var(--text-main);
z-index: 99;
width: 80%;
margin: 0 auto;
border-radius: 16px;
box-shadow: rgb(0 0 0 / 30%) 0 8px 40px -12px;
transition: transform 250ms ease, box-shadow 250ms ease;
}
.sticky {
position: sticky;
@media (min-width: 641px) and (max-width: 1024px) {
.grid-container {
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 1.25rem;
}
}
.parent {
position: relative;
@media (min-width: 1025px) {
.grid-container {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
}
}
.search {
width: 300px;
height: 40px;
border-radius: 18px;
outline: none;
/*border: 1px solid #ccc;*/
padding-left: 20px;
/*position: absolute;*/
/* Custom scrollbar for better aesthetics */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
}
@media (prefers-color-scheme: dark) {
::-webkit-scrollbar-track {
background: #2d2d2d;
}
::-webkit-scrollbar-thumb {
background: #555;
}
::-webkit-scrollbar-thumb:hover {
background: #777;
}
}

46
src/main/resources/static/js/index.js
View File

@ -14,7 +14,14 @@ $(document).ready(function() {
expiryDate: $('#expiryDate').val()
};
localStorage.setItem('licenseInfo', JSON.stringify(licenseInfo));
$('#mask, #form').hide();
// Add fade out animation
$('#form').addClass('opacity-0 scale-95');
$('#mask').addClass('opacity-0');
setTimeout(() => {
$('#mask, #form').hide().removeClass('opacity-0 scale-95');
}, 300);
};
// Function to handle search input
@ -22,15 +29,52 @@ $(document).ready(function() {
$("#product-list").load('/search?search=' + e.target.value);
});
// Function to update preview
window.updatePreview = function() {
const licenseeName = $('#licenseeName').val() || '光云';
const assigneeName = $('#assigneeName').val() || '藏柏';
const expiryDate = $('#expiryDate').val() || '2111/11/11';
$('#previewLicenseName').text(licenseeName);
$('#previewAssigneeName').text(assigneeName);
$('#previewExpiryDate').text(expiryDate);
};
// Function to show license form
window.showLicenseForm = function () {
let licenseInfo = JSON.parse(localStorage.getItem('licenseInfo'));
$('#licenseeName').val(licenseInfo?.licenseeName || '光云');
$('#assigneeName').val(licenseInfo?.assigneeName || '藏柏');
$('#expiryDate').val(licenseInfo?.expiryDate || '2111-11-11');
// Update preview with current values
updatePreview();
// Show with fade in animation
$('#mask, #form').show();
setTimeout(() => {
$('#form').removeClass('opacity-0 scale-95');
$('#mask').removeClass('opacity-0');
}, 10);
};
// Function to close modal
window.closeModal = function() {
$('#form').addClass('opacity-0 scale-95');
$('#mask').addClass('opacity-0');
setTimeout(() => {
$('#mask, #form').hide().removeClass('opacity-0 scale-95');
}, 300);
};
// Close modal when clicking on mask
$('#mask').on('click', function(e) {
if (e.target === this) {
closeModal();
}
});
// Function to show VM options
window.showVmoptins = function () {
var text = "-javaagent:/(Your Path)/ja-netfilter/ja-netfilter.jar\n" +

336
src/main/resources/templates/index.html
View File

@ -5,99 +5,277 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Jetbrains-Help</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" type="text/css" href="/css/index.css">
<link rel="icon" href="https://www.jetbrains.com/favicon.ico?r=1234">
<script>
tailwind.config = {
darkMode: 'media',
theme: {
extend: {
colors: {
'jetbrains-blue': '#5380f7',
'jetbrains-dark-blue': '#1d9bf0',
'card-light': '#ffffff',
'card-dark': '#1f2226',
'bg-light': '#ffffff',
'bg-dark': '#000000',
'text-light': 'rgba(0, 0, 0, 0.87)',
'text-dark': '#d9d9d9',
'text-grey-light': '#9e9e9e',
'text-grey-dark': '#6e767d',
'border-light': 'rgba(0, 0, 0, 0.05)',
'border-dark': '#4b4648',
'hover-light': '#eeeeee',
'hover-dark': 'rgba(255, 255, 255, 0.07)'
},
fontFamily: {
'jetbrains': ['Gotham SSm A', 'Gotham SSm B', 'Arial Unicode MS', 'Helvetica', 'sans-serif']
},
boxShadow: {
'card': 'rgb(0 0 0 / 30%) 0 8px 40px -12px',
'card-hover': 'rgb(0 0 0 / 40%) 0 12px 50px -8px'
}
}
}
}
</script>
</head>
<body>
<header class="tip sticky flex items-center py-6">
<p>
🇨🇳 下载 <a href="ja-netfilter" title="Download jetbra first">ja-netfilter.zip</a> , 然后配置
你的JetBrains IDE(anything)'s <a onclick="showVmoptins()">IDE.vmoptions</a> 配置文件!<br>
🇨🇳 当然你也可以 <a onclick="showLicenseForm()">重新定制激活授权</a> 用以自定义你的激活信息!</br>
<strong>🇨🇳 请注意,此页面仅由 <span
th:text="${defaults.getDefaultLicenseName()} + '/' + ${defaults.getDefaultAssigneeName()}"></span>
个人所有!</strong>
</p>
<form class="parent">
<input type="text" class="search" id="search" placeholder="搜索IDE或者插件">
</form>
<body class="bg-bg-light dark:bg-bg-dark text-text-light dark:text-text-dark font-jetbrains antialiased min-h-screen">
<!-- Header Section -->
<header class="sticky top-0 z-50 bg-card-light dark:bg-card-dark shadow-card rounded-2xl mx-auto mt-4 w-11/12 max-w-6xl">
<div class="flex flex-col lg:flex-row items-start lg:items-center justify-between p-6 gap-4">
<!-- Info Section -->
<div class="flex-1 space-y-2">
<div class="flex items-center gap-2 text-sm lg:text-base">
<span class="text-2xl">🇨🇳</span>
<span>下载
<a href="ja-netfilter"
title="Download jetbra first"
class="text-jetbrains-blue dark:text-jetbrains-dark-blue hover:underline font-medium transition-colors">
ja-netfilter.zip (点击下载Jar)
</a>
</span>
</div>
<div class="flex items-center gap-2 text-sm lg:text-base">
<span class="text-2xl">🇨🇳</span>
<span>配置JetBrains IDE's
<a onclick="showVmoptins()"
class="text-jetbrains-blue dark:text-jetbrains-dark-blue hover:underline font-medium cursor-pointer transition-colors">
IDE.vmoptions (点击复制VM配置)
</a>
</span>
</div>
<div class="flex items-center gap-2 text-sm lg:text-base">
<span class="text-2xl">🇨🇳</span>
<span>选择合适的IDE or Plugin, 点击复制激活码即可, 激活预览如下 ↓</span>
</div>
<!-- License Preview -->
<div class="inline-block bg-gray-50 dark:bg-gray-800 rounded-lg px-4 py-2 mb-3 border border-gray-200 dark:border-gray-700">
<span class="text-sm text-text-light dark:text-text-dark">
授权给 <span id="previewLicenseName" th:text="${defaults.getDefaultLicenseName()}" class="font-medium">光云</span> / <span id="previewAssigneeName" th:text="${defaults.getDefaultAssigneeName()}" class="font-medium">藏柏</span>，有效期至 <span id="previewExpiryDate" th:text="${defaults.getDefaultExpiryDate()}" class="font-medium">2111/11/11</span>
</span>
</div>
<div class="flex items-center gap-2 text-sm lg:text-base">
<span class="text-2xl">🇨🇳</span>
<span>可以
<a onclick="showLicenseForm()"
class="text-jetbrains-blue dark:text-jetbrains-dark-blue hover:underline font-medium cursor-pointer transition-colors">
自定义激活信息 (点击修改)
</a>
</span>
</div>
<!-- <div class="flex items-center gap-2 text-sm lg:text-base font-semibold">-->
<!-- <span class="text-2xl">🇨🇳</span>-->
<!-- <span>请注意,此页面仅由-->
<!-- <span class="text-jetbrains-blue dark:text-jetbrains-dark-blue"-->
<!-- th:text="${defaults.getDefaultLicenseName()} + '/' + ${defaults.getDefaultAssigneeName()}">-->
<!-- </span>-->
<!-- 个人所有!-->
<!-- </span>-->
<!-- </div>-->
</div>
<!-- Search Section -->
<div class="w-full lg:w-auto lg:min-w-[400px] xl:min-w-[500px]">
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-text-grey-light dark:text-text-grey-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</div>
<input type="text"
id="search"
placeholder="搜索IDE或者插件"
class="w-full pl-10 pr-4 py-3 bg-white dark:bg-gray-800 border border-border-light dark:border-border-dark rounded-xl text-text-light dark:text-text-dark placeholder-text-grey-light dark:placeholder-text-grey-dark focus:outline-none focus:ring-2 focus:ring-jetbrains-blue dark:focus:ring-jetbrains-dark-blue focus:border-transparent transition-all duration-200 shadow-sm hover:shadow-md">
</div>
</div>
</div>
</header>
<main id="product-list" class="px-6 z-grid py-10" style="--space: 20rem; --gutter: 3.5rem">
<!-- Main Content -->
<main id="product-list" class="px-4 py-8">
<th:block th:fragment="product-list">
<th:block th:each="product:${products}">
<article class="card" th:data-product="${product.getName()}"
th:data-product-codes="${product.getProductCode()}">
<header>
<div class="flex items-center justify-between px-6 pt-1 pb-0 bg-card radius-1">
<div class="avatar-wrapper flex items-center justify-center overflow-hidden shrink-0">
<div class="icon" th:classappend="${product.getIconClass()}" role="img"></div>
<!-- Unified Products and Plugins Grid -->
<div class="grid-container">
<!-- Products (will be rendered first) -->
<th:block th:each="product:${products}">
<article class="group relative bg-card-light dark:bg-card-dark rounded-2xl shadow-card hover:shadow-card-hover transform hover:-translate-y-1 transition-all duration-300 overflow-hidden cursor-pointer"
th:data-product="${product.getName()}"
th:data-product-codes="${product.getProductCode()}"
onclick="copyLicense(this)"
title="点击复制激活码">
<!-- Card Content -->
<div class="p-6 flex items-center h-32">
<!-- Icon -->
<div class="w-20 h-20 rounded-xl bg-white dark:bg-gray-800 shadow-sm flex items-center justify-center mr-6 flex-shrink-0 group-hover:scale-110 transition-transform duration-300">
<div class="icon w-16 h-16 bg-contain bg-center bg-no-repeat" th:classappend="${product.getIconClass()}" role="img"></div>
</div>
<!-- Product Name -->
<h3 class="text-base font-semibold text-text-light dark:text-text-dark leading-tight group-hover:opacity-30 transition-opacity duration-300 flex-grow"
th:title="${product.getName()}"
th:text="${product.getName()}">
</h3>
</div>
<!-- Hover Overlay -->
<div class="absolute inset-0 bg-card-light dark:bg-card-dark rounded-2xl flex items-center justify-center opacity-0 group-hover:opacity-95 transition-opacity duration-300">
<div class="text-center">
<div class="w-12 h-12 mx-auto mb-3 text-jetbrains-blue dark:text-jetbrains-dark-blue">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-full h-full">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
</svg>
</div>
<div class="text-base font-medium text-jetbrains-blue dark:text-jetbrains-dark-blue">
点击复制激活码
</div>
</div>
</div>
<hr/>
</header>
<div class="pd-6 overflow-hidden bg-card container radius-1">
<h1 class="truncate truncate-1 color-primary mt-0 overflow-ellipsis" th:title="${product.getName()}"
th:text="${product.getName()}"></h1>
<p title="复制到剪贴板" class="truncate text-sm text-grey" onclick="copyLicense(this)"
data-content="复制到剪贴板">
*********************************************************************************************************************************************************
</p>
</div>
<div class="mask"></div>
<div class="mask mask-c-1"></div>
</article>
</th:block>
<th:block th:each="plugin:${plugins}">
<article class="card" th:data-product="${plugin.getName()}"
th:data-product-codes="${plugin.getProductCode()}">
<header>
<div class="flex items-center justify-between px-6 pt-1 pb-0 bg-card radius-1">
<div class="avatar-wrapper flex items-center justify-center overflow-hidden shrink-0">
<div class="icon" role="img"
th:style="'background-image: url(' + ${plugin.getIcon()} + ')'"></div>
<!-- Subtle Shadow -->
<div class="absolute -bottom-1 left-1/2 transform -translate-x-1/2 w-11/12 h-2 bg-gray-200 dark:bg-gray-600 rounded-2xl -z-10 opacity-30 group-hover:opacity-50 transition-opacity duration-300"></div>
</article>
</th:block>
<!-- Plugins (will be rendered after products) -->
<th:block th:each="plugin:${plugins}">
<article class="group relative bg-card-light dark:bg-card-dark rounded-2xl shadow-card hover:shadow-card-hover transform hover:-translate-y-1 transition-all duration-300 overflow-hidden cursor-pointer"
th:data-product="${plugin.getName()}"
th:data-product-codes="${plugin.getProductCode()}"
onclick="copyLicense(this)"
title="点击复制激活码">
<!-- Card Content -->
<div class="p-6 flex items-center h-32">
<!-- Icon -->
<div class="w-20 h-20 rounded-xl bg-white dark:bg-gray-800 shadow-sm flex items-center justify-center mr-6 flex-shrink-0 group-hover:scale-110 transition-transform duration-300">
<div class="icon w-16 h-16 bg-cover bg-center bg-no-repeat rounded-lg"
role="img"
th:style="'background-image: url(' + ${plugin.getIcon()} + ')'">
</div>
</div>
<!-- Product Name -->
<h3 class="text-base font-semibold text-text-light dark:text-text-dark leading-tight group-hover:opacity-30 transition-opacity duration-300 flex-grow"
th:title="${plugin.getName()}"
th:text="${plugin.getName()}">
</h3>
</div>
<!-- Hover Overlay -->
<div class="absolute inset-0 bg-card-light dark:bg-card-dark rounded-2xl flex items-center justify-center opacity-0 group-hover:opacity-95 transition-opacity duration-300">
<div class="text-center">
<div class="w-12 h-12 mx-auto mb-3 text-jetbrains-blue dark:text-jetbrains-dark-blue">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-full h-full">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
</svg>
</div>
<div class="text-base font-medium text-jetbrains-blue dark:text-jetbrains-dark-blue">
点击复制激活码
</div>
</div>
</div>
<hr/>
</header>
<div class="pd-6 overflow-hidden bg-card container radius-1">
<h1 class="truncate truncate-1 color-primary mt-0 overflow-ellipsis" th:title="${plugin.getName()}"
th:text="${plugin.getName()}"></h1>
<p title="复制到剪贴板" class="truncate text-sm text-grey" onclick="copyLicense(this)"
data-content="复制到剪贴板">
*********************************************************************************************************************************************************
</p>
</div>
<div class="mask"></div>
<div class="mask mask-c-1"></div>
</article>
</th:block>
<!-- Subtle Shadow -->
<div class="absolute -bottom-1 left-1/2 transform -translate-x-1/2 w-11/12 h-2 bg-gray-200 dark:bg-gray-600 rounded-2xl -z-10 opacity-30 group-hover:opacity-50 transition-opacity duration-300"></div>
</article>
</th:block>
</div>
</th:block>
</main>
<div id="mask"
style="position:fixed;top:0;left:0;z-index:998;width:100%;height:100%;display:none;background-color:#000;opacity:0.5;overflow:hidden;"></div>
<div id="form" style="position:fixed;top:20%;left:40%;width:40%;height:500px;z-index:999;display:none;">
<div class="form">
<div class="title">授权信息</div>
<div class="subtitle">欢迎你自定义</div>
<div class="input-container ic1">
<input id="licenseeName" class="input" type="text" placeholder=" "
th:value="${defaults.getDefaultLicenseName()}"/>
<div class="cut"></div>
<label for="licenseeName" class="placeholder">许可证名称</label>
<!-- Modal Overlay -->
<div id="mask" class="fixed inset-0 bg-black bg-opacity-40 backdrop-blur-sm z-40 hidden opacity-0 transition-all duration-300"></div>
<!-- License Form Modal -->
<div id="form" class="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50 hidden opacity-0 scale-95 transition-all duration-300">
<div class="bg-white dark:bg-gray-800 rounded-xl p-6 w-80 shadow-lg border border-gray-200 dark:border-gray-700">
<!-- Close Button -->
<div class="flex justify-end mb-3">
<button onclick="closeModal()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-200">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<div class="input-container ic2">
<input id="assigneeName" class="input" type="text" placeholder=" "
th:value="${defaults.getDefaultAssigneeName()}"/>
<div class="cut"></div>
<label for="assigneeName" class="placeholder">许可人名称</label>
<!-- Modal Header -->
<div class="text-center mb-6">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-1">授权信息定制</h2>
<p class="text-sm text-gray-500 dark:text-gray-400">自定义您的激活授权信息</p>
</div>
<div class="input-container ic2">
<input id="expiryDate" class="input" type="text" placeholder=""
th:value="${defaults.getDefaultExpiryDate()}"/>
<div class="cut cut-short"></div>
<label for="expiryDate" class="placeholder">过期时间</label>
<!-- Form Fields -->
<div class="space-y-4">
<!-- License Name Field -->
<div class="space-y-1">
<label for="licenseeName" class="block text-xs font-medium text-gray-600 dark:text-gray-400">
许可证名称
</label>
<input id="licenseeName"
type="text"
th:value="${defaults.getDefaultLicenseName()}"
oninput="updatePreview()"
class="w-full px-3 py-2 text-sm bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent transition-all duration-200">
</div>
<!-- Assignee Name Field -->
<div class="space-y-1">
<label for="assigneeName" class="block text-xs font-medium text-gray-600 dark:text-gray-400">
许可人名称
</label>
<input id="assigneeName"
type="text"
th:value="${defaults.getDefaultAssigneeName()}"
oninput="updatePreview()"
class="w-full px-3 py-2 text-sm bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent transition-all duration-200">
</div>
<!-- Expiry Date Field -->
<div class="space-y-1">
<label for="expiryDate" class="block text-xs font-medium text-gray-600 dark:text-gray-400">
过期时间
</label>
<input id="expiryDate"
type="text"
th:value="${defaults.getDefaultExpiryDate()}"
oninput="updatePreview()"
class="w-full px-3 py-2 text-sm bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent transition-all duration-200">
</div>
</div>
<!-- Action Buttons -->
<div class="flex gap-2 mt-6">
<button onclick="closeModal()"
class="flex-1 px-4 py-2 text-sm bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 font-medium rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-500">
取消
</button>
<button onclick="submitLicenseInfo(this)"
class="flex-1 px-4 py-2 text-sm bg-blue-500 dark:bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-600 dark:hover:bg-blue-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400">
确认保存
</button>
</div>
<button class="submit" onclick="submitLicenseInfo(this)">确认</button>
</div>
</div>
</body>