diff --git a/_sass/_default.scss b/_sass/_default.scss
index a2bdb26724e8391ea6dc6900d1e7f03581f9f345..378b8ef7186be116fbff4b2738011b847c8e000f 100644
--- a/_sass/_default.scss
+++ b/_sass/_default.scss
@@ -60,6 +60,33 @@
}
/* =Base */
+
+
+
+
+input[type=text] {
+ width: 25%;
+ box-sizing: border-box;
+ border: 2px solid #333333;
+ border-radius: 40px;
+ background-color: #333333;
+ font-size: 16px;
+ text-align: center;
+ padding: 10px 0px 10px 0px;
+ -webkit-transition: width 0.4s ease-in-out;
+ transition: width 0.4s ease-in-out;
+ -moz-box-shadow: inset 0 0 10px #191919;
+ -webkit-box-shadow: inset 0 0 10px #191919;
+ box-shadow: inset 0 0 10px #191919;
+}
+
+input[type=text]:focus {
+ width: 75%;
+}
+
+
+
+
body {
font-family: 'Open Sans';
color: $iron;
@@ -505,6 +532,12 @@ strong {
}
}
@media (max-width: 620px) {
+ input[type=text] {
+ width: 80%;
+ }
+ input[type=text]:focus {
+ width: 100%;
+ }
.card {
width: 80%;
}
diff --git a/app.js b/app.js
new file mode 100644
index 0000000000000000000000000000000000000000..0f09039cd6d067530c53a6966bb9bedb4ae34d27
--- /dev/null
+++ b/app.js
@@ -0,0 +1,112 @@
+
+$(function(){
+
+ var model = {
+ // renomear
+ dat: [
+
+ ],
+ read_json: function() {
+
+ $.ajax({
+ url: "cards/info.json",
+ dataType: 'json',
+ async: false,
+ success: function(data) {
+ $(data["cards"]).each(function(){
+ var card_info = $(this)[0];
+ model.set_data(card_info);
+ });
+ }
+ });
+
+ },
+ set_data: function(d) {
+ model.dat.push(d);
+ },
+ get_data: function() {
+ return model.dat;
+ },
+ filter_data: function(conteudo) {
+ var $d = model.dat;
+ var $filter = [];
+ var $c = conteudo.toLowerCase();
+ $($d).each(function(i){
+ if(
+ $d[i].name.toLowerCase().indexOf($c) >= 0 ||
+ $d[i].description.toLowerCase().indexOf($c) >= 0 ||
+ $d[i].button_text.toLowerCase().indexOf($c) >= 0
+ ) {
+ $filter.push($d[i]);
+ }
+ });
+
+ return $filter;
+ },
+ init: function() {
+ model.read_json();
+ }
+ };
+
+
+ var octopus = {
+ init: function() {
+ model.init();
+ view.init();
+ octopus.create_card(model.get_data());
+ },
+ create_card: function(d) {
+ $.each(d, function(i){
+ view.create_card(d[i].name, d[i].description, d[i].button_text);
+ });
+ },
+ filter_data: function(c) {
+ var d = model.filter_data(c);
+ $.each(d, function(i){
+ view.create_card(d[i].name, d[i].description, d[i].button_text);
+ });
+ },
+ recreate_cards: function() {
+ octopus.create_card(model.get_data());
+ }
+ };
+
+ // Renomear
+ var view = {
+ init: function() {
+ this.container = $(".flex-wrapper");
+ this.search_field = $("#search_field");
+ view.events();
+ },
+ events: function(){
+ this.search_field.on('input',function(){
+ var $conteudo = $(this).val();
+ view.clean_cards();
+
+
+ if($conteudo.length == 0){
+ octopus.recreate_cards();
+ }else {
+ octopus.filter_data($conteudo);
+ }
+
+ });
+ },
+ create_card: function(name, desc, bt_txt){
+ var $card = $("
").addClass("card");
+ var $h2 = $("
").addClass("title").text(name);
+ var $desc = $("").addClass("description").text(desc);
+ var $button = $("