theme changing

This commit is contained in:
Conkley 2022-07-24 18:06:45 +10:00
parent 93d63df2d8
commit 404d074a3e
5 changed files with 537 additions and 19 deletions

View File

@ -117,7 +117,7 @@ class SettingController extends Controller
public function change_bio(Request $request)
{
$request->validateWithBag('bio_form', [
'bio' => 'required|min:3|max:2000'
'bio' => ['required', 'min:3', 'max:2000'],
]);
$user = Auth::user();
@ -126,4 +126,17 @@ class SettingController extends Controller
return redirect()->back()->with('success', 'Your bio has been updated.');
}
public function change_theme(Request $request)
{
$request->validateWithBag('theme', [
'theme_change' => ['required', 'string', 'in:1,2'],
]);
$userSetting = Auth::user()->settings;
$userSetting->theme = $request->theme_change;
$userSetting->save();
return redirect()->back()->with('theme', 'Your theme has been updated.');
}
}

465
public/css/2018.css Normal file
View File

@ -0,0 +1,465 @@
html {
background: none;
}
body {
background-color: #E3E3E3;
color: #191919;
font-family: "Source Sans Pro",Arial,Helvetica,sans-serif;
font-size: 16px;
width: 100%;
height: 100%;
min-width: 320px;
margin-bottom: 168px;
}
:focus-visible {
outline: 0px;
}
.content_signup, .profilefriend #FeedContainerBox1Username {
color: #191919
}
.content {
background-color: #E3E3E3;
padding-top: 12px;
margin: 40px auto 0;
padding-bottom: 40px;
min-height: calc(100% - 40px);
}
#SearchContainer, #FriendsContainer, #profilefriendcontainer {
background-color: #fff;
box-shadow: 0 1px 4px 0 rgb(25 25 25 / 30%);
padding: 15px;
}
.ProfileContainerBox, .FriendsContainerBox {
border: 0;
}
.smallnavbarbutton {
color: #191919;
display: flex;
margin: 3px;
font-size: 16px;
font-weight: 500;
line-height: 1.92857;
height: 28px;
}
.smallnavbarbutton:nth-child(1):hover, .smallnavbarbutton:nth-child(3):hover, .profilefriend #FeedContainerBox1Username:hover, .smallnavbarbutton:nth-child(4):hover, .smallnavbarbutton:nth-child(5):hover, .smallnavbarbutton:nth-child(6):hover {
color: #00a2ff;
text-decoration: none;
}
.smallnavbarbutton:nth-child(1):hover::before{
background-position: -28px -224px;
}
.smallnavbarbutton:nth-child(1):before {
content: '';
background-image: url(https://images.rbxcdn.com/f4000b6d03a0df7153556d2514045629-navigation_10022018.svg);
background-repeat: no-repeat;
background-size: auto auto;
width: 28px;
height: 28px;
background-position: 0 -224px;
}
.smallnavbarbutton:nth-child(2):hover {
color: #f68802;
text-decoration: none;
}
.smallnavbarbutton:nth-child(2):hover::before{
background-position: -28px -252px;
}
.smallnavbarbutton:nth-child(2):before {
content: '';
background-image: url(https://images.rbxcdn.com/f4000b6d03a0df7153556d2514045629-navigation_10022018.svg);
background-repeat: no-repeat;
background-size: auto auto;
width: 28px;
height: 28px;
background-position: 0 -252px;
}
.smallnavbarbutton:nth-child(3):hover::before{
background-position: -28px -336px;
}
.smallnavbarbutton:nth-child(3):before {
content: '';
background-image: url(https://images.rbxcdn.com/f4000b6d03a0df7153556d2514045629-navigation_10022018.svg);
background-repeat: no-repeat;
background-size: auto auto;
width: 28px;
height: 28px;
background-position: 0 -336px;
}
.smallnavbarbutton:nth-child(4):hover::before{
background-position: -28px -196px;
}
.smallnavbarbutton:nth-child(4):before {
content: '';
background-image: url(https://images.rbxcdn.com/f4000b6d03a0df7153556d2514045629-navigation_10022018.svg);
background-repeat: no-repeat;
background-size: auto auto;
width: 28px;
height: 28px;
background-position: 0 -196px;
}
.smallnavbarbutton:nth-child(5):hover::before{
background-position: -28px -364px;
}
.smallnavbarbutton:nth-child(5):before {
content: '';
background-image: url(https://images.rbxcdn.com/f4000b6d03a0df7153556d2514045629-navigation_10022018.svg);
background-repeat: no-repeat;
background-size: auto auto;
width: 28px;
height: 28px;
background-position: 0px -364px;
}
.smallnavbarbutton:nth-child(6):hover::before{
background-position: -28px -475px;
}
.smallnavbarbutton:nth-child(6):before {
content: '';
background-image: url(https://images.rbxcdn.com/f4000b6d03a0df7153556d2514045629-navigation_10022018.svg);
background-repeat: no-repeat;
background-size: auto auto;
width: 28px;
height: 28px;
background-position: 0 -475px;
}
.smallnavbarbutton:before {
margin-right: 3px;
}
.navbar {
background: #0074bd;
height: 40px;
padding: 0;
top: 0;
position: fixed;
right: 0;
left: 0;
z-index: 1030;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.smallnav {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-ms-transform: none;
position: fixed;
background: #fff;
box-shadow: 0 0 3px rgb(25 25 25 / 30%);
width: 0;
height: calc(100% - 40px);
font-size: 16px;
left: 0;
overflow: hidden;
top: 82px;
z-index: 1001;
display: none;
visibility: hidden;
padding: 0;
}
.smallnavbarbuttoncontainer {
padding: 5px 10px 0;
display: block;
height: calc(100% - 5px);
}
.FeedContainerBox {
border: 0;
}
.FeedContainerBoxImageContainer, #ProfileContainerBox1ImageContainer, #FriendsContainerBox1ImageContainer {
-webkit-transition: box-shadow 200ms ease;
-o-transition: box-shadow 200ms ease;
transition: box-shadow 200ms ease;
margin: 5px 24px 5px 5px;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 1px 4px 0 rgb(25 25 25 / 30%);
height: 60px;
width: 60px;
}
.FeedContainerBoxImageContainer:hover, #ProfileContainerBox1ImageContainer:hover, #FriendsContainerBox1ImageContainer:hover, .profilefriend img:hover, .profilefriend:hover img {
-webkit-transition: box-shadow 200ms ease;
-o-transition: box-shadow 200ms ease;
transition: box-shadow 200ms ease;
box-shadow: 0 1px 6px 0 rgb(25 25 25 / 75%);
}
.profilefriend #FeedContainerBox1Username {
display: block;
margin: 3px 0 0;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#gamesframe {
padding: 0
}
.profilefriend img {
-webkit-transition: box-shadow 200ms ease;
-o-transition: box-shadow 200ms ease;
transition: box-shadow 200ms ease;
width: 90px;
height: 90px;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 1px 4px 0 rgb(25 25 25 / 30%);
}
#logo_small, #logo_full {
max-width: 76px;
width: auto;
margin: 0 12px;
padding: 0;
float: left;
}
#logo_small img {
padding: 5px 0;
width: 30px;
height: 30px;
}
#logo_full img {
padding: 5px 0;
max-width: 120px;
height: 30px;
}
.navbarbuttoncontainer {
width: 25%;
display: flex;
padding: 0;
}
.navbarbutton {
color: #fff;
padding: 6px 9px;
width: auto;
font-size: 16px;
line-height: 1.4em;
font-weight: 400;
position: relative;
display: block;
float: left;
margin: 4px auto;
top: 0;
}
.navbarbutton:hover {
background-color: #191919;
background-color: rgba(25,25,25,.1);
border-radius: 5px;
text-decoration: none;
}
#FeedBox {
border: 1px solid #B8B8B8;
color: #191919;
font-weight: 300;
font-size: 16px;
padding: 5px 12px;
border-radius: 3px;
}
#FeedBox:focus {
box-shadow: none;
border-color: #00A2FF;
}
#feed {
background-color: #fff;
box-shadow: 0 1px 4px 0 rgb(25 25 25 / 30%);
padding: 15px;
margin-right: 10px;
}
#feed h2 {
text-align: left;
font-size: 24px;
font-weight: 300;
}
#footer, #footer_signup {
padding: 12px;
background-color: #fff;
position: relative;
bottom: 0;
right: 0;
max-width: 100%;
}
#footer p, #footer a:nth-child(2), #footer_signup p, #footer_signup a:nth-child(2) {
color: #b8b8b8;
}
#footer a:nth-child(2):hover, #footer a:nth-child(2):focus, #footer_signup a:nth-child(2):hover, #footer_signup a:nth-child(2):focus {
color: #191919;
}
#footer a:nth-child(1), #footer_signup a:nth-child(1) {
color: #00a2ff;
}
#footer a:nth-child(1):hover, #footer_signup a:nth-child(1):hover {
text-decoration: underline;
}
#footer p, #footer a {
max-width: 970px;
text-align: center;
margin: 0 auto;
}
button.bluebutton, .tab_selected {
border: 1px solid transparent;
background: #00A2FF;
border-color: #00A2FF;
-webkit-transition: box-shadow 200ms ease-in-out;
-o-transition: box-shadow 200ms ease-in-out;
transition: box-shadow 200ms ease-in-out;
border-radius: 3px;
}
button.bluebutton:hover, button.bluebutton:focus, .tab_selected:hover, .tab_selected:focus {
background: #32B5FF;
box-shadow: 0 1px 3px rgb(150 150 150 / 74%);
border-color: #32B5FF;
color: #fff;
text-decoration: none
}
button.greybutton, .tab {
-webkit-transition: box-shadow 200ms ease-in-out;
-o-transition: box-shadow 200ms ease-in-out;
transition: box-shadow 200ms ease-in-out;
border: 1px solid transparent;
background: #fff;
border-color: #B8B8B8;
color: #191919 !important;
border-radius: 3px;
}
button.greybutton:hover, button.greybutton:focus, .tab:hover, .tab:focus {
background: #fff;
box-shadow: 0 1px 3px rgb(150 150 150 / 74%);
border-color: #B8B8B8;
color: #191919;
text-decoration: none
}
button.redbutton {
transition: box-shadow 200ms ease-in-out;
border: 1px solid transparent;
background: #D86868;
border-color: #D86868;
color: #fff;
border-radius: 3px;
}
button.redbutton:hover, button.redbutton:focus {
background: #E27676;
box-shadow: 0 1px 3px rgb(150 150 150 / 74%);
border-color: #E27676;
}
button.greenbutton {
-webkit-transition: box-shadow 200ms ease-in-out;
-o-transition: box-shadow 200ms ease-in-out;
transition: box-shadow 200ms ease-in-out;
border: 1px solid transparent;
background: #02b757;
border-color: #02b757;
border-radius: 3px;
}
button.greenbutton:hover, button.greenbutton:focus {
background: #3FC679;
box-shadow: 0 1px 3px rgb(150 150 150 / 74%);
border-color: #3FC679;
}
div[style="color:white;background-color:green;text-align:center;margin-top:72px"] {
background-color: #02b757 !important
}
p[style="color: darkred;"], .important {
color: #D86868 !important;
}
a, .content a, .content_signup p a {
color: #00A2FF
}
a:hover, .content_signup p a:hover {
text-decoration: underline;
}
textarea, input {
background-color: #fff;
border: 1px solid #b8b8b8;
color: #191919;
border-radius: 3px
}
textarea:focus, input:focus {
border-color: #00A2FF
}
#navbarsignedincontainer p a {
color: #fff
}
button:hover a {
text-decoration: none;
}
.onlinestatus_website {
color: #00A2FF;
}
.onlinestatus_studio {
color: #F68802;
}
.onlinestatus_ingame {
color: #02b757;
}
.onlinestatus_offline {
color: #b8b8b8;
}
iframe {
height: calc(100% - 104px);
padding-bottom: 40px
}
@media (max-width: 970px) {
.navbarbuttoncontainer a {
font-size: 16px;
top: 0px;
}
}
@media (min-width: 992px) {
.navbar {
height: 40px;
}
.smallnav {
top: 40px;
}
}
@media (max-width: 767px) {
.navbarbuttoncontainer a {
font-size: 12px;
line-height: 1.9em;
top: 0px;
}
}
@media (max-width: 560px) {
.navbarbuttoncontainer a {
font-size: 10px;
line-height: 2.2em;
top: 0px;
}
}
@media (min-width: 1688px) {
.smallnav {
width: 175px;
display: block;
visibility: visible;
}
#logo_full {
max-width: 200px;
}
}

