diff --git a/.gitignore b/.gitignore index 2e1fa2d..ef20ee7 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ -*.md \ No newline at end of file +*.md +*.ps1 \ No newline at end of file diff --git a/css/hat.css b/css/hat.css deleted file mode 100644 index 3dce8c7..0000000 --- a/css/hat.css +++ /dev/null @@ -1,126 +0,0 @@ - - @font-face { - font-family: "Exo2-Medium"; - src: url("../fonts/Exo2-Medium.ttf"); - } - @font-face { - font-family: "Exo2-MediumItalic"; - src: url("../fonts/Exo2-MediumItalic.ttf"); - } - @font-face { - font-family: "Exo2-Bold"; - src: url("../fonts/Exo2-Bold.ttf"); - } - @font-face { - font-family: "Exo2-BoldItalic"; - src: url("../fonts/Exo2-BoldItalic.ttf"); - } - * { - margin: 0; - padding: 0; - } - body { - background-image: url("../img/white-needle.png"); - } - #block-body { - width: 1035px; - margin: 5px auto; - height: auto; - } - header { - width: 1035px; - height: 80px; - background-color: black; - } - #block-content { - width: 1035px; - height: auto; - min-height: 500px; - } - .logo { - width: 200px; - float: left; - height: 80px; - } - .logo a { - display: block; - margin-left: 15px; - margin-top: 10px; - font-family: "Exo2-Bold", sans-serif; - font-size: 28px; - color: #b2aeb2; - text-decoration: none; - cursor: pointer; - } - .use { - color: #aa064b; - - } - .web { - color: #429595; - } - .logo p { - margin-left: 20px; - margin-top: 2px; - margin-bottom: 5px; - font-family: "Exo2-Medium", sans-serif; - font-size: 13px; - color: white; - } - .top-menu { - width: 685px; - height: 80px; - float: left; - } - .top-menu ul li { - list-style: none; - float: left; - text-align: center; - } - .top-menu ul li a { - display: block; - width: 171px; - text-decoration: none; - font-family: "Exo2-Medium", sans-serif; - font-size: 17px; - color: white; - height: 55px; - padding-top: 25px; - cursor: pointer; - } - .top-menu ul li a:hover { - transition: all 0.5s ease; - -webkit-transition: all 0.5s ease; - -o-transition: all 0.5s ease; - -ms-transition:all 0.5s ease; - -moz-transition:all 0.5s ease; - background: #00ADE4; - } - .block-top-auth { - width: 100px; - float: left; - margin-left: 40px; - height: 80px; - } - .block-top-auth p { - margin-top: 12px; - text-align: center; - margin-bottom: 8px; - - } - .block-top-auth a { - text-decoration: none; - color: white; - font-family: "Exo2-Medium", sans-serif; - font-size: 15px; - text-decoration: underline; - cursor: pointer; - } - .block-top-auth a:hover { - transition: all 0.5s ease; - -webkit-transition: all 0.5s ease; - -o-transition: all 0.5s ease; - -ms-transition:all 0.5s ease; - -moz-transition:all 0.5s ease; - color: #00ADE4; - } \ No newline at end of file diff --git a/css/langSwitcher.css b/css/langSwitcher.css new file mode 100644 index 0000000..649600b --- /dev/null +++ b/css/langSwitcher.css @@ -0,0 +1,61 @@ +.lang-switcher { + position: fixed; + top: 1rem; + right: 1rem; + z-index: 50; + margin: 0; + transform: none; +} + +.lang-options { + position: absolute; + top: 100%; + right: 0; + margin-top: 0.5rem; + opacity: 0; + transform: translateY(-10px); + pointer-events: none; + transition: all 0.3s ease; + z-index: 51; +} + +.lang-options.active { + opacity: 1; + transform: translateY(0); + pointer-events: auto; +} + +.lang-option { + transform: translateX(20px); + opacity: 0; + transition: all 0.3s ease; +} + +.lang-options.active .lang-option { + transform: translateX(0); + opacity: 1; +} + +.lang-options.active .lang-option:nth-child(1) { transition-delay: 0.1s; } +.lang-options.active .lang-option:nth-child(2) { transition-delay: 0.2s; } + +.current-lang { + position: relative; + overflow: hidden; +} + +.current-lang::after { + content: ''; + position: absolute; + bottom: -2px; + left: 0; + width: 100%; + height: 2px; + background: #6c5ce7; + transform: translateX(-100%); + transition: transform 0.3s ease; +} + +.current-lang:hover::after { + transform: translateX(0); +} diff --git a/discord b/discord deleted file mode 100644 index e72e4bc..0000000 --- a/discord +++ /dev/null @@ -1,4 +0,0 @@ ---- -permalink: /.well-known/discord ---- -dh=e3ab0c259cb7bc6d2f0f2e23d9eab345f475adc2 diff --git a/dist.css b/dist.css index ce52b2a..58cfafe 100644 --- a/dist.css +++ b/dist.css @@ -1,1132 +1 @@ -*, ::before, ::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; - --tw-contain-size: ; - --tw-contain-layout: ; - --tw-contain-paint: ; - --tw-contain-style: ; -} - -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; - --tw-contain-size: ; - --tw-contain-layout: ; - --tw-contain-paint: ; - --tw-contain-style: ; -} - -/* -! tailwindcss v3.4.15 | MIT License | https://tailwindcss.com -*/ - -/* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ - -*, -::before, -::after { - box-sizing: border-box; - /* 1 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: #e5e7eb; - /* 2 */ -} - -::before, -::after { - --tw-content: ''; -} - -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -7. Disable tap highlights on iOS -*/ - -html, -:host { - line-height: 1.5; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - -moz-tab-size: 4; - /* 3 */ - -o-tab-size: 4; - tab-size: 4; - /* 3 */ - font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - /* 4 */ - font-feature-settings: normal; - /* 5 */ - font-variation-settings: normal; - /* 6 */ - -webkit-tap-highlight-color: transparent; - /* 7 */ -} - -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ - -body { - margin: 0; - /* 1 */ - line-height: inherit; - /* 2 */ -} - -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ - -hr { - height: 0; - /* 1 */ - color: inherit; - /* 2 */ - border-top-width: 1px; - /* 3 */ -} - -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/* -Remove the default font size and weight for headings. -*/ - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ - -a { - color: inherit; - text-decoration: inherit; -} - -/* -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; -} - -/* -1. Use the user's configured `mono` font-family by default. -2. Use the user's configured `mono` font-feature-settings by default. -3. Use the user's configured `mono` font-variation-settings by default. -4. Correct the odd `em` font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - /* 1 */ - font-feature-settings: normal; - /* 2 */ - font-variation-settings: normal; - /* 3 */ - font-size: 1em; - /* 4 */ -} - -/* -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; -} - -/* -Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ - -table { - text-indent: 0; - /* 1 */ - border-color: inherit; - /* 2 */ - border-collapse: collapse; - /* 3 */ -} - -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - /* 1 */ - font-feature-settings: inherit; - /* 1 */ - font-variation-settings: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - font-weight: inherit; - /* 1 */ - line-height: inherit; - /* 1 */ - letter-spacing: inherit; - /* 1 */ - color: inherit; - /* 1 */ - margin: 0; - /* 2 */ - padding: 0; - /* 3 */ -} - -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ - -button, -select { - text-transform: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ - -button, -input:where([type='button']), -input:where([type='reset']), -input:where([type='submit']) { - -webkit-appearance: button; - /* 1 */ - background-color: transparent; - /* 2 */ - background-image: none; - /* 2 */ -} - -/* -Use the modern Firefox focus style for all focusable elements. -*/ - -:-moz-focusring { - outline: auto; -} - -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ - -:-moz-ui-invalid { - box-shadow: none; -} - -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; -} - -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -[type='search'] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ -} - -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ - -::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ -} - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; -} - -/* -Removes the default spacing and border for appropriate elements. -*/ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -fieldset { - margin: 0; - padding: 0; -} - -legend { - padding: 0; -} - -ol, -ul, -menu { - list-style: none; - margin: 0; - padding: 0; -} - -/* -Reset default styling for dialogs. -*/ - -dialog { - padding: 0; -} - -/* -Prevent resizing textareas horizontally by default. -*/ - -textarea { - resize: vertical; -} - -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ - -input::-moz-placeholder, textarea::-moz-placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -input::placeholder, -textarea::placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -/* -Set the default cursor for buttons. -*/ - -button, -[role="button"] { - cursor: pointer; -} - -/* -Make sure disabled buttons don't get the pointer cursor. -*/ - -:disabled { - cursor: default; -} - -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; - /* 1 */ - vertical-align: middle; - /* 2 */ -} - -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ - -img, -video { - max-width: 100%; - height: auto; -} - -/* Make elements with the HTML hidden attribute stay hidden by default */ - -[hidden]:where(:not([hidden="until-found"])) { - display: none; -} - -body { - --tw-bg-opacity: 1; - background-color: rgb(30 30 63 / var(--tw-bg-opacity, 1)); - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity, 1)); -} - -.container { - width: 100%; -} - -@media (min-width: 640px) { - .container { - max-width: 640px; - } -} - -@media (min-width: 768px) { - .container { - max-width: 768px; - } -} - -@media (min-width: 1024px) { - .container { - max-width: 1024px; - } -} - -@media (min-width: 1280px) { - .container { - max-width: 1280px; - } -} - -@media (min-width: 1536px) { - .container { - max-width: 1536px; - } -} - -/* Lang button with specific styling */ - -.lang-button { - border-radius: 20px; - --tw-bg-opacity: 1; - background-color: rgb(124 77 255 / var(--tw-bg-opacity, 1)); - padding-left: 1.5rem; - padding-right: 1.5rem; - padding-top: 0.5rem; - padding-bottom: 0.5rem; - font-weight: 500; - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity, 1)); -} - -.lang-button:hover { - --tw-bg-opacity: 0.9; -} - -/* Project cards with dark background */ - -.project-card { - overflow: hidden; - border-radius: 12px; - background-color: rgba(46,46,102,0.5); - padding: 1rem; - text-align: center; - transition-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 300ms; -} - -.project-card:hover { - --tw-scale-x: 1.05; - --tw-scale-y: 1.05; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); - --tw-bg-opacity: 1; - background-color: rgb(124 77 255 / var(--tw-bg-opacity, 1)); -} - -/* Section titles with accent underline */ - -.section-title { - position: relative; - padding-bottom: 0.5rem; - font-size: 1.25rem; - line-height: 1.75rem; - font-weight: 700; -} - -.section-title::after { - content: ''; - position: absolute; - bottom: 0px; - left: 0px; - height: 2px; - width: 100%; - --tw-bg-opacity: 1; - background-color: rgb(124 77 255 / var(--tw-bg-opacity, 1)); -} - -/* Project card content */ - -.project-card img { - margin-bottom: 1rem; - height: 12rem; - width: 100%; - border-radius: 0.5rem; - -o-object-fit: cover; - object-fit: cover; - transition-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 300ms; -} - -.project-card h3 { - margin-bottom: 0.5rem; - font-size: 1.125rem; - line-height: 1.75rem; - font-weight: 600; -} - -.project-card p { - font-size: 0.875rem; - line-height: 1.25rem; - --tw-text-opacity: 1; - color: rgb(209 213 219 / var(--tw-text-opacity, 1)); -} - -/* Dropdown menu */ - -#dropdownContent { - margin-top: 0.5rem; - overflow: hidden; - border-radius: 0.5rem; - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -#dropdownContent a { - display: block; - padding-left: 1rem; - padding-right: 1rem; - padding-top: 0.5rem; - padding-bottom: 0.5rem; - --tw-text-opacity: 1; - color: rgb(0 0 0 / var(--tw-text-opacity, 1)); - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 200ms; -} - -#dropdownContent a:hover { - --tw-bg-opacity: 1; - background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1)); -} - -#dropdownContent a:first-child { - border-top-left-radius: 0.5rem; - border-top-right-radius: 0.5rem; -} - -#dropdownContent a:last-child { - border-bottom-right-radius: 0.5rem; - border-bottom-left-radius: 0.5rem; -} - -#dropdownContent img { - margin-right: 0.5rem; - display: inline-block; -} - -.fixed { - position: fixed; -} - -.absolute { - position: absolute; -} - -.relative { - position: relative; -} - -.right-0 { - right: 0px; -} - -.z-auto { - z-index: auto; -} - -.z-10 { - z-index: 10; -} - -.m-4 { - margin: 1rem; -} - -.mx-auto { - margin-left: auto; - margin-right: auto; -} - -.mb-2 { - margin-bottom: 0.5rem; -} - -.mb-4 { - margin-bottom: 1rem; -} - -.mr-2 { - margin-right: 0.5rem; -} - -.mt-12 { - margin-top: 3rem; -} - -.mt-2 { - margin-top: 0.5rem; -} - -.mt-4 { - margin-top: 1rem; -} - -.mt-6 { - margin-top: 1.5rem; -} - -.mb-8 { - margin-bottom: 2rem; -} - -.ml-6 { - margin-left: 1.5rem; -} - -.ml-2 { - margin-left: 0.5rem; -} - -.block { - display: block; -} - -.inline-block { - display: inline-block; -} - -.flex { - display: flex; -} - -.grid { - display: grid; -} - -.hidden { - display: none; -} - -.h-48 { - height: 12rem; -} - -.h-auto { - height: auto; -} - -.h-64 { - height: 16rem; -} - -.max-h-8 { - max-height: 2rem; -} - -.max-h-48 { - max-height: 12rem; -} - -.max-h-4 { - max-height: 1rem; -} - -.w-full { - width: 100%; -} - -.w-64 { - width: 16rem; -} - -.w-48 { - width: 12rem; -} - -.max-w-7xl { - max-width: 80rem; -} - -.max-w-1 { - max-width: 0.25rem; -} - -.resize { - resize: both; -} - -.grid-cols-1 { - grid-template-columns: repeat(1, minmax(0, 1fr)); -} - -.place-items-center { - place-items: center; -} - -.items-center { - align-items: center; -} - -.justify-center { - justify-content: center; -} - -.justify-between { - justify-content: space-between; -} - -.gap-6 { - gap: 1.5rem; -} - -.space-y-2 > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); -} - -.space-y-8 > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(2rem * var(--tw-space-y-reverse)); -} - -.place-self-center { - place-self: center; -} - -.self-center { - align-self: center; -} - -.rounded-lg { - border-radius: 0.5rem; -} - -.rounded-full { - border-radius: 9999px; -} - -.rounded-b-lg { - border-bottom-right-radius: 0.5rem; - border-bottom-left-radius: 0.5rem; -} - -.rounded-t-lg { - border-top-left-radius: 0.5rem; - border-top-right-radius: 0.5rem; -} - -.border { - border-width: 1px; -} - -.border-gray-300 { - --tw-border-opacity: 1; - border-color: rgb(209 213 219 / var(--tw-border-opacity, 1)); -} - -.bg-purple { - --tw-bg-opacity: 1; - background-color: rgb(72 61 139 / var(--tw-bg-opacity, 1)); -} - -.bg-white { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); -} - -.bg-gray-100 { - --tw-bg-opacity: 1; - background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1)); -} - -.bg-center { - background-position: center; -} - -.stroke-current { - stroke: currentColor; -} - -.stroke-primary { - stroke: #1E1E3F; -} - -.stroke-purple { - stroke: #483D8B; -} - -.stroke-2 { - stroke-width: 2; -} - -.stroke-\[4\] { - stroke-width: 4; -} - -.stroke-\[10\] { - stroke-width: 10; -} - -.object-contain { - -o-object-fit: contain; - object-fit: contain; -} - -.object-cover { - -o-object-fit: cover; - object-fit: cover; -} - -.object-fill { - -o-object-fit: fill; - object-fit: fill; -} - -.object-none { - -o-object-fit: none; - object-fit: none; -} - -.object-scale-down { - -o-object-fit: scale-down; - object-fit: scale-down; -} - -.object-center { - -o-object-position: center; - object-position: center; -} - -.p-4 { - padding: 1rem; -} - -.p-5 { - padding: 1.25rem; -} - -.p-8 { - padding: 2rem; -} - -.px-4 { - padding-left: 1rem; - padding-right: 1rem; -} - -.px-6 { - padding-left: 1.5rem; - padding-right: 1.5rem; -} - -.py-2 { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - -.py-4 { - padding-top: 1rem; - padding-bottom: 1rem; -} - -.text-center { - text-align: center; -} - -.text-2xl { - font-size: 1.5rem; - line-height: 2rem; -} - -.text-3xl { - font-size: 1.875rem; - line-height: 2.25rem; -} - -.text-lg { - font-size: 1.125rem; - line-height: 1.75rem; -} - -.text-sm { - font-size: 0.875rem; - line-height: 1.25rem; -} - -.font-bold { - font-weight: 700; -} - -.font-semibold { - font-weight: 600; -} - -.text-black { - --tw-text-opacity: 1; - color: rgb(0 0 0 / var(--tw-text-opacity, 1)); -} - -.text-gray-300 { - --tw-text-opacity: 1; - color: rgb(209 213 219 / var(--tw-text-opacity, 1)); -} - -.text-white { - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity, 1)); -} - -.text-gray-600 { - --tw-text-opacity: 1; - color: rgb(75 85 99 / var(--tw-text-opacity, 1)); -} - -.shadow-lg { - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.transition-colors { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -.duration-300 { - transition-duration: 300ms; -} - -.hover\:bg-gray-100:hover { - --tw-bg-opacity: 1; - background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1)); -} - -.hover\:text-accent:hover { - --tw-text-opacity: 1; - color: rgb(124 77 255 / var(--tw-text-opacity, 1)); -} - -@media (min-width: 768px) { - .md\:grid-cols-3 { - grid-template-columns: repeat(3, minmax(0, 1fr)); - } -} +*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.15 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-feature-settings:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}body{--tw-bg-opacity:1;background-color:rgb(30 30 63/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}#dropdownContent{border-radius:.5rem;margin-top:.5rem;overflow:hidden;--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}#dropdownContent a{display:block;padding:.5rem 1rem;--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1));transition-duration:.2s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}#dropdownContent a:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}#dropdownContent a:first-child{border-top-left-radius:.5rem;border-top-right-radius:.5rem}#dropdownContent a:last-child{border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem}#dropdownContent img{display:inline-block;margin-right:.5rem}.animate-fade-in{animation:fadeIn 1s ease-out forwards;opacity:0}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.noscript-warning{left:50%;max-width:90%;position:fixed;top:1.25rem;width:auto;z-index:50;--tw-translate-x:-50%;background-color:rgba(108,92,231,.1);border-color:rgba(108,92,231,.3);border-radius:12px;border-width:1px;font-size:.875rem;line-height:1.25rem;padding:1rem 1.5rem;text-align:center;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-text-opacity:1;color:rgb(160 160 160/var(--tw-text-opacity,1));--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);--tw-backdrop-blur:blur(12px);animation:slideDown .5s ease-out;-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.noscript-warning strong{font-weight:600;--tw-text-opacity:1;color:rgb(108 92 231/var(--tw-text-opacity,1))}.noscript-warning p{margin-bottom:.25rem;margin-top:.25rem}.noscript-warning .joke{font-size:.85rem;font-style:italic;margin-top:.5rem;opacity:.8}@keyframes slideDown{0%{opacity:0;transform:translate(-50%,-100%)}to{opacity:1;transform:translate(-50%)}}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.left-0{left:0}.right-0{right:0}.top-0{top:0}.-z-10{z-index:-10}.z-10{z-index:10}.z-50{z-index:50}.m-0{margin:0}.mx-auto{margin-left:auto;margin-right:auto}.\!mt-\[19rem\]{margin-top:19rem!important}.mb-16{margin-bottom:4rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mb-auto{margin-bottom:auto}.ml-2{margin-left:.5rem}.mt-16{margin-top:4rem}.mt-4{margin-top:1rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-1{height:.25rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-4{height:1rem}.h-8{height:2rem}.h-\[200px\]{height:200px}.h-full{height:100%}.min-h-\[320px\]{min-height:320px}.min-h-screen{min-height:100vh}.w-10{width:2.5rem}.w-12{width:3rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-8{width:2rem}.w-\[200px\]{width:200px}.w-full{width:100%}.max-w-5xl{max-width:64rem}.origin-left{transform-origin:left}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.resize{resize:both}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.border{border-width:1px}.border-\[3px\]{border-width:3px}.border-\[\#6c5ce7\]{--tw-border-opacity:1;border-color:rgb(108 92 231/var(--tw-border-opacity,1))}.border-\[\#6c5ce7\]\/20{border-color:rgba(108,92,231,.2)}.bg-\[\#0a0a13\]{--tw-bg-opacity:1;background-color:rgb(10 10 19/var(--tw-bg-opacity,1))}.bg-\[\#0d0d16\]{--tw-bg-opacity:1;background-color:rgb(13 13 22/var(--tw-bg-opacity,1))}.bg-\[\#6c5ce7\]\/10{background-color:rgba(108,92,231,.1)}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-\[\#6c5ce7\]{--tw-gradient-from:#6c5ce7 var(--tw-gradient-from-position);--tw-gradient-to:rgba(108,92,231,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.to-\[\#a29bfe\]{--tw-gradient-to:#a29bfe var(--tw-gradient-to-position)}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.object-cover{-o-object-fit:cover;object-fit:cover}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-1\.5{padding-bottom:.375rem;padding-top:.375rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.text-left{text-align:left}.text-center{text-align:center}.font-sans{font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.leading-relaxed{line-height:1.625}.text-\[\#6c5ce7\]{--tw-text-opacity:1;color:rgb(108 92 231/var(--tw-text-opacity,1))}.text-\[\#a0a0a0\]{--tw-text-opacity:1;color:rgb(160 160 160/var(--tw-text-opacity,1))}.text-transparent{color:transparent}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-\[0_0_20px_rgba\(108\2c 92\2c 231\2c 0\.3\)\]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_20px_rgba\(108\2c 92\2c 231\2c 0\.3\)\]{--tw-shadow:0 0 20px rgba(108,92,231,.3);--tw-shadow-colored:0 0 20px var(--tw-shadow-color)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.blur{--tw-blur:blur(8px)}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}::-webkit-scrollbar{background:#0a0a13;width:10px}::-webkit-scrollbar-track{background:#0d0d16;border-radius:5px}::-webkit-scrollbar-thumb{background:#6c5ce7;border:2px solid #0d0d16;border-radius:5px}::-webkit-scrollbar-thumb:hover{background:#8a7fff}*{scrollbar-color:#6c5ce7 #0d0d16;scrollbar-width:none}.hover\:-translate-y-0\.5:hover{--tw-translate-y:-0.125rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:border-\[\#6c5ce7\]:hover{--tw-border-opacity:1;border-color:rgb(108 92 231/var(--tw-border-opacity,1))}.hover\:bg-\[\#6c5ce7\]\/10:hover{background-color:rgba(108,92,231,.1)}.hover\:bg-\[\#6c5ce7\]\/20:hover{background-color:rgba(108,92,231,.2)}.hover\:bg-\[\#6c5ce7\]\/30:hover{background-color:rgba(108,92,231,.3)}.hover\:text-\[\#a29bfe\]:hover{--tw-text-opacity:1;color:rgb(162 155 254/var(--tw-text-opacity,1))}.group:hover .group-hover\:translate-x-1{--tw-translate-x:0.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@media (min-width:768px){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1024px){.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}} \ No newline at end of file diff --git a/image-fit.html b/image-fit.html deleted file mode 100644 index 35e2042..0000000 --- a/image-fit.html +++ /dev/null @@ -1,39 +0,0 @@ - - - - - - - - - -
-

