-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
148 lines (143 loc) · 4.85 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>YouTube Continued</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- jquery google api -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<!-- jqueryui google api -->
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
<!-- youtube iframe api -->
<script src="js/youtube.js" type="text/javascript"></script>
<script src="js/continued.js" type="text/javascript"></script>
<!-- bootstrap system start-->
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<!-- bootstrap system end-->
<style type="text/css">
#wrapper {
margin-top: 100px;
}
fieldset {
border-width: 10px 15px 15px 10px;
border-style: solid;
border-color: black red red black;
padding: 10px 15px;
text-align: center;
border-radius: 25px;
}
legend {
text-align: center;
font-family: "Bauhaus 93", fantasy;
font-size: 4em;
}
#video_command {
margin-top: 10px;
}
#configuration {
margin-top: 40px;
}
/* stiky bottom */
#footer {
bottom: 0;
height: 3em;
position: absolute;
text-align: center;
color: gray;
}
.carousel-inner{
text-align: center;
}
.carousel .item > img {
display: inline-block;
}
#iplay {
margin-top: -10px;
margin-left: 5px;
margin-right: 5px;
border-radius: 50%/11%;
background-image: -webkit-linear-gradient(bottom, rgb(109, 2, 2) 22%, rgb(201, 0, 0) 61%);
background-image: -moz-linear-gradient(bottom, rgb(109, 2, 2) 22%, rgb(201, 0, 0) 61%);
background-image: -o-linear-gradient(bottom, rgb(109, 2, 2) 22%, rgb(201, 0, 0) 61%);
background-image: -ms-linear-gradient(bottom, rgb(109, 2, 2) 22%, rgb(201, 0, 0) 61%);
background-image: linear-gradient(bottom, #6D0202 22%, rgb(201, 0, 0) 61%);
}
#iplay:before {
border-radius: 5%/50%;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="container">
<div class="row">
<div class="span6 offset3">
<div id="player_sec">
<fieldset>
<legend>Y<font color="maroon">T</font><span id="iplay" class="btn btn-danger"><i class="icon-play"></i></span>Cont.d</legend>
<!-- Search Bar -->
<div id="search">
<form id="qform" action="#" method="post" >
<input type="text" name="qs" placeholder="Search here!" />
<input type="submit" class="ninja"/>
</form>
</div>
<!-- Real Video container -->
<div id="video_content" class="ninja">
<div id="yttitle"></div>
<div id="ytframe">
<p>Change your browser ... </p>
</div>
<div id="video_command" class="btn-group">
<button id="bt_mode" class="btn btn-success">Mode</button>
<button id="bt_history" class="btn btn-warning">History</button>
<button id="bt_next" class="btn btn-danger">Good Luck</button>
</div>
</div>
</fieldset>
</div>
</div>
<div id="configuration" class="span3">
<div class="row">
<!-- Played list Container -->
<div id="playlistwrapper" class="span2">
<div id="historyModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="historyModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h3 id="historyModalLabel">Played list</h3>
</div>
<div class="modal-body">
<p>No items</p>
<div id="playlist" class="carousel slide ninja">
<!-- Carousel items -->
<div class="carousel-inner">
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#playlist" data-slide="prev">‹</a>
<a class="carousel-control right" href="#playlist" data-slide="next">›</a>
</div>
</div>
<div class="modal-footer">
<!--<button id="bt_save" class="btn btn-success">Save this playlist</button>-->
<button class="btn btn-inverse" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
<div id="nontracker" class="ninja">
</div>
<!-- Related list temporary setting up -->
<div id="relatedlist" class="span1 ninja">
</div>
</div>
</div>
</div>
<div class="row">
<div id="footer" class="span12">
Hi, I am terces, this site is powered by javascript!
</div>
</div>
</div>
</div>
</body>
</html>