sparksuite / simple-html-invoice-template Goto Github PK

View Code? Open in Web Editor NEW

1.6K 1.6K 1.2K 53 KB

A modern, clean, and very simple responsive HTML invoice template

Home Page: https://sparksuite.github.io/simple-html-invoice-template/

License: MIT License

HTML 100.00%

css html-template invoice

simple-html-invoice-template's People

Contributors

Stargazers

Watchers

Forkers

gayanhewa josemiguelweb mavencode01 j3j5 arunshejul rizerzero ryantroll antoniocarlosortiz martian4x devmks muhammed-sh facilita-tecnologia risul daudmabena sreelalpm apilayer dylannoteboom dsfser mingxuanli vijaysebastian designerrahul dextercool jrichardsz tewdyn akpansari emadelmogy annamaltseva larcara pipoo robinsonmichael prabhat11 femotizo ryanhs ben-liang rootedsoftware kimtrien aliamazone kelf47 20uf ashish2309 tachyons kennedy93 nivalamata farzak glcoding opensource-it mcl21us wraptechologies petengdedet racksam kvaillant cycorld kelemenbalazs bosz fantasticjimmy daradonn sarath-offshorent anassss sheikhusman545 retailify cathywei eenetrecore naveenycc al-amin-ceazer arudaz agathis gudurud09 chalchuck whitnell-analytics pstech23 njorogejohn olivier-torres lutonda pacohams gima89 shrutikarekal123 adibhanna ranjith1894 yinon111 jzabrams feusebio lisabi robindirksen1 scorredoira karennl vishal-neosofttech mdjaman cracki yolao anioko fthrhmn antonio9357 rifkiferdian oozzal oussama-tn sgaved nathanvss babchai hizaguirre whitehorse0

simple-html-invoice-template's Issues

What if content is longer than 1 page

First, thank you for sharing this nice template. I just want to ask, do we have a solution in case the content is longer than 1 page? Because printing a html page longer than 1 page, can be ugly because it may cut a line of text and continues in a new page.

Image is not displayed properly

the card background height issue

i'm using this code to use as invoice and send it via email
when i check the results, the card background or invoice-box height is not cover all body

here's my code


<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>A simple, clean, and responsive HTML invoice template</title>
    
    <style>
    .invoice-box {
        max-width: 800px;
        height: auto;
        margin: auto;
        padding: 30px;
        border: 1px solid #eee;
        box-shadow: 0 0 10px rgba(0, 0, 0, .15);
        font-size: 16px;
        line-height: 24px;
        font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
        color: #555;
    }
    
    .invoice-box table {
        width: 100%;
        text-align: left;
    }
    
    .invoice-box table td {
        padding: 5px;
        vertical-align: top;
    }
    
    .invoice-box table tr td:nth-child(2) {
        text-align: right;
    }
    
    .invoice-box table tr.top table td {
        padding-bottom: 20px;
    }
    
    .invoice-box table tr.top table td.title {
        font-size: 45px;
        line-height: 45px;
        color: #333;
    }
    
    .invoice-box table tr.information table td {
        padding-bottom: 40px;
    }
    
    .invoice-box table tr.heading td {
        background: #eee;
        border-bottom: 1px solid #ddd;
        font-weight: bold;
    }
    
    .invoice-box table tr.details td {
        padding-bottom: 20px;
    }
    
    .invoice-box table tr.item td{
        border-bottom: 1px solid #eee;
    }
    
    .invoice-box table tr.item.last td {
        border-bottom: none;
    }
    
    .invoice-box table tr.total td:nth-child(2) {
        border-top: 2px solid #eee;
        font-weight: bold;
    }
    
    @media only screen and (max-width: 600px) {
        .invoice-box table tr.top table td {
            width: 100%;
            display: block;
            text-align: center;
        }
        
        .invoice-box table tr.information table td {
            width: 100%;
            display: block;
            text-align: center;
        }
    }
    
    /** RTL **/
    .rtl {
        direction: rtl;
        font-family: Tahoma, 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
    }
    
    .rtl table {
        text-align: right;
    }
    
    .rtl table tr td:nth-child(2) {
        text-align: left;
    }
    </style>
</head>

<body>
    <div class="invoice-box">
        <table cellpadding="0" cellspacing="0">
            <tr class="top">
                <td colspan="2">
                    <table>
                        <tr>
                            <td class="title">
                                <img src="https://dilo-image.apps.playcourt.id/tenant/2fed6bc8-9b14-4631-89d5-b272971b8649.png"">
                            </td>
                            
                            <td>
                                Invoice #<%= id_peminjaman %><br>
                                <%= tanggal_dibuat %><br>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            
            <tr class="information">
                <td colspan="2">
                    <table>
                        <tr>
                            <td>
                                Digital Innovation Lounge Balikpapan<br>
                                Jalan MT. Haryono Gedung Telkom STO 3 <br>
                                Pertokoan Balikpapan Baru <br>
                                Kota Balikpapan, Indonesia
                            </td>
                            
                            <td>
                                <%= name %><br>
                                <%= email %><br>
                                <%= phone %>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            
            <tr class="heading">
                <td>
                    Informasi Peminjaman
                </td>

                <td>

                </td>
                
            </tr>

            <tr class="item">
                <td>
                    Tanggal Peminjaman
                </td>
                
                <td>
                    <%= tanggal_peminjaman %>
                </td>
            </tr>

            <tr class="item">
                <td>
                    Waktu Peminjaman
                </td>
                
                <td>
                    <%= waktu_mulai %> s/d <%= waktu_selesai %>
                </td>
            </tr>

            <tr class="item">
                <td>
                    Status
                </td>
                
                <td>
                    Menunggu Konfirmasi Admin
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

actually same as the github, the code was modified
is it ok to convert the html to .ejs ? or the problem because i convert the .html to .ejs ?

Not center in gmail web client.

It will be nice if it could be centered in gmail client.

Printable area

Your link to website is dead.. Please update

Add printer-friendly style

Add a custom style that is more friendly to printers.

Taxes

@WesCossick et al,

I absolutely love the cleanliness of this template!

And would very much like to provide it by default in an update of my laravel-invoicable package.

For this to work I'd need to hack some tax fields in (percentage per product/line), and show a tax total.

Do you have some plans/suggestions for supporting this?

Sander

Want to add page-break

I am having list of products clubbed by categories. I am trying to add page-break-after after a category of products so that it gets printed on new page. Problem with page-break-after property works only with block elements. If I try to insert any block elements within the table it automatically gets shifted on top of the table.

Please provide some solution.

No Edit Option

it is just a html template, why there is no edit button?

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.