Giter Club home page Giter Club logo

bandersnatch's Introduction

๐Ÿ’ป 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 ๐Ÿ“˜

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
Spoiler Alert Introduction
Notifications Paths

Demo

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-.

bandersnatch's People

Contributors

ahmad-magdy-osman avatar waysidekoi avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

bandersnatch's Issues

Not working

Trying to run index.html after downloading it. The website doesn't proceed beyond the pop up.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.