diff --git a/Website/src/assets/style-prof.css b/Website/src/assets/style-prof.css index 76160a3..13c3e1a 100644 --- a/Website/src/assets/style-prof.css +++ b/Website/src/assets/style-prof.css @@ -1,84 +1,347 @@ + *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } + + :root { + --hero-bg: #0b2218; + --accent: #1daa6b; + --accent-glow:#3dd68c; + --accent-soft:#e6f9f0; + --accent-mid: #0f8a55; + --text-dark: #0c1f14; + --text-muted: #4d7060; + --border: #d4e8db; + --surface: #ffffff; + --bg-light: #f3f9f5; + --dark-sec: #0c1f14; + --radius: 18px; + --ff-orange: #ff6611; + } + + html { scroll-behavior: smooth; } body { - font-family: 'Segoe UI', Roboto, sans-serif; - max-width: 1000px; - margin: 0 auto; - padding: 20px; - background: #f9fafc; - color: #1e2a3a; - line-height: 1.5; - } - h1 { - font-size: 2rem; - margin-bottom: 0.2rem; - } - .logo { - width: 64px; - vertical-align: middle; - margin-right: 10px; - } - .sub { - color: #4a627a; - margin-bottom: 2rem; - } - hr { - margin: 2rem 0; - border: none; - border-top: 1px solid #e2e8f0; - } - .feature { - display: flex; - gap: 30px; - flex-wrap: wrap; - margin: 2rem 0; - align-items: center; - } - .feature img { - width: 280px; - border-radius: 12px; - box-shadow: 0 2px 8px rgba(0,0,0,0.1); - background: #eef2f7; - } - .feature-text { - flex: 1; - } - .feature-text h3 { - margin-top: 0; - color: #2c4e7a; - } - .install { - background: #eef2f7; - padding: 1.2rem; - border-radius: 12px; - margin: 1.5rem 0; + font-family: 'Instrument Sans', sans-serif; + color: var(--text-dark); + background: var(--surface); + overflow-x: hidden; + line-height: 1.6; + } + + nav { + position: fixed; top: 0; left: 0; right: 0; z-index: 200; + height: 64px; display: flex; align-items: center; + justify-content: space-between; padding: 0 48px; + transition: background 0.3s, border-color 0.3s; + } + nav.scrolled { + background: rgba(11, 34, 24, 0.85); + backdrop-filter: blur(18px); + border-bottom: 1px solid rgba(255,255,255,0.07); + } + .nav-brand { + display: flex; align-items: center; gap: 10px; + font-family: 'Cabinet Grotesk', sans-serif; + font-weight: 800; font-size: 1.1rem; + color: white; text-decoration: none; + } + .nav-brand img { width: 30px; border-radius: 8px; } + .nav-badge { + background: rgba(29,170,107,0.25); + color: var(--accent-glow); + font-size: 0.68rem; font-weight: 700; + letter-spacing: 0.06em; text-transform: uppercase; + padding: 3px 9px; border-radius: 100px; + border: 1px solid rgba(61,214,140,0.3); + } + .nav-links { display: flex; align-items: center; gap: 6px; } + .nav-links a { + color: rgba(255,255,255,0.6); + text-decoration: none; font-size: 0.9rem; font-weight: 500; + padding: 7px 16px; border-radius: 100px; + transition: background 0.2s, color 0.2s; + } + .nav-links a:hover { color: white; background: rgba(255,255,255,0.08); } + .nav-dl { + background: var(--accent) !important; + color: white !important; font-weight: 600 !important; + } + .nav-dl:hover { background: var(--accent-mid) !important; } + + .hero { + min-height: 100vh; + background: var(--hero-bg); + background-image: + radial-gradient(ellipse 90% 70% at 50% -15%, #0f5c35 0%, transparent 65%), + radial-gradient(ellipse 45% 45% at 85% 105%, #061a0e 0%, transparent 55%); + display: flex; flex-direction: column; + align-items: center; justify-content: center; + text-align: center; padding: 120px 40px 0; + position: relative; overflow: hidden; + } + .hero-grid { + position: absolute; inset: 0; + background-image: + linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), + linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px); + background-size: 48px 48px; + } + .hero-content { position: relative; z-index: 1; max-width: 780px; } + + .hero-pill { + display: inline-flex; align-items: center; gap: 10px; + background: rgba(255,255,255,0.06); + border: 1px solid rgba(61,214,140,0.2); + color: rgba(255,255,255,0.65); + font-size: 0.82rem; font-weight: 500; + padding: 8px 18px; border-radius: 100px; + margin-bottom: 32px; backdrop-filter: blur(6px); + } + .hero-pill .ff-dot { + background: var(--ff-orange); + color: white; font-size: 0.7rem; font-weight: 800; + padding: 2px 8px; border-radius: 100px; + letter-spacing: 0.04em; + } + + .hero h1 { + font-family: 'Cabinet Grotesk', sans-serif; + font-size: clamp(2.8rem, 7vw, 5rem); + font-weight: 900; color: white; + line-height: 1.05; letter-spacing: -0.03em; + margin-bottom: 24px; + } + .hero h1 em { font-style: normal; color: var(--accent-glow); } + .hero h1 sup { + font-size: 0.45em; vertical-align: super; + color: var(--accent-glow); font-weight: 900; + letter-spacing: 0; } + .hero p { + font-size: 1.15rem; color: rgba(255,255,255,0.48); + max-width: 540px; margin: 0 auto 40px; line-height: 1.7; + } + .hero-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 80px; } + .btn { - display: inline-block; - background: #3a6ea5; - color: white; - padding: 8px 16px; - text-decoration: none; - border-radius: 6px; - margin-right: 10px; - font-weight: bold; - } - .btn-github { - background: #24292e; - } - footer { - margin-top: 3rem; - text-align: center; - font-size: 0.85rem; - color: #6c86a3; - border-top: 1px solid #e2e8f0; - padding-top: 1.5rem; - } - @media (max-width: 700px) { - .feature { - flex-direction: column; - text-align: center; - } - .feature img { - width: 100%; - max-width: 300px; - } - } \ No newline at end of file + display: inline-flex; align-items: center; gap: 8px; + padding: 14px 28px; border-radius: 100px; + font-family: 'Instrument Sans', sans-serif; + font-size: 0.95rem; font-weight: 600; + text-decoration: none; cursor: pointer; + transition: transform 0.2s, box-shadow 0.2s, background 0.2s; + border: none; + } + .btn:hover { transform: translateY(-2px); } + .btn-green { background: var(--accent); color: white; box-shadow: 0 4px 20px rgba(29,170,107,0.4); } + .btn-green:hover { background: var(--accent-mid); box-shadow: 0 8px 28px rgba(29,170,107,0.5); } + .btn-outline { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.82); border: 1px solid rgba(255,255,255,0.14); backdrop-filter: blur(6px); } + .btn-outline:hover { background: rgba(255,255,255,0.13); } + .btn-solid { background: var(--accent); color: white; box-shadow: 0 4px 16px rgba(29,170,107,0.35); } + .btn-solid:hover { background: var(--accent-mid); } + .btn-dark-pill { background: var(--dark-sec); color: white; } + .btn-dark-pill:hover { background: #152a1e; } + .btn-ghost-pill { background: white; color: var(--text-dark); border: 1.5px solid var(--border); } + .btn-ghost-pill:hover { border-color: var(--accent); color: var(--accent); } + + .hero-mockup { position: relative; z-index: 1; width: 100%; max-width: 720px; margin: 0 auto; } + .browser-window { background: #162c1e; border-radius: 20px 20px 0 0; border: 1px solid rgba(255,255,255,0.07); border-bottom: none; box-shadow: 0 -20px 80px rgba(0,0,0,0.45); overflow: hidden; } + .browser-bar { background: #0f2218; padding: 12px 18px; display: flex; align-items: center; gap: 8px; } + .b-dot { width: 11px; height: 11px; border-radius: 50%; } + .b-dot:nth-child(1) { background: #ff5f57; } + .b-dot:nth-child(2) { background: #ffbc2e; } + .b-dot:nth-child(3) { background: #28c840; } + .browser-url { flex: 1; margin-left: 12px; background: rgba(255,255,255,0.05); border-radius: 8px; padding: 6px 14px; font-size: 0.78rem; color: rgba(255,255,255,0.28); display: flex; align-items: center; gap: 6px; } + .ff-tag { background: var(--ff-orange); color: white; font-size: 0.62rem; font-weight: 800; padding: 1px 6px; border-radius: 4px; } + .browser-body { background: #f0f7f2; min-height: 200px; display: flex; align-items: center; justify-content: center; padding: 32px; } + + .section { padding: 100px 48px; } + .section-inner { max-width: 1100px; margin: 0 auto; } + .eyebrow { display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; } + .section-title { font-family: 'Cabinet Grotesk', sans-serif; font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 900; color: var(--text-dark); letter-spacing: -0.025em; line-height: 1.12; margin-bottom: 16px; } + .section-sub { color: var(--text-muted); font-size: 1.05rem; max-width: 560px; line-height: 1.7; } + .section-header { margin-bottom: 60px; } + .section-header.center { text-align: center; } + .section-header.center .section-sub { margin: 0 auto; } + + .forwho-section { background: var(--bg-light); } + .forwho-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 50px; } + .forwho-card { + background: white; border: 1px solid var(--border); border-radius: var(--radius); + padding: 32px; display: flex; gap: 20px; align-items: flex-start; + transition: transform 0.22s, box-shadow 0.22s; + } + .forwho-card:hover { transform: translateY(-4px); box-shadow: 0 14px 44px rgba(13,31,20,0.09); } + .forwho-ico { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; } + .ico-teal { background: rgba(29,170,107,0.12); } + .ico-blue { background: rgba(45,130,219,0.12); } + .ico-amber { background: rgba(230,160,34,0.12); } + .ico-purple { background: rgba(138,89,182,0.12); } + .forwho-card h3 { font-family: 'Cabinet Grotesk', sans-serif; font-size: 1.05rem; font-weight: 800; color: var(--text-dark); margin-bottom: 8px; } + .forwho-card p { font-size: 0.88rem; color: var(--text-muted); line-height: 1.65; } + + .features-section { background: white; } + .feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } + .feat-card { + background: var(--bg-light); border: 1px solid var(--border); + border-radius: var(--radius); overflow: hidden; + transition: transform 0.22s, box-shadow 0.22s; + } + .feat-card:hover { transform: translateY(-4px); box-shadow: 0 14px 44px rgba(13,31,20,0.09); } + .feat-preview { + background: white; min-height: 150px; padding: 22px; + border-bottom: 1px solid var(--border); + display: flex; align-items: center; justify-content: center; + } + + .ui { width: 100%; background: white; border-radius: 12px; box-shadow: 0 3px 16px rgba(0,0,0,0.07); padding: 14px 16px; font-size: 0.8rem; } + .ui-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } + .ui-label { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 8px; } + .ui-tag { background: var(--accent-soft); color: var(--accent-mid); font-size: 0.68rem; font-weight: 700; padding: 2px 8px; border-radius: 100px; border: 1px solid rgba(29,170,107,0.2); } + .ui-code { + background: #0c1f14; color: #3dd68c; + border-radius: 10px; padding: 12px 14px; + font-family: 'Courier New', monospace; font-size: 1.2rem; font-weight: 700; + letter-spacing: 0.18em; text-align: center; margin-bottom: 6px; + } + .ui-code-sub { text-align: center; font-size: 0.68rem; color: var(--text-muted); } + .ui-exo { background: var(--bg-light); border-radius: 8px; padding: 10px 12px; font-size: 0.78rem; color: var(--text-dark); line-height: 1.5; margin-bottom: 8px; border-left: 3px solid var(--accent); } + .ui-analysis { display: flex; flex-direction: column; gap: 5px; } + .ui-analysis-item { display: flex; align-items: flex-start; gap: 7px; font-size: 0.74rem; color: var(--text-muted); } + .ui-analysis-item span { color: var(--accent); font-weight: 700; flex-shrink: 0; } + .ui-suggest { background: rgba(29,170,107,0.08); border: 1px solid rgba(29,170,107,0.2); border-radius: 8px; padding: 8px 10px; font-size: 0.74rem; color: var(--text-dark); line-height: 1.5; margin-bottom: 6px; } + .ui-suggest::before { content: '💡 '; } + .ui-prog-bar { background: var(--border); border-radius: 100px; height: 6px; overflow: hidden; margin-top: 4px; } + .ui-prog-fill { background: linear-gradient(90deg, var(--accent), var(--accent-glow)); height: 100%; border-radius: 100px; } + .ui-student-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); } + .ui-avatar { width: 24px; height: 24px; border-radius: 50%; font-size: 0.65rem; display: flex; align-items: center; justify-content: center; font-weight: 700; color: white; } + .ui-student-name { font-size: 0.78rem; color: var(--text-dark); font-weight: 500; flex: 1; } + + .feat-body { padding: 22px 24px; } + .feat-body h3 { font-family: 'Cabinet Grotesk', sans-serif; font-size: 1.05rem; font-weight: 800; color: var(--text-dark); margin-bottom: 6px; } + .feat-body p { font-size: 0.86rem; color: var(--text-muted); line-height: 1.65; } + + .security-section { background: var(--dark-sec); padding: 100px 48px; } + .sec-inner { max-width: 1100px; margin: 0 auto; } + .sec-inner .section-title { color: white; } + .sec-inner .section-sub { color: rgba(255,255,255,0.4); max-width: 660px; margin: 0 auto; } + .sec-inner .eyebrow { color: var(--accent-glow); } + .sec-hl { color: var(--accent-glow); font-weight: 600; } + .sec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 60px; } + .sec-card { + background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); + border-radius: var(--radius); padding: 28px; + backdrop-filter: blur(8px); + } + .sec-card h4 { font-family: 'Cabinet Grotesk', sans-serif; font-size: 1rem; font-weight: 800; color: white; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; } + .sec-card p { font-size: 0.86rem; color: rgba(255,255,255,0.38); line-height: 1.65; } + .big-claim { text-align: center; margin-top: 80px; padding-top: 60px; border-top: 1px solid rgba(255,255,255,0.06); } + .big-claim h2 { font-family: 'Cabinet Grotesk', sans-serif; font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 900; color: white; letter-spacing: -0.02em; margin-bottom: 14px; } + .big-claim p { color: rgba(255,255,255,0.38); font-size: 0.95rem; max-width: 520px; margin: 0 auto; } + + .philosophy-section { background: var(--bg-light); padding: 100px 48px; } + .phil-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } + .phil-text .section-sub { max-width: 100%; } + .phil-quote { + background: white; border: 1px solid var(--border); + border-radius: var(--radius); padding: 32px; + position: relative; + } + .phil-quote::before { + content: '"'; position: absolute; top: -20px; left: 24px; + font-family: 'Cabinet Grotesk', sans-serif; + font-size: 5rem; font-weight: 900; + color: var(--accent); line-height: 1; opacity: 0.4; + } + .phil-quote p { font-size: 1rem; color: var(--text-dark); line-height: 1.75; font-style: italic; } + .phil-quote footer { margin-top: 20px; font-size: 0.82rem; color: var(--text-muted); font-weight: 600; font-style: normal; } + .phil-points { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; } + .phil-point { display: flex; align-items: flex-start; gap: 12px; } + .phil-point .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; margin-top: 7px; } + .phil-point p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; } + + .install-section { padding: 100px 48px; } + .install-inner { max-width: 1100px; margin: 0 auto; } + .ff-only { + display: inline-flex; align-items: center; gap: 8px; + background: rgba(255,102,17,0.08); border: 1px solid rgba(255,102,17,0.2); + color: #c04e00; font-size: 0.82rem; font-weight: 600; + padding: 7px 16px; border-radius: 100px; margin-bottom: 24px; + } + .steps-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 56px; position: relative; } + .steps-line { position: absolute; top: 27px; left: calc(12.5% + 14px); right: calc(12.5% + 14px); height: 2px; background: linear-gradient(90deg, var(--border), var(--accent), var(--border)); } + .step { text-align: center; padding: 0 16px; position: relative; } + .step-num { width: 54px; height: 54px; border-radius: 50%; background: white; border: 2px solid var(--accent); color: var(--accent); font-family: 'Cabinet Grotesk', sans-serif; font-size: 1.2rem; font-weight: 900; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; position: relative; z-index: 1; box-shadow: 0 4px 16px rgba(29,170,107,0.2); } + .step h4 { font-family: 'Cabinet Grotesk', sans-serif; font-size: 0.95rem; font-weight: 800; color: var(--text-dark); margin-bottom: 8px; } + .step p { font-size: 0.82rem; color: var(--text-muted); line-height: 1.6; } + .step code { background: var(--accent-soft); color: var(--accent-mid); padding: 1px 7px; border-radius: 5px; font-size: 0.78rem; } + .install-ctas { margin-top: 48px; display: flex; gap: 14px; flex-wrap: wrap; } + + .faq-section { padding: 100px 48px; background: var(--bg-light); } + .faq-inner { max-width: 740px; margin: 0 auto; } + .faq-list { display: flex; flex-direction: column; gap: 10px; margin-top: 50px; } + .faq-item { background: white; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); } + .faq-q { padding: 20px 26px; font-weight: 600; color: var(--text-dark); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 0.95rem; transition: background 0.18s; } + .faq-q:hover { background: #edf7f1; } + .faq-arr { transition: transform 0.25s; font-size: 0.9rem; color: var(--text-muted); } + .faq-item.open .faq-arr { transform: rotate(180deg); } + .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } + .faq-item.open .faq-a { max-height: 220px; } + .faq-a-inner { padding: 0 26px 20px; color: var(--text-muted); font-size: 0.88rem; line-height: 1.7; border-top: 1px solid var(--border); } + + .cta-section { padding: 0 48px 100px; } + .cta-box { max-width: 1100px; margin: 0 auto; background: var(--dark-sec); border-radius: 24px; padding: 70px 60px; text-align: center; position: relative; overflow: hidden; } + .cta-box::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px); background-size: 40px 40px; } + .cta-box::after { content: ''; position: absolute; top: -40%; left: 50%; transform: translateX(-50%); width: 600px; height: 300px; background: radial-gradient(ellipse, rgba(29,170,107,0.2) 0%, transparent 70%); pointer-events: none; } + .cta-content { position: relative; z-index: 1; } + .cta-box .eyebrow { color: var(--accent-glow); } + .cta-box .section-title { color: white; } + .cta-box .section-title em { font-style: normal; color: var(--accent-glow); } + .cta-box p { color: rgba(255,255,255,0.42); font-size: 1rem; margin: 12px auto 32px; max-width: 480px; } + .disclaimer-pill { margin-top: 28px; display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.4); font-size: 0.8rem; font-weight: 500; padding: 8px 18px; border-radius: 100px; } + + .sibling-bar { + background: rgba(45,130,219,0.06); + border-bottom: 1px solid rgba(45,130,219,0.12); + padding: 10px 48px; + display: flex; align-items: center; justify-content: center; gap: 10px; + font-size: 0.82rem; color: #3a6ea8; + } + .sibling-bar a { color: #2d6fc2; font-weight: 600; text-decoration: none; } + .sibling-bar a:hover { text-decoration: underline; } + + footer { background: white; border-top: 1px solid var(--border); padding: 56px 48px 32px; } + .footer-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--border); } + .f-brand-name { font-family: 'Cabinet Grotesk', sans-serif; font-size: 1.15rem; font-weight: 900; color: var(--text-dark); display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } + .f-brand-name img { width: 28px; border-radius: 7px; } + .f-brand-sub { display: inline-block; background: var(--accent-soft); color: var(--accent-mid); font-size: 0.68rem; font-weight: 700; padding: 2px 8px; border-radius: 100px; border: 1px solid rgba(29,170,107,0.2); margin-bottom: 12px; } + .f-desc { font-size: 0.84rem; color: var(--text-muted); line-height: 1.65; max-width: 240px; } + .f-col h5 { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 14px; } + .f-col a { display: block; color: var(--text-dark); text-decoration: none; font-size: 0.88rem; padding: 4px 0; transition: color 0.18s; } + .f-col a:hover { color: var(--accent); } + .footer-bottom { max-width: 1100px; margin: 24px auto 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; } + .footer-bottom p { font-size: 0.8rem; color: var(--text-muted); } + .badge-noff { font-size: 0.75rem; color: var(--text-muted); background: var(--bg-light); border: 1px solid var(--border); padding: 5px 14px; border-radius: 100px; } + + @keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } + .hero-content > * { animation: fadeUp 0.75s ease both; } + .hero-content > *:nth-child(1) { animation-delay: 0.05s; } + .hero-content > *:nth-child(2) { animation-delay: 0.15s; } + .hero-content > *:nth-child(3) { animation-delay: 0.25s; } + .hero-content > *:nth-child(4) { animation-delay: 0.38s; } + .hero-mockup { animation: fadeUp 0.8s 0.5s ease both; } + + @media (max-width: 960px) { + nav { padding: 0 24px; } + .nav-links a:not(.nav-dl) { display: none; } + .section, .install-section, .faq-section, .security-section, .philosophy-section, .cta-section { padding: 70px 24px; } + .forwho-grid, .feat-grid, .sec-grid { grid-template-columns: 1fr; } + .phil-inner { grid-template-columns: 1fr; gap: 40px; } + .steps-row { grid-template-columns: 1fr 1fr; gap: 40px; } + .steps-line { display: none; } + .footer-inner { grid-template-columns: 1fr 1fr; gap: 28px; } + .cta-box { padding: 50px 28px; } + footer { padding: 40px 24px 24px; } + .hero { padding: 100px 24px 0; } + .sibling-bar { padding: 10px 24px; } + } + @media (max-width: 560px) { + .steps-row, .footer-inner { grid-template-columns: 1fr; } + } diff --git a/Website/src/assets/style-terms.css b/Website/src/assets/style-terms.css new file mode 100644 index 0000000..700cbff --- /dev/null +++ b/Website/src/assets/style-terms.css @@ -0,0 +1,81 @@ + * { + margin: 0; + padding: 0; + box-sizing: border-box; + } + body { + font-family: 'Segoe UI', Roboto, sans-serif; + max-width: 1000px; + margin: 0 auto; + padding: 20px; + background: #f9fafc; + color: #1e2a3a; + line-height: 1.6; + } + h1 { + font-size: 2rem; + margin-bottom: 0.2rem; + color: #2c4e7a; + } + .logo { + width: 64px; + vertical-align: middle; + margin-right: 10px; + } + .sub { + color: #4a627a; + margin-bottom: 2rem; + border-bottom: 1px solid #e2e8f0; + padding-bottom: 0.5rem; + } + h2 { + font-size: 1.5rem; + margin: 1.5rem 0 1rem; + color: #3a6ea5; + border-left: 4px solid #3a6ea5; + padding-left: 15px; + } + h3 { + font-size: 1.2rem; + margin: 1.2rem 0 0.5rem; + color: #2c4e7a; + } + p, li { + margin-bottom: 0.8rem; + } + ul, ol { + margin: 0.5rem 0 1rem 2rem; + } + .legal-box { + background: #eef2f7; + padding: 1rem; + border-radius: 8px; + margin: 1rem 0; + font-size: 0.9rem; + } + footer { + margin-top: 3rem; + text-align: center; + font-size: 0.85rem; + color: #6c86a3; + border-top: 1px solid #e2e8f0; + padding-top: 1.5rem; + } + .btn-back { + display: inline-block; + background: #3a6ea5; + color: white; + padding: 6px 12px; + text-decoration: none; + border-radius: 6px; + margin-bottom: 1rem; + font-size: 0.9rem; + } + @media (max-width: 700px) { + body { + padding: 15px; + } + h1 { + font-size: 1.6rem; + } + } diff --git a/Website/src/assets/style.css b/Website/src/assets/style.css index 75cd869..7283fe4 100644 --- a/Website/src/assets/style.css +++ b/Website/src/assets/style.css @@ -1,84 +1,392 @@ + *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } + + :root { + --hero-bg: #0d2b45; + --accent: #2d9cdb; + --accent-glow:#5bbef5; + --accent-soft:#e8f5ff; + --text-dark: #0e1e2e; + --text-muted: #536b84; + --border: #dde8f0; + --surface: #ffffff; + --bg-light: #f4f8fc; + --dark-sec: #0e1e2e; + --radius: 18px; + } + + html { scroll-behavior: smooth; } body { - font-family: 'Segoe UI', Roboto, sans-serif; - max-width: 1000px; - margin: 0 auto; - padding: 20px; - background: #f9fafc; - color: #1e2a3a; - line-height: 1.5; - } - h1 { - font-size: 2rem; - margin-bottom: 0.2rem; - } - .logo { - width: 64px; - vertical-align: middle; - margin-right: 10px; - } - .sub { - color: #4a627a; - margin-bottom: 2rem; - } - hr { - margin: 2rem 0; - border: none; - border-top: 1px solid #e2e8f0; + font-family: 'Instrument Sans', sans-serif; + color: var(--text-dark); + background: var(--surface); + overflow-x: hidden; + line-height: 1.6; } - .feature { + + nav { + position: fixed; + top: 0; left: 0; right: 0; + z-index: 200; + height: 64px; display: flex; - gap: 30px; - flex-wrap: wrap; - margin: 2rem 0; align-items: center; + justify-content: space-between; + padding: 0 48px; + transition: background 0.3s, border-color 0.3s; } - .feature img { - width: 280px; - border-radius: 12px; - box-shadow: 0 2px 8px rgba(0,0,0,0.1); - background: #eef2f7; + nav.scrolled { + background: rgba(13, 30, 46, 0.82); + backdrop-filter: blur(18px); + border-bottom: 1px solid rgba(255,255,255,0.08); } - .feature-text { - flex: 1; + .nav-brand { + display: flex; align-items: center; gap: 10px; + font-family: 'Cabinet Grotesk', sans-serif; + font-weight: 800; font-size: 1.15rem; + color: white; text-decoration: none; } - .feature-text h3 { - margin-top: 0; - color: #2c4e7a; + .nav-brand img { width: 32px; border-radius: 8px; } + .nav-links { display: flex; align-items: center; gap: 6px; } + .nav-links a { + color: rgba(255,255,255,0.65); + text-decoration: none; font-size: 0.9rem; font-weight: 500; + padding: 7px 16px; border-radius: 100px; + transition: background 0.2s, color 0.2s; } - .install { - background: #eef2f7; - padding: 1.2rem; - border-radius: 12px; - margin: 1.5rem 0; + .nav-links a:hover { color: white; background: rgba(255,255,255,0.1); } + .nav-dl { + background: var(--accent) !important; + color: white !important; + font-weight: 600 !important; + display: flex; align-items: center; gap: 7px; + } + .nav-dl:hover { background: #1a88c9 !important; } + + .hero { + min-height: 100vh; + background: var(--hero-bg); + background-image: + radial-gradient(ellipse 90% 70% at 50% -20%, #0f4d78 0%, transparent 65%), + radial-gradient(ellipse 50% 50% at 80% 110%, #082a42 0%, transparent 60%); + display: flex; flex-direction: column; + align-items: center; justify-content: center; + text-align: center; + padding: 120px 40px 0; + position: relative; + overflow: hidden; + } + .hero-grid { + position: absolute; inset: 0; + background-image: + linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), + linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); + background-size: 48px 48px; + } + .hero-content { position: relative; z-index: 1; max-width: 760px; } + .hero-icon { + width: 88px; height: 88px; + border-radius: 22px; + background: linear-gradient(135deg, #1a88c9, #2d9cdb); + display: flex; align-items: center; justify-content: center; + margin: 0 auto 32px; + box-shadow: 0 20px 60px rgba(45,156,219,0.4), 0 0 0 1px rgba(255,255,255,0.1); + } + .hero-icon img { width: 64px; height: 64px; border-radius: 14px; } + .hero h1 { + font-family: 'Cabinet Grotesk', sans-serif; + font-size: clamp(2.8rem, 7vw, 5rem); + font-weight: 900; + color: white; + line-height: 1.05; + letter-spacing: -0.03em; + margin-bottom: 24px; + } + .hero h1 em { font-style: normal; color: var(--accent-glow); } + .hero p { + font-size: 1.15rem; + color: rgba(255,255,255,0.5); + max-width: 520px; + margin: 0 auto 40px; + line-height: 1.7; + } + .hero-btns { + display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; + margin-bottom: 80px; } .btn { - display: inline-block; - background: #3a6ea5; + display: inline-flex; align-items: center; gap: 8px; + padding: 14px 28px; border-radius: 100px; + font-family: 'Instrument Sans', sans-serif; + font-size: 0.95rem; font-weight: 600; + text-decoration: none; cursor: pointer; + transition: transform 0.2s, box-shadow 0.2s, background 0.2s; + border: none; + } + .btn:hover { transform: translateY(-2px); } + .btn-primary { + background: var(--accent); color: white; - padding: 8px 16px; - text-decoration: none; - border-radius: 6px; - margin-right: 10px; - font-weight: bold; + box-shadow: 0 4px 20px rgba(45,156,219,0.4); } - .btn-github { - background: #24292e; + .btn-primary:hover { background: #1a88c9; box-shadow: 0 8px 28px rgba(45,156,219,0.5); } + .btn-outline { + background: rgba(255,255,255,0.08); + color: rgba(255,255,255,0.85); + border: 1px solid rgba(255,255,255,0.15); + backdrop-filter: blur(6px); } - footer { - margin-top: 3rem; - text-align: center; - font-size: 0.85rem; - color: #6c86a3; - border-top: 1px solid #e2e8f0; - padding-top: 1.5rem; - } - @media (max-width: 700px) { - .feature { - flex-direction: column; - text-align: center; - } - .feature img { - width: 100%; - max-width: 300px; - } + .btn-outline:hover { background: rgba(255,255,255,0.15); } + .btn-solid { background: var(--accent); color: white; box-shadow: 0 4px 16px rgba(45,156,219,0.35); } + .btn-solid:hover { background: #1a88c9; } + .btn-dark-pill { background: var(--dark-sec); color: white; } + .btn-dark-pill:hover { background: #1a2e42; } + .btn-ghost-pill { background: white; color: var(--text-dark); border: 1.5px solid var(--border); } + .btn-ghost-pill:hover { border-color: var(--accent); color: var(--accent); } + + .hero-mockup { + position: relative; z-index: 1; + width: 100%; max-width: 700px; + margin: 0 auto; + } + .browser-window { + background: #1a2e42; + border-radius: 20px 20px 0 0; + border: 1px solid rgba(255,255,255,0.08); + border-bottom: none; + box-shadow: 0 -20px 80px rgba(0,0,0,0.4); + overflow: hidden; + } + .browser-bar { + background: #162436; + padding: 12px 18px; + display: flex; align-items: center; gap: 8px; + } + .b-dot { width: 11px; height: 11px; border-radius: 50%; } + .b-dot:nth-child(1) { background: #ff5f57; } + .b-dot:nth-child(2) { background: #ffbc2e; } + .b-dot:nth-child(3) { background: #28c840; } + .browser-url { + flex: 1; margin-left: 12px; + background: rgba(255,255,255,0.05); + border-radius: 8px; padding: 6px 14px; + font-size: 0.78rem; color: rgba(255,255,255,0.3); + } + .browser-body { + background: #eef4fa; + min-height: 200px; + display: flex; align-items: center; justify-content: center; + padding: 32px; + } + .browser-body img { + max-height: 160px; border-radius: 12px; + box-shadow: 0 8px 32px rgba(0,0,0,0.12); + } + + .section { padding: 100px 48px; } + .section-inner { max-width: 1100px; margin: 0 auto; } + .eyebrow { + display: inline-block; + font-size: 0.78rem; font-weight: 700; + letter-spacing: 0.1em; text-transform: uppercase; + color: var(--accent); margin-bottom: 16px; + } + .section-title { + font-family: 'Cabinet Grotesk', sans-serif; + font-size: clamp(2rem, 4vw, 2.8rem); + font-weight: 900; + color: var(--text-dark); + letter-spacing: -0.025em; + line-height: 1.12; + margin-bottom: 16px; + } + .section-sub { + color: var(--text-muted); + font-size: 1.05rem; + max-width: 560px; + line-height: 1.7; + } + .section-header { margin-bottom: 60px; } + .section-header.center { text-align: center; } + .section-header.center .section-sub { margin: 0 auto; } + + .features-section { background: var(--bg-light); } + .features-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 20px; + } + .feat-card { + background: white; + border-radius: var(--radius); + border: 1px solid var(--border); + overflow: hidden; + transition: transform 0.25s, box-shadow 0.25s; + } + .feat-card:hover { transform: translateY(-5px); box-shadow: 0 16px 48px rgba(14,30,46,0.1); } + .feat-card-preview { + background: var(--bg-light); + min-height: 160px; + display: flex; align-items: center; justify-content: center; + padding: 24px; + border-bottom: 1px solid var(--border); + } + .ui-preview { + width: 100%; background: white; + border-radius: 12px; + box-shadow: 0 4px 20px rgba(0,0,0,0.08); + padding: 14px 16px; + } + .ui-label { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 10px; } + .ui-q { color: var(--text-dark); font-weight: 500; font-size: 0.82rem; margin-bottom: 8px; } + .ui-choices { display: flex; flex-direction: column; gap: 6px; } + .ui-choice { padding: 7px 12px; border-radius: 8px; font-size: 0.78rem; font-weight: 500; background: var(--bg-light); color: var(--text-muted); border: 1.5px solid var(--border); } + .ui-choice.correct { background: #e6f9ee; color: #1a8a45; border-color: #a8e8c0; } + .ui-toggle { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } + .ui-toggle span { font-weight: 600; color: var(--text-dark); font-size: 0.82rem; } + .toggle-pill { width: 38px; height: 21px; border-radius: 100px; background: var(--accent); position: relative; } + .toggle-pill::after { content: ''; position: absolute; top: 3px; right: 3px; width: 15px; height: 15px; border-radius: 50%; background: white; } + .ui-opt { background: #f0f6ff; border-radius: 8px; padding: 8px 12px; font-size: 0.75rem; margin-top: 6px; display: flex; align-items: center; gap: 6px; } + .ui-opt.active { color: #2d9cdb; font-weight: 600; } + .ui-badge { display: inline-block; background: #ffe4e4; color: #c0392b; font-size: 0.7rem; font-weight: 700; padding: 3px 10px; border-radius: 100px; } + .ui-blur-box { background: var(--bg-light); border-radius: 10px; padding: 12px 14px; border: 2px dashed #f0a0a0; margin-top: 10px; } + .ui-blur-text { filter: blur(4px); color: var(--text-dark); font-size: 0.82rem; user-select: none; } + .ui-warn { font-size: 0.72rem; color: #c0392b; font-weight: 600; margin-top: 6px; } + + .feat-card-body { padding: 24px; } + .feat-card-body h3 { font-family: 'Cabinet Grotesk', sans-serif; font-size: 1.1rem; font-weight: 800; color: var(--text-dark); margin-bottom: 8px; } + .feat-card-body p { font-size: 0.88rem; color: var(--text-muted); line-height: 1.65; } + + .privacy-section { background: var(--dark-sec); padding: 100px 48px; } + .privacy-inner { max-width: 1100px; margin: 0 auto; } + .privacy-inner .section-title { color: white; } + .privacy-inner .section-sub { color: rgba(255,255,255,0.42); max-width: 680px; margin: 0 auto 0; } + .privacy-inner .eyebrow { color: var(--accent-glow); } + .privacy-hl { color: var(--accent-glow); font-weight: 600; } + .privacy-grid { + display: grid; grid-template-columns: repeat(4, 1fr); + gap: 24px; margin-top: 60px; + } + .p-item { text-align: center; } + .p-ico { + width: 56px; height: 56px; border-radius: 16px; + display: flex; align-items: center; justify-content: center; + font-size: 1.5rem; margin: 0 auto 18px; + } + .ico-b { background: rgba(45,156,219,0.15); } + .ico-g { background: rgba(39,174,96,0.15); } + .ico-p { background: rgba(155,89,182,0.15); } + .ico-o { background: rgba(230,126,34,0.15); } + .p-item h4 { font-family: 'Cabinet Grotesk', sans-serif; font-size: 0.95rem; font-weight: 800; color: white; margin-bottom: 10px; } + .p-item p { font-size: 0.83rem; color: rgba(255,255,255,0.38); line-height: 1.65; } + .big-claim { + text-align: center; margin-top: 80px; padding-top: 60px; + border-top: 1px solid rgba(255,255,255,0.07); + } + .big-claim h2 { font-family: 'Cabinet Grotesk', sans-serif; font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 900; color: white; letter-spacing: -0.02em; margin-bottom: 14px; } + .big-claim p { color: rgba(255,255,255,0.38); font-size: 0.95rem; max-width: 520px; margin: 0 auto; } + + .install-section { background: var(--bg-light); padding: 100px 48px; } + .install-inner { max-width: 1100px; margin: 0 auto; } + .steps-row { + display: grid; grid-template-columns: repeat(4, 1fr); + gap: 0; margin-top: 60px; position: relative; + } + .steps-line { + position: absolute; top: 27px; + left: calc(12.5% + 14px); right: calc(12.5% + 14px); + height: 2px; + background: linear-gradient(90deg, var(--border), var(--accent), var(--border)); + } + .step { text-align: center; padding: 0 16px; position: relative; } + .step-num { + width: 54px; height: 54px; border-radius: 50%; + background: white; border: 2px solid var(--accent); + color: var(--accent); + font-family: 'Cabinet Grotesk', sans-serif; + font-size: 1.2rem; font-weight: 900; + display: flex; align-items: center; justify-content: center; + margin: 0 auto 20px; position: relative; z-index: 1; + box-shadow: 0 4px 16px rgba(45,156,219,0.2); + } + .step h4 { font-family: 'Cabinet Grotesk', sans-serif; font-size: 0.95rem; font-weight: 800; color: var(--text-dark); margin-bottom: 8px; } + .step p { font-size: 0.82rem; color: var(--text-muted); line-height: 1.6; } + .step code { background: var(--accent-soft); color: var(--accent); padding: 1px 7px; border-radius: 5px; font-size: 0.78rem; } + .browsers-row { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 56px; } + .browser-pill { + flex: 1; min-width: 160px; background: white; + border: 1px solid var(--border); border-radius: 14px; + padding: 20px 24px; display: flex; align-items: center; gap: 14px; + transition: border-color 0.2s, box-shadow 0.2s; + } + .browser-pill:hover { border-color: var(--accent); box-shadow: 0 4px 20px rgba(45,156,219,0.1); } + .browser-pill .em { font-size: 1.7rem; } + .browser-pill strong { display: block; font-size: 0.9rem; color: var(--text-dark); } + .browser-pill span { font-size: 0.77rem; color: var(--text-muted); } + .install-ctas { margin-top: 48px; display: flex; gap: 14px; flex-wrap: wrap; } + + .faq-section { padding: 100px 48px; } + .faq-inner { max-width: 740px; margin: 0 auto; } + .faq-list { display: flex; flex-direction: column; gap: 10px; margin-top: 50px; } + .faq-item { background: var(--bg-light); border-radius: 14px; overflow: hidden; border: 1px solid var(--border); } + .faq-q { padding: 20px 26px; font-weight: 600; color: var(--text-dark); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 0.95rem; transition: background 0.18s; } + .faq-q:hover { background: #eaf3fb; } + .faq-arr { transition: transform 0.25s; font-size: 0.9rem; color: var(--text-muted); } + .faq-item.open .faq-arr { transform: rotate(180deg); } + .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } + .faq-item.open .faq-a { max-height: 200px; } + .faq-a-inner { padding: 0 26px 20px; color: var(--text-muted); font-size: 0.88rem; line-height: 1.7; border-top: 1px solid var(--border); } + + .cta-section { padding: 0 48px 100px; } + .cta-box { + max-width: 1100px; margin: 0 auto; + background: var(--bg-light); border: 1px solid var(--border); + border-radius: 24px; padding: 70px 60px; text-align: center; + } + .cta-box .section-title em { font-style: normal; color: var(--accent); } + .cta-box p { color: var(--text-muted); font-size: 1rem; margin: 12px auto 32px; max-width: 480px; } + .disclaimer-pill { + margin-top: 28px; display: inline-flex; align-items: center; gap: 8px; + background: #fff8e8; border: 1px solid #f4d08a; color: #8a6400; + font-size: 0.8rem; font-weight: 500; padding: 8px 18px; border-radius: 100px; + } + + footer { background: white; border-top: 1px solid var(--border); padding: 56px 48px 32px; } + .footer-inner { + max-width: 1100px; margin: 0 auto; + display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; + gap: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--border); + } + .f-brand-name { font-family: 'Cabinet Grotesk', sans-serif; font-size: 1.2rem; font-weight: 900; color: var(--text-dark); display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } + .f-brand-name img { width: 28px; border-radius: 7px; } + .f-desc { font-size: 0.85rem; color: var(--text-muted); line-height: 1.65; max-width: 240px; } + .f-col h5 { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 14px; } + .f-col a { display: block; color: var(--text-dark); text-decoration: none; font-size: 0.88rem; padding: 4px 0; transition: color 0.18s; } + .f-col a:hover { color: var(--accent); } + .footer-bottom { max-width: 1100px; margin: 24px auto 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; } + .footer-bottom p { font-size: 0.8rem; color: var(--text-muted); } + .badge-noff { font-size: 0.75rem; color: var(--text-muted); background: var(--bg-light); border: 1px solid var(--border); padding: 5px 14px; border-radius: 100px; } + + @keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } + .hero-content > * { animation: fadeUp 0.75s ease both; } + .hero-content > *:nth-child(1) { animation-delay: 0.1s; } + .hero-content > *:nth-child(2) { animation-delay: 0.2s; } + .hero-content > *:nth-child(3) { animation-delay: 0.3s; } + .hero-content > *:nth-child(4) { animation-delay: 0.42s; } + .hero-mockup { animation: fadeUp 0.8s 0.55s ease both; } + + @media (max-width: 900px) { + nav { padding: 0 24px; } + .nav-links a:not(.nav-dl) { display: none; } + .section, .faq-section, .cta-section, .install-section, .privacy-section { padding: 70px 24px; } + .features-grid { grid-template-columns: 1fr; } + .privacy-grid { grid-template-columns: repeat(2, 1fr); } + .steps-row { grid-template-columns: 1fr 1fr; gap: 40px; } + .steps-line { display: none; } + .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; } + .cta-box { padding: 50px 28px; } + footer { padding: 40px 24px 24px; } + .hero { padding: 100px 24px 0; } + } + @media (max-width: 560px) { + .privacy-grid, .steps-row, .footer-inner { grid-template-columns: 1fr; } } diff --git a/Website/src/index.html b/Website/src/index.html index aab5a2d..fb4d745 100644 --- a/Website/src/index.html +++ b/Website/src/index.html @@ -1,68 +1,279 @@ + + PixHelp – Assistant pour Pix - + + + - -

PixHelp

-
Aide toi à réussir sur Pix avec PixHelp.
- -
- -
- Bouton dans la navigation -
-

✅ Aide sur les questions

-

PixHelp vous aide à trouver les réponses aux questions de manière efficace.

+
+ -
- Paramètres -
-

⚙️ Paramètres personnalisables

-

Activez ou désactivez l’extension en un clic. Interface simple avec onglets (Infos / Options).

+
+
+
+
+ PixHelp +
+

Ton assistant pour
réussir sur Pix.

+

PixHelp est une extension navigateur libre et gratuite qui t'aide à progresser sur Pix, pour connaitre mieux le monde numérique.

+
+ ⬇ Télécharger gratuitement + </> Contribuer sur GitHub +
+
+
+
+
+
+
https://app.pix.fr/assessments/123456/challenges/rec...
+
+
+ PixHelp en action +
+
-
+ -
- Blocage certification -
-

🚫 Protection certification

-

Sur la page /certifications, la section est automatiquement floutée avec un message d’avertissement. L’extension se désactive automatiquement dans ce contexte.

+
+
+
+
Fonctionnalités
+

Conçu avec soin
et attention au détail

+

Chaque fonctionnalité de PixHelp est pensée pour t'aider à progresser sur Pix, dans le respect des règles.

+
+
+
+
+
+
Question Pix
+
Quel format est utilisé pour structurer des données échangées via une API ?
+
+
XML
+
✓ JSON
+
CSV
+
+
+
+
+

✅ Aide sur les questions

+

PixHelp t'aide à trouver et comprendre les réponses aux questions Pix. Fini les blocages, place à la compréhension.

+
+
+
+
+
+
+ Extension active +
+
+
📋 Infos
+
⚙️ Options
+
+
+
+

⚙️ Paramètres personnalisables

+

Active ou désactive l'extension en un clic. Interface épurée avec onglets Infos / Options pour un contrôle total.

+
+
+
+
+
+
🚫 Certification détectée
+
+
Lorem ipsum dolor sit amet certification content blocked...
+
PixHelp désactivé automatiquement
+
+
+
+
+

🚫 Protection certification

+

Sur les pages /certifications, PixHelp se désactive et floute automatiquement la section (voir terms).

+
+
+
-
+ -
+
+
+
+
Vie privée & sécurité
+

Sécurisé et respectueux
de ta vie privée

+

PixHelp ne transmet aucune donnée. Tout fonctionne directement dans ton navigateur, sans serveur, sans compte, sans pistage.

+
+
+
+
📱
+

Données locales

+

Aucune information n'est envoyée à un serveur. Tout reste sur ton appareil, en toute sécurité sauf avec l'utilisation de PixHelp Prof.

+
+
+
🔓
+

Logiciel libre

+

Le code source est ouvert sur GitHub. Inspecte, audite et contribue à PixHelp librement.

+
+
+
🔒
+

Aucune collecte

+

Pas de publicité, pas de télémétrie, pas de collecte de données. Jamais.

+
+
+
⚡
+

Léger & rapide

+

Extension minimaliste qui n'alourdit pas ton navigateur ni le chargement des pages Pix (l'extension fait moins de 1 Mo).

