First Commit

This commit is contained in:
juFried 2023-08-12 16:15:34 -07:00
commit 4082196454
25 changed files with 659 additions and 0 deletions

70
Pages/Contact.html Normal file
View file

@ -0,0 +1,70 @@
<html>
<head>
<script src="email.js"></script>
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="./Resources/Favicons/favicon.png">
<nav class="fill">
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="Team.html">Our Team</a></li>
<li><a href="Contact.html">Contact</a></li>
<li><a href="Sponsors.html">Sponsors</a></li>
<li><a href="Resources.html">Resources</a></li>
<li><a href="calendar.html">Calendar</a></li>
</ul>
</nav>
</head>
<body>
<div class="Title-Container">
<div>
<h1 class="page-title" style="width:100%; text-align: center;">Reach Out to Us!</h1>
<div style="display: flex; align-items:center; justify-content: center;">
<img src="../Resources/Icons/email-icon.png" id="TeamIcon" alt="Team Icon">
</div>
</div>
</div>
<!-- <div class="divider">
<hr>
<h1 style="display: flex; justify-content:center; text-align: center;">Contact Us:</h1>
<hr>
</div>
<form onsubmit="return false">
<input type="text" placeholder="Enter your First Name" id="firstName" />
<input type="text" placeholder="Enter your Last Name" id="lastName" />
<br>
<input type="email" placeholder="Enter your Email address" id="email" />
<p>What is your question?</p>
<br>
<textarea id="question" rows="4"></textarea>
<br><br>
<button onclick="sendMessage()">Send Message</button>
</form> -->
<div class="divider">
<hr>
<h1 style="display: flex; justify-content:center; text-align: center;">Our Info</h1>
<hr>
</div>
<div style="display:flex; align-items:center; justify-content:center; color:rgb(241,241,241); text-align:center; font-size:large; margin:40px">
Email: team1165@gmail.com <br>
Lead Coach Email: joramos@pvlearners.net
</div>
<div class="divider" style="padding-bottom: 50px;">
<hr>
<h1 style="display: flex; justify-content:center; text-align: center;">Reach out on Socials</h1>
<hr>
</div>
<div class="divider">
<img src="../Resources/insta-line.png" style="width:5%;">
<div style="color:rgb(241,241,241)">teamparadise.1165</div>
<div style="width:6%"></div>
<img src="../Resources/tiktok.png" style="width:5%; padding-bottom: 10px;">
<div style="color:rgb(241,241,241)">team.paradise.1165</div>
<div style="width:6%"></div>
<img src="../Resources/snapchat.png" style="width:5%; padding-bottom: 10px;">
<div style="color:rgb(241,241,241)">Team1165</div>
<div style="width:6%"></div>
<img src="../Resources/facebook.png" style="width:5%; padding-bottom: 10px;">
<div style="color:rgb(241,241,241)">Team Paradise</div>
</div>
</body>
</html>

36
Pages/Resources.html Normal file
View file

@ -0,0 +1,36 @@
<html>
<head>
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="./Resources/Favicons/favicon.png">
<nav class="fill">
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="Team.html">Our Team</a></li>
<li><a href="Contact.html">Contact</a></li>
<li><a href="Sponsors.html">Sponsors</a></li>
<li><a href="Resources.html">Resources</a></li>
<li><a href="calendar.html">Calendar</a></li>
</ul>
</nav>
</head>
<body>
<div class="Title-Container">
<div>
<h1 class="page-title" style="width:100%; text-align: center;">Welcome To Our Resource Page</h1>
<div style="display: flex; align-items:center; justify-content: center;">
<img src="../Resources/Icons/Pencil-icon.png" id="TeamIcon" alt="Team Icon">
</div>
</div>
</div>
<div class="divider">
<hr>
<h1 style="display: flex; justify-content:center; text-align: center;">Resources</h1>
<hr>
</div>
<div class="sponsor-detail" style="display:flex; align-items:center; justify-content:center">Our Resource Page is currently under construction, please be patient while we gather everything that we would like to provide for you.</div>
<div class="sponsor-detail" style="display:flex; align-items:center; justify-content:center">For the time being, Check out some resources we have been gathering as a team at the link below.</div>
<div style="height: 30%;"></div>
<a href="https://www.notion.so/d3c957c706684065a480779f7f0f240d?v=cd0bd8cc4da046f6a999f825990bcd94" style="color: white; font-size:2vw; text-align:center; justify-content:center; align-items:center; display:flex;">Notion Book</a></li>
<div style="height: 30%;"></div>
</body>
</html>

