-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
164 lines (148 loc) · 5.27 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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!DOCTYPE html>
<html lang="en"><!--declare the language of the page-->
<head>
<title>Anime Addict</title><!--Display as site tab title-->
<link rel="shortcut icon" type="image/x-icon" href="images/anime_logo.ico"> <!--adds a image to the title to display in the tab-->
<link rel="stylesheet" type="text/css" href="anime_style.css">
<!-- link css and html-->
<meta name ="viewport" content="width=device-width, initial-scale=1.0">
<!--make the webpage fit the screen-->
</head>
<div class="dif">
<body>
<a href="index.html"><img class ="logo" src="images/logo.jpg" alt="Logo" title="return to mainpage"></a>
<h1 id="no_head">Anime Addict</h1>
<br><br><br><br></div>
<div class="navbar">
<a href="index.html">Home</a>
<a href="why_anime.html">Why you should watch anime?</a>
<a href="anime.html">Anime</a>
<div class="dropdown">
<button class="dropbtn">Books
</button>
<div class="dropdown-content">
<a href="books.html">Books</a>
<a href="manga.html">Manga</a>
<a href="light_novel.html">Light novel</a>
<a href="webtoons.html">Webtoons</a>
</div>
</div>
<a href="service.html">Anime services</a>
<a href="feedback.html">Feedback</a>
<img id="theme" src="images/moonedit.jpg" onclick="changeBGC('#000000')" ondblclick="changeBGC('#ffffff')" title="change theme" alt="change theme">
<img class="theme_2" src="images/website_font.jpg" onclick="changesize()" ondblclick="changeback()" title="change font" alt="change font">
</div>
<h1 id="anime_head">Anime Addict</h1>
<div class="home"><img class="home_img" src="images/logo.jpg" alt="Logo" title="Anime Addict logo"></div>
<div class="home_2"><p id="ch1">Welcome to <b>Anime Addict</b> the website for anything anime or managa related from Japan, America or China.</p>
<p id="ch2">Anime Addict was started in 2019 and is a non profit organisation.</p></div>
<div class="home_slide">
<center>
<div class="slide-container">
<div class="myslides">
<div class="numbertext">1/8</div>
<img class="slide" src="images/shield_hero.png">
</div>
<div class="myslides">
<div class="numbertext">2/8</div>
<img class="slide" src="images/hxhcover.jpg">
</div>
<div class="myslides">
<div class="numbertext">3/8</div>
<img class="slide" src="images/solo_lvl.jpg">
</div>
<div class="myslides">
<div class="numbertext">4/8</div>
<img class="slide_2" src="images/gintoki.gif">
</div>
<div class="myslides">
<div class="numbertext">5/8</div>
<img class="slide" src="images/gintama_anime.jpg">
</div>
<div class="myslides">
<div class="numbertext">6/8</div>
<img class="slide" src="images/download.jpg">
</div>
<div class="myslides">
<div class="numbertext">7/8</div>
<img class="slide" src="images/nogamenolife.jpg">
</div>
<div class="myslides">
<div class="numbertext">8/8</div>
<img class="slide" src="images/Aot_2.jpg">
</div>
</div>
<br>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</center>
</div>
<div class="bottom_sec">
<p>© This is a demonstration website for LSBU (London Southbank University) all images and text is from, wikipedia, myanimelist, Crunchyroll, tenor, mangarock</p>
</div>
<script>
function changeBGC(color){
/*var pic=document.getElementById('theme');
if(pic.src.match('sunedit.jpg')){
pic.src="moonedit.jpg";
} else {
pic.src="sunedit.jpg";
https://stackoverflow.com/questions/14867544/how-to-change-text-color-using-javascript-for-loop
*/
if (color=='#000000'){
document.body.style.backgroundColor = color;
document.getElementById('theme').src='images/sunedit.jpg';
document.getElementById('anime_head').style.color='white';
document.getElementById('ch1').style.color='white';
document.getElementById('ch2').style.color='white';
}else{
document.body.style.backgroundColor = color;
document.getElementById('theme').src='images/moonedit.jpg';
document.getElementById('anime_head').style.color='black';
document.getElementById('ch1').style.color='black';
document.getElementById('ch2').style.color='black';
//document.getElementById("theme").style.display= "block";}
}}
function changesize(){
// loop through the document to find all p and change the size
var i,text= document.querySelectorAll('p');
for (i=0; i< text.length; i++){
text[i].style.fontSize='20px';
}}
function changeback(){
// loop through the document to find all <p> and change the size back
var i,text= document.querySelectorAll('p');
for (i=0; i< text.length; i++){
text[i].style.fontSize='16px';
}}
</script>
<script>
var slideIndex = 0;
showslide();
function showslide() {
var i;
var slides=document.getElementsByClassName("myslides");
var dots=document.getElementsByClassName("dot");
for (i=0;i< slides.length;i++){
slides[i].style.display="none";
}
slideIndex++;
if (slideIndex >slides.length) (slideIndex = 1)
for(i=0;i<dots.length;i++){
dots[i].className=dots[i].className.replace(" act", "");
}
slides[slideIndex-1].style.display="block";
dots[slideIndex-1].className += " act";
setTimeout(showslide,10000);//change image every 15 sec 10
}
</script>
</body>
</html>