Skip to content

Commit

Permalink
updated pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@zeezaa
zeezaa committed Nov 25, 2023
1 parent b6b7d28 commit f3dc60d
Show file tree
Hide file tree
Showing 3 changed files with 171 additions and 42 deletions.
72 changes: 54 additions & 18 deletions docs/game.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,61 +11,97 @@
<a href="settings">⚙️</a>
</div>
<div class="game">
<div class="profile">
<p class="username">username123</p>
<img class="profile" src="profile.png">
<p class="score">0pts.</p>
</div>
<div class="profile" id="p0">
<p class="username">LocalUser</p>
<img class="pfp" src="profile.png">
<p class="score">0pts.</p>
<div class="cardholder">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
<div class="playcard"></div>
</div>
<div class="profile" id="p1">
<p class="username">username123</p>
<img class="pfp" src="profile.png">
<p class="score">0pts.</p>
<div class="playcard"></div>
</div>
<div class="profile" id="p2">
<p class="username">username123</p>
<img class="pfp" src="profile.png">
<p class="score">0pts.</p>
<div class="playcard"></div>
</div>
<div class="profile" id="p3">
<p class="username">username123</p>
<img class="pfp" src="profile.png">
<p class="score">0pts.</p>
<div class="playcard"></div>
</div>
<div class="profile" id="p4">
<p class="username">username123</p>
<img class="pfp" src="profile.png">
<p class="score">0pts.</p>
<div class="playcard"></div>
</div>
<div class="profile" id="p5">
<p class="username">username123</p>
<img class="pfp" src="profile.png">
<p class="score">0pts.</p>
<div class="playcard"></div>
</div>
</div>
<div class="chatbox">
<div class="chatscroll">
<div class="event">
<img class="image" src="event.png" width="32" height="32">
<p class="user">Username123 happened upon:</p>
<p class="text">Event!</p>
<p class="user"><a class="account">usernamethatis20char</a> happened upon:</p>
<p class="cardname">Event!</p>
</div>
<div class="item">
<img class="image" src="item.png" width="32" height="32">
<p class="user">Username123 threw in:</p>
<p class="text">Item!</p>
<p class="user"><a class="account" id="???">usernamethatis20char</a> threw in:</p>
<p class="cardname">Item!</p>
</div>
<div class="message">
<img class="image" src="message.png" width="32" height="32">
<div>
<p class="user">Username123:</p>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut malesuada rutrum urna sed ullamcorper. Nam eu sapien eget nunc rutrum rhoncus eget molestie felis. Sed venenatis magna ac fermentum scelerisque.</p>
<p class="user"><a class="account">usernamethatis20char</a>:</p>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="message">
<img class="image" src="message.png" width="32" height="32">
<div>
<p class="user">Username123:</p>
<p class="text">Now this is the story all about how, My life got flipped-turned upside down, And I'd like to take a minute, just sit right there, I'll tell you how I became the prince of a town called Bel Air. In West Philadelphia, born and raised On the playground is where I spent most of my days. Chillin' out, maxin', relaxin all cool, And all shootin' some B-ball outside of the school. When...</p><p><a href="">click to show more</a></p>
<p class="user"><a class="account">Username123</a>:</p>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac tincidunt vitae semper quis. Lacinia at quis risus sed vulputate odio. Morbi tincidunt ornare massa eget. Nibh praesent tristique magna sit. Volutpat sed cras ornare arcu dui vivamus arcu felis. Vivamus arcu felis bibendum ut tristique. Justo eget magna fermentum iaculis eu non diam. Nisl suscipit adipiscing bibendum est ultricies integer quis. Eu consequat ac felis done</p>
</div>
</div>
<div class="message">
<img class="image" src="message.png" width="32" height="32">
<div>
<p class="user">Username123:</p>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing</p>
<p class="user"><a class="account">usernamethatis20char</a>:</p>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="message">
<img class="image" src="message.png" width="32" height="32">
<div>
<p class="user">Username123:</p>
<p class="user"><a class="account">Username123</a>:</p>
<p class="text">Now this is the story all about how, My life got flipped-turned upside down, And I'd like to take a minute, just sit right there, I'll tell you how I became the prince of a town called Bel Air. In West Philadelphia, born and raised On the playground is where I spent most of my days. Chillin' out, maxin', relaxin all cool, And all shootin' some B-ball outside of the school. When a couple of guys who were up to no good, Started makin' trouble in my neighborhood. I got in one little fight and my mo</p>
</div>
</div>
<div class="message">
<img class="image" src="message.png" width="32" height="32">
<div>
<p class="user">Username123:</p>
<p class="user"><a class="account">Username123</a>:</p>
<p class="text">Lorem ipsum</p>
</div>
</div>
</div>
<textarea class="textbox" placeholder="Explain here..." maxlength="280" minlength="1"></textarea>
<textarea class="textbox" placeholder="Explain here..." maxlength="500" minlength="1"></textarea>
</div>
<div class="footer">
Created by: <a href="https://zeezaa.me">zeezaa</a>, <a href="https://github.com/jaketzu">Jaketzu</a>
Expand Down
2 changes: 1 addition & 1 deletion docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
<select id="avatarcolor">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">blue</option>
<option value="blue">Blue</option>
</select>
<br><br>
<button id="quick">Quickplay</button>
Expand Down
139 changes: 116 additions & 23 deletions docs/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,16 @@
position: fixed;
left: 0;
top: 0;
height: 2%;
width: 100%;
text-align: center;
padding: 1.5%;
}

