main Site - Events Page

[AbdealiLoKo]

@deepakpadamata : Start this off. Super important ! Search for something good.

basically it'll be like this : 1st page - shows sub categoried - aerofest, etc. 2nd page - shows events in the sub category - robowars, reverse coding, etc 3rd page - shows tabs for the event. - eg : Prize money, Problem statements, introduction, etc.

We need a design by tomorrow night. no delaying this. The most important page :/

[deepakpadamata]

http://www.cedricmarteau.com/ Check this out. I think the six-panel thing is nice. This will also allow for a very , nice background for each separate event. We can make it so that after click categories populate top and bottom, showing the events. After opening an event, we can populate left and right with events, showing details

[deepakpadamata]

http://gorohov.name/ I guess we can try this but there may be too many to do it. Opinion?

[AbdealiLoKo]

The first one took more than 5 mins to load ...

The second one ... yes, sli complicated it'll look. Also, even now on that page i do not understand what i need to click. it's fairly confusing. You could make the hexagons bigger and keep the 6 or 7 subcategories.

Reg 1 : I like the 6 panel effect. Background for every image will make it very bulky dont you think ? or do you think we can give some good loading effect ? The going out thing is nice. Let's try and put images for every event. Not sure how it'll turn out though :P Worst case scenario we'll put svgs ... somehow.

I like the first link actually. @ others : any opinions ?

@ deepak : Can you begin making it ?

Also, for subcategories page ... I've mentioned this earlier : Let's have a unique animation for each subcatrgory. Like the tile folds itself and flies away for aerofest. We'll ideate that soon. Right now, put them as tiles and do.

Also, deepak ... make a main page folder in project and work there. Don't do this in minimalist-site. That one is complete.

On Mon, Jun 23, 2014 at 9:51 PM, Deepak Padamata notifications@github.com wrote:

http://gorohov.name/ I guess we can try this but there may be too many to do it. Opinion?

Reply to this email directly or view it on GitHub https://github.com/ShaastraWebops/frontend/issues/41#issuecomment-46867265 .

[deepakpadamata]

Yes, I'll start on making the first thing. And yeah, i think the images is most of the loading time. Also, i think our custom animations can easily be added to this... Just put the animation after the 6-panel splits apart and we can load the individual images while the animation happens, or even in the background right after page load.(Is it possible?).

[AbdealiLoKo]

Yes, it is. But it's slightly complicated :P But do-able. Let's go on with it. It's something we should figure out. We've been avoiding pics for waay too long XD

On Mon, Jun 23, 2014 at 10:34 PM, Deepak Padamata notifications@github.com wrote:

Yes, I'll start on making the first thing. And yeah, i think the images is most of the loading time. Also, i think our custom animations can easily be added to this... Just put the animation after the 6-panel splits apart and we can load the individual images while the animation happens, or even in the background right after page load.(Is it possible?).

Reply to this email directly or view it on GitHub https://github.com/ShaastraWebops/frontend/issues/41#issuecomment-46872608 .

[AbdealiLoKo]

updates ?

[AbdealiLoKo]

@deepakpadamata : updates ?

[AbdealiLoKo]

updates ? ... Ive already mentioned multiple times this the THE MOST IMPORTANT page ... If you dont think you can do it, tell me.

[deepakpadamata]

I put the basic selector in the repo. The page is at http://www.shaastra.org/2015/frontend/Events-progress/ I gotta change the images, put descriptions and sub-categories. Also, the page takes a hell of a long time to load, but thats mainly coz of images. Please give feedback Sorry for the huge delay

[AbdealiLoKo]

Can you please move that to perconal folder ... or make a mainsite folder in projects

On Sun, Jun 29, 2014 at 9:32 PM, Deepak Padamata notifications@github.com wrote:

I put the basic selector in the repo. The page is at http://www.shaastra.org/2015/frontend/Events-progress/ I gotta change the images, put descriptions and sub-categories. Also, the page takes a hell of a long time to load, but thats mainly coz of images. Please give feedback

