Seat booking checkboxes UI

By
HTML: 
<div class="plane">
  <div class="cockpit">
    <h1>Please select a seat</h1>
  </div>
  <div class="exit exit--front fuselage">
   
  </div>
  <ol class="cabin fuselage">
    <li class="row row--1">
      <ol class="seats" type="A">
        <li class="seat">
          <input type="checkbox" id="1A" />
          <label for="1A">1A</label>
        </li>
        <li class="seat">
          <input type="checkbox" id="1B" />
          <label for="1B">1B</label>
        </li>
        <li class="seat">
          <input type="checkbox" id="1C" />
          <label for="1C">1C</label>
        </li>
        <li class="seat">
          <input type="checkbox" disabled id="1D" />
          <label for="1D">Occupied</label>
        </li>
        <li class="seat">
          <input type="checkbox" id="1E" />
          <label for="1E">1E</label>
        </li>
        <li class="seat">
          <input type="checkbox" id="1F" />
          <label for="1F">1F</label>
        </li>
      </ol>
    </li>
    <li class="row row--2">
      <ol class="seats" type="A">
        <li class="seat">
          <input type="checkbox" id="2A" />
          <label for="2A">2A</label>
        </li>
        <li class="seat">
          <input type="checkbox" id="2B" />
          <label for="2B">2B</label>
        </li>
        <li class="seat">
          <input type="checkbox" id="2C" />
          <label for="2C">2C</label>
        </li>
        <li class="seat">
          <input type="checkbox" id="2D" />
          <label for="2D">2D</label>
        </li>
        <li class="seat">
          <input type="checkbox" id="2E" />
          <label for="2E">2E</label>
        </li>
        <li class="seat">
          <input type="checkbox" id="2F" />
          <label for="2F">2F</label>
        </li>
      </ol>
    </li>
    <li class="row row--3">
      <ol class="seats" type="A">
        <li class="seat">
          <input type="checkbox" id="3A" />
          <label for="3A">3A</label>
        </li>
        <li class="seat">
          <input type="checkbox" id="3B" />
          <label for="3B">3B</label>
        </li>
        <li class="seat">
          <input type="checkbox" id="3C" />
          <label for="3C">3C</label>
        </li>
        <li class="seat">
          <input type="checkbox" id="3D" />
          <label for="3D">3D</label>
        </li>
        <li class="seat">
          <input type="checkbox" id="3E" />
          <label for="3E">3E</label>
        </li>
        <li class="seat">
          <input type="checkbox" id="3F" />
          <label for="3F">3F</label>
        </li>
      </ol>
    </li>
    <li class="row row--4">
      <ol class="seats" type="A">
        <li class="seat">
          <input type="checkbox" id="4A" />
          <label for="4A">4A</label>
        </li>
        <li class="seat">
          <input type="checkbox" id="4B" />
          <label for="4B">4B</label>
        </li>
        <li class="seat">
          <input type="checkbox" id="4C" />
          <label for="4C">4C</label>
        </li>
        <li class="seat">
          <input type="checkbox" id="4D" />
          <label for="4D">4D</label>
        </li>
        <li class="seat">
          <input type="checkbox" id="4E" />
          <label for="4E">4E</label>
        </li>
        <li class="seat">
          <input type="checkbox" id="4F" />
          <label for="4F">4F</label>
        </li>
      </ol>
    </li>
    <li class="row row--5">
      <ol class="seats" type="A">
        <li class="seat">
          <input type="checkbox" id="5A" />
          <label for="5A">5A</label>
        </li>
        <li class="seat">
          <input type="checkbox" id="5B" />
          <label for="5B">5B</label>
        </li>
        <li class="seat">
          <input type="checkbox" id="5C" />
          <label for="5C">5C</label>
        </li>
        <li class="seat">
          <input type="checkbox" id="5D" />
          <label for="5D">5D</label>
        </li>
        <li class="seat">
          <input type="checkbox" id="5E" />
          <label for="5E">5E</label>
        </li>
        <li class="seat">
          <input type="checkbox" id="5F" />
          <label for="5F">5F</label>
        </li>
      </ol>
    </li>
    <li class="row row--6">
      <ol class="seats" type="A">
        <li class="seat">
          <input type="checkbox" id="6A" />
          <label for="6A">6A</label>
        </li>
        <li class="seat">
          <input type="checkbox" id="6B" />
          <label for="6B">6B</label>
        </li>
        <li class="seat">
          <input type="checkbox" id="6C" />
          <label for="6C">6C</label>
        </li>
        <li class="seat">
          <input type="checkbox" id="6D" />
          <label for="6D">6D</label>
        </li>
        <li class="seat">
          <input type="checkbox" id="6E" />
          <label for="6E">6E</label>
        </li>
        <li class="seat">
          <input type="checkbox" id="6F" />
          <label for="6F">6F</label>
        </li>
      </ol>
    </li>
    <li class="row row--7">
      <ol class="seats" type="A">
        <li class="seat">
          <input type="checkbox" id="7A" />
          <label for="7A">7A</label>
        </li>
        <li class="seat">
          <input type="checkbox" id="7B" />
          <label for="7B">7B</label>
        </li>
        <li class="seat">
          <input type="checkbox" id="7C" />
          <label for="7C">7C</label>
        </li>
        <li class="seat">
          <input type="checkbox" id="7D" />
          <label for="7D">7D</label>
        </li>
        <li class="seat">
          <input type="checkbox" id="7E" />
          <label for="7E">7E</label>
        </li>
        <li class="seat">
          <input type="checkbox" id="7F" />
          <label for="7F">7F</label>
        </li>
      </ol>
    </li>
    <li class="row row--8">
      <ol class="seats" type="A">
        <li class="seat">
          <input type="checkbox" id="8A" />
          <label for="8A">8A</label>
        </li>
        <li class="seat">
          <input type="checkbox" id="8B" />
          <label for="8B">8B</label>
        </li>
        <li class="seat">
          <input type="checkbox" id="8C" />
          <label for="8C">8C</label>
        </li>
        <li class="seat">
          <input type="checkbox" id="8D" />
          <label for="8D">8D</label>
        </li>
        <li class="seat">
          <input type="checkbox" id="8E" />
          <label for="8E">8E</label>
        </li>
        <li class="seat">
          <input type="checkbox" id="8F" />
          <label for="8F">8F</label>
        </li>
      </ol>
    </li>
    <li class="row row--9">
      <ol class="seats" type="A">
        <li class="seat">
          <input type="checkbox" id="9A" />
          <label for="9A">9A</label>
        </li>
        <li class="seat">
          <input type="checkbox" id="9B" />
          <label for="9B">9B</label>
        </li>
        <li class="seat">
          <input type="checkbox" id="9C" />
          <label for="9C">9C</label>
        </li>
        <li class="seat">
          <input type="checkbox" id="9D" />
          <label for="9D">9D</label>
        </li>
        <li class="seat">
          <input type="checkbox" id="9E" />
          <label for="9E">9E</label>
        </li>
        <li class="seat">
          <input type="checkbox" id="9F" />
          <label for="9F">9F</label>
        </li>
      </ol>
    </li>
    <li class="row row--10">
      <ol class="seats" type="A">
        <li class="seat">
          <input type="checkbox" id="10A" />
          <label for="10A">10A</label>
        </li>
        <li class="seat">
          <input type="checkbox" id="10B" />
          <label for="10B">10B</label>
        </li>
        <li class="seat">
          <input type="checkbox" id="10C" />
          <label for="10C">10C</label>
        </li>
        <li class="seat">
          <input type="checkbox" id="10D" />
          <label for="10D">10D</label>
        </li>
        <li class="seat">
          <input type="checkbox" id="10E" />
          <label for="10E">10E</label>
        </li>
        <li class="seat">
          <input type="checkbox" id="10F" />
          <label for="10F">10F</label>
        </li>
      </ol>
    </li>
  </ol>
  <div class="exit exit--back fuselage">
   
  </div>
