Ahmad-Magdy-Osman / Bandersnatch

:computer: Interactive Black Mirror: Bandersnatch Paths Website :movie_camera:

💻 Bandersnatch 🎥

Bandersnatch Life is an interactive website for the movie Black Mirror: Bandersnatch by Netflix. Bandersnatch Life allows you to explore all possible paths in an interactive way - and in my opinion is a must to fully absorb all possible outcomes of the movie!

Table of Content 📘

• 💻 Bandersnatch 🎥
  • Table of Content 📘
  • Features ✨ 😎
  • Demo and Screenshots 📷 📹
  • Usage 🎮
  • Contributing 🔥
  • Tools 👓
  • Future Plans 🔜
  • Current Website Hierarchy 💪
  • Collaborators & Contributors 🕺 💃
  • Inspiration 📓
  • License 📚

Features ✨ 😎

Currently, Bandersnatch Life supports the following:

• Informational Notifications - Some are Timed

• Paths Explorations

• Paths Collapse

• Page Scaling

• Vertical and Horizontal Scrolling

📷 Demo and Screenshots 📹

Bandersnatch Life	Bandersnatch Life

Usage 🎮

This website is written in Javascript with help of D3.js. Data in JSON and its related scripts are in Python 3.7

• git clone https://github.com/Ahmad-Magdy-Osman/Bandersnatch.git

• cd Bandersnatch

• Run index.html

Contributing 🔥

1. 🍝 Fork this repo!
2. Clone and cd into it
3. Create your feature branch: git checkout -b my-new-feature
4. Commit your changes: git commit -m 'Add some feature'
5. Push to the branch: git push origin my-new-feature
6. Submit a pull request 👍

Tools 👓

Programming languages, formats, and libraries.

• HTML
  • Bootstrap
• CSS
• Javascript
  • D3.JS
  • Sweetalert 2
• Python 3
• JSON

Future Plans 🔜

Based on given feedback, the following improvements are to be made/considered. Please feel free to pick any of them and start working on improving it as a contribtor.

• General
  • Mobile Responsiveness
  • Save user session with all visited paths
• Notifications
  • Wait time
  • Change notifications into rounded boxes(popover, toolbox), with hover-over focus, that reside over the center of the links
• Graphics
  • Horizontal Scrolling (overriding the overflow of the body element by the svg's element)
  • Auto-focus on new choices
  • Zooming in and out
    • Maybe zoom out of the previous nodes while still zoom in on the new ones to make all of them fit on screen?
  • Expand everything!
  • Left to right paths
    • Maybe as an option?
  • Text wrapping
• Content
  • Which cereal video ad is played
  • Overriding not to talk about the mom path
• Marketing
  • SEO
  • Share on Social Media button
• Style/Design
  • Fonts
  • Footer
  • Links and Nodes Color
• Read Me
  • Add contributors

Current Website Hierarchy 💪

• Single page with paths and notifications.

• More to come...

🕺 Collaborators & Contributors 💃

_{Ahmad M. Osman}

Inspiration 📓

You will fail.

You will mess up.

You'll do poorly on assignments and tests.

Your side projects will not work.

Your code will be sloppy and incomplete.

You will bomb job interviews.

Your PR's will be rejected.

And because you fail, you will succeed.

Don't be afraid to fail, don't let it destroy your self-confidence, don't let it define you. Instead, do everything you can to learn from that failure and take that new knowledge into the next piece of work.

Indeed, failure is the only path to success.

    ― Stranger on the Internet.

License 📚

Bandersnatch Life is an open source project under MIT license. Bandersnatch Life is a fan work of Netflix's Black Mirror: Bandersnatch - any assets used are copylefted and should fall under fair use policy. Special thanks to /u/alpine-.