Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feat/devices page #41

Merged
merged 5 commits into from
Aug 17, 2023
Merged

Feat/devices page #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
33413a1
feat: add empty devices page annd rename game_page
RezenkovD Aug 17, 2023
f8ba964
feat: add background
RezenkovD Aug 17, 2023
761c8b9
feat: add description adn photo
RezenkovD Aug 17, 2023
cd4eed8
feat: add faq
RezenkovD Aug 17, 2023
6ba7b1d
fix: questions
RezenkovD Aug 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion games/views.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
)


def game_page(request):
def games_page(request):
if request.method == "POST":
form = BookingForm(request.POST)
if not form.is_valid():
Expand Down
4 changes: 2 additions & 2 deletions users/templates/base/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
<a href="{% url 'site:games' %}">Ігри</a>
</li>
<li class="head-item">
<a href="#">Пристрої</a>
<a href="{% url 'site:devices' %}">Пристрої</a>
</li>
<li class="head-item">
<a href="#">Ціни</a>
Expand Down Expand Up @@ -192,7 +192,7 @@
<div class="foot-second">
<div class="foot-second-1">
<a href=" {% url 'site:games' %}" class="foot-item">Ігри</a>
<a href="#" class="foot-item">Пристрої</a>
<a href="{% url 'site:devices' %}" class="foot-item">Пристрої</a>
<a href="#" class="foot-item">Ціни</a>
</div>
<div class="foot-second-2">
Expand Down
213 changes: 213 additions & 0 deletions vr_club_site/templates/site/devices.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,213 @@
{% extends "base/base.html" %}
{% load static %}
{% load socialaccount %}
{% block head %}
<link rel="stylesheet" href="{% static 'site/style/devices.css' %}">
{% endblock %}
{% block intro_bg_block %}
<div class="intro_bg_block">
<div class="ellipse-1"></div>
<div class="ellipse-3"></div>
<div class="ellipse-4"></div>
{% include 'site/svg-objects/devices-first-object.html' %}
{% include 'site/svg-objects/devices-second-object.html' %}
{% include 'site/svg-objects/devices-third-object.html' %}
</div>
{% endblock %}
{% block main %}
<div class="oculus-meta-quest-2">
<span>
<span class="oculus-meta-quest-2-span">Oculus Meta Quest 2</span>
<span class="oculus-meta-quest-2-span2">до ваших послуг!</span>
</span>
</div>
<div class="facebook-vr-oculus-quest-2-wi-fi">
Цей комплект для віртуальної реальності від компанії Facebook є сучасним та
комфортним рішенням для гри в VR. Ключовою особливістю є повна відсутність
кабелів. А отже, Oculus Quest 2 не потребує постійного підключення до ПК. Ми
просто під’єднуємо приставку до Wi-fi, а ви насолоджуєтесь грою!
</div>
<div class="photo-back-device">
<img class="device-helmet" src="{% static 'site/static_files/3qJcNeo5N672p7qSwoGzYo-removebg.png' %}"/>
</div>
<div class="rectangle-32"></div>
<div class="questions">Поширені запитання</div>
<section id="faq">
<div class="accordion">
<div class="accordion-item">
<div class="accordion-title">
<div class="text">Чи нудить в VR?</div>
<i class="material-icons add">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<line x1="10.0898" y1="-4.37114e-08" x2="10.0898" y2="20" stroke="#FBFBFB" stroke-width="2"></line>
<line x1="20" y1="10.0908" y2="10.0908" stroke="#FBFBFB" stroke-width="2"></line>
</svg>
</i>
<i class="material-icons remove">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<line x1="20" y1="10.0908" y2="10.0908" stroke="#FBFBFB" stroke-width="2"></line>
</svg>
</i>
</div>
<div class="accordion-content">
<p>
Це найчастіше питання.
Коротко: якщо немає відомих вам собисто медичних
протипоказань - сміливо приходьте і
ми підберемо для вас гру.
</p>
</div>
</div>
<div class="accordion-item">
<div class="accordion-title">
<div class="text">Чи VR це боляче?</div>
<i class="material-icons add">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<line x1="10.0898" y1="-4.37114e-08" x2="10.0898" y2="20" stroke="#FBFBFB" stroke-width="2"></line>
<line x1="20" y1="10.0908" y2="10.0908" stroke="#FBFBFB" stroke-width="2"></line>
</svg>
</i>
<i class="material-icons remove">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<line x1="20" y1="10.0908" y2="10.0908" stroke="#FBFBFB" stroke-width="2"></line>
</svg>
</i>
</div>
<div class="accordion-content">
<p>
Це найчастіше питання.
Коротко: якщо немає відомих вам собисто медичних
протипоказань - сміливо приходьте і
ми підберемо для вас гру.
</p>
</div>
</div>
<div class="accordion-item">
<div class="accordion-title">
<div class="text">Як проходить гра? VR це складно?</div>
<i class="material-icons add">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<line x1="10.0898" y1="-4.37114e-08" x2="10.0898" y2="20" stroke="#FBFBFB" stroke-width="2"></line>
<line x1="20" y1="10.0908" y2="10.0908" stroke="#FBFBFB" stroke-width="2"></line>
</svg>
</i>
<i class="material-icons remove">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<line x1="20" y1="10.0908" y2="10.0908" stroke="#FBFBFB" stroke-width="2"></line>
</svg>
</i>
</div>
<div class="accordion-content">
<p>
Це найчастіше питання.
Коротко: якщо немає відомих вам собисто медичних
протипоказань - сміливо приходьте і
ми підберемо для вас гру.
</p>
</div>
</div>
<div class="accordion-item">
<div class="accordion-title">
<div class="text">Чи можна знімати шолом під час гри?</div>
<i class="material-icons add">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<line x1="10.0898" y1="-4.37114e-08" x2="10.0898" y2="20" stroke="#FBFBFB" stroke-width="2"></line>
<line x1="20" y1="10.0908" y2="10.0908" stroke="#FBFBFB" stroke-width="2"></line>
</svg>
</i>
<i class="material-icons remove">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<line x1="20" y1="10.0908" y2="10.0908" stroke="#FBFBFB" stroke-width="2"></line>
</svg>
</i>
</div>
<div class="accordion-content">
<p>
Це найчастіше питання.
Коротко: якщо немає відомих вам собисто медичних
протипоказань - сміливо приходьте і
ми підберемо для вас гру.
</p>
</div>
</div>
<div class="accordion-item">
<div class="accordion-title">
<div class="text">Скільки часу поспіль можна грати в VR?</div>
<i class="material-icons add">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<line x1="10.0898" y1="-4.37114e-08" x2="10.0898" y2="20" stroke="#FBFBFB" stroke-width="2"></line>
<line x1="20" y1="10.0908" y2="10.0908" stroke="#FBFBFB" stroke-width="2"></line>
</svg>
</i>
<i class="material-icons remove">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<line x1="20" y1="10.0908" y2="10.0908" stroke="#FBFBFB" stroke-width="2"></line>
</svg>
</i>
</div>
<div class="accordion-content">
<p>
Це найчастіше питання.
Коротко: якщо немає відомих вам собисто медичних
протипоказань - сміливо приходьте і
ми підберемо для вас гру.
</p>
</div>
</div>
<div class="accordion-item">
<div class="accordion-title">
<div class="text">Чи можна грати в VR людям з поганим зором?</div>
<i class="material-icons add">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<line x1="10.0898" y1="-4.37114e-08" x2="10.0898" y2="20" stroke="#FBFBFB" stroke-width="2"></line>
<line x1="20" y1="10.0908" y2="10.0908" stroke="#FBFBFB" stroke-width="2"></line>
</svg>
</i>
<i class="material-icons remove">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<line x1="20" y1="10.0908" y2="10.0908" stroke="#FBFBFB" stroke-width="2"></line>
</svg>
</i>
</div>
<div class="accordion-content">
<p>
Це найчастіше питання.
Коротко: якщо немає відомих вам собисто медичних
протипоказань - сміливо приходьте і
ми підберемо для вас гру.
</p>
</div>
</div>
</div>
</section>
{% endblock %}
{% block script %}
<script>
const questions = document.getElementsByClassName('accordion-title')//Gets all the questions (plus icon)

for (const question of questions) {
const answer = question.parentElement.querySelector('.accordion-content')
const remove = question.parentElement.querySelector(".remove")
const add = question.parentElement.querySelector(".add")
let open = false //Variable to check if the answer is visible or not

function openAnswer() {
if (open == true) { //If you click the question while the answer is visible it will stop being visible and open will change it's value to false
add.style.display = "block";
remove.style.display = "none";
answer.style.overflow = "hidden";
answer.style.maxHeight = '0';
open = false;
} else { //If you click the question while the answer is not visible it will start being visible and open will change it's value to true
add.style.display = "none";
remove.style.display = "block";
answer.style.maxHeight = "300px";
answer.style.overflow = "visible";
open = true;
}
}

question.addEventListener('click', openAnswer)
}
</script>
{% endblock %}
Binary file added vr_club_site/templates/site/static_files/3qJcNeo5N672p7qSwoGzYo-removebg.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Loading