Add Inter-Actief styling

This commit is contained in:
Kevin Alberts 2019-06-08 19:45:41 +02:00
parent 9800858fb3
commit 332d82e97a
Signed by: Kurocon
GPG key ID: BCD496FEBA0C6BC1
6 changed files with 633 additions and 39 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 264 KiB

3
static/ia-logo.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 8.1 KiB

196
static/ia.css Normal file
View file

@ -0,0 +1,196 @@
body{
margin: 0 0 2rem;
background-color: #f4f4f4;
font-family: Open Sans, Arial, sans-serif;
}
#top{
background-color: #1D428A;
width: 100%;
display: flex;
justify-content: center;
}
#header {
height: 6rem;
display: flex;
align-items: center;
}
#logo img {
height: 3rem;
}
#logo {
margin-right: 1rem;
align-items: center;
}
#title {
color: white;
text-decoration: none;
font-family: "Humanst521 BT", "Open Sans", sans-serif;
font-size: 2.75rem;
line-height: 2.75rem;
}
#middle {
width: 100%;
display: flex;
justify-content: center;
}
#content {
min-height: 100px;
min-width: 200px;
margin: 1rem;
width: 600px;
}
#box {
padding: 1rem;
}
#box .form {
margin-bottom: 1rem;
}
#box-title {
margin: 0 0 0.5rem 0;
font-family: "Humanst521 BT", "Open Sans", sans-serif;
font-size: 2.5rem;
font-weight: normal;
}
.drop-shadow {
filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.5));
}
#long-url-box{
display: flex;
align-items: stretch;
}
#long-url-box .prepend {
background-color: #1D428A;
color: white;
font-family: "Humanst521 BT", "Open Sans", sans-serif;
font-size: 2rem;
font-weight: bold;
display: block;
padding: 0.5rem;
text-align: center;
z-index: 1;
margin-top: 1rem;
margin-bottom: 1rem;
}
#long-url {
width: 1%;
min-width: 40px;
flex: 1 1 auto;
font-size: 1.75rem;
color: black;
position: relative;
border: none;
padding: 0.5rem;
margin-top: 1rem;
margin-bottom: 1rem;
border-top: 1px solid rgba(0, 0, 0, 0.5);
border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}
#submit {
background-color: #077821;
color: white;
border: none;
font-size: 2rem;
cursor: pointer;
font-weight: normal;
padding: 0.5rem;
font-family: "Humanst521 BT", "Open Sans", sans-serif;
margin-top: 1rem;
margin-bottom: 1rem;
}
#submit:hover {
background-color: #099A2B;
}
#custom-link-box .optional {
font-size: 1.25rem;
margin-top: 0.5em;
margin-bottom: 0.5rem;
}
#custom-label {
display: flex;
align-items: stretch;
}
#custom-label .url {
float: left;
background-color: #1D428A;
color: white;
font-family: "Humanst521 BT", "Open Sans", sans-serif;
font-size: 1.5rem;
font-weight: normal;
display: block;
padding: 0.5rem;
text-align: center;
z-index: 1;
}
#custom-link {
width: 1%;
min-width: 40px;
flex: 1 1 auto;
font-size: 1.5rem;
color: black;
position: relative;
border: none;
padding: 0.5rem;
border-top: 1px solid rgba(0, 0, 0, 0.5);
border-bottom: 1px solid rgba(0, 0, 0, 0.5);
border-right: 1px solid rgba(0, 0, 0, 0.5);
}
.success {
color: #077821;
font-size: 1.25rem;
}
.error {
color: #B8231F;
font-size: 1.25rem;
}
.success span {
display: block;
}
.success a {
color: #153065;
text-decoration: none;
font-family: monospace;
font-size: 1.25rem;
display: block;
margin-top: 0.25rem;
padding: 0.25rem;
border: 1px solid rgba(0, 0, 0, 0.5);
background-color: white;
text-align: center;
}
.success a:hover {
color: #2450A8;
text-decoration: underline;
}