</div>


CSS(.scss):

  *,*:before,*:after {
  box-sizing: border-box;
}
html {
  font-size: 16px;
}

.plane {
  margin: 20px auto;
  max-width: 300px;
}

.cockpit {
  height: 250px; 
  position: relative;
  overflow: hidden;
  text-align: center;
  border-bottom: 5px solid #d8d8d8;
  &:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 500px;
    width: 100%;
    border-radius: 50%;
    border-right: 5px solid #d8d8d8;
    border-left: 5px solid #d8d8d8;
  }
  h1 {
    width: 60%;
    margin: 100px auto 35px auto;
  }
}

.exit {
  position: relative;
  height: 50px;
  &:before,
  &:after {
    content: "EXIT";
    font-size: 14px;
    line-height: 18px;
    padding: 0px 2px;
    font-family: "Arial Narrow", Arial, sans-serif;
    display: block;
    position: absolute;
    background: green;
    color: white;
    top: 50%;
    transform: translate(0, -50%);
  }
  &:before {
    left: 0;
  }
  &:after {
    right: 0;
  }
}

.fuselage {
  border-right: 5px solid #d8d8d8;
  border-left: 5px solid #d8d8d8;
}

ol {
  list-style :none;
  padding: 0;
  margin: 0;
}

.row {
  
}

