Repository: claudiodangelis/qrcp
File: pages/pages.go (Go)

Code before:
                    <path d="M583.855,216.24l-7.921,39.747h-13.2l0.807-3.74c-3.08,2.86-6.894,4.4-11.514,4.4c-8.58,0-16.793-6.526-16.793-18.114
                c0-13.199,9.68-22.953,21.561-22.953c5.354,0,9.68,1.613,12.173,5.428l0.953-4.768H583.855z M566.328,234.354
                c0-4.619-2.787-7.627-7.554-7.627c-5.5,0-9.46,4.475-9.46,11.147c0,4.62,2.787,7.554,7.553,7.554
                C562.441,245.428,566.328,240.954,566.328,234.354z" />
                    <path d="M632.033,229.074c0,1.539-0.146,3.152-0.514,4.913l-4.398,22h-13.934l4.105-20.681c0.221-0.953,0.293-1.833,0.293-2.64
                c0-3.446-1.76-5.28-5.5-5.28c-4.766,0-8.066,2.86-9.312,8.947l-3.961,19.653H584.88l7.92-39.747H606l-0.807,4.107
                c3.52-3.301,8.066-4.768,12.467-4.768C626.166,215.58,632.033,220.2,632.033,229.074z" />
                    <path d="M634.234,252.761l5.059-9.753c3.668,2.346,9.094,3.666,13.787,3.666c4.547,0,6.381-1.1,6.381-2.859
                c0-4.547-20.607-0.367-20.607-13.787c0-9.533,9.166-14.447,21.193-14.447c5.646,0,11.221,1.174,15.107,3.154l-4.914,9.753
                c-3.887-2.347-8.287-3.007-11.807-3.007c-4.547,0-6.381,1.394-6.381,3.007c0,4.767,20.535,0.513,20.535,13.786
                c0,9.534-9.314,14.374-21.121,14.374C644.427,256.647,637.679,254.961,634.234,252.761z" />
                    <path d="M698.986,216.9l-0.146,0.807h9.387l-2.053,10.414h-9.02l-5.574,27.866h-13.934l5.574-27.866h-5.867l2.127-10.414h5.867
                l0.293-1.613c1.832-9.094,8.066-15.18,18.699-15.18c3.74,0,7.188,0.732,9.607,2.127l-5.354,9.753
                c-1.174-0.733-2.566-1.173-4.107-1.173C701.406,211.621,699.792,213.307,698.986,216.9z" />
                    <path d="M749.513,239.561h-29.188c0.514,4.4,3.52,6.453,9.02,6.453c3.521,0,6.967-1.1,9.607-3.227l5.793,8.727
                c-4.986,3.667-10.926,5.134-16.939,5.134c-12.76,0-21.121-7.04-21.121-18.114c0-13.199,9.754-22.953,24.055-22.953
                c12.1,0,19.58,7.041,19.58,17.453C750.32,235.381,749.953,237.58,749.513,239.561z M721.132,232.227h16.354
                c0.074-4.253-2.934-6.746-7.406-6.746C725.386,225.48,722.453,228.268,721.132,232.227z" />
                    <path d="M786.765,215.58l-2.42,12.541c-1.246-0.147-2.053-0.221-3.152-0.221c-6.088,0-9.975,2.713-11.295,9.313l-3.812,18.773
                h-13.934l7.92-39.747h13.201l-0.881,4.4C775.912,217.047,780.826,215.58,786.765,215.58z" />
                </g>
            </svg>
        </div>
        <div class="row">
            <form id="upload-form">
                <div class="form-group">
                    <label for="plaintext-title">
                        Title
                    </label>
                    <input class="form-control" id="plaintext-title">   
                </div>
                <div class="form-group">
                    <label for="plaintext-text">
                        Text
                    </label>
                    <textarea class="form-control" id="plaintext-text"></textarea>
                </div>
                <div class="form-group">
                    <label for="files">
                        Files to transfer
                    </label>
                    <input class="form-control-file" type="file" id="files" name="files" multiple>
                </div>
                <div class="form-group">
                    <input class="btn btn-primary form-control form-control-lg" type="submit" id="submit" name="submit" value="Transfer">
                </div>
            </form>
        </div>
    </div>
    <script>
        var uploadForm = document.getElementById('upload-form')

Review comment (suggestion):
I would move the "File upload" section above the "Text upload", and would make it clearer that those are two different modes.

```
Send fiels (title)
  Files to transfer (label + button)
Send text (title)
  Title, Text (labels + inputs)
Transfer (button)
```

