Skip to content

Commit 4ba8b89

Browse files
vim449vim449
committed
initial commit
0 parents  commit 4ba8b89

File tree

6 files changed

+196
-0
lines changed

6 files changed

+196
-0
lines changed

‎USR_LightLogo.png‎

165 KB
Loading

‎app.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
const shareButtons = document.querySelectorAll('.tile-share-button')
2+
console.log(shareButtons)
3+
4+
async function copyText(e) {
5+
//prevent button going to the site
6+
e.preventDefault()
7+
const link = this.getAttribute('link')
8+
console.log(link)
9+
try {
10+
await navigator.clipboard.writeText(link)
11+
} catch (err) {
12+
console.error(err)
13+
}
14+
}
15+
16+
shareButtons.forEach(shareButton =>
17+
shareButton.addEventListener('click', copyText))

‎icons/apple-touch-icon.png‎

12.1 KB
Loading

‎icons/favicon.ico‎

15 KB
Binary file not shown.

‎index.html‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<!doctype html>
2+
<html class="no-js" lang="">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="x-ua-compatible" content="ie=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
8+
<title>USR Sign-up links</title>
9+
<meta name="description" content="Links to sign up for Utah Student Robotics">
10+
11+
<!-- document icons -->
12+
<link rel="apple-touch-icon" href="icons/apple-touch-icon.png">
13+
<link rel="shortcut icon" href="icons/favicon.ico" />
14+
15+
<link rel="stylesheet" href="styles.css"/>
16+
</head>
17+
<body>
18+
<header>
19+
<div class="share-button">
20+
<svg width="16" height="16" viewBox="0 0 16 16" enable-background="new 0 0 24 24" class="sc-gKsewC iPWGYb"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.6464 3.85347L11 4.20702L11.7071 3.49992L11.3536 3.14636L8.35355 0.146362H7.64645L4.64645 3.14636L4.29289 3.49992L5 4.20702L5.35355 3.85347L7.5 1.70702V9.49992V9.99992H8.5V9.49992V1.70702L10.6464 3.85347ZM1 5.49994L1.5 4.99994H4V5.99994H2V14.9999H14V5.99994H12V4.99994H14.5L15 5.49994V15.4999L14.5 15.9999H1.5L1 15.4999V5.49994Z" fill="currentColor"></path></svg>
21+
</div>
22+
</header>
23+
24+
<div class="container">
25+
<div class="image-container">
26+
<img
27+
src="USR_LightLogo.png"
28+
alt="Utah Student Robotics Logo"/>
29+
</div>
30+
31+
<h1>Utah Student Robotics</h1>
32+
33+
<!-- copy these to add new links -->
34+
<!-- <a class="tile" href="LINK TO">
35+
<div class="icon">
36+
put an icon here
37+
</div>
38+
<p>Name of link</p>
39+
<div class="tile-share-button" link="same link as above">
40+
<svg width="16" height="16" viewBox="0 0 16 16" enable-background="new 0 0 24 24" class="sc-gKsewC iPWGYb"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.6464 3.85347L11 4.20702L11.7071 3.49992L11.3536 3.14636L8.35355 0.146362H7.64645L4.64645 3.14636L4.29289 3.49992L5 4.20702L5.35355 3.85347L7.5 1.70702V9.49992V9.99992H8.5V9.49992V1.70702L10.6464 3.85347ZM1 5.49994L1.5 4.99994H4V5.99994H2V14.9999H14V5.99994H12V4.99994H14.5L15 5.49994V15.4999L14.5 15.9999H1.5L1 15.4999V5.49994Z" fill="currentColor"></path></svg>
41+
</div>
42+
</a> -->
43+
44+
<!-- find svg icon sets at https://fontawesomeicons.com/svg/icons/ -->
45+
46+
<a class="tile" href="https://discord.gg/rZjxADmdMt">
47+
<div class="icon">
48+
<svg style="color: white; --darkreader-inline-color: var(--darkreader-text-ffffff, #f4f1ee);" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" data-darkreader-inline-color=""><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M524.5 69.8a1.5 1.5 0 0 0 -.8-.7A485.1 485.1 0 0 0 404.1 32a1.8 1.8 0 0 0 -1.9 .9 337.5 337.5 0 0 0 -14.9 30.6 447.8 447.8 0 0 0 -134.4 0 309.5 309.5 0 0 0 -15.1-30.6 1.9 1.9 0 0 0 -1.9-.9A483.7 483.7 0 0 0 116.1 69.1a1.7 1.7 0 0 0 -.8 .7C39.1 183.7 18.2 294.7 28.4 404.4a2 2 0 0 0 .8 1.4A487.7 487.7 0 0 0 176 479.9a1.9 1.9 0 0 0 2.1-.7A348.2 348.2 0 0 0 208.1 430.4a1.9 1.9 0 0 0 -1-2.6 321.2 321.2 0 0 1 -45.9-21.9 1.9 1.9 0 0 1 -.2-3.1c3.1-2.3 6.2-4.7 9.1-7.1a1.8 1.8 0 0 1 1.9-.3c96.2 43.9 200.4 43.9 295.5 0a1.8 1.8 0 0 1 1.9 .2c2.9 2.4 6 4.9 9.1 7.2a1.9 1.9 0 0 1 -.2 3.1 301.4 301.4 0 0 1 -45.9 21.8 1.9 1.9 0 0 0 -1 2.6 391.1 391.1 0 0 0 30 48.8 1.9 1.9 0 0 0 2.1 .7A486 486 0 0 0 610.7 405.7a1.9 1.9 0 0 0 .8-1.4C623.7 277.6 590.9 167.5 524.5 69.8zM222.5 337.6c-29 0-52.8-26.6-52.8-59.2S193.1 219.1 222.5 219.1c29.7 0 53.3 26.8 52.8 59.2C275.3 311 251.9 337.6 222.5 337.6zm195.4 0c-29 0-52.8-26.6-52.8-59.2S388.4 219.1 417.9 219.1c29.7 0 53.3 26.8 52.8 59.2C470.7 311 447.5 337.6 417.9 337.6z" fill="white"></path></svg>
49+
</div>
50+
<p>Discord</p>
51+
<div class="tile-share-button" link="https://discord.gg/rZjxADmdMt">
52+
<svg width="16" height="16" viewBox="0 0 16 16" enable-background="new 0 0 24 24" class="sc-gKsewC iPWGYb"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.6464 3.85347L11 4.20702L11.7071 3.49992L11.3536 3.14636L8.35355 0.146362H7.64645L4.64645 3.14636L4.29289 3.49992L5 4.20702L5.35355 3.85347L7.5 1.70702V9.49992V9.99992H8.5V9.49992V1.70702L10.6464 3.85347ZM1 5.49994L1.5 4.99994H4V5.99994H2V14.9999H14V5.99994H12V4.99994H14.5L15 5.49994V15.4999L14.5 15.9999H1.5L1 15.4999V5.49994Z" fill="currentColor"></path></svg>
53+
</div>
54+
</a>
55+
56+
<a class="tile" href="https://teams.microsoft.com/l/team/19%3af03cb626559c4830a1991a32e8043c8f%40thread.skype/conversations?groupId=31f08df3-72f2-437a-ba98-117717931abf&tenantId=5217e0e7-539d-4563-b1bf-7c6dcf074f91">
57+
<div class="icon">
58+
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Microsoft Teams</title><path d="M20.625 8.127q-.55 0-1.025-.205-.475-.205-.832-.563-.358-.357-.563-.832Q18 6.053 18 5.502q0-.54.205-1.02t.563-.837q.357-.358.832-.563.474-.205 1.025-.205.54 0 1.02.205t.837.563q.358.357.563.837.205.48.205 1.02 0 .55-.205 1.025-.205.475-.563.832-.357.358-.837.563-.48.205-1.02.205zm0-3.75q-.469 0-.797.328-.328.328-.328.797 0 .469.328.797.328.328.797.328.469 0 .797-.328.328-.328.328-.797 0-.469-.328-.797-.328-.328-.797-.328zM24 10.002v5.578q0 .774-.293 1.46-.293.685-.803 1.194-.51.51-1.195.803-.686.293-1.459.293-.445 0-.908-.105-.463-.106-.85-.329-.293.95-.855 1.729-.563.78-1.319 1.336-.756.557-1.67.861-.914.305-1.898.305-1.148 0-2.162-.398-1.014-.399-1.805-1.102-.79-.703-1.312-1.664t-.674-2.086h-5.8q-.411 0-.704-.293T0 16.881V6.873q0-.41.293-.703t.703-.293h8.59q-.34-.715-.34-1.5 0-.727.275-1.365.276-.639.75-1.114.475-.474 1.114-.75.638-.275 1.365-.275t1.365.275q.639.276 1.114.75.474.475.75 1.114.275.638.275 1.365t-.275 1.365q-.276.639-.75 1.113-.475.475-1.114.75-.638.276-1.365.276-.188 0-.375-.024-.188-.023-.375-.058v1.078h10.875q.469 0 .797.328.328.328.328.797zM12.75 2.373q-.41 0-.78.158-.368.158-.638.434-.27.275-.428.639-.158.363-.158.773 0 .41.158.78.159.368.428.638.27.27.639.428.369.158.779.158.41 0 .773-.158.364-.159.64-.428.274-.27.433-.639.158-.369.158-.779 0-.41-.158-.773-.159-.364-.434-.64-.275-.275-.639-.433-.363-.158-.773-.158zM6.937 9.814h2.25V7.94H2.814v1.875h2.25v6h1.875zm10.313 7.313v-6.75H12v6.504q0 .41-.293.703t-.703.293H8.309q.152.809.556 1.5.405.691.985 1.19.58.497 1.318.779.738.281 1.582.281.926 0 1.746-.352.82-.351 1.436-.966.615-.616.966-1.43.352-.815.352-1.752zm5.25-1.547v-5.203h-3.75v6.855q.305.305.691.452.387.146.809.146.469 0 .879-.176.41-.175.715-.48.304-.305.48-.715t.176-.879Z"/></svg>
59+
</div>
60+
<p>Teams</p>
61+
<div class="tile-share-button" link="https://teams.microsoft.com/l/team/19%3af03cb626559c4830a1991a32e8043c8f%40thread.skype/conversations?groupId=31f08df3-72f2-437a-ba98-117717931abf&tenantId=5217e0e7-539d-4563-b1bf-7c6dcf074f91">
62+
<svg width="16" height="16" viewBox="0 0 16 16" enable-background="new 0 0 24 24" class="sc-gKsewC iPWGYb"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.6464 3.85347L11 4.20702L11.7071 3.49992L11.3536 3.14636L8.35355 0.146362H7.64645L4.64645 3.14636L4.29289 3.49992L5 4.20702L5.35355 3.85347L7.5 1.70702V9.49992V9.99992H8.5V9.49992V1.70702L10.6464 3.85347ZM1 5.49994L1.5 4.99994H4V5.99994H2V14.9999H14V5.99994H12V4.99994H14.5L15 5.49994V15.4999L14.5 15.9999H1.5L1 15.4999V5.49994Z" fill="currentColor"></path></svg>
63+
</div>
64+
</a>
65+
66+
<a class="tile" href="https://campusconnect.utah.edu/USR/club_signup">
67+
<div class="icon">
68+
<svg style="color: white" xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="currentColor" class="bi bi-arrow-right-circle" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z" fill="white"></path> </svg>
69+
</div>
70+
<p>Campus Connect</p>
71+
<div class="tile-share-button" link="https://campusconnect.utah.edu/USR/club_signup">
72+
<svg width="16" height="16" viewBox="0 0 16 16" enable-background="new 0 0 24 24" class="sc-gKsewC iPWGYb"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.6464 3.85347L11 4.20702L11.7071 3.49992L11.3536 3.14636L8.35355 0.146362H7.64645L4.64645 3.14636L4.29289 3.49992L5 4.20702L5.35355 3.85347L7.5 1.70702V9.49992V9.99992H8.5V9.49992V1.70702L10.6464 3.85347ZM1 5.49994L1.5 4.99994H4V5.99994H2V14.9999H14V5.99994H12V4.99994H14.5L15 5.49994V15.4999L14.5 15.9999H1.5L1 15.4999V5.49994Z" fill="currentColor"></path></svg>
73+
</div>
74+
</a>
75+
76+
77+
</div>
78+
79+
<script src="app.js"></script>
80+
81+
</body>
82+
</html>

