Report On

[Link]
For
Online Story Sharing Website

Submitted To: Submitted By:

Mr. Manish Jain Name: RISHABH KAPOOR
Roll No: 0705188
Sem : VI
1
2
 Acknowledgement
We are extremely grateful and remains indebted to our
guide Mr. MANISH JAIN, for being a source of
inspiration and for his constant support in the design
implementation, and evaluation of the project.
We express a deep sense of gratitude [Link]
Swaroop Institute of Computer Studies who gave us the
inspiration and the precious time for preparing this
report.
We are thankful to them for their constant constructive
criticism and invaluable suggestion, which benefited us
a lot while developing the project on
“WhatsYourStory”.
Mr. Manish Jain has been constant source of inspiration
and motivation for hard work. He has been very
cooperative throughout this project work.
Through this column, it would be our utmost pleasure
to express our warm thanks to him for his
encouragement, cooperation and consent without
which we might not be able to accomplish this project.

3
4
 Table of contents
o About the organization 6-8
 Project title
o Key Objectives 9-10
o Software System Attributes 11-19
 Reliability
 Availability
 Security
 Maintainability
o E-R Diagram 20-21
o System Design 22-24
 DFD
 Context Level
 Zero Level
o Table Design 25-27
 Users Table
 Stories
 Comment Table
o System Resource Requirement 28-30
 Platform Used
 Software Resource Requirements
 Hardware Resource Requirements
o Project Snapshot 31-118
 Code
o Scope Of Future Application 119-121
o Bibliography 122-123

5
6
 About the organization

Project Title: Online Fiction Publishing website

“WhatsYourStory” is an online story sharing and publishing

company initially made for the Indian creators and reader to
communicate with each other through their stories/fictions.
Our website is a medium for the populace to explore
entirely new worlds filled with interesting characters born
from the wonderful mind of our creators or other readers
who use this same website.
We are striving to create a new platform for the aspiring
authors by providing them with a consistent reader-base
and tools to support them as well as by our team of editors
and proof-readers who will be responsible for editing.
As with the help of different writers/authors we will be able
to provide our readers with the experience of different
stories and fictions updated on a daily basis, so
that our content never ends, which helps in the immersion.
7
This website also provides readers young or old with a
secure and positive environment with multiple moderators
overseeing the community and maintaining the integrity of
our forum, while not subduing the freedom of speech and
criticism of our vocal readers.
The creators have the freedom to write any kind of stories
with respective tags, they can either be mature or child
friendly, though these story will be behind a filter so that
our young audience may not be expose to unhealthy
content.
We also will provide Patron support for our amateur writers
and for those writers that pass our test will be able to
publish physical copies of their books through our
publishing partners.
This site will run through the revenue produce through ads
and our sponsors. And we as the owners will try to maintain
it and keep its UI update-to-date to provide our user a
smooth and rewarding experience by providing with easy to
use and understand interface. As well as giving our users the
ability to maintain their own account on our website. So
please join it, it’s so much fun.

8
9
 Key Objectives
The key objective that are to be Implemented
 An easy to use interface for the users, either be writers or readers
 Using the Google/Facebook as alternatives platform to login to
our website, easing up the complicated Sign in process.
 A separate column for the amateur and professional writers giving
the readers a choice.
 Integrating the comment section with Discuss forum and creating
a separate forum for discussing our published stories
 Implementation of our website through all platforms they either
be mobile or PC platform.
 An online integrated tool for our writers to self-make their own
poster for their book with various templates, or ask our hired
employees to do the work for them.
 Monthly competitions to strengthen the unity of our community.
 Giving the readers full rights to review and criticise the works of
our writers.
 Making our Publishing platform semi socializing platform with the
implementation of image upload.
 A content filter to make the young audience or those who get
easily offended with our writer’s work.
 Monetization through Ads and Patron to support our writers and
employees.
 A secure environment for our readers and writers.

10
11
 Websites System Attributes
There are number of attributes of software that can serve as requirements. In
case of “WhatsYourStory” these attributes are Reliability, Availability, Security and

12
Maintainability which are explained below.

Reliability:

13
Specify the factors required to establish the required reliability of the software
system at time of installation. Reliability is the ability to ensure the integrity and
consistency of the application and all of its transactions. The application must
produce consistent results that are guaranteed to be valid and appropriate. The
premier goal of “Whats Your Story” project is to achieve 99.9% reliability, where
the user of the website never experiences the failure by using multiple servers as
a backup for the primary server so that our website never goes down, while issues
such as bugs be dealt properly the moment they are found out.

We as the owners are will ensure that the hard work of our writers and the
reader-base pays off and we are happy to accept any suggestions by our userbase
or bug-report to ensure a smoother experience.

Many applications today are data-intensive, as opposed to compute-intensive.

Raw CPU power is rarely a limiting factor for these applications—bigger problems
are usually the amount of data, the complexity of data, and the speed at which it
is changing.

Reliability is theoretically defined as the probability of success   as

the frequency of failures; or in terms of availability, as a probability derived
from reliability, testability and maintainability.
Testability, maintainability and maintenance are often defined as a part of
"reliability engineering" in Reliability Programs. Reliability plays a key role
in the cost-effectiveness of systems.

14
15
Accessibility:
The concept of accessibility refers to the assurance that a service or a
resource is highly accessible. This capability is measured as time available
divided by time possible. The goal of “Whats Your Story” project is to
achieve complete accessibility and will be available 24/7 and will shift to
back up servers during the software upgrade or the Hardware one.

This is to ensure that users throughout the world have access to our website
all the time and from every platform they either be IOS or windows, without
any crashes.
We will also implement better internet traffic management by simultaneous
running of multiple servers for each country to regulate the user-base and
maintain zero delay and broken connection.

Essential components of web accessibility

The accessibility of websites relies on the cooperation of eight components:

1. the website itself - natural information (text, images and sound) and the markup
code that defines its structure and presentation
2. user agents, such as web browsers and media players
3. assistive technologies, such as screen readers and input devices used in place
of the conventional keyboard and mouse
4. users' knowledge and experience using the web
5. developers
6. authoring tools
7. evaluation tools
8. a defined web accessibility standard, or a policy for your organization (against
which to evaluate the accessibility)
These components interact with each other to create an environment that is accessible
to people with disabilities.
Web developers usually use authoring tools and evaluation tools to create
Web content.

People ("users") use Web browsers, media players, assistive technologies or other

"user agents" to get and interact with the content

16
17
Security:
Security ensure that information is neither modified nor disclosed except in
accordance to the security policy defined by our company “whats your story”.
The security includes correctly authenticating the user of the system, authorizing
the user to perform certain actions, maintain data integrity across the tiers, and
ensure transactional privacy of our users.

The Whats Your Story will handle user authentication and role based privileges to
define website access points for the user. Authentication will work by the user
providing his username and password that is stored in its database by the user
during sign up, or will use Google/Facebook account for authentication.

We will also moderate the community and will take strict action against non-
conformist individuals that are breaking the unity of our community through
posting or commenting about unhealthy topics. While maintain the integrity of
our forums.

18
Maintainability:
Maintainability can be defined as the ability to economically modify or add
functionality to the website architecture or to the application without impacting
the existing functionality. The key to achieving high maintainability is to make an
effective object oriented design.

Our Website is being developed by SQL Server 2005 and .Php at back end while
.Html and .CSS at front end, which is an object oriented programming language
and shall be easy to maintain.

