Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

add tutorial pages to site

  • Loading branch information...
commit 9e7680443d2ee0abf65e5eb6e8cacef734342d7a 1 parent d430819
@ghostandthemachine ghostandthemachine authored
Showing with 152 additions and 9 deletions.
  1. +8 −0 lib/app.rb
  2. BIN  lib/public/images/tutorial/allow_access.png
  3. BIN  lib/public/images/tutorial/comments.png
  4. BIN  lib/public/images/tutorial/create_event.png
  5. BIN  lib/public/images/tutorial/create_message.png
  6. BIN  lib/public/images/tutorial/echidna_tile.png
  7. BIN  lib/public/images/tutorial/event_detail.png
  8. BIN  lib/public/images/tutorial/event_details_a.png
  9. BIN  lib/public/images/tutorial/event_details_b.png
  10. BIN  lib/public/images/tutorial/event_stream.png
  11. BIN  lib/public/images/tutorial/event_stream_close.png
  12. BIN  lib/public/images/tutorial/followers.png
  13. BIN  lib/public/images/tutorial/following.png
  14. BIN  lib/public/images/tutorial/google_sign_in.png
  15. BIN  lib/public/images/tutorial/google_sign_in_link.png
  16. BIN  lib/public/images/tutorial/inbox.png
  17. BIN  lib/public/images/tutorial/login.png
  18. BIN  lib/public/images/tutorial/messages.png
  19. BIN  lib/public/images/tutorial/set_date_for_event.png
  20. BIN  lib/public/images/tutorial/side_bar.png
  21. BIN  lib/public/images/tutorial/single_tile_big.png
  22. BIN  lib/public/images/tutorial/single_tile_eventful_small.png
  23. BIN  lib/public/images/tutorial/single_tile_small.png
  24. +10 −5 lib/views/index.haml
  25. +70 −0 lib/views/tutorial_1.haml
  26. +60 −0 lib/views/tutorial_2.haml
  27. +4 −4 project-x-sales/index.html