192
static/ictsv-logo-white.svg Normal file
View file

@ -0,0 +1,192 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
x="0px"
y="0px"
width="566.92999"
height="269.44601"
viewBox="0 0 566.92999 269.44601"
enable-background="new 0 0 768 768"
xml:space="preserve"
id="svg50"
sodipodi:docname="ictsv-logo-white.svg"
inkscape:version="0.92.4 5da689c313, 2019-01-14"><metadata
id="metadata56"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
id="defs54" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="822"
inkscape:window-height="1008"
id="namedview52"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:zoom="0.30729167"
inkscape:cx="-421.66542"
inkscape:cy="127.722"
inkscape:window-x="848"
inkscape:window-y="32"
inkscape:window-maximized="0"
inkscape:current-layer="svg50" />
<g
id="Layer_1"
transform="translate(-100.535,-242.276)"
style="fill:#ffffff;fill-opacity:1">
<g
id="g32"
style="fill:#ffffff;fill-opacity:1">
<defs
id="defs3">
<rect
id="SVGID_1_"
width="768"
height="768"
x="0"
y="0" />
</defs>
<clipPath
id="SVGID_2_">
<use
xlink:href="#SVGID_1_"
overflow="visible"
id="use5"
style="overflow:visible"
x="0"
y="0"
width="100%"
height="100%" />
</clipPath>
<path
display="none"
clip-path="url(#SVGID_2_)"
d="m 333.281,235.796 c 32.093,-26.038 116.944,-65.248 166.63,-65.248 5.19,-2.978 15.272,-13.839 6.532,-18.452 -56.022,0 -155.384,44.112 -194.98,83.7 h 11.592 z"
id="path8"
inkscape:connector-curvature="0"
style="display:none;fill:#ffffff;fill-opacity:1" />
<path
display="none"
clip-path="url(#SVGID_2_)"
d="m 236.533,599.653 c -27.05,0 -50.779,-6.768 -67.991,-20.319 -7.664,-6.46 -41.291,-39.982 -19.34,-115.698 2.343,-7.478 4.804,-15.165 6.996,-23.598 1.053,-4.144 -4.809,-9.799 -8.361,-5.295 -3.683,4.801 -6.75,10.573 -9.316,16.892 l -0.003,-0.002 c 0,0 -20.176,43.844 -11.562,89.039 2.684,17.335 9.551,31.981 19.717,43.68 0.047,0.06 0.09,0.119 0.137,0.179 l 0.02,-0.003 c 18.764,21.465 48.6,32.986 83.837,32.986 89.368,0 190.261,-48.618 262.249,-106.273 h -21.142 c -64.001,47.473 -160.769,88.412 -235.241,88.412"
id="path10"
inkscape:connector-curvature="0"
style="display:none;fill:#ffffff;fill-opacity:1" />
<path
display="none"
clip-path="url(#SVGID_2_)"
d="m 627.37,259.813 c 0,17.687 -1.824,31.617 -7.396,48.431 -1.738,7.205 -0.196,11.15 7.015,6.728 9.518,-14.509 12.967,-40.649 12.967,-58.23 0,-55.26 -26.896,-94.081 -83.023,-104.363 -7.303,1.733 -12.579,12.113 -6.725,18.452 45.549,2.789 77.162,45.935 77.162,88.982"
id="path12"
inkscape:connector-curvature="0"
style="display:none;fill:#ffffff;fill-opacity:1" />
<path
display="none"
clip-path="url(#SVGID_2_)"
d="M 516.538,425.117 H 253.132 c -8.848,0 -11.452,4.644 -11.452,11.453 v 57.262 c 0,6.808 2.604,11.452 11.452,11.452 h 263.406 c 8.848,0 11.452,-4.645 11.452,-11.452 V 436.57 c 0,-6.809 -2.604,-11.453 -11.452,-11.453 M 489.32,473.79 h -11.452 c -4.744,0 -8.59,-3.846 -8.59,-8.589 0,-4.744 3.846,-8.59 8.59,-8.59 h 11.452 c 4.744,0 8.589,3.846 8.589,8.59 0,4.743 -3.845,8.589 -8.589,8.589"
id="path14"
inkscape:connector-curvature="0"
style="display:none;fill:#ffffff;fill-opacity:1" />
<path
display="none"
clip-path="url(#SVGID_2_)"
d="M 516.538,333.165 H 253.132 c -8.848,0 -11.452,4.644 -11.452,11.453 v 57.262 c 0,6.809 2.604,11.452 11.452,11.452 h 263.406 c 8.848,0 11.452,-4.644 11.452,-11.452 v -57.262 c 0,-6.81 -2.604,-11.453 -11.452,-11.453 m -27.218,48.672 h -11.452 c -4.744,0 -8.59,-3.846 -8.59,-8.589 0,-4.744 3.846,-8.59 8.59,-8.59 h 11.452 c 4.744,0 8.589,3.846 8.589,8.59 0,4.743 -3.845,8.589 -8.589,8.589"
id="path16"
inkscape:connector-curvature="0"
style="display:none;fill:#ffffff;fill-opacity:1" />
<path
display="none"
clip-path="url(#SVGID_2_)"
d="M 516.538,241.878 H 253.132 c -8.848,0 -11.452,4.644 -11.452,11.453 v 57.262 c 0,6.808 2.604,11.452 11.452,11.452 h 263.406 c 8.848,0 11.452,-4.644 11.452,-11.452 v -57.262 c 0,-6.809 -2.604,-11.453 -11.452,-11.453 m -27.218,48.673 h -11.452 c -4.744,0 -8.59,-3.846 -8.59,-8.589 0,-4.744 3.846,-8.59 8.59,-8.59 h 11.452 c 4.744,0 8.589,3.846 8.589,8.59 0,4.743 -3.845,8.589 -8.589,8.589"
id="path18"
inkscape:connector-curvature="0"
style="display:none;fill:#ffffff;fill-opacity:1" />
<polygon
clip-path="url(#SVGID_2_)"
points="231.842,250.879 100.535,373.088 231.842,495.002 231.842,469.299 128.881,373.704 231.842,277.877 "
id="polygon20"
style="fill:#ffffff;fill-opacity:1" />
<polygon
clip-path="url(#SVGID_2_)"
points="536.158,251.495 667.465,373.704 536.158,495.617 536.158,469.915 639.119,374.32 536.158,278.493 "
id="polygon22"
style="fill:#ffffff;fill-opacity:1" />
<g
clip-path="url(#SVGID_2_)"
id="g30"
style="fill:#ffffff;fill-opacity:1">
<path
d="m 248.757,303.92 c 0,-8.412 2.635,-14.93 7.909,-19.551 5.271,-4.621 11.642,-6.932 19.106,-6.932 7.226,0 13.447,2.341 18.662,7.021 5.212,4.682 7.82,11.169 7.82,19.462 0,6.637 -2.844,12.739 -8.531,18.307 -5.688,5.571 -11.85,8.354 -18.484,8.354 -7.229,0 -13.45,-2.666 -18.662,-7.998 -5.215,-5.333 -7.82,-11.554 -7.82,-18.663 z m 27.015,170.803 c -7.348,0 -13.686,-2.371 -19.018,-7.109 -5.332,-4.738 -7.998,-11.375 -7.998,-19.906 0,-7.227 2.546,-13.447 7.643,-18.662 5.093,-5.213 11.375,-7.82 18.84,-7.82 7.465,0 13.833,2.577 19.106,7.731 5.271,5.154 7.909,11.405 7.909,18.751 0,8.414 -2.638,15.019 -7.909,19.817 -5.273,4.798 -11.463,7.198 -18.573,7.198 z"
id="path24"
inkscape:connector-curvature="0"
style="fill:#ffffff;fill-opacity:1" />
<path
d="m 413.313,278.357 -49.766,204.928 c -1.661,6.754 -3.11,12.086 -4.354,15.996 -1.244,3.91 -3.141,6.963 -5.688,9.153 -2.549,2.19 -6.251,3.288 -11.108,3.288 -12.086,0 -18.129,-5.213 -18.129,-15.641 0,-2.725 1.183,-9.537 3.555,-20.439 l 49.588,-204.928 c 2.605,-10.9 5.094,-18.365 7.465,-22.395 2.369,-4.027 6.99,-6.043 13.863,-6.043 5.924,0 10.455,1.422 13.597,4.266 3.138,2.844 4.71,6.754 4.71,11.73 0,3.676 -1.244,10.371 -3.733,20.085 z"
id="path26"
inkscape:connector-curvature="0"
style="fill:#ffffff;fill-opacity:1" />
<path
d="m 515.511,278.357 -49.766,204.928 c -1.66,6.754 -3.11,12.086 -4.354,15.996 -1.244,3.91 -3.142,6.963 -5.688,9.153 -2.55,2.19 -6.251,3.288 -11.108,3.288 -12.086,0 -18.129,-5.213 -18.129,-15.641 0,-2.725 1.184,-9.537 3.555,-20.439 l 49.588,-204.928 c 2.604,-10.9 5.093,-18.365 7.465,-22.395 2.369,-4.027 6.99,-6.043 13.863,-6.043 5.924,0 10.456,1.422 13.597,4.266 3.138,2.844 4.71,6.754 4.71,11.73 -10e-4,3.676 -1.245,10.371 -3.733,20.085 z"
id="path28"
inkscape:connector-curvature="0"
style="fill:#ffffff;fill-opacity:1" />
</g>
</g>
</g>
<g
id="Layer_2"
display="none"
style="display:none"
transform="translate(-100.535,-242.276)">
<g
display="inline"
id="g47"
style="display:inline">
<path
d="m 334.449,236.62 c 31.741,-25.753 115.664,-64.535 164.808,-64.535 5.135,-2.943 15.104,-13.686 6.462,-18.25 -55.411,0 -153.688,43.629 -192.851,82.785 h 11.466 z"
id="path35"
inkscape:connector-curvature="0"
style="fill:#1e428a" />
<path
d="m 238.758,596.505 c -26.756,0 -50.225,-6.693 -67.249,-20.096 -7.58,-6.394 -40.839,-39.548 -19.129,-114.436 2.318,-7.398 4.751,-15 6.92,-23.34 1.042,-4.104 -4.755,-9.694 -8.271,-5.239 -3.642,4.749 -6.675,10.457 -9.213,16.704 h -0.003 c 0,0 -19.956,43.365 -11.436,88.068 2.654,17.143 9.445,31.629 19.5,43.2 0.046,0.062 0.091,0.116 0.137,0.176 l 0.021,-0.003 c 18.557,21.228 48.069,32.625 82.92,32.625 88.391,0 188.185,-48.084 259.385,-105.107 h -20.91 c -63.305,46.952 -159.015,87.448 -232.672,87.448 z"
id="path37"
inkscape:connector-curvature="0"
style="fill:#1e428a" />
<path
d="m 425.86,324.466 h 101.784 v -82.487 c -28.955,0 -50.581,0 -66.459,0 -0.142,0 -9.951,0 -38.955,0 -32.205,0 -88.075,0 -180.654,0 v 82.487 h 101.791 c 0,32.218 0,64.311 0,96.526 h -101.79 v 82.172 h 286.068 c 0,-82.091 0,-54.263 0,-82.172 H 425.86 Z"
id="path39"
inkscape:connector-curvature="0"
style="fill:#1e428a" />
<polygon
points="335.913,331.925 234.119,331.925 234.119,241.978 104.245,372.729 234.119,503.164 234.119,413.534 335.913,413.534 "
id="polygon41"
style="fill:#1e428a" />
<polygon
points="535.111,331.925 433.315,331.925 433.315,413.534 535.111,413.534 535.111,503.164 664.981,372.729 535.111,241.979 "
id="polygon43"
style="fill:#1e428a" />
<path
d="m 625.325,260.375 c 0,17.493 -1.806,31.271 -7.317,47.901 -1.72,7.127 -0.193,11.029 6.938,6.653 9.415,-14.35 12.826,-40.205 12.826,-57.594 0,-54.654 -26.603,-93.052 -82.116,-103.222 -7.223,1.716 -12.44,11.981 -6.651,18.251 45.05,2.758 76.32,45.434 76.32,88.011 z"
id="path45"
inkscape:connector-curvature="0"
style="fill:#1e428a" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 9.5 KiB

