|
|
import gradio as gr |
|
|
import tempfile |
|
|
|
|
|
|
|
|
HTML_TEMPLATE = """<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<meta charset="utf-8" /> |
|
|
<meta name="viewport" content="width=device-width" /> |
|
|
<title>Tesla</title> |
|
|
<link |
|
|
rel="stylesheet" |
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.css" |
|
|
integrity="sha512-4rPgyv5iG0PZw8E+oRdfN/Gq+yilzt9rQ8Yci2jJ15rAyBmF0HBE4wFjBkoB72cxBeg63uobaj1UcNt/scV93w==" |
|
|
crossorigin="anonymous" |
|
|
referrerpolicy="no-referrer" |
|
|
/> |
|
|
<link rel="stylesheet" href="css/style.css" /> |
|
|
<link rel="stylesheet" href="css/variable.css" /> |
|
|
<link rel="stylesheet" href="css/header.css" /> |
|
|
<link rel="stylesheet" href="css/navigation.css" /> |
|
|
<link rel="stylesheet" href="css/section.css" /> |
|
|
<link rel="stylesheet" href="css/footer.css" /> |
|
|
<link rel="stylesheet" href="css/responsive.css" /> |
|
|
</head> |
|
|
<body> |
|
|
<div class="blur__overlay"></div> |
|
|
|
|
|
<header class="header"> |
|
|
<a class="header__left" href="signup.html"> |
|
|
<img class="header__logo" src="media/tesla_logo.svg" alt="" /> |
|
|
</a> |
|
|
|
|
|
<ul class="header__middle"> |
|
|
<li> |
|
|
<li><a class="header__nav__btn" href="signup.html">Model S</a></li> |
|
|
<li><a class="header__nav__btn" href="signup.html">Model 3</a></li> |
|
|
<li><a class="header__nav__btn" href="signup.html">Model X</a></li> |
|
|
<li><a class="header__nav__btn" href="signup.html">Model Y</a></li> |
|
|
<li><a class="header__nav__btn" href="signup.html">solar roof</a></li> |
|
|
<li><a class="header__nav__btn" href="signup.html">solar panels</a></li> |
|
|
</li> |
|
|
</ul> |
|
|
|
|
|
<div class="header__right"> |
|
|
<a class="header__nav__btn" href="signup.html">shop</a> |
|
|
<a class="header__nav__btn" href="signup.html">account</a> |
|
|
<a class="header__nav__btn menu__btn" href="signup.html">menu</a> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<nav class="navigation"> |
|
|
<div class="close__btn__container"> |
|
|
<img class="navigation__close__btn" src="media/close_icon.svg" alt="" /> |
|
|
</div> |
|
|
|
|
|
<ul> |
|
|
<li class="link__in__middle"><a class="nav__link" href="signup.html">Model S</a></li> |
|
|
<li class="link__in__middle"><a class="nav__link" href="signup.html">Model 3</a></li> |
|
|
<li class="link__in__middle"><a class="nav__link" href="signup.html">Model X</a></li> |
|
|
<li class="link__in__middle"><a class="nav__link" href="signup.html">Model Y</a></li> |
|
|
<li class="link__in__middle"> |
|
|
<a class="nav__link" href="signup.html">Solar roofs</a> |
|
|
</li> |
|
|
<li class="link__in__middle"> |
|
|
<a class="nav__link" href="signup.html">Solar panels</a> |
|
|
</li> |
|
|
<li><a class="nav__link" href="signup.html">Existing Inventory </a></li> |
|
|
<li><a class="nav__link" href="signup.html">Used Inventory </a></li> |
|
|
<li><a class="nav__link" href="signup.html">Trade-In </a></li> |
|
|
<li><a class="nav__link" href="signup.html">Test drive </a></li> |
|
|
<li><a class="nav__link" href="signup.html">Powerwall </a></li> |
|
|
<li><a class="nav__link" href="signup.html">Commercial Energy </a></li> |
|
|
<li><a class="nav__link" href="signup.html">utilities </a></li> |
|
|
<li><a class="nav__link" href="signup.html">Charging</a></li> |
|
|
<li><a class="nav__link" href="signup.html">Find us</a></li> |
|
|
<li><a class="nav__link" href="signup.html">Support</a></li> |
|
|
<li><a class="nav__link" href="signup.html">Investor Relations</a></li> |
|
|
</ul> |
|
|
</nav> |
|
|
|
|
|
<section id="fullpage"> |
|
|
<section class="section one"> |
|
|
<div class="section__content"> |
|
|
<h1 class="section__content__title">{title_one}</h1> |
|
|
<h2 class="section__content__subtitle"> |
|
|
{subtitle_one} |
|
|
</h2> |
|
|
</div> |
|
|
|
|
|
<div class="section__action__container"> |
|
|
<a class="section__action__btn action__btn__primary" href="signup.html" |
|
|
>{btn_primary_one}</a |
|
|
> |
|
|
<a class="section__action__btn action__btn__secondary" href="signup.html" |
|
|
>{btn_secondary_one}</a |
|
|
> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="section two"> |
|
|
<div class="section__content"> |
|
|
<h1 class="section__content__title">{title_two}</h1> |
|
|
<h2 class="section__content__subtitle"> |
|
|
{subtitle_two} |
|
|
</h2> |
|
|
</div> |
|
|
|
|
|
<div class="section__action__container"> |
|
|
<a class="section__action__btn action__btn__primary" href="signup.html" |
|
|
>{btn_primary_two}</a |
|
|
> |
|
|
<a class="section__action__btn action__btn__secondary" href="signup.html" |
|
|
>{btn_secondary_two}</a |
|
|
> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="section three"> |
|
|
<div class="section__content"> |
|
|
<h1 class="section__content__title">{title_three}</h1> |
|
|
<h2 class="section__content__subtitle"> |
|
|
{subtitle_three} |
|
|
</h2> |
|
|
</div> |
|
|
|
|
|
<div class="section__action__container"> |
|
|
<a class="section__action__btn action__btn__primary" href="signup.html" |
|
|
>{btn_primary_three}</a |
|
|
> |
|
|
<a class="section__action__btn action__btn__secondary" href="signup.html" |
|
|
>{btn_secondary_three}</a |
|
|
> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="section four"> |
|
|
<div class="section__content"> |
|
|
<h1 class="section__content__title">{title_four}</h1> |
|
|
<h2 class="section__content__subtitle"> |
|
|
{subtitle_four} |
|
|
</h2> |
|
|
</div> |
|
|
|
|
|
<div class="section__action__container"> |
|
|
<a class="section__action__btn action__btn__primary" href="signup.html" |
|
|
>{btn_primary_four}</a |
|
|
> |
|
|
<a class="section__action__btn action__btn__secondary" href="signup.html" |
|
|
>{btn_secondary_four}</a |
|
|
> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="section five"> |
|
|
<div class="section__content"> |
|
|
<h1 class="section__content__title">{title_five}</h1> |
|
|
<h2 class="section__content__subtitle"> |
|
|
{subtitle_five} |
|
|
</h2> |
|
|
</div> |
|
|
|
|
|
<div class="section__action__container"> |
|
|
<a class="section__action__btn action__btn__primary" href="signup.html">{btn_primary_five}</a> |
|
|
<a class="section__action__btn action__btn__secondary" href="signup.html" |
|
|
>{btn_secondary_five}</a |
|
|
> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="section six"> |
|
|
<div class="section__content"> |
|
|
<h1 class="section__content__title">{title_six}</h1> |
|
|
<h2 class="section__content__subtitle"> |
|
|
{subtitle_six} |
|
|
</h2> |
|
|
</div> |
|
|
|
|
|
<div class="section__action__container"> |
|
|
<a class="section__action__btn action__btn__primary" href="signup.html">{btn_primary_six}</a> |
|
|
<a class="section__action__btn action__btn__secondary" href="signup.html" |
|
|
>{btn_secondary_six}</a |
|
|
> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="section seven"> |
|
|
<div class="section__content"> |
|
|
<h1 class="section__content__title">{title_seven}</h1> |
|
|
</div> |
|
|
|
|
|
<div class="section__action__container"> |
|
|
<a class="section__action__btn action__btn__primary" href="signup.html">{btn_primary_seven}</a> |
|
|
</div> |
|
|
|
|
|
<footer class="footer"> |
|
|
<ul> |
|
|
<li><a href="signup.html">Tesla © 2021</a></li> |
|
|
<li><a href="signup.html"> Privacy & Legal </a></li> |
|
|
<li><a href="signup.html"> contact </a></li> |
|
|
<li><a href="signup.html">careers</a></li> |
|
|
<li><a href="signup.html">news</a></li> |
|
|
<li><a href="signup.html">engage</a></li> |
|
|
<li><a href="signup.html">locations</a></li> |
|
|
</ul> |
|
|
</footer> |
|
|
</section> |
|
|
</section> |
|
|
|
|
|
<script |
|
|
src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js" |
|
|
integrity="sha512-gSf3NCgs6wWEdztl1e6vUqtRP884ONnCNzCpomdoQ0xXsk06lrxJsR7jX5yM/qAGkPGsps+4bLV5IEjhOZX+gg==" |
|
|
crossorigin="anonymous" |
|
|
referrerpolicy="no-referrer" |
|
|
></script> |
|
|
|
|
|
<script src="js/script.js"></script> |
|
|
</body> |
|
|
</html>""" |
|
|
|
|
|
def generate_html( |
|
|
title_one, subtitle_one, btn_primary_one, btn_secondary_one, |
|
|
title_two, subtitle_two, btn_primary_two, btn_secondary_two, |
|
|
title_three, subtitle_three, btn_primary_three, btn_secondary_three, |
|
|
title_four, subtitle_four, btn_primary_four, btn_secondary_four, |
|
|
title_five, subtitle_five, btn_primary_five, btn_secondary_five, |
|
|
title_six, subtitle_six, btn_primary_six, btn_secondary_six, |
|
|
title_seven, btn_primary_seven |
|
|
): |
|
|
|
|
|
html = HTML_TEMPLATE.format( |
|
|
title_one=title_one, |
|
|
subtitle_one=subtitle_one, |
|
|
btn_primary_one=btn_primary_one, |
|
|
btn_secondary_one=btn_secondary_one, |
|
|
title_two=title_two, |
|
|
subtitle_two=subtitle_two, |
|
|
btn_primary_two=btn_primary_two, |
|
|
btn_secondary_two=btn_secondary_two, |
|
|
title_three=title_three, |
|
|
subtitle_three=subtitle_three, |
|
|
btn_primary_three=btn_primary_three, |
|
|
btn_secondary_three=btn_secondary_three, |
|
|
title_four=title_four, |
|
|
subtitle_four=subtitle_four, |
|
|
btn_primary_four=btn_primary_four, |
|
|
btn_secondary_four=btn_secondary_four, |
|
|
title_five=title_five, |
|
|
subtitle_five=subtitle_five, |
|
|
btn_primary_five=btn_primary_five, |
|
|
btn_secondary_five=btn_secondary_five, |
|
|
title_six=title_six, |
|
|
subtitle_six=subtitle_six, |
|
|
btn_primary_six=btn_primary_six, |
|
|
btn_secondary_six=btn_secondary_six, |
|
|
title_seven=title_seven, |
|
|
btn_primary_seven=btn_primary_seven |
|
|
) |
|
|
|
|
|
with tempfile.NamedTemporaryFile(mode='w+', suffix='.html', delete=False, encoding='utf-8') as tmp_file: |
|
|
tmp_file.write(html) |
|
|
tmp_path = tmp_file.name |
|
|
return tmp_path, html |
|
|
|
|
|
with gr.Blocks(title="Tesla Page Editor") as demo: |
|
|
gr.Markdown("# Tesla Page Text Editor\nEdit texts below to customize sections for visitor engagement. Preview scrolls like the original!") |
|
|
|
|
|
with gr.Row(): |
|
|
with gr.Column(scale=1): |
|
|
gr.Markdown("### Section 1 (Model S)") |
|
|
title_one = gr.Textbox("Model S", label="Title") |
|
|
subtitle_one = gr.Textbox("order online for <a href='signup.html'>Touchless delivery</a>", label="Subtitle (HTML OK)") |
|
|
btn_primary_one = gr.Textbox("Custom Order", label="Primary Button") |
|
|
btn_secondary_one = gr.Textbox("Existing inventory", label="Secondary Button") |
|
|
|
|
|
gr.Markdown("### Section 2 (Model Y)") |
|
|
title_two = gr.Textbox("Model y", label="Title") |
|
|
subtitle_two = gr.Textbox("order online for <a href='signup.html'>Touchless delivery</a>", label="Subtitle") |
|
|
btn_primary_two = gr.Textbox("Custom Order", label="Primary Button") |
|
|
btn_secondary_two = gr.Textbox("Existing inventory", label="Secondary Button") |
|
|
|
|
|
gr.Markdown("### Section 3 (Model 3)") |
|
|
title_three = gr.Textbox("Model 3", label="Title") |
|
|
subtitle_three = gr.Textbox("order online for <a href='signup.html'>Touchless delivery</a>", label="Subtitle") |
|
|
btn_primary_three = gr.Textbox("Custom Order", label="Primary Button") |
|
|
btn_secondary_three = gr.Textbox("Existing inventory", label="Secondary Button") |
|
|
|
|
|
gr.Markdown("### Section 4 (Model X)") |
|
|
title_four = gr.Textbox("Model x", label="Title") |
|
|
subtitle_four = gr.Textbox("order online for <a href='signup.html'>Touchless delivery</a>", label="Subtitle") |
|
|
btn_primary_four = gr.Textbox("Custom Order", label="Primary Button") |
|
|
btn_secondary_four = gr.Textbox("Existing inventory", label="Secondary Button") |
|
|
|
|
|
gr.Markdown("### Section 5 (Solar Panels)") |
|
|
title_five = gr.Textbox("solar panels", label="Title") |
|
|
subtitle_five = gr.Textbox("Lowest Cost Solar Panels In America", label="Subtitle") |
|
|
btn_primary_five = gr.Textbox("Order now", label="Primary Button") |
|
|
btn_secondary_five = gr.Textbox("Learn more", label="Secondary Button") |
|
|
|
|
|
gr.Markdown("### Section 6 (Solar Roofs)") |
|
|
title_six = gr.Textbox("Solar roofs", label="Title") |
|
|
subtitle_six = gr.Textbox("Produce Clean Energy From Your Roof", label="Subtitle") |
|
|
btn_primary_six = gr.Textbox("Order now", label="Primary Button") |
|
|
btn_secondary_six = gr.Textbox("Learn more", label="Secondary Button") |
|
|
|
|
|
gr.Markdown("### Section 7 (Accessories)") |
|
|
title_seven = gr.Textbox("Accessories", label="Title") |
|
|
btn_primary_seven = gr.Textbox("Shop now", label="Primary Button") |
|
|
|
|
|
generate_btn = gr.Button("Generate & Preview", variant="primary") |
|
|
|
|
|
with gr.Column(scale=2): |
|
|
preview = gr.HTML(label="Live Preview") |
|
|
download = gr.File(label="Download Updated index.html") |
|
|
|
|
|
generate_btn.click( |
|
|
generate_html, |
|
|
inputs=[ |
|
|
title_one, subtitle_one, btn_primary_one, btn_secondary_one, |
|
|
title_two, subtitle_two, btn_primary_two, btn_secondary_two, |
|
|
title_three, subtitle_three, btn_primary_three, btn_secondary_three, |
|
|
title_four, subtitle_four, btn_primary_four, btn_secondary_four, |
|
|
title_five, subtitle_five, btn_primary_five, btn_secondary_five, |
|
|
title_six, subtitle_six, btn_primary_six, btn_secondary_six, |
|
|
title_seven, btn_primary_seven |
|
|
], |
|
|
outputs=[download, preview] |
|
|
) |
|
|
|
|
|
if __name__ == "__main__": |
|
|
demo.launch() |