Reply to this email directly or view it on GitHub https://github.com/ShaastraWebops/frontend/issues/41#issuecomment-47458776 .

[AbdealiLoKo]

Also, there are one 6 pics right ? Why does it take so long ? Accordign to chrome it took 43 seconds for me to load

On Sun, Jun 29, 2014 at 9:43 PM, Abdeali Kothari abdealikothari@gmail.com wrote:

Can you please move that to perconal folder ... or make a mainsite folder in projects

On Sun, Jun 29, 2014 at 9:32 PM, Deepak Padamata <notifications@github.com

wrote:

I put the basic selector in the repo. The page is at http://www.shaastra.org/2015/frontend/Events-progress/ I gotta change the images, put descriptions and sub-categories. Also, the page takes a hell of a long time to load, but thats mainly coz of images. Please give feedback

Reply to this email directly or view it on GitHub https://github.com/ShaastraWebops/frontend/issues/41#issuecomment-47458776 .

[deepakpadamata]

there are 12 pics in the initial selector, 1 background and 1 overlay (the slide up/down thing). there are also more pics of the inner elements, and they all (read:5.1 MB) have to load before the page works. Gotta fix that, I'll look into it.

[AbdealiLoKo]

hey, started with subcategories page ?

[deepakpadamata]

no, still on some minor content problem. I have a design idea, check out http://www.cedricmarteau.com/ (the original site). It has 3 panels below the "works" panel. Will it look good if I put this inside, for showing sub categories?

[AbdealiLoKo]

Those 3 panels are very confusing .. I didnt undrstand what they are for and they randomly go from mirrored to normal ...

You can have rectangles, but let's do what i had mentioned earlier ? animaytions for each subcategory

On Wed, Jul 2, 2014 at 8:33 PM, Deepak Padamata notifications@github.com wrote:

no, still on some minor content problem. I have a design idea, check out http://www.cedricmarteau.com/ (the original site). It has 3 panels below the "works" panel. Will it look good if I put this inside, for showing sub categories?

Reply to this email directly or view it on GitHub https://github.com/ShaastraWebops/frontend/issues/41#issuecomment-47787894 .

[AbdealiLoKo]

@ chaitanya : Things we need to do : make the subcategory page We'll be having 10-12 squares with names + pics (similar to last years) and when you click on something, an animation related to the subcategory should be done. So,

