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);
.card-body{
background-color: #f8f4ff;
}
.card-body{
font-family: 'Lato', sans-serif;
color: #b3aca7;
color: #3C1C78;
}
#form {
......@@ -20,15 +24,15 @@ input {
background: transparent;
outline: none;
color: #726659;
color: #3C1C78;
border: solid 1px #b3aca7;
border: solid 1px #3C1C78;
border-bottom: none;
}
input:hover {
background: #b3aca7;
background: #3C1C78;
color: #e2dedb;
}
......@@ -42,15 +46,15 @@ textarea {
background: transparent;
outline: none;
color: #726659;
color: #3C1C78;
font-family: 'Lato', sans-serif;
font-size: 0.875em;
border: solid 1px #b3aca7;
border: solid 1px #3C1C78;
}
textarea:hover {
background: #b3aca7;
background: #3C1C78;
color: #e2dedb;
}
......@@ -62,12 +66,12 @@ textarea:hover {
font-family: 'Lato', sans-serif;
font-size: 0.875em;
color: #b3aca7;
color: #3C1C78;
outline:none;
cursor: pointer;
border: solid 1px #b3aca7;
border: solid 1px #3C1C78;
border-top: none;
}
......@@ -78,3 +82,9 @@ textarea:hover {
#contact-left{
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{
.border{
border: solid 1px #cccccc;
}
.up{
position: relative;
bottom: 10px;
}
public/css/subscribe.css
......@@ -14,13 +14,14 @@
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #645394;
background: #f8f4ff;
width: 720px;
height: 550px;
position: relative;
margin:0 auto;
line-height: 1.4em;
}
.card-3 .card-body {
padding: 57px 65px;
padding-bottom: 65px;
......@@ -61,30 +62,49 @@
.input-group {
position: relative;
margin-bottom: 33px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
border-bottom: 1px solid #3C1C78;
}
/* To make forms transparent */
.input--style-3 {
padding: 5px 0;
font-size: 16px;
color: #fff;
color: #3C1C78;
background: transparent;
border: 1px;
}
.input--style-3::-webkit-input-placeholder {
/* WebKit, Blink, Edge */
color: #fff;
color: #3C1C78;
}
.input--style-3:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #fff;
color: #3C1C78;
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{
text-align: left;
color: #3C1C78;
}
h2{
color: #3C1C78;
}
\ No newline at end of file
public/js/crypto.js
......@@ -8,7 +8,7 @@ $.ajax({
var From_iso_value;
var To_iso_value;
var rez;
$('#Form').on("change",function(){
$('#Form').on("keyup change",function(){
Amount = document.getElementById("Amount").value;
From_iso_value = $("#From option:selected").attr('value');
From = data[From_iso_value];
......@@ -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')
@section('content')
<div class="page-wrapper bg-gra-01 p-t-180 p-b-100 font-poppins">
<div class="wrapper wrapper--w780">
<div class="card card-3">
<main role="main" class="inner cover">
<div class="card-body">
<div class="card-heading"></div>
@if(session('message'))
<div class='alert alert-success'>
......@@ -11,9 +10,9 @@
</div>
@endif
<div class="card-body">
<h2 class="title">Contact Us</h2>
<h2 class="title lead">Contact Us</h2>
<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)
<div class="alert alert-danger">
<button type="button" class="close" data-dismiss="alert">×</button>
......@@ -31,26 +30,27 @@
<strong>{{ $message }}</strong>
</div>
@endif
<div class="container">
<form id="form" class="topBefore" action="{{ url('contact/send')}}" method="POST">
{{ csrf_field() }}
<div class="input-group">
<input type="text" name="name" placeholder="NAME">
<input type="text" class="lead" name="name" placeholder="NAME">
</div>
<div class="input-group">
<input type="text" name="email" placeholder="E-MAIL">
<input type="text" class="lead" name="email" placeholder="E-MAIL">
</div>
<div class="input-group">
<textarea type="text" name="message" placeholder="MESSAGE"></textarea>
<textarea type="text" class="lead" name="message" placeholder="MESSAGE"></textarea>
</div>
<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>
</form>
</div>
</div>
</div>
</div>
</main>
@include('footer')
@endsection
resources/views/crypto.blade.php
......@@ -8,9 +8,9 @@
</h3>
<div class="input-group">
<br>
<main role="main" class="inner cover">
<form id="Form">
<br>
<input style="width: 250px;" type="number" placeholder="Enter Amount to Convert" step="0.01" min="0" id="Amount" class="form-control" value="1">
<br>
......@@ -24,7 +24,7 @@
</blockquote>
</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>
......@@ -40,18 +40,18 @@
</form>
<div class="row" style="padding-top: 10px;">
<div class="col">
<blockquote class="blockquote">
<h2 class="mb-0" id="color"><span id="amount">1</span> <span id="from">BTC</span></h2>
<blockquote class="blockquote up">
<h2 class="mb-0" id="color"><span id="amount" class="lead">1</span> <span id="from" class="lead">BTC</span></h2>
</blockquote>
</div>
<span class="blockquote" id="color mb-0" > = </span>
<span class="blockquote" id="mb-0" style="color: black;"> = </span>
<div class="col">
<blockquote class="blockquote">
<h2 class="mb-0" id="color" style="margin-left: 20px;"><span id="rezult">11738.483</span> <span id="to">LINK</span></h2>
<blockquote class="blockquote up">
<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>
</div>
</div>
</main>
<?php
// if( isset($_GET["From"]) && isset($_GET["Amount"]) && isset($_GET["To"]))
// {
......
resources/views/currency.blade.php
......@@ -9,6 +9,7 @@
</h3>
<div class="input-group">
<br>
<main role="main" class="inner cover">
<form id="Form">
<br>
<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 @@
<br>
<div class="row from" >
<div class="col">
<div id="select-from-container">
<select name="selValue1" class="selectpicker border" data-show-subtext="true" data-live-search="true" data-size="5" id="From">
<select class="selectpicker border" data-show-subtext="true" data-live-search="true" data-size="5" id="From">
@foreach ($currencies as $item)
<option class="form-control" value="{{ $item->iso }}">{{ $item->name }} - {{ $item->iso }}</option>
@endforeach
</select>
</div>
</div>
<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>
<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>
<br>
<div class="col to">
<div id="select-from-container">
<select name="selValue2" class="selectpicker border" data-show-subtext="true" data-live-search="true" data-size="5" id="To">
<select class="selectpicker border" data-show-subtext="true" data-live-search="true" data-size="5" id="To">
@foreach ($currencies as $item)
<option class="form-control" value="{{ $item->iso }}" selected>{{ $item->name }} - {{ $item->iso }}</option>
@endforeach
</select>
</div>
</div>
</div>
<br> <br>
</form>
<div class="row" style="padding-top: 10px;">
<div class="col">
<blockquote class="blockquote">
<h2 class="mb-0" id="color"><span id="amount">1</span> <span id="from">USD</span></h2>
<blockquote class="blockquote up">
<h2 class="mb-0" id="color"><span id="amount" class="lead">1</span> <span id="from" class="lead">USD</span></h2>
</blockquote>
</div>
<span class="blockquote" id="mb-0" style="color: black;"> = </span>
<div class="col">
<blockquote class="blockquote">
<h2 class="mb-0" id="color" style="margin-left: 20px;"><span id="rezult">0.89</span> <span id="to">EUR</span></h2>
<blockquote class="blockquote up">
<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>
</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> --}}
<?php
// if( isset($_GET["From"]) && isset($_GET["Amount"]) && isset($_GET["To"]))
......
resources/views/header.blade.php
......@@ -40,6 +40,7 @@
</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">
......@@ -47,7 +48,9 @@
<i class="material-icons masthead-brand img-fluid">autorenew</i>
<h3 class="masthead-brand">XCHANGE</h3>
</a>
<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('currency')) active @endif" href='/currency'>Currency</a>
<a class="nav-link @if(\Request::is('crypto')) active @endif" href='/crypto'>Crypto</a>
......
resources/views/subscribe.blade.php
@extends('header')
<!Doctype html>
<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>
@section('content')
<div class="page-wrapper bg-gra-01 p-t-180 p-b-100 font-poppins">
<div class="wrapper wrapper--w780">
<div class="card card-3">
......@@ -65,22 +34,18 @@
<form action={{url('/subscribe')}} method="post">
@csrf
<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 class="btn">
<button class="btn btn--pill" type="submit">Submit</button>
<button class="btn btn-primary" style="background-color: #3C1C78; border: none; " type="submit">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
<footer class="mastfoot mt-auto">
<div class="inner">
<p>Develeoped and Designed by <a href="#">&#169;Garlix</a>.</p>
</div>
</footer>
</div>
</body>
</html>
@include('footer')
@endsection
resources/views/welcome.blade.php
......@@ -3,7 +3,7 @@
@section('content')
<main role="main" class="inner cover">
<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">
<a href="/currency" class="btn btn-lg btn-secondary">Convert now</a>
</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