As we design and create our website, we become very familiar with the structure
and templates we use use, the layout of the various pages and the manner in
which you tied them all together. Time goes by; while we add a little more here, a
little more there and sooner or later our site has grown into something huge.

 Correct defects or their cause.

 Repair or replace faulty or worn-out components without having to replace
still working parts.
 Prevent unexpected working condition.
 Maximize a product's useful life.
 Maximize efficiency, reliability, and safety.
 Meet new requirement.
 Make future maintenance easier.
 Cope with a changed environment.

19
20
21
ER-Diagram

22
23
 System Design
Data Flow Diagram:

Context Level DFD

24
0-Level

25
26
 Table Design
Admin Table.
NAME TYPE NULL DEFAULT EXTRA
Id Int(3) No None AUTO_INCREM
ENT
Usernam Varchar(2 Yes Null
e 0)
password Varchar(2 Yes Null
0)
email_id Varchar(3 Yes Null
0)
phone_n Int(15) Yes Null
o
first_nam Varchar(3 Yes Null
e 0)
last_nam Varchar(3 Yes Null
e 0)
Day Int(2) Yes Null
month Int(2) Yes Null
Year Int(4) Yes Null
City Varchar(2 Yes Null
0)
country Varchar(2 Yes Null
0)
Sex Varchar(1 Yes Null
5)

27
1. Story:

NAME TYPE NULL DEFAULT EXTRA

story_id int(3) No NONE Auto_increme
Title varchar(30 Yes NULL
)
Story Text Yes NULL
Id int(3) Yes NULL

2. Comments:

NAME TYPE NULL DEFAULT EXTRA

comment_i int(3) No NONE Auto_increment
d
Comment text Yes NULL
story_id int(3) Yes NULL
Id int(3) Yes NULL

28
System Resource
Requirements

29
Platform used for Development
Apache, My SQL 2005, Browser, Text Editor

Hardware Resource Requirements

Processor 1.70 GHz and Above

Main Memory 512 MB
Hard disk 20 GB
Disk Space 100MB
Keyboard ANY
Mouse ANY
Monitor ANY
Web Camera ANY
Internet Access Yes

Hardware platform Requirements

Operating system : Windows, Mac OS, Ubuntu

Software : Any Web browser
Database : SQL Server 2005

30
31
32
33
34
35
36
37
38
39
40
<?php

session_start();

if(empty($_SESSION['enter']))

header("location:WEB [Link]");

else

echo "Welcome ".$_SESSION['enter'];

?>

<html>

<head>

<title>Home page</title>

<style>

#background

width:100%;

height:100%;

background-color:skyblue;

