Initial commit
This commit is contained in:
Jannik Menzel
commit
d52db343db
17 changed files with 777 additions and 0 deletions
8
.idea/.gitignore
generated
vendored
Normal file
8
.idea/.gitignore
generated
vendored
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
# Default ignored files
|
||||
/shelf/
|
||||
/workspace.xml
|
||||
# Editor-based HTTP Client requests
|
||||
/httpRequests/
|
||||
# Datasource local storage ignored files
|
||||
/dataSources/
|
||||
/dataSources.local.xml
|
||||
8
.idea/iFSR-Sharepicgenerator.iml
generated
Normal file
8
.idea/iFSR-Sharepicgenerator.iml
generated
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<module type="GENERAL_MODULE" version="4">
|
||||
<component name="NewModuleRootManager" inherit-compiler-output="true">
|
||||
<exclude-output />
|
||||
<content url="file://$MODULE_DIR$" />
|
||||
<orderEntry type="sourceFolder" forTests="false" />
|
||||
</component>
|
||||
</module>
|
||||
6
.idea/misc.xml
generated
Normal file
6
.idea/misc.xml
generated
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectRootManager">
|
||||
<output url="file://$PROJECT_DIR$/out" />
|
||||
</component>
|
||||
</project>
|
||||
8
.idea/modules.xml
generated
Normal file
8
.idea/modules.xml
generated
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectModuleManager">
|
||||
<modules>
|
||||
<module fileurl="file://$PROJECT_DIR$/iFSR-Sharepicgenerator.iml" filepath="$PROJECT_DIR$/iFSR-Sharepicgenerator.iml" />
|
||||
</modules>
|
||||
</component>
|
||||
</project>
|
||||
6
.idea/vcs.xml
generated
Normal file
6
.idea/vcs.xml
generated
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="VcsDirectoryMappings">
|
||||
<mapping directory="$PROJECT_DIR$" vcs="Git" />
|
||||
</component>
|
||||
</project>
|
||||
16
assets/favicon.svg
Normal file
16
assets/favicon.svg
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="51px" height="51px" viewBox="0 0 51 51" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 63 (92445) - https://sketch.com -->
|
||||
<title>LogoStandard</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="Bootstrap-Grid-Example" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="🖥-Extra-Large-/-12-Col" transform="translate(-405.000000, -15.000000)" fill-rule="nonzero">
|
||||
<g id="Logo-Bar" transform="translate(390.000000, 0.000000)">
|
||||
<g id="LogoStandard" transform="translate(15.000000, 15.000000)">
|
||||
<path d="M0.210055805,46.2775133 C2.11885283,44.4828599 7.8452439,46.2775133 11.6628379,41.5811069 C15.480432,36.8847006 17.389229,30.3097316 15.480432,24.674044 C13.571635,19.0383563 11.6628379,12.4633874 17.389229,6.82769976 C23.1156201,1.19201211 27.8876126,-1.62583172 32.6596052,2.13129338 C37.4315978,5.88841848 36.4771993,12.4633874 33.6140037,16.2205125 C30.7508082,19.9776376 25.0244171,22.7954814 22.1612216,26.5526065 C19.298026,30.3097316 18.3436275,35.006138 21.2068231,39.7025444 C24.0700186,44.3989508 31.7052067,43.3757603 34.5684022,45.338232 C37.4315978,47.3007037 30.7508082,47.2167946 20.2524246,47.2167946 C9.75404092,47.2167946 -1.69874122,48.0722711 0.210055805,46.2775133 Z" id="Path" fill="#B1E11C"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
7
assets/icons/discord.svg
Normal file
7
assets/icons/discord.svg
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
|
||||
<svg width="800px" height="800px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" fill="#000000">
|
||||
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
|
||||
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<g id="SVGRepo_iconCarrier"> <circle cx="512" cy="512" r="512" style="fill:#5865f2"/> <path d="M689.43 349a422.21 422.21 0 0 0-104.22-32.32 1.58 1.58 0 0 0-1.68.79 294.11 294.11 0 0 0-13 26.66 389.78 389.78 0 0 0-117.05 0 269.75 269.75 0 0 0-13.18-26.66 1.64 1.64 0 0 0-1.68-.79A421 421 0 0 0 334.44 349a1.49 1.49 0 0 0-.69.59c-66.37 99.17-84.55 195.9-75.63 291.41a1.76 1.76 0 0 0 .67 1.2 424.58 424.58 0 0 0 127.85 64.63 1.66 1.66 0 0 0 1.8-.59 303.45 303.45 0 0 0 26.15-42.54 1.62 1.62 0 0 0-.89-2.25 279.6 279.6 0 0 1-39.94-19 1.64 1.64 0 0 1-.16-2.72c2.68-2 5.37-4.1 7.93-6.22a1.58 1.58 0 0 1 1.65-.22c83.79 38.26 174.51 38.26 257.31 0a1.58 1.58 0 0 1 1.68.2c2.56 2.11 5.25 4.23 8 6.24a1.64 1.64 0 0 1-.14 2.72 262.37 262.37 0 0 1-40 19 1.63 1.63 0 0 0-.87 2.28 340.72 340.72 0 0 0 26.13 42.52 1.62 1.62 0 0 0 1.8.61 423.17 423.17 0 0 0 128-64.63 1.64 1.64 0 0 0 .67-1.18c10.68-110.44-17.88-206.38-75.7-291.42a1.3 1.3 0 0 0-.63-.63zM427.09 582.85c-25.23 0-46-23.16-46-51.6s20.38-51.6 46-51.6c25.83 0 46.42 23.36 46 51.6.02 28.44-20.37 51.6-46 51.6zm170.13 0c-25.23 0-46-23.16-46-51.6s20.38-51.6 46-51.6c25.83 0 46.42 23.36 46 51.6.01 28.44-20.17 51.6-46 51.6z" style="fill:#fff"/> </g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
5
assets/icons/github.svg
Normal file
5
assets/icons/github.svg
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="800px" height="800px" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="24" cy="24" r="20" fill="#181717"/>
|
||||
<path d="M6.81348 34.235C9.24811 38.3138 13.0939 41.4526 17.6772 42.9784C18.6779 43.1614 19.0425 42.5438 19.0425 42.0134C19.0425 41.7938 19.0388 41.4058 19.0339 40.8866C19.0282 40.2852 19.0208 39.5079 19.0155 38.6124C13.4524 39.8206 12.2787 35.931 12.2787 35.931C11.3689 33.6215 10.0576 33.0064 10.0576 33.0064C8.2417 31.7651 10.1951 31.7896 10.1951 31.7896C12.2025 31.9321 13.2584 33.8511 13.2584 33.8511C15.0424 36.9071 17.94 36.0243 19.0794 35.5135C19.2611 34.2207 19.7767 33.3391 20.3489 32.8394C15.908 32.3348 11.2387 30.6183 11.2387 22.9545C11.2387 20.7715 12.0184 18.9863 13.2977 17.5879C13.0914 17.082 12.4051 15.0488 13.4929 12.2949C13.4929 12.2949 15.1725 11.7571 18.9934 14.3453C20.5883 13.9021 22.2998 13.6798 24.0003 13.6725C25.6983 13.6798 27.4099 13.9021 29.0072 14.3453C32.8256 11.7571 34.5016 12.2949 34.5016 12.2949C35.5931 15.0488 34.9067 17.082 34.7005 17.5879C35.9823 18.9863 36.757 20.7715 36.757 22.9545C36.757 30.638 32.0804 32.3286 27.6247 32.8234C28.343 33.441 28.9827 34.6614 28.9827 36.5277C28.9827 38.3152 28.9717 39.8722 28.9644 40.9035C28.9608 41.4143 28.9581 41.7962 28.9581 42.0134C28.9581 42.5487 29.3178 43.1712 30.3332 42.976C33.9844 41.7572 37.1671 39.5154 39.5403 36.5903C35.8734 41.1108 30.274 44 23.9997 44C16.6943 44 10.3038 40.0832 6.81348 34.235Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
BIN
assets/icons/icon.png
Normal file
BIN
assets/icons/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
27
assets/icons/instagram.svg
Normal file
27
assets/icons/instagram.svg
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="800px" height="800px" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="2" y="2" width="28" height="28" rx="6" fill="url(#paint0_radial_87_7153)"/>
|
||||
<rect x="2" y="2" width="28" height="28" rx="6" fill="url(#paint1_radial_87_7153)"/>
|
||||
<rect x="2" y="2" width="28" height="28" rx="6" fill="url(#paint2_radial_87_7153)"/>
|
||||
<path d="M23 10.5C23 11.3284 22.3284 12 21.5 12C20.6716 12 20 11.3284 20 10.5C20 9.67157 20.6716 9 21.5 9C22.3284 9 23 9.67157 23 10.5Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 21C18.7614 21 21 18.7614 21 16C21 13.2386 18.7614 11 16 11C13.2386 11 11 13.2386 11 16C11 18.7614 13.2386 21 16 21ZM16 19C17.6569 19 19 17.6569 19 16C19 14.3431 17.6569 13 16 13C14.3431 13 13 14.3431 13 16C13 17.6569 14.3431 19 16 19Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 15.6C6 12.2397 6 10.5595 6.65396 9.27606C7.2292 8.14708 8.14708 7.2292 9.27606 6.65396C10.5595 6 12.2397 6 15.6 6H16.4C19.7603 6 21.4405 6 22.7239 6.65396C23.8529 7.2292 24.7708 8.14708 25.346 9.27606C26 10.5595 26 12.2397 26 15.6V16.4C26 19.7603 26 21.4405 25.346 22.7239C24.7708 23.8529 23.8529 24.7708 22.7239 25.346C21.4405 26 19.7603 26 16.4 26H15.6C12.2397 26 10.5595 26 9.27606 25.346C8.14708 24.7708 7.2292 23.8529 6.65396 22.7239C6 21.4405 6 19.7603 6 16.4V15.6ZM15.6 8H16.4C18.1132 8 19.2777 8.00156 20.1779 8.0751C21.0548 8.14674 21.5032 8.27659 21.816 8.43597C22.5686 8.81947 23.1805 9.43139 23.564 10.184C23.7234 10.4968 23.8533 10.9452 23.9249 11.8221C23.9984 12.7223 24 13.8868 24 15.6V16.4C24 18.1132 23.9984 19.2777 23.9249 20.1779C23.8533 21.0548 23.7234 21.5032 23.564 21.816C23.1805 22.5686 22.5686 23.1805 21.816 23.564C21.5032 23.7234 21.0548 23.8533 20.1779 23.9249C19.2777 23.9984 18.1132 24 16.4 24H15.6C13.8868 24 12.7223 23.9984 11.8221 23.9249C10.9452 23.8533 10.4968 23.7234 10.184 23.564C9.43139 23.1805 8.81947 22.5686 8.43597 21.816C8.27659 21.5032 8.14674 21.0548 8.0751 20.1779C8.00156 19.2777 8 18.1132 8 16.4V15.6C8 13.8868 8.00156 12.7223 8.0751 11.8221C8.14674 10.9452 8.27659 10.4968 8.43597 10.184C8.81947 9.43139 9.43139 8.81947 10.184 8.43597C10.4968 8.27659 10.9452 8.14674 11.8221 8.0751C12.7223 8.00156 13.8868 8 15.6 8Z" fill="white"/>
|
||||
<defs>
|
||||
<radialGradient id="paint0_radial_87_7153" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(12 23) rotate(-55.3758) scale(25.5196)">
|
||||
<stop stop-color="#B13589"/>
|
||||
<stop offset="0.79309" stop-color="#C62F94"/>
|
||||
<stop offset="1" stop-color="#8A3AC8"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="paint1_radial_87_7153" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(11 31) rotate(-65.1363) scale(22.5942)">
|
||||
<stop stop-color="#E0E8B7"/>
|
||||
<stop offset="0.444662" stop-color="#FB8A2E"/>
|
||||
<stop offset="0.71474" stop-color="#E2425C"/>
|
||||
<stop offset="1" stop-color="#E2425C" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="paint2_radial_87_7153" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(0.500002 3) rotate(-8.1301) scale(38.8909 8.31836)">
|
||||
<stop offset="0.156701" stop-color="#406ADC"/>
|
||||
<stop offset="0.467799" stop-color="#6A45BE"/>
|
||||
<stop offset="1" stop-color="#6A45BE" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
10
assets/icons/mastodon.svg
Normal file
10
assets/icons/mastodon.svg
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="800px" height="800px" viewBox="-9 0 274 274" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
|
||||
<g>
|
||||
<path d="M249.874103,164.084793 C246.121107,183.392442 216.260831,204.522765 181.966269,208.61788 C164.083135,210.751705 146.475762,212.712995 127.700462,211.851797 C96.9952088,210.444977 72.7666374,204.522765 72.7666374,204.522765 C72.7666374,207.511889 72.9509692,210.357972 73.3196328,213.019724 C77.3115222,243.322396 103.36719,245.137696 128.048481,245.984147 C152.959817,246.836498 175.141568,239.842212 175.141568,239.842212 L176.164978,262.363134 C176.164978,262.363134 158.740462,271.719816 127.700462,273.440737 C110.584149,274.381567 89.33143,273.010138 64.5778816,266.458249 C10.8916144,252.248479 1.65880329,195.021567 0.246084399,136.955576 C-0.184514679,119.715392 0.080923109,103.458802 0.080923109,89.8624885 C0.080923109,30.4870046 38.9837803,13.0831336 38.9837803,13.0831336 C58.5996328,4.07447005 92.258619,0.286082949 127.250693,0 L128.110416,0 C163.10249,0.286082949 196.783596,4.07447005 216.397974,13.0831336 C216.397974,13.0831336 255.299356,30.4870046 255.299356,89.8624885 C255.299356,89.8624885 255.787467,133.670046 249.874103,164.084793" fill="#3088D4">
|
||||
</path>
|
||||
<path d="M209.412536,94.4687189 L209.412536,166.362544 L180.929587,166.362544 L180.929587,96.5818986 C180.929587,81.8722212 174.740462,74.4060461 162.360739,74.4060461 C148.672997,74.4060461 141.812905,83.2628203 141.812905,100.775816 L141.812905,138.970839 L113.498066,138.970839 L113.498066,100.775816 C113.498066,83.2628203 106.636499,74.4060461 92.9487572,74.4060461 C80.5690337,74.4060461 74.3799093,81.8722212 74.3799093,96.5818986 L74.3799093,166.362544 L45.89696,166.362544 L45.89696,94.4687189 C45.89696,79.7752627 49.6381581,68.0989493 57.1529968,59.460424 C64.9023056,50.8218986 75.050877,46.3935115 87.6488494,46.3935115 C102.224333,46.3935115 113.262121,51.9957235 120.560186,63.2016221 L127.654748,75.0947097 L134.750785,63.2016221 C142.047375,51.9957235 153.085163,46.3935115 167.662121,46.3935115 C180.258619,46.3935115 190.40719,50.8218986 198.157974,59.460424 C205.671338,68.0989493 209.412536,79.7752627 209.412536,94.4687189" fill="#FFFFFF">
|
||||
</path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
14
assets/icons/telegram.svg
Normal file
14
assets/icons/telegram.svg
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="800px" height="800px" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
|
||||
<g>
|
||||
<path d="M128,0 C57.307,0 0,57.307 0,128 L0,128 C0,198.693 57.307,256 128,256 L128,256 C198.693,256 256,198.693 256,128 L256,128 C256,57.307 198.693,0 128,0 L128,0 Z" fill="#40B3E0">
|
||||
</path>
|
||||
<path d="M190.2826,73.6308 L167.4206,188.8978 C167.4206,188.8978 164.2236,196.8918 155.4306,193.0548 L102.6726,152.6068 L83.4886,143.3348 L51.1946,132.4628 C51.1946,132.4628 46.2386,130.7048 45.7586,126.8678 C45.2796,123.0308 51.3546,120.9528 51.3546,120.9528 L179.7306,70.5928 C179.7306,70.5928 190.2826,65.9568 190.2826,73.6308" fill="#FFFFFF">
|
||||
</path>
|
||||
<path d="M98.6178,187.6035 C98.6178,187.6035 97.0778,187.4595 95.1588,181.3835 C93.2408,175.3085 83.4888,143.3345 83.4888,143.3345 L161.0258,94.0945 C161.0258,94.0945 165.5028,91.3765 165.3428,94.0945 C165.3428,94.0945 166.1418,94.5735 163.7438,96.8115 C161.3458,99.0505 102.8328,151.6475 102.8328,151.6475" fill="#D2E5F1">
|
||||
</path>
|
||||
<path d="M122.9015,168.1154 L102.0335,187.1414 C102.0335,187.1414 100.4025,188.3794 98.6175,187.6034 L102.6135,152.2624" fill="#B5CFE4">
|
||||
</path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
BIN
assets/images/defaultBackground.jpg
Normal file
BIN
assets/images/defaultBackground.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 MiB |
92
assets/images/defaultLogo.svg
Normal file
92
assets/images/defaultLogo.svg
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Ebene_3" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
|
||||
width="1200px" height="800px" viewBox="0 0 1200 800" enable-background="new 0 0 1200 800" xml:space="preserve">
|
||||
<g>
|
||||
<path d="M538.58,373.302c0-3,1.6-5,4.8-5h21c3,0,4.49,2.2,4.49,5v17.729c0,3-1.69,4.6-4.49,4.6h-21c-2.8,0-4.8-1.8-4.8-4.6V373.302
|
||||
z M539.59,406.802h28V513h-28V406.802z"/>
|
||||
<path d="M587.998,397.442c0-23.89,16.454-31.22,31.799-30.84c0,0,51.54,1.44,64.409,3.2v23.149h-57.809
|
||||
c-10.399,0-10.399,5.8-10.399,11.201v22.839l59.108,2.11v23.02l-59.108,1.89V513h-28V397.442z"/>
|
||||
<path d="M699.715,403.201c0-28.999,17.199-37.469,39.6-37.799c21.05-0.44,45.039,2.37,56.599,5.79v22.009
|
||||
c-12.8-1.13-41.639-2-48.899-2c-12.239-0.27-19.3,0.58-19.3,14.201v7.149c0,11.6,4.44,14.1,15.78,14.1h23.119
|
||||
c28.69,0,34.61,22.62,34.61,38.8v9.75c0,33.238-20.71,39.398-40.51,39.398c-24.979,0-41.35-1.529-56.489-5.99v-22.009
|
||||
c8,0.8,32.39,2.2,50.989,2.2c8.42,0,18.01-1.391,18.01-12.61v-7.88c0-8.32-2.52-13.66-13.21-13.66h-22.499
|
||||
c-35.3,0-37.8-26.069-37.8-38.799V403.201z"/>
|
||||
<path d="M818.035,366.602h64.049c22.85,0,39.85,10.69,39.85,45.65c0,36.239-15.18,40.539-23.311,43.1L926.343,513h-31.509
|
||||
l-24.2-55.398l-24.6-2.801V513h-27.999V366.602z M879.334,432.801c9.75,0,14.399-2.859,14.399-20.549
|
||||
c0-16.63-5.6-20.75-14.399-20.75h-33.189v41.299H879.334z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path d="M658.523,543.892c0-4.777,3.29-6.243,6.359-6.167c0,0,10.306,0.288,12.879,0.641v4.629h-11.56
|
||||
c-2.08,0-2.08,1.16-2.08,2.239v4.567l11.82,0.422v4.604l-11.82,0.378V567h-5.599V543.892z"/>
|
||||
<path d="M678.486,559.587c0-3.089,1.67-5.824,6.222-5.824c0,0,6.239,0.039,6.239,0c0,0,0.039-1.32,0-1.36
|
||||
c0-2.264-1.061-2.619-2.84-2.619c-1.846,0-7.173,0.332-8.918,0.458v-3.458c2.795-1.086,5.717-1.401,9.676-1.42
|
||||
c4.573-0.018,7.681,1.563,7.681,6.819V567h-4.421l-1.178-2.34c-0.234,0.462-3.216,2.646-6.459,2.58
|
||||
c-4.086-0.11-6.002-2.892-6.002-5.653V559.587z M686.072,562.74c2.341,0,4.875-1.644,4.875-1.644v-3.893l-5.14,0.397
|
||||
c-1.478,0.138-1.722,1.231-1.722,2.159v1.032C684.086,562.559,685.042,562.74,686.072,562.74z"/>
|
||||
<path d="M706.558,545.563c2.079,0,6.274,0.124,9.778,1.26v3.479c0,0-3.821-0.24-7.381-0.24c-2.576,0-3.797,0.154-3.797,6.415
|
||||
c0,5.438,0.918,6.224,3.797,6.224c3.68,0,7.66-0.374,7.66-0.374v3.515c-3.107,1.58-6.738,1.318-10.058,1.358
|
||||
c-3.96,0-6.999-2.07-6.999-10.839C699.559,547.611,702.479,545.563,706.558,545.563z"/>
|
||||
<path d="M719.631,535.689h5.576v12.334c1.758-1.268,3.521-2.62,6.762-2.62c4.943,0,6.338,3.412,6.338,7.459V567h-5.599v-14.226
|
||||
c0-2.111-0.926-2.871-2.345-2.871c-2.254,0-3.484,0.579-5.134,1.839V567h-5.599V535.689z"/>
|
||||
<path d="M741.006,551.282c0-3.279,1.4-5.719,5.52-5.719c4.081,0,9.7,0.132,11.34,1.08v3.533h-9.625
|
||||
c-1.438,0-1.635,0.45-1.635,1.458v0.96c0,1.342,0.705,1.378,1.635,1.378h5.044c4.052,0,5.639,2.401,5.639,5.488v2.18
|
||||
c0,4.359-2.64,5.56-5.198,5.56c-4.027,0-10.363-0.183-11.839-1.156v-3.497h10.034c0.374,0,1.404-0.046,1.404-1.346v-0.992
|
||||
c0-0.894-0.26-1.386-1.404-1.386h-4.955c-3.76,0-5.959-1.582-5.959-5.701V551.282z"/>
|
||||
<path d="M768.637,545.563c2.08,0,6.275,0.124,9.778,1.26v3.479c0,0-3.821-0.24-7.381-0.24c-2.575,0-3.798,0.154-3.798,6.415
|
||||
c0,5.438,0.918,6.224,3.798,6.224c3.68,0,7.661-0.374,7.661-0.374v3.515c-3.107,1.58-6.739,1.318-10.059,1.358
|
||||
c-3.959,0-6.999-2.07-6.999-10.839C761.638,547.611,764.557,545.563,768.637,545.563z"/>
|
||||
<path d="M781.709,535.689h5.578v12.334c1.758-1.268,3.521-2.62,6.76-2.62c4.943,0,6.34,3.412,6.34,7.459V567h-5.6v-14.226
|
||||
c0-2.111-0.926-2.871-2.346-2.871c-2.254,0-3.482,0.579-5.133,1.839V567h-5.6V535.689z"/>
|
||||
<path d="M803.084,559.587c0-3.089,1.67-5.824,6.222-5.824c0,0,6.239,0.039,6.239,0c0,0,0.039-1.32,0-1.36
|
||||
c0-2.264-1.061-2.619-2.84-2.619c-1.846,0-7.173,0.332-8.918,0.458v-3.458c2.795-1.086,5.717-1.401,9.676-1.42
|
||||
c4.573-0.018,7.681,1.563,7.681,6.819V567h-4.421l-1.178-2.34c-0.234,0.462-3.216,2.646-6.459,2.58
|
||||
c-4.086-0.11-6.002-2.892-6.002-5.653V559.587z M810.67,562.74c2.341,0,4.875-1.644,4.875-1.644v-3.893l-5.14,0.397
|
||||
c-1.478,0.138-1.722,1.231-1.722,2.159v1.032C808.684,562.559,809.64,562.74,810.67,562.74z"/>
|
||||
<path d="M823.243,546.443l3.329-0.68v-3.959c0-3.634,1.462-6.239,6.262-6.239c1.959,0,3.617,0.25,5.356,0.96v3.323
|
||||
c-0.04,0-3.819-0.04-3.819-0.04c-2.252-0.04-2.199,1.088-2.199,3.315v2.64h4.818v4.279h-4.818V567h-5.6v-16.957h-3.329V546.443z"/>
|
||||
<path d="M839.363,546.884l3.431-1.16l0.94-5.919h4.658v5.919h4.748v4.279h-4.748v8.519c0,3.127,0.723,3.795,1.818,4.203
|
||||
c0,0,2.399,0.84,2.68,0.84v3.439h-4.883c-3.146,0-5.214-1.964-5.214-7.603v-9.398h-3.431V546.884z"/>
|
||||
<path d="M855.205,551.282c0-3.279,1.399-5.719,5.519-5.719c4.081,0,9.7,0.132,11.341,1.08v3.533h-9.625
|
||||
c-1.438,0-1.636,0.45-1.636,1.458v0.96c0,1.342,0.706,1.378,1.636,1.378h5.043c4.052,0,5.639,2.401,5.639,5.488v2.18
|
||||
c0,4.359-2.639,5.56-5.198,5.56c-4.027,0-10.362-0.183-11.839-1.156v-3.497h10.035c0.373,0,1.403-0.046,1.403-1.346v-0.992
|
||||
c0-0.894-0.26-1.386-1.403-1.386h-4.955c-3.76,0-5.959-1.582-5.959-5.701V551.282z"/>
|
||||
<path d="M876.148,545.764h4.719l0.881,2.68c1.471-1.422,3.451-2.897,6.092-2.897c0.918,0,1.799,0.036,2.366,0.254v5.405
|
||||
c-0.567-0.055-1.866-0.108-3.069-0.108c-2.32,0-4.004,0.378-5.389,2.363V567h-5.6V545.764z"/>
|
||||
<path d="M892.204,559.587c0-3.089,1.67-5.824,6.222-5.824c0,0,6.238,0.039,6.238,0c0,0,0.04-1.32,0-1.36
|
||||
c0-2.264-1.06-2.619-2.84-2.619c-1.846,0-7.172,0.332-8.918,0.458v-3.458c2.795-1.086,5.717-1.401,9.676-1.42
|
||||
c4.574-0.018,7.682,1.563,7.682,6.819V567h-4.422l-1.178-2.34c-0.234,0.462-3.215,2.646-6.459,2.58
|
||||
c-4.085-0.11-6.001-2.892-6.001-5.653V559.587z M899.789,562.74c2.342,0,4.875-1.644,4.875-1.644v-3.893l-5.139,0.397
|
||||
c-1.479,0.138-1.723,1.231-1.723,2.159v1.032C897.803,562.559,898.76,562.74,899.789,562.74z"/>
|
||||
<path d="M912.362,546.884l3.431-1.16l0.94-5.919h4.659v5.919h4.747v4.279h-4.747v8.519c0,3.127,0.723,3.795,1.818,4.203
|
||||
c0,0,2.398,0.84,2.679,0.84v3.439h-4.883c-3.146,0-5.214-1.964-5.214-7.603v-9.398h-3.431V546.884z"/>
|
||||
<path d="M740.871,585.725h5.6V615h-5.6V585.725z"/>
|
||||
<path d="M750.068,593.764h4.5l1.1,2.26c1.824-1.313,3.5-2.62,6.738-2.62c4.943,0,6.34,3.412,6.34,7.459V615h-5.6v-14.226
|
||||
c0-2.111-0.943-2.871-2.346-2.871c-2.254,0-3.482,0.579-5.133,1.839V615h-5.6V593.764z"/>
|
||||
<path d="M770.843,594.443l3.329-0.68v-3.959c0-3.634,1.462-6.239,6.262-6.239c1.959,0,3.617,0.25,5.356,0.96v3.323
|
||||
c-0.04,0-3.819-0.04-3.819-0.04c-2.252-0.04-2.199,1.088-2.199,3.315v2.64h4.818v4.279h-4.818V615h-5.6v-16.957h-3.329V594.443z"/>
|
||||
<path d="M796.766,593.563c7.313,0,9.688,2.68,9.688,11.118c0,7.879-2.266,10.519-9.688,10.519c-7.336,0-9.689-2.92-9.689-10.519
|
||||
C787.076,596.003,789.586,593.563,796.766,593.563z M796.766,610.701c3.152,0,4.089-0.429,4.089-6.02
|
||||
c0-5.949-0.752-6.619-4.089-6.619c-3.314,0-4.09,0.674-4.09,6.619C792.676,610.177,793.789,610.701,796.766,610.701z"/>
|
||||
<path d="M809.789,593.764h4.719l0.88,2.68c1.472-1.422,3.451-2.897,6.093-2.897c0.918,0,1.798,0.036,2.365,0.254v5.405
|
||||
c-0.567-0.055-1.865-0.108-3.068-0.108c-2.32,0-4.004,0.378-5.39,2.363V615h-5.599V593.764z"/>
|
||||
<path d="M826.469,593.764h4.499l1.1,2.296c1.89-1.356,3.409-2.602,6.612-2.602c2.71,0,4.63,1.027,5.506,2.745
|
||||
c1.903-1.39,4.339-2.745,7.635-2.745c4.691,0,6.339,3.177,6.339,7.477V615h-5.599v-14.153c0-1.986-0.926-2.89-2.346-2.89
|
||||
c-2.148,0-3.704,0.41-5.199,1.668c0,0.176,0.021,1.075,0.021,1.273V615h-5.6v-14.153c0-1.986-0.943-2.89-2.363-2.89
|
||||
c-2.199,0-3.357,0.562-5.007,1.821V615h-5.599V593.764z"/>
|
||||
<path d="M860.844,607.587c0-3.089,1.67-5.824,6.222-5.824c0,0,6.239,0.039,6.239,0c0,0,0.039-1.32,0-1.36
|
||||
c0-2.264-1.061-2.619-2.84-2.619c-1.846,0-7.173,0.332-8.918,0.458v-3.458c2.795-1.086,5.717-1.401,9.676-1.42
|
||||
c4.573-0.018,7.681,1.563,7.681,6.819V615h-4.421l-1.178-2.34c-0.234,0.462-3.216,2.646-6.459,2.58
|
||||
c-4.086-0.11-6.002-2.892-6.002-5.653V607.587z M868.43,610.74c2.341,0,4.875-1.644,4.875-1.644v-3.893l-5.14,0.397
|
||||
c-1.478,0.138-1.722,1.231-1.722,2.159v1.032C866.443,610.559,867.399,610.74,868.43,610.74z"/>
|
||||
<path d="M881.002,594.884l3.432-1.16l0.939-5.919h4.66v5.919h4.746v4.279h-4.746v8.519c0,3.127,0.722,3.795,1.817,4.203
|
||||
c0,0,2.399,0.84,2.679,0.84v3.439h-4.883c-3.145,0-5.213-1.964-5.213-7.603v-9.398h-3.432V594.884z"/>
|
||||
<path d="M897.156,587.064c0-0.6,0.32-1,0.96-1h4.199c0.601,0,0.897,0.44,0.897,1v3.546c0,0.6-0.338,0.92-0.897,0.92h-4.199
|
||||
c-0.56,0-0.96-0.36-0.96-0.92V587.064z M897.358,593.764h5.599V615h-5.599V593.764z"/>
|
||||
<path d="M906.548,583.726h5.599v17.157h1.16l6.029-7.119h7.089l-7.965,9.259L926.425,615h-6.649l-6.469-9.838h-1.16V615h-5.599
|
||||
V583.726z"/>
|
||||
</g>
|
||||
<path d="M279,574.196c18-17.196,72,0,108-45s54-108,36-162c-18-54-36-117,18-171s99-81,144-45s36,99,9,135s-81,63-108,99
|
||||
c-27,36-36,81-9,126s99,35.196,126,54s-36,18-135,18S261,591.393,279,574.196z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.7 KiB |
246
css/styles.css
Normal file
246
css/styles.css
Normal file
|
|
@ -0,0 +1,246 @@
|
|||
/* ========================
|
||||
Allgemeines Styling
|
||||
======================== */
|
||||
html {
|
||||
background-color: #212528;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: Arial, sans-serif;
|
||||
color: #333;
|
||||
background-color: #fefefe;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* ========================
|
||||
Navigation
|
||||
======================== */
|
||||
.navbar {
|
||||
padding: 1rem;
|
||||
background-color: #354f52;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.navbar img {
|
||||
height: 40px;
|
||||
max-width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/* ========================
|
||||
Hero Section
|
||||
======================== */
|
||||
.hero-section {
|
||||
position: relative;
|
||||
height: 60vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
color: #333;
|
||||
padding: 0 20px;
|
||||
background-color: #f8f9fa;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-section h1 {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 4rem;
|
||||
margin: 0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.hero-section p {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 200;
|
||||
font-size: 1.4rem;
|
||||
margin-top: 5px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* ========================
|
||||
Generator Section
|
||||
======================== */
|
||||
.form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
textarea, input[type="file"], input[type="range"], input[type="checkbox"] {
|
||||
padding: 12px 16px;
|
||||
font-size: 16px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
background-color: #f9f9f9;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
-webkit-appearance: none;
|
||||
height: 6px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
input[type="range"]:focus {
|
||||
outline: none;
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
.checkbox-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.container-generator {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.preview {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
min-height: 500px;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* ========================
|
||||
Button Styling
|
||||
======================== */
|
||||
button {
|
||||
padding: 12px 20px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background-color: #6a994e99;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease, transform 0.2s ease;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #6a994ecc;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
background-color: #c6c6c6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* ========================
|
||||
Footer
|
||||
======================== */
|
||||
footer {
|
||||
background-color: #2f3e46;
|
||||
color: #bbb;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
margin-top: auto;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* ========================
|
||||
Responsives Design
|
||||
======================== */
|
||||
@media (max-width: 1200px) {
|
||||
.hero-section h1 {
|
||||
font-size: 3.7rem;
|
||||
}
|
||||
|
||||
.hero-section p {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.container-generator {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.preview {
|
||||
order: -1;
|
||||
min-height: 400px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
object-fit: contain;
|
||||
transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.hero-section {
|
||||
padding: 30px 0;
|
||||
}
|
||||
|
||||
.hero-section h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.hero-section p {
|
||||
font-size: 1.0rem;
|
||||
}
|
||||
}
|
||||
109
index.html
Normal file
109
index.html
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>iFSR Sharepicgenerator</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap" rel="stylesheet">
|
||||
<link rel="icon" type="image/x-icon" href="assets/favicon.svg">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="index.html">Fachschaftsrat Informatik</a>
|
||||
<img src="assets/icons/icon.png" alt="Profilbild">
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Header -->
|
||||
<header class="hero-section text-center text-light">
|
||||
<div class="container py-5">
|
||||
<h1 class="display-3">iFSR Sharepicgenerator</h1>
|
||||
<p class="lead">Der Sharepicgenerator des <span class="highlight-name">FSR Informatik</span>.</p>
|
||||
|
||||
<!-- Social Media Links -->
|
||||
<div class="social-links mt-4 d-flex justify-content-center align-items-center gap-3">
|
||||
<a href="https://www.instagram.com/ifsrde" class="text-decoration-none text-light" target="_blank">
|
||||
<img src="assets/icons/instagram.svg" alt="Instagram" width="50">
|
||||
</a>
|
||||
<a href="https://t.me/s/ifsrde" class="text-decoration-none text-light" target="_blank">
|
||||
<img src="assets/icons/telegram.svg" alt="Telegram" width="50">
|
||||
</a>
|
||||
<a href="https://github.com/fsr" class="text-decoration-none text-light" target="_blank">
|
||||
<img src="assets/icons/github.svg" alt="GitHub" width="50">
|
||||
</a>
|
||||
<a href="https://toot.kif.rocks/@iFSR" class="text-decoration-none text-light" target="_blank">
|
||||
<img src="assets/icons/mastodon.svg" alt="Mastodon" width="50">
|
||||
</a>
|
||||
<a href="https://discord.com/invite/639kX4tNg4" class="text-decoration-none text-light" target="_blank">
|
||||
<img src="assets/icons/discord.svg" alt="Discord" width="50">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Generator -->
|
||||
<section class="container my-5 text-center">
|
||||
<div class="container-generator">
|
||||
<!-- Preview auf der linken Seite -->
|
||||
<div class="preview">
|
||||
<canvas id="canvas"></canvas>
|
||||
</div>
|
||||
|
||||
<!-- Formular auf der rechten Seite -->
|
||||
<div class="form">
|
||||
<form>
|
||||
<label for="imageUpload">Bild hochladen:</label>
|
||||
<input type="file" id="imageUpload" accept="image/*">
|
||||
|
||||
<label for="logoUpload">Logo hochladen:</label>
|
||||
<input type="file" id="logoUpload" accept="image/*">
|
||||
|
||||
<div class="checkbox-item">
|
||||
<label for="logoLeft">Logo links platzieren:</label>
|
||||
<input type="checkbox" id="logoLeft">
|
||||
</div>
|
||||
|
||||
<label for="headline">Überschrift:</label>
|
||||
<textarea id="headline" placeholder="Gib deinen Text hier ein"></textarea>
|
||||
|
||||
<label for="subline">Unterzeile:</label>
|
||||
<textarea id="subline" placeholder="Gib deinen Untertext hier ein"></textarea>
|
||||
|
||||
<label for="fontSize">Schriftgröße:</label>
|
||||
<input type="range" id="fontSize" min="30" max="60" value="45">
|
||||
|
||||
<label for="logoSize">Logogröße:</label>
|
||||
<input type="range" id="logoSize" min="50" max="350" value="200">
|
||||
|
||||
<label for="boxHeight">Boxhöhe:</label>
|
||||
<input type="range" id="boxHeight" min="200" max="500" value="350">
|
||||
|
||||
<!-- Button zum Herunterladen -->
|
||||
<button id="downloadBtn">Download</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Copyright und Hinweise -->
|
||||
<section class="container my-5 text-center">
|
||||
<div class="container" style="max-width: 800px;">
|
||||
<h2 class="display-5">Hinweis</h2>
|
||||
<p>Für das Hochladen von Bildern und Logos gilt, dass ausschließlich Material hochgeladen werden darf, für das du die entsprechenden Rechte besitzt. Falls du keine eigenen Bilder oder Logos verwenden möchtest, kannst du auf Plattformen wie Unsplash, Pexels und Pixabay zurückgreifen, die lizenzfreie oder copyrightfreie Fotos anbieten.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-dark py-4 text-center text-light">
|
||||
<p>© 2025 AG Öffentlichkeitsarbeit</p>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
215
js/script.js
Normal file
215
js/script.js
Normal file
|
|
@ -0,0 +1,215 @@
|
|||
// Variablen für hochgeladene Bilder und deren Position
|
||||
let uploadedImage = null;
|
||||
let uploadedLogo = null;
|
||||
let imageOffsetX = 0;
|
||||
let imageOffsetY = 0;
|
||||
let isDragging = false;
|
||||
let dragStartX = 0;
|
||||
let dragStartY = 0;
|
||||
|
||||
// Standardwerte für Bild, Logo und Texte
|
||||
const defaultImage = 'assets/images/defaultBackground.jpg';
|
||||
const defaultLogo = 'assets/images/defaultLogo.svg';
|
||||
const defaultHeadline = 'iFSR sharepic Headline';
|
||||
const defaultSubline = 'Hier könnte ein unfassbar fesselnder Werbetext des Fachschaftsrats Informatik stehen.';
|
||||
|
||||
// Initialisierung beim Laden der Seite
|
||||
window.onload = function () {
|
||||
document.getElementById('headline').value = defaultHeadline;
|
||||
document.getElementById('subline').value = defaultSubline;
|
||||
|
||||
loadDefaultImage();
|
||||
loadDefaultLogo();
|
||||
generateSharepic();
|
||||
};
|
||||
|
||||
// Lädt das Standardhintergrundbild
|
||||
function loadDefaultImage() {
|
||||
uploadedImage = new Image();
|
||||
uploadedImage.onload = drawCanvas;
|
||||
uploadedImage.src = defaultImage;
|
||||
}
|
||||
|
||||
// Lädt das Standardlogo
|
||||
function loadDefaultLogo() {
|
||||
uploadedLogo = new Image();
|
||||
uploadedLogo.onload = drawCanvas;
|
||||
uploadedLogo.src = defaultLogo;
|
||||
}
|
||||
|
||||
// Event-Listener für Datei-Uploads und Eingaben
|
||||
document.getElementById('imageUpload').addEventListener('change', handleImageUpload);
|
||||
document.getElementById('logoUpload').addEventListener('change', handleLogoUpload);
|
||||
document.getElementById('headline').addEventListener('input', generateSharepic);
|
||||
document.getElementById('subline').addEventListener('input', generateSharepic);
|
||||
document.getElementById('fontSize').addEventListener('input', generateSharepic);
|
||||
document.getElementById('boxHeight').addEventListener('input', generateSharepic);
|
||||
document.getElementById('logoSize').addEventListener('input', generateSharepic);
|
||||
document.getElementById('logoLeft').addEventListener('change', generateSharepic);
|
||||
|
||||
// Verarbeitet den Upload eines neuen Hintergrundbildes
|
||||
function handleImageUpload(event) {
|
||||
const file = event.target.files[0];
|
||||
if (file) {
|
||||
const imageUrl = URL.createObjectURL(file);
|
||||
uploadedImage = new Image();
|
||||
uploadedImage.onload = function () {
|
||||
imageOffsetX = 0;
|
||||
imageOffsetY = 0;
|
||||
drawCanvas();
|
||||
};
|
||||
uploadedImage.src = imageUrl;
|
||||
}
|
||||
}
|
||||
|
||||
// Verarbeitet den Upload eines neuen Logos
|
||||
function handleLogoUpload(event) {
|
||||
const file = event.target.files[0];
|
||||
if (file) {
|
||||
const logoUrl = URL.createObjectURL(file);
|
||||
uploadedLogo = new Image();
|
||||
uploadedLogo.onload = drawCanvas;
|
||||
uploadedLogo.src = logoUrl;
|
||||
}
|
||||
}
|
||||
|
||||
// Generiert das Sharepic neu
|
||||
function generateSharepic() {
|
||||
drawCanvas();
|
||||
}
|
||||
|
||||
// Berechnet die Bildgröße passend zur Canvas-Größe
|
||||
function calculateImageDimensions(image, canvas) {
|
||||
let imageWidth, imageHeight;
|
||||
|
||||
if (image.width > image.height) {
|
||||
imageHeight = canvas.height;
|
||||
imageWidth = image.width * (imageHeight / image.height);
|
||||
} else {
|
||||
imageWidth = canvas.width;
|
||||
imageHeight = image.height * (imageWidth / image.width);
|
||||
}
|
||||
|
||||
return { width: imageWidth, height: imageHeight };
|
||||
}
|
||||
|
||||
// Zeichnet das Canvas mit Bild, Logo und Text
|
||||
function drawCanvas() {
|
||||
const canvas = document.getElementById('canvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
canvas.width = 1080;
|
||||
canvas.height = 1080;
|
||||
|
||||
// Zeichnet das hochgeladene Hintergrundbild
|
||||
if (uploadedImage) {
|
||||
const { width, height } = calculateImageDimensions(uploadedImage, canvas);
|
||||
ctx.drawImage(uploadedImage, imageOffsetX, imageOffsetY, width, height);
|
||||
}
|
||||
|
||||
// Zeichnet das weiße Textfeld
|
||||
const boxHeight = parseInt(document.getElementById('boxHeight').value);
|
||||
const boxPadding = 20;
|
||||
ctx.fillStyle = 'white';
|
||||
ctx.fillRect(boxPadding, canvas.height - boxHeight - boxPadding, canvas.width - 2 * boxPadding, boxHeight);
|
||||
|
||||
// Holt die Texteingaben
|
||||
const headline = document.getElementById('headline').value;
|
||||
const subline = document.getElementById('subline').value;
|
||||
const fontSize = parseInt(document.getElementById('fontSize').value);
|
||||
|
||||
// Setzt Schriftfarbe
|
||||
ctx.fillStyle = 'black';
|
||||
|
||||
const headlineFont = `bold ${fontSize * 1.2}px 'Cairo', sans-serif`;
|
||||
const sublineFont = `${fontSize}px 'Cairo', sans-serif`;
|
||||
const maxWidth = canvas.width - 2 * boxPadding - 40;
|
||||
|
||||
// Funktion zum Umbruch langer Texte
|
||||
function wrapText(ctx, text, x, y, maxWidth, font) {
|
||||
ctx.font = font;
|
||||
const lineHeight = parseInt(font.match(/\d+/)[0]) * 1.2;
|
||||
|
||||
const words = text.split(' ');
|
||||
let line = '';
|
||||
let lines = [];
|
||||
|
||||
for (let n = 0; n < words.length; n++) {
|
||||
let testLine = line + words[n] + ' ';
|
||||
let testWidth = ctx.measureText(testLine).width;
|
||||
|
||||
if (testWidth > maxWidth && n > 0) {
|
||||
lines.push(line);
|
||||
line = words[n] + ' ';
|
||||
} else {
|
||||
line = testLine;
|
||||
}
|
||||
}
|
||||
lines.push(line);
|
||||
|
||||
lines.forEach((line, i) => ctx.fillText(line, x, y + i * lineHeight));
|
||||
}
|
||||
|
||||
// Zeichnet Headline und Subline ins Canvas
|
||||
wrapText(ctx, headline, boxPadding + 20, canvas.height - boxHeight - boxPadding + 80, maxWidth, headlineFont);
|
||||
wrapText(ctx, subline, boxPadding + 20, canvas.height - boxHeight - boxPadding + 150, maxWidth, sublineFont);
|
||||
|
||||
// Zeichnet das Logo
|
||||
if (uploadedLogo) {
|
||||
const logoSize = parseInt(document.getElementById('logoSize').value);
|
||||
const logoRatio = uploadedLogo.width / uploadedLogo.height;
|
||||
let logoWidth = logoSize * logoRatio;
|
||||
let logoHeight = logoSize;
|
||||
|
||||
if (logoWidth > canvas.width - 40) {
|
||||
logoWidth = canvas.width - 40;
|
||||
logoHeight = logoWidth / logoRatio;
|
||||
}
|
||||
|
||||
const logoLeft = document.getElementById('logoLeft').checked;
|
||||
const logoX = logoLeft ? 20 : canvas.width - logoWidth - 20;
|
||||
|
||||
ctx.drawImage(uploadedLogo, logoX, 20, logoWidth, logoHeight);
|
||||
}
|
||||
}
|
||||
|
||||
// Bild-Drag-Funktionalität
|
||||
const canvas = document.getElementById('canvas');
|
||||
canvas.addEventListener('mousedown', function (e) {
|
||||
if (uploadedImage) {
|
||||
isDragging = true;
|
||||
dragStartX = e.offsetX - imageOffsetX;
|
||||
dragStartY = e.offsetY - imageOffsetY;
|
||||
}
|
||||
});
|
||||
|
||||
canvas.addEventListener('mousemove', function (e) {
|
||||
if (isDragging && uploadedImage) {
|
||||
const { width, height } = calculateImageDimensions(uploadedImage, canvas);
|
||||
|
||||
if (uploadedImage.width > uploadedImage.height) {
|
||||
imageOffsetX = e.offsetX - dragStartX;
|
||||
imageOffsetX = Math.min(0, Math.max(imageOffsetX, canvas.width - width));
|
||||
} else {
|
||||
imageOffsetY = e.offsetY - dragStartY;
|
||||
imageOffsetY = Math.min(0, Math.max(imageOffsetY, canvas.height - height));
|
||||
}
|
||||
drawCanvas();
|
||||
}
|
||||
});
|
||||
|
||||
canvas.addEventListener('mouseup', () => isDragging = false);
|
||||
canvas.addEventListener('mouseout', () => isDragging = false);
|
||||
|
||||
// Download-Button für das Sharepic
|
||||
document.getElementById('downloadBtn').addEventListener('click', function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
const dataUrl = canvas.toDataURL('image/png');
|
||||
const a = document.createElement('a');
|
||||
a.href = dataUrl;
|
||||
a.download = 'sharepic.png';
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
});
|
||||
Loading…
Add table
Reference in a new issue