profile styles
This commit is contained in:
red
parent
53097e69bd
commit
2881b4ff4f
|
|
@ -84,88 +84,424 @@ $cancelEditingSubmission = function () {
|
|||
|
||||
<div>
|
||||
@if($participant)
|
||||
You are...
|
||||
{{ $participant->id }}
|
||||
@if($userData)
|
||||
<img src="{{ $userData['data']['profile_image_url'] ?? '' }}">
|
||||
<h1> {{ $userData['data']['username'] ?? 'Unknown' }}</h1>
|
||||
<div class="user-profile">
|
||||
<div class="avatar-container">
|
||||
<img src="{{ $userData['data']['profile_image_url'] ?? '' }}" alt="Profile Avatar">
|
||||
</div>
|
||||
<div class="username-container">
|
||||
You are... <h1 style="margin-bottom:0;padding:0"> @{{ $userData['data']['username'] ?? 'Unknown' }}</h1>
|
||||
<small style="color:rgba(255,255,255,0.5);">your password is {{$token}}</small>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@endif
|
||||
<hr>
|
||||
|
||||
@if($isEditingPrompt)
|
||||
<form wire:submit="saveEditingPrompt">
|
||||
<input type="text" id="prompt" wire:model="prompt">
|
||||
<div class="other-content">
|
||||
<div style="margin-bottom: 15pt;">
|
||||
Your prompt is...
|
||||
<br>
|
||||
</div>
|
||||
<div>
|
||||
<form wire:submit="saveEditingPrompt">
|
||||
<input type="text" id="prompt" wire:model="prompt">
|
||||
|
||||
@error('prompt')
|
||||
<span class="error">{{ $message }}</span>
|
||||
@enderror
|
||||
|
||||
<button type="submit">Save</button>
|
||||
|
||||
<button type="button" wire:click="cancelEditingPrompt">Cancel</button>
|
||||
</form>
|
||||
@error('prompt')
|
||||
<span class="error">{{ $message }}</span>
|
||||
@enderror
|
||||
<br><br>
|
||||
<button type="submit">Save</button>
|
||||
<button type="button" wire:click="cancelEditingPrompt">Cancel</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
<div class="prompt-display">
|
||||
<p>
|
||||
Your prompt is: {{ $prompt ?: 'No prompt set yet.' }}
|
||||
</p>
|
||||
<div class="other-content">
|
||||
<div>
|
||||
Your prompt is...
|
||||
</div>
|
||||
<div>
|
||||
<h2>
|
||||
"{{ $prompt ?: 'No prompt set yet.' }}"
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<button wire:click="$set('isEditingPrompt', true)">
|
||||
{{ $prompt ? 'Edit Prompt' : 'Add Prompt' }}
|
||||
</button>
|
||||
<div>
|
||||
<br>
|
||||
<small style="color:rgba(255,255,255,0.5)">this is what others will draw for you!</small>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<hr>
|
||||
<div class="other-content">
|
||||
@if($participant->giving_id)
|
||||
You are giving to...
|
||||
@if($receiverUserData)
|
||||
<div class="user-profile">
|
||||
<div class="avatar-container">
|
||||
<img src="{{ $receiverUserData['data']['profile_image_url'] ?? '' }}" alt="Profile Avatar">
|
||||
</div>
|
||||
<div class="username-container">
|
||||
<h1> @{{ $receiverUserData['data']['username'] ?? 'Unknown' }}</h1>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
<small style="color:rgba(255,255,255,0.5)">want to roll for a different person e.g. you blocked this person? you can dm @username</small>
|
||||
<br><br>Their prompt is...
|
||||
<div class="other-content">
|
||||
{{$receiverPrompt}} Nothing yet, probably!
|
||||
</div>
|
||||
</div>
|
||||
<div class="other-content">
|
||||
<h2> Are you done? </h2>
|
||||
<p>You will be able to link to your gift below once submissions are accepted on 22nd December.</p>
|
||||
<small style="color:rgba(255,255,255,0.5)">submissions will be accepted up until 10th of january</small>
|
||||
|
||||
@if($participant->giving_id)
|
||||
You are giving to <p>{{ $participant->giving_id }}</p>
|
||||
@if($receiverUserData)
|
||||
<img src="{{ $receiverUserData['data']['profile_image_url'] ?? '' }}">
|
||||
<h1> {{ $receiverUserData['data']['username'] ?? 'Unknown' }}</h1>
|
||||
@endif
|
||||
Their prompt is... {{$receiverPrompt}}
|
||||
{{-- @if($isEditingSubmission)--}}
|
||||
{{-- <form wire:submit="saveEditingSubmission">--}}
|
||||
{{-- <input type="text" id="submissionUrl" wire:model="submissionUrl">--}}
|
||||
|
||||
<p> Are you done? Link to your post below </p>
|
||||
@if($isEditingSubmission)
|
||||
<form wire:submit="saveEditingSubmission">
|
||||
<input type="text" id="submissionUrl" wire:model="submissionUrl">
|
||||
{{-- @error('submissionUrl')--}}
|
||||
{{-- <span class="error">{{ $message }}</span>--}}
|
||||
{{-- @enderror--}}
|
||||
|
||||
@error('submissionUrl')
|
||||
<span class="error">{{ $message }}</span>
|
||||
@enderror
|
||||
{{-- <button type="submit">Save</button>--}}
|
||||
|
||||
<button type="submit">Save</button>
|
||||
{{-- <button type="button" wire:click="cancelEditingSubmission">Cancel</button>--}}
|
||||
{{-- </form>--}}
|
||||
{{-- @else--}}
|
||||
{{-- <div class="submissionUrl-display">--}}
|
||||
{{-- <p>--}}
|
||||
{{-- Your submission URL is: <span--}}
|
||||
{{-- id="submissionUrl">{{ $submissionUrl ?: 'No submission sent yet.' }}</span>--}}
|
||||
{{-- </p>--}}
|
||||
|
||||
<button type="button" wire:click="cancelEditingSubmission">Cancel</button>
|
||||
</form>
|
||||
{{-- <button wire:click="$set('isEditingSubmission', true)">--}}
|
||||
{{-- {{ $submissionUrl ? 'Edit Submission URL' : 'Add Submission URL' }}--}}
|
||||
{{-- </button>--}}
|
||||
{{-- </div>--}}
|
||||
{{-- @endif--}}
|
||||
{{-- @if($submissionData)--}}
|
||||
{{-- <h1>Your submission:</h1>--}}
|
||||
{{-- <div id="postView">--}}
|
||||
{{-- <a href="{{$submissionUrl}}">--}}
|
||||
{{-- <h1>{{$submissionData['post']['title']}}</h1>--}}
|
||||
{{-- <img src="{{$submissionData['post']['resource_url']}}">--}}
|
||||
{{-- </a>--}}
|
||||
{{-- </div>--}}
|
||||
{{-- @endif--}}
|
||||
@elseif($participant->desperate)
|
||||
<p>You're in a bind!</p>
|
||||
@else
|
||||
<div class="submissionUrl-display">
|
||||
<p>
|
||||
Your submission URL is: <span
|
||||
id="submissionUrl">{{ $submissionUrl ?: 'No submission sent yet.' }}</span>
|
||||
</p>
|
||||
|
||||
<button wire:click="$set('isEditingSubmission', true)">
|
||||
{{ $submissionUrl ? 'Edit Submission URL' : 'Add Submission URL' }}
|
||||
</button>
|
||||
</div>
|
||||
<p>You haven't been assigned anyone.</p>
|
||||
@endif
|
||||
<hr>
|
||||
@if($submissionData)
|
||||
<h1>Your submission:</h1>
|
||||
<div id="postView">
|
||||
<a href="{{$submissionUrl}}">
|
||||
<h1>{{$submissionData['post']['title']}}</h1>
|
||||
<img src="{{$submissionData['post']['resource_url']}}">
|
||||
</a>
|
||||
</div>
|
||||
@endif
|
||||
@elseif($participant->desperate)
|
||||
<p>You're in a bind!</p>
|
||||
@else
|
||||
<p>You haven't been assigned anyone.</p>
|
||||
@endif
|
||||
|
||||
</div>
|
||||
<a
|
||||
href="/withdraw"
|
||||
>
|
||||
Withdraw from Secret Sketchers...
|
||||
</a>
|
||||
@endif
|
||||
|
||||
<style>
|
||||
.user-profile {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
background-color: rgba(0,0,0,0.3);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
max-width: 100%;
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
.other-content {
|
||||
display: block;
|
||||
padding: 15px;
|
||||
background-color: rgba(0,0,0,0.3);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
max-width: 100%;
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
/* Add spacing below the main prompt text */
|
||||
.prompt-content {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* Reset H2 margin for better spacing */
|
||||
.prompt-content h2 {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
margin-right: 15px;
|
||||
background-color: #ccc;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.avatar-container img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.username-container {
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.username-container h1 {
|
||||
margin: 0;
|
||||
font-size: 1.2em;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #222;
|
||||
margin: 10pt;
|
||||
font-family: sans-serif;
|
||||
color: white;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#viewer {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: #222;
|
||||
background-image: url("image/su.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 400px;
|
||||
background-position: center;
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
.r6o-editor {
|
||||
z-index: 3;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.r6o-widget.comment {
|
||||
font-size: 1.5em;
|
||||
background-color: #333
|
||||
}
|
||||
|
||||
.r6o-editor .r6o-arrow:after {
|
||||
background-color: #333;
|
||||
border: 3px white solid;
|
||||
}
|
||||
|
||||
.r6o-editor .r6o-editor-inner .r6o-widget {
|
||||
border: 3px white solid;
|
||||
}
|
||||
|
||||
.r6o-editor .r6o-editor-inner {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.r6o-footer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div {
|
||||
color: white;
|
||||
}
|
||||
|
||||
a {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#here-now {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
font-size: 1.5vh;
|
||||
color: white;
|
||||
padding: 15px;
|
||||
z-index: 2;
|
||||
background-color:#333;
|
||||
border-radius: 1rem;
|
||||
border: 3px solid white;
|
||||
margin: 5pt;
|
||||
}
|
||||
|
||||
#question {
|
||||
font-size: 3vh;
|
||||
width: 3vh;
|
||||
height: 3vh;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
border: 3px solid white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
#question img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#modal-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#banner {
|
||||
max-width: 100%;
|
||||
}
|
||||
#modal {
|
||||
display: none;
|
||||
font-size: 18pt;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
justify-content: center;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 0 10px 10px #000;
|
||||
background-color: #333;
|
||||
align-items: center;
|
||||
z-index: 4;
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#modal-content {
|
||||
position: relative;
|
||||
padding: 33px;
|
||||
text-align: center;
|
||||
max-height: 100%;
|
||||
font-size: 15pt;
|
||||
}
|
||||
|
||||
@keyframes animateBg {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 100% 0;
|
||||
}
|
||||
}
|
||||
|
||||
.rainbow {
|
||||
background: linear-gradient(90deg, #f1672b, #fea419, #efd515, #89d842, #35c2f9, #9b5fe0, #ff68cf, #f1672b, #fea419, #efd515, #89d842, #35c2f9, #9b5fe0, #ff68cf, #f1672b, #fea419, #efd515, #89d842, #35c2f9, #9b5fe0, #ff68cf, #f1672b);
|
||||
background-size: 300% 100%;
|
||||
-webkit-background-clip: text;
|
||||
animation: animateBg 5s infinite linear;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
display:flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.profileimg {
|
||||
flex: 0 0 20%; /* 10% of the container's width, not flexible, not growing, not shrinking */
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.profileimg img {
|
||||
width: 100%; /* Make sure the image fills its container */
|
||||
height: auto; /* Maintain aspect ratio */
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.profile {
|
||||
flex: 1; /* Take up remaining space */
|
||||
padding-left: 1rem; /* Add some space between image and text */
|
||||
}
|
||||
|
||||
#close-button {
|
||||
position: absolute;
|
||||
font-size: 3rem;
|
||||
top: 15px;
|
||||
right: 30px;
|
||||
cursor: pointer;
|
||||
width: 3vh;
|
||||
height: 3vh;
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
border: 3px solid white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
#open-button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#mobile-banner {
|
||||
display:none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1081px) and (-webkit-min-device-pixel-ratio: 2) {
|
||||
#viewer {
|
||||
width: 100vw;
|
||||
height: 66vh;
|
||||
border-bottom: 3px white solid;
|
||||
}
|
||||
#modal-content {
|
||||
font-size: 20pt;
|
||||
}
|
||||
|
||||
#container {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#mobile-banner {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
height: 27vh;
|
||||
overflow: hidden;
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
#mobile-banner img {
|
||||
max-width: 90%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
}</style>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue