diff --git a/games/views.py b/games/views.py index dc7dd8a..10013e4 100644 --- a/games/views.py +++ b/games/views.py @@ -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(): diff --git a/users/templates/base/base.html b/users/templates/base/base.html index f497e02..41b5660 100644 --- a/users/templates/base/base.html +++ b/users/templates/base/base.html @@ -33,7 +33,7 @@ Ігри
  • - Пристрої + Пристрої
  • Ціни @@ -192,7 +192,7 @@
    Ігри - Пристрої + Пристрої Ціни
    diff --git a/vr_club_site/templates/site/devices.html b/vr_club_site/templates/site/devices.html new file mode 100644 index 0000000..f7b0e70 --- /dev/null +++ b/vr_club_site/templates/site/devices.html @@ -0,0 +1,213 @@ +{% extends "base/base.html" %} +{% load static %} +{% load socialaccount %} +{% block head %} + +{% endblock %} +{% block intro_bg_block %} +
    +
    +
    +
    + {% include 'site/svg-objects/devices-first-object.html' %} + {% include 'site/svg-objects/devices-second-object.html' %} + {% include 'site/svg-objects/devices-third-object.html' %} +
    +{% endblock %} +{% block main %} +
    + + Oculus Meta Quest 2 + до ваших послуг! + +
    + +
    + +
    +
    +
    Поширені запитання
    +
    +
    +
    +
    +
    Чи нудить в VR?
    + + + + + + + + + + + +
    +
    +

    + Це найчастіше питання. + Коротко: якщо немає відомих вам собисто медичних + протипоказань - сміливо приходьте і + ми підберемо для вас гру. +

    +
    +
    +
    +
    +
    Чи VR це боляче?
    + + + + + + + + + + + +
    +
    +

    + Це найчастіше питання. + Коротко: якщо немає відомих вам собисто медичних + протипоказань - сміливо приходьте і + ми підберемо для вас гру. +

    +
    +
    +
    +
    +
    Як проходить гра? VR це складно?
    + + + + + + + + + + + +
    +
    +

    + Це найчастіше питання. + Коротко: якщо немає відомих вам собисто медичних + протипоказань - сміливо приходьте і + ми підберемо для вас гру. +

    +
    +
    +
    +
    +
    Чи можна знімати шолом під час гри?
    + + + + + + + + + + + +
    +
    +

    + Це найчастіше питання. + Коротко: якщо немає відомих вам собисто медичних + протипоказань - сміливо приходьте і + ми підберемо для вас гру. +

    +
    +
    +
    +
    +
    Скільки часу поспіль можна грати в VR?
    + + + + + + + + + + + +
    +
    +

    + Це найчастіше питання. + Коротко: якщо немає відомих вам собисто медичних + протипоказань - сміливо приходьте і + ми підберемо для вас гру. +

    +
    +
    +
    +
    +
    Чи можна грати в VR людям з поганим зором?
    + + + + + + + + + + + +
    +
    +

    + Це найчастіше питання. + Коротко: якщо немає відомих вам собисто медичних + протипоказань - сміливо приходьте і + ми підберемо для вас гру. +

    +
    +
    +
    +
    +{% endblock %} +{% block script %} + +{% endblock %} \ No newline at end of file diff --git a/vr_club_site/templates/site/static_files/3qJcNeo5N672p7qSwoGzYo-removebg.png b/vr_club_site/templates/site/static_files/3qJcNeo5N672p7qSwoGzYo-removebg.png new file mode 100644 index 0000000..1ec5a3b Binary files /dev/null and b/vr_club_site/templates/site/static_files/3qJcNeo5N672p7qSwoGzYo-removebg.png differ diff --git a/vr_club_site/templates/site/style/devices.css b/vr_club_site/templates/site/style/devices.css new file mode 100644 index 0000000..06e5945 --- /dev/null +++ b/vr_club_site/templates/site/style/devices.css @@ -0,0 +1,420 @@ +.intro_bg_block { + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + overflow-x: clip; +} + +.ellipse-1, +.ellipse-1 * { + box-sizing: border-box; +} +.ellipse-1 { + background: #ef7d1e; + border-radius: 50%; + width: 350px; + height: 350px; + position: absolute; + filter: blur(200px); + top: 274px; + left: 78px; +} + +.ellipse-3, +.ellipse-3 * { + box-sizing: border-box; +} +.ellipse-3 { + background: #00a3ff; + border-radius: 50%; + width: 371px; + height: 371px; + position: absolute; + filter: blur(200px); + top: 608px; + left: 1524px; + z-index: 5; +} + +.ellipse-4, +.ellipse-4 * { + box-sizing: border-box; +} +.ellipse-4 { + background: #00a3ff; + border-radius: 50%; + opacity: 0.800000011920929; + width: 371px; + height: 371px; + position: absolute; + filter: blur(200px); + top: 1416px; + left: -60px; + z-index: 5; +} + + +.first-object, +.first-object * { + box-sizing: border-box; +} +.first-object { + position: absolute; + transform: translate(-503px, -335px); + overflow: visible; + opacity: 0.11999999731779099; + z-index: 0; +} + +.second-object, +.second-object * { + box-sizing: border-box; +} +.second-object { + position: absolute; + transform: translate(955px, 163px); + overflow: visible; + opacity: 0.11999999731779099; + z-index: 0; +} + +.third-object, +.third-object * { + box-sizing: border-box; +} +.third-object { + position: absolute; + transform: translate(-262px, -404px); + overflow: visible; + opacity: 0.11999999731779099; + z-index: 0; +} + +.oculus-meta-quest-2, +.oculus-meta-quest-2 * { + box-sizing: border-box; +} +.oculus-meta-quest-2 { + margin-top: 90px; + text-align: center; + font: 700 48px "Montserrat", sans-serif; + position: relative; + max-width: 780px; + height: auto; + margin-right: auto; + margin-left: auto; +} +.oculus-meta-quest-2-span { + color: #4fb4fe; + font: 700 48px "Montserrat", sans-serif; +} +.oculus-meta-quest-2-span2 { + color: #ffffff; + font: 700 48px "Montserrat", sans-serif; +} + +.facebook-vr-oculus-quest-2-wi-fi { + margin-top: 24px; + color: #ffffff; + text-align: center; + font: 500 24px "Montserrat", sans-serif; + position: relative; + max-width: 1043px; + width: auto; + max-height: 119px; + height: auto; + margin-right: auto; + margin-left: auto; +} + +.photo-back-device { + text-align: center; + margin-top: 24px; + margin-left: auto; + margin-right: auto; + width: auto; + height: auto; + z-index: 1; + position: sticky; +} + +.device-helmet { + width: auto; + height: auto; + max-height: 100%; + max-width: 100%; +} +.rectangle-32, +.rectangle-32 * { + box-sizing: border-box; +} +.rectangle-32 { + background: linear-gradient(1.94deg, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 85%); + width: 100%; + height: 497px; + position: absolute; + margin-top: -325px; + z-index: 1; +} + +.questions { + margin-top: 51px; + width: auto; + height: auto; + color: #FFF; + text-align: center; + font-family: Montserrat, serif; + font-size: 36px; + font-style: normal; + font-weight: 700; + line-height: normal; + position: relative; + z-index: 5; +} + +/*FAQ section, where the accordion is kept, including section specific css*/ +#faq{ + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; +} + +#faq .add{ /*Add is the name for the plus icon*/ + display: block; +} + +#faq .remove{ /*Remove is the name for the less icon*/ + display: none; +} + +#faq i{ + margin-top: auto; + margin-bottom: auto; + margin-right: 20px; +} + +/*Accordion container and each item*/ +.accordion{ + max-width: 845px; + width: 100%; + z-index: 5; + margin-top: 40px; + margin-bottom: 104px; +} + +.accordion-item{ + margin-bottom: 12px; +} + +/*Styles for the question*/ + +.accordion-title{ + display: flex; + align-items: center; + justify-content: space-between; + + width: 100%; + height: 56px; + + cursor: pointer; + transition-duration: 0.5s; + + border-radius: 8px; + background: rgba(79, 180, 254, 0.2); +} + +.accordion-title .text { + margin-left: 20px; + color: #FFF; + font-family: Montserrat, serif; + font-size: 24px; + font-style: normal; + font-weight: 500; + line-height: normal; +} + +.accordion-content{ + max-height: 0; + overflow: hidden; + position: relative; + transition: max-height 0.6s; + color: #FFF; + font-family: Montserrat, serif; + font-size: 24px; + font-style: normal; + font-weight: 500; + line-height: normal; +} + +@media screen and (max-width: 768px) { + + .ellipse-1 { + background: #ef7d1e; + border-radius: 50%; + width: 165px; + height: 165px; + position: absolute; + filter: blur(125px); + top: 502px; + left: 306px; + z-index: 5; + } + + + .ellipse-3 { + background: #00a3ff; + border-radius: 50%; + width: 178px; + height: 178px; + position: absolute; + filter: blur(125px); + top: -66px; + left: -55px; + } + + + .ellipse-4 { + background: #00a3ff; + border-radius: 50%; + width: 178px; + height: 178px; + position: absolute; + filter: blur(125px); + top: 873px; + left: -55px; + } + + .first-object { + display: none; + } + + .second-object { + position: absolute; + transform: rotate(114deg); + top: -1073px; + left: -832px; + overflow: visible; + opacity: 0.11999999731779099; + z-index: 0; + } + + .third-object { + display: none; + } + + .oculus-meta-quest-2 { + margin-top: 54px; + text-align: center; + font: 700 28px "Montserrat", sans-serif; + position: relative; + width: 327px; + height: auto; + } + .oculus-meta-quest-2-span { + color: #4fb4fe; + font: 700 28px "Montserrat", sans-serif; + } + .oculus-meta-quest-2-span2 { + color: #ffffff; + font: 700 28px "Montserrat", sans-serif; + } + + .facebook-vr-oculus-quest-2-wi-fi { + margin-top: 20px; + color: #ffffff; + text-align: center; + font: 500 16px "Montserrat", sans-serif; + position: relative; + max-width: 343px; + width: auto; + max-height: 184px; + height: auto; + margin-right: auto; + margin-left: auto; + } + + .rectangle-32 { + background: linear-gradient(1.94deg, rgba(0, 0, 0, 1) 1%, rgba(0, 0, 0, 0) 75%); + width: 100%; + height: 375px; + position: absolute; + margin-top: -320px; + z-index: 1; + } + + .questions { + margin-top: 40px; + width: auto; + height: auto; + color: #FFF; + text-align: center; + font-family: Montserrat, serif; + font-size: 28px; + font-style: normal; + font-weight: 700; + line-height: normal; + z-index: 5; + } + + #faq i{ + margin-top: auto; + margin-bottom: auto; + margin-right: 12px; + } + + .accordion{ + max-width: 343px; + width: 100%; + z-index: 5; + margin-top: 40px; + margin-bottom: 104px; + } + + .accordion-item{ + margin-bottom: 12px; + } + + /*Styles for the question*/ + + .accordion-title{ + display: flex; + align-items: center; + justify-content: space-between; + + width: 100%; + height: 48px; + + cursor: pointer; + transition-duration: 0.5s; + + border-radius: 8px; + background: rgba(79, 180, 254, 0.2); + } + + .accordion-title .text { + margin-left: 12px; + color: #FFF; + font-family: Montserrat, serif; + font-size: 18px; + font-style: normal; + font-weight: 500; + line-height: normal; + } + + .accordion-content{ + max-height: 0; + overflow: hidden; + position: relative; + transition: max-height 0.6s; + color: #FFF; + font-family: Montserrat, serif; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: normal; + } +} \ No newline at end of file diff --git a/vr_club_site/templates/site/svg-objects/devices-first-object.html b/vr_club_site/templates/site/svg-objects/devices-first-object.html new file mode 100644 index 0000000..a2371a2 --- /dev/null +++ b/vr_club_site/templates/site/svg-objects/devices-first-object.html @@ -0,0 +1,141 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/vr_club_site/templates/site/svg-objects/devices-second-object.html b/vr_club_site/templates/site/svg-objects/devices-second-object.html new file mode 100644 index 0000000..1d8c9e6 --- /dev/null +++ b/vr_club_site/templates/site/svg-objects/devices-second-object.html @@ -0,0 +1,141 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/vr_club_site/templates/site/svg-objects/devices-third-object.html b/vr_club_site/templates/site/svg-objects/devices-third-object.html new file mode 100644 index 0000000..8f3c1ae --- /dev/null +++ b/vr_club_site/templates/site/svg-objects/devices-third-object.html @@ -0,0 +1,141 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/vr_club_site/urls.py b/vr_club_site/urls.py index 78a6089..3bae042 100644 --- a/vr_club_site/urls.py +++ b/vr_club_site/urls.py @@ -2,17 +2,19 @@ from .views import ( index_page, + devices_page, get_available_slots_view, get_available_slots_for_month_view, get_price_day, ) -from games.views import game_page +from games.views import games_page app_name = "site" urlpatterns = [ path("", index_page, name="home"), - path("games/", game_page, name="games"), + path("games/", games_page, name="games"), + path("devives/", devices_page, name="devices"), path( "api/get_available_slots/", get_available_slots_view, diff --git a/vr_club_site/views.py b/vr_club_site/views.py index e7c7c1a..cf4c131 100644 --- a/vr_club_site/views.py +++ b/vr_club_site/views.py @@ -100,3 +100,16 @@ def render_index_page(request): "weekend_price": get_weekend_price(), }, ) + + +def devices_page(request): + signup_url = reverse("account_signup") + login_url = reverse("account_login") + return render( + request, + "site/devices.html", + { + "signup_url": signup_url, + "login_url": login_url, + }, + )