Skip to content

abalsh / Garlix

Go to a project
Commit 5ce3e962 by Florian Shllaku
Options

fixed design

parent 559e575e
Inline Side-by-side
Showing with 121 additions and 92 deletions
public/css/contact.css
@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400); @import url(https://fonts.googleapis.com/css?family=Lato:100,300,400);
.card-body{ .card-body{
background-color: #f8f4ff;
}
.card-body{
font-family: 'Lato', sans-serif; font-family: 'Lato', sans-serif;
color: #b3aca7; color: #3C1C78;
} }
#form { #form {
...@@ -20,15 +24,15 @@ input { ...@@ -20,15 +24,15 @@ input {
background: transparent; background: transparent;
outline: none; outline: none;
color: #726659; color: #3C1C78;
border: solid 1px #b3aca7; border: solid 1px #3C1C78;
border-bottom: none; border-bottom: none;
} }
input:hover { input:hover {
background: #b3aca7; background: #3C1C78;
color: #e2dedb; color: #e2dedb;
} }
...@@ -42,15 +46,15 @@ textarea { ...@@ -42,15 +46,15 @@ textarea {
background: transparent; background: transparent;
outline: none; outline: none;
color: #726659; color: #3C1C78;
font-family: 'Lato', sans-serif; font-family: 'Lato', sans-serif;
font-size: 0.875em; font-size: 0.875em;
border: solid 1px #b3aca7; border: solid 1px #3C1C78;
} }
textarea:hover { textarea:hover {
background: #b3aca7; background: #3C1C78;
color: #e2dedb; color: #e2dedb;
} }
...@@ -62,12 +66,12 @@ textarea:hover { ...@@ -62,12 +66,12 @@ textarea:hover {
font-family: 'Lato', sans-serif; font-family: 'Lato', sans-serif;
font-size: 0.875em; font-size: 0.875em;
color: #b3aca7; color: #3C1C78;
outline:none; outline:none;
cursor: pointer; cursor: pointer;
border: solid 1px #b3aca7; border: solid 1px #3C1C78;
border-top: none; border-top: none;
} }
...@@ -78,3 +82,9 @@ textarea:hover { ...@@ -78,3 +82,9 @@ textarea:hover {
#contact-left{ #contact-left{
margin-right: 320px; margin-right: 320px;
} }
@media screen and (max-width: 600px) {
.input-group{
width: 70%;
}
}
\ No newline at end of file
public/css/crypto.css
...@@ -21,3 +21,8 @@ input{ ...@@ -21,3 +21,8 @@ input{
.border{ .border{
border: solid 1px #cccccc; border: solid 1px #cccccc;
} }
.up{
position: relative;
bottom: 10px;
}
public/css/subscribe.css
...@@ -14,13 +14,14 @@ ...@@ -14,13 +14,14 @@
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
-moz-border-radius: 3px; -moz-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
background: #645394; background: #f8f4ff;
width: 720px; width: 720px;
height: 550px; height: 550px;
position: relative; position: relative;
margin:0 auto; margin:0 auto;
line-height: 1.4em; line-height: 1.4em;
} }
.card-3 .card-body { .card-3 .card-body {
padding: 57px 65px; padding: 57px 65px;
padding-bottom: 65px; padding-bottom: 65px;
...@@ -61,30 +62,49 @@ ...@@ -61,30 +62,49 @@
.input-group { .input-group {
position: relative; position: relative;
margin-bottom: 33px; margin-bottom: 33px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2); border-bottom: 1px solid #3C1C78;
} }
/* To make forms transparent */ /* To make forms transparent */
.input--style-3 { .input--style-3 {
padding: 5px 0; padding: 5px 0;
font-size: 16px; font-size: 16px;
color: #fff; color: #3C1C78;
background: transparent; background: transparent;
border: 1px; border: 1px;
} }
.input--style-3::-webkit-input-placeholder { .input--style-3::-webkit-input-placeholder {
/* WebKit, Blink, Edge */ /* WebKit, Blink, Edge */
color: #fff; color: #3C1C78;
} }
.input--style-3:-moz-placeholder { .input--style-3:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */ /* Mozilla Firefox 4 to 18 */
color: #fff; color: #3C1C78;
opacity: 1; opacity: 1;
} }
@media all and (max-width: 1200px) { /* screen size until 1200px */
.paragrap {
font-size: 1.5em; /* 1.5x default size */
}
}
@media all and (max-width: 1000px) { /* screen size until 1000px */
.paragrap {
font-size: 1.2em; /* 1.2x default size */
}
}
@media all and (max-width: 500px) { /* screen size until 500px */
.paragrap {
font-size: 0.8em; /* 0.8x default size */
}
}
.paragraph{ .paragraph{
text-align: left; text-align: left;
color: #3C1C78;
}
h2{
color: #3C1C78;
} }
\ No newline at end of file
public/js/crypto.js
...@@ -8,7 +8,7 @@ $.ajax({ ...@@ -8,7 +8,7 @@ $.ajax({
var From_iso_value; var From_iso_value;
var To_iso_value; var To_iso_value;
var rez; var rez;
$('#Form').on("change",function(){ $('#Form').on("keyup change",function(){
Amount = document.getElementById("Amount").value; Amount = document.getElementById("Amount").value;
From_iso_value = $("#From option:selected").attr('value'); From_iso_value = $("#From option:selected").attr('value');
From = data[From_iso_value]; From = data[From_iso_value];
...@@ -28,3 +28,31 @@ $.ajax({ ...@@ -28,3 +28,31 @@ $.ajax({
} }
}); });
$.noConflict();
function swapValues() {
var dropfrom = $("#From option:selected").attr('value');
var dropto = $("#To option:selected").attr('value');
if (dropfrom != dropto){
$('#From option:selected').val(dropto).trigger('change');
$('#To option:selected').val(dropfrom).trigger('change');
}
var tmp = $('#From option:selected').text();
var tmpe = $('#To option:selected').text()
$('#From option:selected').html(tmpe)[0].innerHTML;
$('#To option:selected').html(tmp)[0].innerHTML;
$('#From select').selectpicker();
$('#To select').selectpicker();
// $('select[name=selValue1]').val(dropto);
// $('select[name=selValue2]').val(dropfrom);
$('.selectpicker').selectpicker('refresh');
console.log($('#From option:selected').html(tmpe)[0].innerHTML);
}
resources/views/contact.blade.php
@extends('header') @extends('header')
@section('content') @section('content')
<div class="page-wrapper bg-gra-01 p-t-180 p-b-100 font-poppins"> <main role="main" class="inner cover">
<div class="wrapper wrapper--w780"> <div class="card-body">
<div class="card card-3">
<div class="card-heading"></div> <div class="card-heading"></div>
@if(session('message')) @if(session('message'))
<div class='alert alert-success'> <div class='alert alert-success'>
...@@ -11,9 +10,9 @@ ...@@ -11,9 +10,9 @@
</div> </div>
@endif @endif
<div class="card-body"> <div class="card-body">
<h2 class="title">Contact Us</h2> <h2 class="title lead">Contact Us</h2>
<br> <br>
<p id="contact-left">Get in-touch with us.</p> <p style="float: left; padding-left: 50px;">Get in-touch with us.</p>
@if(count($errors) > 0) @if(count($errors) > 0)
<div class="alert alert-danger"> <div class="alert alert-danger">
<button type="button" class="close" data-dismiss="alert">×</button> <button type="button" class="close" data-dismiss="alert">×</button>
...@@ -31,26 +30,27 @@ ...@@ -31,26 +30,27 @@
<strong>{{ $message }}</strong> <strong>{{ $message }}</strong>
</div> </div>
@endif @endif
<div class="container">
<form id="form" class="topBefore" action="{{ url('contact/send')}}" method="POST"> <form id="form" class="topBefore" action="{{ url('contact/send')}}" method="POST">
{{ csrf_field() }} {{ csrf_field() }}
<div class="input-group"> <div class="input-group">
<input type="text" name="name" placeholder="NAME"> <input type="text" class="lead" name="name" placeholder="NAME">
</div> </div>
<div class="input-group"> <div class="input-group">
<input type="text" name="email" placeholder="E-MAIL"> <input type="text" class="lead" name="email" placeholder="E-MAIL">
</div> </div>
<div class="input-group"> <div class="input-group">
<textarea type="text" name="message" placeholder="MESSAGE"></textarea> <textarea type="text" class="lead" name="message" placeholder="MESSAGE"></textarea>
</div> </div>
<div class="input-group"> <div class="input-group">
<input id="submit" type="submit" name="send" value="Submit"> <input id="submit" class="lead" type="submit" name="send" value="Submit">
</div> </div>
</form> </form>
</div> </div>
</div> </div>
</div> </div>
</div> </main>
@include('footer') @include('footer')
@endsection @endsection
resources/views/crypto.blade.php
...@@ -8,9 +8,9 @@ ...@@ -8,9 +8,9 @@
</h3> </h3>
<div class="input-group"> <div class="input-group">
<br> <br>
<main role="main" class="inner cover">
<form id="Form"> <form id="Form">
<br> <br>
<input style="width: 250px;" type="number" placeholder="Enter Amount to Convert" step="0.01" min="0" id="Amount" class="form-control" value="1"> <input style="width: 250px;" type="number" placeholder="Enter Amount to Convert" step="0.01" min="0" id="Amount" class="form-control" value="1">
<br> <br>
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
</blockquote> </blockquote>
</div> </div>
<button type="button" id="swap-button" style="background:none; border:none;"><i class="fa fa-exchange" style="font-size:36px; color: #3C1C78;"></i></button> <button onclick="swapValues();" type="button" id="swap" class="lead" style="background:none; border:none;"><i class="fa fa-exchange" style="font-size:36px; color: #3C1C78;"></i></button>
<br> <br>
...@@ -40,18 +40,18 @@ ...@@ -40,18 +40,18 @@
</form> </form>
<div class="row" style="padding-top: 10px;"> <div class="row" style="padding-top: 10px;">
<div class="col"> <div class="col">
<blockquote class="blockquote"> <blockquote class="blockquote up">
<h2 class="mb-0" id="color"><span id="amount">1</span> <span id="from">BTC</span></h2> <h2 class="mb-0" id="color"><span id="amount" class="lead">1</span> <span id="from" class="lead">BTC</span></h2>
</blockquote> </blockquote>
</div> </div>
<span class="blockquote" id="color mb-0" > = </span> <span class="blockquote" id="mb-0" style="color: black;"> = </span>
<div class="col"> <div class="col">
<blockquote class="blockquote"> <blockquote class="blockquote up">
<h2 class="mb-0" id="color" style="margin-left: 20px;"><span id="rezult">11738.483</span> <span id="to">LINK</span></h2> <h2 class="mb-0" id="color" style="margin-left: 20px;"><span id="rezult" class="lead">11738.483</span> <span id="to" class="lead">LINK</span></h2>
</blockquote> </blockquote>
</div> </div>
</div> </div>
</main>
<?php <?php
// if( isset($_GET["From"]) && isset($_GET["Amount"]) && isset($_GET["To"])) // if( isset($_GET["From"]) && isset($_GET["Amount"]) && isset($_GET["To"]))
// { // {
......
resources/views/currency.blade.php
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
</h3> </h3>
<div class="input-group"> <div class="input-group">
<br> <br>
<main role="main" class="inner cover">
<form id="Form"> <form id="Form">
<br> <br>
<input style="width: 250px;" type="number" placeholder="Enter Amount to Convert" step="0.01" min="0" id="Amount" class="form-control" value="1"> <input style="width: 250px;" type="number" placeholder="Enter Amount to Convert" step="0.01" min="0" id="Amount" class="form-control" value="1">
...@@ -16,45 +17,42 @@ ...@@ -16,45 +17,42 @@
<br> <br>
<div class="row from" > <div class="row from" >
<div class="col"> <div class="col">
<div id="select-from-container"> <select class="selectpicker border" data-show-subtext="true" data-live-search="true" data-size="5" id="From">
<select name="selValue1" class="selectpicker border" data-show-subtext="true" data-live-search="true" data-size="5" id="From">
@foreach ($currencies as $item) @foreach ($currencies as $item)
<option class="form-control" value="{{ $item->iso }}">{{ $item->name }} - {{ $item->iso }}</option> <option class="form-control" value="{{ $item->iso }}">{{ $item->name }} - {{ $item->iso }}</option>
@endforeach @endforeach
</select> </select>
</div> </div>
</div> <button onclick="swapValues();" class="lead" type="button" id="swap" style="background:none; border:none;white-space: normal;"><i class="fa fa-exchange" style="font-size:36px; color: #3C1C78;"></i></button>
<button onclick="swapValues();" type="button" id="swap" style="background:none; border:none;"><i class="fa fa-exchange" style="font-size:36px; color: #3C1C78;"></i></button>
<br> <br>
<div class="col to"> <div class="col to">
<div id="select-from-container"> <select class="selectpicker border" data-show-subtext="true" data-live-search="true" data-size="5" id="To">
<select name="selValue2" class="selectpicker border" data-show-subtext="true" data-live-search="true" data-size="5" id="To">
@foreach ($currencies as $item) @foreach ($currencies as $item)
<option class="form-control" value="{{ $item->iso }}" selected>{{ $item->name }} - {{ $item->iso }}</option> <option class="form-control" value="{{ $item->iso }}" selected>{{ $item->name }} - {{ $item->iso }}</option>
@endforeach @endforeach
</select> </select>
</div> </div>
</div> </div>
</div>
<br> <br> <br> <br>
</form> </form>
<div class="row" style="padding-top: 10px;"> <div class="row" style="padding-top: 10px;">
<div class="col"> <div class="col">
<blockquote class="blockquote"> <blockquote class="blockquote up">
<h2 class="mb-0" id="color"><span id="amount">1</span> <span id="from">USD</span></h2> <h2 class="mb-0" id="color"><span id="amount" class="lead">1</span> <span id="from" class="lead">USD</span></h2>
</blockquote> </blockquote>
</div> </div>
<span class="blockquote" id="mb-0" style="color: black;"> = </span> <span class="blockquote" id="mb-0" style="color: black;"> = </span>
<div class="col"> <div class="col">
<blockquote class="blockquote"> <blockquote class="blockquote up">
<h2 class="mb-0" id="color" style="margin-left: 20px;"><span id="rezult">0.89</span> <span id="to">EUR</span></h2> <h2 class="mb-0" id="color" style="margin-left: 20px;"><span id="rezult" class="lead">0.89</span> <span id="to" class="lead">EUR</span></h2>
</blockquote> </blockquote>
</div> </div>
</div> </div>
</main>
{{-- <h1 style="padding-top: 50px;" id="color">Amount: <span id="amount"></span><span id="from"></span>:<span id="rezult"></span><span id="to"></span></h1> --}} {{-- <h1 style="padding-top: 50px;" id="color">Amount: <span id="amount"></span><span id="from"></span>:<span id="rezult"></span><span id="to"></span></h1> --}}
<?php <?php
// if( isset($_GET["From"]) && isset($_GET["Amount"]) && isset($_GET["To"])) // if( isset($_GET["From"]) && isset($_GET["Amount"]) && isset($_GET["To"]))
......
resources/views/header.blade.php
...@@ -40,6 +40,7 @@ ...@@ -40,6 +40,7 @@
</head> </head>
<body class="text-center" background="img\background.jpg"> <body class="text-center" background="img\background.jpg">
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column"> <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="masthead mb-auto"> <header class="masthead mb-auto">
<div class="inner"> <div class="inner">
...@@ -47,7 +48,9 @@ ...@@ -47,7 +48,9 @@
<i class="material-icons masthead-brand img-fluid">autorenew</i> <i class="material-icons masthead-brand img-fluid">autorenew</i>
<h3 class="masthead-brand">XCHANGE</h3> <h3 class="masthead-brand">XCHANGE</h3>
</a> </a>
<nav class="nav nav-masthead justify-content-center"> <nav class="nav nav-masthead justify-content-center">
<a class="nav-link @if(\Request::is('/')) active @endif" href="/">Home</a> <a class="nav-link @if(\Request::is('/')) active @endif" href="/">Home</a>
<a class="nav-link @if(\Request::is('currency')) active @endif" href='/currency'>Currency</a> <a class="nav-link @if(\Request::is('currency')) active @endif" href='/currency'>Currency</a>
<a class="nav-link @if(\Request::is('crypto')) active @endif" href='/crypto'>Crypto</a> <a class="nav-link @if(\Request::is('crypto')) active @endif" href='/crypto'>Crypto</a>
......
resources/views/subscribe.blade.php
@extends('header')
<!Doctype html> @section('content')
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Currency Exchange Website">
<meta name="author" content="Florian Shllaku, Hakeem Shrief">
<title>Currency Exchange</title>
<!-- Connecting with Google Material for websit's logo/icon autorenew-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Setting up BootstrapCDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Main Custom styles for the website -->
<link href="css\main.css" rel="stylesheet">
<link href="css\subscribe.css" rel="stylesheet">
</head>
<body class="text-center" background="img\background.jpg">
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="masthead mb-auto">
<div class="inner">
<i class="material-icons masthead-brand img-fluid">autorenew</i>
<h3 class="masthead-brand">XCHANGE</h3>
<nav class="nav nav-masthead justify-content-center">
<a class="nav-link" href='/'>Home</a>
<a class="nav-link" href='/currency'>Currnecy</a>
<a class="nav-link" href='/crypto'>Crypto</a>
<a class="nav-link" href='/contact'>Contact</a>
<a class="nav-link active" href='/subscribe'>Subscribe</a>
</nav>
</div>
</header>
<br> <br>
<div class="page-wrapper bg-gra-01 p-t-180 p-b-100 font-poppins"> <div class="page-wrapper bg-gra-01 p-t-180 p-b-100 font-poppins">
<div class="wrapper wrapper--w780"> <div class="wrapper wrapper--w780">
<div class="card card-3"> <div class="card card-3">
...@@ -65,22 +34,18 @@ ...@@ -65,22 +34,18 @@
<form action={{url('/subscribe')}} method="post"> <form action={{url('/subscribe')}} method="post">
@csrf @csrf
<div class="input-group"> <div class="input-group">
<input class="input--style-3" type="email" placeholder="Email" name="email"> <input class="input--style-3 color" style="background-color #3C1C78;" type="email" placeholder="Email" name="email">
</div> </div>
<div class="btn"> <div class="btn">
<button class="btn btn-primary" style="background-color: #3C1C78; border: none; " type="submit">Submit</button>
<button class="btn btn--pill" type="submit">Submit</button>
</div> </div>
</form> </form>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<footer class="mastfoot mt-auto">
<div class="inner"> @include('footer')
<p>Develeoped and Designed by <a href="#">&#169;Garlix</a>.</p>
</div> @endsection
</footer>
</div>
</body>
</html>
resources/views/welcome.blade.php
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
@section('content') @section('content')
<main role="main" class="inner cover"> <main role="main" class="inner cover">
<h1 class="cover-heading">Free Currency Converter</h1> <h1 class="cover-heading">Free Currency Converter</h1>
<p class="lead">Currency converter and exchange rate for Dollar, Pound, Euro and all other currencies. Calculate live currency and foreign exchange rates with this free currency converter.</p> <p class="lead">Currency converter and exchange rate for Dollar, Euro, Bitcoin, Ethereum and all other currencies. Calculate live fiat and crypto currency exchange rates with this free currency converter.</p>
<p class="lead"> <p class="lead">
<a href="/currency" class="btn btn-lg btn-secondary">Convert now</a> <a href="/currency" class="btn btn-lg btn-secondary">Convert now</a>
</p> </p>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment