Skip to content

Commit 2c7ad9a

Browse files
fullstackjamfullstackjam
committed
feat(website): replace Command Options with FAQ section
- Remove verbose command options listing - Add 5 common FAQ questions with collapsible answers: - System support (macOS 12+, Apple Silicon & Intel) - Script safety (open source, dry-run) - Customization (8 presets, edit packages.sh) - Uninstall/rollback options - Privacy (no telemetry) - Clean accordion-style UI
1 parent fd12772 commit 2c7ad9a

1 file changed

Lines changed: 91 additions & 113 deletions

File tree

‎website/index.html‎

Lines changed: 91 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -586,91 +586,75 @@
586586
color: #60a5fa;
587587
}
588588

589-
/* Options Section - Redesigned */
590-
.options-section {
589+
/* FAQ Section */
590+
.faq-section {
591591
margin-bottom: 80px;
592592
}
593593

594-
.options-container {
595-
max-width: 900px;
594+
.faq-container {
595+
max-width: 700px;
596596
margin: 0 auto;
597-
display: grid;
598-
grid-template-columns: repeat(3, 1fr);
599-
gap: 24px;
600-
}
601-
602-
@media (max-width: 900px) {
603-
.options-container {
604-
grid-template-columns: repeat(2, 1fr);
605-
}
606-
}
607-
608-
@media (max-width: 600px) {
609-
.options-container {
610-
grid-template-columns: 1fr;
611-
}
612-
}
613-
614-
.options-group {
615-
background: var(--bg-secondary);
616-
border: 1px solid var(--border);
617-
border-radius: 16px;
618-
padding: 24px;
619597
}
620598

621-
.options-group-header {
622-
display: flex;
623-
align-items: center;
624-
gap: 10px;
625-
margin-bottom: 20px;
626-
padding-bottom: 16px;
599+
.faq-item {
627600
border-bottom: 1px solid var(--border);
628601
}
629602

630-
.options-group-icon {
631-
width: 36px;
632-
height: 36px;
633-
border-radius: 8px;
603+
.faq-question {
604+
width: 100%;
605+
padding: 20px 0;
606+
background: none;
607+
border: none;
608+
text-align: left;
609+
cursor: pointer;
634610
display: flex;
611+
justify-content: space-between;
635612
align-items: center;
636-
justify-content: center;
637-
font-size: 1.1rem;
638-
background: rgba(255,255,255,0.05);
613+
gap: 16px;
639614
}
640615

641-
.options-group-title {
642-
font-size: 0.9rem;
643-
font-weight: 600;
616+
.faq-question span {
617+
font-size: 1rem;
618+
font-weight: 500;
644619
color: var(--text-primary);
645-
letter-spacing: -0.01em;
646620
}
647621

648-
.option-item {
649-
padding: 12px 0;
650-
border-bottom: 1px solid rgba(255,255,255,0.05);
622+
.faq-question svg {
623+
width: 20px;
624+
height: 20px;
625+
color: var(--text-muted);
626+
transition: transform 0.2s;
627+
flex-shrink: 0;
651628
}
652629

653-
.option-item:last-child {
654-
border-bottom: none;
655-
padding-bottom: 0;
630+
.faq-item.active .faq-question svg {
631+
transform: rotate(45deg);
656632
}
657633

658-
.option-item:first-of-type {
659-
padding-top: 0;
634+
.faq-answer {
635+
max-height: 0;
636+
overflow: hidden;
637+
transition: max-height 0.3s ease;
660638
}
661639

662-
.option-item code {
663-
font-family: 'JetBrains Mono', monospace;
664-
color: var(--accent);
665-
font-size: 0.8rem;
666-
display: block;
667-
margin-bottom: 4px;
640+
.faq-item.active .faq-answer {
641+
max-height: 200px;
668642
}
669643

670-
.option-item p {
671-
color: var(--text-muted);
672-
font-size: 0.8rem;
673-
line-height: 1.4;
644+
.faq-answer p {
645+
padding-bottom: 20px;
646+
color: var(--text-secondary);
647+
font-size: 0.95rem;
648+
line-height: 1.7;
649+
}
650+
651+
.faq-answer code {
652+
font-family: 'JetBrains Mono', monospace;
653+
background: var(--bg-tertiary);
654+
padding: 2px 6px;
655+
border-radius: 4px;
656+
font-size: 0.85rem;
657+
color: var(--accent);
674658
}
675659

676660
/* Footer */
@@ -943,66 +927,55 @@ <h3>ai <span class="badge new">New</span></h3>
943927
</div>
944928
</section>
945929

946-
<section class="options-section">
930+
<section class="faq-section">
947931
<div class="section-header">
948-
<h2 class="section-title">Command Options</h2>
949-
<p class="section-subtitle">Customize your installation with these flags</p>
932+
<h2 class="section-title">FAQ</h2>
933+
<p class="section-subtitle">Common questions about OpenBoot</p>
950934
</div>
951-
<div class="options-container">
952-
<div class="options-group">
953-
<div class="options-group-header">
954-
<div class="options-group-icon">🔧</div>
955-
<span class="options-group-title">Setup</span>
956-
</div>
957-
<div class="option-item">
958-
<code>--preset NAME</code>
959-
<p>Choose preset (minimal, standard, full, devops, frontend, data, mobile, ai)</p>
960-
</div>
961-
<div class="option-item">
962-
<code>--shell install</code>
963-
<p>Install Oh-My-Zsh with plugins</p>
964-
</div>
965-
<div class="option-item">
966-
<code>--macos configure</code>
967-
<p>Configure macOS developer preferences</p>
935+
<div class="faq-container">
936+
<div class="faq-item">
937+
<button class="faq-question" onclick="toggleFaq(this)">
938+
<span>What systems are supported?</span>
939+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
940+
</button>
941+
<div class="faq-answer">
942+
<p>OpenBoot supports macOS 12.0 (Monterey) and later, on both Apple Silicon (M1/M2/M3) and Intel Macs. It automatically detects your architecture and installs the correct packages.</p>
968943
</div>
969944
</div>
970-
971-
<div class="options-group">
972-
<div class="options-group-header">
973-
<div class="options-group-icon">🔄</div>
974-
<span class="options-group-title">Maintenance</span>
975-
</div>
976-
<div class="option-item">
977-
<code>--update</code>
978-
<p>Update Homebrew and all packages</p>
979-
</div>
980-
<div class="option-item">
981-
<code>--rollback</code>
982-
<p>Restore backed up files</p>
983-
</div>
984-
<div class="option-item">
985-
<code>--resume</code>
986-
<p>Continue interrupted installation</p>
945+
<div class="faq-item">
946+
<button class="faq-question" onclick="toggleFaq(this)">
947+
<span>Is it safe to run scripts from the internet?</span>
948+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
949+
</button>
950+
<div class="faq-answer">
951+
<p>OpenBoot is 100% open source. You can inspect the code on GitHub before running. We also support <code>--dry-run</code> to preview exactly what will be installed without making changes.</p>
987952
</div>
988953
</div>
989-
990-
<div class="options-group">
991-
<div class="options-group-header">
992-
<div class="options-group-icon">⚙️</div>
993-
<span class="options-group-title">Mode</span>
954+
<div class="faq-item">
955+
<button class="faq-question" onclick="toggleFaq(this)">
956+
<span>Can I customize what gets installed?</span>
957+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
958+
</button>
959+
<div class="faq-answer">
960+
<p>Yes! Choose from 8 presets tailored for different workflows, or use the interactive mode to customize packages. You can also edit <code>lib/packages.sh</code> to create your own preset.</p>
994961
</div>
995-
<div class="option-item">
996-
<code>--silent</code>
997-
<p>Non-interactive for CI/automation</p>
998-
</div>
999-
<div class="option-item">
1000-
<code>--dry-run</code>
1001-
<p>Preview without installing</p>
962+
</div>
963+
<div class="faq-item">
964+
<button class="faq-question" onclick="toggleFaq(this)">
965+
<span>How do I undo changes or uninstall?</span>
966+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
967+
</button>
968+
<div class="faq-answer">
969+
<p>OpenBoot automatically backs up your files before making changes. Run <code>./install.sh --rollback</code> to restore them. Packages can be removed with <code>brew uninstall</code>.</p>
1002970
</div>
1003-
<div class="option-item">
1004-
<code>--help</code>
1005-
<p>Show all available options</p>
971+
</div>
972+
<div class="faq-item">
973+
<button class="faq-question" onclick="toggleFaq(this)">
974+
<span>Does it collect any data?</span>
975+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
976+
</button>
977+
<div class="faq-answer">
978+
<p>No. OpenBoot has zero analytics, zero telemetry, and zero network calls except for downloading packages from official sources. Everything runs locally on your machine.</p>
1006979
</div>
1007980
</div>
1008981
</div>
@@ -1056,6 +1029,11 @@ <h2 class="section-title">Command Options</h2>
10561029
});
10571030
});
10581031
});
1032+
1033+
function toggleFaq(button) {
1034+
const item = button.parentElement;
1035+
item.classList.toggle('active');
1036+
}
10591037
</script>
10601038
</body>
10611039
</html>

0 commit comments

Comments
 (0)