From b6aaa1c39824de61650605aad92f0e5756077dcf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=97=8F=E6=9F=8F?= Date: Wed, 13 Aug 2025 17:00:13 +0800 Subject: [PATCH] =?UTF-8?q?style:=20ui=20=E9=87=8D=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main/resources/static/css/index.css | 551 ++++-------------------- src/main/resources/static/js/index.js | 46 +- src/main/resources/templates/index.html | 336 +++++++++++---- 3 files changed, 390 insertions(+), 543 deletions(-) diff --git a/src/main/resources/static/css/index.css b/src/main/resources/static/css/index.css index 5e12969..544addf 100644 --- a/src/main/resources/static/css/index.css +++ b/src/main/resources/static/css/index.css @@ -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; + } } \ No newline at end of file diff --git a/src/main/resources/static/js/index.js b/src/main/resources/static/js/index.js index a664f2b..6e2e794 100644 --- a/src/main/resources/static/js/index.js +++ b/src/main/resources/static/js/index.js @@ -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" + diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html index 9d6469d..73ba44a 100644 --- a/src/main/resources/templates/index.html +++ b/src/main/resources/templates/index.html @@ -5,99 +5,277 @@ Jetbrains-Help + + - -
-

- 🇨🇳 下载 ja-netfilter.zip , 然后配置 - 你的JetBrains IDE(anything)'s IDE.vmoptions 配置文件!
- 🇨🇳 当然你也可以 重新定制激活授权 用以自定义你的激活信息!
- 🇨🇳 请注意,此页面仅由 - 个人所有! -

-
- -
+ + +
+
+ +
+
+ 🇨🇳 + 下载 + + ja-netfilter.zip (点击下载Jar) + + +
+
+ 🇨🇳 + 配置JetBrains IDE's + + IDE.vmoptions (点击复制VM配置) + + +
+
+ 🇨🇳 + 选择合适的IDE or Plugin, 点击复制激活码即可, 激活预览如下 ↓ +
+ +
+ + 授权给 光云 / 藏柏，有效期至 2111/11/11 + +
+ +
+ 🇨🇳 + 可以 + + 自定义激活信息 (点击修改) + + +
+ + + + + + + + + +
+ + +
+
+
+ + + +
+ +
+
+
-
+ +
- -
-
-
-
- + +
+ + +
+ + +
+ +
+ +
+ + +

+

+
+ + +
+
+
+ + + +
+
+ 点击复制激活码 +
-
-
-
-

-

- ********************************************************************************************************************************************************* -

-
-
-
-
- - -
-
-
-
- + + +
+
+ + + + +
+ + +
+ +
+ +
+ + +

+

+
+ + +
+
+
+ + + +
+
+ 点击复制激活码 +
-
-
-
-

-

- ********************************************************************************************************************************************************* -

-
-
-
- - + + +
+ + + - -