View
8 lib/app.rb
@@ -74,6 +74,14 @@
end
###############################################################
+get '/tutorial-1' do
+ haml :tutorial_1
+end
+
+get '/tutorial-2' do
+ haml :tutorial_2
+end
+
## Contact ####################################################
get '/contact' do
haml :contact
View
BIN  lib/public/images/tutorial/allow_access.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  lib/public/images/tutorial/comments.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  lib/public/images/tutorial/create_event.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  lib/public/images/tutorial/create_message.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  lib/public/images/tutorial/echidna_tile.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  lib/public/images/tutorial/event_detail.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  lib/public/images/tutorial/event_details_a.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  lib/public/images/tutorial/event_details_b.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  lib/public/images/tutorial/event_stream.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  lib/public/images/tutorial/event_stream_close.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  lib/public/images/tutorial/followers.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  lib/public/images/tutorial/following.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  lib/public/images/tutorial/google_sign_in.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  lib/public/images/tutorial/google_sign_in_link.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  lib/public/images/tutorial/inbox.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  lib/public/images/tutorial/login.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  lib/public/images/tutorial/messages.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  lib/public/images/tutorial/set_date_for_event.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  lib/public/images/tutorial/side_bar.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  lib/public/images/tutorial/single_tile_big.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  lib/public/images/tutorial/single_tile_eventful_small.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  lib/public/images/tutorial/single_tile_small.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
15 lib/views/index.haml
@@ -16,19 +16,19 @@
%img{:alt => "", :src => "images/index/project-x_5.png"}
.carousel-caption
%h4 Search for upcoming Events
- %p Use the search option to find out about upcoming events you don't want to miss! We offer you access to olur vast database which is connected with diverse sources such as BG TV and Google.
+ %p Use the search option to find out about upcoming events you don't want to miss! We offer you access to olur vast database which is connected with diverse sources such as BG TV and Google.
.item
%img{:alt => "", :src => "images/index/calendar4.png"}
.carousel-caption
%h4 Add events to your Google Calendar
%p Want to keep track of what's going on when where and who is joining? You decide which events to add to your personal Calendar to be up-to-date - anywhere, anytime!
- .item
+ .item
%img{:alt => "", :src => "images/index/login_665x440.png"}
.carousel-caption
-
+
%h4 Login with your Google account
- %p Too many accounts and passwords? No problem! Just use our comfortable option of using your Google account to login. Ready to go!
+ %p Too many accounts and passwords? No problem! Just use our comfortable option of using your Google account to login. Ready to go!
%a.left.carousel-control{"data-slide" => "prev", :href => "#myCarousel"} ‹
%a.right.carousel-control{"data-slide" => "next", :href => "#myCarousel"} ›
.row-fluid
@@ -49,4 +49,9 @@
%img{:src => "images/index/eventful_logo.png", :height => 125}
%h2 Packed with features.
%p
- Search for events and take advantage of our vasr database linked to web services such as Eventful which aims to help users search for, track and share information about events.
+ Search for events and take advantage of our vasr database linked to web services such as Eventful which aims to help users search for, track and share information about events.
+ %hr
+ .row
+ %h3
+ %a{:href => "tutorial-1"}
+ Getting Started
View
70 lib/views/tutorial_1.haml
@@ -0,0 +1,70 @@
+.container
+ .marketing
+ %h1 Project-X Tutorial
+ %h3 Using Project-X & How It Works
+ %br
+ %div
+ %div
+ %h2 Login
+ %h4
+ Do you have a Google account? If so, then you are well prepared to use Project-X.
+ %a{:href => "http://www.google.com"} If not, create your Google account here.
+ %br
+ %br
+ %img{:alt => "", :src => "/images/tutorial/google_sign_in.png"}/
+ %h5 Allow access
+ %h6
+ By granting Project-X access to your Google account you are authorizing us to access the information necessary to enable you to add Events of your choosing to your Google Calendar. For this to work Google provides Project-X with a temporary OAuth token necessary to post these events to your Calendar.
+ %br
+ %br
+ %img{:alt => "", :src => "/images/tutorial/allow_access.png"}/
+ %br
+ %div
+ %h2 The Event Stream
+ %h4
+ Here you can search and filter through a myriad of Events. Events are categorized so that you can easily filter the Stream the category selected - click a category to filter.
+ %br
+ %h5
+ Choose between: Outdoor, Personal, Music, TV, Movies, Entertainment, Art, Community, School, Sports, Political, Charity, Etc (for Events not covered by these categories), or All (to unfilter).
+ %h5
+ Categories are readily identifiable by their associated color.
+ %br
+ %img{:alt => "", :src => "/images/tutorial/event_stream.png"}/
+ %h6
+ The Event Stream represests all of the Events in our database and even some form external sources that are not yet within the database, but which are automatically added when a user expresses interest in the Event by choosing to add it to their Calendar; by doing this we are able to keep our database concise and store Events more appropriate to users' interests.
+ %br
+ %div
+ %h2 Event Tiles
+ %h4
+ Each Event is represented by a tile in the Stream.
+ %h5
+ Click on a tile to expand it and reveal further options - "More Info" to view the Event's detail page, or "Add To Calendar" to add it to your Google calendar.
+ %br
+ %img{:alt => "", :src => "/images/tutorial/echidna_tile.png"}/
+ %h6
+ Using AJAX the Event Stream is updated automatically, without page reload, in real-time, as new events are created.
+ %br
+ %div
+ %h2 Creating Events
+ %h4
+ To create an Event click on "Create Event" in the sidebar and then fill in the form.
+ %h5
+ Enter the details of the Event, select a category, and enter the URL of an image to be shown in the tile and detail page.
+ %h6
+ If there is no location, as in the case of a TV event, this field may be left blank.
+ %br
+ %img{:alt => "", :src => "/images/tutorial/create_event.png"}/
+ %br
+ %div
+ %h2 Event Detail Pages
+ %h4
+ After expanding a tile and click "More Info" to view that Event's detail page.
+ %h5
+ Here you can learn more about the Event - read a detailed description, get the address/location and view it on a Google map, get the date and time details, read user comments and post your own, and opt to follow the event's creator to add their events to your Stream.
+ %br
+ %img{:alt => "", :src => "/images/tutorial/event_details_a.png"}/
+ %img{:alt => "", :src => "/images/tutorial/event_details_b.png"}/
+.container
+ .marketing
+ %h2
+ %a{:href => "./tutorial-2"} Additional Features - Tutorial Part 2
View
60 lib/views/tutorial_2.haml
@@ -0,0 +1,60 @@
+.container
+ .marketing
+ %h1 Additional Features
+ %h3 Tutorial Continued...
+ %br
+.container
+ .marketing
+ %h2 Back to the side-bar
+%br
+ %div
+ .row-fluid
+ .span2
+ .span2
+ %img{:alt => "", :src => "/images/tutorial/side_bar.png"}/
+ .span6
+ %ul
+ %li
+ %h5 My Events
+ %h5
+ In addition to creating events users can view their own personal Event Stream by clicking "My Events". This will focus the Stream to include only Events that you have created or added to your Calendar.
+ %li
+ %h5 Messages
+ %h5
+ Clicking "Messages" will take you to your messages page where you can send messages to other users and view both your inbox and outbox (messages previously sent by you).
+ %li
+ %h5 Follwing & Followers
+ %h5
+ Upon viewing an Event's detail page you can opt to follow a user - this will add Events that they create to your personal Stream (your "My Events"). Likewise, other users may choose to follow you.
+ By clicking "Following" or "Followers" you may view a list of either those users that you are following or those that are following you.
+ %br
+ .container
+ .marketing
+ %div
+ %h2 More on Messages
+ %h5
+ To view a message click on the its row in the list of messages.
+ %img{:alt => "", :src => "/images/tutorial/messages.png"}/
+ %h6
+ If your inbox or sent-box is empty, then you have no messages.
+ %br
+ %h5
+ To create a message click the "Create" button, specify the recipient(s), provide a title, compose your message, and click "Send".
+ %img{:alt => "", :src => "/images/tutorial/create_message.png"}/
+ %br
+ %div
+ %h2 More on Following & Followers
+ %h5
+ To view your "Following" or "Followers" list click on the corresponding link in the side-bar. Your choice of Followings will be represented in your Stream (under "My Events") bringing Events created by these users into the mix. Following a user will also provide them with your username and email so that they may communicate with you.
+ %img{:alt => "", :src => "/images/tutorial/following.png"}/
+ %h6
+ To stop following a particular user simply click the "Unfollow" button for that entry.
+ %h5
+ By viewing your followers you can easily get in contact with these users via Project-X Messages or email.
+ %img{:alt => "", :src => "/images/tutorial/followers.png"}/
+ .container
+ .marketing
+ %h2
+ %a{:href => "http://intense-hamlet-3672.herokuapp.com"} Onward To Project-X!
+ %h5
+ %a{:href => "./tutorial-1"} Back to: Tutorial - Part 1
View
8 project-x-sales/index.html
@@ -54,19 +54,19 @@
window.location.replace("http://intense-hamlet-3672.herokuapp.com/search/" + encodeURIComponent(searchTerm));
}
});
-
+
function toggleNotificationTooltip() {
var notifier = $('#notifications-tooltip')
notifier.tooltip('toggle');
}
-
+
$('#notifications-tooltip').hover(toggleNotificationTooltip);
-
+
function toggleAdvancedSearchTooltip() {
var notifier = $('#advanced-search-btn')
notifier.tooltip('toggle');
}
-
+
$('#advanced-search-btn').hover(toggleAdvancedSearchTooltip);
//]]>
</script></div>
Please sign in to comment.
Something went wrong with that request. Please try again.