aaa
This commit is contained in:
parent
6dfd27bd0b
commit
4542ad394b
Binary file not shown.
|
Before Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 111 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 78 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 896 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 124 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.2 KiB |
112
backend.js
112
backend.js
@ -1,112 +0,0 @@
|
||||
let main_desc = "Purpose of this webpage is to gather info about characters in anime Dropout Idol Fruit Trart.<br/><br/>You might ask : But why?<br/>Answer : Yes<br/><br/>On the top of the page you have link to pages on all the main characters. Clicking on logo sends you back here.<br/>Hope you'll enjoy.";
|
||||
let ino_main_desc = "Ino is very cheerful girl. Shes also liked by others for her personality.<br/><br/>- Gender: Female <br/>- Height: 155cm <br/>- Weight: 47kg <br/>- Hair_color: pink <br/>- Eye_color: blue";
|
||||
let hemo_main_desc = "Hemo likes Ino, maybe way too much.<br/><br/>- Gender: Female<br/>- Height: 145cm<br/>- Weight: 37kg<br/>- Hair_color: chestnut brown<br/>- Eye_color: amber";
|
||||
let hoho_main_desc = "Shes manager of the other girls, can be pushy and weird. (also shes single)<br/><br/>- Gender: Female<br/>- Height: 165cm<br/>- Weight: 51kg<br/>- Hair_color: dark brown<br/>- Eye_color: dark brown";
|
||||
let hayu_main_desc = "Likes music and has a ton of canned food.<br/><br/>- Gender: Female<br/>- Height: 150cm<br/>- Weight: 40kg<br/>- Hair_color: blonde<br/>- Eye_color: blue";
|
||||
let roko_main_desc = "She's cuddly with Nina and its really awesome.<br/><br/>- Gender: Female <br/>- Height: 140cm <br/>- Weight: 35kg <br/>- Hair_color: violet <br/>- Eye_color: violet";
|
||||
let nina_main_desc = "Shes like big sister to roko. Shes also a lil bit shy.<br/><br/>- Gender: Female <br/>- Height: 170cm <br/>- Weight: 55kg <br/>- Hair_color: light brown <br/>- Eye_color: brown";
|
||||
|
||||
//loading basics
|
||||
const title = document.getElementById("title_text");
|
||||
const description = document.getElementById("description_text");
|
||||
const main_image = document.getElementById("image_main");
|
||||
const main_image0 = document.getElementById("image_main0");
|
||||
const main_images = document.getElementById("main_images");
|
||||
|
||||
const logo = document.getElementById("logo");
|
||||
|
||||
// loading character buttons
|
||||
const inu = document.getElementById("Ino");
|
||||
const roko = document.getElementById("Roko");
|
||||
const hayu = document.getElementById("Hayu");
|
||||
const nina = document.getElementById("Nina");
|
||||
const hemo = document.getElementById("Hemo");
|
||||
const hoho = document.getElementById("Hoho");
|
||||
|
||||
|
||||
function reset() {
|
||||
main_image0.style.visibility = "hidden";
|
||||
main_images.style.paddingLeft = "0%";
|
||||
main_images.style.borderStyle = "hidden";
|
||||
}
|
||||
|
||||
|
||||
function loadMainPage() {
|
||||
reset();
|
||||
|
||||
title.innerHTML = "Introduction";
|
||||
description.innerHTML = main_desc;
|
||||
main_image.src = "../Fruit-Tart-Stalking/assets/images/general/general_image.png";
|
||||
}
|
||||
|
||||
|
||||
function InoSakura() {
|
||||
reset();
|
||||
|
||||
title.innerHTML = "Ino Sakura";
|
||||
description.innerHTML = ino_main_desc;
|
||||
main_image.src = "../Fruit-Tart-Stalking/assets/images/InoSakura/ino_main.png";
|
||||
}
|
||||
|
||||
|
||||
function RokoSekino() {
|
||||
reset();
|
||||
|
||||
main_images.style.paddingLeft = "10%";
|
||||
main_images.style.borderStyle = "solid";
|
||||
title.innerHTML = "Roko Sekino";
|
||||
description.innerHTML = roko_main_desc;
|
||||
main_image.src = "../Fruit-Tart-Stalking/assets/images/RokoSekino/roko_main.jpg";
|
||||
main_image0.src = "../Fruit-Tart-Stalking/assets/images/RokoSekino/roko_second.jpg";
|
||||
main_image0.style.visibility = "visible";
|
||||
}
|
||||
|
||||
|
||||
function HayuNukui() {
|
||||
reset();
|
||||
|
||||
main_images.style.paddingLeft = "10%";
|
||||
main_images.style.borderStyle = "solid";
|
||||
title.innerHTML = "Hayu Nukui";
|
||||
description.innerHTML = hayu_main_desc;
|
||||
main_image.src = "../Fruit-Tart-Stalking/assets/images/HayuNukui/hayu_main.jpg";
|
||||
main_image0.src = "../Fruit-Tart-Stalking/assets/images/HayuNukui/hayu_second.jpg";
|
||||
main_image0.style.visibility = "visible";
|
||||
}
|
||||
|
||||
|
||||
function NinaMaehara() {
|
||||
reset();
|
||||
|
||||
title.innerHTML = "Nina Maehara";
|
||||
description.innerHTML = nina_main_desc;
|
||||
main_image.src = "../Fruit-Tart-Stalking/assets/images/NinaMaehara/nina_main.jpg";
|
||||
}
|
||||
|
||||
|
||||
function HemoMidori() {
|
||||
reset();
|
||||
|
||||
title.innerHTML = "Hemo Midori";
|
||||
description.innerHTML = hemo_main_desc;
|
||||
main_image.src = "../Fruit-Tart-Stalking/assets/images/HemoMidori/hemo_main.jpg";
|
||||
}
|
||||
|
||||
|
||||
function HohoKajino() {
|
||||
reset();
|
||||
|
||||
title.innerHTML = "Hoho Kajino";
|
||||
description.innerHTML = hoho_main_desc;
|
||||
main_image.src = "../Fruit-Tart-Stalking/assets/images/HohoKajino/hoho_main.jpg";
|
||||
}
|
||||
|
||||
|
||||
loadMainPage();
|
||||
logo.addEventListener("click", loadMainPage);
|
||||
inu.addEventListener("click", InoSakura);
|
||||
roko.addEventListener("click", RokoSekino);
|
||||
hayu.addEventListener("click", HayuNukui);
|
||||
nina.addEventListener("click", NinaMaehara);
|
||||
hemo.addEventListener("click", HemoMidori);
|
||||
hoho.addEventListener("click", HohoKajino);
|
||||
54
index.html
54
index.html
@ -1,54 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Fruit tart</title>
|
||||
<link rel="stylesheet" type="text/css" href="style.css"/>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img src="../Fruit-Tart-Stalking/assets/images/general/logo.png" id="logo" alt="logo"/>
|
||||
|
||||
<nav id="navbar">
|
||||
<ul id="navbar_items">
|
||||
<li class="menu_item"><a href="#" class="menu_item_link" id="Ino">Ino Sakura</a></li>
|
||||
<li class="menu_item"><a href="#" class="menu_item_link" id="Roko">Roko Sekino</a></li>
|
||||
<li class="menu_item"><a href="#" class="menu_item_link" id="Hayu">Hayu Nukui</a></li>
|
||||
<li class="menu_item"><a href="#" class="menu_item_link" id="Nina">Nina Maehara</a></li>
|
||||
<li class="menu_item"><a href="#" class="menu_item_link" id="Hemo">Hemo Midori</a></li>
|
||||
<li class="menu_item"><a href="#" class="menu_item_link" id="Hoho">Hoho Kajino</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</header>
|
||||
|
||||
<!-- Main program -->
|
||||
|
||||
<section id="main">
|
||||
|
||||
<div id="title">
|
||||
<p id="title_text"> Introduction </p>
|
||||
</div>
|
||||
|
||||
<div id="description">
|
||||
<p id="description_text"></p>
|
||||
</div>,
|
||||
|
||||
<ul id="main_images">
|
||||
<li><img id="image_main" src="#"/></li>
|
||||
<li><img id="image_main0" src="#"/></li>
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
|
||||
<!-- end of main program -->
|
||||
|
||||
<footer>
|
||||
<!-- add link to ur website when done -->
|
||||
<p class="footer">Author: Tucan444</p>
|
||||
</footer>
|
||||
|
||||
<script src="../Fruit-Tart-Stalking/backend.js"/>
|
||||
</body>
|
||||
</html>
|
||||
146
style.css
146
style.css
@ -1,146 +0,0 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
|
||||
|
||||
*{
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #fa311b;
|
||||
}
|
||||
|
||||
.menu_item, .menu_item_link{
|
||||
font-family: "Noto Sans JP", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 30px;
|
||||
color: #000000;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
header{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 30px 10%;
|
||||
}
|
||||
|
||||
#logo{
|
||||
cursor: pointer;
|
||||
border: 5px solid #f00543;
|
||||
border-radius: 20px;
|
||||
transition: all 0.3s ease 0s;
|
||||
}
|
||||
|
||||
#logo:hover{
|
||||
border-color: #a3042e;
|
||||
}
|
||||
|
||||
#navbar_items {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#navbar_items li{
|
||||
display: inline-block;
|
||||
padding: 0px 20px;
|
||||
border: 5px solid #f00543;
|
||||
border-radius: 20px;
|
||||
background-color: #ff184e;
|
||||
}
|
||||
|
||||
#navbar_items li a{
|
||||
background-color: #ff184e;
|
||||
transition: all 0.3s ease 0s;
|
||||
}
|
||||
|
||||
#navbar_items li a:hover {
|
||||
color:#fafafa;
|
||||
}
|
||||
|
||||
.footer{
|
||||
font-family: "Noto Sans JP", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 15px;
|
||||
color: #000000;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
/* css for main program here */
|
||||
|
||||
#title{
|
||||
margin: 1% 10% 1% 10%;
|
||||
padding: 3%;
|
||||
border: 5px solid #f00543;
|
||||
border-radius: 20px;
|
||||
background-color: #ff184e;
|
||||
transition: all 0.3s ease 0s;
|
||||
}
|
||||
|
||||
#title:hover{
|
||||
border-color: #a3042e;
|
||||
}
|
||||
|
||||
#title_text{
|
||||
background-color: #ff184e;
|
||||
font-family: "Noto Sans JP", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 50px;
|
||||
margin-left: 2%;
|
||||
}
|
||||
|
||||
#description{
|
||||
margin: 1% 10% 1% 10%;
|
||||
padding: 3%;
|
||||
border: 5px solid #f00543;
|
||||
border-radius: 20px;
|
||||
background-color: #ff184e;
|
||||
transition: all 0.3s ease 0s;
|
||||
}
|
||||
|
||||
#description:hover{
|
||||
border-color: #a3042e;
|
||||
}
|
||||
|
||||
#description_text{
|
||||
background-color: #ff184e;
|
||||
font-family: "Noto Sans JP", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
margin-left: 2%;
|
||||
}
|
||||
|
||||
#image_main{
|
||||
margin: 1% 10% 1% 10%;
|
||||
border: 6px solid #f00543;
|
||||
border-radius: 20px;
|
||||
transition: all 0.3s ease 0s;
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
#image_main:hover{
|
||||
border-color: #a3042e;
|
||||
}
|
||||
|
||||
#image_main0{
|
||||
border: 6px solid #f00543;
|
||||
border-radius: 20px;
|
||||
transition: all 0.3s ease 0s;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#image_main0:hover{
|
||||
border-color: #a3042e;
|
||||
}
|
||||
|
||||
#main_images {
|
||||
list-style: none;
|
||||
border: 6px solid #ff759a;
|
||||
border-radius: 20px;
|
||||
transition: all 0.3s ease 0s;
|
||||
border-style: hidden;
|
||||
}
|
||||
|
||||
#main_images li{
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#main_images:hover{
|
||||
border-color: #ffb5c9;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user