Edited the UI

This commit is contained in:
yash 2024-07-15 17:36:26 +05:30
parent cdf9a0cd52
commit 8658ca5ca1
4 changed files with 92 additions and 402 deletions

View File

@ -22,7 +22,7 @@
</style> </style>
</head> </head>
<body style="background-color: white"> <body class="bg-purple-100">
<nav class="bg-white p-4 shadow-md"> <nav class="bg-white p-4 shadow-md">
<div class="mx-auto flex justify-between"> <div class="mx-auto flex justify-between">
<a href="{{ url('/') }}" class="text-purple-600 text-3xl font-bold">LaraForms</a> <a href="{{ url('/') }}" class="text-purple-600 text-3xl font-bold">LaraForms</a>
@ -41,22 +41,24 @@
</div> </div>
</div> </div>
</nav> </nav>
<div style="max-width: 600px;" class="mx-auto"> <br><br>
<br> <div style="max-width: 800px; border-top: 10px solid rgb(103, 58, 183); border-radius: 8px;" class="mx-auto rounded-md bg-white">
<h1>Edit Form</h1> <h1>Edit Form</h1>
<form id="edit-form" method="POST" action="{{ route('forms.update', $form->id) }}"> <br>
<form id="edit-form" method="POST" action="{{ route('forms.update', $form->id) }}" class="px-2">
@csrf @csrf
@method('PUT') @method('PUT')
<div class="form-group"> <div class="form-group">
<label for="form-title">Title</label> <input type="text" id="form-title" name="title" class="question_form_top_name form-control"
<input type="text" id="form-title" name="title" class="form-control" value="{{ $form->title }}" required> style="color: black" placeholder="Untitled Form" value="{{$form->title}}"/>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="form-description">Description</label> <input type="text" name="description" id="form-description" class="question_form_top_desc"
<input type="text" id="form-description" name="description" class="form-control" value="{{ $form->description }}"> style="color: black" placeholder="Form Description" value="{{$form->description}}"/>
</div> </div>
<div id="questions-section"> <div id="questions-section">
@foreach ($questions as $index => $question) @foreach ($questions as $index => $question)
<div class="py-3">
<div class="question" data-index="{{ $index }}"> <div class="question" data-index="{{ $index }}">
<input type="hidden" name="questions[{{ $index }}][id]" value="{{ $question->id }}"> <input type="hidden" name="questions[{{ $index }}][id]" value="{{ $question->id }}">
<div class="form-group"> <div class="form-group">
@ -85,6 +87,7 @@
</div> </div>
<button type="button" class="btn btn-danger" onclick="deleteQuestion(this)">Delete Question</button> <button type="button" class="btn btn-danger" onclick="deleteQuestion(this)">Delete Question</button>
</div> </div>
</div>
@endforeach @endforeach
</div> </div>
<button type="button" class="btn btn-primary" onclick="addNewQuestion()">Add New Question</button> <button type="button" class="btn btn-primary" onclick="addNewQuestion()">Add New Question</button>

View File

@ -1,160 +1,3 @@
{{-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Forms</title>
<link rel="stylesheet" href="{{ asset('css/index.css') }}">
<!-- Include Tailwind CSS -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
<div class="form_header flex justify-between items-center py-4 px-6 bg-white shadow-md">
<div class="form_header_left flex items-center">
<a href="/forms">
<img src="{{ asset('images/google-form.png') }}" class="form_header_icon" height="45px" width="40px">
</a>
<h1 class="form_name text-xl font-semibold text-gray-800 ml-2">LaraForms</h1>
</div>
<div class="form_header_right flex items-center">
<img src="{{ asset('images/menu.png') }}" alt="menu" class="mr-4" height="30px" width="30px">
<img src="{{ asset('images/user.png') }}" alt="" class="mr-2" height="30px" width="30px">
</div>
</div>
<div class="container mx-auto py-8 px-4">
<div class="start_form mb-8">
<a href="{{ route('forms.create') }}" class="block bg-purple-200 hover:bg-purple-300 text-white font-semibold py-2 px-4 rounded">
<h2 class="text-lg">Start a new form</h2>
</a>
</div>
<div class="recent_forms">
<h2 class="text-2xl font-semibold mb-4">Recent Forms</h2>
@if ($forms->isEmpty())
<p class="text-gray-600">No forms available.</p>
@else
<ul class="divide-y divide-gray-300">
@foreach ($forms as $form)
<li class="py-4 flex justify-between items-center">
<div>
<a href="{{ route('forms.show', $form) }}" class="text-xl font-semibold text-blue-600 hover:underline">{{ $form->title }}</a>
<p class="text-gray-600">{{ $form->description }}</p>
</div>
<div class="flex items-center">
<span class="mr-4 text-gray-600">{{ $form->is_published ? 'Published' : 'Not Published' }}</span>
@if ($form->is_published)
<a href="{{ route('responses.viewResponses', $form) }}" class="btn btn-secondary mr-2">Responses</a>
@endif
<a href="{{ route('forms.edit', $form) }}" class="btn btn-primary mr-2">Edit</a>
<form action="{{ route('forms.destroy', $form) }}" method="POST" class="mr-2">
@csrf
@method('DELETE')
<button type="submit" class="btn btn-danger">Delete</button>
</form>
</div>
</li>
@endforeach
</ul>
@endif
</div>
</div>
<script src="{{ asset('js/script.js') }}"></script>
</body>
</html> --}}
{{-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Forms</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
<nav class="bg-white p-4 shadow-lg">
<div class="container mx-auto flex justify-between items-center">
<a href="{{ url('/') }}" class="text-black text-2xl font-bold">LaraForms</a>
<div class="relative">
<button id="profileMenuButton" class="flex items-center focus:outline-none">
<img src="{{ Auth::user()->profile_photo_url }}" alt="Profile" class="w-10 h-10 rounded-full border-2 border-white">
</button>
<div id="profileMenu" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-2">
<a href="{{ route('logout') }}" class="block px-4 py-2 text-gray-700 hover:bg-gray-200">Logout</a>
</div>
</div>
</div>
</nav>
<div class="container mx-auto mt-10">
<div class="flex justify-start mb-6">
<a href="{{ route('forms.create') }}" class="inline-block px-6 py-3 bg-purple-600 text-white font-semibold rounded-md shadow hover:bg-purple-700 transition duration-200">Start a new form</a>
</div>
<div class="bg-white shadow-lg rounded-lg p-6">
<h2 class="text-2xl font-semibold mb-4">Recent Forms</h2>
@if ($forms->isEmpty())
<p class="text-gray-600">No forms available.</p>
@else
<table class="min-w-full bg-white">
<thead class="bg-gray-100">
<tr>
<th class="py-4 px-6 border-b border-gray-200 text-left text-sm font-semibold text-gray-600">Form Title</th>
<th class="py-4 px-6 border-b border-gray-200 text-left text-sm font-semibold text-gray-600">Created At</th>
<th class="py-4 px-6 border-b border-gray-200 text-left text-sm font-semibold text-gray-600">Responses</th>
<th class="py-4 px-6 border-b border-gray-200 text-left text-sm font-semibold text-gray-600">Actions</th>
</tr>
</thead>
<tbody>
@foreach($forms as $form)
<tr class="hover:bg-gray-50 transition duration-150">
<td class="py-4 px-6 border-b border-gray-200">
<a href="{{ route('forms.show', $form) }}" class="text-blue-600 font-semibold hover:underline">{{ $form->title }}</a>
<p class="text-gray-600">{{ $form->description }}</p>
</td>
<td class="py-4 px-6 border-b border-gray-200">{{ $form->created_at->format('M d, Y') }}</td>
<td class="py-4 px-6 border-b border-gray-200">
@if ($form->is_published)
<a href="{{ route('responses.viewResponses', $form) }}" class="btn btn-secondary text-blue-500 hover:underline">View Responses</a>
@else
<span class="text-gray-600">Not Published</span>
@endif
</td>
<td class="py-4 px-6 border-b border-gray-200 flex items-center">
<a href="{{ route('forms.edit', $form) }}" class="text-green-500 hover:underline">Edit</a>
<form action="{{ route('forms.destroy', $form) }}" method="POST" class="inline-block ml-4">
@csrf
@method('DELETE')
<button type="submit" class="text-red-500 hover:underline">Delete</button>
</form>
</td>
</tr>
@endforeach
</tbody>
</table>
@endif
</div>
</div>
<script>
document.getElementById('profileMenuButton').addEventListener('click', function() {
document.getElementById('profileMenu').classList.toggle('hidden');
});
</script>
</body>
</html> --}}
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
@ -174,7 +17,7 @@
<body class="bg-gray-50"> <body class="bg-gray-50">
<nav class="bg-white p-4 shadow-lg"> <nav class="bg-white p-4 shadow-lg">
<div class="container mx-auto flex justify-between items-center"> <div class="container mx-auto flex justify-between items-center">
<a href="{{ url('/') }}" class="text-purple-600 text-3xl font-bold">LaraForms</a> <a href="{{ url('/') }}" style="color: rgb(103,58,183)" class="text-3xl font-bold font-sans">LaraForms</a>
<div class="relative dropdown"> <div class="relative dropdown">
<button id="profileMenuButton" class="flex items-center focus:outline-none"> <button id="profileMenuButton" class="flex items-center focus:outline-none">
<img src="{{ asset('images/user.png') }}" alt="Profile" class="w-10 h-10 rounded-full border-2 border-white"> <img src="{{ asset('images/user.png') }}" alt="Profile" class="w-10 h-10 rounded-full border-2 border-white">
@ -193,10 +36,10 @@
<div class="container mx-auto mt-10"> <div class="container mx-auto mt-10">
<div class="flex justify-between mb-6 items-center"> <div class="flex justify-between mb-6 items-center">
<a href="{{ route('forms.create') }}" class="inline-block px-6 py-3 bg-purple-600 text-white font-semibold rounded-md shadow hover:bg-purple-700 transition duration-200">Start a new form</a> <a href="{{ route('forms.create') }}" class="inline-block px-6 py-3 text-white font-semibold rounded-md shadow bg-purple-700 hover:bg-purple-900 transition duration-200">Start a new form</a>
</div> </div>
<h2 class="text-3xl font-semibold text-gray-800">Recent Forms</h2> <h2 class="text-3xl font-semibold text-gray-800 font-sans">Recent Forms</h2>
<br> <br>
<div class="bg-white shadow-custom rounded-lg p-6"> <div class="bg-white shadow-custom rounded-lg p-6">
@if ($forms->isEmpty()) @if ($forms->isEmpty())
@ -226,7 +69,7 @@
<span class="text-gray-600">Not Published</span> <span class="text-gray-600">Not Published</span>
@endif @endif
</td> </td>
<td class="py-8 px-6 border-b border-gray-200 flex items-center space-x-4"> <td class="py-8 px-6 border-b border-gray-200 flex items-center space-x-10">
<a href="{{ route('forms.edit', $form) }}" class="text-green-500 hover:underline">Edit</a> <a href="{{ route('forms.edit', $form) }}" class="text-green-500 hover:underline">Edit</a>
<form action="{{ route('forms.destroy', $form) }}" method="POST" class="inline-block"> <form action="{{ route('forms.destroy', $form) }}" method="POST" class="inline-block">
@csrf @csrf

