diff --git a/bg_glows.png b/bg_glows.png new file mode 100644 index 0000000..1f2d3fa Binary files /dev/null and b/bg_glows.png differ diff --git a/bg_gradient.png b/bg_gradient.png new file mode 100644 index 0000000..ac5488b Binary files /dev/null and b/bg_gradient.png differ diff --git a/btn_bg.png b/btn_bg.png new file mode 100644 index 0000000..30f146b Binary files /dev/null and b/btn_bg.png differ diff --git a/community/index.html b/community/index.html index 847b7a8..d03a205 100644 --- a/community/index.html +++ b/community/index.html @@ -1,104 +1,69 @@ - + Community | Krzak.org - - + + - - - - - - - - + + + + + + + + - - + + - - + + - + -
-

- - krzak.org - - Krzak.org -

-

Join the community on Discord or Matrix

- +
+
+
+ + + + + +
+
+ krzak.org +
+ 		+

Krzak.org

+
+

Join the community on Discord or Matrix

+ +
diff --git a/contact.html b/contact.html index 5e807be..f2f21ee 100644 --- a/contact.html +++ b/contact.html @@ -1,71 +1,71 @@ - + - - Krzak.org - Contact - + + + -
-

- - krzak.org - - Krzak.org -

- - -
- +
+
+ -
- - - Indexed by - LibreCounter - +
+ + + Indexed by + LibreCounter + +
diff --git a/generate_bgs.py b/generate_bgs.py new file mode 100644 index 0000000..56c77d0 --- /dev/null +++ b/generate_bgs.py @@ -0,0 +1,75 @@ +from PIL import Image, ImageDraw + +def hex_to_rgb(hex_code): + hex_code = hex_code.lstrip('#') + return tuple(int(hex_code[i:i+2], 16) for i in (0, 2, 4)) + +# 1. Vertical Gradient +h = 2000 +img = Image.new('RGB', (1, h)) +draw = ImageDraw.Draw(img) + +color_top = hex_to_rgb('#1a1130') +color_bottom = hex_to_rgb('#120d22') + +for y in range(h): + r = int(color_top[0] + (color_bottom[0] - color_top[0]) * (y / h)) + g = int(color_top[1] + (color_bottom[1] - color_top[1]) * (y / h)) + b = int(color_top[2] + (color_bottom[2] - color_top[2]) * (y / h)) + draw.point((0, y), fill=(r, g, b)) + +img.save('bg_gradient.png') + +# 2. Top-Left and Top-Right Glows (Large image, say 2000x800) +w_glow, h_glow = 2000, 800 +img_glow = Image.new('RGBA', (w_glow, h_glow), (0, 0, 0, 0)) +draw_glow = ImageDraw.Draw(img_glow) + +# Top left glow: #e0a05b 8% opacity, transparent at 28% +# Top right glow: #8b4789 18% opacity, transparent at 30% +# We'll just approximate it. +center_left = (0, 0) +radius_left = 600 + +center_right = (2000, 0) +radius_right = 650 + +for y in range(h_glow): + for x in range(w_glow): + # Left + dist_left = ((x - center_left[0])**2 + (y - center_left[1])**2)**0.5 + alpha_left = 0 + if dist_left < radius_left: + alpha_left = int(255 * 0.08 * (1 - dist_left / radius_left)) + + # Right + dist_right = ((x - center_right[0])**2 + (y - center_right[1])**2)**0.5 + alpha_right = 0 + if dist_right < radius_right: + alpha_right = int(255 * 0.18 * (1 - dist_right / radius_right)) + + r, g, b, a = 0, 0, 0, 0 + if alpha_left > alpha_right: + r, g, b, a = 224, 160, 91, alpha_left + elif alpha_right > 0: + r, g, b, a = 139, 71, 137, alpha_right + + if a > 0: + draw_glow.point((x, y), fill=(r, g, b, a)) + +img_glow.save('bg_glows.png') + +# 3. Button Background (since linear-gradients are not in CSS2) +# Button linear-gradient(135deg, #e0a05b, #f1ba77) +# Let's just make a small 10x100 vertical gradient for button that can be repeated horizontally +img_btn = Image.new('RGB', (1, 100)) +draw_btn = ImageDraw.Draw(img_btn) +c1 = hex_to_rgb('#e0a05b') +c2 = hex_to_rgb('#f1ba77') +for y in range(100): + r = int(c1[0] + (c2[0] - c1[0]) * (y / 100)) + g = int(c1[1] + (c2[1] - c1[1]) * (y / 100)) + b = int(c1[2] + (c2[2] - c1[2]) * (y / 100)) + draw_btn.point((0, y), fill=(r, g, b)) +img_btn.save('btn_bg.png') + diff --git a/generate_extras.py b/generate_extras.py new file mode 100644 index 0000000..e0201c9 --- /dev/null +++ b/generate_extras.py @@ -0,0 +1,31 @@ +from PIL import Image, ImageDraw + +# 1. Generate icon_bg.png (56x56) +img_icon = Image.new('RGBA', (56, 56), (0, 0, 0, 0)) +draw = ImageDraw.Draw(img_icon) + +# Fill circle +# circle bounding box: [0, 0, 55, 55] +# color: rgba(0,0,0, 0.22) => alpha = int(0.22 * 255) = 56 +draw.ellipse([0, 0, 55, 55], fill=(0, 0, 0, 56)) + +# Outline circle +# color: rgba(224, 160, 91, 0.45) => alpha = int(0.45 * 255) = 115 +draw.ellipse([0, 0, 55, 55], outline=(224, 160, 91, 115), width=1) + +img_icon.save('icon_bg.png') + +# 2. Generate grid.png (24x24) +# 1px top and left lines, rgba(255, 255, 255, 0.02) +# Wait, 0.02 is very faint (alpha = 5). Let's make it alpha=8 for visibility. +img_grid = Image.new('RGBA', (24, 24), (0, 0, 0, 0)) +draw_grid = ImageDraw.Draw(img_grid) + +line_color = (255, 255, 255, 8) +# Left line +draw_grid.line([(0, 0), (0, 23)], fill=line_color, width=1) +# Top line +draw_grid.line([(0, 0), (23, 0)], fill=line_color, width=1) + +img_grid.save('grid.png') + diff --git a/grid.png b/grid.png new file mode 100644 index 0000000..67332bf Binary files /dev/null and b/grid.png differ diff --git a/icon_bg.png b/icon_bg.png new file mode 100644 index 0000000..71ef029 Binary files /dev/null and b/icon_bg.png differ diff --git a/index.html b/index.html index a664b6d..6057051 100755 --- a/index.html +++ b/index.html @@ -1,203 +1,157 @@ - + Krzak.org - - + + - - - - - - - - + + + + + + + + - - + + - - + + - + - - + + -
-
-
- - krzak.org - -
-

