├── materials
    ├── Voice
    │   ├── Do.mp3
    │   ├── Do2.mp3
    │   ├── Fa.mp3
    │   ├── La.mp3
    │   ├── Mi.mp3
    │   ├── Re.mp3
    │   ├── So.mp3
    │   ├── Ti.mp3
    │   └── DuckQuack.mp3
    └── Images
    │   ├── Duck1.jpg
    │   ├── Duck2.jpg
    │   ├── Duck3.jpg
    │   ├── Duck4.jpg
    │   ├── Duck5.jpg
    │   ├── Duck6.jpg
    │   ├── Duck7.jpg
    │   ├── Duck8.jpg
    │   ├── Duck9.jpg
    │   ├── Duck10.jpg
    │   ├── Duck11.jpg
    │   ├── Duck12.jpg
    │   ├── Duck13.jpg
    │   ├── Duck14.jpg
    │   ├── Duck15.jpg
    │   ├── Duck16.jpg
    │   ├── Duck17.jpg
    │   ├── Duck18.jpg
    │   ├── Duck19.jpg
    │   └── Duck20.jpg
├── .idea
    ├── vcs.xml
    ├── .gitignore
    ├── modules.xml
    └── WEB_DESIGN_HW1.iml
├── README.md
└── index.html


/materials/Voice/Do.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/woizhicheng0309/WEB_DESIGN_HW1/HEAD/materials/Voice/Do.mp3


--------------------------------------------------------------------------------
/materials/Voice/Do2.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/woizhicheng0309/WEB_DESIGN_HW1/HEAD/materials/Voice/Do2.mp3


--------------------------------------------------------------------------------
/materials/Voice/Fa.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/woizhicheng0309/WEB_DESIGN_HW1/HEAD/materials/Voice/Fa.mp3


--------------------------------------------------------------------------------
/materials/Voice/La.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/woizhicheng0309/WEB_DESIGN_HW1/HEAD/materials/Voice/La.mp3


--------------------------------------------------------------------------------
/materials/Voice/Mi.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/woizhicheng0309/WEB_DESIGN_HW1/HEAD/materials/Voice/Mi.mp3


--------------------------------------------------------------------------------
/materials/Voice/Re.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/woizhicheng0309/WEB_DESIGN_HW1/HEAD/materials/Voice/Re.mp3


--------------------------------------------------------------------------------
/materials/Voice/So.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/woizhicheng0309/WEB_DESIGN_HW1/HEAD/materials/Voice/So.mp3


--------------------------------------------------------------------------------
/materials/Voice/Ti.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/woizhicheng0309/WEB_DESIGN_HW1/HEAD/materials/Voice/Ti.mp3


--------------------------------------------------------------------------------
/materials/Images/Duck1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/woizhicheng0309/WEB_DESIGN_HW1/HEAD/materials/Images/Duck1.jpg


--------------------------------------------------------------------------------
/materials/Images/Duck2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/woizhicheng0309/WEB_DESIGN_HW1/HEAD/materials/Images/Duck2.jpg


--------------------------------------------------------------------------------
/materials/Images/Duck3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/woizhicheng0309/WEB_DESIGN_HW1/HEAD/materials/Images/Duck3.jpg


--------------------------------------------------------------------------------
/materials/Images/Duck4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/woizhicheng0309/WEB_DESIGN_HW1/HEAD/materials/Images/Duck4.jpg


--------------------------------------------------------------------------------
/materials/Images/Duck5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/woizhicheng0309/WEB_DESIGN_HW1/HEAD/materials/Images/Duck5.jpg


--------------------------------------------------------------------------------
/materials/Images/Duck6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/woizhicheng0309/WEB_DESIGN_HW1/HEAD/materials/Images/Duck6.jpg


--------------------------------------------------------------------------------
/materials/Images/Duck7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/woizhicheng0309/WEB_DESIGN_HW1/HEAD/materials/Images/Duck7.jpg


--------------------------------------------------------------------------------
/materials/Images/Duck8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/woizhicheng0309/WEB_DESIGN_HW1/HEAD/materials/Images/Duck8.jpg