View File

@ -16,14 +16,26 @@
<link rel="apple-touch-startup-image" href="{{ asset('img/MORBLOXsplash.png') }}" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}">
<link href="{{ asset('css/app.css?id=e5Az527Gb1') }}" rel="stylesheet">
@auth
@switch (Auth::user()->settings->theme)
@case(2)
<link href="{{ asset('css/app.css?id=e5Az527Gb1') }}" rel="stylesheet">
<link href="{{ asset('css/2018.css?id=e5Az527Gb1') }}" rel="stylesheet">
@break
@default
<link href="{{ asset('css/app.css?id=e5Az527Gb1') }}" rel="stylesheet">
@endswitch
@else
<link href="{{ asset('css/app.css?id=e5Az527Gb1') }}" rel="stylesheet">
@endauth
@yield('extras')
</head>
<body>
<div class="navbar">
<a id="logo_full" href="{{ route('home') }}"><img alt="ARCHBLOX Logo"
src="{{ asset('img/MORBLOXlogo.png') }}" width="200" height="40" /></a>
<a id="logo_full" href="{{ route('home') }}"><img alt="ARCHBLOX Logo" src="{{ asset('img/MORBLOXlogo.png') }}"
width="200" height="40" /></a>
<a id="logo_small" href="{{ route('home') }}"><img alt="ARCHBLOX Logo"
src="{{ asset('img/MORBLOXlogoshort.png') }}" width="45" height="40" /></a>
<div class="navbarbuttoncontainer">
@ -42,8 +54,7 @@
</div>
@else
<div id="navbarsignedincontainer">
<p class="nonbolded" id="navbarusername">{{ Auth::user()->name }} | <a
href="{{ route('logout') }}"
<p class="nonbolded" id="navbarusername">{{ Auth::user()->name }} | <a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">Log
out...</a></p>
@ -56,10 +67,17 @@
</div>
<div class="smallnav">
<div class="smallnavbarbuttoncontainer">
<a class="smallnavbarbutton" href="{{ route('friends') }}">Friends @if (!Auth::guest() && count(Auth::user()->getFriendRequests())) <span class="warningtext">({{ count(Auth::user()->getFriendRequests()) }})</span> @endif</a>
<a class="smallnavbarbutton" href="{{ route('friends') }}">Friends @if (!Auth::guest() && count(Auth::user()->getFriendRequests()))
<span class="warningtext">({{ count(Auth::user()->getFriendRequests()) }})</span>
@endif
</a>
<a class="smallnavbarbutton" href="{{ route('incomplete') }}">Avatar</a>
<a class="smallnavbarbutton" href="{{ route('users') }}">Users</a>
<a class="smallnavbarbutton" href="{{ route('inbox') }}">Messages @if (!Auth::guest() && App\Models\Message::where(['sendto_id' => Auth::id(), 'read' => false])->count()) <span class="warningtext">({{ App\Models\Message::where(['sendto_id' => Auth::id(), 'read' => false])->count() }})</span> @endif</a>
<a class="smallnavbarbutton" href="{{ route('inbox') }}">Messages @if (!Auth::guest() && App\Models\Message::where(['sendto_id' => Auth::id(), 'read' => false])->count())
<span
class="warningtext">({{ App\Models\Message::where(['sendto_id' => Auth::id(), 'read' => false])->count() }})</span>
@endif
</a>
<a class="smallnavbarbutton" href="{{ route('blog') }}">Blog</a>
@if (!Auth::guest() && Auth::user()->isAdmin())
<a class="smallnavbarbutton" href="{{ route('admin_index') }}">Admin</a>
@ -75,7 +93,8 @@
@yield('content')
</div>
<div id="footer">
<p>ARCHBLOX is not affiliated with Roblox Corp, Lego, Sony, SEGA, Microsoft, Nintendo or any other company. We're still Morbin'!</p>
<p>ARCHBLOX is not affiliated with Roblox Corp, Lego, Sony, SEGA, Microsoft, Nintendo or any other company.
We're still Morbin'!</p>
<p><a href="{{ route('privacy') }}">Privacy Policy</a> <a href="{{ route('tos') }}">Terms of Service</a>
</p>
</div>

