-
Notifications
You must be signed in to change notification settings - Fork 1.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #707 from 2222k3060/patch-2
Create cat.html
- Loading branch information
Showing
1 changed file
with
143 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,143 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Which Cat Breed Should I Choose?</title> | ||
| <style> | ||
| body { | ||
| font-family: Arial, sans-serif; | ||
| margin: 0; | ||
| padding: 0; | ||
| background-color: #f4f4f4; | ||
| color: #333; | ||
| } | ||
| header { | ||
| background-color: #333; | ||
| color: white; | ||
| text-align: center; | ||
| padding: 20px; | ||
| } | ||
| .intro-section { | ||
| text-align: center; | ||
| padding: 50px; | ||
| background-color: #ffcccb; | ||
| } | ||
| .intro-section h2 { | ||
| font-size: 28px; | ||
| margin-bottom: 20px; | ||
| } | ||
| .intro-section p { | ||
| font-size: 18px; | ||
| } | ||
| .form-section { | ||
| margin: 50px auto; | ||
| width: 50%; | ||
| background-color: white; | ||
| padding: 30px; | ||
| box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); | ||
| border-radius: 10px; | ||
| } | ||
| .form-section label { | ||
| font-size: 18px; | ||
| display: block; | ||
| margin-bottom: 10px; | ||
| } | ||
| .form-section select, .form-section input { | ||
| width: 100%; | ||
| padding: 10px; | ||
| margin-bottom: 20px; | ||
| border-radius: 5px; | ||
| border: 1px solid #ccc; | ||
| } | ||
| .form-section button { | ||
| background-color: #333; | ||
| color: white; | ||
| padding: 15px; | ||
| width: 100%; | ||
| border: none; | ||
| border-radius: 5px; | ||
| cursor: pointer; | ||
| } | ||
| .form-section button:hover { | ||
| background-color: #555; | ||
| } | ||
| .results-section { | ||
| text-align: center; | ||
| margin: 50px auto; | ||
| width: 50%; | ||
| } | ||
| .results-section h3 { | ||
| font-size: 24px; | ||
| margin-bottom: 20px; | ||
| } | ||
| footer { | ||
| text-align: center; | ||
| padding: 20px; | ||
| background-color: #333; | ||
| color: white; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
|
|
||
| <header> | ||
| <h1>Which Cat Breed Should I Choose?</h1> | ||
| </header> | ||
|
|
||
| <section class="intro-section"> | ||
| <h2>Find the Perfect Cat Breed for You</h2> | ||
| <p>Answer a few questions, and we'll help you find the best cat breed based on your personality and location!</p> | ||
| </section> | ||
|
|
||
| <section class="form-section"> | ||
| <form> | ||
| <label for="personality">What's your personality like?</label> | ||
| <select id="personality"> | ||
| <option value="calm">Calm</option> | ||
| <option value="active">Active</option> | ||
| <option value="social">Social</option> | ||
| </select> | ||
|
|
||
| <label for="location">Where do you live?</label> | ||
| <select id="location"> | ||
| <option value="city">City</option> | ||
| <option value="suburbs">Suburbs</option> | ||
| <option value="countryside">Countryside</option> | ||
| </select> | ||
|
|
||
| <button type="button" onclick="showBreed()">Find My Cat Breed</button> | ||
| </form> | ||
| </section> | ||
|
|
||
| <section class="results-section" id="results-section"> | ||
| <h3>Your Recommended Cat Breed Will Appear Here</h3> | ||
| <p id="result"></p> | ||
| </section> | ||
|
|
||
| <footer> | ||
| <p>© 2024 Which Cat Breed Should I Choose?</p> | ||
| </footer> | ||
|
|
||
| <script> | ||
| function showBreed() { | ||
| const personality = document.getElementById('personality').value; | ||
| const location = document.getElementById('location').value; | ||
| let breed = ''; | ||
|
|
||
| if (personality === 'calm' && location === 'city') { | ||
| breed = 'Persian'; | ||
| } else if (personality === 'active' && location === 'suburbs') { | ||
| breed = 'Siamese'; | ||
| } else if (personality === 'social' && location === 'countryside') { | ||
| breed = 'Maine Coon'; | ||
| } else { | ||
| breed = 'Domestic Shorthair'; | ||
| } | ||
|
|
||
| document.getElementById('result').innerText = 'We recommend the ' + breed + ' breed for you!'; | ||
| } | ||
| </script> | ||
|
|
||
| </body> | ||
| </html> |