Skip to content

Commit

Permalink
Merge pull request #180 from moseuh/main
Browse files Browse the repository at this point in the history 
final ui changes
  • Loading branch information
@curtisdelicata
curtisdelicata authored Jul 19, 2024
2 parents 115fae8 + e1f38ab commit 81de719
Show file tree
Hide file tree
Showing 12 changed files with 386 additions and 196 deletions.
24 changes: 18 additions & 6 deletions resources/views/auth/login.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,17 +26,29 @@

<div class="block mt-4">
<label for="remember_me" class="flex items-center">
<input type="checkbox" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" id="remember_me" name="remember">

<x-checkbox id="remember_me" name="remember" />

<span class="ml-2 text-sm text-gray-600">{{ __('Remember me') }}</span>
</label>
</div>

<div class="flex items-center justify-end mt-4">
<button type="submit" class="inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:ring ring-gray-300 disabled:opacity-25 transition ease-in-out duration-150 ml-4">
{{ __('Log in') }}
</button>
@if (Route::has('password.request'))
<a class="underline text-sm text-gray-600 hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" href="{{ route('password.request') }}">
{{ __('Forgot your password?') }}
</a>
@endif

<x-button class="ml-4">
{{ __('Login') }}
</x-button>
</div>
</form>
</div>

@if (JoelButcher\Socialstream\Socialstream::show())
<x-socialstream />
@endif
</x-authentication-card>
</div>
@endsection
</x-guest-layout>
33 changes: 27 additions & 6 deletions resources/views/auth/register.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,12 @@

<div>
<x-label for="name" value="{{ __('Name') }}" />
<x-input id="name" class="block mt-1 w-full" type="text" name="name" :value="old('name')" required autofocus />
<x-input id="name" class="block mt-1 w-full" type="text" name="name" :value="old('name')" required autofocus autocomplete="name" />
</div>

<div class="mt-4">
<x-label for="email" value="{{ __('Email') }}" />
<x-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required />
<x-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autocomplete="username" />
</div>

<div class="mt-4">
Expand All @@ -29,11 +29,28 @@

<div class="mt-4">
<x-label for="password_confirmation" value="{{ __('Confirm Password') }}" />
<x-input id="password_confirmation" class="block mt-1 w-full" type="password" name="password_confirmation" required />
<x-input id="password_confirmation" class="block mt-1 w-full" type="password" name="password_confirmation" required autocomplete="new-password" />
</div>

@if (Laravel\Jetstream\Jetstream::hasTermsAndPrivacyPolicyFeature())
<div class="mt-4">
<x-label for="terms">
<div class="flex items-center">
<x-checkbox name="terms" id="terms" required />

<div class="ml-2">
{!! __('I agree to the :terms_of_service and :privacy_policy', [
'terms_of_service' => '<a target="_blank" href="'.route('terms.show').'" class="underline text-sm text-gray-600 hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">'.__('Terms of Service').'</a>',
'privacy_policy' => '<a target="_blank" href="'.route('policy.show').'" class="underline text-sm text-gray-600 hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">'.__('Privacy Policy').'</a>',
]) !!}
</div>
</div>
</x-label>
</div>
@endif

<div class="flex items-center justify-end mt-4">
<a class="underline text-sm text-gray-600 hover:text-gray-900" href="{{ route('login') }}">
<a class="underline text-sm text-gray-600 hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" href="{{ route('login') }}">
{{ __('Already registered?') }}
</a>

Expand All @@ -42,6 +59,10 @@
</x-button>
</div>
</form>
</div>

@if (JoelButcher\Socialstream\Socialstream::show())
<x-socialstream />
@endif
</x-authentication-card>
</div>
@endsection
</x-guest-layout>
118 changes: 72 additions & 46 deletions resources/views/checkout.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,19 +7,34 @@
<script src="https://js.stripe.com/v3/"></script>
<style>
/* Minimal styling for layout */
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f9fafb;
margin: 0;
}
form {
background: white;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 300px;
}
.StripeElement {
box-sizing: border-box;
height: 40px;
padding: 10px 12px;
border: 1px solid transparent;
border-radius: 4px;
background-color: white;
box-shadow: 0 1px 3px 0 #e6ebf1;
-webkit-transition: box-shadow 150ms ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transition: box-shadow 150ms ease;
}
.StripeElement--focus {
box-shadow: 0 1px 3px 0 #cfd7df;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.StripeElement--invalid {
border-color: #fa755a;
Expand All @@ -30,14 +45,21 @@
#card-errors {
color: #fa755a;
margin-top: 10px;
font-size: 0.9rem;
}
button {
background: #32325d;
color: #ffffff;
border: none;
padding: 8px 12px;
padding: 10px;
border-radius: 4px;
font-size: 1rem;
cursor: pointer;
width: 100%;
margin-top: 20px;
}
button:hover {
background: #4a4e69;
}
</style>
</head>
Expand All @@ -52,53 +74,57 @@
</form>

<script>
var stripe = Stripe('{{ env("STRIPE_KEY") }}');
var elements = stripe.elements();
var style = {
base: {
color: "#32325d",
}
};
var card = elements.create("card", { style: style });
card.mount("#card-element");
card.on('change', function(event) {
var displayError = document.getElementById('card-errors');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
});
document.addEventListener('DOMContentLoaded', function() {
var stripe = Stripe('{{ env("STRIPE_KEY") }}');
var elements = stripe.elements();
var style = {
base: {
color: "#32325d",
}
};
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
event.preventDefault();
var card = elements.create("card", { style: style });
card.mount("#card-element");
stripe.createPaymentMethod({
type: 'card',
card: card,
}).then(function(result) {
if (result.error) {
var errorElement = document.getElementById('card-errors');
errorElement.textContent = result.error.message;
card.on('change', function(event) {
var displayError = document.getElementById('card-errors');
if (event.error) {
displayError.textContent = event.error.message;
} else {
fetch('/api/payment', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value
},
body: JSON.stringify({ payment_method_id: result.paymentMethod.id })
}).then(function(response) {
return response.json();
}).then(function(paymentIntent) {
console.log(paymentIntent);
// Handle success or display error message
});
displayError.textContent = '';
}
});
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
event.preventDefault();
stripe.createPaymentMethod({
type: 'card',
card: card,
}).then(function(result) {
if (result.error) {
var errorElement = document.getElementById('card-errors');
errorElement.textContent = result.error.message;
} else {
fetch('/api/payment', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value
},
body: JSON.stringify({ payment_method_id: result.paymentMethod.id })
}).then(function(response) {
return response.json();
}).then(function(paymentIntent) {
console.log(paymentIntent);
// Handle success or display error message
}).catch(function(error) {
console.error('Error:', error);
});
}
});
});
});
</script>
</body>
Expand Down
64 changes: 19 additions & 45 deletions resources/views/home.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,3 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@yield('title', 'Welcome to Liberu Ecommerce')</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Liberu Ecommerce</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
</ul>
</div>
</nav>
<div class="container mt-4">
@yield('content')
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
</new_file>

<new_file file_path="resources/views/home.blade.php">
@extends('layouts.app')

@section('title', 'Home')
Expand All @@ -52,13 +14,25 @@
<h2>Featured Products</h2>
<div class="row">
@foreach($products as $product)
<div class="col-md-4">
<div class="card" style="width: 18rem;">
<img src="{{ $product->image_url }}" class="card-img-top" alt="{{ $product->name }}">
<div class="card-body">
<h5 class="card-title">{{ $product->name }}</h5>
<p class="card-text">{{ $product->description }}</p>
<a href="#" class="btn btn-primary">View Product</a>
<div class="col-md-4 mb-4">
<div class="card">
<div class="card-inner">
<div class="card-front">
<img src="{{ $product->image_url }}" class="card-img-top" alt="{{ $product->name }}">
<div class="card-body">
<h5 class="card-title">{{ $product->name }}</h5>
<p class="card-text">{{ $product->description }}</p>
<a href="#" class="btn btn-primary">View Product</a>
</div>
</div>
<div class="card-back">
<div class="card-body">
<h5 class="card-title">{{ $product->name }}</h5>
<p class="card-text">{{ $product->description }}</p>
<p><strong>Price:</strong> ${{ $product->price }}</p>
<a href="#" class="btn btn-success">Add to Cart</a>
</div>
</div>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit 81de719

Please sign in to comment.