REEF with Card

card.md

---
name: REEF with Card
tagline: 你的名片，很有深度。
accent: "#ff6b4a"
avatar: reef-mark.svg
---

- [ ] %% card: profile w=6 %% 你的名片，很有深度。
- [ ] %% card: text %% reef.cards/你的名字
- [ ] %% card: embed w=6 %% （你的名字 ＋ 880 個後綴）
- [ ] %% card: feature w=6 img=deck-art.png title=攤開來看 cta=抽一手 href=/draw %%
- [ ] %% card: embed w=6 %% （翻頁鐘）
- [ ] %% card: text %% 一句話就能改
- [ ] %% card: text %% 檔案屬於你
- [ ] %% card: link w=6 %% 立刻試做
- [ ] %% card: form w=6 %% 聯絡我們

你貼的就是這個

<div class="flipclock" id="reef-flip"><div class="fc-group" data-u="h"></div><div class="fc-sep">:</div><div class="fc-group" data-u="m"></div><div class="fc-sep">:</div><div class="fc-group" data-u="s"></div></div><p>這個時鐘是貼進來的一段 HTML。<br>你也可以貼你的。</p><script>(function(){function fcFlip(el,o,n){var top=el.querySelector('.fc-top span'),bot=el.querySelector('.fc-bottom span');if(o==null){top.textContent=n;bot.textContent=n;return;}if(o===n)return;el.classList.remove('fc-anim');el.querySelectorAll('.fc-flap').forEach(function(x){x.remove();});top.textContent=n;bot.textContent=o;var f=document.createElement('div');f.className='fc-flap fc-front';f.innerHTML='<span></span>';f.firstChild.textContent=o;var k=document.createElement('div');k.className='fc-flap fc-back';k.innerHTML='<span></span>';k.firstChild.textContent=n;el.appendChild(f);el.appendChild(k);void el.offsetWidth;el.classList.add('fc-anim');setTimeout(function(){bot.textContent=n;el.classList.remove('fc-anim');f.remove();k.remove();},460);}var root=document.getElementById('reef-flip');function digit(){var d=document.createElement('div');d.className='fc-digit';d.innerHTML='<span class="fc-half fc-top"><span>0</span></span><span class="fc-half fc-bottom"><span>0</span></span>';return d;}var prev={};root.querySelectorAll('.fc-group').forEach(function(g){g.appendChild(digit());g.appendChild(digit());});function tick(){var d=new Date(),v={h:d.getHours(),m:d.getMinutes(),s:d.getSeconds()};Object.keys(v).forEach(function(u){var str=String(v[u]).padStart(2,'0'),cells=root.querySelector('[data-u="'+u+'"]').children;for(var i=0;i<2;i++){fcFlip(cells[i],prev[u+i],str[i]);prev[u+i]=str[i];}});}tick();setInterval(tick,1000);})();</script>

你貼的就是這個

