refactor: apply Tailwind CSS and Heroicons to all HTML files

- Replace custom CSS with Tailwind utility classes
- Convert all inline SVGs to Heroicons sprite system
- Add consistent Tailwind config with design tokens
- Improve responsive layout for onboarding screen
This commit is contained in:
2026-05-18 18:04:47 +09:00
parent 72b7d35719
commit 3735240eed
7 changed files with 1729 additions and 5130 deletions

View File

@@ -1,7 +1,56 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">
<title>Puzzle CI Logo</title>
<path d="M173.39,147.31 L172.21,148.10 L170.59,149.56 L169.06,151.71 L168.08,154.15 L167.52,156.88 L167.43,159.52 L167.43,162.11 L167.43,164.70 L167.43,167.33 L167.43,170.07 L167.43,172.71 L167.43,175.29 L167.43,177.88 L167.43,180.52 L167.43,183.25 L167.43,185.89 L167.43,188.62 L167.43,191.26 L167.43,193.85 L167.43,196.44 L167.43,199.07 L167.43,201.81 L167.43,204.44 L167.43,207.03 L167.43,209.62 L167.43,212.26 L167.43,214.99 L167.43,217.63 L167.43,220.36 L167.43,223.00 L167.43,225.59 L167.43,228.17 L167.43,230.81 L167.43,233.54 L167.43,236.18 L167.43,238.77 L167.43,241.36 L167.43,243.99 L167.43,246.73 L167.43,249.37 L167.43,252.10 L167.98,253.91 L169.06,254.88 L170.78,254.88 L172.54,254.88 L174.36,254.88 L176.12,254.88 L177.85,254.88 L179.58,254.88 L181.34,254.88 L183.16,254.88 L184.92,254.88 L186.74,254.88 L188.50,254.88 L190.23,255.22 L191.30,256.49 L191.63,258.64 L191.30,261.38 L190.78,264.01 L190.33,266.60 L189.90,269.19 L189.67,271.83 L189.80,274.56 L190.23,277.20 L190.98,279.93 L191.95,282.57 L193.26,285.16 L194.89,287.26 L196.64,288.92 L198.47,289.89 L200.23,290.38 L201.95,290.53 L203.68,290.38 L205.44,289.89 L207.26,288.72 L209.02,287.11 L210.65,284.81 L211.95,282.37 L212.93,279.79 L213.58,277.20 L213.91,274.56 L213.91,271.83 L213.68,269.19 L213.36,266.60 L212.93,264.01 L212.48,261.38 L212.15,258.64 L212.61,256.49 L213.78,255.22 L215.54,254.88 L217.26,254.88 L218.99,254.88 L220.75,254.88 L222.57,254.88 L224.33,254.88 L226.06,254.88 L227.79,254.88 L229.54,254.88 L231.37,254.88 L233.13,254.88 L234.95,254.88 L236.48,254.39 L237.46,253.08 L237.79,250.83 L237.79,248.19 L237.79,245.46 L237.79,242.82 L237.79,240.23 L237.79,237.65 L237.79,235.01 L237.79,232.28 L237.79,229.64 L237.79,226.90 L237.79,224.27 L237.79,221.68 L237.79,219.09 L237.23,217.29 L236.06,216.65 L234.30,217.14 L232.57,217.92 L230.85,218.60 L229.09,219.09 L227.26,219.24 L225.50,219.09 L223.68,218.41 L221.92,217.43 L220.20,215.82 L218.47,213.72 L217.04,211.08 L215.86,208.35 L215.31,205.71 L214.89,203.12 L214.89,200.54 L214.98,197.90 L215.54,195.17 L216.29,192.53 L217.59,189.79 L219.12,187.35 L220.85,185.40 L222.57,184.08 L224.33,183.25 L226.16,182.76 L227.92,182.62 L229.64,182.76 L231.37,183.25 L233.13,183.94 L234.95,184.72 L236.48,184.91 L237.46,183.94 L237.79,181.79 L237.79,179.20 L237.79,176.61 L237.79,173.97 L237.79,171.24 L237.79,168.60 L237.79,166.02 L237.79,163.43 L237.79,160.79 L237.79,158.06 L237.79,155.42 L237.79,152.69 L237.79,150.05 L237.23,148.10 L236.06,147.12 L234.30,146.97 L232.48,146.97 L230.72,146.97 L228.99,146.97 L227.26,146.97 L225.50,146.97 L223.68,146.97 L221.92,146.97 L220.10,146.97 L218.34,146.97 L216.61,146.97 L214.89,146.97 L213.13,146.97 L211.30,146.97 L209.54,146.97 L207.82,146.97 L206.09,146.97 L204.33,146.97 L202.51,146.97 L200.75,146.97 L198.93,146.97 L197.17,146.97 L195.44,146.97 L193.71,146.97 L191.95,146.97 L190.13,146.97 L188.37,146.97 L186.64,146.97 L184.92,146.97 L183.16,146.97 L181.34,146.97 L179.58,146.97 L177.75,146.97 L175.99,146.97 L174.69,146.97 Z" fill="#6e9dea"/>
<path d="M281.66,94.58 L281.34,96.34 L280.88,98.97 L280.36,101.56 L279.90,104.00 L279.38,106.59 L278.93,109.23 L278.40,111.82 L277.95,114.26 L277.43,116.85 L276.97,119.48 L276.55,122.07 L276.12,124.51 L275.47,127.10 L274.36,128.42 L272.96,128.42 L271.34,126.95 L269.61,125.34 L267.85,123.88 L266.12,122.71 L264.50,122.07 L262.77,121.92 L261.01,122.07 L259.28,122.56 L257.56,123.39 L255.80,124.66 L254.07,126.61 L252.67,128.91 L251.47,131.49 L250.72,134.13 L250.16,136.72 L250.07,139.16 L250.07,141.75 L250.39,144.38 L250.91,146.97 L251.79,149.41 L253.09,151.86 L254.63,154.15 L256.35,155.91 L257.98,157.08 L259.71,157.71 L261.47,158.06 L263.19,158.20 L264.82,158.20 L266.55,158.20 L268.31,158.69 L269.28,160.01 L269.48,162.26 L268.96,164.89 L268.50,167.48 L268.08,169.92 L267.65,172.51 L267.20,175.15 L266.68,177.73 L266.22,180.18 L265.80,182.76 L265.37,185.40 L264.92,187.99 L264.40,190.43 L263.94,193.02 L264.17,195.17 L265.15,196.63 L266.78,197.41 L268.50,198.10 L270.26,198.88 L271.99,199.56 L273.71,200.34 L275.47,201.03 L277.20,201.66 L278.83,202.29 L280.55,202.98 L282.31,203.76 L284.04,204.44 L285.67,205.08 L286.97,204.59 L287.72,203.12 L287.85,200.68 L287.72,198.24 L287.62,195.65 L287.72,193.02 L287.95,190.43 L288.37,187.99 L289.15,185.40 L290.23,182.76 L291.63,180.32 L293.16,178.37 L294.89,176.90 L296.64,175.93 L298.37,175.29 L300.10,175.15 L301.86,175.29 L303.58,175.93 L305.21,176.90 L306.94,178.71 L308.57,181.01 L309.87,183.59 L310.75,186.04 L311.30,188.62 L311.73,191.26 L311.82,193.85 L311.73,196.29 L311.30,198.88 L310.65,201.51 L309.77,204.10 L308.79,206.54 L307.72,209.13 L307.49,211.28 L308.14,212.74 L309.77,213.53 L311.50,214.21 L313.26,214.99 L314.98,215.67 L316.71,216.46 L318.47,217.14 L320.20,217.77 L321.82,218.41 L323.55,219.09 L325.31,219.87 L327.04,220.56 L328.66,221.34 L330.39,222.02 L331.92,222.02 L333.00,220.85 L333.65,218.75 L334.10,216.16 L334.63,213.53 L335.08,210.94 L335.50,208.50 L335.93,205.91 L336.38,203.27 L336.91,200.68 L337.36,198.24 L337.88,195.65 L338.34,193.02 L338.86,190.43 L339.41,187.84 L339.97,185.21 L340.39,182.62 L340.81,180.18 L341.27,177.59 L341.79,174.95 L342.25,172.36 L342.77,169.92 L343.22,167.33 L343.75,164.70 L344.20,162.11 L344.72,159.67 L345.18,157.08 L345.70,154.44 L346.16,151.86 L346.58,149.41 L347.00,146.83 L347.46,144.19 L347.98,141.60 L348.44,139.01 L348.96,136.38 L349.41,133.79 L349.74,131.35 L349.74,128.76 L349.41,126.12 L348.53,123.54 L347.23,121.44 L345.50,119.78 L343.75,118.80 L342.02,118.16 L340.39,117.53 L338.66,116.70 L336.91,115.87 L335.18,115.23 L333.55,114.60 L331.82,113.92 L330.07,113.13 L328.34,112.45 L326.71,111.82 L324.98,111.18 L323.22,110.50 L321.50,109.72 L319.77,109.03 L318.01,108.25 L316.29,107.57 L314.66,106.93 L312.93,106.30 L311.17,105.62 L309.45,104.83 L307.82,104.15 L306.09,103.37 L304.33,102.69 L302.61,101.90 L300.98,101.22 L299.25,100.44 L297.49,99.76 L295.77,99.12 L294.14,98.49 L292.41,97.80 L290.65,97.02 L288.93,96.34 L287.30,95.70 L285.57,95.07 L283.81,94.38 L282.51,93.90 Z" fill="#2d6ad5"/>
<path d="M275.67,219.38 L274.59,219.87 L272.96,220.70 L271.34,221.83 L269.71,223.49 L268.18,225.59 L267.00,228.17 L266.12,230.81 L265.57,233.40 L265.24,235.84 L265.15,238.28 L265.24,240.72 L265.57,243.16 L266.12,245.61 L266.68,248.05 L267.10,250.49 L266.87,252.78 L266.03,254.25 L264.40,254.88 L262.64,254.88 L260.91,254.88 L259.28,254.88 L257.65,254.88 L256.03,254.88 L254.40,254.88 L252.77,254.88 L251.14,254.88 L249.51,254.88 L247.88,254.88 L246.48,255.22 L245.60,256.35 L245.28,258.45 L245.28,261.08 L245.28,263.67 L245.28,266.11 L245.28,268.55 L245.28,271.00 L245.28,273.44 L245.28,275.88 L245.60,277.83 L246.48,278.81 L247.88,278.96 L249.51,278.81 L251.24,278.81 L253.00,278.96 L254.72,279.44 L256.35,280.27 L257.98,281.25 L259.61,282.37 L261.24,283.84 L262.87,285.79 L264.40,288.09 L265.80,290.53 L266.87,292.97 L267.85,295.41 L268.63,298.00 L269.28,300.63 L269.71,303.22 L269.93,305.66 L270.03,308.11 L269.93,310.55 L269.80,312.99 L269.48,315.43 L269.06,317.87 L268.40,320.31 L267.65,322.75 L266.78,325.20 L265.57,327.64 L264.07,330.22 L262.31,332.52 L260.59,334.47 L258.96,335.79 L257.33,336.91 L255.70,337.74 L254.07,338.38 L252.44,338.72 L250.81,338.87 L249.19,338.72 L247.56,338.38 L246.25,338.53 L245.50,339.84 L245.28,342.14 L245.28,344.73 L245.28,347.17 L245.28,349.61 L245.28,352.05 L245.28,354.49 L245.28,356.93 L245.28,359.38 L245.70,361.18 L246.68,362.16 L248.21,362.30 L249.84,362.30 L251.56,362.30 L253.32,362.30 L255.05,362.30 L256.68,362.30 L258.31,362.30 L259.93,362.30 L261.56,362.30 L263.19,362.30 L264.82,362.30 L266.45,362.30 L268.08,362.30 L269.71,362.30 L271.43,362.30 L273.19,362.30 L274.92,362.30 L276.55,362.30 L278.18,362.30 L279.80,362.30 L281.43,362.30 L283.06,362.30 L284.69,362.30 L286.32,362.30 L287.95,362.30 L289.58,362.30 L291.21,362.30 L292.93,362.30 L294.69,362.30 L296.42,362.30 L298.05,362.30 L299.67,362.30 L301.30,362.30 L302.93,361.96 L304.56,361.33 L306.09,359.86 L307.39,357.91 L308.24,355.47 L308.70,353.03 L308.79,350.44 L308.79,347.80 L308.79,345.21 L308.79,342.77 L308.79,340.33 L308.79,337.89 L308.79,335.45 L308.79,333.01 L308.79,330.57 L308.79,328.12 L308.79,325.68 L308.79,323.24 L308.79,320.80 L308.79,318.21 L308.79,315.58 L308.79,312.99 L308.79,310.55 L308.79,308.11 L308.79,305.66 L308.79,303.22 L308.79,300.78 L308.79,298.34 L308.79,295.90 L308.79,293.46 L308.79,291.02 L308.79,288.43 L308.79,285.79 L308.79,283.20 L308.79,280.76 L308.79,278.32 L308.79,275.88 L308.79,273.44 L308.79,271.00 L308.79,268.55 L308.79,266.11 L308.79,263.67 L308.79,261.23 L308.79,258.64 L308.47,256.49 L307.59,255.22 L306.19,254.88 L304.56,254.88 L302.93,254.88 L301.30,254.88 L299.67,254.88 L298.05,254.88 L296.42,254.88 L294.79,254.88 L293.16,254.88 L291.53,254.88 L289.80,254.88 L288.18,254.25 L287.30,252.78 L287.30,250.49 L287.85,248.05 L288.37,245.61 L288.83,243.16 L289.15,240.72 L289.25,238.28 L289.15,235.84 L288.93,233.40 L288.37,230.96 L287.52,228.37 L286.22,225.73 L284.69,223.49 L283.06,221.83 L281.43,220.70 L279.80,219.87 L278.18,219.38 L276.97,219.24 Z" fill="#5187e1"/>
<path d="M167.43,267.43 L167.43,269.04 L167.43,271.48 L167.43,273.93 L167.43,276.37 L167.43,278.81 L167.43,281.25 L167.43,283.84 L167.43,286.47 L167.43,289.06 L167.43,291.50 L167.43,293.95 L167.43,296.39 L167.43,298.83 L167.43,301.27 L167.43,303.71 L167.43,306.15 L167.43,308.59 L167.43,311.04 L167.43,313.48 L167.43,315.92 L167.43,318.36 L167.43,320.95 L167.43,323.58 L167.43,326.17 L167.43,328.61 L167.43,331.05 L167.43,333.50 L167.43,335.94 L167.43,338.38 L167.43,340.82 L167.43,343.26 L167.43,345.70 L167.43,348.14 L167.43,350.59 L167.52,353.03 L167.98,355.47 L168.83,357.91 L170.26,360.01 L171.89,361.47 L173.62,362.16 L175.24,362.30 L176.87,362.30 L178.50,362.30 L180.13,362.30 L181.76,362.30 L183.39,362.30 L185.02,362.30 L186.64,362.30 L188.27,362.30 L189.90,362.30 L191.53,362.30 L193.16,362.30 L194.89,362.30 L196.64,362.30 L198.37,362.30 L200.00,362.30 L201.63,362.30 L203.26,362.30 L204.89,362.30 L206.51,362.30 L208.14,362.30 L209.77,362.30 L211.40,362.30 L213.03,362.30 L214.66,362.30 L216.29,362.30 L217.92,362.30 L219.64,362.30 L221.40,362.30 L223.13,362.30 L224.76,362.30 L226.38,362.30 L228.01,362.30 L229.64,362.30 L231.27,362.30 L232.90,362.30 L234.53,362.30 L236.16,362.30 L237.23,361.47 L237.79,359.86 L237.79,357.42 L237.79,354.98 L237.79,352.54 L237.79,349.95 L237.79,347.31 L237.79,344.73 L237.79,342.29 L237.79,339.84 L237.79,337.40 L237.79,334.96 L237.79,332.52 L237.79,330.08 L237.79,327.64 L238.01,325.20 L238.76,323.58 L240.07,323.10 L241.69,323.73 L243.32,324.71 L245.05,325.68 L246.81,326.51 L248.53,327.00 L250.16,327.00 L251.79,326.66 L253.42,326.17 L255.05,325.34 L256.68,324.07 L258.31,322.12 L259.71,319.82 L260.81,317.38 L261.47,314.94 L261.89,312.50 L262.12,310.06 L262.12,307.62 L261.79,305.03 L261.24,302.39 L260.36,299.80 L259.28,297.51 L257.88,295.41 L256.35,293.60 L254.72,292.33 L253.09,291.50 L251.47,291.16 L249.84,291.02 L248.21,291.16 L246.58,291.65 L244.95,292.48 L243.32,293.31 L241.69,294.09 L240.07,294.58 L238.76,293.95 L238.01,292.14 L237.79,289.55 L237.79,287.11 L237.79,284.67 L237.79,282.23 L237.79,279.79 L237.79,277.34 L237.79,274.90 L237.79,272.46 L237.79,270.02 L237.36,268.07 L236.38,266.94 L234.85,266.60 L233.22,266.60 L231.50,266.60 L229.74,266.60 L228.01,266.60 L226.38,266.60 L224.76,266.60 L223.13,266.60 L222.15,267.43 L221.73,269.04 L221.82,271.48 L221.82,273.93 L221.73,276.37 L221.50,278.81 L221.07,281.25 L220.52,283.69 L219.77,286.13 L218.79,288.72 L217.49,291.36 L215.96,293.95 L214.33,296.24 L212.70,298.00 L211.07,299.46 L209.45,300.44 L207.82,301.42 L206.19,302.10 L204.56,302.59 L202.93,302.73 L201.30,302.73 L199.67,302.59 L198.05,302.25 L196.42,301.61 L194.79,300.78 L193.06,299.66 L191.30,298.19 L189.58,296.24 L187.95,293.95 L186.42,291.50 L185.11,289.06 L184.14,286.62 L183.39,284.18 L182.83,281.74 L182.41,279.30 L182.18,276.86 L182.08,274.41 L182.08,271.97 L182.18,269.53 L181.86,267.72 L180.88,266.75 L179.25,266.60 L177.52,266.60 L175.90,266.60 L174.27,266.60 L172.64,266.60 L171.01,266.60 L169.38,266.60 L168.18,266.60 Z" fill="#71a0ed"/>
</svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
width="500"
height="500"
viewBox="0 0 500 500"
version="1.1"
id="svg4"
sodipodi:docname="logo.svg"
inkscape:version="1.4.4 (dcaf3e7d9e, 2026-05-05)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs4" />
<sodipodi:namedview
id="namedview4"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:zoom="1.2099419"
inkscape:cx="238.4412"
inkscape:cy="279.35225"
inkscape:window-width="1235"
inkscape:window-height="975"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg4" />
<title
id="title1">Puzzle CI Logo</title>
<path
d="m 144.04047,151.41 -1.5919,0.79 -2.1855,1.46 -2.06408,2.15 -1.32209,2.44 -0.75548,2.73 L 136,163.62 v 2.59 2.59 2.63 2.74 2.64 2.58 2.59 2.64 2.73 2.64 2.73 2.64 2.59 2.59 2.63 2.74 2.63 2.59 2.59 2.64 2.73 2.64 2.73 2.64 2.59 2.58 2.64 2.73 2.64 2.59 2.59 2.63 2.74 2.64 2.73 l 0.74199,1.81 1.457,0.97 h 2.3204 2.37437 2.45531 2.37437 2.3339 2.33389 2.37437 2.45531 2.37437 2.45531 2.37437 l 2.33389,0.34 1.44351,1.27 0.4452,2.15 -0.4452,2.74 -0.70152,2.63 -0.60708,2.59 -0.5801,2.59 -0.31029,2.64 0.17538,2.73 0.5801,2.64 1.01181,2.73 1.3086,2.64 1.76728,2.59 2.19899,2.1 2.36088,1.66 2.4688,0.97 2.37437,0.49 2.3204,0.15 2.3339,-0.15 2.37437,-0.49 2.45531,-1.17 2.37437,-1.61 2.19899,-2.3 1.75379,-2.44 1.32209,-2.58 0.8769,-2.59 0.44519,-2.64 v -2.73 l -0.31028,-2.64 -0.43171,-2.59 -0.5801,-2.59 -0.60708,-2.63 -0.4452,-2.74 0.62058,-2.15 1.57841,-1.27 2.37437,-0.34 h 2.32041 2.33389 2.37437 2.45531 2.37437 2.33389 2.3339 2.36088 2.4688 2.37437 2.45531 l 2.06408,-0.49 1.32209,-1.31 0.4452,-2.25 v -2.64 -2.73 -2.64 -2.59 -2.58 -2.64 -2.73 -2.64 -2.74 -2.63 -2.59 -2.59 l -0.75549,-1.8 -1.57841,-0.64 -2.37437,0.49 -2.33389,0.78 -2.32041,0.68 -2.37437,0.49 -2.4688,0.15 -2.37437,-0.15 -2.45531,-0.68 -2.37437,-0.98 -2.3204,-1.61 -2.3339,-2.1 -1.92917,-2.64 -1.59191,-2.73 -0.74199,-2.64 -0.56661,-2.59 v -2.58 l 0.12142,-2.64 0.75548,-2.73 1.01181,-2.64 1.75379,-2.74 2.06408,-2.44 2.3339,-1.95 2.3204,-1.32 2.37437,-0.83 2.4688,-0.49 2.37437,-0.14 2.3204,0.14 2.3339,0.49 2.37437,0.69 2.45531,0.78 2.06408,0.19 1.32209,-0.97 0.4452,-2.15 v -2.59 -2.59 -2.64 -2.73 -2.64 -2.58 -2.59 -2.64 -2.73 -2.64 -2.73 -2.64 l -0.75549,-1.95 -1.57841,-0.98 -2.37437,-0.15 h -2.45531 -2.37437 -2.33389 -2.3339 -2.37437 -2.45531 -2.37437 -2.45531 -2.37437 -2.33389 -2.32041 -2.37436 -2.46881 -2.37436 -2.32041 -2.33389 -2.37437 -2.45531 -2.37437 -2.45531 -2.37437 -2.3339 -2.33389 -2.37437 -2.45531 -2.37437 -2.3339 -2.3204 -2.37437 -2.45531 -2.37437 -2.4688 -2.37437 -1.75379 z"
fill="#6e9dea"
id="path1"
style="stroke-width:1.1615" />
<path
d="m 290.10456,98.68 -0.4317,1.76 -0.62058,2.63 -0.70152,2.59 -0.62057,2.44 -0.70152,2.59 -0.60708,2.64 -0.71501,2.59 -0.60708,2.44 -0.70152,2.59 -0.62057,2.63 -0.56661,2.59 -0.5801,2.44 -0.8769,2.59 -1.49747,1.32 h -1.8887 l -2.1855,-1.47 -2.3339,-1.61 -2.37436,-1.46 -2.3339,-1.17 -2.1855,-0.64 -2.33389,-0.15 -2.37437,0.15 -2.3339,0.49 -2.3204,0.83 -2.37437,1.27 -2.33389,1.95 -1.88871,2.3 -1.61888,2.58 -1.01181,2.64 -0.75548,2.59 -0.12141,2.44 v 2.59 l 0.4317,2.63 0.70152,2.59 1.18718,2.44 1.7538,2.45 2.07757,2.29 2.3204,1.76 2.19899,1.17 2.3339,0.63 2.37436,0.35 2.32041,0.14 h 2.19899 2.33389 l 2.37437,0.49 1.3086,1.32 0.26981,2.25 -0.70151,2.63 -0.62058,2.59 -0.56661,2.44 -0.5801,2.59 -0.60708,2.64 -0.70152,2.58 -0.62057,2.45 -0.56661,2.58 -0.5801,2.64 -0.60709,2.59 -0.70151,2.44 -0.62058,2.59 0.31029,2.15 1.32209,1.46 2.19899,0.78 2.3204,0.69 2.37437,0.78 2.3339,0.68 2.3204,0.78 2.37437,0.69 2.33389,0.63 2.19899,0.63 2.32041,0.69 2.37437,0.78 2.33389,0.68 2.19899,0.64 1.75379,-0.49 1.01181,-1.47 0.17538,-2.44 -0.17538,-2.44 -0.13491,-2.59 0.13491,-2.63 0.31028,-2.59 0.56662,-2.44 1.05227,-2.59 1.457,-2.64 1.8887,-2.44 2.06408,-1.95 2.3339,-1.47 2.36088,-0.97 2.33389,-0.64 2.3339,-0.14 2.37436,0.14 2.32041,0.64 2.19899,0.97 2.33389,1.81 2.19899,2.3 1.7538,2.58 1.18718,2.45 0.74199,2.58 0.5801,2.64 0.12142,2.59 -0.12142,2.44 -0.5801,2.59 -0.8769,2.63 -1.18718,2.59 -1.32209,2.44 -1.44351,2.59 -0.31029,2.15 0.8769,1.46 2.19899,0.79 2.33389,0.68 2.37437,0.78 2.32041,0.68 2.33389,0.79 2.37437,0.68 2.33389,0.63 2.1855,0.64 2.3339,0.68 2.37437,0.78 2.33389,0.69 2.1855,0.78 2.33389,0.68 h 2.06409 l 1.45699,-1.17 0.8769,-2.1 0.60708,-2.59 0.71501,-2.63 0.60708,-2.59 0.56661,-2.44 0.58011,-2.59 0.60708,-2.64 0.71501,-2.59 0.60708,-2.44 0.70152,-2.59 0.62057,-2.63 0.70152,-2.59 0.74199,-2.59 0.75548,-2.63 0.56661,-2.59 0.56661,-2.44 0.62057,-2.59 0.70152,-2.64 0.62057,-2.59 0.70152,-2.44 0.60708,-2.59 0.71501,-2.63 0.60709,-2.59 0.70151,-2.44 0.62058,-2.59 0.70151,-2.64 0.62058,-2.58 0.56661,-2.45 0.56661,-2.58 0.62057,-2.64 0.70152,-2.59 0.62057,-2.59 0.70152,-2.63 0.60708,-2.59 0.4452,-2.44 v -2.59 l -0.4452,-2.64 -1.18718,-2.58 -1.75379,-2.1 -2.3339,-1.66 -2.36088,-0.98 -2.33389,-0.64 -2.19899,-0.63 -2.3339,-0.83 -2.36087,-0.83 -2.3339,-0.64 -2.19899,-0.63 -2.33389,-0.68 -2.36088,-0.79 -2.33389,-0.68 -2.19899,-0.63 -2.3339,-0.64 -2.37437,-0.68 -2.3204,-0.78 -2.3339,-0.69 -2.37436,-0.78 -2.32041,-0.68 -2.19899,-0.64 -2.33389,-0.63 -2.37437,-0.68 -2.32041,-0.79 -2.19898,-0.68 -2.3339,-0.78 -2.37437,-0.68 -2.3204,-0.79 -2.19899,-0.68 -2.3339,-0.78 -2.37436,-0.68 -2.32041,-0.64 -2.19899,-0.63 -2.33389,-0.69 -2.37437,-0.78 -2.3204,-0.68 -2.19899,-0.64 -2.3339,-0.63 -2.37437,-0.69 -1.75379,-0.48 z"
fill="#2d6ad5"
id="path2"
style="stroke-width:1.1615" />
<path
d="m 282.02361,223.48 -1.45699,0.49 -2.19899,0.83 -2.1855,1.13 -2.19899,1.66 -2.06408,2.1 -1.59191,2.58 -1.18718,2.64 -0.74199,2.59 -0.44519,2.44 -0.12142,2.44 0.12142,2.44 0.44519,2.44 0.74199,2.45 0.75548,2.44 0.56661,2.44 -0.31028,2.29 -1.13323,1.47 -2.19898,0.63 h -2.37437 -2.3339 -2.19899 -2.19898 -2.1855 -2.19899 -2.19899 -2.19899 -2.19898 -2.19899 l -1.8887,0.34 -1.18719,1.13 -0.4317,2.1 v 2.63 2.59 2.44 2.44 2.45 2.44 2.44 l 0.4317,1.95 1.18719,0.98 1.8887,0.15 2.19899,-0.15 h 2.33389 l 2.37437,0.15 2.3204,0.48 2.19899,0.83 2.19899,0.98 2.19899,1.12 2.19899,1.47 2.19898,1.95 2.06409,2.3 1.8887,2.44 1.44351,2.44 1.32209,2.44 1.05227,2.59 0.8769,2.63 0.5801,2.59 0.2968,2.44 0.1349,2.45 -0.1349,2.44 -0.17538,2.44 -0.43171,2.44 -0.56661,2.44 -0.89038,2.44 -1.01181,2.44 -1.17369,2.45 -1.63238,2.44 -2.02361,2.58 -2.37437,2.3 -2.3204,1.95 -2.19899,1.32 -2.19899,1.12 -2.19899,0.83 -2.19898,0.64 -2.19899,0.34 -2.19899,0.15 -2.1855,-0.15 -2.19899,-0.34 -1.76728,0.15 -1.01181,1.31 -0.29679,2.3 v 2.59 2.44 2.44 2.44 2.44 2.44 2.45 l 0.56661,1.8 1.32209,0.98 2.06408,0.14 h 2.19899 2.3204 2.37437 2.3339 2.19899 2.19898 2.1855 2.19899 2.19899 2.19899 2.19898 2.19899 2.19899 2.32041 2.37436 2.3339 2.19899 2.19899 2.18549 2.19899 2.19899 2.19899 2.19899 2.19898 2.19899 2.19899 2.32041 2.37436 2.3339 2.19899 2.1855 2.19898 l 2.19899,-0.34 2.19899,-0.63 2.06408,-1.47 1.7538,-1.95 1.14671,-2.44 0.62057,-2.44 0.12142,-2.59 v -2.64 -2.59 -2.44 -2.44 -2.44 -2.44 -2.44 -2.44 -2.45 -2.44 -2.44 -2.44 -2.59 -2.63 -2.59 -2.44 -2.44 -2.45 -2.44 -2.44 -2.44 -2.44 -2.44 -2.44 -2.59 -2.64 -2.59 -2.44 -2.44 -2.44 -2.44 -2.44 -2.45 -2.44 -2.44 -2.44 -2.59 l -0.43171,-2.15 -1.18718,-1.27 -1.8887,-0.34 h -2.19899 -2.19899 -2.19899 -2.19898 -2.1855 -2.19899 -2.19899 -2.19899 -2.19899 -2.33389 l -2.1855,-0.63 -1.18718,-1.47 v -2.29 l 0.74199,-2.44 0.70152,-2.44 0.62057,-2.45 0.4317,-2.44 0.13491,-2.44 -0.13491,-2.44 -0.29679,-2.44 -0.75548,-2.44 -1.14672,-2.59 -1.75379,-2.64 -2.06408,-2.24 -2.19899,-1.66 -2.19899,-1.13 -2.19899,-0.83 -2.18549,-0.49 -1.63238,-0.14 z"
fill="#5187e1"
id="path3"
style="stroke-width:1.1615" />
<path
d="m 136,271.53 v 1.61 2.44 2.45 2.44 2.44 2.44 2.59 2.63 2.59 2.44 2.45 2.44 2.44 2.44 2.44 2.44 2.44 2.45 2.44 2.44 2.44 2.59 2.63 2.59 2.44 2.44 2.45 2.44 2.44 2.44 2.44 2.44 2.44 2.45 l 0.12142,2.44 0.62057,2.44 1.14671,2.44 1.92918,2.1 2.19898,1.46 2.3339,0.69 2.1855,0.14 h 2.19898 2.19899 2.19899 2.19899 2.19899 2.19899 2.18549 2.19899 2.19899 2.19899 2.19899 2.33389 2.36088 2.33389 2.19899 2.19899 2.19899 2.19899 2.1855 2.19898 2.19899 2.19899 2.19899 2.19899 2.19899 2.19898 2.32041 2.37437 2.33389 2.19899 2.1855 2.19899 2.19898 2.19899 2.19899 2.19899 2.19899 l 1.4435,-0.83 0.75549,-1.61 v -2.44 -2.44 -2.44 -2.59 -2.64 -2.58 -2.44 -2.45 -2.44 -2.44 -2.44 -2.44 -2.44 l 0.29679,-2.44 1.01181,-1.62 1.76728,-0.48 2.1855,0.63 2.19899,0.98 2.33389,0.97 2.37437,0.83 2.3204,0.49 h 2.19899 l 2.19899,-0.34 2.19899,-0.49 2.19899,-0.83 2.19899,-1.27 2.19898,-1.95 1.88871,-2.3 1.48398,-2.44 0.89038,-2.44 0.56661,-2.44 0.31029,-2.44 v -2.44 l -0.44519,-2.59 -0.74199,-2.64 -1.18719,-2.59 -1.457,-2.29 -1.8887,-2.1 -2.06408,-1.81 -2.19899,-1.27 -2.19898,-0.83 -2.1855,-0.34 -2.19899,-0.14 -2.19899,0.14 -2.19899,0.49 -2.19899,0.83 -2.19898,0.83 -2.19899,0.78 -2.1855,0.49 -1.76728,-0.63 -1.01181,-1.81 -0.29679,-2.59 v -2.44 -2.44 -2.44 -2.44 -2.45 -2.44 -2.44 -2.44 l -0.58011,-1.95 -1.32209,-1.13 -2.06408,-0.34 h -2.19899 -2.3204 -2.37437 -2.33389 -2.19899 -2.1855 -2.19899 l -1.32209,0.83 -0.56661,1.61 0.12142,2.44 v 2.45 l -0.12142,2.44 -0.31029,2.44 -0.5801,2.44 -0.74199,2.44 -1.0118,2.44 -1.32209,2.59 -1.7538,2.64 -2.06408,2.59 -2.19899,2.29 -2.19899,1.76 -2.19898,1.46 -2.1855,0.98 -2.19899,0.98 -2.19899,0.68 -2.19899,0.49 -2.19898,0.14 h -2.19899 l -2.19899,-0.14 -2.1855,-0.34 -2.19899,-0.64 -2.19898,-0.83 -2.3339,-1.12 -2.37437,-1.47 -2.3204,-1.95 -2.19899,-2.29 -2.06408,-2.45 -1.76729,-2.44 -1.3086,-2.44 -1.0118,-2.44 -0.75548,-2.44 -0.56661,-2.44 -0.31029,-2.44 -0.13491,-2.45 v -2.44 l 0.13491,-2.44 -0.4317,-1.81 -1.32209,-0.97 -2.19899,-0.15 h -2.3339 -2.1855 -2.19898 -2.19899 -2.19899 -2.19899 -1.61889 z"
fill="#71a0ed"
id="path4"
style="stroke-width:1.1615" />
</svg>

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 10 KiB