View File

@ -14,98 +14,6 @@
<link rel="stylesheet" href="{{ asset('css/index.css') }}"> <link rel="stylesheet" href="{{ asset('css/index.css') }}">
</head> </head>
<body>
<div class="form_header roboto-light">
<div class="form_header_left">
<a href="/forms"><img src="{{ asset('images/google-form.png') }}" class="form_header_icon" height="45px"
width="40px" /></a>
<h1 class="form_name">{{ $form->title }} - Response Detail</h1>
</div>
</div>
<div class="container">
<div class="response_detail">
<h2>Response from {{ $response->user->name ?? 'Anonymous' }} - {{ $response->submitted_at }}</h2>
@php
$decodedAnswers = json_decode($response->answers, true);
@endphp
@if (is_array($decodedAnswers))
@foreach ($decodedAnswers as $questionId => $answer)
<div class="question">
<h3>Question {{ $questionId }}:</h3>
<p>{{ is_array($answer) ? implode(', ', $answer) : $answer }}</p>
</div>
@endforeach
@else
<p>No valid responses available.</p>
@endif
</div>
</div>
<script src="{{ asset('js/script.js') }}"></script>
</body>
</html> --}}
{{-- <!DOCTYPE html>
<html lang="en">
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Response Detail</title>
<link rel="stylesheet" href="{{ asset('css/index.css') }}">
</head>
<body>
<div class="form_header roboto-light">
<div class="form_header_left">
<a href="/forms"><img src="{{ asset('images/google-form.png') }}" class="form_header_icon" height="45px" width="40px" /></a>
<h1 class="form_name">{{ $form->title }} - Response Detail</h1>
</div>
</div>
<div class="container">
<div class="response_detail">
<h2>Response from {{ $responses->first()->user->name ?? 'Anonymous' }} - {{ $responses->first()->submitted_at }}</h2>
@foreach ($responses as $response)
<div class="question">
<h3>Question {{ $response->question_id }}:</h3>
@php
$decodedAnswers = json_decode($response->answers, true);
@endphp
<p>{{ is_array($decodedAnswers) ? implode(', ', $decodedAnswers) : $decodedAnswers }}</p>
</div>
@endforeach
</div>
</div>
<script src="{{ asset('js/script.js') }}"></script>
</body>
</html> --}}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900&display=swap"
rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Response Detail</title>
<link rel="stylesheet" href="{{ asset('css/index.css') }}">
</head>
<body> <body>
<div class="form_header roboto-light"> <div class="form_header roboto-light">
<div class="form_header_left"> <div class="form_header_left">
@ -141,4 +49,80 @@
<script src="{{ asset('js/script.js') }}"></script> <script src="{{ asset('js/script.js') }}"></script>
</body> </body>
</html> --}}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900&display=swap"
rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Response Detail</title>
<link rel="stylesheet" href="{{ asset('css/index.css') }}">
</head>
<body>
<div class="form_header roboto-light">
<div class="form_header_left">
<a href="/forms"><img src="{{ asset('images/google-form.png') }}" class="form_header_icon" height="45px"
width="40px" /></a>
<h1 class="form_name">{{ $form->title }} - Response Detail</h1>
</div>
</div>
<div class="container">
<div class="response_detail">
<h2>Response from {{ $responses->first()->user->name ?? 'Anonymous' }} - {{ $responses->first()->submitted_at }}</h2>
{{-- Debugging output --}}
<pre>{{ print_r($questions) }}</pre>
<pre>{{ print_r($responses) }}</pre>
@foreach ($responses as $response)
@php
$question = $questions[$response->question_id] ?? null;
$decodedAnswers = json_decode($response->answers, true);
@endphp
@if ($question)
<div class="question">
<h3>{{ $question->question_text }}</h3>
@if (in_array($question->type, ['multiple_choice', 'checkbox', 'dropdown']))
@if ($question->type == 'dropdown')
<select disabled>
@foreach (json_decode($question->options) as $option)
<option {{ ($option == $response->answers) ? 'selected' : '' }}>
{{ $option }}
</option>
@endforeach
</select>
@else
@foreach (json_decode($question->options) as $option)
<p>
<input type="radio" disabled {{ in_array($option, (array)$decodedAnswers) ? 'checked' : '' }}>
{{ $option }}
</p>
@endforeach
@endif
@else
<p>{{ is_array($decodedAnswers) ? implode(', ', $decodedAnswers) : $decodedAnswers }}</p>
@endif
</div>
@else
<p>Question not found for ID: {{ $response->question_id }}</p>
@endif
@endforeach
</div>
</div>
<script src="{{ asset('js/script.js') }}"></script>
</body>
</html> </html>

