choose type view
This commit is contained in:
@@ -7,6 +7,7 @@
|
|||||||
|
|
||||||
// any CSS you import will output into a single css file (app.css in this case)
|
// any CSS you import will output into a single css file (app.css in this case)
|
||||||
import './styles/global.less';
|
import './styles/global.less';
|
||||||
|
import './styles/main.less';
|
||||||
|
|
||||||
// start the Stimulus application
|
// start the Stimulus application
|
||||||
import './bootstrap';
|
import './bootstrap';
|
||||||
|
|||||||
@@ -0,0 +1,93 @@
|
|||||||
|
.main-container {
|
||||||
|
font-family: 'Public Sans', system-ui, sans-serif;
|
||||||
|
color: #1C1C1A;
|
||||||
|
background: #EFEEE9;
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 56px 24px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 660px;
|
||||||
|
background: #FBFBF9;
|
||||||
|
border: 1px solid #E6E5E0;
|
||||||
|
border-radius: 18px;
|
||||||
|
padding: 36px 34px 42px;
|
||||||
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
position: absolute;
|
||||||
|
top: -13px;
|
||||||
|
left: 28px;
|
||||||
|
background: #1C1C1A;
|
||||||
|
color: #FBFBF9;
|
||||||
|
font-family: 'IBM Plex Mono', monospace;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 3px 10px;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rail {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 28px;
|
||||||
|
.rail-step {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
.rail-dot {
|
||||||
|
width: 26px;
|
||||||
|
height: 26px;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-family: 'IBM Plex Mono', monospace;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
background: #FFFFFF;
|
||||||
|
color: #B7B6B0;
|
||||||
|
border: 1px solid #E0DFD9;
|
||||||
|
}
|
||||||
|
.rail-label {
|
||||||
|
font-size: 12.5px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #A6A5A0;
|
||||||
|
}
|
||||||
|
.rail-line {
|
||||||
|
flex: 1;
|
||||||
|
height: 1px;
|
||||||
|
background: #E0DFD9;
|
||||||
|
margin: 0 14px;
|
||||||
|
min-width: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-done {
|
||||||
|
.rail-dot {
|
||||||
|
background: #E7EFE9;
|
||||||
|
color: #3F8F6B;
|
||||||
|
border-color: #CDE3D5;
|
||||||
|
}
|
||||||
|
.rail-label {
|
||||||
|
color: #3B3A36;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.is-active{
|
||||||
|
.rail-dot {
|
||||||
|
background: #1C1C1A;
|
||||||
|
color: #FBFBF9;
|
||||||
|
border-color: #1C1C1A;
|
||||||
|
}
|
||||||
|
.rail-label {
|
||||||
|
color: #1C1C1A;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@@ -2,9 +2,11 @@
|
|||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>{% block title %}Welcome!{% endblock %}</title>
|
<title>{% block title %}{% endblock %}</title>
|
||||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>">
|
|
||||||
{# Run `composer require symfony/webpack-encore-bundle` to start using Symfony UX #}
|
<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=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||||
{% block stylesheets %}
|
{% block stylesheets %}
|
||||||
{{ encore_entry_link_tags('app') }}
|
{{ encore_entry_link_tags('app') }}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|||||||
@@ -1,14 +1,38 @@
|
|||||||
{% extends 'base.html.twig' %}
|
{% extends 'base.html.twig' %}
|
||||||
|
|
||||||
{% block title %}Index{% endblock %}
|
{% block title %}Rozliczenie podatkowe{% endblock %}
|
||||||
|
|
||||||
{% block body %}
|
{% block body %}
|
||||||
<div class="row justify-content-md-center" style="margin: 50px 0;">
|
<div class="main-container">
|
||||||
<div class="col-md-1">
|
<section class="card">
|
||||||
<a class="btn btn-primary" href="{{ path('app_taxes',{type:"dividend"}) }}">Dividends</a>
|
<div class="rail">
|
||||||
|
{% for row in [{i:'1', label:'Wybór'}, {i:'2', label:'Pliki'}, {i:'3', label:'Wynik'}] %}
|
||||||
|
<div class="rail-step" data-index="{{ loop.index }}">
|
||||||
|
<div class="rail-dot">{{ row.i }}</div>
|
||||||
|
<span class="rail-label">{{ row.label }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-1">
|
{% if not loop.last %}
|
||||||
<a class="btn btn-primary" href="{{ path('app_taxes',{type:"crypto"}) }}">Cryptocurrency</a>
|
<div class="rail-line"></div>
|
||||||
|
{% endif %}
|
||||||
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
|
<div class="choices">
|
||||||
|
<button type="button" class="choice" data-label="Dywidendy">
|
||||||
|
<div class="choice-icon div">%</div>
|
||||||
|
<div class="choice-body">
|
||||||
|
<div class="choice-title">Dywidendy</div>
|
||||||
|
<div class="choice-sub">Akcje krajowe i zagraniczne · podatek 19%</div>
|
||||||
|
</div>
|
||||||
|
<span class="arrow">→</span>
|
||||||
|
</button>
|
||||||
|
<button type="button" class="choice" data-label="Kryptowaluty">
|
||||||
|
<div class="choice-icon crypto">₿</div>
|
||||||
|
<div class="choice-body">
|
||||||
|
<div class="choice-title">Kryptowaluty</div>
|
||||||
|
<div class="choice-sub">Sprzedaż aktywów · dochód i podatek 19%</div>
|
||||||
|
</div>
|
||||||
|
<span class="arrow">→</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
{% extends 'base.html.twig' %}
|
||||||
|
|
||||||
|
{% block title %}Index{% endblock %}
|
||||||
|
|
||||||
|
{% block body %}
|
||||||
|
<div class="row justify-content-md-center" style="margin: 50px 0;">
|
||||||
|
<div class="col-md-1">
|
||||||
|
<a class="btn btn-primary" href="{{ path('app_taxes',{type:"dividend"}) }}">Dividends</a>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-1">
|
||||||
|
<a class="btn btn-primary" href="{{ path('app_taxes',{type:"crypto"}) }}">Cryptocurrency</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
||||||
Reference in New Issue
Block a user