+
+
+
+

On ne connaît pas tes données.

+

PixHelp n'a aucune base de données, aucun compte utilisateur. Ton utilisation t'appartient entièrement.

+
+
+
-

📥 Installation (2 minutes)

-
-
    -
  1. Téléchargez le fichier ZIP depuis GitHub.
    2. -
  2. Décompressez le dossier.
    3. -
  3. Chrome / Edge : allez dans chrome://extensions/ → activez le mode développeur → "Charger l’extension non empaquetée" et sélectionnez le dossier.
    4. -
  4. Firefox : allez dans about:debugging → "Ce Firefox" → "Charger un module complémentaire temporaire" → choisissez le fichier manifest.json.
    5. -
-
+
+
+
+
📥 Installation
+

Prêt en 2 minutes

+

Aucune compétence technique requise. Suis ces 4 étapes simples.

+
+
+
+
+
1
+

Télécharger le ZIP

+

Récupère la dernière version depuis les releases GitHub et décompresse le dossier.

+
+
+
2
+

Ouvrir les extensions

+

Va sur chrome://extensions/ ou about:debugging selon ton navigateur.

+
+
+
3
+

Mode développeur

+

Active le mode développeur en haut à droite (Chrome/Edge) ou via "Ce Firefox".

+
+
+
4
+

