diff --git a/css/styles.css b/css/styles.css index ad06417..47c5bfa 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1,1032 +1,401 @@ -/* ======================================== - Paraguay LLC & SRL — Community Site - Vibrant, fun, modern design - ======================================== */ - +/* Facebook Style — Blue social network */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } - -:root { - --black: #0f172a; - --white: #ffffff; - --blue: #2563eb; - --blue-light: #3b82f6; - --blue-dark: #1d4ed8; - --teal: #0d9488; - --green: #16a34a; - --orange: #ea580c; - --purple: #7c3aed; - --pink: #db2777; - --yellow: #eab308; - --gray-50: #f8fafc; - --gray-100: #f1f5f9; - --gray-200: #e2e8f0; - --gray-300: #cbd5e1; - --gray-400: #94a3b8; - --gray-500: #64748b; - --gray-600: #475569; - --gray-700: #334155; - --gray-800: #1e293b; - --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); - --shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); - --shadow-md: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); - --shadow-lg: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1); - --shadow-xl: 0 25px 50px -12px rgba(0,0,0,0.25); - --radius: 12px; - --radius-lg: 16px; - --radius-xl: 24px; -} - -html { scroll-behavior: smooth; } body { - font-family: 'Inter', system-ui, sans-serif; - background: var(--gray-50); - color: var(--black); - line-height: 1.6; - overflow-x: hidden; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; + background: #f0f2f5; + color: #1c1e21; + line-height: 1.33; + font-size: 15px; } -/* ======================================== - NAVIGATION - ======================================== */ +/* Navigation */ .nav { - position: fixed; + background: #fff; + box-shadow: 0 2px 4px rgba(0,0,0,0.1); + height: 56px; + position: sticky; top: 0; - left: 0; - right: 0; z-index: 1000; - background: rgba(255,255,255,0.85); - backdrop-filter: blur(12px); - -webkit-backdrop-filter: blur(12px); - border-bottom: 1px solid var(--gray-200); - transition: all 0.3s ease; -} -.nav.scrolled { - background: rgba(255,255,255,0.95); - box-shadow: var(--shadow); + padding: 0 16px; } .nav-container { max-width: 1200px; margin: 0 auto; - padding: 0 24px; display: flex; align-items: center; justify-content: space-between; - height: 64px; + height: 100%; } .nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; - color: var(--black); -} -.nav-logo { font-size: 1.5rem; } -.nav-title { - font-weight: 800; - font-size: 1.1rem; - background: linear-gradient(135deg, var(--blue), var(--teal)); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; -} -.nav-menu { - display: flex; - align-items: center; - gap: 8px; + color: #1877f2; + font-size: 24px; + font-weight: 700; } +.nav-logo { font-size: 28px; } +.nav-menu { display: flex; gap: 8px; align-items: center; } .nav-link { + color: #65676b; text-decoration: none; - color: var(--gray-600); + font-size: 15px; font-weight: 500; - font-size: 0.9rem; - padding: 8px 14px; - border-radius: 8px; - transition: all 0.2s ease; -} -.nav-link:hover { - color: var(--blue); - background: rgba(37,99,235,0.08); -} -.nav-actions { - display: flex; - align-items: center; - gap: 8px; - margin-left: 16px; - padding-left: 16px; - border-left: 1px solid var(--gray-200); -} -.nav-toggle { - display: none; - flex-direction: column; - gap: 5px; - background: none; - border: none; - cursor: pointer; - padding: 4px; -} -.nav-toggle span { - display: block; - width: 22px; - height: 2px; - background: var(--gray-700); - border-radius: 2px; - transition: all 0.3s ease; -} -.lang-select { - display: flex; - gap: 4px; - background: var(--gray-100); - padding: 3px; + padding: 8px 16px; border-radius: 8px; + transition: background 0.2s; } +.nav-link:hover { background: #f0f2f5; } +.nav-actions { display: flex; gap: 8px; align-items: center; } +.lang-select { display: flex; gap: 4px; } .lang-btn { + background: #f0f2f5; + border: none; padding: 6px 12px; - font-size: 0.8rem; - font-weight: 600; - border: none; + font-size: 13px; + cursor: pointer; border-radius: 6px; - background: transparent; - cursor: pointer; - color: var(--gray-500); - transition: all 0.2s; -} -.lang-btn.active { - background: var(--white); - color: var(--blue); - box-shadow: var(--shadow-sm); + font-weight: 500; } +.lang-btn.active { background: #e7f3ff; color: #1877f2; } +.lang-btn:hover { background: #e4e6eb; } -/* ======================================== - BUTTONS - ======================================== */ +/* Buttons */ .btn { - display: inline-flex; - align-items: center; - gap: 6px; - padding: 10px 20px; - border: none; - border-radius: 8px; - font-size: 0.9rem; + padding: 8px 16px; + font-size: 15px; font-weight: 600; + border-radius: 6px; cursor: pointer; - transition: all 0.2s ease; text-decoration: none; - font-family: inherit; -} -.btn-primary { - background: linear-gradient(135deg, var(--blue), var(--blue-dark)); - color: var(--white); - box-shadow: 0 2px 8px rgba(37,99,235,0.3); -} -.btn-primary:hover { - transform: translateY(-1px); - box-shadow: 0 4px 12px rgba(37,99,235,0.4); + display: inline-block; + border: none; + transition: background 0.2s; } +.btn-primary { background: #1877f2; color: #fff; } +.btn-primary:hover { background: #166fe5; } .btn-outline { - background: transparent; - color: var(--gray-700); - border: 1.5px solid var(--gray-300); + background: #f0f2f5; + color: #1c1e21; + border: none; } -.btn-outline:hover { - border-color: var(--blue); - color: var(--blue); -} -.btn-telegram { - background: linear-gradient(135deg, #0088cc, #0077b5); - color: var(--white); - box-shadow: 0 2px 8px rgba(0,136,204,0.3); - display: inline-flex; - align-items: center; - gap: 8px; - padding: 10px 20px; - border-radius: 8px; - text-decoration: none; - font-weight: 600; - font-size: 0.9rem; -} -.btn-telegram:hover { - transform: translateY(-1px); - box-shadow: 0 4px 12px rgba(0,136,204,0.4); -} -.btn-block { width: 100%; justify-content: center; } +.btn-outline:hover { background: #e4e6eb; } +.btn-block { display: block; width: 100%; text-align: center; } +.btn-telegram { background: #0088cc; color: #fff; } -/* ======================================== - HERO SECTION - ======================================== */ +/* Hero */ .hero { - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; + background: linear-gradient(135deg, #1877f2 0%, #42b0ff 100%); + color: #fff; text-align: center; - background: linear-gradient(160deg, #0f172a 0%, #1e3a5f 40%, #0d9488 100%); - position: relative; - overflow: hidden; - padding: 80px 24px 40px; -} -.hero-particles { - position: absolute; - inset: 0; - overflow: hidden; - pointer-events: none; -} -.particle { - position: absolute; - border-radius: 50%; - background: rgba(255,255,255,0.08); - animation: float-particle linear infinite; -} -@keyframes float-particle { - 0% { transform: translateY(100vh) scale(0); opacity: 0; } - 10% { opacity: 1; } - 90% { opacity: 1; } - 100% { transform: translateY(-100px) scale(1); opacity: 0; } -} -.hero-content { - position: relative; - z-index: 1; - max-width: 700px; + padding: 60px 20px 40px; } .hero-title { - font-size: clamp(2rem, 5vw, 3.5rem); - font-weight: 900; - color: var(--white); - line-height: 1.1; - margin-bottom: 16px; - text-shadow: 0 4px 20px rgba(0,0,0,0.3); + font-size: 42px; + font-weight: 700; + margin-bottom: 12px; + text-shadow: 0 2px 4px rgba(0,0,0,0.1); } .hero-subtitle { - font-size: clamp(1rem, 2.5vw, 1.3rem); - color: rgba(255,255,255,0.8); - margin-bottom: 40px; - font-weight: 400; -} -.hero-stats { - display: flex; - justify-content: center; - gap: 48px; - margin-top: 24px; -} -.stat { - text-align: center; - color: var(--white); + font-size: 18px; + opacity: 0.9; + margin-bottom: 30px; + max-width: 600px; + margin-left: auto; + margin-right: auto; } +.hero-stats { display: flex; justify-content: center; gap: 60px; } +.stat { text-align: center; } .stat-number { display: block; - font-size: 2.5rem; - font-weight: 800; - line-height: 1; - background: linear-gradient(135deg, #ffffff, #94a3b8); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; -} -.stat:not(:last-child) { - border-right: 1px solid rgba(255,255,255,0.2); -} -.stat span:last-child { - font-size: 0.85rem; - color: rgba(255,255,255,0.6); - display: block; - margin-top: 4px; -} -.hero-scroll-indicator { - position: absolute; - bottom: 32px; - left: 50%; - transform: translateX(-50%); - z-index: 1; -} -.scroll-arrow { - width: 24px; - height: 40px; - border: 2px solid rgba(255,255,255,0.4); - border-radius: 12px; - position: relative; - animation: scroll-bounce 2s ease-in-out infinite; -} -.scroll-arrow::before { - content: ''; - position: absolute; - top: 6px; - left: 50%; - transform: translateX(-50%); - width: 4px; - height: 8px; - background: rgba(255,255,255,0.6); - border-radius: 2px; - animation: scroll-dot 2s ease-in-out infinite; -} -@keyframes scroll-bounce { - 0%, 100% { transform: translateY(0); } - 50% { transform: translateY(8px); } -} -@keyframes scroll-dot { - 0%, 100% { opacity: 1; top: 6px; } - 50% { opacity: 0.3; top: 16px; } + font-size: 36px; + font-weight: 700; } -/* ======================================== - TELEGRAM BANNER - ======================================== */ -.telegram-banner { - background: linear-gradient(135deg, #0088cc, #00a8e8); - padding: 20px 24px; -} -.banner-content { - max-width: 1200px; - margin: 0 auto; - display: flex; - align-items: center; - justify-content: center; - gap: 20px; - flex-wrap: wrap; - color: var(--white); -} -.banner-icon { font-size: 1.5rem; } -.banner-text { font-size: 0.95rem; } - -/* ======================================== - MAIN CONTENT - ======================================== */ -.main-content { - min-height: 50vh; -} - -/* ======================================== - SECTIONS - ======================================== */ +/* Sections */ .section { - padding: 80px 24px; -} -.section-alt { - background: var(--gray-100); -} -.container { + background: #fff; + border-radius: 8px; + padding: 24px; + margin: 16px auto; max-width: 1200px; - margin: 0 auto; + box-shadow: 0 1px 2px rgba(0,0,0,0.1); } +.section-alt { background: #fff; border-radius: 8px; padding: 24px; margin: 16px auto; max-width: 1200px; box-shadow: 0 1px 2px rgba(0,0,0,0.1); } .section-title { - font-size: 2rem; - font-weight: 800; - text-align: center; - margin-bottom: 48px; - background: linear-gradient(135deg, var(--black), var(--gray-600)); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; + font-size: 20px; + font-weight: 700; + margin-bottom: 20px; + color: #1c1e21; } +.container { max-width: 100%; } -/* ======================================== - ABOUT CARDS - ======================================== */ +/* About */ .about-grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); - gap: 24px; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 16px; } .about-card { - background: var(--white); - padding: 32px; - border-radius: var(--radius-lg); - box-shadow: var(--shadow); - transition: all 0.3s ease; - border: 1px solid var(--gray-200); - cursor: default; -} -.about-card:hover { - transform: translateY(-4px); - box-shadow: var(--shadow-lg); - border-color: var(--blue-light); -} -.about-icon { - font-size: 2.5rem; - margin-bottom: 16px; - display: block; -} -.about-card h3 { - font-size: 1.15rem; - font-weight: 700; - margin-bottom: 10px; - color: var(--black); -} -.about-card p { - font-size: 0.9rem; - color: var(--gray-500); - line-height: 1.6; + padding: 20px; + border-radius: 8px; + background: #f0f2f5; + transition: transform 0.2s, box-shadow 0.2s; } +.about-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); } +.about-icon { font-size: 2.5rem; margin-bottom: 12px; } +.about-card h3 { font-size: 16px; font-weight: 600; color: #1c1e21; margin-bottom: 8px; } +.about-card p { font-size: 14px; color: #65676b; line-height: 1.4; } -/* ======================================== - SEARCH BAR - ======================================== */ +/* Search */ .search-bar { - position: relative; - margin-bottom: 32px; + display: flex; max-width: 400px; + margin-bottom: 20px; + position: relative; } .search-icon { position: absolute; - left: 14px; + left: 12px; top: 50%; transform: translateY(-50%); - width: 20px; - height: 20px; - color: var(--gray-400); - pointer-events: none; + width: 16px; + height: 16px; + color: #65676b; } .search-input { width: 100%; - padding: 12px 16px 12px 44px; - border: 2px solid var(--gray-200); - border-radius: var(--radius); - font-size: 0.95rem; - font-family: inherit; - outline: none; - transition: all 0.2s ease; - background: var(--white); -} -.search-input:focus { - border-color: var(--blue); - box-shadow: 0 0 0 4px rgba(37,99,235,0.1); -} -.search-input::placeholder { - color: var(--gray-400); + padding: 10px 12px 10px 36px; + border: none; + border-radius: 20px; + background: #f0f2f5; + font-size: 15px; } +.search-input:focus { outline: 2px solid #1877f2; outline-offset: 0; } -/* ======================================== - MEMBERS GRID - ======================================== */ +/* Members Grid */ .members-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); - gap: 20px; + gap: 12px; } .member-card { - background: var(--white); - border-radius: var(--radius-lg); - padding: 24px; display: flex; - align-items: flex-start; - gap: 16px; - box-shadow: var(--shadow-sm); - border: 1px solid var(--gray-200); + align-items: center; + gap: 12px; + padding: 12px; + border-radius: 8px; + background: #f0f2f5; cursor: pointer; - transition: all 0.3s ease; + transition: background 0.2s; } -.member-card:hover { - transform: translateY(-2px); - box-shadow: var(--shadow-md); - border-color: var(--blue-light); -} -.member-card .user-avatar { - width: 52px; - height: 52px; +.member-card:hover { background: #e4e6eb; } +.user-avatar { + width: 48px; + height: 48px; border-radius: 50%; - background: linear-gradient(135deg, var(--blue), var(--teal)); - color: var(--white); + object-fit: cover; +} +.user-avatar-text { + width: 48px; + height: 48px; + border-radius: 50%; + background: #1877f2; + color: #fff; display: flex; align-items: center; justify-content: center; - font-weight: 700; - font-size: 1.3rem; - flex-shrink: 0; - overflow: hidden; -} -.member-card .user-avatar img { - width: 100%; - height: 100%; - object-fit: cover; -} -.member-info h4 { - font-size: 1rem; + font-size: 20px; font-weight: 600; - margin-bottom: 4px; - color: var(--black); -} -.member-info .member-company { - font-size: 0.85rem; - color: var(--gray-500); - margin-bottom: 4px; -} -.member-info .member-location { - font-size: 0.8rem; - color: var(--gray-400); - margin-bottom: 6px; -} -.member-info .member-posts { - font-size: 0.75rem; - color: var(--gray-400); } +.member-info h4 { font-size: 15px; font-weight: 600; color: #1c1e21; margin-bottom: 2px; } +.member-company { font-size: 13px; color: #65676b; } +.member-location, .member-posts { font-size: 13px; color: #65676b; } .rank-badge { - font-size: 0.65rem; - font-weight: 700; + font-size: 11px; padding: 3px 8px; - border-radius: 6px; + border-radius: 12px; position: absolute; - top: 12px; - right: 12px; - white-space: nowrap; + top: -4px; + right: 0; + font-weight: 500; } -.rank-rookie { background: var(--gray-100); color: var(--gray-600); } -.rank-beginner { background: #d1fae5; color: #065f46; } -.rank-member { background: #dbeafe; color: #1e40af; } -.rank-contributor { background: #fef3c7; color: #92400e; } -.rank-veteran { background: #ede9fe; color: #5b21b6; } -.rank-expert { background: #fce7f3; color: #9d174d; } -.rank-legend { background: #fef08a; color: #854d0e; } +.rank-badge.rank-rookie { background: #e4e6eb; color: #65676b; } +.rank-badge.rank-beginner { background: #e7f3e9; color: #0a832c; } +.rank-badge.rank-member { background: #e7f0ff; color: #1877f2; } +.rank-badge.rank-contributor { background: #e0f7fa; color: #00838f; } +.rank-badge.rank-veteran { background: #f3e5f5; color: #8e24aa; } +.rank-badge.rank-expert { background: #fff3e0; color: #e65100; } +.rank-badge.rank-legend { background: #fce4ec; color: #c62828; } -/* ======================================== - WIKI GRID - ======================================== */ +/* Wiki Cards */ .wiki-grid { display: grid; - grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); - gap: 20px; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 12px; } .wiki-card { - background: var(--white); - border-radius: var(--radius-lg); - padding: 24px; - box-shadow: var(--shadow-sm); - border: 1px solid var(--gray-200); + padding: 16px; + border-radius: 8px; + background: #f0f2f5; cursor: pointer; - transition: all 0.3s ease; - display: flex; - flex-direction: column; - height: 100%; - min-height: 160px; - position: relative; - overflow: hidden; + transition: all 0.2s; + border-left: 4px solid #1877f2; } -.wiki-card::before { - content: ''; - position: absolute; +.wiki-card:hover { background: #e4e6eb; } +.wiki-card-title { font-size: 15px; font-weight: 600; color: #1c1e21; margin-bottom: 6px; } +.wiki-card-excerpt { font-size: 13px; color: #65676b; margin-bottom: 8px; } +.wiki-card-footer { display: flex; justify-content: space-between; font-size: 13px; color: #65676b; } +.wiki-card-subtopic { color: #1877f2; } +.no-results { padding: 20px; text-align: center; color: #65676b; } +.loading-text { padding: 20px; text-align: center; color: #65676b; font-style: italic; } + +/* Modal */ +.modal-overlay { + position: fixed; top: 0; left: 0; right: 0; - height: 4px; -} -.wiki-card[data-color="blue"]::before { background: linear-gradient(90deg, var(--blue), var(--blue-light)); } -.wiki-card[data-color="teal"]::before { background: linear-gradient(90deg, var(--teal), #14b8a6); } -.wiki-card[data-color="green"]::before { background: linear-gradient(90deg, var(--green), #22c55e); } -.wiki-card[data-color="orange"]::before { background: linear-gradient(90deg, var(--orange), #fb923c); } -.wiki-card[data-color="purple"]::before { background: linear-gradient(90deg, var(--purple), #a78bfa); } -.wiki-card[data-color="pink"]::before { background: linear-gradient(90deg, var(--pink), #f472b6); } -.wiki-card[data-color="yellow"]::before { background: linear-gradient(90deg, var(--yellow), #fbbf24); } -.wiki-card:hover { - transform: translateY(-4px); - box-shadow: var(--shadow-lg); - border-color: var(--blue-light); -} -.wiki-card-title { - font-size: 1.05rem; - font-weight: 700; - color: var(--black); - margin-bottom: 8px; -} -.wiki-card-excerpt { - font-size: 0.85rem; - color: var(--gray-500); - line-height: 1.6; - flex-grow: 1; - display: -webkit-box; - -webkit-line-clamp: 4; - -webkit-box-orient: vertical; - overflow: hidden; -} -.wiki-card-footer { - margin-top: 16px; - padding-top: 12px; - border-top: 1px solid var(--gray-200); - font-size: 0.8rem; - color: var(--gray-400); - display: flex; - justify-content: space-between; -} -.wiki-card-subtopic { - font-size: 0.75rem; - color: var(--blue); - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.05em; -} - -/* ======================================== - MODAL - ======================================== */ -.modal-overlay { - position: fixed; - inset: 0; - background: rgba(0,0,0,0.5); - backdrop-filter: blur(4px); - -webkit-backdrop-filter: blur(4px); + bottom: 0; + background: rgba(255,255,255,0.8); z-index: 2000; - display: flex; + display: none; align-items: center; justify-content: center; - padding: 24px; - opacity: 0; - pointer-events: none; - transition: opacity 0.3s ease; -} -.modal-overlay.active { - opacity: 1; - pointer-events: auto; } +.modal-overlay.active { display: flex; } .modal { - background: var(--white); - border-radius: var(--radius-xl); - padding: 40px; - width: 100%; - max-width: 560px; + background: #fff; + border-radius: 8px; + padding: 24px; + max-width: 440px; + width: 90%; + box-shadow: 0 8px 30px rgba(0,0,0,0.2); position: relative; - box-shadow: var(--shadow-xl); - max-height: 90vh; - overflow-y: auto; - transform: translateY(20px) scale(0.97); - transition: transform 0.3s ease; -} -.modal-overlay.active .modal { - transform: translateY(0) scale(1); } .modal-close { position: absolute; - top: 16px; + top: 12px; right: 16px; - width: 36px; - height: 36px; - border-radius: 50%; + background: none; border: none; - background: var(--gray-100); + font-size: 24px; cursor: pointer; - font-size: 1.2rem; - display: flex; - align-items: center; - justify-content: center; - color: var(--gray-500); - transition: all 0.2s; -} -.modal-close:hover { - background: var(--gray-200); - color: var(--black); -} - -/* ======================================== - LOGIN MODAL - ======================================== */ -.login-steps { - text-align: center; -} -.login-icon { - font-size: 3rem; - margin-bottom: 16px; -} -.login-step { - display: none; -} -.login-step.active { - display: block; -} -.login-hint { - font-size: 0.9rem; - color: var(--gray-500); - margin-bottom: 24px; -} - -/* ======================================== - PROFILE MODAL - ======================================== */ -.profile-username { - font-size: 1.2rem; - font-weight: 700; - margin-bottom: 8px; -} -.profile-rank { - margin-bottom: 24px; -} -.profile-edit-fields { - text-align: left; -} -.checkbox-group { - display: flex; - align-items: center; - gap: 10px; - margin-bottom: 20px; -} -.checkbox-group .checkbox { - width: 18px; - height: 18px; - cursor: pointer; -} -.checkbox-group label { - font-size: 0.9rem; - font-weight: 600; - color: var(--gray-700); -} - -/* ======================================== - USER DETAIL MODAL - ======================================== */ -.user-detail-modal { - max-width: 560px; -} -.user-detail-content { - text-align: center; -} -.user-detail-avatar { - width: 80px; - height: 80px; - border-radius: 50%; - margin: 0 auto 16px; - background: linear-gradient(135deg, var(--blue), var(--teal)); - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; -} -.user-detail-avatar img { - width: 100%; - height: 100%; - object-fit: cover; -} -.user-detail-header { - margin-bottom: 24px; -} -.user-detail-name-rank { - display: flex; - align-items: center; - justify-content: center; - gap: 10px; -} -.user-detail-name-rank h2 { - font-size: 1.3rem; - font-weight: 700; - margin: 0; -} -.user-detail-company { - font-size: 0.9rem; - color: var(--gray-500); -} -.user-detail-fields { - text-align: left; - border-top: 1px solid var(--gray-200); - padding-top: 20px; -} -.detail-field { - display: flex; - justify-content: space-between; - align-items: flex-start; - padding: 10px 0; - border-bottom: 1px solid var(--gray-100); -} -.detail-field:last-child { - border-bottom: none; -} -.detail-label { - font-size: 0.85rem; - font-weight: 600; - color: var(--gray-500); -} -.detail-value { - font-size: 0.85rem; - color: var(--gray-800); - max-width: 60%; - text-align: right; - word-break: break-word; -} -.user-desc-value { - text-align: left; - max-width: 100%; - line-height: 1.6; -} - -/* ======================================== - FORM ELEMENTS - ======================================== */ -.form-group { - margin-bottom: 16px; - text-align: left; -} -.form-group label { - display: block; - font-size: 0.85rem; - font-weight: 600; - color: var(--gray-700); - margin-bottom: 6px; + color: #65676b; } +.login-icon { font-size: 3rem; text-align: center; margin-bottom: 16px; } +.login-hint { color: #65676b; text-align: center; margin-bottom: 20px; font-size: 15px; } +.form-group { margin-bottom: 14px; } .form-input { width: 100%; - padding: 12px 16px; - border: 2px solid var(--gray-200); - border-radius: var(--radius); - font-size: 0.95rem; - font-family: inherit; - outline: none; - transition: all 0.2s ease; - background: var(--white); -} -.form-input:focus { - border-color: var(--blue); - box-shadow: 0 0 0 4px rgba(37,99,235,0.1); + padding: 12px 14px; + border: 1px solid #dddfe2; + border-radius: 6px; + font-size: 15px; } +.form-input:focus { border-color: #1877f2; outline: 2px solid #1877f2; outline-offset: -2px; } +.login-step { display: none; } +.login-step.active { display: block; } -/* ======================================== - NEWSLETTER SECTION - ======================================== */ -.newsletter-card { - background: var(--white); - padding: 48px; - border-radius: var(--radius-xl); - text-align: center; - box-shadow: var(--shadow); - max-width: 500px; - margin: 0 auto; +/* Profile & Detail */ +.profile-username { font-size: 1.2rem; font-weight: 600; margin-bottom: 8px; } +.profile-rank { margin-bottom: 16px; } +.user-detail-modal { max-width: 520px; } +.user-detail-content { padding: 16px; } +.user-detail-avatar { + width: 64px; + height: 64px; + border-radius: 50%; + margin: 0 auto 16px; + overflow: hidden; } -.newsletter-icon { - font-size: 3rem; - margin-bottom: 16px; -} -.newsletter-card h2 { - font-size: 1.5rem; - font-weight: 700; - margin-bottom: 8px; -} -.newsletter-hint { - font-size: 0.9rem; - color: var(--gray-500); - margin-bottom: 24px; -} -.success-message { - padding: 16px; - background: #d1fae5; - border-radius: var(--radius); - color: #065f46; - font-weight: 600; - margin-top: 16px; -} -.hidden { display: none !important; } +.user-detail-header { text-align: center; margin-bottom: 16px; } +.user-detail-name-rank { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 8px; } +.user-detail-name-rank h2 { font-size: 1.2rem; font-weight: 600; } +.user-detail-fields { display: grid; gap: 10px; } +.detail-field { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #e4e6eb; } +.detail-label { color: #65676b; font-size: 14px; } +.detail-value { color: #1c1e21; font-size: 14px; text-align: right; } +.user-detail-company { color: #65676b; text-align: center; } -/* ======================================== - WIKI MODAL - ======================================== */ -.wiki-modal { - max-width: 720px; -} -.wiki-modal-content { - text-align: left; -} -.wiki-modal-title { - font-size: 1.4rem; - font-weight: 800; - margin-bottom: 8px; - line-height: 1.3; -} -.wiki-modal-subtitle { - font-size: 0.85rem; - color: var(--blue); - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.05em; - margin-bottom: 20px; - padding-bottom: 16px; - border-bottom: 1px solid var(--gray-200); -} -.wiki-modal-text { - font-size: 0.95rem; - color: var(--gray-700); - line-height: 1.8; - white-space: pre-wrap; -} - -/* ======================================== - FOOTER - ======================================== */ -.footer { - background: var(--black); - color: rgba(255,255,255,0.6); - padding: 48px 24px 32px; -} -.footer-brand { +/* Telegram Banner */ +.telegram-banner { + background: #e7f3ff; + padding: 16px 24px; + margin: 16px auto; + max-width: 1200px; + border-radius: 8px; display: flex; align-items: center; - justify-content: center; - gap: 10px; - margin-bottom: 24px; + gap: 16px; } +.banner-icon { font-size: 2rem; } +.banner-text strong { color: #1c1e21; } + +/* Newsletter */ +.newsletter-card { text-align: center; max-width: 400px; margin: 0 auto; } +.newsletter-icon { font-size: 2.5rem; margin-bottom: 16px; } +.newsletter-hint { color: #65676b; margin-bottom: 16px; font-size: 15px; } + +/* Footer */ +.footer { + background: #fff; + padding: 24px 16px; + text-align: center; + border-top: 1px solid #e4e6eb; + margin-top: 32px; +} +.footer-brand { margin-bottom: 12px; } .footer-logo { font-size: 1.5rem; } -.footer-title { - font-weight: 700; - color: var(--white); - font-size: 1.1rem; -} -.footer-links { - display: flex; - justify-content: center; - gap: 24px; - margin-bottom: 32px; - flex-wrap: wrap; -} -.footer-links a { - color: rgba(255,255,255,0.5); - text-decoration: none; - font-size: 0.9rem; - font-weight: 500; - transition: color 0.2s; -} -.footer-links a:hover { - color: var(--white); -} -.footer-bottom { - text-align: center; - border-top: 1px solid rgba(255,255,255,0.1); - padding-top: 24px; -} -.footer-bottom a { - color: var(--white); - text-decoration: none; - font-weight: 600; -} -.footer-copy { - margin-top: 8px; - font-size: 0.8rem; -} +.footer-title { color: #1c1e21; margin-left: 10px; font-size: 14px; font-weight: 600; } +.footer-links { display: flex; justify-content: center; gap: 20px; margin-bottom: 12px; flex-wrap: wrap; } +.footer-links a { color: #65676b; text-decoration: none; font-size: 13px; } +.footer-links a:hover { text-decoration: underline; } +.footer-bottom p { color: #65676b; margin: 4px 0; font-size: 12px; } +.footer-bottom a { color: #1877f2; } +.footer-copy { font-size: 12px; } -/* ======================================== - LOADING / EMPTY STATES - ======================================== */ -.loading-text { - text-align: center; - color: var(--gray-400); - font-size: 0.9rem; - padding: 40px; - grid-column: 1 / -1; -} -.no-results { - text-align: center; - color: var(--gray-400); - font-size: 0.9rem; - padding: 40px; - grid-column: 1 / -1; -} +/* Hide/Show */ +.hide-en { display: none; } +body[data-lang="en"] .hide-en { display: inline; } +body[data-lang="en"] .hide-de { display: none; } +.hidden { display: none !important; } -/* ======================================== - RESPONSIVE - ======================================== */ +/* Responsive */ @media (max-width: 768px) { - .nav-toggle { display: flex; } - .nav-menu { - position: fixed; - top: 64px; + .nav-menu { display: none; } + .nav-menu.open { + display: flex; + position: absolute; + top: 100%; left: 0; right: 0; - background: var(--white); + background: #fff; flex-direction: column; - padding: 16px; - border-bottom: 1px solid var(--gray-200); - box-shadow: var(--shadow-md); - transform: translateY(-110%); - transition: transform 0.3s ease; - gap: 4px; + padding: 12px; + gap: 8px; + border-top: 1px solid #e4e6eb; + box-shadow: 0 4px 12px rgba(0,0,0,0.1); } - .nav-menu.open { transform: translateY(0); } - .nav-actions { - margin-left: 0; - padding-left: 0; - border-left: none; - width: 100%; - justify-content: center; - padding: 12px 0; - border-top: 1px solid var(--gray-200); - } - .nav-link { width: 100%; text-align: center; } - .hero-stats { gap: 24px; } - .stat-number { font-size: 1.8rem; } - .section { padding: 48px 16px; } - .section-title { font-size: 1.5rem; margin-bottom: 32px; } - .modal { padding: 24px; max-width: 100%; } - .about-grid, - .members-grid, - .wiki-grid { - grid-template-columns: 1fr; - } - .banner-content { + .nav-toggle { + display: flex; flex-direction: column; - text-align: center; - gap: 12px; + gap: 3px; + background: none; + border: none; + cursor: pointer; + padding: 4px; } - .newsletter-card { padding: 32px 24px; } - .footer-links { gap: 16px; } + .nav-toggle span { display: block; width: 20px; height: 2px; background: #65676b; } + .hero-title { font-size: 28px; } + .hero-subtitle { font-size: 16px; } + .hero-stats { gap: 30px; flex-wrap: wrap; } + .stat-number { font-size: 28px; } + .about-grid { grid-template-columns: 1fr; } + .wiki-grid { grid-template-columns: 1fr; } + .members-grid { grid-template-columns: 1fr; } } - -/* ======================================== - LANGUAGE TOGGLE - ======================================== */ -.hide-de { display: none; } -.hide-en { display: none; } -[data-lang="de"] .hide-de { display: block; } -[data-lang="en"] .hide-en { display: block; } -[data-lang="de"] .hide-en { display: none; } -[data-lang="en"] .hide-de { display: none; } -[data-lang="de"] .nav-link .hide-de, -[data-lang="en"] .nav-link .hide-en { display: inline; } \ No newline at end of file +@media (min-width: 769px) { + .nav-toggle { display: none; } +} \ No newline at end of file diff --git a/index_variations.html b/index_variations.html deleted file mode 100644 index e650067..0000000 --- a/index_variations.html +++ /dev/null @@ -1,364 +0,0 @@ - - - - - - Paraguay LLC & SRL — Design-Variationen - - - -
- - -
-

🌴 Paraguay LLC & SRL — Design-Variationen

-

- Entdecke verschiedene Design-Stile für die Paraguay LLC & SRL Community Website. - Jede Variation zeigt, wie die gleiche Struktur in einem komplett anderen visuellen Stil aussehen kann. -

-
- - -
-
- 108 - Mitglieder -
-
- 58 - Beiträge -
-
- 27 - Wiki-Themen -
-
- 3 - Designs -
-
- - - -

🌴 Hauptseite — Paraguay LLC & SRL Community

-

- Die Standard-Seite der Community: Mitglieder, Wiki, Login über Telegram, Newsletter und alles was du für dein LLC/SRL Business in Paraguay brauchst. -

- Zur Hauptseite → -
- - -

Design-Variationen

- - -
- - - -
-
-
-
Neo-Mirai
-
Cyberpunk / Futuristisch
-
-
-

- Neon-Glow Effekte, dunkles Grid-Hintergrund, Scanlines und futuristische Typografie. Inspiriert von Impeccable's Neo-Mirai Design System. -

- Variation ansehen → -
- - - -
-
📖
-
-
Wikipedia
-
Clean / Content-First
-
-
-

- Minimalistisches, text-lastiges Layout mit klaren Strukturen. Fokus auf Lesbarkeit und Informationsarchitektur. -

- Variation ansehen → -
- - - -
-
👥
-
-
Facebook
-
Social Network
-
-
-

- Vertrautes Social-Network-Layout mit blauer Akzentfarbe. Card-basiertes Design für Mitglieder und Wiki-Inhalte. -

- Variation ansehen → -
- -
- - - - -
- - \ No newline at end of file diff --git a/js/main.js b/js/main.js index 7ae5273..667dad7 100644 --- a/js/main.js +++ b/js/main.js @@ -127,11 +127,8 @@ async function loadCommunityStats() { if (data.users !== undefined) { animateCounter('stat-members', data.users); } - if (data.posts !== undefined) { - animateCounter('stat-posts', data.posts); - } if (data.topics !== undefined) { - animateCounter('stat-wiki', data.topics); + document.getElementById('stat-wiki').textContent = data.topics; } } catch (error) { console.error('Failed to load community stats:', error); diff --git a/variations/facebook/index.html b/variations/facebook/index.html deleted file mode 100644 index 8f904ba..0000000 --- a/variations/facebook/index.html +++ /dev/null @@ -1,467 +0,0 @@ - - - - - - Paraguay SRL LLC — Community - - - - - - - - - - - - - - - - - - - - -
-
-
-

- Paraguay LLC & SRL Community - Paraguay LLC & SRL Community -

-

- Der Erfahrungsaustausch für deutsche und amerikanische Expats in Paraguay - The experience exchange for German and American expats in Paraguay -

-
-
- -- - Mitglieder - Members -
-
- -- - Beiträge - Posts -
-
- -- - Wiki-Artikel - Wiki Articles -
-
-
-
-
-
-
- - -
- -
- - -
- - -
-
-

- Über die Community - About the Community -

-
-
-
🏦
-

- Banken & Zahlungsverkehr - Banking & Payments -

-

- Erfahrungen mit paraguayischen und internationalen Banken, Konten, Überweisungen und Kreditkarten. - Experiences with Paraguayan and international banks, accounts, transfers and credit cards. -

-
-
-
⚖️
-

- Rechtliches - Legal Matters -

-

- Gesellschaftsrecht, Verträge, Steuern, Compliance und Rechtsprechung in Paraguay. - Corporate law, contracts, taxes, compliance and jurisprudence in Paraguay. -

-
-
-
📊
-

- Steuern & Buchhaltung - Taxes & Accounting -

-

- Steuerberatung, Buchhaltungssysteme, Jahresabschlüsse und internationale Steuerplanung. - Tax advice, accounting systems, annual statements and international tax planning. -

-
-
-
💻
-

- ERP-Systeme - ERP Systems -

-

- Erfahrungen mit verschiedenen ERP-Systemen, Software-Lösungen und digitalem Management. - Experiences with various ERP systems, software solutions and digital management. -

-
-
-
-
- - -
-
-

- Mitglieder - Members -

- -
-

- Lade Mitglieder... - Loading members... -

-
-
-
- - -
-
-

- Wiki - Wiki -

- -
-

- Lade Wiki... - Loading wiki... -

-
-
-
- - - - -
- - - - - - - diff --git a/variations/facebook/main.js b/variations/facebook/main.js deleted file mode 100644 index 667dad7..0000000 --- a/variations/facebook/main.js +++ /dev/null @@ -1,637 +0,0 @@ -// ======================================== -// Paraguay LLC & SRL — Main JS -// ======================================== - -const API_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/login'; -const NEWSLETTER_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/newsletter'; -const USER_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/user'; -const PROFILE_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/profile'; -const WIKI_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/wiki'; -const COMMUNITY_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/community'; - -let currentLang = 'de'; - -document.addEventListener('DOMContentLoaded', () => { - currentLang = document.body.dataset.lang || 'de'; - checkSession(); - loadCommunityStats(); - - // Smooth scroll nav links - document.querySelectorAll('.nav-link').forEach(link => { - link.addEventListener('click', (e) => { - e.preventDefault(); - const target = document.querySelector(link.getAttribute('href')); - if (target) { - target.scrollIntoView({ behavior: 'smooth' }); - } - // Close mobile nav - document.getElementById('nav-menu').classList.remove('open'); - }); - }); - - // Mobile nav toggle - const navToggle = document.getElementById('nav-toggle'); - const navMenu = document.getElementById('nav-menu'); - if (navToggle) { - navToggle.addEventListener('click', () => { - navMenu.classList.toggle('open'); - }); - } - - // Navbar scroll effect - window.addEventListener('scroll', () => { - const nav = document.getElementById('main-nav'); - if (nav) { - nav.classList.toggle('scrolled', window.scrollY > 20); - } - }); - - // Language toggle - document.querySelectorAll('.lang-btn').forEach(btn => { - btn.addEventListener('click', () => { - const lang = btn.dataset.lang; - setLanguage(lang); - // Reload content in new language - if (isLoggedIn) { - if (document.querySelector('.notebook') || document.getElementById('members-list')) loadUsers(); - if (document.getElementById('wiki-grid')) loadWiki(); - } - }); - }); - - // Member search - const memberSearch = document.getElementById('member-search'); - if (memberSearch) { - memberSearch.addEventListener('input', (e) => { - filterMembers(e.target.value); - }); - } - - // Wiki search - const wikiSearch = document.getElementById('wiki-search'); - if (wikiSearch) { - wikiSearch.addEventListener('input', (e) => { - searchWiki(e.target.value); - }); - } - - // Close modals on overlay click - document.querySelectorAll('.modal-overlay').forEach(overlay => { - overlay.addEventListener('click', (e) => { - if (e.target === overlay) { - overlay.classList.remove('active'); - } - }); - }); - - // Close modals on Escape - document.addEventListener('keydown', (e) => { - if (e.key === 'Escape') { - document.querySelectorAll('.modal-overlay.active').forEach(m => m.classList.remove('active')); - } - }); - - // Login button - const loginBtn = document.getElementById('login-btn'); - if (loginBtn) { - loginBtn.addEventListener('click', () => { - openLoginModal(); - }); - } -}); - -// ======================================== -// LANGUAGE -// ======================================== -function setLanguage(lang) { - currentLang = lang; - document.body.dataset.lang = lang; - document.querySelectorAll('.lang-btn').forEach(b => { - b.classList.toggle('active', b.dataset.lang === lang); - }); -} - -function isDE() { - return currentLang !== 'en'; -} - -// ======================================== -// COMMUNITY STATS -// ======================================== -async function loadCommunityStats() { - try { - const response = await fetch(COMMUNITY_URL); - if (!response.ok) throw new Error('Failed to fetch'); - const data = await response.json(); - - if (data.users !== undefined) { - animateCounter('stat-members', data.users); - } - if (data.topics !== undefined) { - document.getElementById('stat-wiki').textContent = data.topics; - } - } catch (error) { - console.error('Failed to load community stats:', error); - } -} - -function animateCounter(elementId, targetNumber) { - const element = document.getElementById(elementId); - if (!element) return; - - let current = 0; - const duration = 1500; // ms - const steps = 40; - const increment = targetNumber / steps; - const stepTime = duration / steps; - - const timer = setInterval(() => { - current += increment; - if (current >= targetNumber) { - element.textContent = targetNumber; - clearInterval(timer); - } else { - element.textContent = Math.floor(current); - } - }, stepTime); -} - -// ======================================== -// AUTH / SESSION -// ======================================== -let isLoggedIn = false; - -function isSessionValid() { - const sid = getCookie('sessionid'); - return sid.length > 0; -} - -function checkSession() { - isLoggedIn = isSessionValid(); - - if (isLoggedIn) { - document.body.dataset.loggedIn = 'true'; - document.getElementById('login-btn').style.display = 'none'; - document.getElementById('logout-btn').style.display = 'inline-flex'; - document.getElementById('profile-btn').style.display = 'inline-flex'; - document.getElementById('telegram-banner').style.display = 'none'; - document.getElementById('main-content').style.display = 'block'; - document.getElementById('newsletter-section').style.display = 'block'; - loadUsers(); - loadWiki(); - } else { - document.body.dataset.loggedIn = 'false'; - document.getElementById('login-btn').style.display = 'inline-flex'; - document.getElementById('logout-btn').style.display = 'none'; - document.getElementById('profile-btn').style.display = 'none'; - document.getElementById('telegram-banner').style.display = 'block'; - document.getElementById('main-content').style.display = 'none'; - document.getElementById('newsletter-section').style.display = 'none'; - } -} - -// ======================================== -// LOGIN MODAL -// ======================================== -function openLoginModal() { - document.getElementById('login-modal-overlay').classList.add('active'); - // Reset to step 1 - document.querySelectorAll('.login-step').forEach(s => s.classList.remove('active')); - document.getElementById('login-step-1').classList.add('active'); - document.getElementById('telegram-user').value = ''; - document.getElementById('verification-code').value = ''; -} - -function closeLoginModal() { - document.getElementById('login-modal-overlay').classList.remove('active'); -} - -// ======================================== -// PROFILE MODAL -// ======================================== -function openProfileModal() { - const sid = getCookie('sessionid'); - if (!sid) { alert('Bitte anmelden.'); return; } - - fetch(PROFILE_URL + '?sessionid=' + encodeURIComponent(sid)) - .then(r => r.json()) - .then(user => { - document.getElementById('profile-username-display').textContent = user.username || ''; - const rank = getRank(user.posts || 0); - const badge = document.getElementById('profile-rank-badge'); - badge.innerHTML = `${rank.emoji} ${rank.title}`; - - document.getElementById('profile-company').value = user.company || ''; - document.getElementById('profile-email').value = user.email || ''; - document.getElementById('profile-homepage').value = user.homepage || ''; - document.getElementById('profile-image').value = user.image || ''; - document.getElementById('profile-location').value = user.location || ''; - document.getElementById('profile-description').value = user.Description || ''; - document.getElementById('profile-publish').checked = true; - - document.getElementById('profile-modal-overlay').classList.add('active'); - }) - .catch(() => alert('Fehler beim Laden des Profils.')); -} - -function closeProfileModal() { - document.getElementById('profile-modal-overlay').classList.remove('active'); -} - -function saveProfile() { - const sid = getCookie('sessionid'); - fetch(PROFILE_URL, { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ - username: document.getElementById('profile-username-display').textContent, - company: document.getElementById('profile-company').value.trim(), - email: document.getElementById('profile-email').value, - homepage: document.getElementById('profile-homepage').value, - image: document.getElementById('profile-image').value, - location: document.getElementById('profile-location').value, - Description: document.getElementById('profile-description').value, - sessionid: sid, - publish: document.getElementById('profile-publish').checked - }) - }) - .then(r => r.ok ? alert('Profil gespeichert!') : alert('Fehler beim Speichern.')) - .catch(() => alert('Fehler bei der Verbindung.')); -} - -// ======================================== -// USER DETAIL MODAL -// ======================================== -function openUserDetailModal(user) { - const avatar = document.getElementById('user-detail-avatar'); - if (user.image) { - avatar.innerHTML = `${user.username}`; - } else { - avatar.innerHTML = `${(user.username || '?').charAt(0).toUpperCase()}`; - } - - document.getElementById('user-detail-initial').textContent = ''; - document.getElementById('user-detail-username').textContent = '@' + (user.username || 'Unknown'); - - const rank = getRank(user.posts || 0); - document.getElementById('user-detail-rank-badge').className = `rank-badge rank-${rank.level}`; - document.getElementById('user-detail-rank-badge').textContent = rank.emoji + ' ' + rank.title; - - document.getElementById('user-detail-company').textContent = user.company || ''; - - const emailEl = document.getElementById('user-detail-email'); - emailEl.innerHTML = user.email ? `${user.email}` : '-'; - - const hpEl = document.getElementById('user-detail-homepage'); - const hp = user.homepage || ''; - hpEl.innerHTML = hp ? `${hp}` : '-'; - - document.getElementById('user-detail-location').textContent = user.location || '-'; - document.getElementById('user-detail-description').innerHTML = (user.Description || '-').replace(/\n/g, '
'); - - document.getElementById('user-detail-modal-overlay').classList.add('active'); -} - -function closeUserDetailModal() { - document.getElementById('user-detail-modal-overlay').classList.remove('active'); -} - -// ======================================== -// LOGIN FLOW -// ======================================== -function sendTelegramUser() { - const user = document.getElementById('telegram-user').value.trim(); - if (!user) { alert('Bitte geben Sie einen Telegram-Nutzernamen ein.'); return; } - - const btn = event.target; - btn.disabled = true; - btn.textContent = isDE() ? 'Sende...' : 'Sending...'; - - fetch(API_URL, { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ username: user }) - }) - .then(r => r.json()) - .then(data => { - if (data.sessionid) { - setCookie('sessionid', data.sessionid, 1); - document.getElementById('login-step-1').classList.remove('active'); - document.getElementById('login-step-3').classList.add('active'); - } else if (data.status === 'code send') { - document.getElementById('login-step-1').classList.remove('active'); - document.getElementById('login-step-2').classList.add('active'); - } else { - alert(isDE() ? 'Benutzername nicht gefunden. Bitte über Telegram Bot anmelden.' : 'Username not found. Please sign up via Telegram bot.'); - } - }) - .catch(() => { - btn.disabled = false; - alert(isDE() ? 'Verbindungsfehler' : 'Connection error'); - }); -} - -function verifyCode() { - const code = document.getElementById('verification-code').value.trim(); - if (!code) { alert('Bitte geben Sie den Code ein.'); return; } - - fetch(API_URL, { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ - username: document.getElementById('telegram-user').value, - code: code, - sessionid: getCookie('sessionid') - }) - }) - .then(r => r.json()) - .then(data => { - if (data.sessionid) { - setCookie('sessionid', data.sessionid, 1); - checkSession(); - closeLoginModal(); - } else { - alert(isDE() ? 'Ungültiger Code' : 'Invalid code'); - } - }) - .catch(() => alert(isDE() ? 'Verbindungsfehler' : 'Connection error')); -} - -function submitLoginData() { - const name = document.getElementById('full-name').value.trim(); - const llc = document.getElementById('llc-name').value.trim(); - if (!name || !llc) { alert(isDE() ? 'Bitte Name und LLC eintragen' : 'Please enter name and LLC'); return; } - - fetch(API_URL, { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ - username: document.getElementById('telegram-user').value, - name: name, - llc: llc - }) - }) - .then(r => r.json()) - .then(data => { - if (data.sessionid) { - setCookie('sessionid', data.sessionid, 1); - checkSession(); - closeLoginModal(); - } else { - alert(isDE() ? 'Registrierung fehlgeschlagen' : 'Registration failed'); - } - }) - .catch(() => alert(isDE() ? 'Verbindungsfehler' : 'Connection error')); -} - -function logout() { - setCookie('sessionid', '', -1); - checkSession(); -} - -// ======================================== -// NEWSLETTER -// ======================================== -function subscribeNewsletter() { - const email = document.getElementById('newsletter-email').value.trim(); - if (!email) { alert(isDE() ? 'Bitte E-Mail eingeben' : 'Please enter email'); return; } - - fetch(NEWSLETTER_URL, { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ email: email }) - }) - .then(r => { - if (r.ok) { - document.getElementById('newsletter-form').classList.add('hidden'); - document.getElementById('newsletter-success').classList.remove('hidden'); - } else { - alert(isDE() ? 'Fehler beim Abonnieren' : 'Error subscribing'); - } - }) - .catch(() => alert(isDE() ? 'Verbindungsfehler' : 'Connection error')); -} - -// ======================================== -// USERS / MEMBERS -// ======================================== -async function loadUsers() { - try { - const response = await fetch(USER_URL); - if (!response.ok) throw new Error('Failed to fetch'); - const data = await response.json(); - const container = document.getElementById('members-list'); - - if (data.data && Array.isArray(data.data)) { - container.innerHTML = ''; - container.style.display = 'grid'; - - data.data.forEach(user => { - const card = createMemberCard(user); - container.appendChild(card); - }); - - // Update stats will be handled by loadCommunityStats - } else { - container.innerHTML = '

' + (isDE() ? 'Keine Mitglieder gefunden' : 'No members found') + '

'; - } - } catch (error) { - const container = document.getElementById('members-list'); - container.innerHTML = '

' + (isDE() ? 'Fehler beim Laden' : 'Error loading') + '

'; - } -} - -function createMemberCard(user) { - const card = document.createElement('div'); - card.className = 'member-card'; - - const rank = getRank(user.posts || 0); - const avatarContent = user.image - ? `${user.username}` - : (user.username || '?').charAt(0).toUpperCase(); - - card.innerHTML = ` -
${avatarContent}
-
-

${user.username || 'N/A'}

-

${user.company || ''}

- ${user.location ? `

📍 ${user.location}

` : ''} - ${user.posts ? `

${user.posts} ${isDE() ? 'Beiträge' : 'posts'}

` : ''} - ${rank.emoji} ${rank.title} -
- `; - - card.addEventListener('click', () => openUserDetailModal(user)); - return card; -} - -function filterMembers(term) { - const cards = document.querySelectorAll('.member-card'); - const t = term.toLowerCase(); - cards.forEach(card => { - const text = card.textContent.toLowerCase(); - card.style.display = text.includes(t) ? 'flex' : 'none'; - }); -} - -// ======================================== -// RANKS -// ======================================== -function getRank(posts) { - if (posts >= 500) return { level: 'legend', title: isDE() ? 'Legende' : 'Legend', emoji: '👑' }; - if (posts >= 200) return { level: 'expert', title: isDE() ? 'Experte' : 'Expert', emoji: '🏆' }; - if (posts >= 100) return { level: 'veteran', title: isDE() ? 'Veteran' : 'Veteran', emoji: '💎' }; - if (posts >= 50) return { level: 'contributor', title: isDE() ? 'Mitwirkender' : 'Contributor', emoji: '⭐' }; - if (posts >= 30) return { level: 'member', title: isDE() ? 'Mitglied' : 'Member', emoji: '🌳' }; - if (posts >= 5) return { level: 'beginner', title: isDE() ? 'Einsteiger' : 'Beginner', emoji: '🌿' }; - return { level: 'rookie', title: isDE() ? 'Anfänger' : 'Rookie', emoji: '🌱' }; -} - -// ======================================== -// WIKI -// ======================================== -let wikiData = []; - -async function loadWiki() { - try { - const response = await fetch(WIKI_URL); - if (!response.ok) throw new Error('Failed to fetch'); - const result = await response.json(); - - if (result.data && Array.isArray(result.data)) { - wikiData = result.data; - renderWikiCards(wikiData); - - // Wiki count will be loaded from community webhook - } else { - document.getElementById('wiki-grid').innerHTML = '

' + (isDE() ? 'Keine Wiki-Daten' : 'No wiki data') + '

'; - } - } catch (error) { - document.getElementById('wiki-grid').innerHTML = '

' + (isDE() ? 'Fehler beim Laden' : 'Error loading') + '

'; - } -} - -function renderWikiCards(data) { - const grid = document.getElementById('wiki-grid'); - grid.innerHTML = ''; - - if (data.length === 0) { - grid.innerHTML = '

' + (isDE() ? 'Keine Ergebnisse gefunden' : 'No results found') + '

'; - return; - } - - // Group by topic - const topics = {}; - data.forEach(item => { - const topicKey = (item.topic_en && currentLang === 'en') ? item.topic_en : (item.topic || 'Unknown'); - if (!topics[topicKey]) topics[topicKey] = []; - topics[topicKey].push(item); - }); - - const colors = ['blue', 'teal', 'green', 'orange', 'purple', 'pink', 'yellow']; - - Object.entries(topics).forEach(([topicName, subtopics], idx) => { - const card = document.createElement('div'); - card.className = 'wiki-card'; - card.dataset.color = colors[idx % colors.length]; - - // Get excerpt from first subtopic - const firstSub = subtopics[0]; - const excerpt = currentLang === 'en' && firstSub.wiki_en ? firstSub.wiki_en : (firstSub.wiki || ''); - const subtopicTitle = currentLang === 'en' && firstSub.subtopic_en ? firstSub.subtopic_en : (firstSub.subtopic || ''); - - card.innerHTML = ` -
${escapeHtml(topicName)}
-
${escapeHtml(excerpt.substring(0, 150))}${excerpt.length > 150 ? '...' : ''}
- - `; - - // Open modal on click - card.addEventListener('click', () => openWikiModal(topicName, subtopics)); - - grid.appendChild(card); - }); -} - -function openWikiModal(topicName, subtopics) { - // Create modal if not exists - let modalOverlay = document.getElementById('wiki-modal-overlay'); - if (!modalOverlay) { - modalOverlay = document.createElement('div'); - modalOverlay.id = 'wiki-modal-overlay'; - modalOverlay.className = 'modal-overlay'; - document.body.appendChild(modalOverlay); - } - - let html = ''; - modalOverlay.innerHTML = html; - modalOverlay.classList.add('active'); -} - -function closeWikiModal() { - const overlay = document.getElementById('wiki-modal-overlay'); - if (overlay) overlay.classList.remove('active'); -} - -function searchWiki(term) { - if (!term.trim()) { - renderWikiCards(wikiData); - return; - } - - const t = term.toLowerCase(); - const filtered = wikiData.filter(item => { - const topic = ((item.topic_en && currentLang === 'en') ? item.topic_en : (item.topic || '')) + - ' ' + ((item.subtopic_en && currentLang === 'en') ? item.subtopic_en : (item.subtopic || '')) + - ' ' + ((item.wiki_en && currentLang === 'en') ? item.wiki_en : (item.wiki || '')); - return topic.toLowerCase().includes(t); - }); - - renderWikiCards(filtered); -} - -// ======================================== -// COOKIES -// ======================================== -function getCookie(name) { - const localVal = localStorage.getItem('paraguay_' + name); - if (localVal) return localVal; - - const value = `; ${document.cookie}`; - const parts = value.split(`; ${name}=`); - if (parts.length === 2) { - return parts.pop().split(';').shift().replace(/^"|"$/g, ''); - } - return ''; -} - -function setCookie(name, value, days) { - const expires = new Date(); - expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000); - document.cookie = name + '=' + encodeURIComponent(value) + ';expires=' + expires.toUTCString() + ';path=/'; - localStorage.setItem('paraguay_' + name, value); -} - -// ======================================== -// UTILS -// ======================================== -function escapeHtml(text) { - if (!text) return ''; - const div = document.createElement('div'); - div.textContent = text; - return div.innerHTML; -} diff --git a/variations/facebook/style.css b/variations/facebook/style.css deleted file mode 100644 index 47c5bfa..0000000 --- a/variations/facebook/style.css +++ /dev/null @@ -1,401 +0,0 @@ -/* Facebook Style — Blue social network */ -*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } -body { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; - background: #f0f2f5; - color: #1c1e21; - line-height: 1.33; - font-size: 15px; -} - -/* Navigation */ -.nav { - background: #fff; - box-shadow: 0 2px 4px rgba(0,0,0,0.1); - height: 56px; - position: sticky; - top: 0; - z-index: 1000; - padding: 0 16px; -} -.nav-container { - max-width: 1200px; - margin: 0 auto; - display: flex; - align-items: center; - justify-content: space-between; - height: 100%; -} -.nav-brand { - display: flex; - align-items: center; - gap: 10px; - text-decoration: none; - color: #1877f2; - font-size: 24px; - font-weight: 700; -} -.nav-logo { font-size: 28px; } -.nav-menu { display: flex; gap: 8px; align-items: center; } -.nav-link { - color: #65676b; - text-decoration: none; - font-size: 15px; - font-weight: 500; - padding: 8px 16px; - border-radius: 8px; - transition: background 0.2s; -} -.nav-link:hover { background: #f0f2f5; } -.nav-actions { display: flex; gap: 8px; align-items: center; } -.lang-select { display: flex; gap: 4px; } -.lang-btn { - background: #f0f2f5; - border: none; - padding: 6px 12px; - font-size: 13px; - cursor: pointer; - border-radius: 6px; - font-weight: 500; -} -.lang-btn.active { background: #e7f3ff; color: #1877f2; } -.lang-btn:hover { background: #e4e6eb; } - -/* Buttons */ -.btn { - padding: 8px 16px; - font-size: 15px; - font-weight: 600; - border-radius: 6px; - cursor: pointer; - text-decoration: none; - display: inline-block; - border: none; - transition: background 0.2s; -} -.btn-primary { background: #1877f2; color: #fff; } -.btn-primary:hover { background: #166fe5; } -.btn-outline { - background: #f0f2f5; - color: #1c1e21; - border: none; -} -.btn-outline:hover { background: #e4e6eb; } -.btn-block { display: block; width: 100%; text-align: center; } -.btn-telegram { background: #0088cc; color: #fff; } - -/* Hero */ -.hero { - background: linear-gradient(135deg, #1877f2 0%, #42b0ff 100%); - color: #fff; - text-align: center; - padding: 60px 20px 40px; -} -.hero-title { - font-size: 42px; - font-weight: 700; - margin-bottom: 12px; - text-shadow: 0 2px 4px rgba(0,0,0,0.1); -} -.hero-subtitle { - font-size: 18px; - opacity: 0.9; - margin-bottom: 30px; - max-width: 600px; - margin-left: auto; - margin-right: auto; -} -.hero-stats { display: flex; justify-content: center; gap: 60px; } -.stat { text-align: center; } -.stat-number { - display: block; - font-size: 36px; - font-weight: 700; -} - -/* Sections */ -.section { - background: #fff; - border-radius: 8px; - padding: 24px; - margin: 16px auto; - max-width: 1200px; - box-shadow: 0 1px 2px rgba(0,0,0,0.1); -} -.section-alt { background: #fff; border-radius: 8px; padding: 24px; margin: 16px auto; max-width: 1200px; box-shadow: 0 1px 2px rgba(0,0,0,0.1); } -.section-title { - font-size: 20px; - font-weight: 700; - margin-bottom: 20px; - color: #1c1e21; -} -.container { max-width: 100%; } - -/* About */ -.about-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - gap: 16px; -} -.about-card { - padding: 20px; - border-radius: 8px; - background: #f0f2f5; - transition: transform 0.2s, box-shadow 0.2s; -} -.about-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); } -.about-icon { font-size: 2.5rem; margin-bottom: 12px; } -.about-card h3 { font-size: 16px; font-weight: 600; color: #1c1e21; margin-bottom: 8px; } -.about-card p { font-size: 14px; color: #65676b; line-height: 1.4; } - -/* Search */ -.search-bar { - display: flex; - max-width: 400px; - margin-bottom: 20px; - position: relative; -} -.search-icon { - position: absolute; - left: 12px; - top: 50%; - transform: translateY(-50%); - width: 16px; - height: 16px; - color: #65676b; -} -.search-input { - width: 100%; - padding: 10px 12px 10px 36px; - border: none; - border-radius: 20px; - background: #f0f2f5; - font-size: 15px; -} -.search-input:focus { outline: 2px solid #1877f2; outline-offset: 0; } - -/* Members Grid */ -.members-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); - gap: 12px; -} -.member-card { - display: flex; - align-items: center; - gap: 12px; - padding: 12px; - border-radius: 8px; - background: #f0f2f5; - cursor: pointer; - transition: background 0.2s; -} -.member-card:hover { background: #e4e6eb; } -.user-avatar { - width: 48px; - height: 48px; - border-radius: 50%; - object-fit: cover; -} -.user-avatar-text { - width: 48px; - height: 48px; - border-radius: 50%; - background: #1877f2; - color: #fff; - display: flex; - align-items: center; - justify-content: center; - font-size: 20px; - font-weight: 600; -} -.member-info h4 { font-size: 15px; font-weight: 600; color: #1c1e21; margin-bottom: 2px; } -.member-company { font-size: 13px; color: #65676b; } -.member-location, .member-posts { font-size: 13px; color: #65676b; } -.rank-badge { - font-size: 11px; - padding: 3px 8px; - border-radius: 12px; - position: absolute; - top: -4px; - right: 0; - font-weight: 500; -} -.rank-badge.rank-rookie { background: #e4e6eb; color: #65676b; } -.rank-badge.rank-beginner { background: #e7f3e9; color: #0a832c; } -.rank-badge.rank-member { background: #e7f0ff; color: #1877f2; } -.rank-badge.rank-contributor { background: #e0f7fa; color: #00838f; } -.rank-badge.rank-veteran { background: #f3e5f5; color: #8e24aa; } -.rank-badge.rank-expert { background: #fff3e0; color: #e65100; } -.rank-badge.rank-legend { background: #fce4ec; color: #c62828; } - -/* Wiki Cards */ -.wiki-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); - gap: 12px; -} -.wiki-card { - padding: 16px; - border-radius: 8px; - background: #f0f2f5; - cursor: pointer; - transition: all 0.2s; - border-left: 4px solid #1877f2; -} -.wiki-card:hover { background: #e4e6eb; } -.wiki-card-title { font-size: 15px; font-weight: 600; color: #1c1e21; margin-bottom: 6px; } -.wiki-card-excerpt { font-size: 13px; color: #65676b; margin-bottom: 8px; } -.wiki-card-footer { display: flex; justify-content: space-between; font-size: 13px; color: #65676b; } -.wiki-card-subtopic { color: #1877f2; } -.no-results { padding: 20px; text-align: center; color: #65676b; } -.loading-text { padding: 20px; text-align: center; color: #65676b; font-style: italic; } - -/* Modal */ -.modal-overlay { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(255,255,255,0.8); - z-index: 2000; - display: none; - align-items: center; - justify-content: center; -} -.modal-overlay.active { display: flex; } -.modal { - background: #fff; - border-radius: 8px; - padding: 24px; - max-width: 440px; - width: 90%; - box-shadow: 0 8px 30px rgba(0,0,0,0.2); - position: relative; -} -.modal-close { - position: absolute; - top: 12px; - right: 16px; - background: none; - border: none; - font-size: 24px; - cursor: pointer; - color: #65676b; -} -.login-icon { font-size: 3rem; text-align: center; margin-bottom: 16px; } -.login-hint { color: #65676b; text-align: center; margin-bottom: 20px; font-size: 15px; } -.form-group { margin-bottom: 14px; } -.form-input { - width: 100%; - padding: 12px 14px; - border: 1px solid #dddfe2; - border-radius: 6px; - font-size: 15px; -} -.form-input:focus { border-color: #1877f2; outline: 2px solid #1877f2; outline-offset: -2px; } -.login-step { display: none; } -.login-step.active { display: block; } - -/* Profile & Detail */ -.profile-username { font-size: 1.2rem; font-weight: 600; margin-bottom: 8px; } -.profile-rank { margin-bottom: 16px; } -.user-detail-modal { max-width: 520px; } -.user-detail-content { padding: 16px; } -.user-detail-avatar { - width: 64px; - height: 64px; - border-radius: 50%; - margin: 0 auto 16px; - overflow: hidden; -} -.user-detail-header { text-align: center; margin-bottom: 16px; } -.user-detail-name-rank { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 8px; } -.user-detail-name-rank h2 { font-size: 1.2rem; font-weight: 600; } -.user-detail-fields { display: grid; gap: 10px; } -.detail-field { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #e4e6eb; } -.detail-label { color: #65676b; font-size: 14px; } -.detail-value { color: #1c1e21; font-size: 14px; text-align: right; } -.user-detail-company { color: #65676b; text-align: center; } - -/* Telegram Banner */ -.telegram-banner { - background: #e7f3ff; - padding: 16px 24px; - margin: 16px auto; - max-width: 1200px; - border-radius: 8px; - display: flex; - align-items: center; - gap: 16px; -} -.banner-icon { font-size: 2rem; } -.banner-text strong { color: #1c1e21; } - -/* Newsletter */ -.newsletter-card { text-align: center; max-width: 400px; margin: 0 auto; } -.newsletter-icon { font-size: 2.5rem; margin-bottom: 16px; } -.newsletter-hint { color: #65676b; margin-bottom: 16px; font-size: 15px; } - -/* Footer */ -.footer { - background: #fff; - padding: 24px 16px; - text-align: center; - border-top: 1px solid #e4e6eb; - margin-top: 32px; -} -.footer-brand { margin-bottom: 12px; } -.footer-logo { font-size: 1.5rem; } -.footer-title { color: #1c1e21; margin-left: 10px; font-size: 14px; font-weight: 600; } -.footer-links { display: flex; justify-content: center; gap: 20px; margin-bottom: 12px; flex-wrap: wrap; } -.footer-links a { color: #65676b; text-decoration: none; font-size: 13px; } -.footer-links a:hover { text-decoration: underline; } -.footer-bottom p { color: #65676b; margin: 4px 0; font-size: 12px; } -.footer-bottom a { color: #1877f2; } -.footer-copy { font-size: 12px; } - -/* Hide/Show */ -.hide-en { display: none; } -body[data-lang="en"] .hide-en { display: inline; } -body[data-lang="en"] .hide-de { display: none; } -.hidden { display: none !important; } - -/* Responsive */ -@media (max-width: 768px) { - .nav-menu { display: none; } - .nav-menu.open { - display: flex; - position: absolute; - top: 100%; - left: 0; - right: 0; - background: #fff; - flex-direction: column; - padding: 12px; - gap: 8px; - border-top: 1px solid #e4e6eb; - box-shadow: 0 4px 12px rgba(0,0,0,0.1); - } - .nav-toggle { - display: flex; - flex-direction: column; - gap: 3px; - background: none; - border: none; - cursor: pointer; - padding: 4px; - } - .nav-toggle span { display: block; width: 20px; height: 2px; background: #65676b; } - .hero-title { font-size: 28px; } - .hero-subtitle { font-size: 16px; } - .hero-stats { gap: 30px; flex-wrap: wrap; } - .stat-number { font-size: 28px; } - .about-grid { grid-template-columns: 1fr; } - .wiki-grid { grid-template-columns: 1fr; } - .members-grid { grid-template-columns: 1fr; } -} -@media (min-width: 769px) { - .nav-toggle { display: none; } -} \ No newline at end of file diff --git a/variations/neo-mirai/index.html b/variations/neo-mirai/index.html deleted file mode 100644 index 554a0cf..0000000 --- a/variations/neo-mirai/index.html +++ /dev/null @@ -1,462 +0,0 @@ - - - - - - Paraguay SRL LLC — Community - - - - - - -
-
- - - - - - - - - - - - - - -
-
-
-

- Paraguay LLC & SRL - Paraguay LLC & SRL - COMMUNITY -

-

- Der Erfahrungsaustausch für deutsche und amerikanische Expats in Paraguay - The experience exchange for German and American expats in Paraguay -

-
-
- -- - Mitglieder - Members -
-
- -- - Beiträge - Posts -
-
- -- - Wiki-Artikel - Wiki Articles -
-
-
-
- - -
- -
- - -
- - -
-
-

- Über die Community - About the Community -

-
-
-
🏦
-

- Banken & Zahlungsverkehr - Banking & Payments -

-

- Erfahrungen mit paraguayischen und internationalen Banken, Konten, Überweisungen und Kreditkarten. - Experiences with Paraguayan and international banks, accounts, transfers and credit cards. -

-
-
-
⚖️
-

- Rechtliches - Legal Matters -

-

- Gesellschaftsrecht, Verträge, Steuern, Compliance und Rechtsprechung in Paraguay. - Corporate law, contracts, taxes, compliance and jurisprudence in Paraguay. -

-
-
-
📊
-

- Steuern & Buchhaltung - Taxes & Accounting -

-

- Steuerberatung, Buchhaltungssysteme, Jahresabschlüsse und internationale Steuerplanung. - Tax advice, accounting systems, annual statements and international tax planning. -

-
-
-
💻
-

- ERP-Systeme - ERP Systems -

-

- Erfahrungen mit verschiedenen ERP-Systemen, Software-Lösungen und digitalem Management. - Experiences with various ERP systems, software solutions and digital management. -

-
-
-
-
- - -
-
-

- Mitglieder - Members -

- -
-

- Lade Mitglieder... - Loading members... -

-
-
-
- - -
-
-

- Wiki - Wiki -

- -
-

- Lade Wiki... - Loading wiki... -

-
-
-
- - - - -
- - - - - - - \ No newline at end of file diff --git a/variations/neo-mirai/main.js b/variations/neo-mirai/main.js deleted file mode 100644 index 667dad7..0000000 --- a/variations/neo-mirai/main.js +++ /dev/null @@ -1,637 +0,0 @@ -// ======================================== -// Paraguay LLC & SRL — Main JS -// ======================================== - -const API_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/login'; -const NEWSLETTER_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/newsletter'; -const USER_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/user'; -const PROFILE_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/profile'; -const WIKI_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/wiki'; -const COMMUNITY_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/community'; - -let currentLang = 'de'; - -document.addEventListener('DOMContentLoaded', () => { - currentLang = document.body.dataset.lang || 'de'; - checkSession(); - loadCommunityStats(); - - // Smooth scroll nav links - document.querySelectorAll('.nav-link').forEach(link => { - link.addEventListener('click', (e) => { - e.preventDefault(); - const target = document.querySelector(link.getAttribute('href')); - if (target) { - target.scrollIntoView({ behavior: 'smooth' }); - } - // Close mobile nav - document.getElementById('nav-menu').classList.remove('open'); - }); - }); - - // Mobile nav toggle - const navToggle = document.getElementById('nav-toggle'); - const navMenu = document.getElementById('nav-menu'); - if (navToggle) { - navToggle.addEventListener('click', () => { - navMenu.classList.toggle('open'); - }); - } - - // Navbar scroll effect - window.addEventListener('scroll', () => { - const nav = document.getElementById('main-nav'); - if (nav) { - nav.classList.toggle('scrolled', window.scrollY > 20); - } - }); - - // Language toggle - document.querySelectorAll('.lang-btn').forEach(btn => { - btn.addEventListener('click', () => { - const lang = btn.dataset.lang; - setLanguage(lang); - // Reload content in new language - if (isLoggedIn) { - if (document.querySelector('.notebook') || document.getElementById('members-list')) loadUsers(); - if (document.getElementById('wiki-grid')) loadWiki(); - } - }); - }); - - // Member search - const memberSearch = document.getElementById('member-search'); - if (memberSearch) { - memberSearch.addEventListener('input', (e) => { - filterMembers(e.target.value); - }); - } - - // Wiki search - const wikiSearch = document.getElementById('wiki-search'); - if (wikiSearch) { - wikiSearch.addEventListener('input', (e) => { - searchWiki(e.target.value); - }); - } - - // Close modals on overlay click - document.querySelectorAll('.modal-overlay').forEach(overlay => { - overlay.addEventListener('click', (e) => { - if (e.target === overlay) { - overlay.classList.remove('active'); - } - }); - }); - - // Close modals on Escape - document.addEventListener('keydown', (e) => { - if (e.key === 'Escape') { - document.querySelectorAll('.modal-overlay.active').forEach(m => m.classList.remove('active')); - } - }); - - // Login button - const loginBtn = document.getElementById('login-btn'); - if (loginBtn) { - loginBtn.addEventListener('click', () => { - openLoginModal(); - }); - } -}); - -// ======================================== -// LANGUAGE -// ======================================== -function setLanguage(lang) { - currentLang = lang; - document.body.dataset.lang = lang; - document.querySelectorAll('.lang-btn').forEach(b => { - b.classList.toggle('active', b.dataset.lang === lang); - }); -} - -function isDE() { - return currentLang !== 'en'; -} - -// ======================================== -// COMMUNITY STATS -// ======================================== -async function loadCommunityStats() { - try { - const response = await fetch(COMMUNITY_URL); - if (!response.ok) throw new Error('Failed to fetch'); - const data = await response.json(); - - if (data.users !== undefined) { - animateCounter('stat-members', data.users); - } - if (data.topics !== undefined) { - document.getElementById('stat-wiki').textContent = data.topics; - } - } catch (error) { - console.error('Failed to load community stats:', error); - } -} - -function animateCounter(elementId, targetNumber) { - const element = document.getElementById(elementId); - if (!element) return; - - let current = 0; - const duration = 1500; // ms - const steps = 40; - const increment = targetNumber / steps; - const stepTime = duration / steps; - - const timer = setInterval(() => { - current += increment; - if (current >= targetNumber) { - element.textContent = targetNumber; - clearInterval(timer); - } else { - element.textContent = Math.floor(current); - } - }, stepTime); -} - -// ======================================== -// AUTH / SESSION -// ======================================== -let isLoggedIn = false; - -function isSessionValid() { - const sid = getCookie('sessionid'); - return sid.length > 0; -} - -function checkSession() { - isLoggedIn = isSessionValid(); - - if (isLoggedIn) { - document.body.dataset.loggedIn = 'true'; - document.getElementById('login-btn').style.display = 'none'; - document.getElementById('logout-btn').style.display = 'inline-flex'; - document.getElementById('profile-btn').style.display = 'inline-flex'; - document.getElementById('telegram-banner').style.display = 'none'; - document.getElementById('main-content').style.display = 'block'; - document.getElementById('newsletter-section').style.display = 'block'; - loadUsers(); - loadWiki(); - } else { - document.body.dataset.loggedIn = 'false'; - document.getElementById('login-btn').style.display = 'inline-flex'; - document.getElementById('logout-btn').style.display = 'none'; - document.getElementById('profile-btn').style.display = 'none'; - document.getElementById('telegram-banner').style.display = 'block'; - document.getElementById('main-content').style.display = 'none'; - document.getElementById('newsletter-section').style.display = 'none'; - } -} - -// ======================================== -// LOGIN MODAL -// ======================================== -function openLoginModal() { - document.getElementById('login-modal-overlay').classList.add('active'); - // Reset to step 1 - document.querySelectorAll('.login-step').forEach(s => s.classList.remove('active')); - document.getElementById('login-step-1').classList.add('active'); - document.getElementById('telegram-user').value = ''; - document.getElementById('verification-code').value = ''; -} - -function closeLoginModal() { - document.getElementById('login-modal-overlay').classList.remove('active'); -} - -// ======================================== -// PROFILE MODAL -// ======================================== -function openProfileModal() { - const sid = getCookie('sessionid'); - if (!sid) { alert('Bitte anmelden.'); return; } - - fetch(PROFILE_URL + '?sessionid=' + encodeURIComponent(sid)) - .then(r => r.json()) - .then(user => { - document.getElementById('profile-username-display').textContent = user.username || ''; - const rank = getRank(user.posts || 0); - const badge = document.getElementById('profile-rank-badge'); - badge.innerHTML = `${rank.emoji} ${rank.title}`; - - document.getElementById('profile-company').value = user.company || ''; - document.getElementById('profile-email').value = user.email || ''; - document.getElementById('profile-homepage').value = user.homepage || ''; - document.getElementById('profile-image').value = user.image || ''; - document.getElementById('profile-location').value = user.location || ''; - document.getElementById('profile-description').value = user.Description || ''; - document.getElementById('profile-publish').checked = true; - - document.getElementById('profile-modal-overlay').classList.add('active'); - }) - .catch(() => alert('Fehler beim Laden des Profils.')); -} - -function closeProfileModal() { - document.getElementById('profile-modal-overlay').classList.remove('active'); -} - -function saveProfile() { - const sid = getCookie('sessionid'); - fetch(PROFILE_URL, { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ - username: document.getElementById('profile-username-display').textContent, - company: document.getElementById('profile-company').value.trim(), - email: document.getElementById('profile-email').value, - homepage: document.getElementById('profile-homepage').value, - image: document.getElementById('profile-image').value, - location: document.getElementById('profile-location').value, - Description: document.getElementById('profile-description').value, - sessionid: sid, - publish: document.getElementById('profile-publish').checked - }) - }) - .then(r => r.ok ? alert('Profil gespeichert!') : alert('Fehler beim Speichern.')) - .catch(() => alert('Fehler bei der Verbindung.')); -} - -// ======================================== -// USER DETAIL MODAL -// ======================================== -function openUserDetailModal(user) { - const avatar = document.getElementById('user-detail-avatar'); - if (user.image) { - avatar.innerHTML = `${user.username}`; - } else { - avatar.innerHTML = `${(user.username || '?').charAt(0).toUpperCase()}`; - } - - document.getElementById('user-detail-initial').textContent = ''; - document.getElementById('user-detail-username').textContent = '@' + (user.username || 'Unknown'); - - const rank = getRank(user.posts || 0); - document.getElementById('user-detail-rank-badge').className = `rank-badge rank-${rank.level}`; - document.getElementById('user-detail-rank-badge').textContent = rank.emoji + ' ' + rank.title; - - document.getElementById('user-detail-company').textContent = user.company || ''; - - const emailEl = document.getElementById('user-detail-email'); - emailEl.innerHTML = user.email ? `${user.email}` : '-'; - - const hpEl = document.getElementById('user-detail-homepage'); - const hp = user.homepage || ''; - hpEl.innerHTML = hp ? `${hp}` : '-'; - - document.getElementById('user-detail-location').textContent = user.location || '-'; - document.getElementById('user-detail-description').innerHTML = (user.Description || '-').replace(/\n/g, '
'); - - document.getElementById('user-detail-modal-overlay').classList.add('active'); -} - -function closeUserDetailModal() { - document.getElementById('user-detail-modal-overlay').classList.remove('active'); -} - -// ======================================== -// LOGIN FLOW -// ======================================== -function sendTelegramUser() { - const user = document.getElementById('telegram-user').value.trim(); - if (!user) { alert('Bitte geben Sie einen Telegram-Nutzernamen ein.'); return; } - - const btn = event.target; - btn.disabled = true; - btn.textContent = isDE() ? 'Sende...' : 'Sending...'; - - fetch(API_URL, { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ username: user }) - }) - .then(r => r.json()) - .then(data => { - if (data.sessionid) { - setCookie('sessionid', data.sessionid, 1); - document.getElementById('login-step-1').classList.remove('active'); - document.getElementById('login-step-3').classList.add('active'); - } else if (data.status === 'code send') { - document.getElementById('login-step-1').classList.remove('active'); - document.getElementById('login-step-2').classList.add('active'); - } else { - alert(isDE() ? 'Benutzername nicht gefunden. Bitte über Telegram Bot anmelden.' : 'Username not found. Please sign up via Telegram bot.'); - } - }) - .catch(() => { - btn.disabled = false; - alert(isDE() ? 'Verbindungsfehler' : 'Connection error'); - }); -} - -function verifyCode() { - const code = document.getElementById('verification-code').value.trim(); - if (!code) { alert('Bitte geben Sie den Code ein.'); return; } - - fetch(API_URL, { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ - username: document.getElementById('telegram-user').value, - code: code, - sessionid: getCookie('sessionid') - }) - }) - .then(r => r.json()) - .then(data => { - if (data.sessionid) { - setCookie('sessionid', data.sessionid, 1); - checkSession(); - closeLoginModal(); - } else { - alert(isDE() ? 'Ungültiger Code' : 'Invalid code'); - } - }) - .catch(() => alert(isDE() ? 'Verbindungsfehler' : 'Connection error')); -} - -function submitLoginData() { - const name = document.getElementById('full-name').value.trim(); - const llc = document.getElementById('llc-name').value.trim(); - if (!name || !llc) { alert(isDE() ? 'Bitte Name und LLC eintragen' : 'Please enter name and LLC'); return; } - - fetch(API_URL, { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ - username: document.getElementById('telegram-user').value, - name: name, - llc: llc - }) - }) - .then(r => r.json()) - .then(data => { - if (data.sessionid) { - setCookie('sessionid', data.sessionid, 1); - checkSession(); - closeLoginModal(); - } else { - alert(isDE() ? 'Registrierung fehlgeschlagen' : 'Registration failed'); - } - }) - .catch(() => alert(isDE() ? 'Verbindungsfehler' : 'Connection error')); -} - -function logout() { - setCookie('sessionid', '', -1); - checkSession(); -} - -// ======================================== -// NEWSLETTER -// ======================================== -function subscribeNewsletter() { - const email = document.getElementById('newsletter-email').value.trim(); - if (!email) { alert(isDE() ? 'Bitte E-Mail eingeben' : 'Please enter email'); return; } - - fetch(NEWSLETTER_URL, { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ email: email }) - }) - .then(r => { - if (r.ok) { - document.getElementById('newsletter-form').classList.add('hidden'); - document.getElementById('newsletter-success').classList.remove('hidden'); - } else { - alert(isDE() ? 'Fehler beim Abonnieren' : 'Error subscribing'); - } - }) - .catch(() => alert(isDE() ? 'Verbindungsfehler' : 'Connection error')); -} - -// ======================================== -// USERS / MEMBERS -// ======================================== -async function loadUsers() { - try { - const response = await fetch(USER_URL); - if (!response.ok) throw new Error('Failed to fetch'); - const data = await response.json(); - const container = document.getElementById('members-list'); - - if (data.data && Array.isArray(data.data)) { - container.innerHTML = ''; - container.style.display = 'grid'; - - data.data.forEach(user => { - const card = createMemberCard(user); - container.appendChild(card); - }); - - // Update stats will be handled by loadCommunityStats - } else { - container.innerHTML = '

' + (isDE() ? 'Keine Mitglieder gefunden' : 'No members found') + '

'; - } - } catch (error) { - const container = document.getElementById('members-list'); - container.innerHTML = '

' + (isDE() ? 'Fehler beim Laden' : 'Error loading') + '

'; - } -} - -function createMemberCard(user) { - const card = document.createElement('div'); - card.className = 'member-card'; - - const rank = getRank(user.posts || 0); - const avatarContent = user.image - ? `${user.username}` - : (user.username || '?').charAt(0).toUpperCase(); - - card.innerHTML = ` -
${avatarContent}
-
-

${user.username || 'N/A'}

-

${user.company || ''}

- ${user.location ? `

📍 ${user.location}

` : ''} - ${user.posts ? `

${user.posts} ${isDE() ? 'Beiträge' : 'posts'}

` : ''} - ${rank.emoji} ${rank.title} -
- `; - - card.addEventListener('click', () => openUserDetailModal(user)); - return card; -} - -function filterMembers(term) { - const cards = document.querySelectorAll('.member-card'); - const t = term.toLowerCase(); - cards.forEach(card => { - const text = card.textContent.toLowerCase(); - card.style.display = text.includes(t) ? 'flex' : 'none'; - }); -} - -// ======================================== -// RANKS -// ======================================== -function getRank(posts) { - if (posts >= 500) return { level: 'legend', title: isDE() ? 'Legende' : 'Legend', emoji: '👑' }; - if (posts >= 200) return { level: 'expert', title: isDE() ? 'Experte' : 'Expert', emoji: '🏆' }; - if (posts >= 100) return { level: 'veteran', title: isDE() ? 'Veteran' : 'Veteran', emoji: '💎' }; - if (posts >= 50) return { level: 'contributor', title: isDE() ? 'Mitwirkender' : 'Contributor', emoji: '⭐' }; - if (posts >= 30) return { level: 'member', title: isDE() ? 'Mitglied' : 'Member', emoji: '🌳' }; - if (posts >= 5) return { level: 'beginner', title: isDE() ? 'Einsteiger' : 'Beginner', emoji: '🌿' }; - return { level: 'rookie', title: isDE() ? 'Anfänger' : 'Rookie', emoji: '🌱' }; -} - -// ======================================== -// WIKI -// ======================================== -let wikiData = []; - -async function loadWiki() { - try { - const response = await fetch(WIKI_URL); - if (!response.ok) throw new Error('Failed to fetch'); - const result = await response.json(); - - if (result.data && Array.isArray(result.data)) { - wikiData = result.data; - renderWikiCards(wikiData); - - // Wiki count will be loaded from community webhook - } else { - document.getElementById('wiki-grid').innerHTML = '

' + (isDE() ? 'Keine Wiki-Daten' : 'No wiki data') + '

'; - } - } catch (error) { - document.getElementById('wiki-grid').innerHTML = '

' + (isDE() ? 'Fehler beim Laden' : 'Error loading') + '

'; - } -} - -function renderWikiCards(data) { - const grid = document.getElementById('wiki-grid'); - grid.innerHTML = ''; - - if (data.length === 0) { - grid.innerHTML = '

' + (isDE() ? 'Keine Ergebnisse gefunden' : 'No results found') + '

'; - return; - } - - // Group by topic - const topics = {}; - data.forEach(item => { - const topicKey = (item.topic_en && currentLang === 'en') ? item.topic_en : (item.topic || 'Unknown'); - if (!topics[topicKey]) topics[topicKey] = []; - topics[topicKey].push(item); - }); - - const colors = ['blue', 'teal', 'green', 'orange', 'purple', 'pink', 'yellow']; - - Object.entries(topics).forEach(([topicName, subtopics], idx) => { - const card = document.createElement('div'); - card.className = 'wiki-card'; - card.dataset.color = colors[idx % colors.length]; - - // Get excerpt from first subtopic - const firstSub = subtopics[0]; - const excerpt = currentLang === 'en' && firstSub.wiki_en ? firstSub.wiki_en : (firstSub.wiki || ''); - const subtopicTitle = currentLang === 'en' && firstSub.subtopic_en ? firstSub.subtopic_en : (firstSub.subtopic || ''); - - card.innerHTML = ` -
${escapeHtml(topicName)}
-
${escapeHtml(excerpt.substring(0, 150))}${excerpt.length > 150 ? '...' : ''}
- - `; - - // Open modal on click - card.addEventListener('click', () => openWikiModal(topicName, subtopics)); - - grid.appendChild(card); - }); -} - -function openWikiModal(topicName, subtopics) { - // Create modal if not exists - let modalOverlay = document.getElementById('wiki-modal-overlay'); - if (!modalOverlay) { - modalOverlay = document.createElement('div'); - modalOverlay.id = 'wiki-modal-overlay'; - modalOverlay.className = 'modal-overlay'; - document.body.appendChild(modalOverlay); - } - - let html = ''; - modalOverlay.innerHTML = html; - modalOverlay.classList.add('active'); -} - -function closeWikiModal() { - const overlay = document.getElementById('wiki-modal-overlay'); - if (overlay) overlay.classList.remove('active'); -} - -function searchWiki(term) { - if (!term.trim()) { - renderWikiCards(wikiData); - return; - } - - const t = term.toLowerCase(); - const filtered = wikiData.filter(item => { - const topic = ((item.topic_en && currentLang === 'en') ? item.topic_en : (item.topic || '')) + - ' ' + ((item.subtopic_en && currentLang === 'en') ? item.subtopic_en : (item.subtopic || '')) + - ' ' + ((item.wiki_en && currentLang === 'en') ? item.wiki_en : (item.wiki || '')); - return topic.toLowerCase().includes(t); - }); - - renderWikiCards(filtered); -} - -// ======================================== -// COOKIES -// ======================================== -function getCookie(name) { - const localVal = localStorage.getItem('paraguay_' + name); - if (localVal) return localVal; - - const value = `; ${document.cookie}`; - const parts = value.split(`; ${name}=`); - if (parts.length === 2) { - return parts.pop().split(';').shift().replace(/^"|"$/g, ''); - } - return ''; -} - -function setCookie(name, value, days) { - const expires = new Date(); - expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000); - document.cookie = name + '=' + encodeURIComponent(value) + ';expires=' + expires.toUTCString() + ';path=/'; - localStorage.setItem('paraguay_' + name, value); -} - -// ======================================== -// UTILS -// ======================================== -function escapeHtml(text) { - if (!text) return ''; - const div = document.createElement('div'); - div.textContent = text; - return div.innerHTML; -} diff --git a/variations/neo-mirai/style.css b/variations/neo-mirai/style.css deleted file mode 100644 index cdf9cd8..0000000 --- a/variations/neo-mirai/style.css +++ /dev/null @@ -1,319 +0,0 @@ -/* Neo-Mirai — Cyberpunk/Futuristic Design */ -*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } -body { - font-family: 'Rajdhani', sans-serif; - background: #0a0a1a; - color: #e0e0e0; - overflow-x: hidden; - line-height: 1.6; -} - -/* Neon Grid Background */ -.neon-grid-bg { - position: fixed; top: 0; left: 0; width: 100%; height: 100%; - background-image: - linear-gradient(rgba(0,255,255,0.03) 1px, transparent 1px), - linear-gradient(90deg, rgba(0,255,255,0.03) 1px, transparent 1px); - background-size: 50px 50px; - pointer-events: none; z-index: 0; -} - -/* Scanline Effect */ -.scanline { - position: fixed; top: 0; left: 0; width: 100%; height: 100%; - background: repeating-linear-gradient( - 0deg, transparent, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px - ); - pointer-events: none; z-index: 9999; opacity: 0.4; -} - -/* Navigation */ -.nav { - position: fixed; top: 0; left: 0; right: 0; z-index: 1000; - background: rgba(10,10,26,0.95); - border-bottom: 1px solid rgba(0,255,255,0.2); - backdrop-filter: blur(10px); -} -.nav-container { - max-width: 1200px; margin: 0 auto; padding: 0 20px; - display: flex; align-items: center; justify-content: space-between; height: 70px; -} -.nav-brand { - display: flex; align-items: center; gap: 10px; text-decoration: none; - font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 1.2rem; color: #0ff; - text-shadow: 0 0 10px rgba(0,255,255,0.5); -} -.nav-title { letter-spacing: 2px; } -.accent { color: #f0f; text-shadow: 0 0 10px rgba(255,0,255,0.5); } -.nav-logo { font-size: 1.5rem; } - -/* Nav Links */ -.nav-menu { display: flex; align-items: center; gap: 25px; } -.nav-link { - color: #888; text-decoration: none; font-size: 1rem; font-weight: 500; - letter-spacing: 1px; transition: color 0.3s, text-shadow 0.3s; -} -.nav-link:hover { color: #0ff; text-shadow: 0 0 10px rgba(0,255,255,0.5); } - -/* Nav Actions */ -.nav-actions { display: flex; align-items: center; gap: 15px; } -.lang-select { display: flex; gap: 5px; } -.lang-btn { - background: none; border: 1px solid rgba(0,255,255,0.3); color: #888; - padding: 5px 12px; font-family: 'Orbitron', sans-serif; font-size: 0.8rem; - cursor: pointer; transition: all 0.3s; letter-spacing: 1px; -} -.lang-btn.active, .lang-btn:hover { color: #0ff; border-color: #0ff; box-shadow: 0 0 10px rgba(0,255,255,0.3); } - -/* Buttons */ -.btn { padding: 8px 20px; font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 1rem; cursor: pointer; transition: all 0.3s; letter-spacing: 1px; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; border: none; } -.btn-neon { - background: transparent; border: 1px solid #0ff; color: #0ff; - box-shadow: 0 0 5px rgba(0,255,255,0.3), inset 0 0 5px rgba(0,255,255,0.1); -} -.btn-neon:hover { - background: rgba(0,255,255,0.1); - box-shadow: 0 0 20px rgba(0,255,255,0.5), inset 0 0 10px rgba(0,255,255,0.2); - text-shadow: 0 0 10px #0ff; -} -.btn-neon-outline { background: transparent; border: 1px solid rgba(0,255,255,0.3); color: #0ff; } -.btn-neon-outline:hover { border-color: #0ff; background: rgba(0,255,255,0.1); } -.btn-telegram { background: #0088cc; border: none; color: white; padding: 8px 20px; font-family: 'Rajdhani', sans-serif; font-weight: 600; } -.btn-telegram:hover { background: #0099dd; } -.btn-block { display: block; width: 100%; text-align: center; } - -/* Hero */ -.hero { - min-height: 100vh; display: flex; align-items: center; justify-content: center; - text-align: center; position: relative; padding: 100px 20px 60px; - background: radial-gradient(ellipse at center, rgba(0,255,255,0.05) 0%, transparent 70%); -} -.hero-content { position: relative; z-index: 2; } -.neo-title { - font-family: 'Orbitron', sans-serif; font-size: 3.5rem; font-weight: 900; - color: #fff; letter-spacing: 4px; margin-bottom: 20px; - text-shadow: 0 0 20px rgba(0,255,255,0.5), 0 0 40px rgba(0,255,255,0.3); -} -.hero-subtitle { - font-size: 1.3rem; color: #aaa; max-width: 600px; margin: 0 auto 40px; - letter-spacing: 2px; -} -.neo-stats { display: flex; justify-content: center; gap: 60px; } -.neo-stat { - text-align: center; padding: 20px; - border: 1px solid rgba(0,255,255,0.2); border-radius: 10px; - background: rgba(0,255,255,0.02); - backdrop-filter: blur(5px); -} -.stat-number { - display: block; font-family: 'Orbitron', sans-serif; font-size: 2.5rem; - font-weight: 900; color: #0ff; text-shadow: 0 0 10px rgba(0,255,255,0.5); -} - -/* Sections */ -.section { padding: 80px 20px; position: relative; z-index: 1; } -.section-alt { background: rgba(0,255,255,0.02); } -.section-title { - font-family: 'Orbitron', sans-serif; font-size: 2rem; font-weight: 700; - color: #0ff; text-align: center; margin-bottom: 50px; letter-spacing: 3px; - text-shadow: 0 0 10px rgba(0,255,255,0.3); -} -.container { max-width: 1200px; margin: 0 auto; } - -/* About Cards */ -.about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 25px; } -.neo-card { - background: rgba(0,255,255,0.02); border: 1px solid rgba(0,255,255,0.15); - border-radius: 15px; padding: 30px; transition: all 0.3s; - backdrop-filter: blur(5px); -} -.neo-card:hover { - border-color: #0ff; box-shadow: 0 0 20px rgba(0,255,255,0.2); - transform: translateY(-5px); -} -.about-icon { font-size: 2.5rem; margin-bottom: 15px; } -.about-card h3 { - font-family: 'Orbitron', sans-serif; font-size: 1.1rem; color: #0ff; - margin-bottom: 10px; letter-spacing: 1px; -} -.about-card p { color: #aaa; font-size: 0.95rem; } - -/* Members */ -.search-bar { display: flex; align-items: center; max-width: 400px; margin: 0 auto 30px; position: relative; } -.search-icon { position: absolute; left: 15px; width: 20px; height: 20px; color: #555; } -.search-input { - width: 100%; padding: 12px 15px 12px 45px; background: rgba(0,255,255,0.05); - border: 1px solid rgba(0,255,255,0.2); border-radius: 8px; - color: #fff; font-family: 'Rajdhani', sans-serif; font-size: 1rem; -} -.search-input:focus { outline: none; border-color: #0ff; box-shadow: 0 0 10px rgba(0,255,255,0.3); } - -.members-grid { - display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); - gap: 20px; -} -.member-card { - display: flex; align-items: center; gap: 15px; padding: 20px; - background: rgba(0,255,255,0.02); border: 1px solid rgba(0,255,255,0.1); - border-radius: 10px; cursor: pointer; transition: all 0.3s; -} -.member-card:hover { border-color: #0ff; box-shadow: 0 0 15px rgba(0,255,255,0.2); } -.user-avatar { - width: 50px; height: 50px; border-radius: 50%; object-fit: cover; - border: 2px solid rgba(0,255,255,0.3); -} -.user-avatar-text { - width: 50px; height: 50px; border-radius: 50%; - background: rgba(0,255,255,0.1); color: #0ff; - display: flex; align-items: center; justify-content: center; - font-family: 'Orbitron', sans-serif; font-size: 1.5rem; font-weight: 700; -} -.member-info h4 { color: #0ff; font-family: 'Orbitron', sans-serif; font-size: 1rem; } -.member-company { color: #888; font-size: 0.85rem; } -.member-location, .member-posts { color: #aaa; font-size: 0.85rem; } -.rank-badge { - position: absolute; top: -8px; right: 0; font-size: 0.7rem; padding: 2px 8px; - border-radius: 10px; font-weight: 600; letter-spacing: 1px; -} -.rank-badge.rank-rookie { background: rgba(128,128,128,0.2); color: #888; } -.rank-badge.rank-beginner { background: rgba(0,255,0,0.2); color: #0f0; } -.rank-badge.rank-member { background: rgba(0,128,255,0.2); color: #08f; } -.rank-badge.rank-contributor { background: rgba(0,255,255,0.2); color: #0ff; } -.rank-badge.rank-veteran { background: rgba(255,0,255,0.2); color: #f0f; } -.rank-badge.rank-expert { background: rgba(255,200,0,0.2); color: #fc0; } -.rank-badge.rank-legend { background: rgba(255,0,0,0.2); color: #f44; } - -/* Wiki Grid */ -.wiki-grid { - display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); - gap: 20px; -} -.wiki-card { - padding: 25px; border-radius: 12px; cursor: pointer; - transition: all 0.3s; position: relative; overflow: hidden; -} -.wiki-card::before { - content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; -} -.wiki-card[data-color="blue"] { background: rgba(0,100,255,0.05); border: 1px solid rgba(0,100,255,0.2); } -.wiki-card[data-color="blue"]::before { background: #0064ff; } -.wiki-card[data-color="teal"] { background: rgba(0,200,200,0.05); border: 1px solid rgba(0,200,200,0.2); } -.wiki-card[data-color="teal"]::before { background: #00c8c8; } -.wiki-card[data-color="green"] { background: rgba(0,200,0,0.05); border: 1px solid rgba(0,200,0,0.2); } -.wiki-card[data-color="green"]::before { background: #00c800; } -.wiki-card[data-color="orange"] { background: rgba(255,150,0,0.05); border: 1px solid rgba(255,150,0,0.2); } -.wiki-card[data-color="orange"]::before { background: #ff9600; } -.wiki-card[data-color="purple"] { background: rgba(150,0,255,0.05); border: 1px solid rgba(150,0,255,0.2); } -.wiki-card[data-color="purple"]::before { background: #9600ff; } -.wiki-card[data-color="pink"] { background: rgba(255,0,150,0.05); border: 1px solid rgba(255,0,150,0.2); } -.wiki-card[data-color="pink"]::before { background: #ff0096; } -.wiki-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.3); } -.wiki-card-title { font-family: 'Orbitron', sans-serif; font-size: 1.1rem; color: #fff; margin-bottom: 10px; } -.wiki-card-excerpt { color: #888; font-size: 0.9rem; margin-bottom: 15px; } -.wiki-card-footer { display: flex; justify-content: space-between; font-size: 0.85rem; color: #aaa; } -.wiki-card-subtopic { color: #0ff; } -.no-results { color: #888; text-align: center; padding: 40px; } -.loading-text { color: #555; text-align: center; padding: 40px; font-style: italic; } - -/* Modal */ -.modal-overlay { - position: fixed; top: 0; left: 0; width: 100%; height: 100%; - background: rgba(0,0,0,0.8); backdrop-filter: blur(5px); - z-index: 2000; display: none; align-items: center; justify-content: center; -} -.modal-overlay.active { display: flex; } -.modal { - background: rgba(10,10,26,0.95); border: 1px solid rgba(0,255,255,0.3); - border-radius: 15px; padding: 40px; max-width: 500px; width: 90%; - box-shadow: 0 0 30px rgba(0,255,255,0.2); position: relative; -} -.modal-close { - position: absolute; top: 15px; right: 20px; background: none; border: none; - color: #0ff; font-size: 1.5rem; cursor: pointer; -} -.login-icon { font-size: 3rem; text-align: center; margin-bottom: 20px; } -.login-hint { color: #888; text-align: center; margin-bottom: 25px; font-size: 0.95rem; } -.form-group { margin-bottom: 15px; } -.form-input { - width: 100%; padding: 12px; background: rgba(0,255,255,0.05); - border: 1px solid rgba(0,255,255,0.2); border-radius: 8px; - color: #fff; font-family: 'Rajdhani', sans-serif; font-size: 1rem; -} -.form-input:focus { outline: none; border-color: #0ff; box-shadow: 0 0 10px rgba(0,255,255,0.3); } -.login-steps { display: none; } -.login-step.active { display: block; } -.login-step { display: none; } -.login-step.active { display: block; } - -/* Profile Modal */ -.profile-username { font-family: 'Orbitron', sans-serif; font-size: 1.3rem; color: #0ff; margin-bottom: 10px; } -.profile-rank { margin-bottom: 20px; } -.profile-edit-fields { max-height: 500px; overflow-y: auto; } - -/* User Detail Modal */ -.user-detail-modal { max-width: 600px; } -.user-detail-content { padding: 20px; } -.user-detail-avatar { - width: 80px; height: 80px; border-radius: 50%; margin: 0 auto 20px; - border: 2px solid #0ff; overflow: hidden; -} -.user-detail-header { text-align: center; margin-bottom: 20px; } -.user-detail-name-rank { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 10px; } -.user-detail-name-rank h2 { color: #0ff; font-family: 'Orbitron', sans-serif; } -.user-detail-fields { display: grid; gap: 10px; } -.detail-field { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(0,255,255,0.1); } -.detail-label { color: #888; font-size: 0.9rem; } -.detail-value { color: #0ff; font-size: 0.9rem; text-align: right; } -.user-detail-company { color: #aaa; } - -/* Telegram Banner */ -.telegram-banner { - background: rgba(0,136,204,0.1); border: 1px solid rgba(0,136,204,0.3); - padding: 20px; margin: 20px; border-radius: 10px; - display: flex; align-items: center; gap: 20px; flex-wrap: wrap; -} -.banner-icon { font-size: 2rem; } -.banner-text { flex: 1; } -.banner-text strong { color: #fff; } - -/* Newsletter */ -.newsletter-card { text-align: center; max-width: 400px; margin: 0 auto; } -.newsletter-icon { font-size: 3rem; margin-bottom: 20px; } -.newsletter-hint { color: #aaa; margin-bottom: 20px; } - -/* Footer */ -.footer { - background: rgba(0,0,0,0.3); border-top: 1px solid rgba(0,255,255,0.1); - padding: 40px 20px; text-align: center; position: relative; z-index: 1; -} -.footer-brand { margin-bottom: 20px; } -.footer-logo { font-size: 2rem; } -.footer-title { color: #0ff; font-family: 'Orbitron', sans-serif; margin-left: 10px; } -.footer-links { display: flex; justify-content: center; gap: 30px; margin-bottom: 20px; flex-wrap: wrap; } -.footer-links a { color: #888; text-decoration: none; transition: color 0.3s; letter-spacing: 1px; } -.footer-links a:hover { color: #0ff; } -.footer-bottom p { color: #555; margin: 5px 0; } -.footer-bottom a { color: #0ff; text-decoration: none; } -.footer-copy { font-size: 0.85rem; } - -/* Hide/Show */ -.hide-en { display: none; } -body[data-lang="en"] .hide-en { display: inline; } -body[data-lang="en"] .hide-de { display: none; } -.hidden { display: none !important; } - -/* Responsive */ -@media (max-width: 768px) { - .nav-menu { display: none; } - .nav-menu.open { display: flex; position: absolute; top: 70px; left: 0; right: 0; background: rgba(10,10,26,0.98); flex-direction: column; padding: 20px; gap: 15px; border-bottom: 1px solid rgba(0,255,255,0.2); } - .nav-toggle { display: block; background: none; border: none; cursor: pointer; display: flex; flex-direction: column; gap: 5px; } - .nav-toggle span { display: block; width: 25px; height: 2px; background: #0ff; } - .neo-title { font-size: 2rem; } - .neo-stats { gap: 15px; flex-wrap: wrap; } - .neo-stat { flex: 1; min-width: 120px; } - .stat-number { font-size: 1.5rem; } - .section-title { font-size: 1.5rem; } -} -@media (min-width: 769px) { - .nav-toggle { display: none; } -} \ No newline at end of file diff --git a/variations/wikipedia/index.html b/variations/wikipedia/index.html deleted file mode 100644 index 8f904ba..0000000 --- a/variations/wikipedia/index.html +++ /dev/null @@ -1,467 +0,0 @@ - - - - - - Paraguay SRL LLC — Community - - - - - - - - - - - - - - - - - - - - -
-
-
-

- Paraguay LLC & SRL Community - Paraguay LLC & SRL Community -

-

- Der Erfahrungsaustausch für deutsche und amerikanische Expats in Paraguay - The experience exchange for German and American expats in Paraguay -

-
-
- -- - Mitglieder - Members -
-
- -- - Beiträge - Posts -
-
- -- - Wiki-Artikel - Wiki Articles -
-
-
-
-
-
-
- - -
- -
- - -
- - -
-
-

- Über die Community - About the Community -

-
-
-
🏦
-

- Banken & Zahlungsverkehr - Banking & Payments -

-

- Erfahrungen mit paraguayischen und internationalen Banken, Konten, Überweisungen und Kreditkarten. - Experiences with Paraguayan and international banks, accounts, transfers and credit cards. -

-
-
-
⚖️
-

- Rechtliches - Legal Matters -

-

- Gesellschaftsrecht, Verträge, Steuern, Compliance und Rechtsprechung in Paraguay. - Corporate law, contracts, taxes, compliance and jurisprudence in Paraguay. -

-
-
-
📊
-

- Steuern & Buchhaltung - Taxes & Accounting -

-

- Steuerberatung, Buchhaltungssysteme, Jahresabschlüsse und internationale Steuerplanung. - Tax advice, accounting systems, annual statements and international tax planning. -

-
-
-
💻
-

- ERP-Systeme - ERP Systems -

-

- Erfahrungen mit verschiedenen ERP-Systemen, Software-Lösungen und digitalem Management. - Experiences with various ERP systems, software solutions and digital management. -

-
-
-
-
- - -
-
-

- Mitglieder - Members -

- -
-

- Lade Mitglieder... - Loading members... -

-
-
-
- - -
-
-

- Wiki - Wiki -

- -
-

- Lade Wiki... - Loading wiki... -

-
-
-
- - - - -
- - - - - - - diff --git a/variations/wikipedia/main.js b/variations/wikipedia/main.js deleted file mode 100644 index 667dad7..0000000 --- a/variations/wikipedia/main.js +++ /dev/null @@ -1,637 +0,0 @@ -// ======================================== -// Paraguay LLC & SRL — Main JS -// ======================================== - -const API_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/login'; -const NEWSLETTER_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/newsletter'; -const USER_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/user'; -const PROFILE_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/profile'; -const WIKI_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/wiki'; -const COMMUNITY_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/community'; - -let currentLang = 'de'; - -document.addEventListener('DOMContentLoaded', () => { - currentLang = document.body.dataset.lang || 'de'; - checkSession(); - loadCommunityStats(); - - // Smooth scroll nav links - document.querySelectorAll('.nav-link').forEach(link => { - link.addEventListener('click', (e) => { - e.preventDefault(); - const target = document.querySelector(link.getAttribute('href')); - if (target) { - target.scrollIntoView({ behavior: 'smooth' }); - } - // Close mobile nav - document.getElementById('nav-menu').classList.remove('open'); - }); - }); - - // Mobile nav toggle - const navToggle = document.getElementById('nav-toggle'); - const navMenu = document.getElementById('nav-menu'); - if (navToggle) { - navToggle.addEventListener('click', () => { - navMenu.classList.toggle('open'); - }); - } - - // Navbar scroll effect - window.addEventListener('scroll', () => { - const nav = document.getElementById('main-nav'); - if (nav) { - nav.classList.toggle('scrolled', window.scrollY > 20); - } - }); - - // Language toggle - document.querySelectorAll('.lang-btn').forEach(btn => { - btn.addEventListener('click', () => { - const lang = btn.dataset.lang; - setLanguage(lang); - // Reload content in new language - if (isLoggedIn) { - if (document.querySelector('.notebook') || document.getElementById('members-list')) loadUsers(); - if (document.getElementById('wiki-grid')) loadWiki(); - } - }); - }); - - // Member search - const memberSearch = document.getElementById('member-search'); - if (memberSearch) { - memberSearch.addEventListener('input', (e) => { - filterMembers(e.target.value); - }); - } - - // Wiki search - const wikiSearch = document.getElementById('wiki-search'); - if (wikiSearch) { - wikiSearch.addEventListener('input', (e) => { - searchWiki(e.target.value); - }); - } - - // Close modals on overlay click - document.querySelectorAll('.modal-overlay').forEach(overlay => { - overlay.addEventListener('click', (e) => { - if (e.target === overlay) { - overlay.classList.remove('active'); - } - }); - }); - - // Close modals on Escape - document.addEventListener('keydown', (e) => { - if (e.key === 'Escape') { - document.querySelectorAll('.modal-overlay.active').forEach(m => m.classList.remove('active')); - } - }); - - // Login button - const loginBtn = document.getElementById('login-btn'); - if (loginBtn) { - loginBtn.addEventListener('click', () => { - openLoginModal(); - }); - } -}); - -// ======================================== -// LANGUAGE -// ======================================== -function setLanguage(lang) { - currentLang = lang; - document.body.dataset.lang = lang; - document.querySelectorAll('.lang-btn').forEach(b => { - b.classList.toggle('active', b.dataset.lang === lang); - }); -} - -function isDE() { - return currentLang !== 'en'; -} - -// ======================================== -// COMMUNITY STATS -// ======================================== -async function loadCommunityStats() { - try { - const response = await fetch(COMMUNITY_URL); - if (!response.ok) throw new Error('Failed to fetch'); - const data = await response.json(); - - if (data.users !== undefined) { - animateCounter('stat-members', data.users); - } - if (data.topics !== undefined) { - document.getElementById('stat-wiki').textContent = data.topics; - } - } catch (error) { - console.error('Failed to load community stats:', error); - } -} - -function animateCounter(elementId, targetNumber) { - const element = document.getElementById(elementId); - if (!element) return; - - let current = 0; - const duration = 1500; // ms - const steps = 40; - const increment = targetNumber / steps; - const stepTime = duration / steps; - - const timer = setInterval(() => { - current += increment; - if (current >= targetNumber) { - element.textContent = targetNumber; - clearInterval(timer); - } else { - element.textContent = Math.floor(current); - } - }, stepTime); -} - -// ======================================== -// AUTH / SESSION -// ======================================== -let isLoggedIn = false; - -function isSessionValid() { - const sid = getCookie('sessionid'); - return sid.length > 0; -} - -function checkSession() { - isLoggedIn = isSessionValid(); - - if (isLoggedIn) { - document.body.dataset.loggedIn = 'true'; - document.getElementById('login-btn').style.display = 'none'; - document.getElementById('logout-btn').style.display = 'inline-flex'; - document.getElementById('profile-btn').style.display = 'inline-flex'; - document.getElementById('telegram-banner').style.display = 'none'; - document.getElementById('main-content').style.display = 'block'; - document.getElementById('newsletter-section').style.display = 'block'; - loadUsers(); - loadWiki(); - } else { - document.body.dataset.loggedIn = 'false'; - document.getElementById('login-btn').style.display = 'inline-flex'; - document.getElementById('logout-btn').style.display = 'none'; - document.getElementById('profile-btn').style.display = 'none'; - document.getElementById('telegram-banner').style.display = 'block'; - document.getElementById('main-content').style.display = 'none'; - document.getElementById('newsletter-section').style.display = 'none'; - } -} - -// ======================================== -// LOGIN MODAL -// ======================================== -function openLoginModal() { - document.getElementById('login-modal-overlay').classList.add('active'); - // Reset to step 1 - document.querySelectorAll('.login-step').forEach(s => s.classList.remove('active')); - document.getElementById('login-step-1').classList.add('active'); - document.getElementById('telegram-user').value = ''; - document.getElementById('verification-code').value = ''; -} - -function closeLoginModal() { - document.getElementById('login-modal-overlay').classList.remove('active'); -} - -// ======================================== -// PROFILE MODAL -// ======================================== -function openProfileModal() { - const sid = getCookie('sessionid'); - if (!sid) { alert('Bitte anmelden.'); return; } - - fetch(PROFILE_URL + '?sessionid=' + encodeURIComponent(sid)) - .then(r => r.json()) - .then(user => { - document.getElementById('profile-username-display').textContent = user.username || ''; - const rank = getRank(user.posts || 0); - const badge = document.getElementById('profile-rank-badge'); - badge.innerHTML = `${rank.emoji} ${rank.title}`; - - document.getElementById('profile-company').value = user.company || ''; - document.getElementById('profile-email').value = user.email || ''; - document.getElementById('profile-homepage').value = user.homepage || ''; - document.getElementById('profile-image').value = user.image || ''; - document.getElementById('profile-location').value = user.location || ''; - document.getElementById('profile-description').value = user.Description || ''; - document.getElementById('profile-publish').checked = true; - - document.getElementById('profile-modal-overlay').classList.add('active'); - }) - .catch(() => alert('Fehler beim Laden des Profils.')); -} - -function closeProfileModal() { - document.getElementById('profile-modal-overlay').classList.remove('active'); -} - -function saveProfile() { - const sid = getCookie('sessionid'); - fetch(PROFILE_URL, { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ - username: document.getElementById('profile-username-display').textContent, - company: document.getElementById('profile-company').value.trim(), - email: document.getElementById('profile-email').value, - homepage: document.getElementById('profile-homepage').value, - image: document.getElementById('profile-image').value, - location: document.getElementById('profile-location').value, - Description: document.getElementById('profile-description').value, - sessionid: sid, - publish: document.getElementById('profile-publish').checked - }) - }) - .then(r => r.ok ? alert('Profil gespeichert!') : alert('Fehler beim Speichern.')) - .catch(() => alert('Fehler bei der Verbindung.')); -} - -// ======================================== -// USER DETAIL MODAL -// ======================================== -function openUserDetailModal(user) { - const avatar = document.getElementById('user-detail-avatar'); - if (user.image) { - avatar.innerHTML = `${user.username}`; - } else { - avatar.innerHTML = `${(user.username || '?').charAt(0).toUpperCase()}`; - } - - document.getElementById('user-detail-initial').textContent = ''; - document.getElementById('user-detail-username').textContent = '@' + (user.username || 'Unknown'); - - const rank = getRank(user.posts || 0); - document.getElementById('user-detail-rank-badge').className = `rank-badge rank-${rank.level}`; - document.getElementById('user-detail-rank-badge').textContent = rank.emoji + ' ' + rank.title; - - document.getElementById('user-detail-company').textContent = user.company || ''; - - const emailEl = document.getElementById('user-detail-email'); - emailEl.innerHTML = user.email ? `${user.email}` : '-'; - - const hpEl = document.getElementById('user-detail-homepage'); - const hp = user.homepage || ''; - hpEl.innerHTML = hp ? `${hp}` : '-'; - - document.getElementById('user-detail-location').textContent = user.location || '-'; - document.getElementById('user-detail-description').innerHTML = (user.Description || '-').replace(/\n/g, '
'); - - document.getElementById('user-detail-modal-overlay').classList.add('active'); -} - -function closeUserDetailModal() { - document.getElementById('user-detail-modal-overlay').classList.remove('active'); -} - -// ======================================== -// LOGIN FLOW -// ======================================== -function sendTelegramUser() { - const user = document.getElementById('telegram-user').value.trim(); - if (!user) { alert('Bitte geben Sie einen Telegram-Nutzernamen ein.'); return; } - - const btn = event.target; - btn.disabled = true; - btn.textContent = isDE() ? 'Sende...' : 'Sending...'; - - fetch(API_URL, { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ username: user }) - }) - .then(r => r.json()) - .then(data => { - if (data.sessionid) { - setCookie('sessionid', data.sessionid, 1); - document.getElementById('login-step-1').classList.remove('active'); - document.getElementById('login-step-3').classList.add('active'); - } else if (data.status === 'code send') { - document.getElementById('login-step-1').classList.remove('active'); - document.getElementById('login-step-2').classList.add('active'); - } else { - alert(isDE() ? 'Benutzername nicht gefunden. Bitte über Telegram Bot anmelden.' : 'Username not found. Please sign up via Telegram bot.'); - } - }) - .catch(() => { - btn.disabled = false; - alert(isDE() ? 'Verbindungsfehler' : 'Connection error'); - }); -} - -function verifyCode() { - const code = document.getElementById('verification-code').value.trim(); - if (!code) { alert('Bitte geben Sie den Code ein.'); return; } - - fetch(API_URL, { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ - username: document.getElementById('telegram-user').value, - code: code, - sessionid: getCookie('sessionid') - }) - }) - .then(r => r.json()) - .then(data => { - if (data.sessionid) { - setCookie('sessionid', data.sessionid, 1); - checkSession(); - closeLoginModal(); - } else { - alert(isDE() ? 'Ungültiger Code' : 'Invalid code'); - } - }) - .catch(() => alert(isDE() ? 'Verbindungsfehler' : 'Connection error')); -} - -function submitLoginData() { - const name = document.getElementById('full-name').value.trim(); - const llc = document.getElementById('llc-name').value.trim(); - if (!name || !llc) { alert(isDE() ? 'Bitte Name und LLC eintragen' : 'Please enter name and LLC'); return; } - - fetch(API_URL, { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ - username: document.getElementById('telegram-user').value, - name: name, - llc: llc - }) - }) - .then(r => r.json()) - .then(data => { - if (data.sessionid) { - setCookie('sessionid', data.sessionid, 1); - checkSession(); - closeLoginModal(); - } else { - alert(isDE() ? 'Registrierung fehlgeschlagen' : 'Registration failed'); - } - }) - .catch(() => alert(isDE() ? 'Verbindungsfehler' : 'Connection error')); -} - -function logout() { - setCookie('sessionid', '', -1); - checkSession(); -} - -// ======================================== -// NEWSLETTER -// ======================================== -function subscribeNewsletter() { - const email = document.getElementById('newsletter-email').value.trim(); - if (!email) { alert(isDE() ? 'Bitte E-Mail eingeben' : 'Please enter email'); return; } - - fetch(NEWSLETTER_URL, { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ email: email }) - }) - .then(r => { - if (r.ok) { - document.getElementById('newsletter-form').classList.add('hidden'); - document.getElementById('newsletter-success').classList.remove('hidden'); - } else { - alert(isDE() ? 'Fehler beim Abonnieren' : 'Error subscribing'); - } - }) - .catch(() => alert(isDE() ? 'Verbindungsfehler' : 'Connection error')); -} - -// ======================================== -// USERS / MEMBERS -// ======================================== -async function loadUsers() { - try { - const response = await fetch(USER_URL); - if (!response.ok) throw new Error('Failed to fetch'); - const data = await response.json(); - const container = document.getElementById('members-list'); - - if (data.data && Array.isArray(data.data)) { - container.innerHTML = ''; - container.style.display = 'grid'; - - data.data.forEach(user => { - const card = createMemberCard(user); - container.appendChild(card); - }); - - // Update stats will be handled by loadCommunityStats - } else { - container.innerHTML = '

' + (isDE() ? 'Keine Mitglieder gefunden' : 'No members found') + '

'; - } - } catch (error) { - const container = document.getElementById('members-list'); - container.innerHTML = '

' + (isDE() ? 'Fehler beim Laden' : 'Error loading') + '

'; - } -} - -function createMemberCard(user) { - const card = document.createElement('div'); - card.className = 'member-card'; - - const rank = getRank(user.posts || 0); - const avatarContent = user.image - ? `${user.username}` - : (user.username || '?').charAt(0).toUpperCase(); - - card.innerHTML = ` -
${avatarContent}
-
-

${user.username || 'N/A'}

-

${user.company || ''}

- ${user.location ? `

📍 ${user.location}

` : ''} - ${user.posts ? `

${user.posts} ${isDE() ? 'Beiträge' : 'posts'}

` : ''} - ${rank.emoji} ${rank.title} -
- `; - - card.addEventListener('click', () => openUserDetailModal(user)); - return card; -} - -function filterMembers(term) { - const cards = document.querySelectorAll('.member-card'); - const t = term.toLowerCase(); - cards.forEach(card => { - const text = card.textContent.toLowerCase(); - card.style.display = text.includes(t) ? 'flex' : 'none'; - }); -} - -// ======================================== -// RANKS -// ======================================== -function getRank(posts) { - if (posts >= 500) return { level: 'legend', title: isDE() ? 'Legende' : 'Legend', emoji: '👑' }; - if (posts >= 200) return { level: 'expert', title: isDE() ? 'Experte' : 'Expert', emoji: '🏆' }; - if (posts >= 100) return { level: 'veteran', title: isDE() ? 'Veteran' : 'Veteran', emoji: '💎' }; - if (posts >= 50) return { level: 'contributor', title: isDE() ? 'Mitwirkender' : 'Contributor', emoji: '⭐' }; - if (posts >= 30) return { level: 'member', title: isDE() ? 'Mitglied' : 'Member', emoji: '🌳' }; - if (posts >= 5) return { level: 'beginner', title: isDE() ? 'Einsteiger' : 'Beginner', emoji: '🌿' }; - return { level: 'rookie', title: isDE() ? 'Anfänger' : 'Rookie', emoji: '🌱' }; -} - -// ======================================== -// WIKI -// ======================================== -let wikiData = []; - -async function loadWiki() { - try { - const response = await fetch(WIKI_URL); - if (!response.ok) throw new Error('Failed to fetch'); - const result = await response.json(); - - if (result.data && Array.isArray(result.data)) { - wikiData = result.data; - renderWikiCards(wikiData); - - // Wiki count will be loaded from community webhook - } else { - document.getElementById('wiki-grid').innerHTML = '

' + (isDE() ? 'Keine Wiki-Daten' : 'No wiki data') + '

'; - } - } catch (error) { - document.getElementById('wiki-grid').innerHTML = '

' + (isDE() ? 'Fehler beim Laden' : 'Error loading') + '

'; - } -} - -function renderWikiCards(data) { - const grid = document.getElementById('wiki-grid'); - grid.innerHTML = ''; - - if (data.length === 0) { - grid.innerHTML = '

' + (isDE() ? 'Keine Ergebnisse gefunden' : 'No results found') + '

'; - return; - } - - // Group by topic - const topics = {}; - data.forEach(item => { - const topicKey = (item.topic_en && currentLang === 'en') ? item.topic_en : (item.topic || 'Unknown'); - if (!topics[topicKey]) topics[topicKey] = []; - topics[topicKey].push(item); - }); - - const colors = ['blue', 'teal', 'green', 'orange', 'purple', 'pink', 'yellow']; - - Object.entries(topics).forEach(([topicName, subtopics], idx) => { - const card = document.createElement('div'); - card.className = 'wiki-card'; - card.dataset.color = colors[idx % colors.length]; - - // Get excerpt from first subtopic - const firstSub = subtopics[0]; - const excerpt = currentLang === 'en' && firstSub.wiki_en ? firstSub.wiki_en : (firstSub.wiki || ''); - const subtopicTitle = currentLang === 'en' && firstSub.subtopic_en ? firstSub.subtopic_en : (firstSub.subtopic || ''); - - card.innerHTML = ` -
${escapeHtml(topicName)}
-
${escapeHtml(excerpt.substring(0, 150))}${excerpt.length > 150 ? '...' : ''}
- - `; - - // Open modal on click - card.addEventListener('click', () => openWikiModal(topicName, subtopics)); - - grid.appendChild(card); - }); -} - -function openWikiModal(topicName, subtopics) { - // Create modal if not exists - let modalOverlay = document.getElementById('wiki-modal-overlay'); - if (!modalOverlay) { - modalOverlay = document.createElement('div'); - modalOverlay.id = 'wiki-modal-overlay'; - modalOverlay.className = 'modal-overlay'; - document.body.appendChild(modalOverlay); - } - - let html = ''; - modalOverlay.innerHTML = html; - modalOverlay.classList.add('active'); -} - -function closeWikiModal() { - const overlay = document.getElementById('wiki-modal-overlay'); - if (overlay) overlay.classList.remove('active'); -} - -function searchWiki(term) { - if (!term.trim()) { - renderWikiCards(wikiData); - return; - } - - const t = term.toLowerCase(); - const filtered = wikiData.filter(item => { - const topic = ((item.topic_en && currentLang === 'en') ? item.topic_en : (item.topic || '')) + - ' ' + ((item.subtopic_en && currentLang === 'en') ? item.subtopic_en : (item.subtopic || '')) + - ' ' + ((item.wiki_en && currentLang === 'en') ? item.wiki_en : (item.wiki || '')); - return topic.toLowerCase().includes(t); - }); - - renderWikiCards(filtered); -} - -// ======================================== -// COOKIES -// ======================================== -function getCookie(name) { - const localVal = localStorage.getItem('paraguay_' + name); - if (localVal) return localVal; - - const value = `; ${document.cookie}`; - const parts = value.split(`; ${name}=`); - if (parts.length === 2) { - return parts.pop().split(';').shift().replace(/^"|"$/g, ''); - } - return ''; -} - -function setCookie(name, value, days) { - const expires = new Date(); - expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000); - document.cookie = name + '=' + encodeURIComponent(value) + ';expires=' + expires.toUTCString() + ';path=/'; - localStorage.setItem('paraguay_' + name, value); -} - -// ======================================== -// UTILS -// ======================================== -function escapeHtml(text) { - if (!text) return ''; - const div = document.createElement('div'); - div.textContent = text; - return div.innerHTML; -} diff --git a/variations/wikipedia/style.css b/variations/wikipedia/style.css deleted file mode 100644 index 0ffb0c9..0000000 --- a/variations/wikipedia/style.css +++ /dev/null @@ -1,396 +0,0 @@ -/* Wikipedia Style — Clean, Content-First */ -*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } -body { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; - background: #f8f9fa; - color: #202122; - line-height: 1.6; - font-size: 14px; -} - -/* Navigation */ -.nav { - background: #fff; - border-bottom: 1px solid #a2a9b1; - padding: 10px 20px; - position: sticky; - top: 0; - z-index: 1000; -} -.nav-container { - max-width: 1200px; - margin: 0 auto; - display: flex; - align-items: center; - justify-content: space-between; -} -.nav-brand { - display: flex; - align-items: center; - gap: 10px; - text-decoration: none; - color: #202122; - font-size: 1.1rem; - font-weight: 600; -} -.nav-logo { font-size: 1.8rem; } -.nav-menu { display: flex; gap: 20px; align-items: center; } -.nav-link { - color: #0645ad; - text-decoration: none; - font-size: 14px; - padding: 5px 10px; -} -.nav-link:hover { text-decoration: underline; } -.nav-actions { display: flex; gap: 10px; align-items: center; } -.lang-select { display: flex; gap: 5px; } -.lang-btn { - background: #f8f9fa; - border: 1px solid #a2a9b1; - padding: 4px 12px; - font-size: 12px; - cursor: pointer; - border-radius: 3px; -} -.lang-btn.active { background: #36c; color: #fff; border-color: #36c; } - -/* Buttons */ -.btn { - padding: 6px 16px; - font-size: 13px; - border-radius: 3px; - cursor: pointer; - text-decoration: none; - display: inline-block; - font-weight: 500; - border: 1px solid; -} -.btn-primary { background: #36c; color: #fff; border-color: #36c; } -.btn-primary:hover { background: #2a4b8d; } -.btn-outline { - background: #f8f9fa; - color: #202122; - border-color: #a2a9b1; -} -.btn-outline:hover { background: #eaecf0; } -.btn-block { display: block; width: 100%; text-align: center; } -.btn-telegram { - background: #0088cc; - color: #fff; - border-color: #0088cc; -} - -/* Hero */ -.hero { - background: #fff; - border-bottom: 1px solid #a2a9b1; - padding: 40px 20px; - text-align: center; -} -.hero-title { - font-size: 2rem; - font-weight: 400; - margin-bottom: 10px; - color: #202122; -} -.hero-subtitle { - color: #72777d; - margin-bottom: 30px; - font-size: 15px; -} -.hero-stats { display: flex; justify-content: center; gap: 40px; } -.stat { text-align: center; } -.stat-number { - display: block; - font-size: 1.8rem; - font-weight: 600; - color: #36c; -} - -/* Sections */ -.section { - background: #fff; - border: 1px solid #a2a9b1; - border-radius: 4px; - padding: 25px; - margin: 20px auto; - max-width: 1200px; -} -.section-alt { background: #f8f9fa; border: none; } -.section-title { - font-size: 1.5rem; - font-weight: 400; - border-bottom: 1px solid #a2a9b1; - padding-bottom: 10px; - margin-bottom: 20px; - color: #202122; -} -.container { max-width: 100%; } - -/* About */ -.about-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - gap: 20px; -} -.about-card { - padding: 15px; - border: 1px solid #eaecf0; - border-radius: 4px; - background: #fff; -} -.about-icon { font-size: 2rem; margin-bottom: 10px; } -.about-card h3 { - font-size: 1rem; - margin-bottom: 8px; - color: #0645ad; -} -.about-card p { font-size: 13px; color: #555; } - -/* Search */ -.search-bar { - display: flex; - max-width: 400px; - margin-bottom: 20px; -} -.search-icon { - position: absolute; - left: 10px; - width: 16px; - height: 16px; - color: #72777d; -} -.search-input { - width: 100%; - padding: 8px 10px; - border: 1px solid #a2a9b1; - border-radius: 2px; - font-size: 14px; -} -.search-input:focus { border-color: #36c; outline: none; } - -/* Members Grid */ -.members-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); - gap: 10px; -} -.member-card { - display: flex; - align-items: center; - gap: 10px; - padding: 10px; - border: 1px solid #eaecf0; - border-radius: 3px; - cursor: pointer; - background: #fff; - transition: background 0.2s; -} -.member-card:hover { background: #eaecf0; } -.user-avatar { - width: 40px; - height: 40px; - border-radius: 50%; - object-fit: cover; - border: 1px solid #eaecf0; -} -.user-avatar-text { - width: 40px; - height: 40px; - border-radius: 50%; - background: #eaecf0; - color: #72777d; - display: flex; - align-items: center; - justify-content: center; - font-size: 1.2rem; -} -.member-info h4 { font-size: 14px; color: #0645ad; } -.member-company { font-size: 12px; color: #72777d; } -.member-location, .member-posts { font-size: 12px; color: #555; } -.rank-badge { - font-size: 11px; - padding: 2px 8px; - border-radius: 10px; - position: absolute; - top: -5px; - right: 0; -} -.rank-badge.rank-rookie { background: #eee; color: #666; } -.rank-badge.rank-beginner { background: #e6f3e6; color: #0a0; } -.rank-badge.rank-member { background: #e6f0ff; color: #0066cc; } -.rank-badge.rank-contributor { background: #e6f9f9; color: #009999; } -.rank-badge.rank-veteran { background: #f9e6ff; color: #990099; } -.rank-badge.rank-expert { background: #fff3e6; color: #cc8800; } -.rank-badge.rank-legend { background: #ffe6e6; color: #cc0000; } - -/* Wiki Cards */ -.wiki-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); - gap: 10px; -} -.wiki-card { - padding: 15px; - border: 1px solid #eaecf0; - border-left: 4px solid #36c; - background: #fff; - cursor: pointer; - transition: background 0.2s; - border-radius: 0 3px 3px 0; -} -.wiki-card:hover { background: #eaecf0; } -.wiki-card-title { font-size: 15px; color: #0645ad; margin-bottom: 5px; } -.wiki-card-excerpt { font-size: 13px; color: #72777d; margin-bottom: 8px; } -.wiki-card-footer { display: flex; justify-content: space-between; font-size: 12px; color: #555; } -.wiki-card-subtopic { color: #0645ad; } -.no-results { padding: 20px; text-align: center; color: #72777d; } -.loading-text { padding: 20px; text-align: center; color: #72777d; font-style: italic; } - -/* Modal */ -.modal-overlay { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(255,255,255,0.95); - z-index: 2000; - display: none; - align-items: center; - justify-content: center; -} -.modal-overlay.active { display: flex; } -.modal { - background: #fff; - border: 1px solid #a2a9b1; - border-radius: 4px; - padding: 25px; - max-width: 500px; - width: 90%; - box-shadow: 0 2px 10px rgba(0,0,0,0.1); - position: relative; -} -.modal-close { - position: absolute; - top: 10px; - right: 15px; - background: none; - border: none; - font-size: 20px; - cursor: pointer; - color: #72777d; -} -.login-icon { font-size: 3rem; text-align: center; margin-bottom: 15px; } -.login-hint { color: #72777d; text-align: center; margin-bottom: 15px; font-size: 13px; } -.form-group { margin-bottom: 12px; } -.form-input { - width: 100%; - padding: 8px; - border: 1px solid #a2a9b1; - border-radius: 2px; - font-size: 14px; - box-sizing: border-box; -} -.form-input:focus { border-color: #36c; outline: none; } -.login-step { display: none; } -.login-step.active { display: block; } - -/* Profile & Detail Modals */ -.profile-username { font-size: 1.2rem; margin-bottom: 10px; } -.profile-rank { margin-bottom: 15px; } -.user-detail-modal { max-width: 600px; } -.user-detail-content { padding: 15px; } -.user-detail-avatar { - width: 60px; - height: 60px; - border-radius: 50%; - margin: 0 auto 15px; - border: 1px solid #a2a9b1; - overflow: hidden; -} -.user-detail-header { text-align: center; margin-bottom: 15px; } -.user-detail-name-rank { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 10px; } -.user-detail-name-rank h2 { font-size: 1.2rem; } -.user-detail-fields { display: grid; gap: 8px; } -.detail-field { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #eaecf0; } -.detail-label { color: #72777d; font-size: 13px; } -.detail-value { color: #202122; font-size: 13px; text-align: right; } -.user-detail-company { color: #555; text-align: center; } - -/* Telegram Banner */ -.telegram-banner { - background: #f0f8ff; - border: 1px solid #a2a9b1; - padding: 15px 20px; - margin: 20px auto; - max-width: 1200px; - border-radius: 4px; - display: flex; - align-items: center; - gap: 15px; -} -.banner-icon { font-size: 1.5rem; } -.banner-text strong { color: #202122; } - -/* Newsletter */ -.newsletter-card { text-align: center; max-width: 400px; margin: 0 auto; } -.newsletter-icon { font-size: 2.5rem; margin-bottom: 15px; } -.newsletter-hint { color: #72777d; margin-bottom: 15px; font-size: 13px; } - -/* Footer */ -.footer { - background: #f8f9fa; - border-top: 1px solid #a2a9b1; - padding: 25px 20px; - text-align: center; - margin-top: 40px; -} -.footer-brand { margin-bottom: 15px; } -.footer-logo { font-size: 1.5rem; } -.footer-title { color: #202122; margin-left: 10px; font-size: 1rem; } -.footer-links { display: flex; justify-content: center; gap: 20px; margin-bottom: 15px; flex-wrap: wrap; } -.footer-links a { color: #0645ad; text-decoration: none; font-size: 13px; } -.footer-links a:hover { text-decoration: underline; } -.footer-bottom p { color: #72777d; margin: 5px 0; font-size: 12px; } -.footer-bottom a { color: #0645ad; } -.footer-copy { font-size: 12px; } - -/* Hide/Show */ -.hide-en { display: none; } -body[data-lang="en"] .hide-en { display: inline; } -body[data-lang="en"] .hide-de { display: none; } -.hidden { display: none !important; } - -/* Responsive */ -@media (max-width: 768px) { - .nav-menu { display: none; } - .nav-menu.open { - display: flex; - position: absolute; - top: 100%; - left: 0; - right: 0; - background: #fff; - flex-direction: column; - padding: 15px; - gap: 10px; - border-bottom: 1px solid #a2a9b1; - } - .nav-toggle { - display: flex; - flex-direction: column; - gap: 4px; - background: none; - border: none; - cursor: pointer; - } - .nav-toggle span { display: block; width: 20px; height: 2px; background: #202122; } - .hero-stats { gap: 20px; flex-wrap: wrap; } - .stat-number { font-size: 1.5rem; } - .about-grid { grid-template-columns: 1fr; } - .wiki-grid { grid-template-columns: 1fr; } -} -@media (min-width: 769px) { - .nav-toggle { display: none; } -} \ No newline at end of file