mirrors/notebook
3
0
Fork 0
mirror of https://github.com/indentlabs/notebook.git synced 2025-10-26 11:19:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Clean up multiverse page styling with minimal hover effects

Browse Source 
- Remove elaborate animations and portal effects from universe cards
- Simplify hover states to subtle translateY and shadow changes
- Preserve active card styling on hover with purple border
- Fix ERB syntax errors from nested tags
- Add more writing quotes to quote of the day component

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Andrew Brown 2025-09-28 19:15:17 -07:00
parent 994069881d
commit 2a7994cf7a
2 changed files with 174 additions and 221 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
app/views/main/components/_quote_of_the_day.html.erb
View File

@ -35,7 +35,73 @@
{ text: "A writer is someone who has something to say and knows how to say it.", author: "William Zinsser" },
{ text: "The best way to predict the future is to invent it.", author: "Alan Kay" },
{ text: "Writing is a socially acceptable form of schizophrenia.", author: "E.L. Doctorow" },
{ text: "The only thing worse than starting something and failing is not starting something.", author: "Seth Godin" }
{ text: "The only thing worse than starting something and failing is not starting something.", author: "Seth Godin" },
{ text: "The more you know about the kind of person you're writing for, the better you'll write.", author: "Rudolf Flesch" },
{ text: "The first rule for a good style is to have something to say; in fact, this in itself is almost enough.", author: "Arthur Schopenhauer" },
{ text: "In the beginning there was nothing, which exploded.", author: "Terry Pratchett" },
{ text: "Real stupidity beats artificial intelligence every time.", author: "Terry Pratchett" },
{ text: "There is no greater agony than bearing an untold story inside you.", author: "Maya Angelou" },
{ text: "If there's a book that you want to read, but it hasn't been written yet, then you must write it.", author: "Toni Morrison" },
{ text: "You have to write the book that wants to be written.", author: "Madeleine L'Engle" },
{ text: "Substitute 'damn' every time you're inclined to write 'very;' your editor will delete it and the writing will be just as it should be.", author: "Mark Twain" },
{ text: "One day I will find the right words, and they will be simple.", author: "Jack Kerouac" },
{ text: "And by the way, everything in life is writable about if you have the outgoing guts to do it, and the imagination to improvise. The worst enemy to creativity is self-doubt.", author: "Sylvia Plath" },
{ text: "You never have to change anything you got up in the middle of the night to write.", author: "Saul Bellow" },
{ text: "The only way to do great work is to love what you do.", author: "Steve Jobs" },
{ text: "No tears in the writer, no tears in the reader. No surprise in the writer, no surprise in the reader.", author: "Robert Frost" },
{ text: "Don't tell me the moon is shining; show me the glint of light on broken glass.", author: "Anton Chekhov" },
{ text: "Don't bend; don't water it down; don't try to make it logical; don't edit your own soul according to the fashion.", author: "Franz Kafka" },
{ text: "There is no real ending. It’s just the place where you stop the story.", author: "Frank Herbert" },
{ text: "Start writing, no matter what. The water does not flow until the faucet is turned on.", author: "Louis L'Amour" },
{ text: "Writing is a socially acceptable form of schizophrenia.", author: "E.L. Doctorow" },
{ text: "After nourishment, shelter and companionship, stories are the thing we need most in the world.", author: "Philip Pullman" },
{ text: "Stories may well be lies, but they are good lies that say true things, and which can sometimes pay the rent.", author: "Neil Gaiman" },
{ text: "There are three rules for writing a novel. Unfortunately, no one knows what they are.", author: "W. Somerset Maugham" },
{ text: "A writer is someone for whom writing is more difficult than it is for other people.", author: "Thomas Mann" },
{ text: "A word after a word after a word is power.", author: "Margaret Atwood"},
{ text: "There is something delicious about writing the first words of a story. You never quite know where they'll take you.", author: "Beatrix Potter" },
{ text: "Tears are words that need to be written.", author: "Paulo Coehlo" },
{ text: "Tomorrow may be hell, but today was a good writing day, and on the good writing days nothing else matters.", author: "Neil Gaiman" },
{ text: "You can make anything by writing.", author: "C. S. Lewis" },
{ text: "Always be a poet, even in prose.", author: "Charles Baudelaire" },
{ text: "This is how you do it: you sit down at the keyboard and you put one word after another until its done. It's that easy, and that hard.", author: "Neil Gaiman" },
{ text: "I write to give myself strength. I write to be the characters that I am not. I write to explore all the things I'm afraid of.", author: "Joss Whedon" },
{ text: "A well-composed book is a magic carpet on which we are wafted to a world that we cannot enter in any other way.", author: "Caroline Gordon" },
{ text: "If my doctor told me I had only six minutes to live, I wouldn't brood. I'd type a little faster.", author: "Isaac Asimov" },
{ text: "Write what you know. That should leave you with a lot of free time.", author: "Howard Nemerov" },
{ text: "The purpose of a writer is to keep civilization from destroying itself.", author: "Albert Camus" },
{ text: "The true alchemists do not change lead into gold; they change the world into words.", author: "William H. Gass" },
{ text: "Learn the rules like a pro, so you can break them like an artist.", author: "Pablo Picasso" },
{ text: "Write the kind of story you would like to read. People will give you all sorts of advice about writing, but if you are not writing something you like, no one else will like it either.", author: "Meg Cabot" },
{ text: "A little talent is a good thing to have if you want to be a writer. But the only real requirement is the ability to remember every scar.", author: "Stephen King" },
{ text: "I hate writing, I love having written.", author: "Dorothy Parker" },
{ text: "Easy reading is damn hard writing.", author: "Nathaniel Hawthorne" },
{ text: "I love writing. I love the swirl and swing of words as they tangle with human emotions.", author: "James Michener" },
{ text: "Writing is something you do alone. Its a profession for introverts who want to tell you a story but don't want to make eye contact while doing it.", author: "John Green" },
{ text: "Closed in a room, my imagination becomes the universe, and the rest of the world is missing out.", author: "Criss Jami" },
{ text: "Any word you have to hunt for in a thesaurus is the wrong word. There are no exceptions to this rule.", author: "Stephen King" },
{ text: "We can destroy what we have written, but we cannot unwrite it.", author: "Anthony Burgess" },
{ text: "The most valuable of all talents is that of never using two words when one will do.", author: "Thomas Jefferson" },
{ text: "Your intuition knows what to write, so get out of the way.", author: "Ray Bradbury" },
{ text: "No one says a novel has to be one thing. It can be anything it wants to be, a vaudeville show, the six o’clock news, the mumblings of wild men saddled by demons.", author: "Ishmael Reed" },
{ text: "So long as you write what you wish to write, that is all that matters; and whether it matters for ages or only for hours, nobody can say.", author: "Virginia Woolf" },
{ text: "Perhaps I write for no one. Perhaps for the same person children are writing for when they scrawl their names in the snow.", author: "Margaret Atwood" },
{ text: "I have only made this letter longer because I have not had the time to make it shorter.", author: "Blaise Pascal" },
{ text: "In the planning stage of a book, don't plan the ending. It has to be earned by all that will go before it.", author: "Rose Tremain" },
{ text: "Better to write for yourself and have no public, than to write for the public and have no self.", author: "Cyril Connolly" },
{ text: "Cram your head with characters and stories. Abuse your library privileges.", author: "Jennifer Weiner" },
{ text: "One should use common words to say uncommon things.", author: "Arthur Schopenhauer" },
{ text: "All that happens to us, including our humiliations, our misfortunes, our embarrassments, all is given to us as raw material, as clay, so that we may shape our art.", author: "Jorge Luis Borges" },
{ text: "You can fix anything but a blank page.", author: "Nora Roberts" },
{ text: "When I write, I feel like an armless, legless man with a crayon in his mouth.", author: "Kurt Vonnegut" },
{ text: "The hard part about writing a novel is finishing it.", author: "Ernest Hemingway" },
{ text: "The best time for planning a book is while you're doing the dishes.", author: "Agatha Chrstie" },
{ text: "It's none of their business that you have to learn how to write. Let them think you were born that way.", author: "Ernest Hemingway" },
{ text: "Everybody is talented because everybody who is human has something to express.", author: "Brenda Ueland" },
{ text: "First forget inspiration. Habit is more dependable. Habit will sustain you whether you're inspired or not.", author: "Octavia Butler" },
{ text: "A professional writer is an amateur who didn't quit.", author: "Richard Bach" },
{ text: "If a story is in you, it has to come out.", author: "William Faulkner" },
{ text: "Some writers enjoy writing, I am told. Not me. I enjoy having written.", author: "George R.R. Martin" }
]
# Use day of year to ensure same quote per day

327
app/views/universes/hub.html.erb
View File

@ -1,164 +1,47 @@
<style>
@keyframes gentle-drift {
0%, 100% {
transform: scale(1.01) translateX(0);
}
25% {
transform: scale(1.015) translateX(-1%);
}
50% {
transform: scale(1.02) translateX(0);
}
75% {
transform: scale(1.015) translateX(1%);
}
}
.breathing-header {
animation: gentle-drift 12s ease-in-out infinite;
}
/* Simplified universe portal effect */
.universe-portal {
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
/* Event horizon (dark center) - simple fade in */
.universe-portal::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 35%;
height: 35%;
transform: translate(-50%, -50%);
background: radial-gradient(circle at center,
rgba(0, 0, 0, 0.8) 0%,
rgba(0, 0, 0, 0.4) 40%,
rgba(0, 0, 0, 0) 70%
);
border-radius: 50%;
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
z-index: 2;
}
/* Purple glow - static, no animation */
.universe-portal::after {
content: '';
position: absolute;
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;
background: radial-gradient(circle at center,
transparent 30%,
rgba(147, 51, 234, 0.2) 50%,
rgba(168, 85, 247, 0.1) 70%,
transparent 100%
);
border-radius: 50%;
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
z-index: 1;
}
/* Simple hover effects for portal */
li:hover .universe-portal {
transform: scale(0.96);
box-shadow:
0 0 30px rgba(147, 51, 234, 0.6),
0 0 60px rgba(168, 85, 247, 0.3),
inset 0 0 60px rgba(0, 0, 0, 0.5);
}
li:hover .universe-portal::before {
opacity: 1;
}
li:hover .universe-portal::after {
opacity: 1;
}
/* Simplified card black hole effect */
/* Clean, minimal card styles */
.universe-card {
position: relative;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.4s ease;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
background: white;
}
/* Single gradient background on hover */
.universe-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(ellipse at center,
rgba(147, 51, 234, 0.05) 0%,
rgba(168, 85, 247, 0.02) 50%,
transparent 100%
);
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
z-index: 0;
}
/* Card hover state - simple transitions only */
.universe-card:hover {
transform: scale(0.98);
box-shadow:
0 10px 40px rgba(147, 51, 234, 0.3),
0 0 80px rgba(147, 51, 234, 0.15) inset;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
border-color: #e5e7eb;
}
.universe-card:hover::before {
opacity: 1;
/* Keep active styling on hover */
.universe-active:hover {
border-color: #9333ea;
box-shadow: 0 0 0 1px #9333ea, 0 4px 12px rgba(147, 51, 234, 0.15);
}
.universe-card > * {
position: relative;
z-index: 1;
}
.universe-card-link {
text-decoration: none;
color: inherit;
display: block;
height: 100%;
}
/* All Universes card hover effect */
.all-universes-card {
transition: transform 0.3s ease, box-shadow 0.4s ease;
.universe-image {
transition: opacity 0.2s ease;
}
.all-universes-card:hover {
transform: scale(0.98) translateY(-2px);
box-shadow:
0 20px 40px rgba(147, 51, 234, 0.3),
0 0 60px rgba(168, 85, 247, 0.2);
}
.all-universes-gradient-border {
transition: opacity 0.3s ease;
}
.all-universes-card:hover .all-universes-gradient-border {
.universe-card:hover .universe-image {
opacity: 0.9;
}
/* Active universe styling - subtle */
.universe-active {
border-color: #9333ea;
box-shadow: 0 0 0 1px #9333ea;
}
</style>
<div class="relative bg-purple-900">
<div class="h-56 bg-indigo-600 sm:h-72 md:absolute md:left-0 md:h-full md:w-1/2 overflow-hidden">
<%= image_tag asset_path("card-headers/universes.webp"), class: 'w-full h-full object-cover breathing-header' %>
<%= image_tag asset_path("card-headers/universes.webp"), class: 'w-full h-full object-cover' %>
</div>
<div class="relative max-w-7xl mx-auto px-4 py-12 sm:px-6 lg:px-8 lg:py-16">
<div class="md:ml-auto md:w-1/2 md:pl-10">
@ -189,92 +72,86 @@
</div>
</div>
<section class="container mx-auto mt-8">
<ul role="list" class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
<li class="col-span-1 flex flex-col text-center bg-gradient-to-br from-purple-50 via-white to-blue-50 rounded-lg shadow-lg border-2 <%= @universe_scope.nil? ? 'border-purple-500 ring-2 ring-purple-300 ring-offset-2' : 'border-transparent' %> bg-clip-padding relative overflow-hidden group all-universes-card">
<% if @universe_scope.nil? %>
<div class="absolute top-2 right-2 z-10">
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-bold bg-purple-600 text-white shadow-sm">
<i class="material-icons text-xs mr-1">check_circle</i>
Active
</span>
</div>
<% end %>
<div class="absolute inset-0 bg-gradient-to-br from-purple-400 via-pink-400 to-blue-400 opacity-50 transition-opacity duration-300 all-universes-gradient-border" style="margin: -2px; border-radius: 0.5rem; z-index: -1;"></div>
<%= link_to dashboard_path(universe: 'all'), class: 'flex flex-col h-full p-8 relative bg-white rounded-lg', style: 'margin: 2px;' do %>
<div class="flex-1 flex flex-col">
<div class="w-48 h-48 mx-auto rounded-full bg-gradient-to-br from-purple-100 via-pink-50 to-blue-100 flex items-center justify-center transition-all duration-300 group-hover:scale-105 relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-r from-purple-200 via-transparent to-blue-200 opacity-50 animate-pulse"></div>
<div class="text-center relative z-10">
<div class="relative">
<i class="material-icons text-6xl text-transparent bg-gradient-to-br from-purple-600 to-blue-600 bg-clip-text relative"><%= Universe.icon %></i>
</div>
<p class="text-xs font-bold mt-2 text-transparent bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text uppercase tracking-wider">All Worlds</p>
</div>
<section class="container mx-auto mt-8 px-4">
<ul role="list" class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
<!-- All Universes Card -->
<li class="col-span-1 flex flex-col">
<% active_class = @universe_scope.nil? ? 'universe-active border-purple-500' : 'border-gray-200' %>
<%= link_to dashboard_path(universe: 'all'), class: "universe-card universe-card-link flex flex-col h-full bg-white rounded-lg border #{active_class} relative" do %>
<% if @universe_scope.nil? %>
<div class="absolute top-3 right-3 z-10">
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-800">
Active
</span>
</div>
<h3 class="mt-6 text-gray-900 text-sm font-bold group-hover:text-purple-700">View Everything</h3>
<dl class="mt-1 flex-grow flex flex-col justify-between">
<dd class="text-gray-600 text-sm">See content from <em>all</em> your universes together in one place</dd>
</dl>
<div class="mt-4">
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gradient-to-r from-purple-100 to-blue-100 text-purple-800 border border-purple-200">
<i class="material-icons text-sm mr-1">all_inclusive</i>
No Filter Active
<% end %>
<div class="flex-1 flex flex-col p-6">
<div class="w-32 h-32 mx-auto rounded-full bg-gradient-to-br from-purple-50 to-blue-50 flex items-center justify-center mb-4">
<i class="material-icons text-4xl text-purple-600"><%= Universe.icon %></i>
</div>
<h3 class="text-center text-base font-medium text-gray-900 mb-2">View Everything</h3>
<p class="text-center text-sm text-gray-600 flex-grow">See content from all your universes together</p>
<div class="mt-4 text-center">
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-700">
No Filter
</span>
</div>
</div>
<% end %>
</li>
<!-- Individual Universe Cards -->
<% @universes.each do |universe| %>
<li class="col-span-1 flex flex-col text-center bg-white rounded-lg shadow universe-card <%= @universe_scope&.id == universe.id ? 'ring-2 ring-purple-500 ring-offset-2' : '' %> relative">
<% if @universe_scope&.id == universe.id %>
<div class="absolute top-2 right-2 z-10">
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-bold bg-purple-600 text-white shadow-sm">
<i class="material-icons text-xs mr-1">check_circle</i>
Active
</span>
</div>
<% end %>
<%= link_to dashboard_path(universe: universe.id), class: 'universe-card-link flex flex-col h-full' do %>
<div class="flex-1 flex flex-col p-8">
<%= image_tag universe.random_image_including_private, class: 'w-48 h-48 flex-shrink-0 mx-auto rounded-full border-2 border-purple-800 universe-portal' %>
<h3 class="mt-6 text-gray-900 text-sm font-medium"><%= universe.name %></h3>
<dl class="mt-1 flex-grow flex flex-col justify-between">
<dd class="text-gray-500 text-sm"><%= universe.description %></dd>
<dd class="mt-3">
<% if universe.user_id == current_user.id %>
<span class="px-2 py-1 text-green-800 text-xs font-medium bg-green-100 rounded-full">Owner</span>
<% else %>
<span class="px-2 py-1 text-green-800 text-xs font-medium bg-green-100 rounded-full">Collaborator</span>
<% end %>
</dd>
</dl>
<li class="col-span-1 flex flex-col">
<% active_class = @universe_scope&.id == universe.id ? 'universe-active border-purple-500' : 'border-gray-200' %>
<%= link_to dashboard_path(universe: universe.id), class: "universe-card universe-card-link flex flex-col h-full bg-white rounded-lg border #{active_class} relative" do %>
<% if @universe_scope&.id == universe.id %>
<div class="absolute top-3 right-3 z-10">
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-800">
Active
</span>
</div>
<% end %>
<div class="flex-1 flex flex-col p-6">
<%= image_tag universe.random_image_including_private, class: 'universe-image w-32 h-32 flex-shrink-0 mx-auto rounded-full object-cover mb-4 border border-gray-200' %>
<h3 class="text-center text-base font-medium text-gray-900 mb-2"><%= universe.name %></h3>
<p class="text-center text-sm text-gray-600 flex-grow line-clamp-2"><%= universe.description %></p>
<div class="mt-4 text-center">
<% if universe.user_id == current_user.id %>
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
Owner
</span>
<% else %>
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
Collaborator
</span>
<% end %>
</div>
</div>
<% end %>
</li>
<% end %>
</ul>
<!-- Universe Count and Create Section -->
<div class="mt-12 mb-8">
<div class="max-w-4xl mx-auto px-6">
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
<div class="max-w-4xl mx-auto">
<div class="bg-white rounded-lg border border-gray-200 p-6">
<div class="flex items-center justify-between">
<div class="flex-1">
<% universe_count = @universes.size %>
<% is_premium = current_user.on_premium_plan? %>
<% if is_premium %>
<!-- Premium user display -->
<div class="flex items-center">
<div class="flex-shrink-0">
<div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-purple-700 rounded-full flex items-center justify-center">
<i class="material-icons text-white">all_inclusive</i>
<div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center">
<i class="material-icons text-purple-600">all_inclusive</i>
</div>
</div>
<div class="ml-4">
<h3 class="text-lg font-semibold text-gray-900">
<h3 class="text-lg font-medium text-gray-900">
<%= universe_count %> <%= 'universe'.pluralize(universe_count) %>
</h3>
<p class="text-sm text-gray-500">
@ -289,18 +166,12 @@
<div class="relative">
<svg class="w-12 h-12 transform -rotate-90">
<circle cx="24" cy="24" r="20" stroke="#E5E7EB" stroke-width="4" fill="none" />
<circle cx="24" cy="24" r="20"
stroke="url(#gradient)"
stroke-width="4"
<circle cx="24" cy="24" r="20"
stroke="#9333EA"
stroke-width="4"
fill="none"
stroke-dasharray="<%= (universe_count / 5.0 * 125.6).round %> 125.6"
stroke-linecap="round" />
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#9333EA" />
<stop offset="100%" stop-color="#A855F7" />
</linearGradient>
</defs>
</svg>
<div class="absolute inset-0 flex items-center justify-center">
<span class="text-sm font-bold text-gray-900"><%= universe_count %>/5</span>
@ -308,7 +179,7 @@
</div>
</div>
<div class="ml-4">
<h3 class="text-lg font-semibold text-gray-900">
<h3 class="text-lg font-medium text-gray-900">
<%= universe_count %> <%= 'universe'.pluralize(universe_count) %>
</h3>
<p class="text-sm text-gray-500">
@ -322,35 +193,51 @@
</div>
<% end %>
</div>
<div class="ml-6">
<% if !is_premium && universe_count >= 5 %>
<div class="text-right">
<p class="text-xs text-gray-500 mb-2">Need more universes?</p>
<%= link_to subscription_path, class: "inline-flex items-center px-4 py-2 border border-purple-200 text-sm font-medium rounded-md text-purple-700 bg-white hover:bg-purple-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 transition-all duration-200" do %>
<%= link_to subscription_path, class: "inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500" do %>
<i class="material-icons mr-1 text-base">info</i>
View Plan Options
<% end %>
</div>
<% else %>
<%= link_to new_universe_path, class: "inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 transition-all duration-200 shadow-lg hover:shadow-xl" do %>
<i class="material-icons mr-2">add_circle</i>
<%= link_to new_universe_path, class: "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500" do %>
<i class="material-icons mr-2 text-base">add</i>
Create New Universe
<% end %>
<% end %>
</div>
</div>
<% if !is_premium && universe_count >= 4 && universe_count < 5 %>
<!-- Info note when close to limit -->
<div class="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-md">
<div class="flex">
<div class="flex-shrink-0">
<i class="material-icons text-blue-600 text-sm">lightbulb</i>
<i class="material-icons text-blue-600 text-sm">info</i>
</div>
<div class="ml-2">
<p class="text-sm text-blue-800">
<strong>Tip:</strong> You're using <%= universe_count %> of your 5 Starter plan universes. Premium plans include unlimited universes plus many other features. <%= link_to "Learn more", subscription_path, class: "font-medium underline hover:no-underline" %>
<div class="ml-3 flex-1">
<p class="text-sm text-blue-700">
You're approaching your universe limit. Consider upgrading to Premium for unlimited universes.
</p>
</div>
</div>
</div>
<% end %>
<% if !is_premium && universe_count >= 5 %>
<!-- Warning when at limit -->
<div class="mt-4 p-3 bg-yellow-50 border border-yellow-200 rounded-md">
<div class="flex">
<div class="flex-shrink-0">
<i class="material-icons text-yellow-600 text-sm">warning</i>
</div>
<div class="ml-3 flex-1">
<p class="text-sm text-yellow-700">
You've reached your universe limit. Upgrade to Premium to create more universes.
</p>
</div>
</div>