189
static/ictsv-logo.svg Normal file
View file

@ -0,0 +1,189 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
x="0px"
y="0px"
width="566.92999"
height="269.44601"
viewBox="0 0 566.92999 269.44601"
enable-background="new 0 0 768 768"
xml:space="preserve"
id="svg50"
sodipodi:docname="ictsv-logo.svg"
inkscape:version="0.92.4 5da689c313, 2019-01-14"><metadata
id="metadata56"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
id="defs54" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="942"
inkscape:window-height="1038"
id="namedview52"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:zoom="0.30729167"
inkscape:cx="-318.5689"
inkscape:cy="127.722"
inkscape:window-x="968"
inkscape:window-y="1082"
inkscape:window-maximized="0"
inkscape:current-layer="svg50" />
<g
id="Layer_1"
transform="translate(-100.535,-242.276)">
<g
id="g32">
<defs
id="defs3">
<rect
id="SVGID_1_"
width="768"
height="768"
x="0"
y="0" />
</defs>
<clipPath
id="SVGID_2_">
<use
xlink:href="#SVGID_1_"
overflow="visible"
id="use5"
style="overflow:visible"
x="0"
y="0"
width="100%"
height="100%" />
</clipPath>
<path
display="none"
clip-path="url(#SVGID_2_)"
d="m 333.281,235.796 c 32.093,-26.038 116.944,-65.248 166.63,-65.248 5.19,-2.978 15.272,-13.839 6.532,-18.452 -56.022,0 -155.384,44.112 -194.98,83.7 h 11.592 z"
id="path8"
inkscape:connector-curvature="0"
style="display:none;fill:#1e428a" />
<path
display="none"
clip-path="url(#SVGID_2_)"
d="m 236.533,599.653 c -27.05,0 -50.779,-6.768 -67.991,-20.319 -7.664,-6.46 -41.291,-39.982 -19.34,-115.698 2.343,-7.478 4.804,-15.165 6.996,-23.598 1.053,-4.144 -4.809,-9.799 -8.361,-5.295 -3.683,4.801 -6.75,10.573 -9.316,16.892 l -0.003,-0.002 c 0,0 -20.176,43.844 -11.562,89.039 2.684,17.335 9.551,31.981 19.717,43.68 0.047,0.06 0.09,0.119 0.137,0.179 l 0.02,-0.003 c 18.764,21.465 48.6,32.986 83.837,32.986 89.368,0 190.261,-48.618 262.249,-106.273 h -21.142 c -64.001,47.473 -160.769,88.412 -235.241,88.412"
id="path10"
inkscape:connector-curvature="0"
style="display:none;fill:#1e428a" />
<path
display="none"
clip-path="url(#SVGID_2_)"
d="m 627.37,259.813 c 0,17.687 -1.824,31.617 -7.396,48.431 -1.738,7.205 -0.196,11.15 7.015,6.728 9.518,-14.509 12.967,-40.649 12.967,-58.23 0,-55.26 -26.896,-94.081 -83.023,-104.363 -7.303,1.733 -12.579,12.113 -6.725,18.452 45.549,2.789 77.162,45.935 77.162,88.982"
id="path12"
inkscape:connector-curvature="0"
style="display:none;fill:#1e428a" />
<path
display="none"
clip-path="url(#SVGID_2_)"
d="M 516.538,425.117 H 253.132 c -8.848,0 -11.452,4.644 -11.452,11.453 v 57.262 c 0,6.808 2.604,11.452 11.452,11.452 h 263.406 c 8.848,0 11.452,-4.645 11.452,-11.452 V 436.57 c 0,-6.809 -2.604,-11.453 -11.452,-11.453 M 489.32,473.79 h -11.452 c -4.744,0 -8.59,-3.846 -8.59,-8.589 0,-4.744 3.846,-8.59 8.59,-8.59 h 11.452 c 4.744,0 8.589,3.846 8.589,8.59 0,4.743 -3.845,8.589 -8.589,8.589"
id="path14"
inkscape:connector-curvature="0"
style="display:none;fill:#1e428a" />
<path
display="none"
clip-path="url(#SVGID_2_)"
d="M 516.538,333.165 H 253.132 c -8.848,0 -11.452,4.644 -11.452,11.453 v 57.262 c 0,6.809 2.604,11.452 11.452,11.452 h 263.406 c 8.848,0 11.452,-4.644 11.452,-11.452 v -57.262 c 0,-6.81 -2.604,-11.453 -11.452,-11.453 m -27.218,48.672 h -11.452 c -4.744,0 -8.59,-3.846 -8.59,-8.589 0,-4.744 3.846,-8.59 8.59,-8.59 h 11.452 c 4.744,0 8.589,3.846 8.589,8.59 0,4.743 -3.845,8.589 -8.589,8.589"
id="path16"
inkscape:connector-curvature="0"
style="display:none;fill:#1e428a" />
<path
display="none"
clip-path="url(#SVGID_2_)"
d="M 516.538,241.878 H 253.132 c -8.848,0 -11.452,4.644 -11.452,11.453 v 57.262 c 0,6.808 2.604,11.452 11.452,11.452 h 263.406 c 8.848,0 11.452,-4.644 11.452,-11.452 v -57.262 c 0,-6.809 -2.604,-11.453 -11.452,-11.453 m -27.218,48.673 h -11.452 c -4.744,0 -8.59,-3.846 -8.59,-8.589 0,-4.744 3.846,-8.59 8.59,-8.59 h 11.452 c 4.744,0 8.589,3.846 8.589,8.59 0,4.743 -3.845,8.589 -8.589,8.589"
id="path18"
inkscape:connector-curvature="0"
style="display:none;fill:#1e428a" />
<polygon
clip-path="url(#SVGID_2_)"
points="231.842,250.879 100.535,373.088 231.842,495.002 231.842,469.299 128.881,373.704 231.842,277.877 "
id="polygon20"
style="fill:#1e428a" />
<polygon
clip-path="url(#SVGID_2_)"
points="536.158,251.495 667.465,373.704 536.158,495.617 536.158,469.915 639.119,374.32 536.158,278.493 "
id="polygon22"
style="fill:#1e428a" />
<g
clip-path="url(#SVGID_2_)"
id="g30">
<path
d="m 248.757,303.92 c 0,-8.412 2.635,-14.93 7.909,-19.551 5.271,-4.621 11.642,-6.932 19.106,-6.932 7.226,0 13.447,2.341 18.662,7.021 5.212,4.682 7.82,11.169 7.82,19.462 0,6.637 -2.844,12.739 -8.531,18.307 -5.688,5.571 -11.85,8.354 -18.484,8.354 -7.229,0 -13.45,-2.666 -18.662,-7.998 -5.215,-5.333 -7.82,-11.554 -7.82,-18.663 z m 27.015,170.803 c -7.348,0 -13.686,-2.371 -19.018,-7.109 -5.332,-4.738 -7.998,-11.375 -7.998,-19.906 0,-7.227 2.546,-13.447 7.643,-18.662 5.093,-5.213 11.375,-7.82 18.84,-7.82 7.465,0 13.833,2.577 19.106,7.731 5.271,5.154 7.909,11.405 7.909,18.751 0,8.414 -2.638,15.019 -7.909,19.817 -5.273,4.798 -11.463,7.198 -18.573,7.198 z"
id="path24"
inkscape:connector-curvature="0"
style="fill:#1e428a" />
<path
d="m 413.313,278.357 -49.766,204.928 c -1.661,6.754 -3.11,12.086 -4.354,15.996 -1.244,3.91 -3.141,6.963 -5.688,9.153 -2.549,2.19 -6.251,3.288 -11.108,3.288 -12.086,0 -18.129,-5.213 -18.129,-15.641 0,-2.725 1.183,-9.537 3.555,-20.439 l 49.588,-204.928 c 2.605,-10.9 5.094,-18.365 7.465,-22.395 2.369,-4.027 6.99,-6.043 13.863,-6.043 5.924,0 10.455,1.422 13.597,4.266 3.138,2.844 4.71,6.754 4.71,11.73 0,3.676 -1.244,10.371 -3.733,20.085 z"
id="path26"
inkscape:connector-curvature="0"
style="fill:#1e428a" />
<path
d="m 515.511,278.357 -49.766,204.928 c -1.66,6.754 -3.11,12.086 -4.354,15.996 -1.244,3.91 -3.142,6.963 -5.688,9.153 -2.55,2.19 -6.251,3.288 -11.108,3.288 -12.086,0 -18.129,-5.213 -18.129,-15.641 0,-2.725 1.184,-9.537 3.555,-20.439 l 49.588,-204.928 c 2.604,-10.9 5.093,-18.365 7.465,-22.395 2.369,-4.027 6.99,-6.043 13.863,-6.043 5.924,0 10.456,1.422 13.597,4.266 3.138,2.844 4.71,6.754 4.71,11.73 -10e-4,3.676 -1.245,10.371 -3.733,20.085 z"
id="path28"
inkscape:connector-curvature="0"
style="fill:#1e428a" />
</g>
</g>
</g>
<g
id="Layer_2"
display="none"
style="display:none"
transform="translate(-100.535,-242.276)">
<g
display="inline"
id="g47"
style="display:inline">
<path
d="m 334.449,236.62 c 31.741,-25.753 115.664,-64.535 164.808,-64.535 5.135,-2.943 15.104,-13.686 6.462,-18.25 -55.411,0 -153.688,43.629 -192.851,82.785 h 11.466 z"
id="path35"
inkscape:connector-curvature="0"
style="fill:#1e428a" />
<path
d="m 238.758,596.505 c -26.756,0 -50.225,-6.693 -67.249,-20.096 -7.58,-6.394 -40.839,-39.548 -19.129,-114.436 2.318,-7.398 4.751,-15 6.92,-23.34 1.042,-4.104 -4.755,-9.694 -8.271,-5.239 -3.642,4.749 -6.675,10.457 -9.213,16.704 h -0.003 c 0,0 -19.956,43.365 -11.436,88.068 2.654,17.143 9.445,31.629 19.5,43.2 0.046,0.062 0.091,0.116 0.137,0.176 l 0.021,-0.003 c 18.557,21.228 48.069,32.625 82.92,32.625 88.391,0 188.185,-48.084 259.385,-105.107 h -20.91 c -63.305,46.952 -159.015,87.448 -232.672,87.448 z"
id="path37"
inkscape:connector-curvature="0"
style="fill:#1e428a" />
<path
d="m 425.86,324.466 h 101.784 v -82.487 c -28.955,0 -50.581,0 -66.459,0 -0.142,0 -9.951,0 -38.955,0 -32.205,0 -88.075,0 -180.654,0 v 82.487 h 101.791 c 0,32.218 0,64.311 0,96.526 h -101.79 v 82.172 h 286.068 c 0,-82.091 0,-54.263 0,-82.172 H 425.86 Z"
id="path39"
inkscape:connector-curvature="0"
style="fill:#1e428a" />
<polygon
points="335.913,331.925 234.119,331.925 234.119,241.978 104.245,372.729 234.119,503.164 234.119,413.534 335.913,413.534 "
id="polygon41"
style="fill:#1e428a" />
<polygon
points="535.111,331.925 433.315,331.925 433.315,413.534 535.111,413.534 535.111,503.164 664.981,372.729 535.111,241.979 "
id="polygon43"
style="fill:#1e428a" />
<path
d="m 625.325,260.375 c 0,17.493 -1.806,31.271 -7.317,47.901 -1.72,7.127 -0.193,11.029 6.938,6.653 9.415,-14.35 12.826,-40.205 12.826,-57.594 0,-54.654 -26.603,-93.052 -82.116,-103.222 -7.223,1.716 -12.44,11.981 -6.651,18.251 45.05,2.758 76.32,45.434 76.32,88.011 z"
id="path45"
inkscape:connector-curvature="0"
style="fill:#1e428a" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 9.3 KiB