Ideally, the _Send text_ section should be collapsible and hidden by default so we don't waste space.
The page uses Bootstrap so it shouldn't be hard to implement.



Code after:
                    <path d="M583.855,216.24l-7.921,39.747h-13.2l0.807-3.74c-3.08,2.86-6.894,4.4-11.514,4.4c-8.58,0-16.793-6.526-16.793-18.114
                c0-13.199,9.68-22.953,21.561-22.953c5.354,0,9.68,1.613,12.173,5.428l0.953-4.768H583.855z M566.328,234.354
                c0-4.619-2.787-7.627-7.554-7.627c-5.5,0-9.46,4.475-9.46,11.147c0,4.62,2.787,7.554,7.553,7.554
                C562.441,245.428,566.328,240.954,566.328,234.354z" />
                    <path d="M632.033,229.074c0,1.539-0.146,3.152-0.514,4.913l-4.398,22h-13.934l4.105-20.681c0.221-0.953,0.293-1.833,0.293-2.64
                c0-3.446-1.76-5.28-5.5-5.28c-4.766,0-8.066,2.86-9.312,8.947l-3.961,19.653H584.88l7.92-39.747H606l-0.807,4.107
                c3.52-3.301,8.066-4.768,12.467-4.768C626.166,215.58,632.033,220.2,632.033,229.074z" />
                    <path d="M634.234,252.761l5.059-9.753c3.668,2.346,9.094,3.666,13.787,3.666c4.547,0,6.381-1.1,6.381-2.859
                c0-4.547-20.607-0.367-20.607-13.787c0-9.533,9.166-14.447,21.193-14.447c5.646,0,11.221,1.174,15.107,3.154l-4.914,9.753
                c-3.887-2.347-8.287-3.007-11.807-3.007c-4.547,0-6.381,1.394-6.381,3.007c0,4.767,20.535,0.513,20.535,13.786
                c0,9.534-9.314,14.374-21.121,14.374C644.427,256.647,637.679,254.961,634.234,252.761z" />
                    <path d="M698.986,216.9l-0.146,0.807h9.387l-2.053,10.414h-9.02l-5.574,27.866h-13.934l5.574-27.866h-5.867l2.127-10.414h5.867
                l0.293-1.613c1.832-9.094,8.066-15.18,18.699-15.18c3.74,0,7.188,0.732,9.607,2.127l-5.354,9.753
                c-1.174-0.733-2.566-1.173-4.107-1.173C701.406,211.621,699.792,213.307,698.986,216.9z" />
                    <path d="M749.513,239.561h-29.188c0.514,4.4,3.52,6.453,9.02,6.453c3.521,0,6.967-1.1,9.607-3.227l5.793,8.727
                c-4.986,3.667-10.926,5.134-16.939,5.134c-12.76,0-21.121-7.04-21.121-18.114c0-13.199,9.754-22.953,24.055-22.953
                c12.1,0,19.58,7.041,19.58,17.453C750.32,235.381,749.953,237.58,749.513,239.561z M721.132,232.227h16.354
                c0.074-4.253-2.934-6.746-7.406-6.746C725.386,225.48,722.453,228.268,721.132,232.227z" />
                    <path d="M786.765,215.58l-2.42,12.541c-1.246-0.147-2.053-0.221-3.152-0.221c-6.088,0-9.975,2.713-11.295,9.313l-3.812,18.773
                h-13.934l7.92-39.747h13.201l-0.881,4.4C775.912,217.047,780.826,215.58,786.765,215.58z" />
                </g>
            </svg>
        </div>
        <div class="row">
            <form id="upload-form">
                <h3>Send files or text</h3>
                <div class="form-group">
                    <label for="files">
                        Files to transfer
                    </label>
                    <input class="form-control-file" type="file" id="files" name="files" multiple>
                </div>
                <div class="form-group form-check">
                    <input type="checkbox" class="form-check-input" id="check-send-text">
                    <label class="form-check-label" for="check-send-text">Show text options</label>
                </div>
                <div id="send-text-form" style="display: none">
                    <div class="form-group">
                        <label for="plaintext-title">
                            Title
                        </label>
                        <input class="form-control" id="plaintext-title">   
                    </div>
                    <div class="form-group">
                        <label for="plaintext-text">
                            Text
                        </label>
                        <textarea class="form-control" id="plaintext-text"></textarea>
                    </div>
                </div>
                <div class="form-group">