update catalog and games page

This commit is contained in:
Thomas G 2022-09-03 12:27:04 +10:00
parent 3d8b62843d
commit 05a15d9c75
4 changed files with 155 additions and 8 deletions

View File

@ -17,7 +17,7 @@
} }
100% { 100% {
background-position-x: 61px; background-position-x: 60px;
animation-timing-function: linear; animation-timing-function: linear;
} }
} }
@ -82,7 +82,7 @@
animation-iteration-count: 1; animation-iteration-count: 1;
position: fixed; position: fixed;
z-index: 10; z-index: 10;
top: 62px; top: 60px;
padding-top: 2px; padding-top: 2px;
padding-bottom: 2px; padding-bottom: 2px;
padding-right: 5px; padding-right: 5px;
@ -185,11 +185,26 @@
background-image: url("/img/gamethumbnails/1_1.png"); background-image: url("/img/gamethumbnails/1_1.png");
background-size: cover; background-size: cover;
border-width: 0px; border-width: 0px;
width: 100%; width: 190.8px;
background-repeat: no-repeat; background-repeat: no-repeat;
height: 130px; height: 130px;
} }
.gameitem {
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
}
.PageTitleBar {
display: inline-flex;
width: 100%;
align-items: center;
align-content: center;
justify-content: space-between;
flex-wrap: nowrap;
}
.popup { .popup {
color: #000000; color: #000000;
text-align: center; text-align: center;
@ -604,6 +619,7 @@ body {
.content_special, .content_special,
#content_special { #content_special {
display: inline-flex; display: inline-flex;
overflow: hidden;
width: 100%; width: 100%;
flex-direction: row; flex-direction: row;
align-items: flex-start; align-items: flex-start;

View File

@ -144,6 +144,7 @@ button:hover.greybutton {
button.bluebutton { button.bluebutton {
background: #01639c; background: #01639c;
color: rgb(255, 255, 255);
background: linear-gradient(180deg, #00a2ff 0%, #01639c 100%) background: linear-gradient(180deg, #00a2ff 0%, #01639c 100%)
} }
@ -153,6 +154,7 @@ button:hover.bluebutton {
button.redbutton { button.redbutton {
background: #e42424; background: #e42424;
color: rgb(255, 255, 255);
background: linear-gradient(180deg, #d86868 0%, #e42424 100%); background: linear-gradient(180deg, #d86868 0%, #e42424 100%);
} }
@ -162,6 +164,7 @@ button:hover.redbutton {
button.greenbutton { button.greenbutton {
background: #1a5c2e; background: #1a5c2e;
color: rgb(255, 255, 255);
background: linear-gradient(180deg, #02b757 0%, #1a5c2e 100%); background: linear-gradient(180deg, #02b757 0%, #1a5c2e 100%);
} }
@ -169,6 +172,11 @@ button:hover.greenbutton {
background: linear-gradient(0deg, #02b757 0%, #1a5c2e 100%); background: linear-gradient(0deg, #02b757 0%, #1a5c2e 100%);
} }
button {
color:rgb(0, 0, 0)
}
.popup { .popup {
color: white; color: white;
background: black; background: black;

View File

@ -9,13 +9,83 @@
<meta content="ARCHBLOX is a work in progress revival." property="og:description" /> <meta content="ARCHBLOX is a work in progress revival." property="og:description" />
@endsection @endsection
@section('alert')
<div id="alert">The catalog is currently work in progress.</div>
@endsection
@section('content') @section('content')
<h1>Catalog</h1> <div class="PageTitleBar">
<div class="content_special" style="flex-wrap: wrap; justify-content: flex-start"> <h1>Catalog</h1>
<div>
<input type="text" placeholder="Search" title="Search Catalog Items Box">
<button style="height: 22px;" class="greybutton">Search</button>
</div>
</div>
<div class="content_special">
<div class="content_special" style="width: 15%;flex-wrap: wrap; justify-content: flex-start">
<p>Sidebar</p>
</div>
<div class="content_special" style="width: 85%;flex-wrap: wrap; justify-content: flex-start">
<div class="catalogitem">
<img class="catalogitemimage" src="{{ asset('img/reviewpending.png') }}">
<p>Item Name</p>
<strong><img class="arkoticon_small" src="{{ asset('img/arkot.png') }}">10</strong>
</div>
<div class="catalogitem">
<img class="catalogitemimage" src="{{ asset('img/reviewpending.png') }}">
<p>Item Name</p>
<strong><img class="arkoticon_small" src="{{ asset('img/arkot.png') }}">10</strong>
</div>
<div class="catalogitem">
<img class="catalogitemimage" src="{{ asset('img/reviewpending.png') }}">
<p>Item Name</p>
<strong><img class="arkoticon_small" src="{{ asset('img/arkot.png') }}">10</strong>
</div>
<div class="catalogitem">
<img class="catalogitemimage" src="{{ asset('img/reviewpending.png') }}">
<p>Item Name</p>
<strong><img class="arkoticon_small" src="{{ asset('img/arkot.png') }}">10</strong>
</div>
<div class="catalogitem">
<img class="catalogitemimage" src="{{ asset('img/reviewpending.png') }}">
<p>Item Name</p>
<strong><img class="arkoticon_small" src="{{ asset('img/arkot.png') }}">10</strong>
</div>
<div class="catalogitem">
<img class="catalogitemimage" src="{{ asset('img/reviewpending.png') }}">
<p>Item Name</p>
<strong><img class="arkoticon_small" src="{{ asset('img/arkot.png') }}">10</strong>
</div>
<div class="catalogitem">
<img class="catalogitemimage" src="{{ asset('img/reviewpending.png') }}">
<p>Item Name</p>
<strong><img class="arkoticon_small" src="{{ asset('img/arkot.png') }}">10</strong>
</div>
<div class="catalogitem">
<img class="catalogitemimage" src="{{ asset('img/reviewpending.png') }}">
<p>Item Name</p>
<strong><img class="arkoticon_small" src="{{ asset('img/arkot.png') }}">10</strong>
</div>
<div class="catalogitem">
<img class="catalogitemimage" src="{{ asset('img/reviewpending.png') }}">
<p>Item Name</p>
<strong><img class="arkoticon_small" src="{{ asset('img/arkot.png') }}">10</strong>
</div>
<div class="catalogitem">
<img class="catalogitemimage" src="{{ asset('img/reviewpending.png') }}">
<p>Item Name</p>
<strong><img class="arkoticon_small" src="{{ asset('img/arkot.png') }}">10</strong>
</div>
<div class="catalogitem">
<img class="catalogitemimage" src="{{ asset('img/reviewpending.png') }}">
<p>Item Name</p>
<strong><img class="arkoticon_small" src="{{ asset('img/arkot.png') }}">10</strong>
</div>
<div class="catalogitem"> <div class="catalogitem">
<img class="catalogitemimage" src="{{ asset('img/reviewpending.png') }}"> <img class="catalogitemimage" src="{{ asset('img/reviewpending.png') }}">
<p>Item Name</p> <p>Item Name</p>
<strong><img class="arkoticon_small" src="{{ asset('img/arkot.png') }}">10</strong> <strong><img class="arkoticon_small" src="{{ asset('img/arkot.png') }}">10</strong>
</div> </div>
</div> </div>
</div>
@endsection @endsection

View File

@ -14,13 +14,66 @@
@endsection @endsection
@section('content') @section('content')
<h1>Games</h1> <div class="PageTitleBar">
<br> <h1>Games</h1>
<div class="content_special" style="flex-wrap: wrap; justify-content: space-around;">
<div> <div>
<input type="text" placeholder="Search" title="Search Catalog Items Box">
<button style="height: 22px;" class="greybutton">Search</button>
</div>
</div>
<div class="content_special">
<div class="content_special" style="width: 15%;flex-wrap: wrap; justify-content: flex-start">
<p>Sidebar</p>
</div>
<div class="content_special" style="width: 85%;flex-wrap: wrap; justify-content: flex-start">
<div class="gameitem">
<a href="{{ route('gamepage')}}"><img class="gamethumbnail_small"></a> <a href="{{ route('gamepage')}}"><img class="gamethumbnail_small"></a>
<br>
<a href="{{ route('gamepage')}}">Natural Disaster Survival</a> <a href="{{ route('gamepage')}}">Natural Disaster Survival</a>
<p>By <a href="{{ route('profile', 1) }}">ARCHBLOX</a></p> <p>By <a href="{{ route('profile', 1) }}">ARCHBLOX</a></p>
</div> </div>
<div class="gameitem">
<a href="#"><img style="background-image: url(/img/reviewpending.png);" class="gamethumbnail_small"></a>
<br>
<a href="#">PLACEHOLDER</a>
<p>By <a href="{{ route('profile', 1) }}">ARCHBLOX</a></p>
</div>
<div class="gameitem">
<a href="#"><img style="background-image: url(/img/reviewpending.png);" class="gamethumbnail_small"></a>
<br>
<a href="#">PLACEHOLDER</a>
<p>By <a href="{{ route('profile', 1) }}">ARCHBLOX</a></p>
</div>
<div class="gameitem">
<a href="#"><img style="background-image: url(/img/reviewpending.png);" class="gamethumbnail_small"></a>
<br>
<a href="#">PLACEHOLDER</a>
<p>By <a href="{{ route('profile', 1) }}">ARCHBLOX</a></p>
</div>
<div class="gameitem">
<a href="#"><img style="background-image: url(/img/reviewpending.png);" class="gamethumbnail_small"></a>
<br>
<a href="#">PLACEHOLDER</a>
<p>By <a href="{{ route('profile', 1) }}">ARCHBLOX</a></p>
</div>
<div class="gameitem">
<a href="#"><img style="background-image: url(/img/reviewpending.png);" class="gamethumbnail_small"></a>
<br>
<a href="#">PLACEHOLDER</a>
<p>By <a href="{{ route('profile', 1) }}">ARCHBLOX</a></p>
</div>
<div class="gameitem">
<a href="#"><img style="background-image: url(/img/reviewpending.png);" class="gamethumbnail_small"></a>
<br>
<a href="#">PLACEHOLDER</a>
<p>By <a href="{{ route('profile', 1) }}">ARCHBLOX</a></p>
</div>
<div class="gameitem">
<a href="#"><img style="background-image: url(/img/reviewpending.png);" class="gamethumbnail_small"></a>
<br>
<a href="#">PLACEHOLDER</a>
<p>By <a href="{{ route('profile', 1) }}">ARCHBLOX</a></p>
</div>
</div>
</div> </div>
@endsection @endsection