Fix FAQ to have section support, change the type to add a new section

Fix dark-mode toggle button (now works great)
This commit is contained in:
ZanzyTHEbar 2022-07-08 17:22:36 +01:00
parent 0b0493dafd
commit 9f029fc8f1
8 changed files with 55 additions and 105 deletions

View File

@ -5,60 +5,70 @@
answer: "To provide an open source, affordable VR eyetracker for VR Chat and more."
hyper_link: ""
link_description: ""
type: "general"
faq_link_id: 1
- question: "What headsets will be supported?"
answer: "Any headset that the hardware can fit in with community mounts or a mount you design."
hyper_link: ""
link_description: ""
type: "general"
faq_link_id: 2
- question: "How will this work?"
answer: "Currently, a camera is mounted inside the headset for each eye. The camera streams through wifi to a PC client which processes and sends eye tracking data to VR Chat."
hyper_link: ""
link_description: ""
type: "general"
faq_link_id: 3
- question: "What features will be supported?"
answer: "The goal is eye tracking with eye openness, and some form of pupil dilation. A far away aspiration of this project is some form of weak foveated rendering because it's cool and any small performance increase in VR is welcome."
hyper_link: ""
link_description: ""
type: "general"
faq_link_id: 4
- question: "When will this be completed?"
answer: "When it's done 😉 I have a semi busy life so development may slow and speed up inconsistently. I have a goal to be done with all base features in June."
hyper_link: ""
link_description: ""
type: "general"
faq_link_id: 5
- question: "Will IR damage my eyes?"
answer: "This project has safety in mind. If you do all of the safety measures that we put into place and visually test the amount of IR light you will be fine. Please note we have not finished development of all safety stuff so be careful, aaaa ."
hyper_link: "https://dammedia.osram.info/media/bin/osram-dam-2496608/AN002_Details%20on%20photobiological%20safety%20of%20LED%20light%20sources.pdf"
link_description: " here is a pdf with safety information"
type: "general"
faq_link_id: 6
- question: "How expensive will this be?"
answer: "My goal is to keep it as cheap as possible with around $75 as the absolute max, with current projections being around $25-40"
hyper_link: ""
link_description: ""
type: "general"
faq_link_id: 7
- question: "How do I set up my avatar?"
answer: "Check out the VR Chat face tracking wiki on our github. Keep in mind that we currently only support float parameters. aaaa "
hyper_link:
link_description:
hyper_link: ""
link_description: ""
type: "general"
faq_link_id: 8
- question: "What hardware does this use?/How do I build?"
answer: "Testing is still being done to validate our current hardware choice, no hardware has been fully confirmed therefore I cannot recommend you buy parts and assemble one yourself unless you are good with losing money and are going to be actively contributing to the project. This stands true still as of 5/3."
hyper_link: ""
link_description: ""
type: "general"
faq_link_id: 9
- question: "Where's the docs?"
answer: "All of our documentation is located on this website, all future documentation will be found here as well."
hyper_link: ""
link_description: ""
type: "general"
faq_link_id: 10
---

View File

