- var categories=[{id:1,name:"Activities"},{id:2,name:"Frontend"},{id:3,name:"Backend"},{id:4,name:"QA"},{id:5,name:"Mobile"},{id:6,name:"Teamlead"},{id:7,name:"Future"}];
- var schedule=[{date:"30 March",periods:[{timeStart:"10:30",timeEnd:"10:45",status:"completed",events:[{title:"Grand opening",link:"#",categoryId:1,speakerName:"",speakerImage:"",speakerCompany:"",location:"Hall #1",isAddedToFavorites:!1,backgroundId:1}]},{timeStart:"10:50",timeEnd:"11:30",status:"completed",events:[{title:"Тренды невозможного",link:"#",categoryId:7,speakerName:"Евгений Черешнев",speakerImage:"https://2019.codefest.ru/upload/members/photo_1548787955_200.jpg",speakerCompany:"Biolink.Tech",location:"Hangar",isAddedToFavorites:!0,backgroundId:""},{title:"Рефакторинг: договариваемся, планируем, внедряем!",link:"#",categoryId:6,speakerName:"Алексей Катаев",speakerImage:"https://2019.codefest.ru/upload/members/photo_1547747987_200.jpg",speakerCompany:"Skyeng",location:"Hall #3",isAddedToFavorites:!1,backgroundId:""},{title:"Code Battle",link:"#",categoryId:1,speakerName:"",speakerImage:"",speakerCompany:"",location:"Wrike stand",isAddedToFavorites:!0,backgroundId:2},{title:"May the F[_] be with You. Функциональный подход к проектированию API",link:"#",categoryId:3,speakerName:"Иван Фастов",speakerImage:"https://2019.codefest.ru/upload/members/photo_1551973214_200.jpg",speakerCompany:"Тинькофф",location:"Hall #4",isAddedToFavorites:!1,backgroundId:""}]},{timeStart:"11:00",timeEnd:"11:30",status:"completed",events:[{title:"Просмотр фильма о дизайнерах-маньяках",link:"#",categoryId:1,speakerName:"",speakerImage:"",speakerCompany:"",location:"Yandex stand",isAddedToFavorites:!1,backgroundId:3}]},{timeStart:"11:50",timeEnd:"12:30",status:"active",events:[{title:"Сжимаем Javascript по-взрослому",link:"#",categoryId:2,speakerName:"Алексей Золотых",speakerImage:"https://2019.codefest.ru/upload/members/photo_1552416059_200.jpg",speakerCompany:"Infobip",location:"Hall #2",isAddedToFavorites:!0,backgroundId:""},{title:"Context: The missing ingredient in multilingual software translation",link:"#",categoryId:4,speakerName:"Mirjana Andovska",speakerImage:"https://2019.codefest.ru/upload/members/photo_1546541112_200.jpg",speakerCompany:"Netcetera",location:"Hall #1",isAddedToFavorites:!1,backgroundId:""},{title:"iOS. Переход на тёмную сторону",link:"#",categoryId:5,speakerName:"Антон Спивак",speakerImage:"https://2019.codefest.ru/upload/members/photo_1550597366_200.jpg",speakerCompany:"ВКонтакте",location:"Hall #7",isAddedToFavorites:!1,backgroundId:""}]},{timeStart:"12:30",timeEnd:"13:00",status:"coming",events:[{title:"Wrike Garage game",link:"#",categoryId:1,speakerName:"",speakerImage:"",speakerCompany:"",location:"Wrike stand",isAddedToFavorites:!1,backgroundId:4}]},{timeStart:"13:00",timeEnd:"13:50",status:"coming",events:[{title:"Forward-looking city making",link:"#",categoryId:7,speakerName:"Daniela Allmeier",speakerImage:"https://2019.codefest.ru/upload/members/photo_1549301703_200.jpg",speakerCompany:"RAUMPOSITION",location:"Hangar",isAddedToFavorites:!1,backgroundId:""},{title:"Эффективные 1-на-1",link:"#",categoryId:6,speakerName:"Георгий Могелашвили",speakerImage:"https://2019.codefest.ru/upload/members/photo_1545919642_200.jpg",speakerCompany:"Booking.com",location:"Hall #3",isAddedToFavorites:!1,backgroundId:""},{title:"Инструментирование Go кода",link:"#",categoryId:3,speakerName:"Максим Чечель",speakerImage:"https://2019.codefest.ru/upload/members/photo_1550689359_200.jpg",speakerCompany:"Juno",location:"Hall #4",isAddedToFavorites:!1,backgroundId:""}]}]},{date:"31 March",periods:[{timeStart:"10:30",timeEnd:"11:20",status:"coming",events:[{title:"Beyond Web-Apps: WebAssembly, JS and React to rewrite native apps",link:"#",categoryId:2,speakerName:"Florian Rival",speakerImage:"https://2019.codefest.ru/upload/members/photo_1548181969_200.jpg",speakerCompany:"Facebook",location:"Hall #5",isAddedToFavorites:!0,backgroundId:""},{title:"Как превратить QA команду в руины?",link:"#",categoryId:4,speakerName:"Юлия Долбилова",speakerImage:"https://2019.codefest.ru/upload/members/photo_1547744684_200.jpg",speakerCompany:"Додо Пицца",location:"Hall #6",isAddedToFavorites:!1,backgroundId:""},{title:"iOS. Функциональный Swift — это просто",link:"#",categoryId:5,speakerName:"Евгений Ёлчев",speakerImage:"https://2019.codefest.ru/upload/members/photo_1547748822_200.jpg",speakerCompany:"RedMadRobot",location:"Hall #7",isAddedToFavorites:!1,backgroundId:""}]},{timeStart:"11:00",timeEnd:"11:30",status:"coming",events:[{title:"SberQuiz",link:"#",categoryId:1,speakerName:"",speakerImage:"",speakerCompany:"",location:"Sberbank stand",isAddedToFavorites:!1,backgroundId:5}]},{timeStart:"11:30",timeEnd:"12:20",status:"coming",events:[{title:"Эволюция цифрового общения",link:"#",categoryId:7,speakerName:"Виктор Иванов",speakerImage:"https://2019.codefest.ru/upload/members/photo_1550080274_200.jpg",speakerCompany:"ВКонтакте",location:"Hangar",isAddedToFavorites:!1,backgroundId:""},{title:"Terraform на примере кластера Selenoid",link:"#",categoryId:4,speakerName:"Леонид Руденко",speakerImage:"https://2019.codefest.ru/upload/members/photo_1548440624_200.jpg",speakerCompany:"JetBrains",location:"Hall #6",isAddedToFavorites:!1,backgroundId:""},{title:"Android. Instant Apps — два года спустя",link:"#",categoryId:5,speakerName:"Евгений Сатуров",speakerImage:"https://2019.codefest.ru/upload/members/photo_1547746474_200.jpg",speakerCompany:"Surf",location:"Hall #7",isAddedToFavorites:!1,backgroundId:""}]},{timeStart:"12:00",timeEnd:"12:30",status:"coming",events:[{title:"Hundred to One",link:"#",categoryId:1,speakerName:"",speakerImage:"",speakerCompany:"",location:"VK stand",isAddedToFavorites:!0,backgroundId:6}]},{timeStart:"12:30",timeEnd:"13:20",status:"coming",events:[{title:"Ultimate React Component Patterns with TypeScript",link:"#",categoryId:2,speakerName:"Martin Hochel",speakerImage:"https://2019.codefest.ru/upload/members/photo_1548267264_200.jpg",speakerCompany:"Twisto.cz, ngParty",location:"Hall #5",isAddedToFavorites:!1,backgroundId:""},{title:"Тестирование мусорными данными с libFuzzer",link:"#",categoryId:4,speakerName:"Дмитрий Тримонов",speakerImage:"https://2019.codefest.ru/upload/members/photo_1548953275_200.jpg",speakerCompany:"2ГИС",location:"Hall #6",isAddedToFavorites:!1,backgroundId:""},{title:"iOS. Rx в современной мобильной разработке. Есть ли смысл?",link:"#",categoryId:5,speakerName:"Евгений Сатуров",speakerImage:"https://2019.codefest.ru/upload/members/photo_1550598154_200.jpg",speakerCompany:"Яндекс",location:"Hall #7",isAddedToFavorites:!1,backgroundId:""}]},{timeStart:"13:30",timeEnd:"13:45",status:"coming",events:[{title:"Сlosing and awarding of the winners",link:"#",categoryId:1,speakerName:"",speakerImage:"",speakerCompany:"",location:"Hall #1",isAddedToFavorites:!1,backgroundId:7}]}]}];
.app
//- offcanvas
.app__offcanvas.offcanvas(
id="offcanvas"
aria-hidden="true")
.offcanvas__overlay(
tabindex="-1"
data-micromodal-close)
//- sidepanel
.offcanvas__panel.sidepanel(
role="dialog"
aria-labelledby="navigation-title"
data-micromodal-dialog)
.sidepanel__container
h2.visually-hidden(
id="navigation-title") Navigation
svg.sidepanel__logo(
height="61" viewBox="0 0 54 61"
role="img"
aria-label="Codefest logo")
path(
fill="#33a7d8"
d="M39.4.31L8.15 16.34V49.7l3.4 1.2v8.81L17.5 53l22.2 7.86a2.5 2.5 0 003.3-2.4V2.58A2.48 2.48 0 0039.4.31")
path(
d="M32.12 17.8L2.83 14.02c-1.5-.2-2.83 1-2.83 2.54v31.88c0 1.5 1.26 2.68 2.73 2.55l29.3-2.61A2.18 2.18 0 0034 46.19V20c0-1.12-.8-2.05-1.88-2.19")
path(
fill="#fff"
d="M22.81 40.22c0 1.8-1.19 2.71-2.49 2.8-1.03.08-1.84-.11-2.4-.57v-2.48c.6.6 1.58.96 2.31.92.45-.03.68-.3.68-.57 0-1.06-3.05-.53-3.05-3.31 0-1.68 1-2.7 2.6-2.7a2.9 2.9 0 012.06.75v2.32c-.62-.58-1.28-.99-1.98-.97-.42 0-.63.29-.63.56 0 .96 2.9.25 2.9 3.25zM26 34.49l1.28-.01v2.07l-1.28.03v2.83c0 .69.17.94.6.92.23-.01.46-.12.68-.31v2.04c-.3.33-.73.52-1.28.56-1.05.07-1.79-.8-1.8-2.5v-3.5l-.92.02V34.5h.92v-2.16l1.8.03v2.12zM3.7 32.77l7.1.06v2.62l-4.61.05v1.87l3.47-.08v2.54l-3.47.15v3.84L3.7 44V32.77zm9.3 5.29c.09-1 .5-1.63 1.07-1.64.52 0 .95.63.96 1.57l-2.03.07zm1.17-3.74c-2.14 0-3.32 2.15-3.32 4.7 0 2.97 1.54 4.58 3.5 4.44a3.26 3.26 0 002.38-1.07v-2.28c-.62.52-1.27.8-1.92.84-.88.05-1.6-.36-1.8-1.27l4.05-.17v-.74c0-2.44-1-4.45-2.89-4.45zm-3.38-8.09v3.1a4.04 4.04 0 01-2.87 1.05c-2.7-.07-4.92-2.42-4.92-6 0-3.56 2.18-5.64 4.9-5.35a4.4 4.4 0 012.74 1.33v2.93a4.1 4.1 0 00-2.7-1.46c-1.4-.12-2.56.95-2.56 2.7 0 1.83 1.2 2.98 2.64 3.05a3 3 0 002.77-1.35zm17-.24c.06-.88.39-1.4.84-1.37.4.03.75.63.76 1.47l-1.6-.1zm3.2.96c0-2.17-.8-4.05-2.29-4.2-1.7-.15-2.62 1.66-2.62 3.92v.25c.01.31.04.61.09.9v.04l.03.15c.34 1.82 1.38 2.85 2.64 2.89.88.02 1.45-.24 1.9-.75v-2.04c-.5.42-1.01.62-1.53.6a1.45 1.45 0 01-1.42-1.28l3.21.17v-.65zm-8.7 1.5c-.67-.02-1.14-.91-1.14-2.08 0-1.16.47-2 1.14-1.94.48.03.82.37 1.07 1v2.15c-.24.6-.59.9-1.06.88zm1.07 2.1l1.82.05-.01-10.3-1.82-.2v3.27c-.37-.78-.91-1.2-1.6-1.27-1.57-.14-2.54 1.88-2.53 4.16 0 2.27.94 4.42 2.53 4.46.7.01 1.24-.34 1.61-1.08v.91zm-8.15-2.42c-.78-.03-1.35-.96-1.35-2.2 0-1.19.57-2.09 1.34-2.03.77.06 1.32 1.02 1.32 2.2 0 1.2-.55 2.06-1.31 2.03zm0-6.64c-2-.2-3.49 1.67-3.49 4.32 0 2.6 1.43 4.69 3.49 4.74 1.99.05 3.3-1.86 3.3-4.34 0-2.5-1.37-4.54-3.3-4.72z")
nav.sidepanel__menu.menu(
aria-label="Main")
ul.menu__list
li.menu__item
a.menu__link.menu__link--active(
href="#") Schedule
li.menu__item
a.menu__link(
href="#") Map
li.menu__item
a.menu__link(
href="#") Notifications
li.menu__item
a.menu__link(
href="#") Updates
.sidepanel__user.user
img.user__image(
src="https://randomuser.me/api/portraits/women/13.jpg"
width="48" height="48"
alt="")
.user__name
span.visually-hidden Username:
| snowflake
button.user__button Sign out
button.sidepanel__theme-switcher.theme-switcher(
type="button"
aria-label="Switch to dark theme")
svg.theme-switcher__icon(
width="16" height="16" viewBox="0 0 512 512"
aria-hidden="true")
path.theme-switcher__icon-sun(
d="M256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96zm246.4 80.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.4-94.8c-6.4-12.8-24.6-12.8-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4c-12.8 6.4-12.8 24.6 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.4-33.5 47.3 94.7c6.4 12.8 24.6 12.8 31 0l47.3-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3c13-6.5 13-24.7.2-31.1zm-155.9 106c-49.9 49.9-131.1 49.9-181 0-49.9-49.9-49.9-131.1 0-181 49.9-49.9 131.1-49.9 181 0 49.9 49.9 49.9 131.1 0 181z")
path.theme-switcher__icon-moon(
d="M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z")
button.sidepanel__close-button.visually-hidden-focusable(
type="button"
data-micromodal-close) Close navigation
//- content
.app__content.js-app-content
//- header
header.app__header.header
button.header__button.header__button-nav(
type="button"
aria-label="Open navigation"
data-micromodal-trigger="offcanvas")
span.header__button-icon.burger
span.burger__bar
button.header__button.header__button-search(
type="button"
aria-label="Open search field")
svg.header__button-icon(
width="16" height="16" viewBox="0 0 512 512"
aria-hidden="true")
path(
d="M508.5 468.9L387.1 347.5c-2.3-2.3-5.3-3.5-8.5-3.5h-13.2c31.5-36.5 50.6-84 50.6-136C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c52 0 99.5-19.1 136-50.6v13.2c0 3.2 1.3 6.2 3.5 8.5l121.4 121.4c4.7 4.7 12.3 4.7 17 0l22.6-22.6c4.7-4.7 4.7-12.3 0-17zM208 368c-88.4 0-160-71.6-160-160S119.6 48 208 48s160 71.6 160 160-71.6 160-160 160z")
h1.header__title Schedule
//- filters
fieldset.content__filters.filters
legend.visually-hidden
h2 Events display filter
.filters__wrapper
.filters__container
.filters__item
input.filters__input.js-filter(
id="filter-all"
type="radio"
name="filter"
value=""
checked)
label.filters__button(
for="filter-all") All
.filters__item
input.filters__input.js-filter(
id="filter-favorites"
type="radio"
name="filter"
value="favorites")
label.filters__button.filters__button--has-icon(
for="filter-favorites")
svg.filters__button-icon(
width="16" height="16" viewBox="0 0 576 512"
aria-hidden="true")
path(
d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z")
| Favorites
.filters__item
input.filters__input.js-filter(
id="filter-live"
type="radio"
name="filter"
value="live")
label.filters__button.filters__button--has-icon(
for="filter-live")
svg.filters__button-icon(
width="16" height="16" viewBox="0 0 576 512" aria-hidden="true")
path(
d="M186.87 157.25l-11.37-11.11a16.44 16.44 0 0 0-24 1.3 168.83 168.83 0 0 0 0 217.12 16.44 16.44 0 0 0 24 1.3l11.37-11.11a15.14 15.14 0 0 0 1.29-20.53 122.72 122.72 0 0 1 0-156.44 15.15 15.15 0 0 0-1.29-20.53zM107.33 79.6L96 68.53a16.41 16.41 0 0 0-23.56 1C25.59 121 0 186.58 0 256s25.59 135 72.44 186.52a16.41 16.41 0 0 0 23.56 1l11.33-11.07c6.11-6 6.06-15.39.36-21.71a230.28 230.28 0 0 1 0-309.37c5.7-6.37 5.75-15.81-.36-21.77zm396.23-10.12a16.41 16.41 0 0 0-23.56-1L468.67 79.6c-6.11 6-6.06 15.39-.36 21.72a230.28 230.28 0 0 1 0 309.37c-5.7 6.32-5.75 15.75.36 21.71L480 443.47a16.41 16.41 0 0 0 23.56-1C550.41 391 576 325.42 576 256s-25.59-135-72.44-186.52zM288 200a56 56 0 1 0 56 56 56 56 0 0 0-56-56zm112.5-53.86l-11.37 11.11a15.15 15.15 0 0 0-1.29 20.53 122.72 122.72 0 0 1 0 156.44 15.15 15.15 0 0 0 1.29 20.53l11.37 11.11a16.44 16.44 0 0 0 24-1.3 168.83 168.83 0 0 0 0-217.12 16.44 16.44 0 0 0-24-1.3z")
| Going now
each category in categories
.filters__item
input.filters__input.js-filter(
id=`filter-${category.id}`
type="radio"
name="filter"
value=`category-${category.id}`)
label.filters__button(
class= category.id == "1" ? "filters__button--has-icon" : false
class=`category--${category.id}`
for=`filter-${category.id}`)
if category.id == "1"
svg.filters__button-icon(
width="16" height="16" viewBox="0 0 640 512"
aria-hidden="true")
path(
d="M400 224a32 32 0 1 0 32 32 32 32 0 0 0-32-32zm238.57 114.4l-27.5-181.25C603.32 106 565.45 65 515.68 53.79a889.52 889.52 0 0 0-391.36 0C74.55 65 36.68 106 28.93 157.15L1.44 338.4C-9.86 412.85 46.94 480 121.21 480h.25a121 121 0 0 0 108.38-67.94L243.67 384h152.66l13.83 28.06A121 121 0 0 0 518.55 480h.25c74.27 0 131.06-67.15 119.77-141.6zm-64.85 68.19A71.66 71.66 0 0 1 518.55 432c-27.79 0-52.82-15.77-65.34-41.17l-13.83-28.05-13.2-26.78H213.82l-13.2 26.78-13.83 28.05c-12.52 25.4-37.55 41.17-65.58 41.17a71.55 71.55 0 0 1-54.93-25.41 76 76 0 0 1-17.39-61l27.49-181.24c4.83-31.8 27.79-56.82 58.5-63.74a841.73 841.73 0 0 1 370.25 0c30.71 6.92 53.66 31.94 58.49 63.74l27.49 181.25a76 76 0 0 1-17.39 60.99zM496 160a32 32 0 1 0 32 32 32 32 0 0 0-32-32zm-232 40h-48v-48a8 8 0 0 0-8-8h-32a8 8 0 0 0-8 8v48h-48a8 8 0 0 0-8 8v32a8 8 0 0 0 8 8h48v48a8 8 0 0 0 8 8h32a8 8 0 0 0 8-8v-48h48a8 8 0 0 0 8-8v-32a8 8 0 0 0-8-8z")
| #{category.name}
//- schedule
.content__schedule.schedule
//- day
each day in schedule
section.section-day
h2.section-day__title
time.section-day__title-text= day.date
.section-day__content
//- period
each period, index in day.periods
section.section-period
h3.period-time(
id=`period-${index}`
class=`period-time--${period.status}`)
time.period-time__text(
role="text")
span.period-time__start= period.timeStart
span.visually-hidden —
span.period-time__end= period.timeEnd
ul.section-period__events(
aria-labelledby=`period-${index}`)
//- event
each event in period.events
each category in categories
if category.id == event.categoryId
li.section-period__event.event(
class=`event--category-${category.id}`
class= category.id == "1" ? `event--activity event--background-${event.backgroundId}` : false
data-filter=`category-${category.id}`
data-favorite= event.isAddedToFavorites ? '' : false
data-live= period.status == 'active' ? '' : false)
//- title
h3.event__title
a.event__link(href= event.link)= event.title
//- meta
.event__meta.meta
.meta__item
span.visually-hidden Location:
| #{event.location}
if category.id != "1"
.meta__item(
aria-hidden="true") ·
.meta__item(
class=`category--${category.id}`)
span.visually-hidden Category:
| #{category.name}
else
.visually-hidden=`Category: ${category.name}`
//- author
if category.id != "1"
.author
img.author__image(
src= event.speakerImage
width="48" height="48"
alt="")
.author__name
span.visually-hidden Speaker:
| #{event.speakerName}
.author__company
span.visually-hidden Company:
| #{event.speakerCompany}
//- favorite button
button.event__favorite-button.favorite-button(
class= event.isAddedToFavorites ? "favorite-button--active" : null
data-favorite= event.isAddedToFavorites
aria-label= event.isAddedToFavorites ? `Remove "${event.title}" from favorites` : `Add "${event.title}" to favorites`
type="button")
svg(
class="favorite-button__icon"
width="16" height="16" viewBox="0 0 576 512"
aria-hidden="true")
path.favorite-button__icon-stroke(
d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z")
path.favorite-button__icon-filled(
d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z")
!