object-cover - изображение заполняет контейнер, сохраняя пропорции (может обрезаться):

- -
- - -
-

object-contain - всё изображение видно целиком (могут быть пустые области):

- -
- - -
-

object-fill - растягивает изображение (может исказить пропорции):

- -
- - -
-

object-none - оригинальный размер (может выходить за пределы):

- -
- - -
-

object-scale-down - уменьшает если нужно, но не увеличивает:

- -
- - diff --git a/index.html b/index.html index db1095e..7ed6979 100644 --- a/index.html +++ b/index.html @@ -1,149 +1,173 @@ - + - Личная страница Dott + dudosa + + - - - - - + + + + + + - - - -
-

Hello, I'm Dott

-
- - + +
+ - -
-

About Me

- - -

- I am a developer with an interest in technology, manga, and creating cool projects. Always looking for new ways to improve my skills and make the world a little more interesting. -

- - - -
+
+
- - - -
-

Projects

-
- -
- - Music Player -

Python Music Player

-

- In short, the player is based on Mixer
- Music engine for PyGame games (Yes, it's that weird, but otherwise I couldn't implement some of the features 😅 ) -

- -
- -
- - Tic-tac-toe -

Tic-tac-toe in Python

-

The simplest tic-tac-toe you could think of, but with "scripted AI"