2918
index.html

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@@ -7,6 +7,62 @@
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&family=Outfit:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- Heroicons SVG Sprite -->
<svg xmlns="http://www.w3.org/2000/svg" style="display: none; width: 0; height: 0;">
<symbol id="icon-arrow-left" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M19 12H5M12 19l-7-7 7-7"/>
</symbol>
<symbol id="icon-arrow-right" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14M12 5l7 7-7 7"/>
</symbol>
<symbol id="icon-folder" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/>
</symbol>
<symbol id="icon-folder-solid" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h6l4 4h6a2 2 0 012 2v8a2 2 0 01-2 2z"/>
</symbol>
<symbol id="icon-folder-open" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2v11z"/>
</symbol>
<symbol id="icon-document" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
<polyline points="14 2 14 8 20 8"/>
</symbol>
<symbol id="icon-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="20 6 9 17 4 12"/>
</symbol>
<symbol id="icon-x-mark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="18" y1="6" x2="6" y2="18"/>
<line x1="6" y1="6" x2="18" y2="18"/>
</symbol>
<symbol id="icon-chevron-right" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="9 18 15 12 9 6"/>
</symbol>
<symbol id="icon-chevron-left" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="15 18 9 12 15 6"/>
</symbol>
<symbol id="icon-chevron-up" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="18 15 12 9 6 15"/>
</symbol>
<symbol id="icon-chevron-down" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="6 9 12 15 18 9"/>
</symbol>
<symbol id="icon-plus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="12" y1="5" x2="12" y2="19"/>
<line x1="5" y1="12" x2="19" y2="12"/>
</symbol>
<symbol id="icon-minus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="5" y1="12" x2="19" y2="12"/>
</symbol>
<symbol id="icon-eye" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
<circle cx="12" cy="12" r="3"/>
</symbol>
<symbol id="icon-code" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="16 18 22 12 16 6"/>
<polyline points="8 6 2 12 8 18"/>
</symbol>
</svg>
<style>
:root {
/* Blue Light Puzzle Theme - Intelligent, Precise, Cool */
@@ -1476,7 +1532,7 @@
<div class="header-right">
<button class="back-btn" onclick="window.location.href='index.html'" aria-label="Go back">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M19 12H5M12 19l-7-7 7-7"/>
<use href="#icon-arrow-left"></use>
</svg>
</button>
</div>
@@ -1486,20 +1542,21 @@
<div class="comparison-banner">
<div class="comparison-item current">
<div class="comparison-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/>
<svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<use href="#icon-folder"></use>
</svg>
</div>
<span>현재</span>
</div>
<span class="comparison-arrow"></span>
<span class="comparison-arrow">
<svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<use href="#icon-arrow-right"></use>
</svg>
</span>
<div class="comparison-item proposed">
<div class="comparison-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M9.5 2A2.5 2.5 0 0112 4.5V6H9.5A2.5 2.5 0 019.5 2zM12 4.5V6H6.5A2.5 2.5 0 014.5 6V4.5A2.5 2.5 0 016.5 2H12z"/>
<path d="M14.5 2A2.5 2.5 0 0112 4.5V6H14.5A2.5 2.5 0 0114.5 2zM12 4.5V6H17.5A2.5 2.5 0 0120 6V4.5A2.5 2.5 0 0117.5 2H12z"/>
<path d="M4.5 22A2.5 2.5 0 012 19.5V18H4.5A2.5 2.5 0 014.5 22zM2 18V19.5A2.5 2.5 0 014.5 22H6A2.5 2.5 0 012 19.5V18z"/>
<path d="M4.5 22A2.5 2.5 0 012 19.5V18H4.5A2.5 2.5 0 014.5 22zM2 18V19.5A2.5 2.5 0 014.5 22H6A2.5 2.5 0 012 19.5V18z"/>
<svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<use href="#icon-folder"></use>
</svg>
</div>
<span>AI 제안</span>
@@ -1512,7 +1569,9 @@
<div class="comparison-panel">
<div class="comparison-panel-header before">
<div class="comparison-panel-icon before">
<svg viewBox="0 0 24 24"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/></svg>
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<use href="#icon-folder"></use>
</svg>
</div>
<div>
<div class="comparison-panel-title">정리 전</div>
@@ -1522,7 +1581,7 @@
<div class="before-tree">
<div class="messy-folder">
<div class="messy-folder-name">
<svg viewBox="0 0 24 24"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-folder"></use></svg>
다운로드
</div>
<div class="messy-files">
@@ -1535,7 +1594,7 @@
</div>
<div class="messy-folder">
<div class="messy-folder-name">
<svg viewBox="0 0 24 24"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-folder"></use></svg>
바탕화면
</div>
<div class="messy-files">
@@ -1547,7 +1606,7 @@
</div>
<div class="messy-folder">
<div class="messy-folder-name">
<svg viewBox="0 0 24 24"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-folder"></use></svg>
문서
</div>
<div class="messy-files">
@@ -1561,7 +1620,7 @@
<div class="comparison-stats">
<div class="comparison-stat">
<div class="comparison-stat-icon removed">
<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-x-mark"></use></svg>
</div>
<div>
<div class="comparison-stat-value">87</div>
@@ -1570,7 +1629,7 @@
</div>
<div class="comparison-stat">
<div class="comparison-stat-icon removed">
<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-folder"></use></svg>
</div>
<div>
<div class="comparison-stat-value">12</div>
@@ -1584,7 +1643,7 @@
<div class="comparison-panel">
<div class="comparison-panel-header after">
<div class="comparison-panel-icon after">
<svg viewBox="0 0 24 24"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/><polyline points="20 6 9 17 4 12"/></svg>
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-folder"></use><use href="#icon-check" class="absolute inset-0"></use></svg>
</div>
<div>
<div class="comparison-panel-title">정리 후</div>
@@ -1594,63 +1653,63 @@
<div class="after-tree">
<div class="clean-folder">
<div class="clean-folder-header">
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="var(--primary)" stroke-width="2"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" stroke-width="2"><use href="#icon-plus"></use></svg>
<span class="clean-folder-name">작업 프로젝트</span>
<span class="clean-folder-count">24개 파일</span>
</div>
<div class="clean-subfolders">
<div class="clean-subfolder">
<svg viewBox="0 0 24 24"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-folder"></use></svg>
2024 보고서
<span class="diff-indicator added">
<svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-plus"></use></svg>
+8
</span>
</div>
<div class="clean-subfolder">
<svg viewBox="0 0 24 24"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-folder"></use></svg>
고객 파일
</div>
</div>
</div>
<div class="clean-folder">
<div class="clean-folder-header">
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="var(--accent)" stroke-width="2"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2"><use href="#icon-folder"></use></svg>
<span class="clean-folder-name">개인 파일</span>
<span class="clean-folder-count">31개 파일</span>
</div>
<div class="clean-subfolders">
<div class="clean-subfolder">
<svg viewBox="0 0 24 24"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-folder"></use></svg>
사진 아카이브
<span class="diff-indicator added">
<svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-plus"></use></svg>
+15
</span>
</div>
<div class="clean-subfolder">
<svg viewBox="0 0 24 24"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-folder"></use></svg>
문서
</div>
</div>
</div>
<div class="clean-folder">
<div class="clean-folder-header">
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="var(--text-muted)" stroke-width="2"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="var(--text-muted)" stroke-width="2"><use href="#icon-folder"></use></svg>
<span class="clean-folder-name">유틸리티</span>
<span class="clean-folder-count">18개 파일</span>
</div>
<div class="clean-subfolders">
<div class="clean-subfolder">
<svg viewBox="0 0 24 24"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-folder"></use></svg>
임시 파일
<span class="diff-indicator removed">
<svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-check"></use></svg>
정리됨
</span>
</div>
<div class="clean-subfolder">
<svg viewBox="0 0 24 24"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-folder"></use></svg>
아카이브
</div>
</div>
@@ -1659,7 +1718,7 @@
<div class="comparison-stats">
<div class="comparison-stat">
<div class="comparison-stat-icon improved">
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-check"></use></svg>
</div>
<div>
<div class="comparison-stat-value">73</div>
@@ -1668,7 +1727,7 @@
</div>
<div class="comparison-stat">
<div class="comparison-stat-icon optimized">
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-folder"></use></svg>
</div>
<div>
<div class="comparison-stat-value">6</div>
@@ -1692,20 +1751,14 @@
<label class="checkbox-wrapper">
<input type="checkbox" class="checkbox-input" data-type="folder" data-folder="work-projects" checked>
<span class="checkbox-visual">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
<polyline points="20 6 9 17 4 12"/>
</svg>
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><use href="#icon-check"></use></svg>
</span>
</label>
<svg class="folder-icon" viewBox="0 0 24 24" fill="currentColor">
<path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2v11z"/>
</svg>
<svg class="folder-icon" viewBox="0 0 24 24" fill="currentColor"><use href="#icon-folder-solid"></use></svg>
<span class="folder-name">작업 프로젝트</span>
<div class="folder-meta">
<span class="file-count">12개 파일</span>
<svg class="expand-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="6 9 12 15 18 9"/>
</svg>
<svg class="expand-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-chevron-down"></use></svg>
</div>
</div>
<div class="tree-children">
@@ -1714,42 +1767,30 @@
<label class="checkbox-wrapper">
<input type="checkbox" class="checkbox-input" data-type="subfolder" data-folder="work-projects" data-subfolder="2024-reports" checked>
<span class="checkbox-visual">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
<polyline points="20 6 9 17 4 12"/>
</svg>
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><use href="#icon-check"></use></svg>
</span>
</label>
<svg class="child-folder-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/>
</svg>
<svg class="child-folder-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-folder"></use></svg>
<span class="child-folder-name">2024 보고서</span>
</div>
<div class="child-item" data-preview="work-projects/client-files">
<label class="checkbox-wrapper">
<input type="checkbox" class="checkbox-input" data-type="subfolder" data-folder="work-projects" data-subfolder="client-files" checked>
<span class="checkbox-visual">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
<polyline points="20 6 9 17 4 12"/>
</svg>
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><use href="#icon-check"></use></svg>
</span>
</label>
<svg class="child-folder-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/>
</svg>
<svg class="child-folder-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-folder"></use></svg>
<span class="child-folder-name">고객 파일</span>
</div>
<div class="child-item" data-preview="work-projects/archive">
<label class="checkbox-wrapper">
<input type="checkbox" class="checkbox-input" data-type="subfolder" data-folder="work-projects" data-subfolder="archive">
<span class="checkbox-visual">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
<polyline points="20 6 9 17 4 12"/>
</svg>
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><use href="#icon-check"></use></svg>
</span>
</label>
<svg class="child-folder-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/>
</svg>
<svg class="child-folder-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-folder"></use></svg>
<span class="child-folder-name">아카이브</span>
</div>
</div>
@@ -1762,20 +1803,14 @@
<label class="checkbox-wrapper">
<input type="checkbox" class="checkbox-input" data-type="folder" data-folder="personal">
<span class="checkbox-visual">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
<polyline points="20 6 9 17 4 12"/>
</svg>
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><use href="#icon-check"></use></svg>
</span>
</label>
<svg class="folder-icon" viewBox="0 0 24 24" fill="currentColor">
<path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2v11z"/>
</svg>
<svg class="folder-icon" viewBox="0 0 24 24" fill="currentColor"><use href="#icon-folder-solid"></use></svg>
<span class="folder-name">개인</span>
<div class="folder-meta">
<span class="file-count">24개 파일</span>
<svg class="expand-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="6 9 12 15 18 9"/>
</svg>
<svg class="expand-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-chevron-down"></use></svg>
</div>
</div>
<div class="tree-children">
@@ -1784,28 +1819,20 @@
<label class="checkbox-wrapper">
<input type="checkbox" class="checkbox-input" data-type="subfolder" data-folder="personal" data-subfolder="photos">
<span class="checkbox-visual">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
<polyline points="20 6 9 17 4 12"/>
</svg>
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><use href="#icon-check"></use></svg>
</span>
</label>
<svg class="child-folder-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/>
</svg>
<svg class="child-folder-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-folder"></use></svg>
<span class="child-folder-name">사진</span>
</div>
<div class="child-item" data-preview="personal/downloads-archive">
<label class="checkbox-wrapper">
<input type="checkbox" class="checkbox-input" data-type="subfolder" data-folder="personal" data-subfolder="downloads-archive">
<span class="checkbox-visual">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
<polyline points="20 6 9 17 4 12"/>
</svg>
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><use href="#icon-check"></use></svg>
</span>
</label>
<svg class="child-folder-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/>
</svg>
<svg class="child-folder-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-folder"></use></svg>
<span class="child-folder-name">다운로드 아카이브</span>
</div>
</div>
@@ -1818,20 +1845,14 @@
<label class="checkbox-wrapper">
<input type="checkbox" class="checkbox-input" data-type="folder" data-folder="utilities">
<span class="checkbox-visual">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
<polyline points="20 6 9 17 4 12"/>
</svg>
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><use href="#icon-check"></use></svg>
</span>
</label>
<svg class="folder-icon" viewBox="0 0 24 24" fill="currentColor">
<path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2v11z"/>
</svg>
<svg class="folder-icon" viewBox="0 0 24 24" fill="currentColor"><use href="#icon-folder-solid"></use></svg>
<span class="folder-name">유틸리티</span>
<div class="folder-meta">
<span class="file-count">8개 파일</span>
<svg class="expand-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="6 9 12 15 18 9"/>
</svg>
<svg class="expand-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-chevron-down"></use></svg>
</div>
</div>
<div class="tree-children">
@@ -1840,14 +1861,10 @@
<label class="checkbox-wrapper">
<input type="checkbox" class="checkbox-input" data-type="subfolder" data-folder="utilities" data-subfolder="temp-files">
<span class="checkbox-visual">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
<polyline points="20 6 9 17 4 12"/>
</svg>
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><use href="#icon-check"></use></svg>
</span>
</label>
<svg class="child-folder-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/>
</svg>
<svg class="child-folder-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-folder"></use></svg>
<span class="child-folder-name">임시 파일</span>
</div>
</div>
@@ -1863,20 +1880,13 @@
</div>
<div class="preview-container">
<div class="preview-header">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
<circle cx="12" cy="12" r="3"/>
</svg>
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-eye"></use></svg>
<span class="preview-title">폴더 내용</span>
<span class="preview-path" id="previewPath">폴더 선택</span>
</div>
<div class="preview-content" id="previewContent">
<div class="preview-empty">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/>
<line x1="12" y1="11" x2="12" y2="17"/>
<line x1="9" y1="14" x2="15" y2="14"/>
</svg>
<svg class="w-12 h-12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><use href="#icon-folder"></use></svg>
<p>폴더를 클릭하여 내용 미리보기</p>
</div>
</div>
@@ -1897,9 +1907,7 @@
</div>
</div>
<button class="apply-btn" id="applyBtn" disabled>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="20 6 9 17 4 12"/>
</svg>
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-check"></use></svg>
<span>선택 항목 적용</span>
<span class="count-badge" id="applyCount">0</span>
</button>
@@ -1907,12 +1915,10 @@
</div>
<div class="success-overlay" id="successOverlay">
<div class="success-overlay" id="successOverlay">
<div class="success-content">
<div class="success-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<polyline points="20 6 9 17 4 12"/>
</svg>
<svg class="w-12 h-12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><use href="#icon-check"></use></svg>
</div>
<h2 class="success-title">적용 완료!</h2>
<p class="success-subtitle" id="successSubtitle">3개의 폴더가 정리되었습니다</p>
@@ -2042,11 +2048,7 @@
if (!files || files.length === 0) {
previewContent.innerHTML = `
<div class="preview-empty">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/>
<line x1="12" y1="11" x2="12" y2="17"/>
<line x1="9" y1="14" x2="15" y2="14"/>
</svg>
<svg class="w-12 h-12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><use href="#icon-folder"></use></svg>
<p>이 폴더는 비어 있습니다</p>
</div>
`;

104
tailwind.config.js Normal file
View File

@@ -0,0 +1,104 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./index.html", "./scene_*.html"],
theme: {
extend: {
colors: {
primary: {
DEFAULT: '#3b82f6',
light: '#60a5fa',
dark: '#1d4ed8',
},
secondary: {
DEFAULT: '#06b6d4',
light: '#22d3ee',
},
accent: {
DEFAULT: '#0ea5e9',
warn: '#38bdf8',
danger: '#f472b6',
},
surface: {
primary: '#f8fafc',
secondary: '#e2e8f0',
card: '#ffffff',
overlay: 'rgba(14, 165, 233, 0.08)',
},
dark: {
primary: '#0a0e1a',
secondary: '#111827',
card: '#1e293b',
overlay: 'rgba(14, 165, 233, 0.12)',
},
text: {
primary: '#0f172a',
secondary: '#475569',
muted: '#94a3b8',
},
},
fontFamily: {
sans: ['Noto Sans KR', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'],
display: ['Outfit', 'sans-serif'],
},
spacing: {
'1': '4px',
'2': '8px',
'3': '12px',
'4': '16px',
'5': '20px',
'6': '24px',
'8': '32px',
'10': '40px',
'12': '48px',
'16': '64px',
},
borderRadius: {
'sm': '8px',
'md': '12px',
'lg': '20px',
'xl': '28px',
},
boxShadow: {
'sm': '0 2px 8px rgba(14, 165, 233, 0.06)',
'md': '0 4px 20px rgba(14, 165, 233, 0.08)',
'lg': '0 8px 40px rgba(14, 165, 233, 0.12)',
'glow': '0 0 30px rgba(14, 165, 233, 0.25)',
'blue': '0 4px 20px rgba(59, 130, 246, 0.3)',
},
transitionTimingFunction: {
'bounce': 'cubic-bezier(0.34, 1.56, 0.64, 1)',
},
keyframes: {
float: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-10px)' },
},
fadeSlideUp: {
from: { opacity: '0', transform: 'translateY(20px)' },
to: { opacity: '1', transform: 'translateY(0)' },
},
slideIn: {
from: { opacity: '0', transform: 'translateY(30px)' },
to: { opacity: '1', transform: 'translateY(0)' },
},
bounceIn: {
'0%': { transform: 'scale(0)' },
'50%': { transform: 'scale(1.1)' },
'100%': { transform: 'scale(1)' },
},
pulse: {
'0%, 100%': { opacity: '0.5', transform: 'scale(1)' },
'50%': { opacity: '1', transform: 'scale(1.1)' },
},
},
animation: {
'float': 'float 3s ease-in-out infinite',
'fade-slide-up': 'fadeSlideUp 0.5s ease forwards',
'slide-in': 'slideIn 0.5s ease forwards',
'bounce-in': 'bounceIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards',
'pulse-slow': 'pulse 2s ease-in-out infinite',
},
},
},
plugins: [],
}