--------------------------------------------------------------------------------
/materials/Images/Duck9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/woizhicheng0309/WEB_DESIGN_HW1/HEAD/materials/Images/Duck9.jpg


--------------------------------------------------------------------------------
/materials/Images/Duck10.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/woizhicheng0309/WEB_DESIGN_HW1/HEAD/materials/Images/Duck10.jpg


--------------------------------------------------------------------------------
/materials/Images/Duck11.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/woizhicheng0309/WEB_DESIGN_HW1/HEAD/materials/Images/Duck11.jpg


--------------------------------------------------------------------------------
/materials/Images/Duck12.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/woizhicheng0309/WEB_DESIGN_HW1/HEAD/materials/Images/Duck12.jpg


--------------------------------------------------------------------------------
/materials/Images/Duck13.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/woizhicheng0309/WEB_DESIGN_HW1/HEAD/materials/Images/Duck13.jpg


--------------------------------------------------------------------------------
/materials/Images/Duck14.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/woizhicheng0309/WEB_DESIGN_HW1/HEAD/materials/Images/Duck14.jpg


--------------------------------------------------------------------------------
/materials/Images/Duck15.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/woizhicheng0309/WEB_DESIGN_HW1/HEAD/materials/Images/Duck15.jpg


--------------------------------------------------------------------------------
/materials/Images/Duck16.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/woizhicheng0309/WEB_DESIGN_HW1/HEAD/materials/Images/Duck16.jpg


--------------------------------------------------------------------------------
/materials/Images/Duck17.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/woizhicheng0309/WEB_DESIGN_HW1/HEAD/materials/Images/Duck17.jpg


--------------------------------------------------------------------------------
/materials/Images/Duck18.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/woizhicheng0309/WEB_DESIGN_HW1/HEAD/materials/Images/Duck18.jpg


--------------------------------------------------------------------------------
/materials/Images/Duck19.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/woizhicheng0309/WEB_DESIGN_HW1/HEAD/materials/Images/Duck19.jpg


--------------------------------------------------------------------------------
/materials/Images/Duck20.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/woizhicheng0309/WEB_DESIGN_HW1/HEAD/materials/Images/Duck20.jpg


--------------------------------------------------------------------------------
/materials/Voice/DuckQuack.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/woizhicheng0309/WEB_DESIGN_HW1/HEAD/materials/Voice/DuckQuack.mp3


--------------------------------------------------------------------------------
/.idea/vcs.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="VcsDirectoryMappings">
4 |     <mapping directory="" vcs="Git" />
5 |   </component>
6 | </project>


--------------------------------------------------------------------------------
/.idea/.gitignore:
--------------------------------------------------------------------------------
1 | # Default ignored files
2 | /shelf/
3 | /workspace.xml
4 | # Editor-based HTTP Client requests
5 | /httpRequests/
6 | # Datasource local storage ignored files
7 | /dataSources/
8 | /dataSources.local.xml
9 | 


--------------------------------------------------------------------------------
/.idea/modules.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="ProjectModuleManager">
4 |     <modules>
5 |       <module fileurl="file://$PROJECT_DIR$/.idea/WEB_DESIGN_HW1.iml" filepath="$PROJECT_DIR$/.idea/WEB_DESIGN_HW1.iml" />
6 |     </modules>
7 |   </component>
8 | </project>


--------------------------------------------------------------------------------
/.idea/WEB_DESIGN_HW1.iml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <module type="WEB_MODULE" version="4">
 3 |   <component name="NewModuleRootManager">
 4 |     <content url="file://$MODULE_DIR$">
 5 |       <excludeFolder url="file://$MODULE_DIR$/.tmp" />
 6 |       <excludeFolder url="file://$MODULE_DIR$/temp" />
 7 |       <excludeFolder url="file://$MODULE_DIR$/tmp" />
 8 |     </content>
 9 |     <orderEntry type="inheritedJdk" />