- -
- -
- N/a -

N/a

-

There is nothing yet :/

-
+ +
+ +
+ +
-
+ - - - - - + +
+
+ Question emoji +
+

+

+
+
+ +
+ + Learn More + + + + +
+
+ + + diff --git a/input.css b/input.css index 0ef2f9d..ee3e793 100644 --- a/input.css +++ b/input.css @@ -62,4 +62,80 @@ #dropdownContent img { @apply inline-block mr-2; } + + /* Page load animation */ + .animate-fade-in { + animation: fadeIn 1s ease-out forwards; + opacity: 0; + } + + @keyframes fadeIn { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } + } + + /* NoScript Warning */ + .noscript-warning { + @apply fixed top-5 left-1/2 -translate-x-1/2 bg-[rgba(108,92,231,0.1)] + border border-[rgba(108,92,231,0.3)] px-6 py-4 rounded-xl + backdrop-blur-md text-[#a0a0a0] text-sm z-50 text-center + max-w-[90%] w-auto shadow-lg; + animation: slideDown 0.5s ease-out; + } + + .noscript-warning strong { + @apply text-[#6c5ce7] font-semibold; + } + + .noscript-warning p { + @apply my-1; + } + + .noscript-warning .joke { + @apply italic mt-2 text-[0.85rem] opacity-80; + } + + @keyframes slideDown { + from { + transform: translate(-50%, -100%); + opacity: 0; + } + to { + transform: translate(-50%, 0); + opacity: 1; + } + } +} + +/* Custom Scrollbar */ +::-webkit-scrollbar { + width: 10px; + background: #0a0a13; +} + +::-webkit-scrollbar-track { + background: #0d0d16; + border-radius: 5px; +} + +::-webkit-scrollbar-thumb { + background: #6c5ce7; + border-radius: 5px; + border: 2px solid #0d0d16; +} + +::-webkit-scrollbar-thumb:hover { + background: #8A7FFF; +} + +/* Firefox */ +* { + scrollbar-width: none; + scrollbar-color: #6c5ce7 #0d0d16; } diff --git a/js/activity.js b/js/activity.js new file mode 100644 index 0000000..21bd1ae --- /dev/null +++ b/js/activity.js @@ -0,0 +1,105 @@ +const apiUrl = 'https://api.statusbadges.me/presence/578276833624195125'; + +// Store previous values to compare +let prevStatus = ''; +let prevListening = ''; +let prevPlaying = ''; + +function updateStatus() { + // Create AbortController for timeout + const controller = new AbortController(); + const timeoutId = setTimeout(() => controller.abort(), 10000); // 5 second timeout + + fetch(apiUrl, { + signal: controller.signal + }) + .then(response => { + clearTimeout(timeoutId); + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + return response.json(); + }) + .then(data => { + const status = document.getElementById('status'); + const statusCurrent = data.status || 'offline'; + const newStatusText = `Status: ${statusCurrent}`; + if (status && newStatusText !== prevStatus) { + status.style.opacity = '0'; + setTimeout(() => { + status.textContent = newStatusText; + status.style.opacity = '1'; + }, 200); + prevStatus = newStatusText; + } + + const statusListening = document.getElementById('listening'); + const spotify = data.activities.find(activity => activity.name === 'Spotify'); + const newListeningText = spotify ? `Listening: ${spotify.details} - ${spotify.state}` : 'Listening: nothing'; + if (statusListening && newListeningText !== prevListening) { + statusListening.style.opacity = '0'; + setTimeout(() => { + statusListening.textContent = newListeningText; + statusListening.style.opacity = '1'; + }, 200); + prevListening = newListeningText; + } + + const statusPlaying = document.getElementById('playing'); + const game = data.activities.find(activity => activity.type === 0); + const newPlayingText = game ? `Playing: ${game.name}` : 'Playing: nothing'; + if (statusPlaying && newPlayingText !== prevPlaying) { + statusPlaying.style.opacity = '0'; + setTimeout(() => { + statusPlaying.textContent = newPlayingText; + statusPlaying.style.opacity = '1'; + }, 200); + prevPlaying = newPlayingText; + } + }) + .catch(error => { + clearTimeout(timeoutId); + console.error('Error fetching status:', error); + const newStatusText = 'Status: offline'; + const newListeningText = 'Listening: nothing'; + const newPlayingText = 'Playing: nothing'; + + const elements = [ + { id: 'status', text: newStatusText, prev: prevStatus }, + { id: 'listening', text: newListeningText, prev: prevListening }, + { id: 'playing', text: newPlayingText, prev: prevPlaying } + ]; + + elements.forEach(({ id, text, prev }) => { + const element = document.getElementById(id); + if (element && text !== prev) { + element.style.opacity = '0'; + setTimeout(() => { + element.textContent = text; + element.style.opacity = '1'; + }, 200); + } + }); + + prevStatus = newStatusText; + prevListening = newListeningText; + prevPlaying = newPlayingText; + }); +} + +// Add transition style to status elements +document.addEventListener('DOMContentLoaded', () => { + const elements = ['status', 'listening', 'playing']; + elements.forEach(id => { + const element = document.getElementById(id); + if (element) { + element.style.transition = 'opacity 0.2s ease-in-out'; + } + }); +}); + +// Initial update +updateStatus(); + +// Update every 3 seconds +setInterval(updateStatus, 6000); diff --git a/js/email-protection.js b/js/email-protection.js new file mode 100644 index 0000000..a20f552 --- /dev/null +++ b/js/email-protection.js @@ -0,0 +1,7 @@ +document.addEventListener("DOMContentLoaded", function() { + const emailLink = document.querySelector('a[href^="mailto:"]'); + const encryptedEmail = "ZG90dEBzb21lZG90dC5zcGFjZQ=="; // Base64 encoded "dott@somedott.space" + const decryptedEmail = atob(encryptedEmail); + + emailLink.href = `mailto:${decryptedEmail}`; +}); diff --git a/js/langSwitcher.js b/js/langSwitcher.js new file mode 100644 index 0000000..cc12bd8 --- /dev/null +++ b/js/langSwitcher.js @@ -0,0 +1,48 @@ +document.addEventListener('DOMContentLoaded', () => { + const langToggle = document.getElementById('langToggle'); + const langOptions = document.querySelector('.lang-options'); + const langArrow = document.getElementById('langArrow'); + const currentLangText = document.getElementById('currentLang'); + let currentLang = 'en'; + + langToggle.addEventListener('click', () => { + langOptions.classList.toggle('active'); + langArrow.style.transform = langOptions.classList.contains('active') ? 'rotate(180deg)' : ''; + }); + + document.querySelectorAll('.lang-option').forEach(option => { + option.addEventListener('click', (e) => { + const lang = e.target.dataset.lang; + currentLang = lang; + currentLangText.textContent = e.target.textContent.trim(); + langOptions.classList.remove('active'); + langArrow.style.transform = ''; + updateContent(lang); + }); + }); + + // Close language options when clicking outside + document.addEventListener('click', (e) => { + if (!e.target.closest('.lang-switcher')) { + langOptions.classList.remove('active'); + langArrow.style.transform = ''; + } + }); + + function updateContent(lang) { + document.querySelectorAll('[data-translate]').forEach(element => { + const key = element.getAttribute('data-translate'); + const keys = key.split('.'); + let value = translations[lang]; + for (const k of keys) { + value = value[k]; + } + if (value) { + element.textContent = value; + } + }); + } + + // Initialize with English + updateContent('en'); +}); diff --git a/js/particles.js b/js/particles.js new file mode 100644 index 0000000..81af8dd --- /dev/null +++ b/js/particles.js @@ -0,0 +1,77 @@ +document.addEventListener('DOMContentLoaded', () => { + tsParticles.load("tsparticles", { + particles: { + number: { + value: 80, + density: { + enable: true, + value_area: 800 + } + }, + color: { + value: ["#6c5ce7", "#a29bfe"] + }, + shape: { + type: "circle", + }, + opacity: { + value: 0.5, + random: false, + anim: { + enable: true, + speed: 1, + opacity_min: 0.1, + sync: false + } + }, + size: { + value: 3, + random: true, + anim: { + enable: false, + speed: 40, + size_min: 0.1, + sync: false + } + }, + line_linked: { + enable: false + }, + move: { + enable: true, + speed: 3, + direction: "none", + random: true, + straight: false, + out_mode: "out", + bounce: true, + attract: { + enable: false, + rotateX: 600, + rotateY: 1200 + } + } + }, + interactivity: { + detect_on: "window", + events: { + onhover: { + enable: true, + mode: "repulse", + + }, + resize: false + }, + modes: { + repulse: { + distance: 150, + duration: 5, + factor: 100, + easing: "ease-out" + } + } + }, + retina_detect: true, + fps_limit: 90 + }); +}); diff --git a/translations.js b/js/translations.js similarity index 64% rename from translations.js rename to js/translations.js index 19b49a4..3edcffb 100644 --- a/translations.js +++ b/js/translations.js @@ -7,46 +7,61 @@ const translations = { project1: { title: "Музыкальный плеер на Python", description: `Вкраце, плеер базирован на Mixer - Музыкальный движок для игр на PyGame (Да, это настолько странно, но иначе я не cмог бы реализовать часть функций 😉)` + Музыкальный движок для игр на PyGame (Да, это настолько странно, но иначе я не cмог бы реализовать часть функций 😉)`, + tags: ["Python", "PyGame"], + learnMore: "Подробнее" }, - - project2: { title: "Крестики нолики на Python", - description: 'Самые наипростейшие крестики-нолики, которые можно было придумать, но с "Топорным ИИ"' + description: 'Самые наипростейшие крестики-нолики, которые можно было придумать, но с "Топорным ИИ"', + tags: ["Python", "AI"], + learnMore: "Подробнее" }, - - project3: { title: "N/a", - description: "Тут пока-что ничего нет :/" + description: "Тут пока-что ничего нет :/", + tags: ["Coming Soon"], + learnMore: "Подробнее" }, - - contactsTitle: "Контакты", + status: { + offline: "Не в сети", + online: "В сети", + playing: "Играет", + listening: "Слушает", + nothing: "ничего" + } }, - - en: { greeting: "Hello, I'm Dott", aboutTitle: "About Me", aboutText: "I am a developer with an interest in technology, manga, and creating cool projects. Always looking for new ways to improve my skills and make the world a little more interesting.", projectsTitle: "Projects", - project1: { title: "Python Music Player", - description: `In short, the player is based on Mixer \n Music engine for PyGame games (Yes, it's that weird, but otherwise I couldn't implement some of the features 😉 )` + description: `In short, the player is based on Mixer \n Music engine for PyGame games (Yes, it's that weird, but otherwise I couldn't implement some of the features 😉 )`, + tags: ["Python", "PyGame"], + learnMore: "Learn More" }, - project2: { title: 'Tic-tac-toe in Python', - description: 'The simplest tic-tac-toe you could think of, but with “scripted AI”' + description: 'The simplest tic-tac-toe you could think of, but with "scripted AI"', + tags: ["Python", "AI"], + learnMore: "Learn More" }, - project3: { title: "N/a", - description: "There is nothing yet :/" + description: "There is nothing yet :/", + tags: ["Coming Soon"], + learnMore: "Learn More" }, contactsTitle: "Contacts", + status: { + offline: "Offline", + online: "Online", + playing: "Playing", + listening: "Listening", + nothing: "nothing" + } }, -}; \ No newline at end of file +}; diff --git a/tailwind.config.js b/tailwind.config.js index c1f54a9..1cfcb83 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -23,4 +23,4 @@ module.exports = { }, }, plugins: [], -} +} \ No newline at end of file