Charger le dossier

+

Clique sur "Charger l'extension non empaquetée" et sélectionne le dossier décompressé.

+
+
+
+
🟡
Google Chromechrome://extensions/
+
🔵
Microsoft Edgeedge://extensions/
+
🦊
Firefoxabout:debugging
+
+
+ ⬇ Télécharger PixHelp + ★ Voir sur GitHub + 🐛 Signaler un bug +
+
+
-
- GitHub - Site Pix - Signaler un bug -
+
+
+
FAQ
+

Questions fréquentes

+
+
+
PixHelp est-il gratuit ? ▾
+
Oui, PixHelp est entièrement gratuit et open-source. Pas d'abonnement, pas de version premium. Le code source est accessible sur GitHub.
+
+
+
L'extension fonctionne-t-elle sur Firefox ? ▾
+
Oui ! PixHelp est compatible avec Chrome, Microsoft Edge et Firefox grâce à Manifest V3. Chaque navigateur a sa propre procédure détaillée dans la section installation.
+
+
+
Est-ce que PixHelp collecte mes données ? ▾
+
Non. PixHelp n'a aucun serveur ni base de données. Tout fonctionne localement dans ton navigateur. Aucune donnée ne quitte ton appareil. Sauf avec l'utilisation de PixHelp Prof.
+
+
+
L'extension se désactive-t-elle pendant les certifications ? ▾
+
Oui, c'est automatique. Sur toutes les pages /certifications de Pix, PixHelp détecte le contexte, se désactive et floute la section avec un avertissement visible.
+
+
+
Comment contribuer ou signaler un bug ? ▾
+
Ouvre une issue ou une pull request sur GitHub. Les contributions sont les bienvenues !
+
+
+
+
-
- ⚠️ Cette extension n’est pas officielle. Elle est conçue pour aider dans le cadre autorisé et bloque automatiquement toute utilisation pendant les certifications. -
+
+
+
Gratuit & open-source
+