<div class="urlbar" id="reef-tld"><svg class="ub-globe" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg><span class="ub-text"><span class="handle">你的名字</span><span class="tld">.com</span></span></div><p>880 個後綴，隨你挑。</p><script>(function(){var list=["abogado","ac","academy","accountant","accountants","actor","ad","adult","ae","ae.org","aero","aeroport.fr","af","africa","ag","agency","ai","airforce","al","alsace","am","amsterdam","ao","apartments","app","aq","ar","archi","army","art","as","asia","associates","at","attorney","au","auction","audio","auto","autos","avocat.fr","ax","az","ba","baby","band","bank","bar","barcelona","bargains","basketball","bayern","bb","bd","be","beauty","beer","berlin","best","bet","bf","bg","bh","bi","bible","bid","bike","bingo","bio","biz","biz.my","bj","black","blackfriday","blog","blue","bm","bn","bo","boats","bond","boo","boston","bot","boutique","br","br.com","broker","brussels","bs","bt","build","builders","business","buzz","bw","by","bz","bzh","ca","cab","cafe","cam","camera","camp","capetown","capital","car","cards","care","career","careers","cars","casa","case","cash","casino","cat","catering","cc","cd","center","ceo","cf","cfd","cg","ch","chambagri.fr","channel","charity","chat","cheap","chirurgiens-dentistes.fr","christmas","church","ci","city","ck","cl","claims","cleaning","click","clinic","clothing","cloud","club","cm","cn","cn.com","co","co.com","co.jp","co.uk","coach","codes","coffee","college","cologne","com","com.de","com.my","com.nl","community","company","compare","computer","condos","construction","consulting","contact","contractors","cooking","cool","coop","corsica","country","coupons","courses","cr","credit","creditcard","cricket","cruises","cu","cv","cw","cx","cy","cymru","cyou","cz","dad","dance","date","dating","day","de","de.com","deal","dealer","deals","degree","delivery","democrat","dental","dentist","desi","design","dev","diamonds","diet","digital","direct","directory","discount","diy","dj","dk","dm","do","doctor","dog","domains","dot","download","durban","dz","earth","eat","ec","eco","education","ee","eg","email","energy","engineer","engineering","enterprises","equipment","es","esq","estate","et","eu","eu.com","eus","events","exchange","expert","experts-comptables.fr","exposed","express","fail","faith","family","fan","fans","farm","fashion","fast","feedback","fi","film","finance","financial","fish","fishing","fit","fitness","fj","flights","florist","flowers","fly","fm","fo","foo","food","football","forex","forsale","forum","foundation","fr","free","frl","fun","fund","furniture","futbol","fyi","ga","gal","gallery","game","games","garden","gay","gb.net","gd","gdn","ge","gent","geometre-expert.fr","gf","gg","gh","gi","gift","gifts","gives","giving","gl","glass","global","gm","gmbh","gn","gold","golf","gp","gq","gr","gr.com","graphics","gratis","green","gripe","group","gs","gt","guide","guitars","guru","gw","gy","hair","hamburg","haus","health","healthcare","help","here","hiphop","hiv","hk","hm","hn","hockey","holdings","holiday","homes","horse","hospital","host","hosting","hot","house","how","hr","ht","hu","hu.net","icu","id","ie","il","im","immo","immobilien","in","in.net","inc","industries","info","ing","ink","institute","insurance","insure","international","investments","io","iq","irish","is","ist","istanbul","it","it.com","je","jetzt","jewelry","jm","jo","jobs","joburg","jp","jp.net","jpn.com","juegos","kaufen","ke","kg","kh","ki","kids","kim","kitchen","kiwi","kn","koeln","kr","kw","ky","kyoto","kz","la","land","lat","latino","law","lawyer","lb","lc","lease","legal","lgbt","li","life","lifestyle","lighting","limited","limo","link","live","living","lk","llc","loan","loans","locker","lol","london","love","lr","ls","lt","ltd","ltda","lu","luxe","luxury","lv","ly","ma","madrid","maison","makeup","management","market","marketing","markets","mba","mc","md","me","me.uk","med","medecin.fr","media","melbourne","meme","memorial","men","menu","mg","miami","mk","ml","mm","mn","mo","mobi","mobile","moda","moe","moi","mom","money","monster","mortgage","motorcycles","mov","movie","mp","mq","mr","ms","mt","mu","museum","music","mv","mw","mx","my","mz","na","nagoya","name","navy","nc","ne","net","net.my","network","new","news","nexus","nf","ng","ngo","ni","ninja","nl","no","notaires.fr","now","np","nr","nrw","nu","nyc","nz","observer","okinawa","om","one","ong","onl","online","ooo","org","org.my","org.uk","organic","osaka","pa","page","paris","partners","parts","party","pe","pet","pf","pg","ph","pharmacien.fr","phd","phone","photo","photography","photos","pics","pictures","pink","pizza","pk","pl","place","plumbing","plus","pm","pn","poker","porn","port.fr","post","pr","press","pro","productions","prof","promo","properties","property","protection","ps","pt","pub","pw","py","qa","qpon","quebec","quest","racing","radio","radio.am","radio.fm","re","realestate","realty","recipes","red","rehab","reise","reisen","reit","rent","rentals","repair","report","republican","rest","restaurant","review","reviews","rich","rio","rip","ro","rocks","rodeo","rs","rsvp","ru","ru.com","rugby","ruhr","run","rw","ryukyu","sa","sa.com","saarland","sale","salon","sarl","sb","sbs","sc","school","schule","science","scot","sd","se","se.net","security","select","services","sex","sexy","sg","sh","shiksha","shoes","shop","shopping","show","si","singles","site","sk","ski","skin","sl","sm","sn","so","soccer","social","software","solar","solutions","soy","spa","space","sport","spot","sr","srl","ss","st","storage","store","stream","studio","study","style","su","sucks","supplies","supply","support","surf","surgery","sv","swiss","sx","sy","sydney","systems","taipei","talk","tattoo","tax","taxi","tc","td","team","tech","technology","tel","tennis","tf","tg","th","theater","theatre","tickets","tienda","tips","tires","tirol","tj","tk","tl","tm","tn","to","today","tokyo","tools","top","tours","town","toys","tr","trade","trading","training","travel","tt","tube","tv","tw","tz","ua","ug","uk","uk.com","uk.net","university","uno","us","us.com","us.org","uy","uz","vacations","vana","vc","ve","vegas","ventures","vet","veterinaire.fr","vg","vi","viajes","video","villas","vin","vip","vision","vlaanderen","vn","vodka","vote","voting","voto","voyage","vu","wales","wang","watch","watches","webcam","website","wedding","wf","whoswho","wien","wiki","win","wine","work","works","world","ws","wtf","ಭಾರತ","在线","ଭାରତ","ভাৰত","ভারত","八卦","ישראל","公司","网站","移动","我爱你","онлайн","сайт","бг","бел","קום","орг","商标","商店","商城","ею","中文网","中国","娱乐","భారత్","购物","ભારત","भारतम्","भारत","भारोत","网店","संगठन","餐厅","网络","香港","台灣","بازار","بارت","بھارت","البحرين","ڀارت","닷컴","شبكة","机构","健康","招聘","рф","みんな","ευ","ελ","世界","ഭാരതം","ਭਾਰਤ","网址","닷넷","コム","游戏","企业","இந்தியா","xxx","xyz","yachts","ye","yoga","yokohama","you","yt","za","za.com","zip","zm","zone","zuerich","zw"];var el=document.querySelector('#reef-tld .tld');function next(){var n='.'+list[Math.floor(Math.random()*list.length)];el.classList.remove('swap');void el.offsetWidth;el.textContent=n;el.classList.add('swap');}setInterval(next,1400);})();</script>

用你自己的 AI

在 Claude 或 ChatGPT 的網頁版加上 feelreef 的連接器（MCP），然後用說的：

「把我的 Instagram 放到第一格。」
「換一張大頭貼，用這張。」
「加一個會動的時鐘。」

卡就改好了。沒有編輯器要學。