fix dash style and wording in icon files

2026-04-26 17:34:06 +03:00
commit 021f0bcb23
3 changed files with 537 additions and 0 deletions
@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Cinch Icon Variants</title>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body {
+    background: #0a0a0a;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    gap: 48px;
+    padding: 40px;
+  }
+  h1 {
+    color: #e5e5e5;
+    font-size: 24px;
+    font-weight: 600;
+    letter-spacing: -0.5px;
+  }
+  .comparison-grid {
+    display: flex;
+    gap: 64px;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+  .variant {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
+  }
+  .variant-label {
+    color: #888;
+    font-size: 14px;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+  }
+  .variant-label span {
+    color: #14b8a6;
+  }
+  .icon-wrapper {
+    filter: drop-shadow(0 12px 40px rgba(20, 184, 166, 0.35));
+  }
+  .icon-container {
+    width: 256px;
+    height: 256px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    clip-path: url(#squircle);
+  }
+  .icon-container::after {
+    content: '';
+    position: absolute;
+    top: 0; left: 0;
+    width: 100%; height: 50%;
+    background: linear-gradient(
+      to bottom,
+      rgba(255,255,255,0.12) 0%,
+      rgba(255,255,255,0.03) 100%
+    );
+    pointer-events: none;
+  }
+  .icon {
+    color: #fff;
+    font-size: 120px;
+    filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.25));
+    position: relative;
+    z-index: 1;
+  }
+
+  /* Variant A - Compress */
+  #variant-a {
+    background: linear-gradient(135deg, #0d3b3b 0%, #0a1628 100%);
+  }
+
+  /* Variant B - Bolt */
+  #variant-b {
+    background: linear-gradient(135deg, #0f2e2e 0%, #0d5c5c 100%);
+  }
+
+  /* Variant C - Film */
+  #variant-c {
+    background: linear-gradient(135deg, #0a1628 0%, #14b8a6 100%);
+  }
+
+  .icon-desc {
+    color: #666;
+    font-size: 13px;
+    text-align: center;
+    max-width: 220px;
+    line-height: 1.5;
+  }
+</style>
+</head>
+<body>
+
+<svg width="0" height="0" style="position:absolute">
+  <defs>
+    <clipPath id="squircle" clipPathUnits="objectBoundingBox">
+      <path d="M 0,0.5 C 0,0.112 0.112,0 0.5,0 0.888,0 1,0.112 1,0.5 1,0.888 0.888,1 0.5,1 0.112,1 0,0.888 0,0.5" />
+    </clipPath>
+  </defs>
+</svg>
+
+<h1>Cinch - Icon Variants</h1>
+
+<div class="comparison-grid">
+  <div class="variant">
+    <div class="variant-label"><span>A</span> - Compress</div>
+    <div class="icon-wrapper">
+      <div class="icon-container" id="variant-a">
+        <i class="fa-solid fa-compress icon"></i>
+      </div>
+    </div>
+    <div class="icon-desc">Arrows pointing inward. Direct, literal representation of compression.</div>
+  </div>
+
+  <div class="variant">
+    <div class="variant-label"><span>B</span> - Bolt</div>
+    <div class="icon-wrapper">
+      <div class="icon-container" id="variant-b">
+        <i class="fa-solid fa-bolt icon"></i>
+      </div>
+    </div>
+    <div class="icon-desc">Lightning bolt. Speed, power, effortless — "it's a cinch."</div>
+  </div>
+
+  <div class="variant">
+    <div class="variant-label"><span>C</span> - Film</div>
+    <div class="icon-wrapper">
+      <div class="icon-container" id="variant-c">
+        <i class="fa-solid fa-film icon"></i>
+      </div>
+    </div>
+    <div class="icon-desc">Film strip. Clear video identity. Instantly recognizable.</div>
+  </div>
+</div>
+
+</body>
+</html>