Pas une simple extension,
mais une aide pour apprendre.

+

PixHelp est né de la volonté d'aider les élèves à progresser sur Pix, dans le respect de l'intégrité des certifications officielles.

+ +
⚠️ Extension non officielle — non affiliée à Pix (1024pix)
+
+
+ + + diff --git a/Website/src/prof.html b/Website/src/prof.html index fca7676..243051e 100644 --- a/Website/src/prof.html +++ b/Website/src/prof.html @@ -3,70 +3,435 @@ - PixHelp Prof – Supervision des sessions Pix - + PixHelp Prof – Assistant pédagogique pour Pix + + + - -

PixHelp Prof

-
Supervisez vos sessions Pix en toute simplicité.
+
+ 🎓 Tu es élève ? Découvre PixHelp, l'assistant conçu pour toi. +
-
+ -
- Bouton dans le popup -
-

👨‍🏫 Accès direct au tableau de bord

-

Quand vous êtes sur orga.pix.fr/dashboard, le popup de l’extension affiche un bouton "Tableau de bord prof". Un clic ouvre une interface dédiée.

+
+
+
+
+ PixHelp + Extension dédiée aux enseignants +
+

L'assistant pédagogique
pour Pix en classe.

+

PixHelp Prof aide les enseignants à accompagner leurs élèves sur Pix. Analyse des exercices, suggestions d'explications, codes de sessions — tout depuis le navigateur.

