Skip to content

Commit

Permalink
css improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@SanderGi
SanderGi committed Nov 23, 2023
1 parent a29ee60 commit 08b19c9
Show file tree
Hide file tree
Showing 4 changed files with 95 additions and 35 deletions.
58 changes: 42 additions & 16 deletions public/components/Action.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,17 @@ import { sanitizeText } from "../util/util.js";
return /* html */`
<link rel="stylesheet" href="/styles/reset.css">
<link rel="stylesheet" href="/styles/tables.css">
<div role="link" class="cols" style="margin-bottom: 16px; cursor: pointer; width: 190px;">
<i class="${actionIcon} actions" onclick="location.assign('${link}')"></i>
<h3>${actionName}
<span style="position: relative;">
<i id="info-btn" class="fa-solid fa-circle-info smaller-text"></i>
<dialog id="info-dialog" class="action-info">${description}</dialog>
</span>
</h3>
<div class="cols" style="margin-bottom: 16px; width: 190px;">
<div role="link" class="actions" onclick="location.assign('${link}')">
<i class="${actionIcon}"></i>
</div>
<h3>${actionName}
<span style="position: relative;">
<i role="button" id="info-btn" class="fa-solid fa-circle-info smaller-text"></i>
<dialog id="info-dialog" class="action-info">${description}</dialog>
</span>
</h3>
</div>
<style>${CSS}</style>
`;
Expand Down Expand Up @@ -60,21 +63,44 @@ h3 {
.cols {
margin: auto;
text-align: center;
}
#info-btn {
cursor: pointer;
}
.actions {
font-size: 80px;
color: var(--accent);
border: 3px solid black;
border-radius: 8px;
padding: 5px;
background-color: whitesmoke;
min-width: 125px;
border-radius: 15px;
cursor: pointer;
width: 120px;
padding: 20px;
aspect-ratio: 1/1;
box-shadow: rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, rgba(58, 65, 111, .5) 0 -3px 0 inset;
margin-bottom: 8px;
display: inline-flex;
justify-content: center;
align-items: center;
transition: transform .15s;
background-color: var(--secondary);
}
.actions > i {
background-image: radial-gradient(100% 100% at 100% 0, #5adaff 0, #5468ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 3px var(--accent);
}
.actions:hover:not(:active) {
box-shadow: rgba(45, 35, 66, .4) 0 4px 8px, rgba(45, 35, 66, .3) 0 7px 13px -3px, rgba(58, 65, 111, .5) 0 -3px 0 inset;
transform: translateY(-2px);
}
.actions:hover {
color: var(--primary);
background-color: var(--accent-lighter);
.actions:active {
transform: translateY(2px);
}
.action-info {
Expand Down
58 changes: 41 additions & 17 deletions public/components/ContactForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,29 +7,53 @@ class ContactForm extends Component {
<link rel="stylesheet" href="/styles/reset.css">
<link rel="stylesheet" href="/styles/inputs.css">
<link rel="stylesheet" href="/styles/button.css">
<script type="module" src="/contactform.js"></script>
<h1>
Contact Us
</h1>
<p>Experiencing any technological issues with the service? Have a question or feature request? We're happy to hear from you!</p>
<br>
<p>NOTE: You'll have to contact the groups you're part of directly to dispute attendance records since we don't decide whether or you should be marked absent.</p>
<br>
<form class="form" id="contactform">
<label for="name">Name</label>
<input id="name" type="text" required>
<div>
<h1>
Contact Us
</h1>
<hr><br>
<p>Experiencing any technological issues with the service? Have a question or feature request? We're happy to hear from you!</p>
<br>
<label for="email">Email</label>
<input id="email" type="email" required><br>
<label for="message">What would you like to say to us?</label><br>
<textarea id="message" rows="3" required></textarea><br>
<button class="button">Submit</button>
</form>
<p>NOTE: You'll have to contact the groups you're part of directly to dispute attendance records since we don't decide whether or you should be marked absent.</p>
<br>
<form class="form" id="contactform">
<label for="name">Name</label><br>
<input id="name" type="text" required>
<br>
<label for="email">Email</label><br>
<input id="email" type="email" required><br>
<label for="message">What would you like to say to us?</label><br>
<textarea style="resize: vertical;" id="message" rows="3" required></textarea><br><br>
<button class="button">Submit</button>
</form>
</div>
<style>
h1 {
font-size: 3rem;
padding: 0.2em;
}
hr {
width: 3rem;
border: 2px solid var(--accent);
margin: 0 auto;
}
div {
width: 100%;
height: 100%;
color: var(--accent);
padding: 1em;
}
p, .form input, .form input[type="text"], .form textarea {
min-width: 90%;
width: 90%;
max-width: 90%;
margin: 0 auto;
text-align: left;
color: black;
}
input:focus, textarea:focus {
outline: 2px solid var(--accent);
}
</style>
`;
}
Expand Down
12 changes: 11 additions & 1 deletion public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,12 +79,22 @@ <h2>Participate in many groups</h2>
</section>
<section class="only-logged-in light-section">
<h1>Actions</h1>
<p>Click below to navigate to the specified features!</p>
<p>One account, many ways to take attendance. Click below to shortcut straight to the relevant features!</p>
<div class="rows">
<action-icon name="Quick Attendance" icon="fa-solid fa-person-running" link="scanner.html#new" description="Automatically creates an event to be able to start taking attendance immediately."></action-icon>
<action-icon name="Take Attendance" icon="fa-solid fa-camera" link="scanner.html" description="Pick a business and event to start taking attendance or create a new event."></action-icon>
<action-icon name="Start a Group" icon="fa-solid fa-user-group" link="payment.html" description="Start a group to record attendance for your business."></action-icon>
</div>
<div class="rows">
<action-icon name="Launch Event" icon="fa-solid fa-rocket" link="scanner.html#launch" description="Creates a free group and launches a new event. Everyone who attends the event will automatically be added to the group."></action-icon>
<action-icon name="Collect RSVPs" icon="fa-solid fa-envelope" link="404.html" description="Send out requests for members to indicate whether they will attend your event."></action-icon>
<action-icon name="Track Work Hours" icon="fa-solid fa-clock" link="404.html" description="Log when employees arrive at the workplace and when they leave at the end of the day."></action-icon>
</div>
<div class="rows">
<action-icon name="When2Meet" icon="fa-solid fa-calendar" link="404.html" description="Group members indicate which days and times they can meet and you are presented with buttons to instantly create events on the available timeslots."></action-icon>
<action-icon name="Analytic Overview" icon="fas fa-chart-bar" link="404.html" description="As an owner, see which members put in the hours and view statistics on which events and dates members attend. As a member, see your attendance, report mistakes, and figure out where you need to step it up."></action-icon>
<action-icon name="Report Absence" icon="fa-solid fa-cross" link="404.html" description="Know you'll be absent at a future event? Report it here so your group admins and moderators can plan accordingly."></action-icon>
</div>
</section>
<section class="not-logged-in medium-section">
<h1>
Expand Down
2 changes: 1 addition & 1 deletion public/styles/variables.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,6 @@
--delete-darker: #d30707;
--light-section: #b0d8ff;
--medium-section: #9AA6EC;
--purple-section: #8773c1;
--purple-section: #9d9bf7;
--dark-background: #353535;
}

0 comments on commit 08b19c9

Please sign in to comment.