# 作業1 負評救星-當機等候網頁
## 網站介紹
https://www.costco.com.tw
COSTCO 是一家美國知名的連鎖大型會員制量販店，成立於 1976 年，目前在全球多個國家都有分店，包括美國、加拿大、英國、日本、澳洲等地。COSTCO 提供眾多商品種類，包括食品、生活用品、電子產品、家居用品等等，以批發價格銷售，同時也提供會員制度，讓會員享有更多的優惠和服務。COSTCO 的經營理念是提供高品質、低價格的商品和服務，以及建立長期的關係與忠誠度。
## 設計理念
為了呼應 COSTCO 商標的顏色，我在網頁的背景採用了這兩個顏色由上至下的漸層。這樣不僅能夠使網頁與 COSTCO 品牌形象相一致，同時也能夠為使用者帶來視覺上的吸引力。
另外，為了提高使用者的注意力，我在網頁上所顯示的文字使用了類似於打字的動畫。這種效果能夠讓文字看起來更有生命力，同時也讓使用者更容易注意到這些文字的存在。在文字的最後部分，我提供了一個方便使用者點擊的連結，讓他們能夠透過 EMAIL 與 COSTCO 取得幫助，解決使用者的任何困難或問題。
## 程式碼
### HTML
```htmlembedded=
<!DOCTYPE html>
<html lang="en">
<head>
<title>Costco</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Create a div with the "background" class, and add the Costco image and text to it -->
<div class="background">
<img src="https://upload.wikimedia.org/wikipedia/commons/5/59/Costco_Wholesale_logo_2010-10-26.svg" alt="costco image" class="costco_img">
<div class="text"></div>
</div>
<script src="main.js"></script>
</body>
</html>
```
### CSS
```css=
/* Set the HTML to have no overflow */
html {
overflow: hidden;
}
/* Set the body to have no overflow, and no margin or padding */
body {
overflow: hidden;
margin: 0;
padding: 0;
}
/* Set the background to be a linear gradient, with a fixed height and width */
.background {
background: linear-gradient(to bottom, #E31936, #0865AD);
height: 100vh;
width: 100vw;
}
/* Set the Costco image to be centered, with a maximum width of 30% */
.costco_img {
display: block;
margin: 0 auto;
height: auto;
max-width: 30%;
}
/* Set the text to be left-aligned, with padding, white color, and a specific font and size */
.text {
text-align: left;
padding: 100px;
color: white;
font-family: Monaco, sans-serif;
font-size: 150%;
}
```
### JavaScript
```javascript=
/* Create a string variable with the text to be displayed, and initialize a count and timer variable */
let text = " We're sorry, but our website is currently experiencing an overload of users and can't process your request" +
" at the moment.\n\nPlease try again later.\n\nThank you for your patience!\n\n\\";
let count = 0;
let timer;
/* Set an interval function to add each character of the text to the HTML element with the "text" class */
setInterval(function() {
let textContent = text.charAt(count);
if (textContent === '\n') {
textContent = '<br>';
}
if (textContent === '\\') {
/* Replace the backslash character with a link, if present */
textContent = '<a href=\'https://warehouses.costco.com.tw/contact_zh/contact.action?_gl=1*1jzmsrx*_ga*NTE0NTAyNDQ3LjE2Nzc4MzUzMDY.*_ga_F5DSSB6YJ3*MTY3NzgzNTMwNS4xLjEuMTY3NzgzNjQxOC4wLjAuMA..\' style="text-decoration: none;">If you encounter any problems, please click here to contact us.</a>';
}
document.querySelector(".text").innerHTML += textContent;
count++;
if (count === text.length) {
clearInterval(timer);
}
}, 50);
```
Sign in with Wallet
Connect another wallet