10 |     <orderEntry type="sourceFolder" forTests="false" />
11 |   </component>
12 | </module>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | Song Chords
 2 | 
 3 | 1. Jingle bell
 4 |    
 5 | E  E  E   E  E  E  
 6 | E  I  Q  W  E  
 7 | R  R  R  R  R  E  E  E  
 8 | E  W  W  E  W  U  
 9 | E  E  E   E  E  E  
10 | E  I  Q  W  E  
11 | R  R  R  R  R  E  E  E  
12 | P  P  R  W  Q  
13 | 
14 | 2. Happy Birthday
15 |    
16 | Q  Q  W  Q  R  E  
17 | Q  Q  W  Q  U  R  
18 | Q  Q  P  I  R  E  W  
19 | O  O  I  R  U  R  
20 | 
21 | 3. Twinkle Twinkle Little Star
22 |    
23 | Q  Q  U  U  I  I  U  
24 | W  W  R  R  E  E  Q  
25 | U  U  W  W  R  R  E  
26 | U  U  W  W  R  R  E  
27 | Q  Q  U  U  I  I  U  
28 | W  W  R  R  E  E  Q  
29 | 
30 | 4. Mary Had a Little Lamb
31 |    
32 | E  W  Q  W  E  E  E  
33 | W  W  W  E  U  U  
34 | E  W  Q  W  E  E  E  
35 | E  W  W  E  W  Q  
36 | 
37 | 5. Baby Shark
38 |    
39 | Q  Q  W  W  W  
40 | W  W  E  E  E  
41 | E  E  W  W  W  
42 | W  W  Q  
43 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <title>WEBSITE CURRENTLY NOT AVAILABLE</title>
  6 |     <meta name="description" content="We're upgrading our system to serve you better!">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |     <style>
  9 |         @keyframes textAnimation {
 10 |             0% {
 11 |                 transform: scale(1);
 12 |             }
 13 |             50% {
 14 |                 transform: scale(1.1);
 15 |             }
 16 |             100% {
 17 |                 transform: scale(1);
 18 |             }
 19 |         }
 20 |         body {
 21 |             display: flex;
 22 |             flex-direction: column;
 23 |             justify-content: center;
 24 |             align-items: center;
 25 |             height: 100vh;
 26 |             margin: 0;
 27 |             text-align: center;
 28 |             background-size: cover;
 29 |             background-position: center;
 30 |             background-color: #191414; /* Spotify black */
 31 |             color: #1DB954; /* Spotify green */
 32 |         }
 33 |         h1 {
 34 |             width: 100%;
 35 |             text-align: center;
 36 |             margin: 0;
 37 |             padding: 20px 0;
 38 |             font-size: 35px;
 39 |             font-weight: bold;
 40 |             color: #1DB954; /* Spotify green */
 41 |             position: absolute;
 42 |             top: 0;
 43 |             left: 0;
 44 |             right: 0;
 45 |             animation: textAnimation 3s infinite;
 46 |         }
 47 |         h2 {
 48 |             margin: 20px 0;
 49 |         }
 50 |         .content {
 51 |             margin-bottom: 20px; /* Adjust this value as needed */
 52 |         }
 53 |         .styled-paragraph {
 54 |             font-size: 2em;
 55 |             font-weight: bold;
 56 |             color: black; /* Spotify green */
 57 |             position: absolute;
 58 |             bottom: 0;
 59 |             left: 0;
 60 |             right: 0;
 61 |             animation: textAnimation 3s infinite;
 62 |         }
 63 |         .spotify-logo {
 64 |             width: 300px;
 65 |             animation: textAnimation 3s infinite;
 66 |         }
 67 |         .move-up {
 68 |             bottom: 10%; /* Adjust this value to move the element up */
 69 |         }
 70 |         .instructions {
 71 |             position: absolute;
 72 |             top: 20px;
 73 |             left: 20px;
 74 |             width: 150px;
 75 |             padding: 10px;
 76 |             border: 2px solid #1DB954; /* Spotify green */
 77 |             background-color: #191414; /* Spotify black */
 78 |             color: #1DB954; /* Spotify green */
 79 |             text-align: left;
 80 |             font-size: 20px;
 81 |         }
 82 |     </style>
 83 | </head>
 84 | <body>
 85 | <div class="instructions">
 86 |     <p>Let the duck sing!</p>
 87 |     <p>Q - Do</p>
 88 |     <p>W - Re</p>
 89 |     <p>E - Mi</p>
 90 |     <p>R - Fa</p>
 91 |     <p>U - So</p>
 92 |     <p>I - La</p>
 93 |     <p>O - Ti</p>
 94 |     <p>P - Do'</p>
 95 | </div>
 96 | <h1><img src="https://upload.wikimedia.org/wikipedia/commons/2/26/Spotify_logo_with_text.svg" alt="Spotify Logo" class="spotify-logo"></h1>
 97 | <div class="content">
 98 |     <p1 class="styled-paragraph move-up">We're upgrading our system to serve you better!</p1>
 99 |     <p2 class="styled-paragraph">Take the duck for a walk (by clicking) in meanwhile</p2>