@ -1,17 +1,17 @@
<style>
.accordion {
.accordion-{{ include.type }} {
width: 100%;
margin: 1px auto;
padding: 5px 5px;
}
.accordion .container {
.accordion-{{ include.type }} .accordion-container {
position: relative;
margin: 5px 5px;
}
/* Positions the labels relative to the .container. Adds padding to the top and bottom and increases font size. Also makes its cursor a pointer */
.accordion .question {
.accordion-{{ include.type }} .question-{{ include.type }} {
position: relative;
padding: 5px 0;
font-size: 30px;
@ -19,7 +19,7 @@
}
/* Positions the plus sign 5px from the right. Centers it using the transform property. */
.accordion .question::before {
.accordion-{{ include.type }} .question-{{ include.type }}::before {
content: '\2304';
position: absolute;
top: 50%;
@ -29,7 +29,7 @@
}
/* Hides the content (height: 0), decreases font size, justifies text and adds transition */
.accordion .answer {
.accordion-{{ include.type }} .answer-{{ include.type }} {
position: relative;
height: 0;
font-size: 20px;
@ -40,41 +40,41 @@
}
/* Adds a horizontal line between the contents */
.accordion hr {
.accordion-{{ include.type }} hr {
width: 100%;
margin-left: 0;
border: 1px solid grey;
}
/* Unhides the content part when active. Sets the height */
.accordion .accordion-container.active .answer {
.accordion-{{ include.type }} .accordion-container.active .answer-{{ include.type }} {
height: 180px;
}
/* Changes from plus sign to negative sign once active */
.accordion .accordion-container.active .question::before {
.accordion-{{ include.type }} .accordion-container.active .question{{ include.type }}::before {
content: '';
font-size: 30px;
}
</style>
<h1 class="fs-6 fw-500" align="center">Frequently Asked Questions <br> Welcome to our FAQ!</h1>
<div class="accordion-body">
<div class="accordion-body-{{ include.type }}">
{% for faq in site.data.faq_yaml.frequently_asked_questions %}
{% if faq.type == include.type %}
{% if faq.question != null and faq.question != "" %}
<div class="accordion">
<div class="accordion-{{ include.type }}">
<hr>
<div class="accordion-container">
<div class="question fw-400">
<div class="accordion-container" onclick=" this.classList.toggle('active');">
<div class="question-{{ include.type }} fw-400">
<h1 class="fs-5 fw-500">
{{ faq.question }}
</h1>
</div>
<div class="answer">
<div class="answer-{{ include.type }}">
<blockquote>
<span class="answerspan{{ faq.faq_link_id }}">
{%- capture editable_part -%}
{% capture editable_part %}
<a href="{{ faq.hyper_link }}" target="_blank">{{ faq.link_description }}</a>
{%- endcapture -%}
{% endcapture %}
{% if faq.answer contains 'aaaa ' %}
{{ faq.answer | replace: 'aaaa ', editable_part }}
{% else %}
@ -86,14 +86,6 @@
</div>
</div>
{% endif %}
{% endif %}
{% endfor %}
</div>
<script type="text/javascript">
const accordion = document.getElementsByClassName('accordion-container');
for (i = 0; i < accordion.length; i++) {
accordion[i].addEventListener('click', function () {
this.classList.toggle('active');
})
}
</script>
</div>

View File

@ -2,8 +2,6 @@
<link href="https://fonts.googleapis.com/css?family=Fira+Mono" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.iconify.design/2/2.2.1/iconify.min.js"></script>
<link href="{{'/assets/css/xterm.css' | relative_url }}" rel="stylesheet">
<script src="{{'/assets/js/custom/serialmonitor/lib/xterm.js' | relative_url }}"></script>
<script type="module" src="https://unpkg.com/esp-web-tools@8.0.6/dist/web/install-button.js?module"></script>
<!-- Below is Favicon Stuffs -->

View File

@ -1,5 +1,20 @@
<!-- Legacy Button -->
<!-- <ul>
<ul>
<a href="javascript:toggleDetect()" title="Switching Schemes" class="btn btn-mode fs-2 mb-1 mb-md-0 mr-0"
id="switch-mode">Dark Mode</a>
</ul> -->
</ul>
<script type="text/javascript">
const switch_scheme = document.getElementById("switch-mode");
var isClicked = false;
async function toggleDetect() {
if (isClicked == false) {
isClicked = true;
switch_scheme.textContent = "Dark Mode";
localStorage.setItem("theme", "light");
} else {
isClicked = false;
switch_scheme.textContent = "Light Mode";
localStorage.setItem("theme", "dark");
}
await switchScheme();
}
</script>

View File

@ -1 +1,6 @@
async function switchScheme() {
localStorage.getItem('theme') === 'dark' ? jtd.setTheme("eyetrackvr") : jtd.setTheme("light");
}
window.onload = function () {
switchScheme();
};

View File

@ -6,4 +6,4 @@ has_children: false
permalink: /faq/
---
{% include custom/FAQ/faq_template.html %}
{% include custom/FAQ/faq_template.html type="general" %}

View File

@ -1,19 +1,3 @@
/* Legacy function */
const switch_scheme = document.getElementById("switch-mode");
var isClicked = false;
async function toggleDetect() {
if (isClicked == false) {
isClicked = true;
createCookie("isClicked", true, 365);
switch_scheme.textContent = "Light Mode";
} else {
isClicked = false;
createCookie("isClicked", false, 365);
switch_scheme.textContent = "Dark Mode";
}
}
/* Browser detection of color scheme to change the discord widget */
var url = window.location.pathname;

View File

@ -1,54 +0,0 @@
(() => {
const chips = {
d1: {
width: 1722,
height: 1552,
base: "d1_Base.png",
options: [
[
"imu",
(imu) => (imu == "bno" ? "d1_BNO-Main.png" : "d1_MPU-Main.png"),
],
[
"aux",
() => {
const box = document.querySelector("input[name='d1-imu']:checked");
return box && box.value == "bno"
? "d1_BNO-Aux.png"
: "d1_MPU-Aux.png";
},
],
["battery-sense", () => "d1_Battery-Sense.png"],
["charge-diodes", () => "d1_Charge-Diodes.png"],
],
},
};
Object.entries(chips).forEach(([chip, config]) => {
const div = document.getElementById(chip);
div.style.paddingTop = (config.height / config.width) * 100 + "%";
});
const bgGen = () => {
Object.entries(chips).forEach(([chip, config]) => {
const bgs = [config.base];
config.options.forEach(([optName, optVal]) => {
const box = document.querySelector(
'input[name="' + chip + "-" + optName + '"]:checked'
);
if (box) {
bgs.push(optVal(box.value));
}
});
const div = document.getElementById(chip);
div.style.background = bgs
.map((bg) => "url(../assets/img/" + bg + ") 0 0/100% 100%")
.reverse()
.join(",");
});
};
bgGen();
document.querySelectorAll("input").forEach((input) => {
input.addEventListener("change", bgGen);
});
})();