create modal form

.gitignore

@@ -12,6 +12,8 @@
 /tmp/*
 !/log/.keep
 !/tmp/.keep
+/vendor/*
+/app/assets/images/*
 
 # Ignore Byebug command history file.
 .byebug_history

Gemfile

@@ -16,6 +16,7 @@ gem 'jquery-rails'
 gem 'turbolinks', '~> 5'
 gem 'jbuilder', '~> 2.5'
 gem 'haml'
+gem 'bootstrap-sass'
 
 group :development, :test do
   gem 'byebug', platform: :mri

Gemfile.lock

@@ -39,7 +39,12 @@ GEM
       minitest (~> 5.1)
       tzinfo (~> 1.1)
     arel (7.1.4)
+    autoprefixer-rails (9.6.1.1)
+      execjs
     bindex (0.8.1)
+    bootstrap-sass (3.4.1)
+      autoprefixer-rails (>= 5.2.1)
+      sassc (>= 2.0.0)
     builder (3.2.3)
     byebug (11.0.1)
     coffee-rails (4.2.2)
@@ -125,6 +130,8 @@ GEM
       sprockets (>= 2.8, < 4.0)
       sprockets-rails (>= 2.0, < 4.0)
       tilt (>= 1.1, < 3)
+    sassc (2.2.0)
+      ffi (~> 1.9)
     spring (2.0.2)
       activesupport (>= 4.2)
     spring-watcher-listen (2.0.1)
@@ -161,6 +168,7 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
+  bootstrap-sass
   byebug
   coffee-rails (~> 4.2)
   haml

app/assets/javascripts/application.js

@@ -14,4 +14,7 @@
 //= require jquery_ujs
 //= require turbolinks
 //= require_tree .
-//= require build.min.js
+
+//= require bootstrap.js
+
+

app/assets/javascripts/jquery.twentytwenty.js

+(function($){
+
+  $.fn.twentytwenty = function(options) {
+    var options = $.extend({default_offset_pct: 0.5, orientation: 'horizontal'}, options);
+    return this.each(function() {
+
+      var sliderPct = options.default_offset_pct;
+      var container = $(this);
+      var sliderOrientation = options.orientation;
+      var beforeDirection = (sliderOrientation === 'vertical') ? 'down' : 'left';
+      var afterDirection = (sliderOrientation === 'vertical') ? 'up' : 'right';
+      
+      
+      container.wrap("<div class='twentytwenty-wrapper twentytwenty-" + sliderOrientation + "'></div>");
+      container.append("<div class='twentytwenty-overlay'></div>");
+      var beforeImg = container.find("img:first");
+      var afterImg = container.find("img:last");
+      container.append("<div class='twentytwenty-handle'></div>");
+      var slider = container.find(".twentytwenty-handle");
+      slider.append("<span class='twentytwenty-" + beforeDirection + "-arrow'></span>");
+      slider.append("<span class='twentytwenty-" + afterDirection + "-arrow'></span>");
+      container.addClass("twentytwenty-container");
+      beforeImg.addClass("twentytwenty-before");
+      afterImg.addClass("twentytwenty-after");
+      
+      var overlay = container.find(".twentytwenty-overlay");
+      overlay.append("<div class='twentytwenty-before-label'></div>");
+      overlay.append("<div class='twentytwenty-after-label'></div>");
+
+      var calcOffset = function(dimensionPct) {
+        var w = beforeImg.width();
+        var h = beforeImg.height();
+        return {
+          w: w+"px",
+          h: h+"px",
+          cw: (dimensionPct*w)+"px",
+          ch: (dimensionPct*h)+"px"
+        };
+      };
+
+      var adjustContainer = function(offset) {
+      	if (sliderOrientation === 'vertical') {
+      	  beforeImg.css("clip", "rect(0,"+offset.w+","+offset.ch+",0)");
+      	}
+      	else {
+          beforeImg.css("clip", "rect(0,"+offset.cw+","+offset.h+",0)");
+    	}
+        container.css("height", offset.h);
+      };
+
+      var adjustSlider = function(pct) {
+        var offset = calcOffset(pct);
+        slider.css((sliderOrientation==="vertical") ? "top" : "left", (sliderOrientation==="vertical") ? offset.ch : offset.cw);
+        adjustContainer(offset);
+      }
+
+      $(window).on("resize.twentytwenty", function(e) {
+        adjustSlider(sliderPct);
+      });
+
+      var offsetX = 0;
+      var imgWidth = 0;
+      
+      slider.on("movestart", function(e) {
+        if (((e.distX > e.distY && e.distX < -e.distY) || (e.distX < e.distY && e.distX > -e.distY)) && sliderOrientation !== 'vertical') {
+          e.preventDefault();
+        }
+        else if (((e.distX < e.distY && e.distX < -e.distY) || (e.distX > e.distY && e.distX > -e.distY)) && sliderOrientation === 'vertical') {
+          e.preventDefault();
+        }
+        container.addClass("active");
+        offsetX = container.offset().left;
+        offsetY = container.offset().top;
+        imgWidth = beforeImg.width(); 
+        imgHeight = beforeImg.height();          
+      });
+
+      slider.on("moveend", function(e) {
+        container.removeClass("active");
+      });
+
+      slider.on("move", function(e) {
+        if (container.hasClass("active")) {
+          sliderPct = (sliderOrientation === 'vertical') ? (e.pageY-offsetY)/imgHeight : (e.pageX-offsetX)/imgWidth;
+          if (sliderPct < 0) {
+            sliderPct = 0;
+          }
+          if (sliderPct > 1) {
+            sliderPct = 1;
+          }
+          adjustSlider(sliderPct);
+        }
+      });
+
+      container.find("img").on("mousedown", function(event) {
+        event.preventDefault();
+      });
+
+      $(window).trigger("resize.twentytwenty");
+    });
+  };
+
+})(jQuery);

app/assets/javascripts/outdatedbrowser.js

+/*!--------------------------------------------------------------------
+JAVASCRIPT "Outdated Browser"
+Version:    1.1.0 - 2014
+author:     Burocratik
+website:    http://www.burocratik.com
+* @preserve
+-----------------------------------------------------------------------*/
+var outdatedBrowser = function(options) {
+
+    //Variable definition (before ajax)
+    var outdated = document.getElementById("outdated");
+
+    // Default settings
+    this.defaultOpts = {
+        bgColor: '#f25648',
+        color: '#ffffff',
+        lowerThan: 'transform',
+        languagePath: '../outdatedbrowser/lang/en.html'
+    }
+
+    if (options) {
+        //assign css3 property to IE browser version
+        if(options.lowerThan == 'IE8' || options.lowerThan == 'borderSpacing') {
+            options.lowerThan = 'borderSpacing';
+        } else if (options.lowerThan == 'IE9' || options.lowerThan == 'boxShadow') {
+            options.lowerThan = 'boxShadow';
+        } else if (options.lowerThan == 'IE10' || options.lowerThan == 'transform' || options.lowerThan == '' || typeof options.lowerThan === "undefined") {
+            options.lowerThan = 'transform';
+        } else if (options.lowerThan == 'IE11' || options.lowerThan == 'borderImage') {
+            options.lowerThan = 'borderImage';
+        }
+        //all properties
+        this.defaultOpts.bgColor = options.bgColor;
+        this.defaultOpts.color = options.color;
+        this.defaultOpts.lowerThan = options.lowerThan;
+        this.defaultOpts.languagePath = options.languagePath;
+
+        bkgColor = this.defaultOpts.bgColor;
+        txtColor = this.defaultOpts.color;
+        cssProp = this.defaultOpts.lowerThan;
+        languagePath = this.defaultOpts.languagePath;
+    } else {
+        bkgColor = this.defaultOpts.bgColor;
+        txtColor = this.defaultOpts.color;
+        cssProp = this.defaultOpts.lowerThan;
+        languagePath = this.defaultOpts.languagePath;
+    };//end if options
+
+
+    //Define opacity and fadeIn/fadeOut functions
+    var done = true;
+
+    function function_opacity(opacity_value) {
+        outdated.style.opacity = opacity_value / 100;
+        outdated.style.filter = 'alpha(opacity=' + opacity_value + ')';
+    }
+
+    // function function_fade_out(opacity_value) {
+    //     function_opacity(opacity_value);
+    //     if (opacity_value == 1) {
+    //         outdated.style.display = 'none';
+    //         done = true;
+    //     }
+    // }
+
+    function function_fade_in(opacity_value) {
+        function_opacity(opacity_value);
+        if (opacity_value == 1) {
+            outdated.style.display = 'block';
+        }
+        if (opacity_value == 100) {
+            done = true;
+        }
+    }
+
+    //check if element has a particular class
+    // function hasClass(element, cls) {
+    //     return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
+    // }
+
+    var supports = (function() {
+       var div = document.createElement('div'),
+          vendors = 'Khtml Ms O Moz Webkit'.split(' '),
+          len = vendors.length;
+
+       return function(prop) {
+          if ( prop in div.style ) return true;
+
+          prop = prop.replace(/^[a-z]/, function(val) {
+             return val.toUpperCase();
+          });
+
+          while(len--) {
+             if ( vendors[len] + prop in div.style ) {
+                return true;
+             }
+          }
+          return false;
+       };
+    })();
+
+    //if browser does not supports css3 property (transform=default), if does > exit all this
+    if ( !supports(''+ cssProp +'') ) {
+        if (done && outdated.style.opacity !== '1') {
+            done = false;
+            for (var i = 1; i <= 100; i++) {
+                setTimeout((function (x) {
+                    return function () {
+                        function_fade_in(x);
+                    };
+                })(i), i * 8);
+            }
+        }
+    }else{
+        return;
+    };//end if
+
+    //Check AJAX Options: if languagePath == '' > use no Ajax way, html is needed inside <div id="outdated">
+    if( languagePath === ' ' || languagePath.length == 0 ){
+        startStylesAndEvents();
+    }else{
+        grabFile(languagePath);
+    }
+
+    //events and colors
+    function startStylesAndEvents(){
+        var btnClose = document.getElementById("btnCloseUpdateBrowser");
+        var btnUpdate = document.getElementById("btnUpdateBrowser");
+
+        //check settings attributes
+        outdated.style.backgroundColor = bkgColor;
+        //way too hard to put !important on IE6
+        outdated.style.color = txtColor;
+        outdated.children[0].style.color = txtColor;
+        outdated.children[1].style.color = txtColor;
+
+        //check settings attributes
+        btnUpdate.style.color = txtColor;
+        // btnUpdate.style.borderColor = txtColor;
+        if (btnUpdate.style.borderColor) btnUpdate.style.borderColor = txtColor;
+        btnClose.style.color = txtColor;
+
+        //close button
+        btnClose.onmousedown = function() {
+            outdated.style.display = 'none';
+            return false;
+        };
+
+        //Override the update button color to match the background color
+        btnUpdate.onmouseover = function() {
+            this.style.color = bkgColor;
+            this.style.backgroundColor = txtColor;
+        };
+        btnUpdate.onmouseout = function() {
+            this.style.color = txtColor;
+            this.style.backgroundColor = bkgColor;
+        };
+    }//end styles and events
+
+
+    // IF AJAX with request ERROR > insert english default
+    var ajaxEnglishDefault = '<h6>Your browser is out-of-date!</h6>'
+        + '<p>Update your browser to view this website correctly. <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/">Update my browser now </a></p>'
+        + '<p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Close">&times;</a></p>';
+
+
+    //** AJAX FUNCTIONS - Bulletproof Ajax by Jeremy Keith **
+    function getHTTPObject() {
+      var xhr = false;
+      if (window.XMLHttpRequest) {
+        xhr = new XMLHttpRequest();
+      } else if (window.ActiveXObject) {
+        try {
+          xhr = new ActiveXObject("Msxml2.XMLHTTP");
+        } catch(e) {
+          try {
+            xhr = new ActiveXObject("Microsoft.XMLHTTP");
+          } catch(e) {
+            xhr = false;
+          }
+        }
+      }
+      return xhr;
+    };//end function
+
+    function grabFile(file) {
+        var request = getHTTPObject();
+            if (request) {
+                request.onreadystatechange = function() {
+                displayResponse(request);
+            };
+                request.open("GET", file, true);
+                request.send(null);
+            }
+        return false;
+    };//end grabFile
+
+    function displayResponse(request) {
+        var insertContentHere = document.getElementById("outdated");
+        if (request.readyState == 4) {
+            if (request.status == 200 || request.status == 304) {
+                insertContentHere.innerHTML = request.responseText;
+            }else{
+                insertContentHere.innerHTML = ajaxEnglishDefault;
+            }
+            startStylesAndEvents();
+        }
+      return false;
+    };//end displayResponse
+
+////////END of outdatedBrowser function
+};
+
+
+
+
+
+
+

app/assets/stylesheets/application.css

-/*
-*=require header.min.css
-*=require main.css
-*/

app/assets/stylesheets/application.scss

+
+@import "bootstrap-sprockets";
+@import "bootstrap";
+@import 'main';

app/assets/stylesheets/main.css → app/assets/stylesheets/main.scss

@@ -439,7 +439,7 @@ h2 {
   color: #fff;
 }
 .head_block {
-  background: transparent url(../img/head_block_bg.jpg) no-repeat center center; 
+  background: transparent url(head_block_bg.jpg) no-repeat center center; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
@@ -1467,7 +1467,7 @@ h3 {
 	left: 0;
 	right: 0;
 	height: 40px;
-	background: transparent url(../img/modal_header_top_bg.jpg) no-repeat center center;
+	background: transparent url(modal_header_top_bg.jpg) no-repeat center center;
 	-webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
@@ -1615,12 +1615,12 @@ textarea.form-control:focus {
 .form_ok .form-control:focus,
 .form_ok .form-control {
 	border-color: #60f2dc;
-	background: #fff url(../img/form_ok.svg) no-repeat right 9px top 13px;
+	background: #fff url(form_ok.svg) no-repeat right 9px top 13px;
 }
 .form_error .form-control:focus,
 .form_error .form-control {
 	border-color: #ff6c6c;
-	background: #fff url(../img/form_error.svg) no-repeat right 9px top 13px !important;
+	background: #fff url(form_error.svg) no-repeat right 9px top 13px !important;
 }
 .error_text {
 	color: #ff6c6c;

app/controllers/home_controller.rb

 class HomeController < ApplicationController
   def index; end
+
+  def open_project; end
 end
\ No newline at end of file

app/views/layouts/application.html.haml

@@ -24,6 +24,7 @@
     %link{:href => "img/favicons/apple-touch-icon180.png", :rel => "apple-touch-icon", :sizes => "180x180"}/
 
   %body
+    = render 'partials/modal'
     = render 'partials/header'
     = yield
     = render 'partials/footer-site'

app/views/layouts/mailer.html.erb

-<!DOCTYPE html>
-<html>
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-    <style>
-      /* Email styles need to be inline */
-    </style>
-  </head>
-
-  <body>
-    <%= yield %>
-  </body>
-</html>

app/views/layouts/mailer.text.erb

-<%= yield %>

app/views/partials/_footer.html.haml

@@ -12,7 +12,7 @@
 %script{:src => "//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"}
 / If CDN unavailable - connect local copy of jQuery
 :javascript
-  window.jQuery || document.write('<script src="js/jquery/jquery.min.js"><\/script>')
+  window.jQuery || document.write('<script src="jquery.min.js"><\/script>')
 / Plugins goes here
 %script{:src => "//maps.google.com/maps/api/js?sensor=true", :type => "text/javascript"}
 / %script{:src => "build.min.js"}
\ No newline at end of file

app/views/partials/_header.html.haml

-%header.header
-  .container
-    .main_menu
-      %a.logo{href: '#'}
-        %img{alt: '', src: ''}/
-      %nav.navbar.navbar-default
-        .container-fluid
-          .navbar-header
-            %button.navbar-toggle.collapsed{"aria-expanded" => "false", "data-target" => "#bs-example-navbar-collapse-1", "data-toggle" => "collapse", :type => "button"}
-              %span.sr-only Toggle navigation
-              %span.icon-bar
-              %span.icon-bar
-              %span.icon-bar
-          #bs-example-navbar-collapse-1.collapse.navbar-collapse
-            %ul.nav.navbar-nav
-              %li
-                %a{:href => "#"} про палатформу
-              %li
-                %a{:href => "#"} Ґранти
-              %li
-                %a{:href => "#"} Проекти
-              %li
-                %a{:href => "#"} Партнери
-              %li
-                %a{:href => "#"} DIGITAL WORKSHOP
-              %li
-                %a{:href => "#"} Про нас
-              %li
-                %a{:href => "#"} Новини
-              %li
-                %a{:href => "#"} Звіти
-              %li
-                %a{:href => "#"} connectif
+.warapper
+  %header.header
+    .container
+      .main_menu
+        %a.logo{href: '#'}
+          %img{alt: '', src: ''}/
+        %nav.navbar.navbar-default
+          .container-fluid
+            .navbar-header
+              %button.navbar-toggle.collapsed{"aria-expanded" => "false", "data-target" => "#bs-example-navbar-collapse-1", "data-toggle" => "collapse", :type => "button"}
+                %span.sr-only Toggle navigation
+                %span.icon-bar
+                %span.icon-bar
+                %span.icon-bar
+            #bs-example-navbar-collapse-1.collapse.navbar-collapse
+              %ul.nav.navbar-nav
+                %li
+                  %a{:href => "#"} про палатформу
+                %li
+                  %a{:href => "#"} Ґранти
+                %li
+                  %a{:href => "#"} Проекти
+                %li
+                  %a{:href => "#"} Партнери
+                %li
+                  %a{:href => "#"} DIGITAL WORKSHOP
+                %li
+                  %a{:href => "#"} Про нас
+                %li
+                  %a{:href => "#"} Новини
+                %li
+                  %a{:href => "#"} Звіти
+                %li
+                  %a{:href => "#"} connectif

app/views/partials/_modal.html.haml

+#modal.modal.fade.modal_styled{"aria-labelledby" => "modalLabel", :role => "dialog", :tabindex => "-1"}
+  .modal-dialog{:role => "document"}
+    .modal-content
+      .modal-header
+        .modal-header_top.clearfix
+          .modal-header_top_bg
+          .modal-header_steps_wrap
+            %span.modal-header_step.active крок 1
+            %span.modal-header_step крок 2
+          %button.round_link.close{"aria-label" => "Close", "data-dismiss" => "modal", :type => "button"}
+            %i.icon.icon_close
+        .modal-header_bot
+          .row
+            .col-sm-5
+              %h3#modalLabel.modal-title Фондування
+            .col-sm-7.modal-header_bot_amount
+              .form-group
+                %label{:for => "id_1"}
+                  %span.asterisk> *
+                  Сума внеску в
+                  %span.currency UAH
+                %input#id_1.form-control.amount_field{:type => "text", :value => "1 000 000 000"}/
+          .help_text.absolute
+            %span.asterisk *
+            Поля обов'язкові для заповнення
+      .modal-body.modal-body_pb
+        .row
+          .col-sm-9.modal-body_login
+            %h4.modal_subtitle
+              Авторизація
+            .form-group.form_ok
+              %label{:for => "id_2"}
+                %span.asterisk> *
+                Ім'я та прізвище
+              .field_wrap
+                %input#id_2.form-control{:type => "text", :value => "Сергій Тосканенок"}/
+            .form-group.form_error
+              %label{:for => "id_3"}
+                %span.asterisk> *
+                E-mail
+              .field_wrap
+                %input#id_3.form-control{:type => "email", :value => "@neomaster@gmail.com"}/
+              %span.error_text Не коректно введено електронну адресу.
+            .form-group
+              %label{:for => "id_4"}
+                %span.asterisk> *
+                Населений пункт
+              .field_wrap
+                %input#id_4.form-control{:type => "text"}/
+            .checkbox.checkbox_padd
+              %input#check1{:name => "check", :type => "checkbox", :value => "check1"}/
+              %label{:for => "check1"} Підписатись на оновлення
+          .col-sm-3.modal-body_registration
+            %h4.modal_subtitle
+              Швидка реєстрація
+            .soc_btn_wrap.clearfix
+              %a.soc_btn.soc_btn_fb{:href => "#"}
+                %i.icon.icon_fb
+              %a.soc_btn.soc_btn_tw{:href => "#"}
+                %i.icon.icon_tw
+              %a.soc_btn.soc_btn_google{:href => "#"}
+                %i.icon.icon_google
+        .text-center
+          %a.btn.btn_primary{:href => "#"} Далі
+#modal2.modal.fade.modal_styled{"aria-labelledby" => "modalLabel", :role => "dialog", :tabindex => "-1"}
+  .modal-dialog{:role => "document"}
+    .modal-content
+      .modal-header
+        .modal-header_top.clearfix
+          .modal-header_top_bg
+          .modal-header_steps_wrap
+            %span.modal-header_step крок 1
+            %span.modal-header_step.active крок 2
+          %button.round_link.close{"aria-label" => "Close", "data-dismiss" => "modal", :type => "button"}
+            %i.icon.icon_close
+        .modal-header_bot
+          .row
+            .col-sm-5
+              %h3#modalLabel.modal-title Фондування
+            .col-sm-7.modal-header_bot_amount
+              .form-group
+                %label{:for => "id_1"}
+                  %span.asterisk> *
+                  Сума внеску в
+                  %span.currency UAH
+                %span.amount_value 1 000 000 000
+      .modal-body
+        .help_text Оберіть платіжну систему зручну для вас
+        .radio
+          .radio_item
+            %input#liqpay{:checked => "checked", :name => "payment_system", :type => "radio", :value => "liqpay"}/
+            %label{:for => "liqpay"}
+              %img{:alt => "", :src => "img/liqpay.png"}/
+          .radio_item
+            %input#webmoney{:name => "payment_system", :type => "radio", :value => "webmoney"}/
+            %label{:for => "webmoney"}
+              %img{:alt => "", :src => "img/webmoney.png"}/
+        .text-center.modal_btns
+          %a.btn.btn_primary{:href => "#"} оплатити
+          .nav_link
+            %a.link{:href => "#"} Назад
+#modal3.modal.fade.modal_styled{"aria-labelledby" => "modalLabel", :role => "dialog", :tabindex => "-1"}
+  .modal-dialog{:role => "document"}
+    .modal-content
+      .modal-header
+        .modal-header_top.clearfix
+          .modal-header_top_bg
+          %button.round_link.close{"aria-label" => "Close", "data-dismiss" => "modal", :type => "button"}
+            %i.icon.icon_close
+        .modal-header_bot
+          %h3#modalLabel.modal-title Вхід
+          .help_text.absolute
+            %span.asterisk *
+            Поля обов'язкові для заповнення
+      .modal-body
+        .row
+          .col-sm-9.modal-body_login
+            %h4.modal_subtitle
+              Авторизація
+            .form-group.form_ok
+              %label{:for => "id_2"}
+                %span.asterisk> *
+                Ім'я та прізвище
+              .field_wrap
+                %input#id_2.form-control{:type => "text", :value => "Сергій Тосканенок"}/
+            .form-group.form_error
+              %label{:for => "id_3"}
+                %span.asterisk> *
+                E-mail
+              .field_wrap
+                %input#id_3.form-control{:type => "email", :value => "@neomaster@gmail.com"}/
+              %span.error_text Не коректно введено електронну адресу.
+            .form-group
+              %label{:for => "id_4"}
+                %span.asterisk> *
+                Населений пункт
+              .field_wrap
+                %input#id_4.form-control{:type => "text"}/
+          .col-sm-3.modal-body_registration
+            %h4.modal_subtitle
+              Швидка реєстрація
+            .soc_btn_wrap.clearfix
+              %a.soc_btn.soc_btn_fb{:href => "#"}
+                %i.icon.icon_fb
+              %a.soc_btn.soc_btn_tw{:href => "#"}
+                %i.icon.icon_tw
+              %a.soc_btn.soc_btn_google{:href => "#"}
+                %i.icon.icon_google
+        .text-center
+          %a.btn.btn_primary{:href => "#"} Далі
+
+
+#modal4.modal.fade{"aria-labelledby" => "gridSystemModalLabel", :role => "dialog", :tabindex => "-1"}
+  .modal-dialog{:role => "document"}
+    .modal-content
+      .modal-header
+        %button.close{"aria-label" => "Close", "data-dismiss" => "modal", :type => "button"}
+          %span{"aria-hidden" => "true"} ×
+        %h4#gridSystemModalLabel.modal-title Modal title
+      .modal-body
+        .row
+          .col-md-4 .col-md-4
+          .col-md-4.col-md-offset-4 .col-md-4 .col-md-offset-4
+        .row
+          .col-md-3.col-md-offset-3 .col-md-3 .col-md-offset-3
+          .col-md-2.col-md-offset-4 .col-md-2 .col-md-offset-4
+        .row
+          .col-md-6.col-md-offset-3 .col-md-6 .col-md-offset-3
+        .row
+          .col-sm-9
+            Level 1: .col-sm-9
+            .row
+              .col-xs-8.col-sm-6
+                Level 2: .col-xs-8 .col-sm-6
+              .col-xs-4.col-sm-6
+                Level 2: .col-xs-4 .col-sm-6
+      .modal-footer
+        %button.btn.btn-default{"data-dismiss" => "modal", :type => "button"} Close
+        %button.btn.btn-primary{:type => "button"} Save changes
+ 
\ No newline at end of file

config/routes.rb

 Rails.application.routes.draw do
  root 'home#index'
+ get  'open_project', to: 'home#open_project'
 end