‎styles.css‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
body {
2+
margin: 0;
3+
padding: 0;
4+
background-color: rgb(10,10,10);
5+
color: rgb(240,240,240);
6+
display: flex;
7+
align-items: center;
8+
flex-direction: column;
9+
width: 100vw;
10+
font-family: Verdana, Tahoma, sans-serif;
11+
}
12+
13+
header {
14+
width: 95%;
15+
max-width: 788px;
16+
display: flex;
17+
justify-content: flex-end;
18+
padding: 12px;
19+
margin-top: 15px;
20+
}
21+
22+
.share-button {
23+
width: 40px;
24+
height: 40px;
25+
border-radius: 20px;
26+
background-color: rgb(240,240,240);
27+
}
28+
29+
.share-button svg {
30+
margin-left: 12px;
31+
margin-top: 10px;
32+
color: rgb(0,0,0);
33+
}
34+
35+
.container {
36+
width: 91%;
37+
max-width: 680px;
38+
margin: 10px;
39+
display: flex;
40+
flex-direction: column;
41+
align-items: center;
42+
}
43+
44+
h1 {
45+
font-size: 20px;
46+
margin-bottom: 30px;
47+
}
48+
49+
a {
50+
text-decoration: none;
51+
color: rgb(240,240,240);
52+
}
53+
54+
.tile {
55+
width: 100%;
56+
background-color: rgb(37,37,37);
57+
margin: 7px;
58+
border-radius: 17px;
59+
display: flex;
60+
justify-content: space-between;
61+
}
62+
63+
.tile:hover {
64+
transition: cubic-bezier(.07, 1.41, .82, 1.41) 0.2s;
65+
transform: scale(1.02);
66+
}
67+
68+
.tile-share-button {
69+
margin: 8px;
70+
width: 40px;
71+
height: 40px;
72+
border-radius: 20px;
73+
background-color: rgb(52,52,52);
74+
}
75+
76+
.tile-share-button svg {
77+
margin-left: 12px;
78+
margin-top: 10px;
79+
}
80+
81+
82+
.image-container {
83+
height: 96px;
84+
width: 96px;
85+
border-radius: 48px;
86+
overflow: hidden;
87+
}
88+
89+
.image-container img {
90+
height: 100%;
91+
}
92+
93+
.icon {
94+
margin: 4px 8px;
95+
width: 44px;
96+
height: 44px;
97+
}

0 commit comments

Comments
 (0)