• Aerofest - fold the square into a paper plane and make it fly away
• Design and build - Make the pic
• Coding - cut up the image into multiple things and make it fall down at varying speeds. Or convert the image to green numbers and make them fall at varying speeds
• Involve and Quizzes - As project X is in this, lets make a catapult throwing something out of the screen
• Electronics - Make multiple lines like pcb designs come out of the pic and cover the page (looking similar to this http://blog.lnsresearch.com/Portals/136847/images/electronics-manufacturing-metrics.jpg )
• Flagship - As robooceana is there in it, lets keep it as navarch, make the picture shark shaped and make it swim away (similar to aerofest)
• Spotlight - dunno
• Workshops - make a spanner and a bolt. make the spanner tighten the bolt.
• Shows - dunno
• B-Events - dunno

Lets start with these. If you have some other ideas, post here. AND a reminder ... we launch in 25 days or so Finish up atleast 4 of the animations by SUNDAY

@deepakpadamata @chinnichaitanya

On Wed, Jul 2, 2014 at 8:35 PM, Abdeali Kothari abdealikothari@gmail.com wrote:

Those 3 panels are very confusing .. I didnt undrstand what they are for and they randomly go from mirrored to normal ...

You can have rectangles, but let's do what i had mentioned earlier ? animaytions for each subcategory

On Wed, Jul 2, 2014 at 8:33 PM, Deepak Padamata notifications@github.com wrote:

no, still on some minor content problem. I have a design idea, check out http://www.cedricmarteau.com/ (the original site). It has 3 panels below the "works" panel. Will it look good if I put this inside, for showing sub categories?

Reply to this email directly or view it on GitHub https://github.com/ShaastraWebops/frontend/issues/41#issuecomment-47787894 .

[chinnichaitanya]

http://mrdoob.github.io/three.js/examples/css3d_periodictable.html

[AbdealiLoKo]

Thats a bit too high funda no ? Where do you wanna use it ?

On Thu, Jul 3, 2014 at 2:19 PM, Chinni Chaitanya notifications@github.com wrote:

http://mrdoob.github.io/three.js/examples/css3d_periodictable.html

Reply to this email directly or view it on GitHub https://github.com/ShaastraWebops/frontend/issues/41#issuecomment-47881685 .

[chinnichaitanya]

for coding animation

[AbdealiLoKo]

o.o that is way too high funda i think. lets make something lighter ? that page will take infinite time to load if you use things like that no ? Thats 3d and all also. let's just sick with 2d ?

On Thu, Jul 3, 2014 at 2:22 PM, Chinni Chaitanya notifications@github.com wrote:

for coding animation

Reply to this email directly or view it on GitHub https://github.com/ShaastraWebops/frontend/issues/41#issuecomment-47881919 .

[deepakpadamata]

something similar to this? http://thecodeplayer.com/experiment/matrix-rain-animation-html5-canvas-javascript/1

[AbdealiLoKo]

aah, yes

On Thu, Jul 3, 2014 at 2:26 PM, Deepak Padamata notifications@github.com wrote:

something similar to this?

http://thecodeplayer.com/experiment/matrix-rain-animation-html5-canvas-javascript/1

Reply to this email directly or view it on GitHub https://github.com/ShaastraWebops/frontend/issues/41#issuecomment-47882374 .

[AbdealiLoKo]

But it should fall from the image. And let's use engligh letters + numbers :P

On Thu, Jul 3, 2014 at 2:29 PM, Abdeali Kothari abdealikothari@gmail.com wrote:

aah, yes

On Thu, Jul 3, 2014 at 2:26 PM, Deepak Padamata notifications@github.com wrote:

something similar to this?

http://thecodeplayer.com/experiment/matrix-rain-animation-html5-canvas-javascript/1

Reply to this email directly or view it on GitHub https://github.com/ShaastraWebops/frontend/issues/41#issuecomment-47882374 .

[AbdealiLoKo]

For nomenclatures sake

Subcategories examples : Aerofest, Coding, involve & Quiz, Workshops, etc 2015 page - topbar in this 2014 page - this

Events examples : Reverse Coding, Triathlon, Robowars, Airshow, etc 2015 page - The paragraphs in this 2014 page - this

\ Event Tabs** examples : Introduction, prize money, problem statement, etc. 2015 page - not implemented in minimal version 2014 page - this

Now, events has 3 pages. Subcategories page - shows all subcategories in a page in rectangles with pics and a title. On click of any subcategory an animation will happen Events Page / Event List page - This page will have rectangles again, with the animation of on hover, a card will come up/down like this Event details page / Event tab page - This page will have multible naviagbel tabs and event coords will make this. The design will be like what kunal made here

Phew. So, kunal is making event details page. Deepak already made the animation for event page. let's make the animations for Subcategories page. Note : need to finish animations in amax 10 days ... integrating to site will take time.

[chinnichaitanya]

http://github.hubspot.com/odometer/

[chinnichaitanya]

http://css-tricks.com/myth-busting-css-animations-vs-javascript/

check "runtime controls and events"

[chinnichaitanya]

http://tympanus.net/Tutorials/TypographyEffects/index2.html

can we use it somewhere?

[deepakpadamata]

^Though that doesnt seem to "fit in" to our site, it can be used for shows, what say?

[chinnichaitanya]

yaa we can use it somewhere...its kinda gud

[chinnichaitanya]

http://www.javascriptkit.com/dhtmltutors/css3-transitions-and-jquery2.shtml

@AbdealiJK : this is what u meant ri8?

also, http://www.w3schools.com/cssref/tryit.asp?filename=trycss_anim_letter-spacing

[AbdealiLoKo]

Answering one by one : odometer : where do you plan to use it ? Can you mention that along with the links ? tympanus link : yes its good, I have an idea for shows which rishii is doing right now, i feel that's better. Will see ... jquery link : what did i mean abt what ? o.o

On Thu, Jul 3, 2014 at 3:45 PM, Chinni Chaitanya notifications@github.com wrote:

http://www.javascriptkit.com/dhtmltutors/css3-transitions-and-jquery2.shtml

@AbdealiJK https://github.com/AbdealiJK : this is what u meant ri8?

Reply to this email directly or view it on GitHub https://github.com/ShaastraWebops/frontend/issues/41#issuecomment-47889346 .

[chinnichaitanya]

jquery link for the coding animation...letters and numbers falling at various speeds

[AbdealiLoKo]

Ahh, i began reading the text :P Yes, its similar, but we dont need the rotation of the letters, we want them randomly, and we want more letters. The code given will be super helpful !

On Thu, Jul 3, 2014 at 5:18 PM, Chinni Chaitanya notifications@github.com wrote:

jquery link for the coding animation...letters and numbers falling at various speeds

Reply to this email directly or view it on GitHub https://github.com/ShaastraWebops/frontend/issues/41#issuecomment-47896598 .

[chinnichaitanya]

http://codepen.io/cihadturhan/pen/KIJdD https://developer.mozilla.org/en-US/demos/detail/paper-aeroplane/launch ...for paper plane

[chinnichaitanya]

http://www.shaastra.org/2015/frontend/personal/chaitanya/subevents/subevents.html

till now basic model of aerofest and coding events are done...need final design elements... and also i'm not able to pull server

[AbdealiLoKo]

Ive attached a screenshot. It doesnt look anything like i thought it'd look.

And regarding coding - can you make letters fall from the top of the screen like the matrix fashion ? Like many many letters After they fall for lets say 200ms, well make the next page slide out from the top

On Sat, Jul 5, 2014 at 12:25 AM, Chinni Chaitanya notifications@github.com wrote:

http://www.shaastra.org/2015/frontend/personal/chaitanya/subevents/subevents.html

till now basic model of aerofest and coding events are done...need final design elements... and also i'm not able to pull server

Reply to this email directly or view it on GitHub https://github.com/ShaastraWebops/frontend/issues/41#issuecomment-48065634 .

[AbdealiLoKo]

Been 4 days ... updates ?

[AbdealiLoKo]

Updates ...been 4 more days ...

[AbdealiLoKo]

Deepak, Chaitanya - Tell me what you guys are doing. This thing was made a month ago and now im just tired. Ill finish it up if you guys are so damn busy with assignments.

Abhishek, Ive edited the code a little please check master branch. Also, try not to make files for the js code - This is a plan I have by which every js/css file using link/script tags will be hard-cached. And so, it'd be easier to put only libraries as files - as they would never change. Plus, I am planning on using Google servers for faster loading. This can be done if the things on google server will never change - but they will change if we have user content in them.

i.e. Basically, lets try to keep all css and js files as libraries. Everything else, put in php files. According to my current thought process, this will make the site fast.

[chinnichaitanya]

right now i'm working on the "workshops" animation.

[AbdealiLoKo]

What are you doing on the workshop animation ? what will the animation do ?

On Mon, Jul 28, 2014 at 9:10 AM, Chinni Chaitanya notifications@github.com wrote:

right now i'm working on the "workshops" animation.

Reply to this email directly or view it on GitHub https://github.com/ShaastraWebops/frontend/issues/41#issuecomment-50297644 .

[chinnichaitanya]

tighten the nut /scerw(mostly) with a spanner

[deepakpadamata]

I'm working on the animations of the Main events page, condensing the code with GSAP. And I think the coding animation can be done using gsap. I've seen it on this http://www.greensock.com/gsap-js/

[AbdealiLoKo]

Hey, gsap can be used - but using jquery-gsap plugin, we can overwrite jquery's animate with gsap. So, code with animate only. Forget about gsap for now. use jquery.

Make animations simple. I expect you guys to do like 30 mins work on each animation :/ Dont think of high funda stuff ...

@Deepak : what is the main events animation ?

@Chinni - Make it simple ... two png images rotating .. .thats like 10 lines of code ... how long are you planning on taking for that -_- It's like ... .rotate { -webkit-transform: rotate(360deg); -webkit-transition-duration: 1s; -webkit-transition-delay: now; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; /* And others */ } setInterval(function() { $(".spanner").toggleClass("rotate"); }, 100); ... thats all ....

On Mon, Jul 28, 2014 at 9:15 AM, Deepak Padamata notifications@github.com wrote:

I'm working on the animations of the Main events page, condensing the code with GSAP. And I think the coding animation can be done using gsap. I've seen it on this http://www.greensock.com/gsap-js/

Reply to this email directly or view it on GitHub https://github.com/ShaastraWebops/frontend/issues/41#issuecomment-50297843 .

[deepakpadamata]

But jquery code is much bigger, jquery filesize is bigger and jquery-gsap does not give timing capabilities. Can I continue with gsap? Events animations - The tile and inner elements' animations.

[AbdealiLoKo]

I still don't know what events animation is :|

Jquery filesize may be bigger, but its needed everywhere, so itll be used even if you dont use it in animations :| Jquery's animate function does give timing, animate({values}, time, callback)

Youll be spending a week in learning gsap - which may be interesting, but is not required. And really time consuming.

Can you elaborate on what exact animation youre doing ?

On Mon, Jul 28, 2014 at 9:27 AM, Deepak Padamata notifications@github.com wrote:

But jquery code is much bigger, jquery filesize is bigger and jquery-gsap does not give timing capabilities. Can I continue with gsap? Events animations - The tile and inner elements' animations.

Reply to this email directly or view it on GitHub https://github.com/ShaastraWebops/frontend/issues/41#issuecomment-50298288 .

[deepakpadamata]

^ sorry, i mean "subcategories page" I'm working on animations to show the events in each subcategory. http://www.shaastra.org/2015/frontend/personal/Deepak/Events/index.html I'm working on the animations which should happen after you click on the tiles.

[AbdealiLoKo]

still have no clue what youre talking about ... will ping you on gchat

On Mon, Jul 28, 2014 at 9:57 AM, Deepak Padamata notifications@github.com wrote:

^ sorry, i mean "subcategories page" I'm working on animations to show the events in each subcategory. http://www.shaastra.org/2015/frontend/personal/Deepak/Events/index.html I'm working on the animations which should happen after you click on the tiles.

Reply to this email directly or view it on GitHub https://github.com/ShaastraWebops/frontend/issues/41#issuecomment-50299284 .

[AbdealiLoKo]

Giving a checklis. Nice work so far.

• [x] - Aerofest - plane goes from lef tot right
• [x] - B-Events - Graph going like a zig-zag like in stock arkets
• [x] - Coding - Matrix
• [x] - Dept Flagship - Shark (Robooceana) goes from left to right
• [ ] - Design and build -
• [x] - Elec Fest - Bulb + wires making the bulb glow
• [x] - Involve and Quizzes - Answering quizzer
• [x] - Sampark - India map and various places where sampark is being done can be highlighted in green or red or some color (sequentially ... like, one place at a time gets highlighted)
• [x] - Shows - Make 2 curtains close and open - like theatre curtains
• [x] - Spotlight - Car jumping and reaching other side - daredevil type
• [x] - Workshops - Spanner and Knut turning

One thing to do in everything - make the page generally dark. So, maybe add a div with z-index 9000 and make the background rgba(0, 0, 0, 0.6) or something ?

[abhiShandy]

Give ideas for the

1. Design and Build
2. Involve and Quizzes

I think spanner and nut animation is more appropriate for Design and Build