+
+ ⬇ Télécharger pour Firefox + Découvrir les fonctionnalités +
-
+
+
+
+
+
+ PixHelp + https://orga.pix.fr/campagnes/... — PixHelp Prof actif +
+
+
+
+
+
Session en cours
+
● Actif
+
+
C4-X7-K2
+
12 élèves connectés
+
+
+
Analyse de l'exercice
+
Identifier les composants d'une URL selon le protocole HTTP.
+
💡 Suggérer l'analogie avec une adresse postale : protocole = moyen de transport, domaine = ville...
+
+
+
+
+ -
- Dashboard -
-

📊 Visualisation de la session

-

Consultez la session active, la liste des élèves avec leur statut (actif/inactif) et leur progression. Exportez les données en CSV.

+
+
+
+
Pour qui ?
+

Conçu pour accompagner,
pas pour remplacer

+

PixHelp Prof est un outil d'assistance pédagogique. Il clarifie, structure et suggère — le jugement reste toujours celui de l'enseignant.

+
+
+
+
👩‍🏫
+
+

Enseignants Pix en classe

+

Vous guidez des élèves sur les activités Pix et cherchez des explications claires à portée de main, sans quitter votre navigateur.

+
+
+
+
🖥️
+
+

Formateurs numériques

+

Vous accompagnez des groupes dans la certification Pix et avez besoin d'un outil rapide pour analyser et contextualiser les exercices.

+
+
+
+
📊
+
+

Référents pédagogiques

+

Vous supervisez la progression de plusieurs classes et souhaitez un outil léger pour suivre les sessions sans infrastructure lourde.

+
+
+
+
🧑‍💻
+
+

Professeurs documentalistes

+

Vous intégrez Pix dans vos séances d'information-documentation et cherchez à enrichir vos explications sur la culture numérique.

+
+
+
-
+ + +
+
+
+
Fonctionnalités
+

Tout ce dont un enseignant
a besoin sur Pix

+

Six fonctionnalités pensées pour le terrain, directement intégrées dans Firefox.

+
+
+ +
+
+
+
Code de session
+
C4-X7-K2
+
Partagez ce code à vos élèves • 12 connectés
+
+
+
+

🔑 Codes de sessions

+

Générez et gérez des codes de sessions Pix directement depuis l'extension. Vos élèves rejoignent la session en quelques secondes.

+
+
+ +
+
+
+
Analyse de l'exercice
+
Identifier le type de licence d'un fichier partagé en ligne.
+
+
▸ Compétence : Droits et licences (niveau 2)
+
▸ Notion clé : licences Creative Commons
+
▸ Difficulté estimée : intermédiaire
+
+
+
+
+

🔍 Analyse des consignes

+