.seats {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;  
}

.seat {
  display: flex;
  flex: 0 0 14.28571428571429%;
  padding: 5px;
  position: relative;  
  &:nth-child(3) {
    margin-right: 14.28571428571429%;
  }
  input[type=checkbox] {
    position: absolute;
    opacity: 0;
  }
  input[type=checkbox]:checked {
    + label {
      background: #bada55;      
      -webkit-animation-name: rubberBand;
          animation-name: rubberBand;
      animation-duration: 300ms;
      animation-fill-mode: both;
    }
  }
  input[type=checkbox]:disabled {
    + label {
      background: #dddddd;
      text-indent: -9999px;
      overflow: hidden;
      &:after {
        content: "X";
        text-indent: 0;
        position: absolute;
        top: 4px;
        left: 50%;
        transform: translate(-50%, 0%);
      }
      &:hover {
        box-shadow: none;
        cursor: not-allowed;
      }
    }
  }
  label {    
    display: block;
    position: relative;    
    width: 100%;    
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.5rem;
    padding: 4px 0;
    background: #F42536;
    border-radius: 5px;
    animation-duration: 300ms;
    animation-fill-mode: both;
    
    &:before {
      content: "";
      position: absolute;
      width: 75%;
      height: 75%;
      top: 1px;
      left: 50%;
      transform: translate(-50%, 0%);
      background: rgba(255,255,255,.4);
      border-radius: 3px;
    }
    &:hover {
      cursor: pointer;
      box-shadow: 0 0 0px 2px #5C6AFF;
    }
    
  }
}

