diff --git a/etc/spec/SPECIFICATION.md b/etc/spec/SPECIFICATION.md new file mode 100644 index 0000000..d314198 --- /dev/null +++ b/etc/spec/SPECIFICATION.md @@ -0,0 +1,98 @@ +### Home Page + +- Hero Banner + - Theme-based Animation (some action turns it into a JS Game) + - Date + - Venue + - Address (clicking leads to Map) + - Call to action -> **Get tickets** + - Mobile view: Static (no animations) in mobile, only event info and ticket link are shown (?) +- Schedule Banner + - Simple call to action to view [schedule](#schedule) in separate page + - (?) Small links to a separate page that includes previous talks +- Speakers + - Grid with circular photos, name and profession visible, hover shows speaker social links + - Layout similar to TedX-UniPi (Team), animation similar to TedX-TUC (Speakers) + - Circular element is clickable, click leads to page with its own URL + - Speaker page includes: photo, short bio, talk description, social links + - Mobile view: Mobile layout includes only name and profession, photo is only shown in profile page (?) +- About Banner + - Theme description; functions as teaser for the about page + - Simple animation (?) +- [Partners](#partners) (includes only "Platinum" and "Gold" ones or sth like that) +- Map and venue photos + - In the style of TedX-PU + - Includes link that activates popup with "How to get there" instructions + - Mobile view: Venue photos are hidden in mobile, only the map is shown (?) +- Live stream + - Visible only on the day of the event + - Shown at the top of the home page + - Includes a countdown widget + - Mobile view: Becomes a YouTube link (?) + +### Navigation menu +- Sticky +- Mobile view: Turns into a hot-dog layout +- Links + - [Home](#home-page) + - [Partners](#partners) + - [Speakers](#speakers) + - [Schedule](#schedule) + - [Team](#team) + - [About](#about) + - [Contact](#contact) + - [Get tickets](#get-tickets) (red background) + +### Footer +- In the style of TedX-Academy +- Facebook stream (takes up 2/4 columns) +- Instagram stream (takes up 1/4 column) +- About us or Contact form or social links (?) (takes up 1/4 column) +- Bottom part includes copyright etc. disclaimers with link to IT Team section in [Team](#team) page +- Mobile view: social links are shown instead of the streams (?) + +### Partners + +- Sections with Premium, Gold, Silver, Media etc. partners +- Simple logos, preferrably with transparent background, that link to company websites +- Logos enlarge when hovered +- Mobile view: same as desktop (?) + +### Speakers +- Links to home page and scrolls to the corresponding section + +### Schedule +- Separate page in the style of TedX-Athens +- Three columns: Talks - Performances - Workshops (?) +- When an event is clicked, a panel slides down containing talk info and link to speaker page +- Mobile view: (?) + - Entirely different layout + - Three tabs are shown: Talks - Performances - Workshops / Only one visible at a time + - Events are categorised by session, clicking on them activates the same panel as in desktop view + +### Team +- Same layout as in [Speakers](#speakers) section +- Different sections, one for each sub-team / sub-team name is the section header +- Hovering over section headers could trigger a tooltip describing the role of the sub-team (?) +- Team member data: + - Photo + - Name + - Short description (?) + - Social links + - Members don't have their own page, thus circular elements are not clickable +- Mobile view: (?) + - Three column grid with square photos + - Again one section for each sub-team + - Clicking on square brings up small panel containing name, short description and social links + +### About +- Short description about TED, TedX and TedX-NTUA +- Theme description +- Contains links to older TedX-NTUA websites + +### Contact +- Simple contact form in the style of TedX-Academy +- Social links also included + +### Get tickets +- Link to Eventora \ No newline at end of file