a{
cursor: pointer;
}

:link{
color: #4444fc;
}
Expand Down Expand Up @@ -65,24 +70,128 @@

.chatscroll > div {
display: flex;
padding-left: 0.25em;
padding-right: 0.25em;
column-gap: 0.25em;
margin-bottom: 0.25em;
padding: 0.2em;
column-gap: 0.5em;
margin-top: 0.5em;
align-items: center;
}

.event{
background-color: red;
padding: 0.5em;
clip-path: polygon(0 15%, 10% 0, 90% 0, 100% 15%, 100% 85%, 90% 100%, 10% 100%, 0 85%);
webkit-clip-path: polygon(0 15%, 10% 0, 90% 0, 100% 15%, 100% 85%, 90% 100%, 10% 100%, 0 85%);
}

.item{
background-color: blue;
padding: 0.5em;
clip-path: polygon(0 15%, 10% 0, 90% 0, 100% 15%, 100% 85%, 90% 100%, 10% 100%, 0 85%);
webkit-clip-path: polygon(0 15%, 10% 0, 90% 0, 100% 15%, 100% 85%, 90% 100%, 10% 100%, 0 85%);
}

.cardname{
margin-top: 0.2em;
margin-bottom: 0;
}

.message{
flex-basis: 100%;
height: 5.5em;
padding: 0.25em;
}

.text{
overflow: auto;
display: -webkit-box;
line-clamp: 3;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
padding-right: 0.2em;
margin: 0.5em;
}

.user{
margin-left: 0.5em;
margin-top: 0.2em;
margin-bottom: 0;
}

.textbox{
margin: 4%;
height: 8%;
margin-left: 3em;
margin-top: 0.5em;
}

.game{
position: fixed;
top: 8.5%;
bottom: 10%;
left: 0;
right: 30%;
}

.card{}

.profile{

position: absolute;
width: 9em;
height: 7em;
text-align: center;
display: flex;
flex-direction: column;
overflow:hidden;
align-items: center;
background-color: #010101;
clip-path: polygon(0 15%, 10% 0, 90% 0, 100% 15%, 100% 85%, 90% 100%, 10% 100%, 0 85%);
webkit-clip-path: polygon(0 15%, 10% 0, 90% 0, 100% 15%, 100% 85%, 90% 100%, 10% 100%, 0 85%);
}

.profile > *{
margin: 0;
}

#p0{
left: 25%;
bottom: 0%;
}

#p1{
left: 10%;
bottom: 30%;
}

#p2{
left: 20%;
bottom: 70%;
}

#p3{
left: 50%;
bottom: 80%;
}

#p4{
left: 80%;
bottom: 70%;
}

#p5{
left: 90%;
bottom: 30%;
}

.score{
position: absolute;
bottom: 0;
}

.pfp{
width: 5.75em;
height: 5.75em;
}

.account{
color: #7f7fff;
}

@media (prefers-color-scheme: light) {
Expand All @@ -103,14 +212,6 @@
background-color: #FFF;
}

.event{
background-color: red;
}

.item{
background-color: DodgerBlue;
}

.footer {
background-color: #F1F1F1;
}
Expand Down Expand Up @@ -138,14 +239,6 @@
background-color: #333;
}

.event{
background-color: red;
}

.item{
background-color: DodgerBlue;
}

.footer {
background-color: #010101;
}
Expand Down

0 comments on commit f3dc60d

Please sign in to comment.