@-webkit-keyframes rubberBand {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(.95, 1.05, 1);
            transform: scale3d(.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, .95, 1);
            transform: scale3d(1.05, .95, 1);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

@keyframes rubberBand {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(.95, 1.05, 1);
            transform: scale3d(.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, .95, 1);
            transform: scale3d(1.05, .95, 1);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

.rubberBand {
  -webkit-animation-name: rubberBand;
          animation-name: rubberBand;
}
Experienced Ruby on Rails and Web Developer having 11+ years experience in Ruby & Ruby on Rails framework, TTD, Rspec. Expert on Git, SVN , Git Hook, Bitbucket. I use MySQL, MongoDB , PostgreSQL & Sqlite for Database Management. In front-end development I use HTML5 / HAML, CSS3 / SCSS, javascript / coffeescript. I also know about the deploy the applications on VPS Server i.e AWS EC2, Heroku, Ditital Ocean, Hostgator, Site5, BlueHost, AWS Load Balancing, Elastic Beanstalk, AWS S3 e.t.c ☆ Frameworks ☆ Ruby on Rails, Sinatra ☆ Database ☆ - PostgreSQL, MySQL, SQLite, - MongoDB, Amazon DynamoDB,AWS RDS. ☆ Front end Techniques ☆ - ReactJS, Angular js, Node js, Javascript, JQuery, HTML, CSS - Twitter Bootstrap, Coffeescript. Why hire me? * Master degree in Computer Science * 6 years professional experiences and 10+ projects completed * Available all day long, 7 days/24 hours * Good communication skills with fluent English * Self-motivated, fast-learner and "I can do" mind * Quality insurance and fast delivery

Comments

Post a Comment

Popular Posts

How to pass hash in Postman

By
By the looks of what you are trying to send, you need to change the Grape restriction, because destinations is an Array , not a Hash : requires : destinations , type : Array   You don't need the "destination" hash when sending the request: { destinations => [ { name => 'dest1' , other_attribute : 'value' , etc ... }, { name => 'dest2' , other_attribute : 'value' , etc ... }, { name => 'dest3' , other_attribute : 'value' , etc ... } ]}   This creates an Array of hashes. In order to send this through POSTMAN, you'll need to modify that destinations param your sending and add multiple lines in POSTMAN. Something like: destinations [][ name ] 'dest1' destinations [][ other_attribute ] 'value1' destinations [][ name ] 'dest2' destinations [][ other_attribute ] 'value2'
Read more

nginx: unrecognized service

By
The nginx: unrecognized service error means the startup scripts need to be created. Fortunately the startup scripts have already been written. We can fetch them with wget and set them up following these steps: # Download nginx startup script wget -O init-deb.sh https://www.linode.com/docs/assets/660-init-deb.sh # Move the script to the init.d directory & make executable sudo mv init-deb.sh /etc/init.d/nginx sudo chmod +x /etc/init.d/nginx # Add nginx to the system startup sudo /usr/sbin/update-rc.d -f nginx defaults Now we can control nginx using: sudo service nginx stop sudo service nginx start sudo service nginx restart sudo service nginx reload
Read more

Reading Excel Sheets using "Roo" gem in ruby on rails

By
This gem allows you to read the contents of Open-office spreadsheets (.ods) Excel spreadsheets (.xls) Google (online) spreadsheets Excel's new file format .xlsx How to use this gem : 1) Install            [sudo] gem install roo 2) Create an instance of the excel sheet file                      require 'rubygems'         require 'roo'                 s =  Roo:: Openoffice.new("myspreadsheet.ods")         s =  Roo:: Excel.new(" myspreadsheet.xls ")          s =  Roo:: Google.new(" myspreadsheet_at_google ")         s =  Roo:: Excelx.new(" myspreadsheet.xlsx ")      3)  Reading from a particular sheet of the spreadsheet:      Lets say your spreadsheet has 4 sheets and you want to read the 2nd sheet        s.default_sheet = s. sheets[2]    *  Sheets is an array containing the names of all the sheets inside the spread sheet.     *  If we do not se
Read more

Bootstrap Select Picker append add new item if search not exist

By
  <select class = "selectpicker" data-live-search= "true" id= "branch" multiple> < option > B.Tech </ option > < option > M.Tech </ option > < option > Ph.D </ option > </select> jQuery script $( '.selectpicker' ). selectpicker ({ noneResultsText : 'No result found <button class="btn btn-dark" onclick=(add_opt(this))>Add new option</button>' }); function add_opt ( event ){ var value = $(event). parents ( 'div' ). siblings ( '.bs-searchbox' ). find ( 'input' ). val (); $(event). parents ( 'div' ). siblings ( '.selectpicker' ). append ($( "<option></option>" ). text (value)). val (value); $( '.selectpicker' ). selectpicker ( 'refresh' ); }
Read more

Add CORS to Nginx on AWS Elastic Beanstalk

By
Image
Apache Add the following block to your  .htaccess  file: <FilesMatch ".(eot|otf|ttf|woff|woff2)"> Header always set Access-Control-Allow-Origin "*" </FilesMatch> Nginx Add the following location block to your virtual host file (usually within the server directive) and reload Nginx: location ~* \.(eot|otf|ttf|woff|woff2)$ { add_header Access-Control-Allow-Origin *; } Invalidate CloudFront Distribution Once the changes have been made you will need to  invalidate the CloudFront cache  with a path of “/*”. Integrating to CloudFront service It’s simple to config and use CloudFront (a CDN service) for Rails app.  Just one thing from my experience, regarding to CORS issue on EB when your CSS want get loading font files or font-awesome. Because EB run your app with Nginx server serve public static files, then work around would be overwriting web server config in Nginx with  add_header Access-Control-Allow-Origin ‘*’  by crea
Read more

Enable gzip compression on Elastic Beanstalk with nginx

By
Create nginx_gzip_configuration.config file into .ebextensions directory and then put the following script. files:   "/etc/nginx/conf.d/gzip.conf":       mode: "644"       owner: "root"       group: "root"       content: |         # enable gzip compression         gzip on;         gzip_min_length  1100;         gzip_buffers  4 32k;         gzip_types    text/plain text/html text/xml text/css application/javascript application/json;         gzip_vary on;         # end gzip configuration container_commands:   02_restart_nginx:     command: service nginx restart
Read more

Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock'

By
If you are trying to connect mysql using password or without password like mysql -u USERNAME or mysql -u USERNAME -p PASSWORD and getting error:-   Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock' (2) find first socket location sudo find / -type s my be location would be /tmp/mysql.sock just go in the mysql file my.cnf sudo nano  /etc/mysql/my.cnf and do changes in scocket port            = 3306 socket          = /tmp/mysql.sock [mysqld_safe] socket          = /tmp/mysql.sock nice            = 0 Restart mysql, sudo /etc/init.d/mysql restart And try login again mysql -u USERNAME Hope it will work. Command to know all the mysql variable sudo mysqladmin variables To know mysql socket path mysqld --verbose --help | grep ^socket
Read more

Get video duration by URL in Ruby on Rails

By
First install ffmpeg on your system  http://ffmpeg.org/download.html OR sudo add-apt-repository ppa:mc3man/trusty-media And confirm the following message by pressing <enter>: Also note that with apt-get a sudo apt-get dist-upgrade is needed for initial setup & with some package upgrades More info: https://launchpad.net/~mc3man/+archive/ubuntu/trusty-media Press [ENTER] to continue or ctrl-c to cancel adding it Update the package list. sudo apt-get update sudo apt-get dist-upgrade Now FFmpeg is available to be installed with apt: sudo apt-get install ffmpeg In Controller: your_video_path =  https://s3-us-west-2.amazonaws.com/its-get-brighter-staging/uploads/video/video/2/Planking.mp4 result = `ffmpeg -i #{your_video_path} 2>&1` videotime = result.match("Duration: ([0-9]+):([0-9]+):([0-9]+).([0-9]+)")[0].split("Duration: ").last.split(".").first
Read more

site-enables nginx setting in ruby in rails

By
/etc/nginx/sites-available/ default # You may add here your # server { # ... # } # statements for each of your virtual hosts to this file ## # You should look at the following URL's in order to grasp a solid understanding # of Nginx configuration files in order to fully unleash the power of Nginx. # http://wiki.nginx.org/Pitfalls # http://wiki.nginx.org/ QuickStart # http://wiki.nginx.org/ Configuration # # Generally, you will want to move this file somewhere, and start with a clean # file but keep this around for reference. Or just disable in sites-enabled. # # Please see /usr/share/doc/nginx-doc/ examples/ for more detailed examples. ## server {       listen 80;       server_name localhost;       root /home/yuva/YuvaSoft/new_ pollutionapi/public;   # <--- be sure to point to 'public'!       passenger_enabled on; # Make site accessible from http://localhost/ # passenger_enabled on; location / { # Fir
Read more