41
background-image:url('[Link]
content/uploads/2012/09/plain-backgrounds/green-paint-texture-
[Link]');

background-size:100% 100%;

#titlebar

width:100%;

height:100px;

border:1px solid black;

background-color:transparent;

#q

width:100px;

height:73px;

background-color:white;

background-
image:url('[Link]
edia/public/[Link]');

background-size:100% 100%;

42
margin-left:15px;

float:left;

padding-bottom:15px;

border:1px solid white;

border-radius:2px;

box-shadow:6px 6px 15px lightgreen

#selectmenu

{width:100%; height:25px; border:1px solid black;}

#sidebar

{width:280px; height:450px; border:1px solid black; float:left;

color:white; font-size:20px; font-family:Lucida Sans Unicode;}

.sidebartext

{width:279px; height:35px; color:white;border:2px solid black;

background-color:transparent;font-size:20px; cursor:pointer; font-
family:Lucida Sans Unicode;}

#textarea

43
{width:450px; height:442px; border:3px solid white; margin-left:70px;
margin-top:30px;float:left;

border-radius:20px; box-shadow:-5px 5px 10px white;}

#picbar

{width:500px; height:450px; border:1px solid black; margin-left:850px;

margin-top:30px; }

#pic1

{width:230px; height:138px; margin-left:10px; background-

image:url('[Link]
q=tbn:ANd9GcT6sRw39bh1jgyL_r6vLDC7YzUZj65CpWOHLiNvcJVtx5qcL
FhTtw'); background-size:100% 100%; border:1px solid white; margin-
top:10px;}

#pic2

{width:230px; height:138px; margin-left:10px; background-

image:url('[Link]
q=tbn:ANd9GcSxL8-jBHfZjWYmow1iJuNUk83Kv5JhE4SuAkvwtbbno-
z4I2xW'); background-size:100% 100%; border:1px solid white; margin-
top:10px;}

#pic3

{width:230px; height:138; margin-left:10px; background-

image:url('[Link]
q=tbn:ANd9GcTTflgZdYNK-
44
SqGVyo8FOjyLiNiplxGKiJqJ05XdtJBreiHckBS'); background-size:100%
100%; border:1px solid white; margin-top:10px;}

.pictext

{width:250; height:138; float:right; border:1px solid white; margin-

top:10px; color:white; overflow:hidden;

font-family:Lucida Sans Unicode; font-size:18px;}

.menu

{width:150px;height:25px;float:left;border-radius:5px;background-
image:url('[Link]
cursor:pointer;}

.upload

{width:100px;height:25px;float:left;}

#wys

{color:white; margin-left:50px; font-size:70px; font-family:forte;

background-color:transparent;}

#heading

45
color:white;

font-family:Modern No. 20;

font-size:30px;

#logout

width:80px;

height:50px;

background-color:transparent;

border:2px solid white;

border-radius:10px;

color:white;

float:right;

margin-top:20px;

margin-right:20px;

font-size:20px;

font-family:Lucida Sans Unicode;

cursor:pointer;

46
#searchbar

{width:350px; height:30px;

color:black;

font-family:Lucida Sans Unicode;

float:right;

margin-right:10px; margin-top:30px;

font-size:16px;

padding-top:3px;

#search

{width:70px; height:25px; border-radius:5px; float:right; margin-

right:45px; margin-top:35px; cursor:pointer}

#textareainner

{width:450px; height:300px; font-size:20px;border-radius:15px;}

.uploadbar

{background-color:trannsparent; width:450px; height:52px;border-

radius:15px;}

47
.upload

{margin-left:2px; color:#999; font-size:5px; margin-top:10px;

cursor:pointer }

#post

border:1px solid white; border-radius:10px; margin-right:40%; margin-

top:-8px;

font-size:24px; color:white;font-family:Lucida Fax; background-

color:#307FCD; width:100%; height:40px; cursor:pointer;

#secondmain

width:100%;

height:100%;

background-image:url('[Link]
content/uploads/2012/09/plain-backgrounds/green-paint-texture-
[Link]');

background-size:100% 100%; border:1px solid black;

48
}

.boxs

{ margin-left:8px; width:49%; height:100%; border:1px solid

white;float:left; }

.storybox

{width:400px; height:350px; background-color:white; border:1px solid

black; margin-left:150px; margin-top:20px; }

.like

{width:400px; height:30px; background-color:white; border:1px solid

black; border-radius:5px; margin-left:150px; margin-top:20px; }

.likebutton

{width:80px; height:30px; background-

image:url('[Link]
[Link]'); background-size:40% 90%; background-repeat:no-repeat;}

.commentbutton

{width:100px; height:30px; background-

image:url('[Link]
[Link]'); background-size:30% 95%; background-repeat:no-repeat;}

49
.aaaa

width:100%;

height:100%;

.image

width:90%;

margin-left:5%;

height:200px;

border:1px solid black;

margin-top:15px;

#radio

{float:left; margin-top:6px; margin-left:10px; font-size:20px;}

#forfiles

50
{margin-top:10px; margin-left:10px; width:250px; height:20px;
background-color:#00ff80;}

</style>

</head>

<body>

<div id="background">

<div id="titlebar"><div id="q"></div><div

id="wys">&nbsp;&nbsp;&nbsp;What's Your Story?<a
href="[Link]"><button id="logout"
title="logout">Logout</button></a><button
id="search">search</button><input id="searchbar"
placeholder="search story"></input></div></div>

<div id="selectmenu">

<button class="menu" title="Home">HOME</button>

<button class="menu" title="Profile">PROFILE</button>

<button class="menu" title="Create">CREATE</button>

<button class="menu" title="Explore">EXPLORE</button>

<button class="menu"
title="Contact">CONTACT</button></div>

<div id="sidebar"><b>Read Related Stories..</b><br><br>

<CENTER><button class="sidebartext">Event</button>

<button class="sidebartext">Quotes</button>

51
 <button class="sidebartext">Group</button>

<button class="sidebartext">Pages</button>

<button class="sidebartext">On This Day</button>

<button class="sidebartext">Recommendations</button>

<button
class="sidebartext">Ad</button></CENTER><br><br>&nbsp;About
Us.<br>&nbsp;Terms & Conditions</div>

<div id="textarea"><center><div id="heading">Create Your Story!

</div></center><hr>

<form method="post" action="[Link]"

enctype="multipart/form-data">

<textarea id="textareainner" placeholder="share your

story here.." name="story"></textarea>

<div class="uploadbar">

<div id="radio"><input name = "filetype" type="radio"

value="Image" style="cursor:pointer; float:left; margin-top:12px; font-
size:10px;"><b>Image</b></font></input>&nbsp;&nbsp;&nbsp;<input
name="filetype" type="radio" style="cursor:pointer;"
value="Video"><b>Video</b>

<input type="file" name="uploadfile" id="forfiles">

</div></div>

<div class="uploadbar" style="background-

color:transparent; height:42px;">

52
 <input type="submit" value="Post Your Story" id="post"
title="Post here"></div></div>

</form>

<div id="picbar"><div class="pictext"><marquee

onmouseover="stop();" direction ="up"onmouseout="start();">Zazzle-
the site offers a huge variety of merchandise, from clothing, <br>to
home decor, to personal accessories.<br> What’s more, users can
upload their own image<br> and create their own
design.</marquee></div><div id="pic1"></div>

<div class="pictext"><marquee onmouseover="stop();"

onmouseout="start();" direction="up">Redbubble – a marketplace for
custom-designed items,<br > including prints, stationery, cases &
covers, or t-shirts. <br>Opposite to other sites, such as CafePress,
<br>the quality of artwork is very high.</marquee></div>

<div id="pic2"></div><div class="pictext"><marquee

onmouseover="stop();" direction="up"onmouseout="start();">Etsy-it’s
the top destination for anyone who wants <br>to express the love for
books. <br>The largest marketplace with hand-crafted goods<br> offers
thousands of literary quotes – on posters, jewelry, personal items,
electronic accessories, and clothes.</marquee></div>

<div id="pic3"></div>

</div>

</div>

53
</body>

</html>

<?php

mysql_connect("localhost","root","");

mysql_select_db("story_sharing");

$check = "SELECT * FROM uploads ORDER BY id DESC";

$result = mysql_query($check);

while($r=mysql_fetch_array($result))

echo '<div id="secondmain">

<div class="storybox">

<div class="image"><img class="aaaa" src="./posts/'.

$r['filename'].'"></div>

<div>'.$r['story'].'</div>

<div>'.$r['user'].'</div>

54
 </div>

</div>';

?>

<?php

session_start();

if(empty($_SESSION['enter']))

header("location:WEB [Link]");

else

echo "Welcome ".$_SESSION['enter'];

?>

<html>

55
<head>

<title>Home page</title>

<style>

#background

width:100%;

height:100%;

background-color:skyblue;

background-image:url('[Link]
content/uploads/2012/09/plain-backgrounds/green-paint-texture-
[Link]');

background-size:100% 100%;

#titlebar

width:100%;

height:100px;

border:1px solid black;

background-color:transparent;

56
#q

width:100px;

height:73px;

background-color:white;

background-
image:url('[Link]
edia/public/[Link]');

background-size:100% 100%;

margin-left:15px;

float:left;

padding-bottom:15px;

border:1px solid white;

border-radius:2px;

box-shadow:6px 6px 15px lightgreen

#selectmenu

{width:100%; height:25px; border:1px solid black;}

57
#sidebar

{width:280px; height:450px; border:1px solid black; float:left;

color:white; font-size:20px; font-family:Lucida Sans Unicode;}

.sidebartext

{width:279px; height:35px; color:white;border:2px solid black;

background-color:transparent;font-size:20px; cursor:pointer; font-
family:Lucida Sans Unicode;}

#textarea

{width:450px; height:442px; border:3px solid white; margin-left:70px;

margin-top:30px;float:left;

border-radius:20px; box-shadow:-5px 5px 10px white;}

#picbar

{width:500px; height:450px; border:1px solid black; margin-left:850px;

margin-top:30px; }

#pic1

{width:230px; height:138px; margin-left:10px; background-

image:url('[Link]
q=tbn:ANd9GcT6sRw39bh1jgyL_r6vLDC7YzUZj65CpWOHLiNvcJVtx5qcL

58
FhTtw'); background-size:100% 100%; border:1px solid white; margin-
top:10px;}

#pic2

{width:230px; height:138px; margin-left:10px; background-

image:url('[Link]
q=tbn:ANd9GcSxL8-jBHfZjWYmow1iJuNUk83Kv5JhE4SuAkvwtbbno-
z4I2xW'); background-size:100% 100%; border:1px solid white; margin-
top:10px;}

#pic3

{width:230px; height:138; margin-left:10px; background-

image:url('[Link]
q=tbn:ANd9GcTTflgZdYNK-
SqGVyo8FOjyLiNiplxGKiJqJ05XdtJBreiHckBS'); background-size:100%
100%; border:1px solid white; margin-top:10px;}

.pictext

{width:250; height:138; float:right; border:1px solid white; margin-

top:10px; color:white; overflow:hidden;

font-family:Lucida Sans Unicode; font-size:18px;}

.menu

{width:150px;height:25px;float:left;border-radius:5px;background-
image:url('[Link]
cursor:pointer;}

59
.upload

{width:100px;height:25px;float:left;}

#wys

{color:white; margin-left:50px; font-size:70px; font-family:forte;

background-color:transparent;}

#heading

color:white;

font-family:Modern No. 20;

font-size:30px;

#logout

width:80px;

height:50px;

background-color:transparent;

border:2px solid white;

border-radius:10px;

60
color:white;

float:right;

margin-top:20px;

margin-right:20px;

font-size:20px;

font-family:Lucida Sans Unicode;

cursor:pointer;

#searchbar

{width:350px; height:30px;

color:black;

font-family:Lucida Sans Unicode;

float:right;

margin-right:10px; margin-top:30px;

font-size:16px;

padding-top:3px;

#search

61
{width:70px; height:25px; border-radius:5px; float:right; margin-
right:45px; margin-top:35px; cursor:pointer}

#textareainner

{width:450px; height:300px; font-size:20px;border-radius:15px;}

.uploadbar

{background-color:trannsparent; width:450px; height:52px;border-

radius:15px;}

.upload

{margin-left:2px; color:#999; font-size:5px; margin-top:10px;

cursor:pointer }

#post

border:1px solid white; border-radius:10px; margin-right:40%; margin-

top:-8px;

font-size:24px; color:white;font-family:Lucida Fax; background-

color:#307FCD; width:100%; height:40px; cursor:pointer;

62
}

#secondmain

width:100%;

height:100%;

background-image:url('[Link]
content/uploads/2012/09/plain-backgrounds/green-paint-texture-
[Link]');

background-size:100% 100%; border:1px solid black;

.boxs

{ margin-left:8px; width:49%; height:100%; border:1px solid

white;float:left; }

.storybox

{width:400px; height:350px; background-color:white; border:1px solid

black; margin-left:150px; margin-top:20px; }

.like

63
{width:400px; height:30px; background-color:white; border:1px solid
black; border-radius:5px; margin-left:150px; margin-top:20px; }

.likebutton

{width:80px; height:30px; background-

image:url('[Link]
[Link]'); background-size:40% 90%; background-repeat:no-repeat;}

.commentbutton

{width:100px; height:30px; background-

image:url('[Link]
[Link]'); background-size:30% 95%; background-repeat:no-repeat;}

.aaaa

width:100%;

height:100%;

.image

64
 width:90%;

margin-left:5%;

height:200px;

border:1px solid black;

margin-top:15px;

#radio

{float:left; margin-top:6px; margin-left:10px; font-size:20px;}

#forfiles

{margin-top:10px; margin-left:10px; width:250px; height:20px;

background-color:#00ff80;}

</style>

</head>

<body>

<div id="background">

<div id="titlebar"><div id="q"></div><div

id="wys">&nbsp;&nbsp;&nbsp;What's Your Story?<a
href="[Link]"><button id="logout"
title="logout">Logout</button></a><button

65
id="search">search</button><input id="searchbar"
placeholder="search story"></input></div></div>

<div id="selectmenu">

<button class="menu" title="Home">HOME</button>

<button class="menu" title="Profile">PROFILE</button>

<button class="menu" title="Create">CREATE</button>

<button class="menu" title="Explore">EXPLORE</button>

<button class="menu"
title="Contact">CONTACT</button></div>

<div id="sidebar"><b>Read Related Stories..</b><br><br>

<CENTER><button class="sidebartext">Event</button>

<button class="sidebartext">Quotes</button>

<button class="sidebartext">Group</button>

<button class="sidebartext">Pages</button>

<button class="sidebartext">On This Day</button>

<button class="sidebartext">Recommendations</button>

<button
class="sidebartext">Ad</button></CENTER><br><br>&nbsp;About
Us.<br>&nbsp;Terms & Conditions</div>

<div id="textarea"><center><div id="heading">Create Your Story!

</div></center><hr>

66
 <form method="post" action="[Link]"
enctype="multipart/form-data">

<textarea id="textareainner" placeholder="share your

story here.." name="story"></textarea>

<div class="uploadbar">

<div id="radio"><input name = "filetype" type="radio"

value="Image" style="cursor:pointer; float:left; margin-top:12px; font-
size:10px;"><b>Image</b></font></input>&nbsp;&nbsp;&nbsp;<input
name="filetype" type="radio" style="cursor:pointer;"
value="Video"><b>Video</b>

<input type="file" name="uploadfile" id="forfiles">

</div></div>

<div class="uploadbar" style="background-

color:transparent; height:42px;">

<input type="submit" value="Post Your Story" id="post"

title="Post here"></div></div>

</form>

<div id="picbar"><div class="pictext"><marquee

onmouseover="stop();" direction ="up"onmouseout="start();">Zazzle-
the site offers a huge variety of merchandise, from clothing, <br>to
home decor, to personal accessories.<br> What’s more, users can
upload their own image<br> and create their own
design.</marquee></div><div id="pic1"></div>

67
 <div class="pictext"><marquee onmouseover="stop();"
onmouseout="start();" direction="up">Redbubble – a marketplace for
custom-designed items,<br > including prints, stationery, cases &
covers, or t-shirts. <br>Opposite to other sites, such as CafePress,
<br>the quality of artwork is very high.</marquee></div>

<div id="pic2"></div><div class="pictext"><marquee

onmouseover="stop();" direction="up"onmouseout="start();">Etsy-it’s
the top destination for anyone who wants <br>to express the love for
books. <br>The largest marketplace with hand-crafted goods<br> offers
thousands of literary quotes – on posters, jewelry, personal items,
electronic accessories, and clothes.</marquee></div>

<div id="pic3"></div>

</div>

</div>

</body>

</html>

<?php

mysql_connect("localhost","root","");

mysql_select_db("story_sharing");

68
$check = "SELECT * FROM uploads ORDER BY id DESC";

$result = mysql_query($check);

while($r=mysql_fetch_array($result))

echo '<div id="secondmain">

<div class="storybox">

<div class="image"><img class="aaaa" src="./posts/'.

$r['filename'].'"></div>

<div>'.$r['story'].'</div>

<div>'.$r['user'].'</div>

</div>

</div>';

?>

69
<?php

session_start();

if(empty($_SESSION['enter']))

?>

<html>

<head>

<title>login page</title>

<style>

#background

width:100%;

height:100%;

background-image:url('[Link]

background-size:100% 100%;

#login-box

70
{

width:500px;

height:500px;

background-color:transparent;

border:5px solid black;

#title

width:496px;

height:60px;

color:white;

font-size:30px;

font-family:Lucida Sans Unicode;

border:2px solid black;

background-color:black;

#a

width:150px;

height:52px;

71
border:1px solid darkblue;

border-radius:8px;

background-
image:url('[Link]
TES/s298/Topic%20-%20Facebook');

background-size:100% 110%;

margin-left:60px;

box-shadow:2px 2px 5px white;

#b

width:150px;

height:52px;

border:1px solid white;

border-radius:8px;

background-color:white;

background-
image:url('[Link]
gleg_standard_color_128dp.png');

background-size:30% 100%;

background-repeat:no-repeat;

72
float:right;

margin-right:70px;

font-size:25px;

padding-left:45px;

box-shadow:2px 2px 5px white;

.input

width:496px;

height:80px;

color:white'

background-color:transparent;

border:0px solid black;

border-bottom:1px solid white;

text-align:center;

font-size:20px;

.input:focus

border:1px solid white;

73
}

#login-button

width:150px;

height:60px;

background-color:black;

color:white;

font-size:20px;

font-family:Lucida Sans Unicode;

box-shadow:2px 2px 5px grey;

border:2px solid grey;

#wys

width:1350px;

height:90px;

border-bottom:0px solid white;

background-color:transparent;

color:white;

font-family:forte;

74
font-size:70px;

padding-top:10px;

#logo

width:100px;

height:73px;

background-color:black;

background-
image:url('[Link]
edia/public/[Link]?itok=rvhRGBzx');

background-size:100% 100%;

margin-left:20px;

float:left;

padding-bottom:15px;

border:1px solid black;

border-radius:2px;

box-shadow:6px 6px 30px white;

#signup

75
{width:100px; height:45px; float:right; border:1px solid white; margin-
right:30px; margin-top:20px; cursor:pointer;

background-color:white; color:blue; font-weight:bold; font-size:22px;

border-radius:8px;}

#textforsignup

{float:right; margin-right:20px; color:white; font-size:25px; margin-

top:30px;

text-decoration:blink;}

</style>

</head>

<body>

<div id="background">

<div id="wys"><div id="logo"></div>&nbsp;&nbsp;Whats Your

Story?

<a href="[Link]"><button id="signup" title="Join

WYS">Join Us</button></a><div id="textforsignup">Not a Member?
</div></div>

<br><center><div id="login-box">

<div id="title"><b><u>Login Here.</u></b></div><br>

<button id="a"></button>&nbsp;&nbsp;&nbsp;<button
id="b">Continue</button>

76
 <form method="post" action="[Link]">

<br><br><input type="text" placeholder="Enter Username"

class="input" name ="user" required>

<br><br><input type="password" placeholder="Enter password"

class="input" name ="pass" required>

<br><br><input type="submit" id="login-button" value="Login">

</form>

<br><font style="color:white" size="5px"><b>Forgot password?

</b></font><font style="color:blue" size="5px">Click here.</div></div>

</body>

</html>

<?php

else

header("location:[Link]");

?>

77
<?php

78
$user = $_POST['user'];

$pass = $_POST['pass'];

mysql_connect("localhost","root","");

mysql_select_db("story_sharing");

$check = "SELECT * FROM signup WHERE EMAILID = '$user' AND

PASSWORD = '$pass'";

$res = mysql_query($check);

$count = mysql_num_rows($res);

if($count==1)

session_start();

$_SESSION['enter'] = $user;

header("location:[Link]");

else

79
 echo "Username Or Password Incorrect.";

<?php

80
session_start();

session_destroy();

header("location:WEB [Link]");

?>

<html>

81
<head>

<title>password setting</title>

<style>

#main

{width:100%; height:100%; border:1px solid black;

background-image:url('[Link]
content/uploads/2014/03/[Link]');

background-size:100% 100%; background-repeat:no-repeat;

animation-name:picturechange; animation-duration:10s; animation-

timing-function:ease-in-out;

animation-iteration-count:infinite;}

@keyframes picturechange

{0%{background-image:url('[Link]
hyvhlBuSdAs/UbD4UIo56FI/AAAAAAAAEE4/CK5-
vMC9oiE/s1600/Seamless+white+crease+paper+[Link]');}

50%{background-image:url('[Link]
wood-texture-background-design_1022-[Link]?size=338&ext=jpg');}

100%{background-
image:url('[Link]
exture_50611_1920x1080.jpg');}

82
#box

{width:600px; height:500px; border:2px solid black; margin-top:30px;

background-image:url('[Link]
background-size:100% 100%;}

#logo

width:100px;

height:73px;

background-color:black;

background-
image:url('[Link]
edia/public/[Link]?itok=rvhRGBzx');

background-size:100% 100%;

margin-left:20px; margin-top:2px;

float:left;

padding-bottom:15px;

border:1px solid black;

border-radius:2px;

box-shadow:6px 6px 30px white;

83
}

#wys

width:1350px;

height:60px;

border-bottom:0px solid white;

background-color:transparent;

color:white; margin-top:10px;

font-family:forte;

font-size:70px;

animation-name:textcolor; animation-duration:10s; animation-

iteration-count:infinite;

@keyframes textcolor

0%{color: black;}

50%{color:darkblue;}

100%{color:black;}

84
}

.buttonbar

{width:600px; height:35px; border-bottom:2px solid black; border-

bottom:1px solid white;

background-image:url('[Link]
wood-planks-background-picture-id523584249?
k=6&m=523584249&s=612x612&w=0&h=733mmrl5yJ3wMbiSFiTCRwD
q5Mth-sUeDcRVAn8Qakw=');}

#text

{width:430px; height:40px; color:white; margin-top:60px; font-

weight:bold; font-family:Lucida Handwriting; font-size:30px;}

.password

{width:300px; height:30px; margin-top:30px; margin-right:250px; text-

align:center;}

.password:hover

{background-color:#00bfff;}

85
#submit

{width:150px; height:40px; margin-top:50px; font-size:20px;

background-color:#0fff00;

border-radius:8px; box-shadow:5px 5px 10px grey; cursor:pointer; }

.buttons

{width:100px; height:35px; float:left; text-align:center; cursor:pointer;

background-color:transparent; color:white; font-weight:bold;
border:1px solid white;}

#logoutbutton

{width:100px; height:35px; float:right; cursor:pointer; background-

color:transparent; color:white; font-weight:bold; border-radius:5px;}

#profilepic

{width:50px; height:35px; border-right:1px solid black; float:left;

background-
image:url('[Link]
g'); background-size:100% 100%;}

#name

86
{width:150px; height:35px; color:white; font-size:20px; font-
weight:bold; padding-top:9px; text-align:left; margin-right:335px;}

</style>

</head>

<body>

<div id = "main">

<div id="wys"><div id="logo"></div>&nbsp;&nbsp;Whats Your Story?

</div>

<center><div id ="box">

<div class = "buttonbar"><div id ="profilepic"></div><div id

="name">Name:</div></div>

<div class = "buttonbar">

<button class="buttons">HOME</button>

<button class="buttons">PROFILE</button>

<button class="buttons">SETTINGS</button>

<button id ="logoutbutton" title="logout">LogOut</button>

</div>

<div id ="text">CHANGE YOUR SETTINGS</div>

<form method="post" action="[Link]">

87
<input type="password" name="oldpass" class = "password"
placeholder="Enter Old Password" style="margin-
top:50px;"></input><br>

<input type="password" name="newpass" class = "password"

placeholder="Enter New Password"></input><br>

<input type="password" name="confirmpass" class = "password"

placeholder="Re-enter New Password"></input><br>

<button id="submit" onclick="confirmchanges();">Submit</button>

</form>

<script>

function confirmchanges()

confirm("Save Changes?"); }

</script>

</div>

</div>

</body>

</html>

88
<?php

$oldpass = $_POST['oldpass'];

$newpass = $_POST['newpass'];

$confirmpass = $_POST['confirmpass'];

mysql_connect("localhost","root","");

mysql_select_db("story_sharing");

$check = "SELECT * FROM signup WHERE PASSWORD = '$oldpass'";

$res = mysql_query($check);

$count = mysql_num_rows($res);

if($count == 1)

if($newpass == $confirmpass)

$update = "UPDATE signup SET PASSWORD = '$newpass' WHERE

EMAILID = '$_SESSION['EMAILID']'";

else

89
<script>

alert(" INPUT NOT MATCHED");

</script>

90
<?php

$fname = $_POST['fname'];

$lname = $_POST['lname'];

$email = $_POST['email'];

$pass = $_POST['pass'];

$contactno = $_POST['contactno'];

$gender = $_POST['gender'];

mysql_connect("localhost","root","");

mysql_select_db("story_sharing");

$check = "SELECT * FROM signup WHERE EMAILID = '$email'";

$res = mysql_query($check);

$count = mysql_num_rows($res);

if($count == 0)

91
 $create = "INSERT INTO signup
VALUES('','$fname','$lname','$email','$pass','$contactno','$gender')";

mysql_query($create);

header("location:[Link]");

else

echo "<h2>"."Account Already Exist"."</h2>";

?>

92
<html>

<head>

<title>SignUp Page</title>

<style>

#main

width:100%;

height:100%;

background-image:url('[Link]
[Link]/originals/ef/1f/9c/ef1f9cf518805be97bd7f35712f7702
[Link]');

background-repeat:no-repeat;

background-size:100% 100%;

animation-name:picchange;

animation-duration:10s;

animation-iteration-count:infinite;

animation-delay:ease-in;}

@keyframes picchange

93
0%{background-image:url('[Link]
[Link]/originals/ef/1f/9c/ef1f9cf518805be97bd7f35712f7702
[Link]');}

50%{background-
image:url('[Link]
82c23d9ae-960/[Link]');}

100%{background-image:url('[Link]
content/uploads/2016/08/[Link]');}

#box

width:500px;

height:500px;

background-
image:url('[Link]
/[Link]')

background-repeat:no-repeat;

background-size:100% 100%;

margin-left:600px;

background-color:transparent;

94
#titlebar

width:400px;

height:40px;

margin-top:20px;

padding-top:10px;

font-size:35px;

color:white;

#namepic

width:30px; height:30px; margin-top:50px; margin-left:66px; float:left;

background-
image:url("[Link]

background-repeat:no-repeat; background-size:100% 100%;

#namepic:hover

{background-color:transparent;}

#namepic:focus

{border:0px; border-bottom:1px solid grey;}

95
.inputbar

{width:180px; height:32px; float:left; margin-left:5px; margin-top:50px;

text-align:center; font-size:18px;}

.emailpic

width:30px; height:30px; margin-top:12px; margin-left:68px; float:left;}

#radio

{float:left; margin-top:16px; margin-right:100px; margin-left:140px;

font-size:20px;}

#regbtn

{width:150px; height:45px; float:left; background-color:#2E86C1; box-

shadow:2px 2px 5px grey; margin-top:35px; cursor:pointer; margin-
right:100px;margin-left:170px; font-size:22px; border-radius:5px;}

#regbtn:hover

{background-color:#1F618D; color:white;}

96
#wys

width:1350px;

height:90px;

border-bottom:0px solid white;

background-color:transparent;

color:white;

font-family:forte;

font-size:70px;

#logo

width:100px;

height:73px;

background-color:black;

background-
image:url('[Link]
edia/public/[Link]?itok=rvhRGBzx');

background-size:100% 100%;

margin-left:20px;

97
float:left;

padding-bottom:15px;

border:1px solid black;

border-radius:2px;

box-shadow:6px 6px 30px white;

#login

{width:100px; height:45px; float:right; border:1px solid white; margin-

right:30px; margin-top:20px; cursor:pointer;

background-color:transparent; color:white; font-weight:bold; font-

size:20px;}

#textforlogin

{float:right; margin-right:30px; color:white; font-size:25px; margin-

top:30px;

text-decoration:blink;}

</style>

</head>

<body>

<div id="main">

98
<div id="wys"><div id="logo"></div>&nbsp;&nbsp;What's Your Story?
<a href ="login [Link]"><button id="login"
title="login">Login</button></a><div id="textforlogin">Already have
an Account?</div></div>

<center>

<div id="box" >

<div id="titlebar"><u> Register Here For Free!</u></div>

<form method="post" action="[Link]">

<div id="namepic"></div><input name="fname" type="text"

class="inputbar" placeholder="First Name"></input><input type="text"
name="lname"class="inputbar" placeholder="Last Name"></input>

<div class="emailpic" style="background-

image:url('[Link]
[Link]'); background-
repeat:no-repeat; background-size:100% 100%;"></div><input
type="text" name="email" class="inputbar" placeholder="Enter Your
Email" style="margin-top:13px; width:330px;"></input>

<div class="emailpic" style="background-

image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAO
EAAADhCAMAAAAJbSJIAAAAeFBMVEUAAAD///8eHh5hYWE+Pj7m5ubA
wMDJycmDg4OWlpaOjo7r6+tra2vExMStra3T09Pf39+2trZHR0fy8vJvb2/
5+fleXl6np6dPT08/Pz/Y2NgnJyegoKDq6uoQEBB1dXUzMzMXFxd9fX2Hh

99
4cwMDBKSkqTk5MbGxszJBxiAAAKI0lEQVR4nO2deVcqPQyHwYUd2QS8
gIDeq37/b/jCgIqdJM3WDvD6O8f/PLTPzHRJmqS1+rWrVnUHkut/RXi/6m
2XN5ev5ba3ugcIB+PaNWk8CAk3VXfJXZsfhNO7qvuTQHfTE8JrBNwhfhO
2qu5LIrU+CRdV9ySZFkfCWdUdSabbA+Gk6n4k1KQgHFXdjYQaFYTXOs/s1
SoIe1V3I6F6BeFt1d1IqNtfwovXL+HlKxPh8umxPR81h8P77l73w+Gg8bB6
nW1TN5yBcN1r90/M7ZK6zdVmma75xITjTr/LcqRMBqtkO+NkhB+t/pRF9
6VBe+vfjVSE/9pDGd1R3fmTc0+SEL50dHgHTebO3gZ3wlnTgHfQ4tWvO+
6EnYmZr9CD3/TqSfjy4INXqP/HpU+ehMuRI99eA59Zx4tw7c1XMHq8Ryf
CVQK+vRo350G4cZpfIK3OgHC7SMe308T4+O2EqT7Qb/XXVRKOn5MD1
m3HYkbC9C/woGZFhB+WDahMU/XiaCHsZePbSzupGgjnWQF3639uwkG
8T86abHMSLhMu8rg0b0JJ+FQF305/cxE+VgRYr8/zEL5q+tZsBNJt9sRHnR
rCd0XHoFNmncElXfwVhB1Nv6B911JFWO+nJlQBwuE6OkLhWxQT6gBdC
WVvUUqommS8CUXTjZDwVtsnX0LJJlVGeKfuEkjY+pZ0XuU7jUWEa+FZS4
zwVFJE9lmViJA6B7QSzqS/yPXCSQgbesA4oXgAdP0J/xoAExBy1ww+4dgC
mIKw3nEmtBmEKQjrLKc/m9AyCFMRsoYil3ATby8/IWtvwyU0AiYi5KyKTE
Lz0XWUcKv6WUZwM4/Q7hmNEmrM6p0enAj1uzUW4azfUPsmo/Mpi9
DhfJ4k1Jpkew09CHVDJBNhNEadQ+jh3SYJTfvBqZ1QvOvPSxizhhmELkdoJ
KFyHv3Ui5HQx79NEhpnMnpnEyf0OcYGCf92CplDcUhjOEpo3ZAeBRLal9
mDyGU/SmjwXJzK2dcWyELoMpHWEcLVvL3Tu/0hUtNpjNDrpJecaXjB4IS
oNTFCqHeQBiIJ7REBxMYmQugWMUoSKs9CTnSvJnRgO4gkbNt/Hy+WQ
BOatsQ/lJoQX/VpQr+ow9SE+IJBEt44tHxUckI0uI8k9Gj5qOSE6MEwSegY
mJfStjhIQ6iMJACVeD2s4yeKFKF9mfpW2j3NXthBDUXoGZsHEr63O63N5t
VnMGA7N4rQpeGjQEInu+UoxP9NEKqjEiCBhL4hxkjIG0HomcWUgxDxnB
KEru1nIETWC4LQtfUchPBsghN6WfcH5SCELX2c0HHLVs8ylyKh7jihPdv1V
DkI4cNEnNBlo/GlHISw3xQn9G08CyG2rMOEtvCZkrIQvosIW76NZyFsiAid
s9KyEIKTKUrY9208CyFoXqCEzqmvWQjBfRtK6JzXlIcQqsSAEjq3nYcQMhE
xwhfntvMQQpX1MEK3I5mj8hBC3iiM0Dv9Lg8htORjhL62Uy5CyJGBEXpn
MechhA70MULvHMrzI3TelmYihM7YrosQ2npfF+HvOzxVlpnG11FSl800W

100
VYL96oFEsIsK747oWTFz7JrcyeEfMIYobMjKhMhFBqFETqGYRQCI3q8oi+/
JLGenC3gPuisffP1q8ssYNfnO0LrPN6lPztACf3OhZpkkPKTZ7EwqAGU0O3
hPlJ8e/kdcsm8iU5VoIZ0qkChsdecCt60ghLasjw+BfrZy3JyzoIhNSihy5LPLu
7gMybaIkKP5YKXbO2HCA55nNA+OEQ1nTzsjH8yQnPMl6wW0I19AYbjvn
BC62TKrerwKbs1A19ahRNaLURx4XFzDBacHIQTftiaUxRytI58eG9BxESZxj
6eRr5FN3FWzwm8uSAITUlzYGD5TfuwtE/68OO2eaae4edGEFry8qAclvV
paY0pVAHR9hKRlAuCcG1oDTjmCrNTnoHVyzQwkGu5qBhhgwFV/jFgpiw
XzjWZGTAgSagPOCl/MOBS8Bb+l8V3gpWopQj/qFsreRPgBKppqVC34bPB
NsFkRol6WIQ/hA3pUqKLYSOFlTUnCbXtlSKu0QJF4VDUR8+j94yShNrPNB
yG+PYofIn6jRRaf5fOzlMOi7A1Iq8pbFFtYaDeEppQmXIV/hxhiIV7H+1Ug9
c0TZIlG67lxL+G9oDW1sez0SOEughFwXMKn72SkKgXFSHU+aOCH3kh/jV
cp5XbfdAHxSLUjQsDobLwHXHHR4xQZWCEP0L8a+hQ1X2lVP2WaOUPje
Ed/gaxNwo/Lx3h1kKoSSQNGyQ+vXBToxoVZPnreAUexRocWvC4U6vkAN
QA0jXb4oSKVb80s6Gfeug0ftEA0hXMGZWw5COx1CQafwR0R66tlVAeHl
V2PiPDq7Rd1hjdkfMtTkU6uQusZAHDqf3lz0sz0UROKDmEcn97+bG+Af9
VNuk0NQ5irmdWZUj5IlX2+v4pzcnABKH4SKMVTFmEcgcRtMkIdvGQyap
YmRAfopBQsWJAv/L0zTgBvy2FMzF+CRSzyq54skFORx/n/UGz8Q5fMaZx
QcdrzzMJ5SVMFTf6KYzRWPFSPqH8AxLeBlNTrfaci8rYFcvFK1V0CgilmGYY
wTp8QrGfL1YbNpTiG2U9RH5dfbEtjPpoQSmsNN5tM4LbH8QuFMl9N4o
4BaLOnpJQPhT5ATWKkOQp85ISCaH8mhkuoub4gHttp+ieGfmT5kXuaax
C9JzCRKg4aOdEX2qMwng9fR2hZsaLPex/mggMwdVrQkJN4NKQHDGqon
CShUhKqHJKD0oH9p/qqY6ZmeuEklDnd1+AIUItXYiQCFBBqHRLT0c/G/nY
aCtvdGVmi4JQf23QcNTZPI1nrc6qqY8Nkr1BHaEt4s2o6I0dLoTZL6z+lvzqa
h2hU66CXMzsBgdC37KRbBFHve6EtW0FF3NHE4xcCfNfrj4RR45bCb2LZU
UkvcvZg7A2c08CxSXIv3EkzPeldllXHaYgdK+9AItvDfoT1m7Sv8Yu12GRhrB
W2yQejYrcFGdC55rKgQZolnROwtpdqk/12dozL8LdwuFcE7jQhHG0lI2wV
ut5V5uZqJfAH/Ij3P2WZzXJLtshGuuVI2Gt9uZVE3QhPptD5Uu4Wx5XDjbH
SL+DKcubcKeZ7frnAXYVh1IJCHdS+9EWHe6192ylIdypN5K60yZ957d3UD

101
LCnbatBndQTgdt/NYtm1IS7rXurfp0fZbu4GEDlgpwUmrCg7a9zrw5uP+xR
X9eNB/eX+8UcTcy5SH81nq9Xu7+srWXnzC/fgkvX7+El69fwsvXgdDPGjs/
9QpCD3/IuapVEEqiCC9No4IwmrRwwZoUhFc81ewPq/eE4giHi9HwSMgP
ZrwwFSEVh7xN3RHyuesQmnvMTL1GxONNK5+5t+i9zxerz/SCr+ziQSpnU
DUafx2IneRP36962+XN5Wu57a1ODoqcC1ufoX4JL1//ASE9or6yY2qlAAA
AAElFTkSuQmCC'); background-repeat:no-repeat; background-
size:100% 100%;"></div><input type="password" name="pass"
class="inputbar" placeholder="Password" style="margin-top:13px;
width:300px;"></input>

<div class="emailpic" style="background-

image:url('[Link]
[Link]'); background-repeat:no-repeat; background-
size:100% 100%;"></div><input type="number" name = "contactno"
class="inputbar" placeholder="Contact No." style="margin-top:13px;
width:250px;"></input>

<div id="radio"><input name = "gender" type="radio" value="Male"

style="cursor:pointer;"><b>Male</b></input>&nbsp;&nbsp;&nbsp;<in
put name="gender" type="radio" style="cursor:pointer;"
value="Female"><b>Female</b></input></div>

<input type ="submit" id="regbtn" value="Register">

</form>

102
</div>

</center>

</div>

</body>

</html>

103
<?php

session_start();

$user = $_SESSION['enter'];

$uploadfile = $_FILES['uploadfile'];

$story = $_POST['story'];

$file_type = $_POST['filetype'];

$file_name = $file['name'];

mysql_connect("localhost","root","");

mysql_select_db("story_sharing");

move_uploaded_file($file["tmp_name"], "posts/$file_name");

$insert = "INSERT INTO uploads

VALUES('','$user','$story','$file_type','$file_name')";

$res = mysql_query($insert);

header("location:[Link]");

?>

104
<?php

session_start();

if(empty($_SESSION['enter']))

?>

<html>

<head>

<title>WEB PAGE</title>

<style>

#main

width:100%;

height:600px;

background-
image:url('[Link]
[Link]');

background-size:100% 100%;

padding-top:18px;

animation-name:picchange;
105
animation-duration:14s; animation-iteration-count:infinite;

@keyframes picchange

0%{background-
image:url('[Link]
[Link]');}

30%{background-image:url('[Link]
content/uploads/2016/02/635879060507134237734358826_books.jpg
');}

60%{background-
image:url('[Link]
tyles/the_breaking_news_image_style/public/books-open-on-
[Link]?itok=i4wJDL9A');}

100%{background-image:url('[Link]
content/uploads/2016/04/[Link]');}

#title

width:100%;

106
height:90px;

background-color:transparent;

color:black;

font-family:forte;

font-size:70px;

padding-top:10px;

padding-left:80px;

animation-name:textchange;

animation-duration:14s; animation-iteration-count:infinite;

@keyframes textchange

0%{color:white;}

30%{color:white;}

60%{color:white;}

100%{color:white;}

#logintext

107
{

color:white;

font-family:Lucida Sans Unicode;

float:right;

margin-right:20px;

font-size:22px;

padding-top:10px;

#titlebutton

color:white;

float:right;

#sidebutton

width:80px;

height:50px;

background-color:transparent;

border:2px solid white;

border-radius:10px;

108
float:right;

color:white;

margin-right:120px;

font-size:20px;

font-family:Lucida Sans Unicode;

cursor:pointer;

#q

width:100px;

height:73px;

background-color:black;

background-
image:url('[Link]
edia/public/[Link]?itok=rvhRGBzx');

background-size:100% 100%;

margin-left:0px;

float:left;

padding-bottom:15px;

border:1px solid black;

109
border-radius:2px;

box-shadow:6px 6px 30px white;

#first

width:39%;

height:82%;

background-
image:url('[Link]
verview/public/page/bigstock-hand-pressing-share-your-story-
[Link]?itok=ize6Cysw');

background-size:100% 100%;

background-repeat:no-repeat;

border:1px solid black;

border-radius:20px;

box-shadow:-8px 8px 12px black;

float:right;

opacity:0.8;

background-clip:padding-box;

#text

110
{

width:83%;

height:60%;

color:white;

margin-left:80px;

margin-top:280px;

font-family:comic sans ms;

font-size:16px;

opacity:1;

#sec

width:49%;

height:100%;

margin-right:10px;

#a

width:150px;

height:52px;

111
border:1px solid darkblue;

border-radius:8px;

background-
image:url('[Link]
TES/s298/Topic%20-%20Facebook');

background-size:100% 110%;

margin-top:60px;

margin-left:160px;

#b

width:150px;

height:52px;

border:1px solid black;

border-radius:8px;

background-color:white;

background-
image:url('[Link]
gleg_standard_color_128dp.png');

background-size:30% 100%;

background-repeat:no-repeat;

112
margin-top:60px;

float:right;

margin-right:150px;

font-size:20px;

#e

color:white;

font-size:20px;

#c

width:270px;

color:white;

border-bottom:2px solid white;

margin-left:30px;

#d

width:270px;

113
color:white;

border-bottom:2px solid white;

float:right;

margin-left:10px;

margin-right:30px;

#marqueeline

color:white;

font-family:Lucida Sans Unicode;

#t

width:400px;

height:220px;

background-color:transparent;

padding-bottom:30px;

.y

114
width:400px;

border:0px solid white;

border-bottom:1px solid white;

margin-bottom:20px;

border-radius:10px;

box-shadow:2px solid grey;

background-color:transparent;

font-size:20px;

text-align:center;

.y:focus

height:20px;

border:0px solid black;

border-bottom:1px solid black;

.i

font-family:Lucida Fax;

font-size:20px;

115
margin-top:10px;

color:black;

#signupbutton

width:150px;

height:40px;

border:1px solid blue;

border-radius:10px;

color:white;

background-color:#307FCD;

font-size:22px;

font-family:Lucida Sans Unicode;

box-shadow:2px 2px 10px grey;

align:center;

#register

{width:300px; height:60px; border:1px solid white; border-radius:10px;

margin-top:20px; background-color:#F39C12; text-decoration:blink;
font-size:20px; font-weight:bold;font-family:Lucida Sans Unicode; box-
shadow:6px 6px 10px grey; cursor:pointer;

116
}

#startreading

{width:250px; height:50px; border:1px dotted white; border-

radius:10px; margin-top:20px; background-color:#1F618D; text-
shadow:2px 2px 1px white; font-size:18px; font-weight:bold;font-
family:Lucida Sans Unicode; box-shadow:6px 6px 10px grey;
cursor:pointer; }

</style>

</head>

<body>

<div id="main">

<div id="title"><div id="q"></div>&nbsp;&nbsp;What's Your Story

?

<div id="titlebutton"><a href ="login [Link]"><button

id="sidebutton" title="Login">Login</button></a>

</div><div id="logintext">Already have an Account?</div></div>

<div id="first"><div id="text">Storytelling is the social and cultural

activity of sharing stories, often with improvisation, theatrics, or
embellishment. Stories or narratives have been shared in every culture
as a means of entertainment, education, cultural preservation and
instilling moral values.

117
The term 'storytelling' is used in a narrow sense to refer specifically to
oral storytelling and also in a looser sense to refer to techniques used in
other media to unfold or disclose the narrative of a story.</div></div>

<div id="sec"><button id="a"></button><button

id="b">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>Continue<
/b></button>

<br><br><div id="e"><center>Or</center><div id="c"></div><div

id="d"></div></div>

<br><div id="marqueeline"><marquee direction="left">So, why

do people share content? Why do they tell stories? Why do they bother
at all? The easy answer: because they want to and feel emotionally
compelled to. But that’s of course too easy.</marquee></div>

<br><br><center><div id="t"><marquee
direction="right"></marquee><a href ="[Link]"><button
id="register" title="Register"><u>Register to WYS- It's Free!
</u></button></a><a href ="[Link]"><button
id="startreading" title="Reading">Start Reading with
WYS</button></a>

<div style="width:auto; color:white; font-size:20px; margin-

top:25px;">Already a Member ? <a href ="login
[Link]"><u>Login</u></a></div></div>

</div>

118
</body>

</html>

<?php

else

header("location:[Link]");

?>

119
120
 Scope of Project

By definition virtual story publishing and sharing is a straightforward project and it

seems that way too, it is the art of communicating a series of message using visual
multimedia. The concept is not new to our cultural landscape, nor is it new on the
internet landscape.

The concept that drives our website is the act of showcasing our art to the public
or the users. And in this age, it is relevant as ever, especially in light of our highly
digital age in which there is a constant battle for consumer’s attention through all
the fields of services.

121
The reason that Our Website has a lot of unearthed
potential are as follows:
 In India there is no relevant online story publishing websites.
 The international market is saturated with the western fiction and so the
potential of fiction created in India has a lot of market appeal.
 The Indian mythology has not been dug up completely and can be used to
promote Whats Your Storyas it is bringing a new genre of fiction market.
 The similar websites like Wattpad or Royalroad focus on a single kind of
populace who read fanfiction, unlike ours who will focus on Professional
and amateur together.
 With the easy to log-in function, people will be able to connect their social
media account and promote it unconditionally among their friends.
 There is a need for a website that can become an amalgamation between
Social Media and story sharing.

It is more engaging for its audience, which heightens its credibility, bolsters the
brand and increases revenue for our company Whats Your Story as we
commissioned it.

122
123
 Bibliography
 How to draw data flow Diagram from WikiHow
 The images are form the Google Images
 Management information System TMH by Gordon B.
Davis & Margrethe Holston
 Made by using Microsoft Word 2016

124