Skip to content

homework2 (Junyi Hou) #27

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
naitgnahc wants to merge 1 commit into
base: main
Choose a base branch
from
Open

homework2 (Junyi Hou) #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added 20251214112137_939eaa292972f81dc750c6c39f8d425dc5609958.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
155 changes: 155 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,155 @@
body {
background-image: url('20251214112137_939eaa292972f81dc750c6c39f8d425dc5609958.png');
background-size: cover;
font-family: Arial;
margin: 0;
padding: 0;
}

.container {
display: flex;
height: 100vh;
width: 100vw;
align-items: center;
}

.web_title {
width: 50vw;
flex-direction: column;
justify-content: center;
padding-left: 5vw;
}

.web_title h1 {
color: rgb(0, 65, 96);
font-size: 2.2rem;
}

.title-line {
width: 36.5vw;
height: 2px;
background-color: rgb(0, 65, 96);
}

.web_title h2 {
color: rgb(0, 65, 96);
font-size: 1.3rem;
font-weight: 300;
width: 36vw;
}

.sign_form {
width: 50vw;
padding: 1.25rem;
}

form {
background: white;
width: 30vw;
border-radius: 12px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
padding: 2.5rem;
}

form h1 {
font-size: 2.2rem;
color: rgb(70, 70, 70);
text-align: center;
}

form h2 {
font-size: 1.2rem;
color: rgb(70, 70, 70);
font-weight: 300;
text-align: center;
margin-bottom: 2rem;
}

.form_group label {
display: block;
margin-bottom: 0.5rem;
color: rgb(70, 70, 70);
font-size: 1.2rem;
font-weight: 300;
width: 36vw;
}

.form_group input {
box-sizing: border-box;
padding: 0.7rem 0.9rem;
border-radius: 6px;
border: 1px solid rgb(209, 213, 219);
font-size: 1.2rem;
margin-bottom: 2rem;
width: 100%;
}

.sign_button {
width: 100%;
height: 6vh;
border-radius: 12px;
background-color: rgb(2, 119, 175);
color: rgb(255, 255, 255);
font-size: 1.2rem;
font-weight: 300;
border: none;
}

p {
text-align: center;
font-size: 1.2rem;
font-weight: 300;
color: rgb(70, 70, 70);
margin-top: 1.2rem;
}

p a {
color: rgb(2, 119, 175);
text-decoration: none;
}

@media (max-width: 768px) {
.container {
flex-direction: column;
height: auto;
min-height: 100%;
width: 100%;
padding: 1.25rem;
}

.web_title {
width: 100%;
padding-left: 0;
padding: 0;
}

.sign_form {
width: 100%;
padding-left: 0;
padding: 0;
}

.title-line {
width: 100%;
}

.web_title h2 {
width: 100%;
}

form {
width: 92vw;
max-width: 520px;
margin: 1rem auto;
padding: 1.8rem;
box-sizing: border-box;
}

.form_group label {
width: 100%;
}

.sign_button {
height: 48px;
}
}
70 changes: 70 additions & 0 deletions w1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>week1</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
<div class="container">
<div class="web_title">
<h1>
Welcome to Plaint Quote System
</h1>
<div class="title-line"></div>
<h2>
Consequat adipising ea do labore irure adipiscing
occaecat cuidatat excepteur duis mo
</h2>
</div>

<div class="sign_form">
<form>
<h1>
Sign Up
</h1>
<h2>
Enter details to create your account
</h2>
<div class="form_group">
<label for="name">Your name</label>
<input type="text" id="name" name="name" placeholder="Enter your name">
</div>
<div class="form_group">
<label for="number">Phone number</label>
<input type="text" id="number" name="number" placeholder="Enter your phone number">
</div>
<div class="form_group">
<label for="account">Dulux account</label>
<input type="text" id="account" name="account" placeholder="Enter your Dulux account">
</div>
<div>
<button class="sign_button" type="submit">
Sign up
</button>
</div>
<div>
<p>Already have an account? <a href="#">Sign in</a></p>
</div>
</form>
</div>
</div>

<div id="modal" class="fixed inset-0 bg-black/50 flex items-center justify-center hidden">
<div class="bg-white rounded-lg p-6 w-80 text-center shadow-lg">
<p id="modal-message" class="text-lg mb-4">
Create Success
</p>
<button id="close-modal" class="bg-red-600 text-white px-4 py-2">
OK
</button>
</div>
</div>
<script src="w2.js"></script>
</body>

</html>
32 changes: 32 additions & 0 deletions w2.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
const form = document.querySelector("form");
const nameInput = document.querySelector("#name");
const numberInput = document.querySelector("#number");
const accountInput = document.querySelector("#account");
const formError = document.querySelector("#form-error");
const modal = document.querySelector("#modal");
const modalMessage = document.querySelector("#modal-message");
const closeModalBtn = document.querySelector("#close-modal");

function openModal(message) {
modalMessage.textContent = message;
modal.classList.remove("hidden");
}

function closeModal() {
modal.classList.add("hidden");
}

closeModalBtn.addEventListener("click", closeModal);

form.addEventListener("submit", (e) => {
e.preventDefault();
const name = nameInput.value;
const number = numberInput.value;
const account = accountInput.value;

if (name === "" || number === "" || account === "") {
openModal("All the information is required");
} else {
openModal("Create Success");
}
});