77
Pages/Sponsors.html Normal file
View file

@ -0,0 +1,77 @@
<html>
<head>
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="./Resources/Favicons/favicon.png">
<nav class="fill">
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="Team.html">Our Team</a></li>
<li><a href="Contact.html">Contact</a></li>
<li><a href="Sponsors.html">Sponsors</a></li>
<li><a href="Resources.html">Resources</a></li>
<li><a href="calendar.html">Calendar</a></li>
</ul>
</nav>
</head>
<body>
<div class="Title-Container">
<div>
<h1 class="page-title" style="width:100%; text-align: center;">Intersted in Sponsoring Us?</h1>
<div style="display: flex; align-items:center; justify-content: center;">
<img src="../Resources/Icons/handshake-icon.png" id="TeamIcon" alt="Team Icon">
</div>
</div>
</div>
<div class="divider">
<hr>
<h1 style="display: flex; justify-content:center; align-items: center; text-align: center;">Sponsorship Tiers</h1>
<hr>
</div>
<div style="text-align:center; font-size:large">
<div>
<!-- Paradise Sponsor -->
<h2 style="color:rgb(163,47,47); text-decoration: underline;">Paradise Sponsor</h2>
<div class="sponsor-amount">$5,000+</div>
<div class="sponsor-detail">•Robot Demonstration at Company (pending Sponsor request and team availability)</div>
<div class="sponsor-detail">•Colored Logo on Competition Robot</div>
<div class="sponsor-detail">•Monthly Video Call with Students to talk about STEM and the team</div>
<div class="sponsor-detail">•Gold Tier</div>
</div>
<br>
<div>
<!-- Gold Sponsor -->
<h2 style="color:rgb(255, 215, 0); text-decoration: underline;">Gold Sponsor</h2>
<div class="sponsor-amount">$1,500-$4,999</div>
<div class="sponsor-detail">•Company Name and Logo on Team Shirts</div>
<div class="sponsor-detail">•Logo on Competition Robot</div>
<div class="sponsor-detail">•Company name listed on team registration papers</div>
<div class="sponsor-detail">•Silver Tier</div>
</div>
<br>
<div>
<!-- Silver Sponsor -->
<h2 style="color:rgb(209, 209, 209); text-decoration: underline;">Silver Sponsor</h2>
<div class="sponsor-amount">$500-$1,499</div>
<div class="sponsor-detail">•Name on Promotional Materials</div>
<div class="sponsor-detail">•Social Media Shoutout</div>
<div class="sponsor-detail">•Company name on robot</div>
<div class="sponsor-detail">•Company Name and Link on Website</div>
<div class="sponsor-detail">•Bronze Tier</div>
</div>
<br>
<div>
<!-- Bronze Sponsor -->
<h2 style="color:#b08d57; text-decoration: underline;">Bronze Sponsor</h2>
<div class="sponsor-amount"><$499</div>
<div class="sponsor-detail">•Personal Thank You Card</div>
<div class="sponsor-detail">•Monthly Newsletter</div>
</div>
<br>
</div>
<div style="display:flex; align-items:center; justify-content: center;">
<a href="https://drive.google.com/file/d/1Jw3b2Ish6vnYYuKsQ_BXDHRR-khnJSUf/view?usp=sharing" style=" color:white">View our Sponsorship Packet</a>
</div>
</body>
</html>

85
Pages/Team.html Normal file
View file