View File

@ -1,143 +1,3 @@
{{-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Responses for {{ $form->title }}</title>
</head>
<body>
<h1>Responses for {{ $form->title }}</h1>
@if ($responses->isEmpty())
<p>No responses available.</p>
@else
<ul>
@foreach ($responses as $response)
<li>
<a href="{{ route('responses.viewResponse', [$form, $response]) }}" target="_blank">
Response by {{ $response->user->name ?? 'Anonymous' }} on {{ $response->submitted_at }}
</a>
</li>
@endforeach
</ul>
@endif
</body> --}}
{{-- </html> --}}
{{--
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Form Responses</title>
<link rel="stylesheet" href="{{ asset('css/index.css') }}">
</head>
<body>
<div class="form_header roboto-light">
<div class="form_header_left">
<a href="/forms"><img src="{{ asset('images/google-form.png') }}" class="form_header_icon" height="45px" width="40px" /></a>
<h1 class="form_name">{{ $form->title }} Responses</h1>
</div>
<div class="form_header_right">
<img src="{{ asset('images/menu.png') }}" alt="menu" height="30px" width="30px" />
<img src="{{ asset('images/user.png') }}" alt="" height="30px" width="30px" />
</div>
</div>
<div class="container">
<h2>Responses</h2>
<a href="{{ route('forms.fill', $form) }}" target="_blank">Share Form Link</a>
@if ($responses->isEmpty())
<p>No responses available.</p>
@else
<ul>
@foreach ($responses as $response)
<li>
User: {{ $response->user->name }} - Submitted at: {{ $response->submitted_at }}
<a href="{{ route('responses.show', $response) }}" target="_blank">View Response</a>
</li>
@endforeach
</ul>
@endif
</div>
<script src="{{ asset('js/script.js') }}"></script>
</body>
</html> --}}
{{-- <!DOCTYPE html>
<html lang="en">
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900&display=swap"
rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Form Responses</title>
<link rel="stylesheet" href="{{ asset('css/index.css') }}">
</head>
<body>
<div class="form_header roboto-light">
<div class="form_header_left">
<a href="/forms"><img src="{{ asset('images/google-form.png') }}" class="form_header_icon" height="45px"
width="40px" /></a>
<h1 class="form_name">{{ $form->title }} Responses</h1>
</div>
<div class="form_header_right">
<img src="{{ asset('images/menu.png') }}" alt="menu" height="30px" width="30px" />
<img src="{{ asset('images/user.png') }}" alt="" height="30px" width="30px" />
</div>
</div>
<div class="container">
<h2>Responses</h2>
<div class="share-link">
<input type="text" value="{{ route('responses.submitForm', $form) }}" id="shareLink" readonly>
<button onclick="copyLink()">Copy Link</button>
</div>
<script>
function copyLink() {
var copyText = document.getElementById("shareLink");
copyText.select();
copyText.setSelectionRange(0, 99999); /* For mobile devices */
document.execCommand("copy");
alert("Link copied: " + copyText.value);
}
</script>
@if ($responses->isEmpty())
<p>No responses available.</p>
@else
<ul>
@foreach ($responses->groupBy('response_id') as $responseGroup)
<li>
User: {{ $responseGroup->first()->user->name }} - Submitted at:
{{ $responseGroup->first()->submitted_at }}
<a href="{{ route('responses.viewResponse', $responseGroup->first()) }}" target="_blank">View
Response</a>
</li>
@endforeach
</ul>
@endif
</div>
<script src="{{ asset('js/script.js') }}"></script>
</body>
</html> --}}
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
@ -154,7 +14,7 @@
<div class="form_header roboto-light"> <div class="form_header roboto-light">
<div class="form_header_left"> <div class="form_header_left">
<a href="/forms"><img src="{{ asset('images/google-form.png') }}" class="form_header_icon" height="45px" width="40px" /></a> <a href="/forms"><img src="{{ asset('images/google-form.png') }}" class="form_header_icon" height="45px" width="40px" /></a>
<h1 class="form_name">{{ $form->title }} Responses</h1> <h1 class="form_name">{{ $form->title }} - Responses</h1>
</div> </div>
<div class="form_header_right"> <div class="form_header_right">
<img src="{{ asset('images/menu.png') }}" alt="menu" height="30px" width="30px" /> <img src="{{ asset('images/menu.png') }}" alt="menu" height="30px" width="30px" />