PixHelp Prof décompose automatiquement chaque exercice Pix : compétence ciblée, notions clés, niveau de difficulté estimé.

+
+
+ +
+
+
+
Aide pédagogique
+
Comparer les licences à des "règles du jeu" : certaines permettent de modifier, d'autres non.
+
Partir d'un exemple concret : une photo sur Wikipedia et ses droits d'utilisation.
+
+
+
+

💡 Aide à la compréhension

+

Des pistes pédagogiques concrètes pour chaque activité. Analogies, exemples du quotidien, reformulations adaptées au niveau de vos élèves.

+
+
+ +
+
+
+
+
Suggestions d'explication
+
3 disponibles
+
+
+
🎓 Pour les débutants : analogie du facteur
+
✓ Niveau intermédiaire : protocoles réseau
+
🚀 Avancé : structure TCP/IP
+
+
+
+
+

🗣️ Suggestions adaptées

+

Plusieurs niveaux d'explication proposés par exercice : du débutant à l'avancé. Choisissez ce qui correspond à votre classe.

+
+
+ +
+
+
+
Progression de la session
+
+
AL
+
Alice L.
+
8/10
+
+
+
TM
+
Thomas M.
+
5/10
+
+
+
CR
+
Chloé R.
+
3/10
+
+
+
+
+

📊 Suivi de progression

+

Suivez la progression de vos élèves en temps réel pendant la session. Identifiez rapidement ceux qui ont besoin d'aide.

+
+
+ +
+
+
+
🦊
+
Extension Firefox native
+
+
Manifest V3
+
Popup intégrée
+
0 configuration
+
+
+
+
+

⚡ Interface simple & rapide

+

Popup légère accessible en un clic depuis la barre Firefox. Aucune configuration complexe, opérationnelle en 2 minutes.

+
+
-
- Actions -
-

✉️ Actions rapides

-

Envoyez un message à tous les élèves, ouvrez Pix Orga directement depuis le tableau de bord.

+
-
+
-
- -

📥 Installation (2 minutes)

-
-
    -
  1. Téléchargez le fichier ZIP depuis GitHub.
    2. -
  2. Décompressez le dossier.
    3. -
  3. Chrome / Edge : allez dans chrome://extensions/ → activez le mode développeur → "Charger l’extension non empaquetée" et sélectionnez le dossier.
    4. -
  4. Firefox : allez dans about:debugging → "Ce Firefox" → "Charger un module complémentaire temporaire" → choisissez le fichier manifest.json.
    5. -
  5. Connectez-vous à Pix Orga et allez sur https://orga.pix.fr/dashboard.
    6. -
  6. Cliquez sur l'icône PixHelp dans la barre d’extensions : le bouton "Tableau de bord prof" apparaît.
    7. -
-
+
+
+
+
Sécurité & vie privée
+

Local et sécurisé par conception

+

PixHelp Prof fonctionne en local dans Firefox et utilise un serveur sécurisé uniquement pour la gestion des sessions. Vos données élèves ne quittent pas le contexte de la session.

+
+
+
+

📱 Traitement local

+

L'analyse des exercices et les suggestions pédagogiques sont générées directement dans le navigateur. Aucune consigne ni contenu Pix n'est envoyé à un serveur externe.

+
+
+

🔐 Sessions sécurisées

+

La fonctionnalité de sessions utilise un serveur sécurisé dédié uniquement à la gestion des codes. Aucune donnée personnelle d'élève n'est stockée.

+
+
+

🔓 Open source

+

Le code source est entièrement disponible sur GitHub. Auditez, inspectez et contribuez. La transparence est une exigence non négociable.

+
+
+

🚫 Aucun pistage

+

Pas de publicité, pas de télémétrie, pas de collecte de données d'usage. PixHelp Prof est un outil éducatif, pas un service commercial.

+
+
+
+

Vos élèves restent vos élèves.

+

PixHelp Prof ne centralise aucune donnée personnelle. Les codes de sessions expirent automatiquement et ne contiennent aucune information nominative.

+
+
+
- +
+
+
+
Notre philosophie
+

Un assistant,
pas un substitut.

+

PixHelp Prof est conçu avec une conviction claire : la pédagogie reste l'affaire de l'enseignant. L'outil n'impose rien, ne décide rien.

+
+
+
+

Il clarifie les exercices pour que vous puissiez expliquer avec plus d'assurance, sans devoir chercher vous-même.

+
+
+
+

Il suggère des pistes pédagogiques, mais c'est vous qui choisissez ce qui est adapté à votre classe.

+
+
+
+

Il s'efface dans l'interface de Firefox, disponible quand vous en avez besoin, invisible sinon.

+
+
+
+

Il est conçu pour le terrain : rapide, simple, sans courbe d'apprentissage.

+
+
+
+
+
+

PixHelp Prof ne remplace pas le jugement pédagogique de l'enseignant. L'outil sert uniquement d'assistant pour clarifier et structurer l'aide apportée aux élèves.

+
— Principe de conception de PixHelp Prof
+
+
+
+
-
- ⚠️ Cette extension n’est pas officielle. Elle est conçue pour aider les enseignants dans le cadre de leur mission. Les données affichées sont simulées dans cette version et seront prochainement connectées à l’API Pix. -
+
+
+
+
📥 Installation
+

Disponible sur Firefox

+
🦊 Uniquement compatible avec Firefox
+

PixHelp Prof est une extension Firefox. Voici comment l'installer en 4 étapes.

+
+
+
+
+
1
+

Télécharger le ZIP

+

Récupère la dernière version depuis les releases GitHub et décompresse le dossier.

+
+
+
2
+

Ouvrir Firefox

+

Accède à about:debugging dans la barre d'adresse de Firefox.

+
+
+
3
+

"Ce Firefox"

+

Clique sur l'onglet "Ce Firefox" dans le panneau de débogage à gauche.

+
+
+
4
+

Charger le module

+

Clique sur "Charger un module complémentaire temporaire" et sélectionne le fichier manifest.json.

+
+
+
+ ⬇ Télécharger PixHelp Prof + ★ GitHub + 🐛 Signaler un bug +
+
+
+ +
+
+
FAQ
+

Questions fréquentes

+
+
+
PixHelp Prof fonctionne-t-il sur Chrome ou Edge ? ▾
+
Non. PixHelp Prof est exclusivement disponible pour Firefox.
+
+
+
Les données de mes élèves sont-elles transmises quelque part ? ▾
+
Non. L'analyse des exercices se fait entièrement en local. Seule la fonctionnalité de sessions utilise un serveur sécurisé dédié, qui ne stocke que les codes temporaires — aucune donnée personnelle d'élève.
+
+
+
Quelle est la différence avec PixHelp (pour élèves) ? ▾
+
PixHelp est destiné aux élèves et les aide à trouver les réponses. PixHelp Prof est destiné aux enseignants : il analyse les exercices, propose des pistes pédagogiques et gère les sessions de classe. Les deux outils sont complémentaires mais distincts.
+
+
+
Est-ce gratuit ? ▾
+
Oui, entièrement gratuit et open-source. Le code source est disponible sur GitHub. Pas d'abonnement, pas de compte obligatoire.
+
+
+
Est-ce une extension officielle de Pix ? ▾
+
Non. PixHelp Prof est un projet indépendant, non affilié à Pix (GIP Pix). Il est conçu pour fonctionner avec la plateforme Pix sans en faire partie officiellement.
+
+
+
Puis-je utiliser PixHelp Prof pendant une certification officielle Pix ? ▾
+
PixHelp Prof est conçu pour l'accompagnement pédagogique en classe, pas pour les certifications officielles. Comme toute ressource externe, son usage lors de certifications dépend du règlement en vigueur dans votre établissement.
+
+
+
+
+ +
+
+
+
Gratuit & open-source
+

Pas un simple outil,
un vrai allié pédagogique.

+

Conçu par des développeurs pour les enseignants — parce que accompagner des élèves sur Pix mérite un vrai support.

+ +
⚠️ Extension non officielle — non affiliée à Pix (1024pix)
+
+
+
+ - \ No newline at end of file + diff --git a/Website/src/terms.html b/Website/src/terms.html new file mode 100644 index 0000000..31c22bd --- /dev/null +++ b/Website/src/terms.html @@ -0,0 +1,108 @@ + + + + + + PixHelp – Conditions d'utilisation et confidentialité + + + + + ← Retour à l'accueil + +

Conditions d'utilisation & Politique de confidentialité

+
Dernière mise à jour : 3 avril 2026
+ +

Bienvenue sur PixHelp. Cette extension navigateur a été développée dans un cadre éducatif pour aider les utilisateurs de la plateforme Pix à trouver des ressources pédagogiques, sans jamais fournir de réponses toutes faites ni contourner les règles des certifications. L'utilisation de PixHelp implique l'acceptation pleine et entière des présentes conditions.

+ +

1. Conditions d'utilisation

+ +

1.1. Objet et champ d'application

+

PixHelp est une extension non officielle, conçue pour faciliter la recherche documentaire sur les épreuves Pix en Mode Libre uniquement. Elle ne remplace pas le travail personnel de l'élève et ne fournit aucune réponse automatisée. Son utilisation est strictement réservée à un usage pédagogique individuel.

+ +

1.2. Restrictions d'usage

+
    +
  • Interdiction pendant les certifications : L'extension détecte automatiquement la page /certifications et bloque son fonctionnement (floutage de la zone de certification). Toute tentative de contournement est interdite et contraire à l'éthique de l'examen. Toute tentative de tricherie à un examen officiel est passible de 5 ans d'interdiction de repassage à tout type d'examen.
    • +
  • Mode Focus : L'assistant de recherche est désactivé en Mode Focus, conformément aux règles de l'épreuve. Un message explicite informe l'utilisateur.
    • +
  • Pas de contournement technique : Il est interdit de modifier le code de l'extension pour supprimer les blocages ou détourner son usage.
    • +
  • Respect des droits de Pix : PixHelp n'altère pas le fonctionnement normal de la plateforme Pix et ne collecte aucune donnée personnelle sans consentement (voir section confidentialité).
    • +
+ +

1.3. Limitation de responsabilité

+

Le développeur de PixHelp décline toute responsabilité en cas d'utilisation abusive, de tricherie, ou de non-respect des conditions d'utilisation de Pix. L'extension est fournie "en l'état", sans garantie de disponibilité ou d'exhaustivité des ressources proposées. Les liens vers des sites tiers (NosDevoirs.fr, OpenClassrooms, etc.) sont fournis à titre indicatif ; leur contenu n'engage pas le développeur.

+ +

1.4. Droit applicable et modification

+

Les présentes conditions sont régies par le droit français. Le développeur se réserve le droit de modifier ces conditions à tout moment. Les utilisateurs seront informés via la page de l'extension ou le dépôt GitHub.

+ +

2. Politique de confidentialité

+ +

2.1. Principes généraux

+

PixHelp respecte la vie privée des utilisateurs et applique une collecte de données minimale. Cette politique détaille les traitements de données mis en œuvre par l'extension, en particulier dans le cadre de la fonctionnalité PixHelp Prof destinée aux enseignants.

+ +

2.2. Données traitées pour le suivi de session (PixHelp Prof)

+

Dans le cadre de la fonctionnalité de suivi de session (permettant à un enseignant de suivre un élève pendant une session d'assistance), certaines informations techniques et pédagogiques peuvent être envoyées vers un serveur sécurisé.

+

Ces données peuvent inclure :

+
    +
  • Identifiant de session temporaire (nom, prénom, pseudonyme fourni par l'enseignant ou l'élève).
    • +
  • Informations nécessaires au fonctionnement de la session en cours (questions posées, pourcentage de réussite, réponses apportées, identifiant de la session, temps passé).
    • +
  • Données liées à l'activité dans Pix durant la session (consultation de ressources, progression).
    • +
+ +

2.3. Stockage et serveur

+

Ces informations sont transmises à l'API suivante : https://api.maxlware.com.

+

Les données sont :

+
    +
  • utilisées uniquement pendant la durée de la session active ;
    • +
  • stockées de manière temporaire sur le serveur ;
    • +
  • automatiquement supprimées à la fin de la session.
    • +
+

Aucune donnée n'est conservée de façon permanente après la fin de la session.

+ +

2.4. Données locales (stockage navigateur)

+

Indépendamment du serveur, l'extension utilise l'API chrome.storage.sync (ou local) pour stocker uniquement :

+
    +
  • Votre préférence d'activation/désactivation de l'extension.
    • +
  • (Version Prof) Éventuellement des paramètres de session locaux (non personnels).
    • +
+

Ces données ne sont jamais transmises à un serveur externe (sauf la session explicitement partagée via PixHelp Prof).

+ +

2.5. Partage des données

+

Aucune donnée n'est vendue, partagée ou utilisée à des fins publicitaires ou commerciales. Les informations de session ne sont accessibles qu'à l'enseignant et à l'élève concernés pendant la durée de la session. Aucun tiers n'y a accès.

+ +

2.6. Sécurité

+

Les échanges avec le serveur https://api.maxlware.com sont effectués de manière sécurisée (HTTPS) afin de protéger les informations transmises pendant la session. Le serveur applique des mesures de sécurité standards (chiffrement, accès restreint, suppression automatique).

+ +

2.7. Absence de traçage et de cookies

+

PixHelp n'utilise aucun cookie, aucun pixel espion, aucune solution d'analyse d'audience (Google Analytics, etc.). Les seuls appels réseau sont ceux explicitement liés au fonctionnement de la session Prof (vers l'API) ou aux recherches Google déclenchées par l'utilisateur (ces requêtes sont alors soumises aux conditions de confidentialité de Google).

+ +

2.8. Permissions demandées – Justification

+
    +
  • activeTab et tabs : Pour détecter la page active (Pix, certification, orga.pix.fr) et adapter l'affichage du bouton flottant ou du tableau de bord.
    • +
  • scripting : Pour injecter le bouton d'aide et la fenêtre de chat dans les pages Pix.
    • +
  • storage : Pour sauvegarder vos préférences (activation/désactivation).
    • +
  • host_permissions (pix.fr, app.pix.fr, orga.pix.fr, api.maxlware.com) : Uniquement pour interagir avec ces sites et envoyer les données de session nécessaires.
    • +
+ +

2.9. Droits des utilisateurs (RGPD)

+

Conformément au Règlement Général sur la Protection des Données (RGPD), vous disposez d'un droit d'accès, de rectification et de suppression des données vous concernant. Pour l'exercer, contactez le développeur à l'adresse ci-dessous. Étant donné que les données de session sont éphémères et automatiquement supprimées, la fenêtre d'exercice de ces droits est limitée à la durée de la session active.

+ +

2.10. Données personnelles – Engagement

+

PixHelp Prof ne collecte pas de données personnelles sensibles en dehors du contexte strict de la session d'assistance. Aucune donnée n'est conservée au-delà de la session, et aucun profilage n'est effectué.

+ +

3. Contact et signalement

+

Pour toute question relative aux conditions d'utilisation ou à la confidentialité, ou pour signaler un abus, veuillez contacter :

+
+ Développeur : Maxlware
+ Email : contact@maxlware.com
+ GitHub : github.com/Maxlware-fr/PixHelp +
+ +

4. Acceptation des conditions

+

En installant et en utilisant PixHelp, vous reconnaissez avoir lu, compris et accepté l'intégralité des présentes conditions d'utilisation et de la politique de confidentialité. Si vous n'êtes pas d'accord, veuillez ne pas installer ou désinstaller immédiatement l'extension.

+ + + +