@ -0,0 +1,85 @@
<html>
<head>
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="./Resources/Favicons/favicon.png">
<nav class="fill">
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="Team.html">Our Team</a></li>
<li><a href="Contact.html">Contact</a></li>
<li><a href="Sponsors.html">Sponsors</a></li>
<li><a href="Resources.html">Resources</a></li>
<li><a href="calendar.html">Calendar</a></li>
</ul>
</nav>
</head>
<body>
<div class="Title-Container">
<div>
<h1 class="page-title" style="width:100%; text-align: center;">Here is Our Team</h1>
<div style="display: flex; align-items:center; justify-content: center;">
<img src="../Resources/Icons/team-icon.png" id="TeamIcon" alt="Team Icon">
</div>
</div>
</div>
<div class="divider">
<hr>
<h1 style="display: flex; justify-content:center; ">Members</h1>
<hr>
</div>
<div class="people-container">
<div class="person">
<div class="Name">Charlotte Moenich</div>
<div class="pTitle">President</div>
</div>
<div class="person">
<div class="Name">Tatum Berrington</div>
<div class="pTitle">V.P. Admin</div>
</div>
<div class="person">
<div class="Name">Reeve Moore</div>
<div class="pTitle">V.P. Build</div>
</div>
<div class="person">
<div class="Name">Justin Friedlander</div>
<div class="pTitle">Treasurer</div>
</div>
<div class="person">
<div class="Name">Venkata Narashimha Puneeth Tirungary</div>
<div class="pTitle">Secretary</div>
</div>
<div class="person">
<div class="Name">Alexandra Andrade</div>
<div class="pTitle">President's Reporter</div>
</div>
<!-- ADD MORE STUDENTS HERE -->
</div>
<div class="divider">
<hr>
<h1 style="display: flex; justify-content:center; ">Mentors</h1>
<hr>
</div>
<div class="people-container">
<div class="person">
<div class="Name">Gatlin Farrington</div>
<div class="pTitle">Coach ~ Programming and Business</div>
</div>
<div class="person">
<div class="Name">Mike Moenich</div>
<div class="pTitle">Mentor ~ Build and Design</div>
</div>
<div class="person">
<div class="Name">Melonie Young</div>
<div class="pTitle">Mentor ~ Build and Design</div>
</div>
<br>
</div>
<div class="people-container">
<div class="person">
<div class="Name">Jorge "Chef" Ramos</div>
<div class="pTitle">Lead Coach</div>
</div>
<!-- ADD MORE Mentors HERE -->
</div>
</body>
</html>

34
Pages/calendar.html Normal file
View file

@ -0,0 +1,34 @@
<html>
<head>
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="./Resources/Favicons/favicon.png">
<nav class="fill">
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="Team.html">Our Team</a></li>
<li><a href="Contact.html">Contact</a></li>
<li><a href="Sponsors.html">Sponsors</a></li>
<li><a href="Resources.html">Resources</a></li>
<li><a href="calendar.html">Calendar</a></li>
</ul>
</nav>
</head>
<body>
<div class="Title-Container">
<div>
<h1 class="page-title" style="width:100%; text-align: center;">Calendar</h1>
<div style="display: flex; align-items:center; justify-content: center;">
<img src="../Resources/Icons/calendar.png" id="TeamIcon" alt="Team Icon" style="width: 12%;">
</div>
</div>
</div>
<div class="divider">
<hr>
<h1 style="display: flex; justify-content:center; text-align: center;">Calendar</h1>
<hr>
</div>
<div style="display: flex; justify-content:center; text-align: center; padding-top: 10%; padding-bottom: 8%;">
<iframe src="https://calendar.google.com/calendar/embed?height=600&wkst=1&bgcolor=%23a32f2f&ctz=America%2FPhoenix&showTitle=0&showPrint=0&showTabs=0&showCalendars=0&showTz=0&src=Y18xZHBiYzQ1MXM5MjJrYnVmNGltbW1xcW1pY0Bncm91cC5jYWxlbmRhci5nb29nbGUuY29t&color=%237986CB" style="border-width:0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
</div>
</body>
</html>

39
Pages/email.js Normal file
View file

