eminux/MatchLiveTv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Allinea card piani: stessa altezza e bordo uniforme.

Browse Source 
Flex column con azioni in basso; highlight Premium Light con box-shadow
invece di bordo rosso diverso che spezzava l’allineamento.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Emiliano Frascaro
2026-06-02 17:21:42 +02:00
parent 1901fcce68
commit cf06acf24d
4 changed files with 36 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
backend/app/views/layouts/marketing.html.erb
View File

@@ -6,7 +6,7 @@
<title><%= content_for?(:title) ? yield(:title) : "Match Live TV" %></title> <title><%= content_for?(:title) ? yield(:title) : "Match Live TV" %></title>
<%= render "shared/meta_tags" %> <%= render "shared/meta_tags" %>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer">
<link rel="stylesheet" href="/marketing.css?v=32"> <link rel="stylesheet" href="/marketing.css?v=33">
</head> </head>
<body> <body>
<%= render "shared/marketing_nav" %> <%= render "shared/marketing_nav" %>

2
backend/app/views/layouts/marketing_live.html.erb
View File

@@ -6,7 +6,7 @@
<title><%= content_for?(:title) ? yield(:title) : "Match Live TV" %></title> <title><%= content_for?(:title) ? yield(:title) : "Match Live TV" %></title>
<%= render "shared/meta_tags" %> <%= render "shared/meta_tags" %>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer">
<link rel="stylesheet" href="/marketing.css?v=30"> <link rel="stylesheet" href="/marketing.css?v=33">
<link rel="stylesheet" href="/live.css?v=3"> <link rel="stylesheet" href="/live.css?v=3">
<%= yield :head %> <%= yield :head %>
</head> </head>

3
backend/app/views/shared/_plan_cards.html.erb
View File

@@ -14,7 +14,8 @@
stripe_subscription_active: stripe_subscription_active?(subscription), stripe_subscription_active: stripe_subscription_active?(subscription),
current_interval: current_interval current_interval: current_interval
) : nil %> ) : nil %>
<div class="plan-card <%= "featured" if plan.slug == current_slug || (!billing_mode && plan.slug == "premium_light") %>"> <% featured = billing_mode ? (plan.slug == current_slug) : (plan.slug == "premium_light") %>
<div class="plan-card<%= " featured" if featured %>">
<h3><%= plan.name %></h3> <h3><%= plan.name %></h3>
<% if plan.slug == "free" %> <% if plan.slug == "free" %>
<div class="plan-price">€0</div> <div class="plan-price">€0</div>

36
backend/public/marketing.css
View File

@@ -918,12 +918,40 @@ body.nav-menu-open { overflow: hidden; }
object-fit: contain; object-fit: contain;
filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5)); filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
} }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 24px; } .plans {
.plan-card { background: #14141c; border: 1px solid #2a2a36; border-radius: 14px; padding: 24px; } display: grid;
.plan-card.featured { border-color: #e53935; } grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px;
margin-top: 24px;
align-items: stretch;
}
.plan-card {
display: flex;
flex-direction: column;
height: 100%;
background: #14141c;
border: 1px solid #2a2a36;
border-radius: 14px;
padding: 24px;
box-sizing: border-box;
}
.plan-card.featured {
border-color: #2a2a36;
box-shadow: 0 0 0 2px #e53935;
}
.plan-card h3 { margin: 0 0 8px; } .plan-card h3 { margin: 0 0 8px; }
.plan-price { font-size: 1.8rem; font-weight: 800; margin: 12px 0; } .plan-price { font-size: 1.8rem; font-weight: 800; margin: 12px 0; }
.plan-card ul { padding-left: 18px; color: #bbb; margin: 0 0 20px; } .plan-card ul {
flex: 1 1 auto;
padding-left: 18px;
color: #bbb;
margin: 0 0 20px;
}
.plan-card > .btn,
.plan-card > .plan-action-hint,
.plan-card > .plan-interval-actions {
margin-top: auto;
}
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; } .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.feature-card { background: #14141c; border-radius: 12px; padding: 20px; border: 1px solid #2a2a36; } .feature-card { background: #14141c; border-radius: 12px; padding: 20px; border: 1px solid #2a2a36; }
.feature-card h3 { margin: 0 0 8px; font-size: 1.05rem; } .feature-card h3 { margin: 0 0 8px; font-size: 1.05rem; }