View file

@ -9,47 +9,61 @@ A copy of the MIT license can be obtained at https://mit-license.org/
<head>
<meta charset="UTF-8">
<title>{{ config.site_name }}</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="{{ url_for('static', filename='ia.css') }}">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="form">
<h2>{{ config.site_name }}</h2>
<form class="pure-form">
<p>
<input name="long" type="url" placeholder="Long URL">
</p>
<p>
<input name="short" type="text" placeholder="Custom link (optional)">
</p>
<p>
<button type="submit" class="pure-button pure-button-primary" formmethod="post">Shorten</button>
</p>
</form>
</div>
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
{% if category == 'success' %}
<div class="success">
✓ Shortlink successfully generated! Available at <a href="{{ message }}">{{ message }}</a>
</div>
{% elif category == 'error' %}
<div class="error">
✖ {{ message }}
</div>
{% endif %}
{% endfor %}
{% endif %}
{% endwith %}
{% if config.show_github_link %}
<div class="github">
<a href="https://github.com/132ikl/liteshort">
<img src="{{ url_for('static', filename='GitHub.svg') }}">
</a>
<div id="top">
<div id="header">
<div id="logo" class="drop-shadow">
<img src="{{ url_for('static', filename='ictsv-logo-white.svg') }}" alt="logo">
</div>
<div id="title" class="drop-shadow">
I.C.T.S.V. URL Shortener
</div>
</div>
{% endif %}
</div>
<div id="middle">
<div id="content">
<div class="clearfix"></div>
<div id="box" class="align-self-center col-xl-4 col-lg-4 col-md-6 col-sm-10 col-xs-12">
<div class="form">
<h3 id="box-title">Shorten URL</h3>
<form>
<div id="long-url-box">
<span class="prepend"></span>
<input id="long-url" name="long" type="url" placeholder="Paste a long URL...">
<button id="submit" type="submit" class="btn btn-primary" formmethod="post">Shorten</button>
</div>
<div id="custom-link-box">
<div class="optional">Optional short link ending:</div>
<label id="custom-label" for="custom-link">
<span class="url">{% if config.site_domain %}{{ config.site_domain }}{% else %}{{ request.host }}{% endif %}/</span>
<input id="custom-link" name="short" type="text" placeholder="Custom">
</label>
</div>
</form>
</div>
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
{% if category == 'success' %}
<div class="success">
<span>✓ Short link successfully generated!</span>
<a href="{{ message }}">{{ message }}</a>
</div>
{% elif category == 'error' %}
<div class="error">
✖ {{ message }}
</div>
{% endif %}
{% endfor %}
{% endif %}
{% endwith %}
</div>
</div>
</div>
</body>
</html>
</html>