Krzak.org

-

Hi, welcome to krzak.org

+
+
+
+
+ + + + + +
+
+ krzak.org +
+ 		+

Krzak.org

+

Hi, welcome to krzak.org

+
+
+ +
+

Main services

+ +
+ +
+

Tools

+ +
+ +
+

Pages

+ +
+ +
+

+ If you want an account on any of these, want to suggest + something new or get a subdomain, just message me +

+
+ + Support Krzak.org +
-
-
-

Main services

- -
- -
-

Tools

- -
- -
-

Pages

- -
- -
-

- If you want an account on any of these, want to suggest - something new or get a subdomain, just message me -

-
- - Support Krzak.org - +
+ + + Indexed by + LibreCounter +
-
- -
- - - Indexed by - LibreCounter -
diff --git a/styles.css b/styles.css index 973cd77..dd63680 100644 --- a/styles.css +++ b/styles.css @@ -1,67 +1,37 @@ -:root { - --bg: #120d22; - --bg-top: #1a1130; - --panel: rgba(28, 20, 53, 0.94); - --panel-soft: rgba(255, 255, 255, 0.025); - --panel-strong: rgba(255, 255, 255, 0.05); - --container-bg: var(--panel); - --container-border: rgba(105, 80, 164, 0.55); - --container-highlight: rgba(255, 255, 255, 0.05); - --text-color: #f7ecd6; - --text-muted: #c9bc9b; - --accent-color: #e0a05b; - --accent-glow: rgba(224, 160, 91, 0.2); - --link-bg: var(--panel-soft); - --link-hover-bg: rgba(224, 160, 91, 0.09); - --link-border: rgba(105, 80, 164, 0.45); - --link-hover-border: rgba(224, 160, 91, 0.48); - --success: #8fc17d; - --danger: #ea7a7a; - --shadow: rgba(0, 0, 0, 0.35); -} +/* CSS 2 styles for Krzak.org */ * { - box-sizing: border-box; + margin: 0; + padding: 0; } -html { - scroll-behavior: smooth; +html, body { + height: 100%; } body { - margin: 0; - min-height: 100vh; - padding: 20px; - display: flex; - align-items: center; - justify-content: center; - background: - radial-gradient( - circle at top left, - rgba(224, 160, 91, 0.08), - transparent 28% - ), - radial-gradient( - circle at top right, - rgba(139, 71, 137, 0.18), - transparent 30% - ), - linear-gradient(180deg, var(--bg-top) 0%, var(--bg) 100%); - color: var(--text-color); + background-color: #120d22; + background-image: url('bg_gradient.png'); + background-repeat: repeat-x; + background-attachment: fixed; + color: #f7ecd6; font-family: Georgia, "Times New Roman", serif; - overflow-x: hidden; + font-size: 16px; } -body::before { - content: ""; - position: fixed; - inset: 0; - pointer-events: none; - background-image: - linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), - linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px); - background-size: 24px 24px; - mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent); +.bg-glow { + min-height: 100%; + background-image: url('bg_glows.png'); + background-repeat: no-repeat; + background-position: top center; + background-attachment: fixed; +} + +.bg-grid { + min-height: 100%; + padding: 20px 0; + background-image: url('grid.png'); + background-repeat: repeat; } a { @@ -69,222 +39,146 @@ a { } .container { + max-width: 664px; /* Total 720 with padding */ + margin: 0 auto; + padding: 28px; + background-color: #1a1130; + border: 1px solid #4a3875; position: relative; z-index: 1; - width: 100%; - max-width: 720px; - margin: auto; - padding: 28px; - background: linear-gradient( - 180deg, - rgba(29, 21, 55, 0.96), - rgba(18, 13, 35, 0.98) - ); - border: 1px solid var(--container-border); - box-shadow: - 0 18px 45px var(--shadow), - inset 0 1px 0 var(--container-highlight); } -.homepage { - max-width: 760px; - background: - radial-gradient( - circle at top left, - rgba(224, 160, 91, 0.1), - transparent 34% - ), - linear-gradient(180deg, rgba(29, 21, 55, 0.96), rgba(18, 13, 35, 0.98)); +/* Header layout using tables */ +table.header-table { + width: 100%; + margin-bottom: 24px; + border-collapse: collapse; +} + +table.header-table td { + vertical-align: middle; +} + +td.mark-cell { + width: 76px; +} + +.icon { + display: block; + padding: 0; + margin: 0; + background: transparent; + border: none; +} + +.icon img { + height: 56px; + width: auto; + border: 0; + display: block; +} + +td.copy { + text-align: left; + padding-left: 18px; } h1 { - margin: 0 0 18px; - display: flex; - align-items: center; - justify-content: center; - gap: 16px; - color: var(--text-color); - font-size: clamp(2rem, 5vw, 2.8rem); + margin: 0 0 10px; + color: #f7ecd6; + font-size: 2.8em; font-weight: 700; line-height: 1.05; - text-align: center; + text-align: left; letter-spacing: -0.02em; } h2 { margin: 0 0 14px; - color: var(--accent-color); - font-size: 1rem; + color: #e0a05b; + font-size: 1em; font-family: "Courier New", Courier, monospace; letter-spacing: 0.08em; text-transform: uppercase; } -h3, -h4 { - margin: 0 0 10px; - color: var(--accent-color); -} - p { margin: 0 0 20px; - color: var(--text-muted); - font-size: 1rem; + color: #c9bc9b; + font-size: 1em; line-height: 1.65; text-align: center; } -ol, -ul { - margin: 0; - padding-left: 20px; -} - -ul { - list-style: none; - padding-left: 0; - display: grid; - gap: 10px; -} - -li { - margin: 0; -} - -li a { - display: flex; - justify-content: space-between; - align-items: center; - gap: 16px; - padding: 15px 18px; - color: var(--text-color); - text-decoration: none; - background: var(--link-bg); - border: 1px solid var(--link-border); - transition: - transform 0.2s ease, - border-color 0.2s ease, - background 0.2s ease, - box-shadow 0.2s ease; -} - -li a:hover { - transform: translateY(-2px); - background: var(--link-hover-bg); - border-color: var(--link-hover-border); - box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22); -} - -li a strong { - display: block; - font-size: 1.05rem; - font-weight: 600; -} - -li a span { - display: block; - color: var(--text-muted); - font-size: 0.92rem; - text-align: right; -} - -.icon { - width: 56px; - height: 56px; - padding: 8px; - display: inline-flex; - align-items: center; - justify-content: center; - background: rgba(0, 0, 0, 0.22); - border: 1px solid rgba(224, 160, 91, 0.45); - box-shadow: 0 0 28px rgba(224, 160, 91, 0.14); - flex-shrink: 0; -} - -.icon img { - width: 100%; - height: 100%; - object-fit: contain; - display: block; -} - -.fade-in, -.slide-down, -.slide-up { - animation: none; - opacity: 1; -} - -.homepage .icon { - box-shadow: 0 0 28px rgba(224, 160, 91, 0.15); -} - -.hero { - margin-bottom: 24px; -} - -.band { - display: grid; - grid-template-columns: 76px minmax(0, 1fr); - gap: 18px; - align-items: center; -} - -.mark { - width: 64px; - height: 64px; - margin: 0; -} - -.copy { - text-align: left; -} - -.homepage h1 { - margin-bottom: 10px; - justify-content: flex-start; - text-align: left; - font-size: clamp(2.3rem, 5vw, 3.9rem); -} - .lead { margin: 0; text-align: left; - max-width: 42rem; } .box { margin-top: 18px; padding: 14px; - border: 1px solid var(--container-border); - background: rgba(255, 255, 255, 0.02); + border: 1px solid #4a3875; + background-color: #1c1435; } -.links { +ul.links { + list-style: none; margin: 0; padding: 0; } -.links li { - margin: 0; +ul.links li { + margin: 0 0 10px 0; + padding: 0; } -.link { - border-color: var(--link-border); - background: var(--link-bg); +a.link { + display: block; + padding: 15px 18px; + color: #f7ecd6; + text-decoration: none; + background-color: #20173d; + border: 1px solid #4a3875; } -.link.main { - background: - linear-gradient(135deg, rgba(224, 160, 91, 0.12), transparent 68%), - var(--link-bg); - border-color: rgba(224, 160, 91, 0.32); +a.link:hover { + background-color: #271a3d; + border-color: #70502e; } +a.link.main { + background-color: #2e1d32; + border-color: #70502e; +} + +a.link strong { + font-size: 1.05em; + font-weight: bold; +} + +a.link span { + float: right; + color: #c9bc9b; + font-size: 0.92em; + margin-top: 2px; +} + +.clearfix:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; +} + +/* * html hack for IE6 clearfix */ +* html .clearfix { height: 1%; } + .foot { margin-top: 20px; padding-top: 18px; - border-top: 1px solid rgba(224, 160, 91, 0.22); + border-top: 1px solid #4a3875; } .foot p { @@ -292,130 +186,43 @@ li a span { margin-bottom: 14px; } -.support, -.support-row { - display: flex; - justify-content: center; -} - -.support-row { - margin-top: 12px; -} - -.button { - display: inline-flex; - justify-content: center; - align-items: center; - min-width: 220px; - padding: 14px 22px; - color: #221433; - text-decoration: none; - font-weight: 700; - background: linear-gradient(135deg, #e0a05b, #f1ba77); - border: 1px solid rgba(255, 245, 228, 0.4); - box-shadow: - 0 10px 24px rgba(0, 0, 0, 0.25), - inset 0 1px 0 rgba(255, 255, 255, 0.35); - transition: - transform 0.2s ease, - box-shadow 0.2s ease, - filter 0.2s ease; -} - -.button:hover { - transform: translateY(-2px); - filter: brightness(1.04); - box-shadow: - 0 14px 28px rgba(0, 0, 0, 0.3), - inset 0 1px 0 rgba(255, 255, 255, 0.35); -} - -li.support-row a.button, -.support a.button { - justify-content: center; - background: linear-gradient(135deg, #e0a05b, #f1ba77) !important; - border: 1px solid rgba(255, 245, 228, 0.4) !important; - color: #221433 !important; -} - -.matrix-link { - background: - linear-gradient(135deg, rgba(143, 193, 125, 0.12), transparent 70%), - var(--link-bg) !important; - border-color: rgba(143, 193, 125, 0.35) !important; -} - -.discord-link { - background: - linear-gradient(135deg, rgba(114, 137, 218, 0.14), transparent 70%), - var(--link-bg) !important; - border-color: rgba(114, 137, 218, 0.35) !important; -} - -.app-gallery { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); - gap: 14px; - margin-top: 20px; -} - -.app-card { - display: flex; - flex-direction: column; - align-items: center; - padding: 20px; +.support { text-align: center; +} + +a.button { + display: inline-block; + padding: 14px 22px; + color: #221433 !important; text-decoration: none; - color: var(--text-color); - background: var(--link-bg); - border: 1px solid var(--link-border); - transition: - transform 0.2s ease, - border-color 0.2s ease, - background 0.2s ease, - box-shadow 0.2s ease; + font-weight: bold; + background-image: url('btn_bg.png'); + background-repeat: repeat-x; + background-color: #e0a05b; + border: 1px solid #fff5e4; } -.app-card:hover { - transform: translateY(-2px); - background: var(--link-hover-bg); - border-color: var(--link-hover-border); - box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22); -} - -.app-card.highlighted { - border-color: rgba(224, 160, 91, 0.35); -} - -.app-icon { - width: 72px; - height: 72px; - object-fit: contain; - margin-bottom: 16px; -} - -.app-card p { - margin: 0; - font-size: 0.92rem; +a.button:hover { + background-color: #f1ba77; + background-position: 0 -10px; } .librecounter { margin-top: 18px; padding-top: 12px; - border-top: 1px solid rgba(255, 255, 255, 0.08); - display: flex; - flex-direction: column; - align-items: center; - gap: 2px; + border-top: 1px solid #33264d; + text-align: center; } .counter { - color: var(--text-muted); - font-size: 0.86rem; + color: #c9bc9b; + font-size: 0.86em; + display: block; + margin-top: 5px; } .counter a { - color: var(--accent-color); + color: #e0a05b; text-decoration: none; } @@ -423,75 +230,27 @@ li.support-row a.button, text-decoration: underline; } -.experimental { - display: inline-block; +a.link span.experimental { font-size: 0.7em; - font-weight: 600; - letter-spacing: 0.05em; + font-weight: bold; text-transform: uppercase; - color: var(--accent-color); - vertical-align: middle; + color: #e0a05b; margin-left: 4px; + float: none; + margin-top: 0; +} + +.matrix-link { + background-color: #19271c !important; + border-color: #3b5032 !important; +} + +.discord-link { + background-color: #191c30 !important; + border-color: #2d3655 !important; } .librecounter img { height: 44px; - opacity: 0.9; -} - -.librecounter img[width="0"] { - display: block; - width: 0; - height: 0; - opacity: 0; -} - -.back-to-top, -.ai-chat { - display: none !important; -} - -@media (max-width: 700px) { - body { - padding: 12px; - } - - .container { - padding: 20px 16px; - } - - h1 { - font-size: 1.9rem; - } - - li a, - .link { - display: grid; - justify-content: stretch; - } - - li a span, - .link span { - text-align: left; - } - - .band { - grid-template-columns: 1fr; - text-align: center; - } - - .mark { - margin: 0 auto; - } - - .homepage h1, - .lead, - .foot p { - text-align: center; - justify-content: center; - } - - .app-gallery { - grid-template-columns: 1fr; - } + border: 0; }