2026-06-02 15:44:44 +03:30
<!DOCTYPE html>
< html lang = "fa" dir = "rtl" >
< head >
< meta charset = "UTF-8" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" / >
2026-06-02 16:29:54 +03:30
< title > فلترندر — بهزودی< / title >
< meta name = "description" content = "ویدیو ساز و تصویر ساز مبتنی بر هوش مصنوعی با بیش از ۱٬۲۰۰ قالب. بهزودی." / >
2026-06-02 15:44:44 +03:30
< meta property = "og:title" content = "فلترندر — بهزودی" / >
2026-06-02 16:29:54 +03:30
< meta property = "og:description" content = "ویدیوها و تصاویر خیرهکننده با هوش مصنوعی در چند دقیقه بسازید. بهزودی." / >
2026-06-02 15:44:44 +03:30
< link rel = "icon" href = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' rx='9' fill='%232563EB'/%3E%3Cpath d='M12 12.5L12 27.5L24.5 20L12 12.5Z' fill='white'/%3E%3C/svg%3E" / >
2026-06-02 16:29:54 +03:30
< link rel = "preconnect" href = "https://cdn.jsdelivr.net" crossorigin / >
< link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/vazirmatn@33.003/Vazirmatn-font-face.css" / >
2026-06-02 15:44:44 +03:30
< style >
: root {
2026-06-02 16:29:54 +03:30
--blue-600 : #2563eb ;
--blue-500 : #3b82f6 ;
--violet-600 : #7c3aed ;
--violet-500 : #8b5cf6 ;
--violet-50 : #f5f3ff ;
--violet-100 : #ede9fe ;
--blue-light : #eff6ff ;
--n900 : #171717 ;
--n700 : #404040 ;
--n600 : #525252 ;
--n500 : #737373 ;
--n200 : #e5e5e5 ;
--n100 : #f5f5f5 ;
2026-06-02 15:44:44 +03:30
}
* { margin : 0 ; padding : 0 ; box-sizing : border-box ; }
html , body { height : 100 % ; }
body {
2026-06-02 16:29:54 +03:30
font-family : "Vazirmatn" , Tahoma , "Segoe UI" , system-ui , sans-serif ;
color : var ( - - n900 ) ;
background : #ffffff ;
2026-06-02 15:44:44 +03:30
min-height : 100 vh ;
2026-06-02 16:29:54 +03:30
display : flex ; flex-direction : column ;
position : relative ; overflow-x : hidden ;
}
/* Light hero gradient + soft pastel blobs (matches the site hero) */
. bg { position : fixed ; inset : 0 ; z-index : 0 ; overflow : hidden ; pointer-events : none ; }
. bg . wash { position : absolute ; inset : 0 ; background : linear-gradient ( to bottom , rgba ( 245 , 243 , 255 , .9 ) , rgba ( 255 , 255 , 255 , .8 ) 55 % , #fff ) ; }
. blob { position : absolute ; border-radius : 50 % ; filter : blur ( 64 px ) ; opacity : .4 ; animation : drift 15 s ease-in-out infinite ; }
. blob . v { width : 384 px ; height : 384 px ; background : #ddd6fe ; top : 2 % ; right : 0 % ; }
. blob . s { width : 320 px ; height : 320 px ; background : #bae6fd ; top : 6 % ; left : 0 % ; animation-delay : -4 s ; }
. blob . r { width : 288 px ; height : 288 px ; background : #ffe4e6 ; bottom : 18 % ; right : 28 % ; animation-delay : -7 s ; }
. blob . a { width : 256 px ; height : 256 px ; background : #fef3c7 ; bottom : 8 % ; left : 22 % ; animation-delay : -10 s ; }
@ keyframes drift { 0 % , 100 % { transform : translate ( 0 , 0 ) scale ( 1 ) ; } 50 % { transform : translate ( 0 , -22 px ) scale ( 1.06 ) ; } }
. topbar { position : relative ; z-index : 2 ; display : flex ; align-items : center ; gap : 10 px ; padding : 20 px 24 px ; }
. topbar svg { width : 36 px ; height : 36 px ; }
. topbar . name { font-weight : 800 ; font-size : 19 px ; color : var ( - - n900 ) ; }
2026-06-02 15:44:44 +03:30
main {
position : relative ; z-index : 1 ; flex : 1 ;
display : flex ; flex-direction : column ; align-items : center ; justify-content : center ;
2026-06-02 16:29:54 +03:30
text-align : center ; padding : 24 px 20 px 56 px ;
2026-06-02 15:44:44 +03:30
}
. badge {
2026-06-02 16:29:54 +03:30
display : inline-flex ; align-items : center ; gap : 7 px ;
border : 1 px solid var ( - - violet -100 ) ; background : rgba ( 255 , 255 , 255 , .8 ) ; backdrop-filter : blur ( 6 px ) ;
padding : 7 px 16 px ; border-radius : 999 px ; font-size : 13.5 px ; font-weight : 500 ; color : var ( - - n600 ) ;
box-shadow : 0 1 px 2 px rgba ( 0 , 0 , 0 , .04 ) ; margin-bottom : 26 px ;
2026-06-02 15:44:44 +03:30
}
2026-06-02 16:29:54 +03:30
. badge . star { color : #f59e0b ; }
2026-06-02 15:44:44 +03:30
h1 {
2026-06-02 16:29:54 +03:30
font-size : clamp ( 30 px , 6 vw , 52 px ) ; font-weight : 800 ; line-height : 1.18 ; letter-spacing : -.5 px ;
color : var ( - - n900 ) ; max-width : 16 ch ; margin-bottom : 20 px ;
2026-06-02 15:44:44 +03:30
}
h1 . grad {
2026-06-02 16:29:54 +03:30
background : linear-gradient ( 90 deg , var ( - - blue -600 ) , var ( - - violet -500 ) , var ( - - blue -500 ) ) ;
2026-06-02 15:44:44 +03:30
-webkit- background-clip : text ; background-clip : text ; -webkit- text-fill-color : transparent ;
}
2026-06-02 16:29:54 +03:30
. lead { font-size : clamp ( 15 px , 2.2 vw , 19 px ) ; color : var ( - - n600 ) ; max-width : 620 px ; line-height : 1.9 ; margin-bottom : 34 px ; }
/* Countdown — light cards */
. countdown { display : flex ; gap : 12 px ; justify-content : center ; flex-wrap : wrap ; margin-bottom : 12 px ; }
. unit { background : #fff ; border : 1 px solid var ( - - n100 ) ; border-radius : 16 px ; width : 100 px ; padding : 16 px 8 px ; box-shadow : 0 4 px 16 px rgba ( 37 , 99 , 235 , .06 ) ; }
. unit . num { font-size : clamp ( 30 px , 5.5 vw , 42 px ) ; font-weight : 800 ; line-height : 1 ; color : var ( - - n900 ) ; font-variant-numeric : tabular-nums ; }
. unit . lbl { font-size : 12.5 px ; color : var ( - - n500 ) ; margin-top : 9 px ; }
. target { font-size : 14 px ; color : var ( - - n500 ) ; margin-bottom : 40 px ; }
. target b { color : var ( - - violet -600 ) ; font-weight : 700 ; }
/* Feature chips — light */
. features { display : flex ; gap : 10 px ; flex-wrap : wrap ; justify-content : center ; max-width : 820 px ; margin-bottom : 40 px ; }
. feat { display : inline-flex ; align-items : center ; gap : 8 px ; background : #fff ; border : 1 px solid var ( - - n100 ) ; border-radius : 12 px ; padding : 10 px 16 px ; font-size : 14 px ; color : var ( - - n700 ) ; box-shadow : 0 1 px 2 px rgba ( 0 , 0 , 0 , .03 ) ; }
. feat svg { width : 18 px ; height : 18 px ; color : var ( - - blue -600 ) ; flex-shrink : 0 ; }
2026-06-02 15:44:44 +03:30
/* Notify form */
. notify { display : flex ; gap : 10 px ; width : 100 % ; max-width : 440 px ; }
2026-06-02 16:29:54 +03:30
. notify input { flex : 1 ; background : #fff ; border : 1 px solid var ( - - n200 ) ; color : var ( - - n900 ) ; padding : 13 px 16 px ; border-radius : 12 px ; font-size : 15 px ; font-family : inherit ; outline : none ; transition : border-color .15 s ; }
. notify input :: placeholder { color : var ( - - n500 ) ; }
. notify input : focus { border-color : var ( - - blue -600 ) ; box-shadow : 0 0 0 3 px rgba ( 37 , 99 , 235 , .12 ) ; }
2026-06-02 15:44:44 +03:30
. notify button {
2026-06-02 16:29:54 +03:30
background : linear-gradient ( 90 deg , var ( - - violet -600 ) , var ( - - blue -600 ) ) ; color : #fff ; border : 0 ;
padding : 13 px 24 px ; border-radius : 12 px ; font-size : 15 px ; font-weight : 700 ; font-family : inherit ; cursor : pointer ;
box-shadow : 0 4 px 14 px rgba ( 37 , 99 , 235 , .25 ) ; transition : transform .15 s , box-shadow .15 s ; white-space : nowrap ;
2026-06-02 15:44:44 +03:30
}
2026-06-02 16:29:54 +03:30
. notify button : hover { transform : translateY ( -1 px ) ; box-shadow : 0 8 px 22 px rgba ( 37 , 99 , 235 , .35 ) ; }
. notify-msg { font-size : 14 px ; color : #059669 ; margin-top : 13 px ; min-height : 20 px ; font-weight : 500 ; }
footer { position : relative ; z-index : 1 ; text-align : center ; padding : 22 px ; color : var ( - - n500 ) ; font-size : 13 px ; border-top : 1 px solid var ( - - n100 ) ; }
footer a { color : var ( - - blue -600 ) ; text-decoration : none ; }
@ media ( max-width : 480px ) { . unit { width : 74 px ; } }
2026-06-02 15:44:44 +03:30
< / style >
< / head >
< body >
< div class = "bg" >
2026-06-02 16:29:54 +03:30
< div class = "wash" > < / div >
< div class = "blob v" > < / div > < div class = "blob s" > < / div > < div class = "blob r" > < / div > < div class = "blob a" > < / div >
2026-06-02 15:44:44 +03:30
< / div >
2026-06-02 16:29:54 +03:30
< header class = "topbar" >
< svg viewBox = "0 0 40 40" xmlns = "http://www.w3.org/2000/svg" aria-hidden = "true" >
< rect width = "40" height = "40" rx = "9" fill = "#2563EB" / >
< path d = "M12 12.5L12 27.5L24.5 20L12 12.5Z" fill = "white" / >
< rect x = "27" y = "13" width = "7" height = "2.5" rx = "1.25" fill = "white" fill-opacity = "0.9" / >
< rect x = "27" y = "18.75" width = "5.5" height = "2.5" rx = "1.25" fill = "white" fill-opacity = "0.75" / >
< rect x = "27" y = "24.5" width = "4" height = "2.5" rx = "1.25" fill = "white" fill-opacity = "0.6" / >
< / svg >
< span class = "name" > فلترندر< / span >
< / header >
2026-06-02 15:44:44 +03:30
2026-06-02 16:29:54 +03:30
< main >
< div class = "badge" > < span class = "star" > ★< / span > بهزودی راهاندازی میشود< / div >
2026-06-02 15:44:44 +03:30
2026-06-02 16:29:54 +03:30
< h1 > ویدیوها و تصاویر خیرهکننده با < span class = "grad" > هوش مصنوعی< / span > در چند دقیقه بسازید< / h1 >
< p class = "lead" > ویدیو ساز و تصویر ساز مبتنی بر هوش مصنوعی با بیش از ۱٬۲۰۰ قالب ساختهشده توسط طراحان حرفهای موشن.< / p >
2026-06-02 15:44:44 +03:30
< div class = "countdown" id = "countdown" aria-live = "polite" >
< div class = "unit" > < div class = "num" id = "d" > ۰۰< / div > < div class = "lbl" > روز< / div > < / div >
< div class = "unit" > < div class = "num" id = "h" > ۰۰< / div > < div class = "lbl" > ساعت< / div > < / div >
< div class = "unit" > < div class = "num" id = "m" > ۰۰< / div > < div class = "lbl" > دقیقه< / div > < / div >
< div class = "unit" > < div class = "num" id = "s" > ۰۰< / div > < div class = "lbl" > ثانیه< / div > < / div >
< / div >
< p class = "target" > زمان راهاندازی: < b > ۱ < / b > < / p >
< div class = "features" >
< div class = "feat" > < svg fill = "none" stroke = "currentColor" stroke-width = "2" viewBox = "0 0 24 24" > < polygon points = "23 7 16 12 23 17 23 7" / > < rect x = "1" y = "5" width = "15" height = "14" rx = "2" / > < / svg > ویدیوساز هوش مصنوعی< / div >
< div class = "feat" > < svg fill = "none" stroke = "currentColor" stroke-width = "2" viewBox = "0 0 24 24" > < rect x = "3" y = "3" width = "18" height = "18" rx = "2" / > < circle cx = "8.5" cy = "8.5" r = "1.5" / > < path d = "M21 15l-5-5L5 21" / > < / svg > ویرایشگر تصویر< / div >
2026-06-02 16:29:54 +03:30
< div class = "feat" > < svg fill = "none" stroke = "currentColor" stroke-width = "2" viewBox = "0 0 24 24" > < path d = "M12 2l2.4 7.4H22l-6 4.6 2.3 7.4L12 17l-6.3 4.4L8 14 2 9.4h7.6z" / > < / svg > بیش از ۱٬۲۰۰ قالب< / div >
2026-06-02 15:44:44 +03:30
< div class = "feat" > < svg fill = "none" stroke = "currentColor" stroke-width = "2" viewBox = "0 0 24 24" > < path d = "M9 18V5l12-2v13" / > < circle cx = "6" cy = "18" r = "3" / > < circle cx = "18" cy = "16" r = "3" / > < / svg > موسیقی و صداگذاری< / div >
< / div >
< form class = "notify" id = "notify" onsubmit = "return notifyMe(event)" >
< input type = "email" id = "email" placeholder = "ایمیل شما برای اطلاع از راهاندازی" required / >
< button type = "submit" > به من خبر بده< / button >
< / form >
< p class = "notify-msg" id = "notifyMsg" > < / p >
< / main >
2026-06-02 16:29:54 +03:30
< footer > © < span id = "year" > ۱۴۰۵< / span > فلترندر — تمامی حقوق محفوظ است. · < a href = "mailto:hello@flatrender.com" > hello@flatrender.com< / a > < / footer >
2026-06-02 15:44:44 +03:30
< script >
2026-06-02 16:29:54 +03:30
// Countdown to 1 Tir 1405 (22 June 2026, 00:00 Iran time, UTC+03:30)
2026-06-02 15:44:44 +03:30
var TARGET = new Date ( "2026-06-22T00:00:00+03:30" ) . getTime ( ) ;
2026-06-02 16:29:54 +03:30
function fa ( n ) { return String ( n ) . padStart ( 2 , "0" ) . replace ( /[0-9]/g , function ( d ) { return "۰۱۲۳۴۵۶۷۸۹" [ d ] ; } ) ; }
2026-06-02 15:44:44 +03:30
function tick ( ) {
2026-06-02 16:29:54 +03:30
var diff = Math . max ( 0 , TARGET - Date . now ( ) ) ;
2026-06-02 15:44:44 +03:30
var s = Math . floor ( diff / 1000 ) ;
2026-06-02 16:29:54 +03:30
document . getElementById ( "d" ) . textContent = fa ( Math . floor ( s / 86400 ) ) ;
document . getElementById ( "h" ) . textContent = fa ( Math . floor ( ( s % 86400 ) / 3600 ) ) ;
document . getElementById ( "m" ) . textContent = fa ( Math . floor ( ( s % 3600 ) / 60 ) ) ;
document . getElementById ( "s" ) . textContent = fa ( s % 60 ) ;
2026-06-02 15:44:44 +03:30
}
2026-06-02 16:29:54 +03:30
tick ( ) ; setInterval ( tick , 1000 ) ;
2026-06-02 15:44:44 +03:30
function notifyMe ( e ) {
e . preventDefault ( ) ;
var email = document . getElementById ( "email" ) . value ;
2026-06-02 16:29:54 +03:30
try { fetch ( "/subscribe" , { method : "POST" , headers : { "Content-Type" : "application/json" } , body : JSON . stringify ( { email : email } ) } ) . catch ( function ( ) { } ) ; } catch ( _ ) { }
document . getElementById ( "notifyMsg" ) . textContent = "ممنون! بهمحض راهاندازی به شما اطلاع میدهیم. ✓" ;
2026-06-02 15:44:44 +03:30
document . getElementById ( "notify" ) . reset ( ) ;
return false ;
}
< / script >
< / body >
< / html >
