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)
|
||||
import './styles/global.less';
|
||||
import './styles/main.less';
|
||||
|
||||
// start the Stimulus application
|
||||
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>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>{% block title %}Welcome!{% 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 #}
|
||||
<title>{% block title %}{% endblock %}</title>
|
||||
|
||||
<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 %}
|
||||
{{ encore_entry_link_tags('app') }}
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,14 +1,38 @@
|
||||
{% extends 'base.html.twig' %}
|
||||
|
||||
{% block title %}Index{% endblock %}
|
||||
|
||||
{% block title %}Rozliczenie podatkowe{% 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 class="main-container">
|
||||
<section class="card">
|
||||
<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 class="col-md-1">
|
||||
<a class="btn btn-primary" href="{{ path('app_taxes',{type:"crypto"}) }}">Cryptocurrency</a>
|
||||
{% if not loop.last %}
|
||||
<div class="rail-line"></div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</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>
|
||||
{% 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