gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add lots of fun animations

Browse Source
This commit is contained in:
Michael Q Larson
2014-10-24 18:51:32 -07:00
parent 60c4e24495
commit 121a9339e1
8 changed files with 157 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
public/css/styles.less
View File

@ -82,10 +82,16 @@ h1, h2, h3, h4, h5, h6, p, li {
margin-top: -10px;
}
/**/
.btn-cta {
font-size: 40px;
}
.non-profit-cta {
font-size: 24.9px;
}
.btn {
white-space: normal;
-webkit-box-shadow: 2px 4px 1px rgba(0, 0, 0, 0.3);
@ -126,7 +132,7 @@ ul {
}
.nav-height {
height: 45px;
height: 50px;
}
.landing-icon {
@ -142,4 +148,31 @@ ul {
margin-top: -30px;
margin-bottom: -30px;
}
/**/
.text-success {
color: #5cb85c;
}
.delay-1 {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.delay-2 {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.delay-3 {
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.delay-5 {
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
.fast-animation {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
}

59
views/account/profile.jade
View File

@ -1,42 +1,41 @@
extends ../layout
block content
.page-header
h3 Profile Information
h1 Update your profile here:
.animated.flipInX
form.form-horizontal(action='/account/profile', method='POST')
input(type='hidden', name='_csrf', value=_csrf)
.form-group
label.col-sm-2.control-label(for='email') Email
.col-sm-4
input.form-control(type='email', name='email', id='email', value='#{user.email}')
.form-group
label.col-sm-2.control-label(for='name') Name
.col-sm-4
input.form-control(type='text', name='name', id='name', value='#{user.profile.name}')
.form-group
label.col-sm-2.control-label(for='location') Location
.col-sm-4
input.form-control(type='text', name='location', id='location', value='#{user.profile.location}')
.form-group
label.col-sm-2.control-label(for='website') Website
.col-sm-4
input.form-control(type='text', name='website', id='website', value='#{user.profile.website}')
.form-group
.col-sm-offset-2.col-sm-4
button.btn.btn.btn-primary(type='submit')
span.ion-edit
| Update my profile
form.form-horizontal(action='/account/profile', method='POST')
input(type='hidden', name='_csrf', value=_csrf)
.form-group
label.col-sm-2.control-label(for='email') Email
.col-sm-4
input.form-control(type='email', name='email', id='email', value='#{user.email}')
.form-group
label.col-sm-2.control-label(for='name') Name
.col-sm-4
input.form-control(type='text', name='name', id='name', value='#{user.profile.name}')
.form-group
label.col-sm-2.control-label(for='location') Location
.col-sm-4
input.form-control(type='text', name='location', id='location', value='#{user.profile.location}')
.form-group
label.col-sm-2.control-label(for='website') Website
.col-sm-4
input.form-control(type='text', name='website', id='website', value='#{user.profile.website}')
.form-group
.col-sm-offset-2.col-sm-4
button.btn.btn.btn-primary(type='submit')
span.ion-edit
| Update Profile
p You can delete your account, but keep in mind this action is irreversible.
h3 Danger Zone
button.btn.btn-danger.confirm-deletion
span.ion-trash-b
| Delete my account
| I want to delete my account
script.
$('.confirm-deletion').on("click", function() {
$('#modal-dialog').modal('show');
});
#modal-dialog.modal.animated.bounceInLeft
#modal-dialog.modal.animated.wobble
.modal-dialog
.modal-content
.modal-header
@ -45,7 +44,7 @@ block content
.modal-body
p Pro Tip: If you tweet feedback to 
a(href="https://twitter.com/intent/tweet?text=Hey%20@freecodecamp") @FreeCodeCamp
| , we will respond!
| , we'll act quickly on it!
.modal-footer
a.btn.btn-success.btn-block(href='#', data-dismiss='modal', aria-hidden='true')
span.ion-happy

18
views/challenges/partials/challenge.jade
View File

@ -1,7 +1,7 @@
.panel.panel-primary
.panel-heading Challenge: #{name}
.panel.panel-body
.responsive-container
.responsive-container.animated.zoomIn.delay-1
iframe(src='//player.vimeo.com/video/#{video}', frameborder='0', webkitallowfullscreen='', mozallowfullscreen='', allowfullscreen='')
h3 Instructions:
for direction in directions
@ -17,4 +17,18 @@
ol
for challenge in challenges
li= challenge
a.btn.btn-primary.btn-large.btn-block(href='/curriculum') I've completed this challenge
.btn.btn-primary.btn-large.btn-block.completed-challenge I've completed this challenge
script.
$('.completed-challenge').on("click", function() {
$('#modal-dialog').modal('show');
});
#modal-dialog.modal
.modal-dialog.animated.zoomIn.fast-animation
.modal-content
.modal-header
a.close(href='#', data-dismiss='modal', aria-hidden='true') ×
.text-center
h1.animated.zoomInDown Nicely done!
.animated.zoomInUp.delay-1
span.landing-icon.ion-checkmark-circled.text-success
a.animated.fadeIn.delay-2.btn.btn-primary.btn-block(href='/curriculum', aria-hidden='true') Take me back to my curriculum

64
views/contact.jade
View File

@ -2,36 +2,34 @@ extends layout
block content
.jumbotron
h1 Hey non-profits,
h2 We want to help you get things done faster and better!
h3 Our students will help you build that donor tracking system, community message board, or whatever your organization needs, at no cost. In exchange, we ask only that you:
h4
ul
li &#8226 meet with them regularly in person. If that's not possible, you can teleconference with them. This way, you can collaboratively establish and review milestones.
br
li &#8226 clearly communicate your goals for the project: what will this project solve, and for whom?
br
li &#8226 know that they will use cutting edge JavaScript frameworks to build your project. Please don't expect them to use Wordpress or other proprietary or old-school technologies.
br
li &#8226 don't lower your expectiations. Their goal is to produce work that's up to your standards.
h3 If you're OK with all this, great! We can help you!
h4 Fill this out and we'll get right back to you.
form.form-horizontal(role='form', method='POST')
input(type='hidden', name='_csrf', value=_csrf)
.form-group
label(class='col-sm-2 control-label', for='name') Your name
.col-sm-8
input.form-control(type='text', name='name', id='name', autofocus=true)
.form-group
label(class='col-sm-2 control-label', for='email') Your email
.col-sm-8
input.form-control(type='text', name='email', id='email')
.form-group
label(class='col-sm-2 control-label', for='message') Briefly describe what problem you need to solve, and for whom.
.col-sm-8
textarea.form-control(type='text', name='message', id='message', rows='7')
.form-group
.col-sm-offset-2.col-sm-8
button.btn.btn-primary(type='submit')
span.ion-paper-airplane
| Submit
h1.animated.lightSpeedIn.text-center Let's do things faster and better with software!
.animated.fadeIn.delay-2.landing-panel-body
h3 Our students will help you build that donor tracking system, community message board, or whatever your organization needs, at no cost.
h3 In exchange, we ask only that you:
h4
ul
li &#8226 meet with them regularly in person. If that's not possible, you can teleconference with them. This way, you can collaboratively establish and review milestones.
li &#8226 clearly communicate your goals for the project: what will this project solve, and for whom?
li &#8226 know that they will use cutting edge JavaScript frameworks to build your project. Please don't expect them to use Wordpress or other proprietary or old-school technologies.
li &#8226 don't lower your expectiations. Their goal is to produce work that's up to your standards.
h3 If you're OK with all this, great! We can help you!
h4 Fill this out and we'll get right back to you.
form.form-horizontal(role='form', method='POST')
input(type='hidden', name='_csrf', value=_csrf)
.form-group
label(class='col-sm-2 control-label', for='name') Your name
.col-sm-8
input.form-control(type='text', name='name', id='name', autofocus=true)
.form-group
label(class='col-sm-2 control-label', for='email') Your email
.col-sm-8
input.form-control(type='text', name='email', id='email')
.form-group
label(class='col-sm-2 control-label', for='message') Briefly describe what problem you need to solve, and for whom.
.col-sm-8
textarea.form-control(type='text', name='message', id='message', rows='7')
.form-group
.col-sm-offset-2.col-sm-8
button.btn.btn-primary(type='submit')
span.ion-paper-airplane
| Submit

30
views/curriculum/curriculum.jade
View File

@ -1,18 +1,22 @@
extends ../layout
block content
.row
.col-sm-8.col-xs-12
.jumbotron
h1 Welcome to Free Code Camp!
p Here are a few quick tips:
ol
li Work through our challenges in order. Many challenges are self-graded. If you want our feedback, 
a(href="https://twitter.com/intent/tweet?text=Hey%20@freecodecamp") tweet a link to your project to @freecodecamp.
li If you get stuck, try working through our recommended (free) courses. They're super helpful, but totally optional. You can pair program on them, too.
li Challenge #2 will show you how to start a pair programming session. Pair program as much as possible. It's more fun, and you'll learn better that way.
p We're working to create more challenges. If you have an idea for a challenge you'd like us to implement,&nbsp
a(href="https://twitter.com/intent/tweet?text=Hey%20@freecodecamp") tweet it to @freecodecamp.
.col-sm-4.col-xs-12
.col-xs-12.col-sm-8
.panel.panel-primary
.panel-heading Your Curriculum
.panel.panel-body
.responsive-container.animated.zoomIn.delay-1
iframe(src='//player.vimeo.com/video/#{video}', frameborder='0', webkitallowfullscreen='', mozallowfullscreen='', allowfullscreen='')
h3 Instructions:
p Here are a few quick tips:
ol
li Work through our challenges in order. Many challenges are self-graded. If you want our feedback, 
a(href="https://twitter.com/intent/tweet?text=Hey%20@freecodecamp") tweet a link to your project to @freecodecamp.
li If you get stuck, try working through our recommended (free) courses. They're super helpful, but totally optional. You can pair program on them, too.
li Challenge #2 will show you how to start a pair programming session. Pair program as much as possible. It's more fun, and you'll learn better that way.
p We're working to create more challenges. If you have an idea for a challenge you'd like us to implement,&nbsp
a(href="https://twitter.com/intent/tweet?text=Hey%20@freecodecamp") tweet it to @freecodecamp.
.col-sm-4.col-xs-12.animated.flipInY.delay-2
include ./../partials/challenges
.col-sm-4.col-xs-12
.col-sm-4.col-xs-12.animated.flipInY.delay-2
include ./../partials/courses

52
views/home.jade
View File

@ -2,31 +2,33 @@ extends layout
block content
.jumbotron
.text-center
h1 Become a Software Engineer
.animated.pulse
h1 Become a Software Engineer
h2 Learn to code by collaborating on projects for non-profits
.row
.col-xs-12.col-sm-12.col-md-4
h3 Technical Mastery
.negative-10
span.landing-icon.ion-settings.text-primary
.negative-10
p You'll learn to code by pair programming (where two people code together on one computer) through our coding challenges.
.col-xs-12.col-sm-12.col-md-4
h3 Unique Portfolio Projects
.negative-10
span.landing-icon.ion-social-github.text-primary
.negative-10
p You'll use your new coding skills to build software solutions for non-profits. Your portfolio projects will have grateful users.
.col-xs-12.col-sm-12.col-md-4
h3 Glowing References
.negative-10
span.landing-icon.ion-thumbsup.text-primary
.negative-10
p You'll gain the respect of your peers and the non-profits you help. These types of connections are critical to your job search.
a.btn.btn-cta.btn-primary(href="/login") Sign in now to get started (it's free)
br
br
a.btn.btn-primary(href="/contact") I'm with a non-profit and want free help from a Software Engineer
.delay-2.animated.fadeIn
.row
.col-xs-12.col-sm-12.col-md-4
h3 Technical Mastery
.negative-10
span.landing-icon.ion-settings.text-primary
.negative-10
p You'll learn to code by pair programming (where two people code together on one computer) through our coding challenges.
.col-xs-12.col-sm-12.col-md-4
h3 Unique Portfolio Projects
.negative-10
span.landing-icon.ion-social-github.text-primary
.negative-10
p You'll use your new coding skills to build software solutions for non-profits. Your portfolio projects will have grateful users.
.col-xs-12.col-sm-12.col-md-4
h3 Glowing References
.negative-10
span.landing-icon.ion-thumbsup.text-primary
.negative-10
p You'll gain the respect of your peers and the non-profits you help. These types of connections are critical to your job search.
a.btn.btn-cta.btn-primary(href="/login") Sign in now to start coding (it's free)
br
br
a.btn.non-profit-cta.btn-success(href="/contact") I'm with a non-profit and want free help coding something
br
.panel.panel-primary
.panel-heading.landing-panel-heading Frequently Asked Questions
@ -101,4 +103,4 @@ block content
p Unlike most bootcamps, anyone can study at Free Code Camp. We're not going to tell you that you can't become a software engineer. We believe the only person who should be able to tell you that is you. If you perservere, and keep working through our challenges and non-profits' projects, you will become an employable software engineer.
br
.text-center
a.btn.btn-cta.btn-primary(href="/login") Sign in now to get started (it's free)
a.btn.btn-cta.btn-primary(href="/login") Sign in now to start coding (it's free)

2
views/partials/challenges.jade
View File

@ -1,4 +1,4 @@
.panel.panel-primary
.panel.panel-primary.animated.flipInY.delay-2
.panel-heading Challenges
.panel-body
ol

2
views/partials/courses.jade
View File

@ -1,4 +1,4 @@
.panel.panel-primary
.panel.panel-primary.animated.flipInY.delay-2
.panel-heading Recommended (Free) Courses
.panel-body
ol