@ -0,0 +1,39 @@
document.addEventListener("DOMContentLoaded", function(){
fields.firstName = document.getElementById('firstName');
fields.lastName = document.getElementById('lastName');
fields.email = document.getElementById('email');
fields.message = document.getElementById('question');
})
function isNotEmpty(value){
if (value == null || typeof calue == 'undefined') return false;
return (value.length > 0);
}
function isNumber(num) {
return (num.length > 0) && !isNaN(num);
}
function isEmail(email) {
let regex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
return regex.test(String(email).toLowerCase());
}
//field.className to change classes
class User{
constructor(firstName, lastName, email, question){
this.firstName = firstName;
this.lastName = lastName;
this.email = email;
this.question = question;
}
}
function sendContact(){
if(isValid()){
let usr = new User(firstName.value, lastName.value, email.value, question.value);
}
}

262
Pages/style.css Normal file
View file

@ -0,0 +1,262 @@
@font-face { font-family: OpenSans; src: url('../Resources/openSans.ttf'); }
html{
background-color: #141415;
font-family: OpenSans;
}
/*SCROLLBAR*/
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
border-radius: 10px;
background: rgb(163, 47, 47);
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: rgb(163, 47, 47);
}
.logo-container{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.logo-image{
width: 60%;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
li{
display: inline;
}
/* li a{
font-family: OpenSans;
padding: 14px 16px;
color: rgb(150, 150, 150);
background-color: #141415;
text-align: center;
text-decoration: none;
border-radius: 5px;
transition: background-color .75s ease-out 50ms;
transition: color .75s ease-out 50ms;
transition: font-size .75s ease-out 50ms;
}
li a:hover {
background-color: rgb(163, 47, 47);
color: rgb(241, 241, 241);
font-size:18px;
} */
.divider hr{
height: 1px;
background-color: rgb(163, 47, 47);
border: none;
width: 40%;
padding: 10px, 10px;
}
.divider{
display: flex;
align-items: center;
justify-content: center;
}
h1{
color:rgb(163, 47, 47)
}
/*Mobile*/
@media screen and (max-width: 1200px) {
/* comes into effect for screens larger than or equal to 481 pixels */
.ourStory-Container{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
margin: 5%;
}
.ourStory-Container div{
font-family: OpenSans;
padding: 2%;
width: 80%;
text-align: center;
font-size: medium;
}
.ourStory-Container img{
width: 80%;
padding:2%;
}
nav {
width: 80%;
margin: 0 auto;
font-size: 25px;
}
}
/*Desktop*/
@media screen and (min-width: 1201px) {
.ourStory-Container{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
margin: 5%;
}
.ourStory-Container div{
font-family: OpenSans;
padding: 2%;
flex-grow: 4;
width: 45%;
text-align: center;
font-size: medium;
min-width: 300px;
}
.ourStory-Container img{
padding: 2%;
width: 40%;
}
}
.page-title{
font-size: 100px;
color:rgb(163, 47, 47);
font-family: OpenSans;
}
.Title-Container{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
height:100%;
}
.flex-break{
flex-basis: 100%;
height: 0;
}
.people-container{
display: flex;
flex-wrap:wrap;
justify-content: center;
align-items: center;
}
.people-container .person{
justify-content: center;
text-align: center;
padding: 12px;
}
.people-container .person .name{
font-size: px;
color: rgb(163, 47, 47);
}
.people-container .person .pTitle{
font-size: 18px;
color: rgb(224, 198, 83);
}
.sponsor-amount{
color: #738180;
size:18px;
}
.sponsor-detail{
color:#f1f1f1;
size:14px;
}
.ul-list{
}
h2{
margin:5px;
}
/*NAV.FILL*/
nav {
width: 80%;
margin: 0 auto;
}
nav ul {
list-style: none;
text-align: center;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: block;
padding: 15px;
text-decoration: none;
color: #aaa;
font-weight: 800;
text-transform: uppercase;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before {
transition: all .2s;
}
nav ul li a:hover {
color: #555;
}
nav.fill ul li a {
position: relative;
}
nav.fill ul li a:after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
content: '.';
color: transparent;
background: #aaa;
height: 1px;
}
nav.fill ul li a {
transition: all 2s;
}
nav.fill ul li a:after {
text-align: left;
content: '.';
margin: 0;
opacity: 0;
}
nav.fill ul li a:hover {
color: #fff;
z-index: 1;
}
nav.fill ul li a:hover:after {
z-index: -10;
animation: fill .5s forwards;
-webkit-animation: fill 1s forwards;
-moz-animation: fill 1s forwards;
opacity: 1;
}
@-webkit-keyframes fill {
0% {
width: 0%;
height: 1px;
}
50% {
width: 100%;
height: 1px;
}
100% {
width: 100%;
height: 100%;
background: rgb(163, 47, 47);
}
}

3
README.md Normal file
View file

@ -0,0 +1,3 @@
# Paradise1165Website
This is the current working website of Team Paradise, FRC Team #1165

BIN
Resources/1165Team.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 141 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 72 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.4 KiB

BIN
Resources/Logo Gradient.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 256 KiB

BIN
Resources/facebook.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.3 KiB

BIN
Resources/insta-line.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

BIN
Resources/insta-line.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

BIN
Resources/openSans.ttf Normal file

Binary file not shown.

BIN
Resources/snapchat.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.8 KiB

BIN
Resources/tiktok.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

BIN
Resources/twitter.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

53
index.html Normal file
View file

@ -0,0 +1,53 @@
<html>
<head>
<link rel="icon" type="image/x-icon" href="./Resources/Favicons/favicon.png">
<link rel="stylesheet" href="./Pages/style.css">
<nav class="fill">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="./Pages/Team.html">Our Team</a></li>
<li><a href="./Pages/Contact.html">Contact</a></li>
<li><a href="./Pages/Sponsors.html">Sponsors</a></li>
<li><a href="./Pages/Resources.html">Resources</a></li>
<li><a href="./Pages/calendar.html">Calendar</a></li>
</ul>
</nav>
</head>
<body>
<div class="logo-container">
<img src="./Resources/Logo Gradient.png" class="logo-image" id="Logo Image" alt="Team 1165 Logo">
</div>
<div class="divider">
<hr>
<h1 style="display: flex; justify-content:center; text-align: center;">Our Story</h1>
<hr>
</div>
<div class="OurStory-Container">
<img src="./Resources/1165Team.png" id="teamImage" alt="Team Picture">
<div style="color:rgb(241,241,241);">
Team Paradise was founded in 2002 as an FRC team. FRC is the FIRST Robotics Competition, empowered by FIRST, an international youth organization that focuses on inspiring young people to be science and technology leaders and innovators. We are based in Phoenix, Arizona at Paradise Valley High School. Our team has been operating for 20 seasons and counting, winning the 2008 and 2009 regionals and winning the Chairman's award in 2017. Winning those allowed our team to go to Houston and compete in the championships, and allowed our team to meet a variety of new people. In our most recent season, 2022, Team Paradise attended both the North Arizona Regional and the Arizona Valley Regional. Our team is very proud of how we finished at the North Arizona Regional as we are still rebuilding from Covid, which took away some of the seniors who couldn't pass on their knowledge to the freshmen and sophomores. Our team has around 30 members, and quite a few adults who help mentor, assist, and run the club.
</div>
</div>
<div class="divider" style="padding-bottom: 50px;">
<hr>
<h1 style="display: flex; justify-content:center; text-align: center;">Our Socials</h1>
<hr>
</div>
<div class="divider">
<img src="./Resources/insta-line.png" style="width:5%;">
<div style="color:rgb(241,241,241)">teamparadise.1165</div>
<div style="width:6%"></div>
<img src="./Resources/tiktok.png" style="width:5%; padding-bottom: 10px;">
<div style="color:rgb(241,241,241)">team.paradise.1165</div>
<div style="width:6%"></div>
<img src="./Resources/snapchat.png" style="width:5%; padding-bottom: 10px;">
<div style="color:rgb(241,241,241)">Team1165</div>
<div style="width:6%"></div>
<img src="./Resources/facebook.png" style="width:5%; padding-bottom: 10px;">
<div style="color:rgb(241,241,241)">Team Paradise</div>
</div>
</body>
</html>