View File

@ -6,6 +6,10 @@
.bio_form {
width: 50%
}
.theme_form {
width: 100%
}
</style>
@endsection
@section('titlediscord')
@ -93,7 +97,9 @@
<div id="alert">{{ $errors->first() }}</div>
@endif
@if (session()->has('change'))
<div id="alert" style="background:linear-gradient(0deg,#02b757 0%,#118237 49%,#01a64e 50%,#3fc679 95%,#a3e2bd 100%)">{{ session()->get('change') }}
<div id="alert"
style="background:linear-gradient(0deg,#02b757 0%,#118237 49%,#01a64e 50%,#3fc679 95%,#a3e2bd 100%)">
{{ session()->get('change') }}
</div>
@endif
@endsection
@ -165,16 +171,30 @@
<div class="content_special"
style="flex-wrap: wrap; flex-direction: column; width: 50%; text-align: end; align-content: center;">
<h3>Theme</h3>
<p>Selected Theme: SKEUOMORPHIC</p>
<div class="content_special" style="width: 100%; flex-wrap: nowrap;">
<div class="custom-select" style="width: 90%;">
<select name="Theme" style="width: 100%;">
<option value="ARCHBLOX">ARCHBLOX</option>
<option value="2018">2018</option>
</select>
<p>Selected Theme: @php
switch (Auth::user()->settings->theme) {
case 2:
echo '2018';
break;
default:
echo 'ARCHBLOX';
}
@endphp</p>
<form action="{{ route('change_theme') }}" method="POST" class="theme_form">
@csrf
<div class="content_special" style="width: 100%; flex-wrap: nowrap;">
<div class="custom-select" style="width: 90%;">
<select name="theme_change" style="width: 100%;">
<option value="1">ARCHBLOX</option>
<option value="2">2018</option>
</select>
</div>
<button style="width: max-content;" class="greenbutton" type="submit">Save</button>
</div>
<button style="width: max-content;" class="greenbutton">Save</button>
</div>
</form>
@if (session()->has('theme'))
<span style="color:green">{{ session()->get('theme') }}</span>
@endif
</div>
</div>
<br>

View File

@ -43,6 +43,7 @@ Route::middleware(['auth'])->group(function () {
Route::get('/my/settings', [App\Http\Controllers\SettingController::class, 'settings'])->name('settings');
Route::post('/my/settings', [App\Http\Controllers\SettingController::class, 'change_bio'])->name('change_bio');
Route::post('/my/settings/change', [App\Http\Controllers\SettingController::class, 'change_settings'])->name('change_settings');
Route::post('/my/settings/theme', [App\Http\Controllers\SettingController::class, 'change_theme'])->name('change_theme');
Route::get('/my/invites', [App\Http\Controllers\KeyController::class, 'index'])->name('key_index');
Route::post('/my/invites', [App\Http\Controllers\KeyController::class, 'create'])->name('key_create');