Spaces:

build-small-hackathon
/

iris

Paused

App Files Files Community

nextmarte Claude Opus 4.8 commited on Jun 13

Commit

e62437d

1 Parent(s): a960968

ui: brand mark = minimal line eye (option 2); remove preview page

Browse files

Files changed (2) hide show

frontend/index.html +4 -28
frontend/marks.html +0 -95

frontend/index.html CHANGED Viewed

@@ -24,34 +24,10 @@
   <main id="stage" aria-label="Iris. Tap to describe, hold to ask, double tap for live mode.">
     <div id="halo" aria-hidden="true"></div>
     <div id="brand" aria-hidden="true">
-      <svg viewBox="0 0 100 100" class="iris-mark">
-        <defs>
-          <radialGradient id="irisG" cx="42%" cy="40%" r="62%">
-            <stop offset="0%" stop-color="#ffe39a"/>
-            <stop offset="38%" stop-color="#ff9d3c"/>
-            <stop offset="72%" stop-color="#ff7a18"/>
-            <stop offset="100%" stop-color="#5e2400"/>
-          </radialGradient>
-        </defs>
-        <path d="M5 50 Q50 14 95 50 Q50 86 5 50 Z" fill="none" stroke="rgba(255,255,255,.55)" stroke-width="3.2"/>
-        <circle cx="50" cy="50" r="23" fill="url(#irisG)"/>
-        <g stroke="rgba(40,16,0,.32)" stroke-width="1.4" stroke-linecap="round">
-          <line x1="50" y1="29" x2="50" y2="39"/>
-          <line x1="50" y1="29" x2="50" y2="39" transform="rotate(30 50 50)"/>
-          <line x1="50" y1="29" x2="50" y2="39" transform="rotate(60 50 50)"/>
-          <line x1="50" y1="29" x2="50" y2="39" transform="rotate(90 50 50)"/>
-          <line x1="50" y1="29" x2="50" y2="39" transform="rotate(120 50 50)"/>
-          <line x1="50" y1="29" x2="50" y2="39" transform="rotate(150 50 50)"/>
-          <line x1="50" y1="29" x2="50" y2="39" transform="rotate(180 50 50)"/>
-          <line x1="50" y1="29" x2="50" y2="39" transform="rotate(210 50 50)"/>
-          <line x1="50" y1="29" x2="50" y2="39" transform="rotate(240 50 50)"/>
-          <line x1="50" y1="29" x2="50" y2="39" transform="rotate(270 50 50)"/>
-          <line x1="50" y1="29" x2="50" y2="39" transform="rotate(300 50 50)"/>
-          <line x1="50" y1="29" x2="50" y2="39" transform="rotate(330 50 50)"/>
-        </g>
-        <circle cx="50" cy="50" r="23" fill="none" stroke="rgba(255,255,255,.25)" stroke-width="1.2"/>
-        <circle cx="50" cy="50" r="9.5" fill="#08080d"/>
-        <circle cx="44.5" cy="44.5" r="3.2" fill="#fff" opacity=".92"/>
       </svg>
     </div>
     <p id="status" role="status" aria-live="assertive">Iris</p>

   <main id="stage" aria-label="Iris. Tap to describe, hold to ask, double tap for live mode.">
     <div id="halo" aria-hidden="true"></div>
     <div id="brand" aria-hidden="true">
+      <svg viewBox="0 0 120 120" class="iris-mark">
+        <path d="M14 60 Q60 26 106 60 Q60 94 14 60 Z" fill="none" stroke="#fff" stroke-width="3.2" stroke-linejoin="round" opacity=".92"/>
+        <circle cx="60" cy="60" r="17" fill="none" stroke="#fff" stroke-width="3.2" opacity=".92"/>
+        <circle cx="60" cy="60" r="6" fill="#ff7a18"/>
       </svg>
     </div>
     <p id="status" role="status" aria-live="assertive">Iris</p>

frontend/marks.html DELETED Viewed