100 | </div>
101 | <audio id="duckSound" src="materials/Voice/DuckQuack.mp3"></audio>
102 | <script defer>
103 |     const totalImages = 20;
104 |     const duckImages = [];
105 |     // Preload sound
106 |     const duckSound = new Audio('materials/Voice/DuckQuack.mp3');
107 | 
108 |     // Preload images
109 |     for (let i = 1; i <= totalImages; i++) {
110 |         const img = new Image();
111 |         img.src = `materials/Images/Duck${i}.jpg`;
112 |         img.alt = `Duck ${i}`;
113 |         duckImages.push(img);
114 |     }
115 | 
116 |     // Map keys to sound files
117 |     const soundMap = {
118 |         'Q': 'materials/Voice/Do.mp3',
119 |         'W': 'materials/Voice/Re.mp3',
120 |         'E': 'materials/Voice/Mi.mp3',
121 |         'R': 'materials/Voice/Fa.mp3',
122 |         'U': 'materials/Voice/So.mp3',
123 |         'I': 'materials/Voice/La.mp3',
124 |         'O': 'materials/Voice/Ti.mp3',
125 |         'P': 'materials/Voice/Do2.mp3',
126 |     };
127 | 
128 |     // Preload all sounds
129 |     const sounds = {};
130 |     for (const key in soundMap) {
131 |         sounds[key] = new Audio(soundMap[key]);
132 |     }
133 | 
134 |     function handleClick() {
135 |         // Cycle the image from Duck1 to Duck20
136 |         const currentImage = document.body.style.backgroundImage.match(/Duck(\d+)\.jpg/);
137 |         const duckImageNumber = currentImage ? parseInt(currentImage[1]) : 1;
138 |         const nextDuckImageNumber = duckImageNumber === totalImages ? 1 : duckImageNumber + 1;
139 |         document.body.style.backgroundImage = `url('${duckImages[nextDuckImageNumber - 1].src}')`;
140 |     }
141 | 
142 |     function playDuckSound() {
143 |         duckSound.currentTime = 0; // Rewind to the start
144 |         duckSound.play().catch(error => console.error('Error playing sound:', error));
145 |     }
146 | 
147 |     document.body.addEventListener('click', function() {
148 |         playDuckSound();
149 |         handleClick();
150 |     });
151 | 
152 |     // Prevent the user from selecting the text
153 |     document.body.addEventListener('selectstart', function(event) {
154 |         event.preventDefault();
155 |     });
156 | 
157 |     // Set initial background image
158 |     document.body.style.backgroundImage = `url('${duckImages[0].src}')`;
159 | 
160 |     // Play sound on key press
161 |     document.addEventListener('keydown', function(event) {
162 |         const soundFile = sounds[event.key.toUpperCase()];
163 |         if (soundFile) {
164 |             soundFile.currentTime = 0; // Rewind to the start
165 |             soundFile.play().catch(error => console.error('Error playing sound:', error));
166 |             handleClick();
167 |         }
168 |     });
169 | </script>
170 | </body>
171 | </html>


--------------------------------------------------------------------------------