Simple Code Block
// Simple JavaScript function
function greetUser(name) {
const greeting = `Hello, ${name}!`;
return greeting;
}
// Usage example
const user = "UltraViolet";
const message = greetUser(user);
// Arrow function example
const addNumbers = (a, b) => a + b;
const result = addNumbers(5, 3);
PHP Laravel Example
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;
class UserController extends Controller
{
public function index()
{
$users = User::with('profile')
->where('active', true)
->orderBy('created_at', 'desc')
->paginate(15);
return view('users.index', compact('users'));
}
public function store(Request $request)
{
$validated = $request->validate([
'name' => 'required|string|max:255',
'email' => 'required|email|unique:users',
'password' => 'required|min:8'
]);
$user = User::create($validated);
return redirect()
->route('users.show', $user)
->with('success', 'User created successfully!');
}
}Advanced Code Editor Widget
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UltraViolet Admin Dashboard</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<h1 class="display-4 text-center mb-4">Welcome to UltraViolet</h1>
<div class="row g-4">
<div class="col-md-4">
<div class="card h-100">
<div class="card-body text-center">
<i class="material-symbols-rounded text-primary" style="font-size: 3rem;">dashboard</i>
<h5 class="card-title mt-3">Dashboard</h5>
<p class="card-text">Manage your application dashboard</p>
<a href="#" class="btn btn-primary">Go to Dashboard</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100">
<div class="card-body text-center">
<i class="material-symbols-rounded text-success" style="font-size: 3rem;">analytics</i>
<h5 class="card-title mt-3">Analytics</h5>
<p class="card-text">View detailed analytics and reports</p>
<a href="#" class="btn btn-success">View Analytics</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100">
<div class="card-body text-center">
<i class="material-symbols-rounded text-info" style="font-size: 3rem;">settings</i>
<h5 class="card-title mt-3">Settings</h5>
<p class="card-text">Configure your application settings</p>
<a href="#" class="btn btn-info">Open Settings</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html> text_fields
Lines
42
code
Characters
1,247
schedule
Last Modified
2 min ago
language
Language
HTML
CSS Example
/* Custom CSS for UltraViolet */
:root {
--primary-color: #6366f1;
--secondary-color: #64748b;
--success-color: #10b981;
--danger-color: #ef4444;
--warning-color: #f59e0b;
--info-color: #06b6d4;
}
.card {
border-radius: 0.75rem;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.btn-primary {
background: linear-gradient(135deg, var(--primary-color), #8b5cf6);
border: none;
border-radius: 0.5rem;
padding: 0.75rem 1.5rem;
font-weight: 600;
transition: all 0.3s ease;
}
.btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}JSON Configuration
{
"name": "ultraviolet-admin",
"version": "1.0.0",
"description": "Modern Bootstrap 5 Admin Dashboard",
"main": "index.js",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"bootstrap": "^5.3.0",
"apexcharts": "^3.44.0",
"simplebar": "^6.2.5"
},
"devDependencies": {
"vite": "^4.4.0",
"sass": "^1.64.0"
},
"keywords": [
"admin",
"dashboard",
"bootstrap",
"responsive",
"modern"
],
"author": "UltraViolet Team",
"license": "MIT"
}