@@ -1,95 +0,0 @@
-<!DOCTYPE html>
-<html lang="pt">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>Iris marks</title>
-  <link rel="stylesheet" href="/static/style.css" />
-  <style>
-    body { overflow: auto; background: #05060a; color: #fff; font-family: var(--font-body); padding: 6vh 4vw 12vh; }
-    h1 { font-family: var(--font-display); font-weight: 700; font-size: 22px; text-align: center; margin-bottom: 4px; }
-    p.sub { text-align: center; color: rgba(255,255,255,.6); font-size: 14px; margin-bottom: 36px; }
-    .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; max-width: 1100px; margin: 0 auto; }
-    .card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.10); border-radius: 22px;
-            padding: 30px 18px 22px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
-    .num { font-family: var(--font-display); font-weight: 700; color: var(--accent); font-size: 14px; letter-spacing: .14em; }
-    .mark { height: 96px; display: flex; align-items: center; justify-content: center; }
-    .mark svg { height: 92px; width: auto; display: block; }
-    .word { font-family: var(--font-display); font-weight: 700; font-size: 30px; letter-spacing: .04em; }
-    .desc { color: rgba(255,255,255,.6); font-size: 13px; line-height: 1.4; }
-    .wm-only .word { font-size: 46px; }
-    .accent-rule { width: 46px; height: 3px; background: var(--accent); border-radius: 2px; margin-top: 2px; }
-  </style>
-</head>
-<body>
-  <h1>Iris — escolha a marca</h1>
-  <p class="sub">monocromático, o laranja só num detalhe. me diz o número.</p>
-  <div class="grid">
-    <!-- 1 — wordmark only -->
-    <div class="card wm-only">
-      <span class="num">1</span>
-      <div class="mark"><div class="word">Iris</div></div>
-      <div class="accent-rule"></div>
-      <div class="desc">Só o nome (sem ícone). Limpo, impossível de errar.</div>
-    </div>
-    <!-- 2 — line eye -->
-    <div class="card">
-      <span class="num">2</span>
-      <div class="mark">
-        <svg viewBox="0 0 120 120" aria-hidden="true">
-          <path d="M14 60 Q60 26 106 60 Q60 94 14 60 Z" fill="none" stroke="#fff" stroke-width="3.2" stroke-linejoin="round" opacity=".92"/>
-          <circle cx="60" cy="60" r="17" fill="none" stroke="#fff" stroke-width="3.2" opacity=".92"/>
-          <circle cx="60" cy="60" r="6" fill="#ff7a18"/>
-        </svg>
-      </div>
-      <div class="word">Iris</div>
-      <div class="desc">Olho em linha fina. Pupila laranja. Elegante, não cartoon.</div>
-    </div>
-    <!-- 3 — concentric lens rings -->
-    <div class="card">
-      <span class="num">3</span>
-      <div class="mark">
-        <svg viewBox="0 0 120 120" aria-hidden="true">
-          <circle cx="60" cy="60" r="34" fill="none" stroke="#fff" stroke-width="2.4" opacity=".35"/>
-          <circle cx="60" cy="60" r="24" fill="none" stroke="#fff" stroke-width="2.6" opacity=".6"/>
-          <circle cx="60" cy="60" r="13" fill="none" stroke="#fff" stroke-width="3" opacity=".95"/>
-          <circle cx="60" cy="60" r="5" fill="#ff7a18"/>
-        </svg>
-      </div>
-      <div class="word">Iris</div>
-      <div class="desc">Lente / íris abstrata. Geométrico e premium.</div>
-    </div>
-    <!-- 4 — soft iris (ring + lashes) -->
-    <div class="card">
-      <span class="num">4</span>
-      <div class="mark">
-        <svg viewBox="0 0 120 120" aria-hidden="true">
-          <circle cx="60" cy="62" r="22" fill="none" stroke="#fff" stroke-width="3.2" opacity=".92"/>
-          <circle cx="60" cy="62" r="7" fill="#ff7a18"/>
-          <path d="M30 40 Q60 18 90 40" fill="none" stroke="#fff" stroke-width="3.2" stroke-linecap="round" opacity=".9"/>
-        </svg>
-      </div>
-      <div class="word">Iris</div>
-      <div class="desc">Íris + um traço de "olhar" acima. Suave e humano.</div>
-    </div>
-    <!-- 5 — monogram i (dot = eye) -->
-    <div class="card">
-      <span class="num">5</span>
-      <div class="mark">
-        <svg viewBox="0 0 120 120" aria-hidden="true">
-          <rect x="53" y="50" width="14" height="50" rx="7" fill="#fff" opacity=".95"/>
-          <circle cx="60" cy="34" r="11" fill="#ff7a18"/>
-        </svg>
-      </div>
-      <div class="word">Iris</div>
-      <div class="desc">Monograma "i" com o ponto = o olho (laranja). Minimal e esperto.</div>
-    </div>
-  </div>
-</body>
-</html>