8/12/2019 MP Front End Requirements

1/7

iLokSabha.in (Home) (Page# 1)Following is a screen shot (four parts) of tentative design for the home page of iLokSabha.in. Youcan also see the website in order to get a feel of the design.

HEADER

Following the standard header logo, the te t and the menu. Stud! the "#$L % st!lesheet code tomaintain consistenc! of header across all pages of the website.

SLIDER & TEXT

Slider and the associated te t with the image. &suall! this will contain what's happening in LokSabha ( th *arliament of +ndia) source of information is defined from the administrative pagecontent that handles this top part of the home page and is d!namic in nature. dmin user has theabilit! to change it when desired.

Following is the second screen shot of home page.

8/12/2019 MP Front End Requirements

2/7

#op part is followed b! - rows with columns of d!namic loading of $* lists from $* masterlists. +t displa! the photograph in a specific si/e format with the name in capital and bold. Secondline with the constituenc! name and followed b! state name to be separated b! comma. *art!name in bracket. Si/e and St!le adherence is re0uired as per the sample to maintain aesthetic appealof the user interface.

Following is the third screen shot of the home page.

s !ou can notice from the above image, a third row is present. So total of - rows with images ineach row is re0uired for displa!. d!namic loading of the grid is re0uired.

Following the fourth screen shot of the home page.

8/12/2019 MP Front End Requirements

3/7

- sections namel!, top two panels, left and right and a bottom panel, followed b! the footer (footeris not included in the above image).

TOP LEFT PANEL

Slider displa!s work completed photograph b! featured $*'s (as defined in the admin interface).#itle of the work, posted date, comments count and the tags associated. 1ottom te t of the

photograph displa!s first 22 characters and a 3ead more (h!perlink) link that points to the articlein detail.

TOP RIGHT PANEL

Statements b! the $*'s displa!ed in the bottom photographs. #hese are all first4timers to the th Lok Sabha and are highlighted based on the admin interface selection. 5!namicall! displa!eddepending on the selected $*'s for displa! here. +t keeps changing ever! few weeks or monthsdepending on admin re0uirement.

BOTTOM (Priot to footer)

Four columns with first ver! much static information with a link to the about us page.

Second column (using #witter integration) to displa! the tweets (selected b! admin interface)

#hird column (news feeds) to displa! the latest news articles (selected b! admin interface)

Fourth column (photo galleries) to displa! links to view photo galleries (submitted b! users, $*'s,ministries and ever! one that use and want to highlight works relating to Lok Sabha) defined b!the admin through admin interface.

MP Dashboard (External) (Page# 2)#his dashboard is part of the $* dashboard front4end pro6ect and is available to all visitors to thewebsite. Following is the screen shot (in two parts) of tentative design and each displa! elementsare defined at high level below the screen shot.

8/12/2019 MP Front End Requirements

4/7

For MP Dashboard (External) - Available to non-registered users(see sample: shatrughan sinha & bhartruhari mahtab)

HEADER 4 follow the standard header

LEFT PANEL4 5ashboard options (available onl! to registered users)

#his contains the links to the information in internal dashboard 4 available onl! to registereduserswho re0uested the $* +5 assignment.

8/12/2019 MP Front End Requirements

5/7

4 news feeds4 title4 short title4 date4 associate $* +5

4 short image 72 72 (asset readiness)

4 testimonials b! constituents8registered users who re0uested the $* +5 be assigned4 two latest testimonials to be displa!ed in the format as shown in sample

CENTRE PANEL4 #itle of the $* 9 (:;lected constituenc!

8/12/2019 MP Front End Requirements

6/7

4 follow the standard footer

Sear h !our MP (Page" #)

#wo rows and si columns are displa!ed d!namicall! based on the selection in the top dropdowns. 5efault is loaded from the featured database table.

List can be filtered for a *arliament (meaning th Lok Sabha, B th Lok Sabha or th value ma! be between the da! we got freedom to now).

#!pe of member means a member in ra6!a sabha or lok sabha, nominated or elected.

Statewise or wise selection is available.

@onstituenc! selection is available.

ll four dropdowns work in relation with one another.

$pdates (Page" %)#his page lists the updates to the website. s we gather the $* information, we keep releasing thestatic pages first. longside, we are developing a completel! d!namic website, which is being

planned to be released in the end of ugust >2 or mid4September >2 .

#eam members= #he page displa!s all team members profile in detail e cept the private informationlike address etc. #eam includes students undergoing political science stream in various collegesacross hmedabad and technolog! students from C#&.

Sponsors, supporters % active participants= De are working on bringing other organi/ation tosupport us, if that works out, it will displa! it the specified area (see image below).

Following is a screen shot of &pdates tentative design page.

8/12/2019 MP Front End Requirements

7/7

Summar!Everall, the website onl! consists of around to 2 web pages but all are d!namic and to be built asspecified in the pro6ect re0uest document (*5F) earlier. &sing open source software is ke! to thedevelopment as ultimatel! this ma! go as recommendation +@ for either update or as4is adaptionof the website.